新プロジェクト開始！
新年度を迎えて、思う所もあり新しい挑戦として「新プロジェクト」を立ち上げることに！
まずは、このブログに紐づけて作ってあるWebサービスのリニューアルから。
デザインについては放置してきていたため、今回デザインも「今時に」リニューアルさせる！
調べてみたところ、Bootstrapという物を使うと手軽にレスポンシブデザインにも対応させることが出来て便利なのが分かりました！
昨日はこのBootstrapフレームワークを使って、既存のWebサービスを新デザインにしてみました(^-^)v
でもですねぇ、適当なBootstrapテンプレートを適用したので、ちぐはぐなデザインになってしまいました(^-^;
生命保険計算サービスなのに、下記の様な海辺の絵に。
このままだとイマイチ過ぎるので、きちんとしたBootstrapのデザインに変えていきたいと思います(^-^)/
Bootstrapエディタ
昨日WebサイトをBootstrapに対応させてみて思ったのですが、普通のテキストエディタだけで作業をするのは、やりづら過ぎるということ。
Bootstrapのタグやクラスの書き方も理解していない状態で、一から勉強しつつデザインを適用していくのは地道過ぎてきつい作業(-_-;
なので、Bootstrapに特化したエディタで書ければ簡単じゃないかな、という事で、昨夜色々と調べて探しまくりました！
で、その中でBootstrapエディタは色々あることが分かってきました。
特に最近のお手軽さを強調したオンライン上で手軽にデザインを確認したり、コードを書き換えて即時反映する様なものも結構ありました。
ですが、きちんとローカルマシンにインストールして使えるソフトウェアの方が性に合うので、アプリケーションタイプのエディタを探し試してみる事にします。
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。
そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。
Pingendo – web authoring with comfort
PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OSX/Windows/Linux用が用意されています。細かいプロパティ含めてカスタマイズできます。
で、良さげなのが「Pingendo」かな、と。
Pingendoのサイトに行ってOSを選択します。
Mac、Windows、Linuxと主要なデスクトップOSが揃っています(^-^)v
私はWindowsなのでWindowsを選ぶと64bitと32bitが選べて、64bit版を選択しました。
ダウンロードして解凍すると下記のsetup.exeが手に入ります。
PingendoのSetup画面です。「I Agree」ボタンを押します。
フォルダを選択して「Install」ボタンを押します。
インストール中。
インストール完了！「Close」ボタンを押します。
インストールされた「Pingendo」ソフトウェア。
これでいつでもBootstrapエディタを使う事が出来ます！
オンラインのエディタだと突然サービス終了とかされると非常に困りますが、ローカルにインストールしてしまえばエディタ配布サイトが終了してしまっても、自分のローカルのエディタは残って使い続ける事ができますからね～(^-^)v
昨今のソーシャルゲームもゲーム会社が倒産してしまえばもう遊べなくなってしまいますが、据え置き型のゲームカートリッジを購入した場合には会社が倒産しようがずっと遊べるのに似ています。
Pingendoでデザイン！
Pingendoの起動画面。初回起動時にはupdateがあるかチェックが走ります。
起動した画面。最初は空っぽの状態で起動します。
昨日、適当なBootstrapテンプレートのデザインを適用したページを表示してみました。
ただ、既にテンプレートが適用されたものをいじくるのは、なかなか難儀なので、新規にページを作りこんでみます！
まずは左上のファイルマークの「新規作成」ボタンを押します。
すると「Default empty page」と「Landing page」が選べます。
今回は「Default empty page」を選択して、一から配置してみたいと思います。
空ページを新規作成した所。左の「SECTIONS」と「COMPONENTS」をドラッグ＆ドロップで配置していきます。
HEADERS、CONTENTSを配置し、さらにFORMSを配置するためにドラッグ＆ドロップ中の場面。
で、このまま色々と直せると良いのですが、うまく書いてあるテキスト本文とかを修正できなかったので、ここまで作った「Untitled.html」を保存して、テキストエディタで追加＆修正を行いました(^-^;
この辺の使い勝手も上がると良いのですが。
それか、私がきちんと使い方を分かっていないだけかもしれません。
Pingendoエディタで作ったWebページ
で、ひとしきり追加＆修正して自分のページの情報を乗せ換えたのが下記ページになります。
作ったページは右上の表示サイズボタンを押せばチェック出来ます。これは最大表示時。
これはスマホ表示サイズ。
こちらはタブレット表示サイズ。
で、さらに下の「HTML」をクリックすると、HTMLソースが表示されます。
「LESS/CSS」をクリックすればCSSが見られます。
パソコン表示の完成形！
スマホ表示の完成形！
昨日までのダサダサ表示とは違います(^-^)v
これ、良いですね！
Bootstrap！
実際に作ったページも公開しておきますので、パソコンやスマホ、タブレット等で表示してみてもらえると嬉しいです(^-^)v
【Bootstrap適用後のWebサービス】
マネー報道 WebService～生命保険計算～
マネー報道 WebService～生命保険計算結果～
簡単にWebサイトの見た目の調整が出来て、簡単なコード追加で色んな見栄えを適用できますね！
例えば、下記のうちのブログロゴ画像なんかも四隅を丸くして、レスポンシブにしてあります。（画像が小さいのでパソコンとかでは画面いっぱいにはなりませんが・・・）
これらの適用もimgタグにclassの「class="center-block img-responsive img-rounded"」という様な項目を書き足せばよいだけです。
<img src="img/Money_icon_250.png" class="center-block img-responsive img-rounded">
「center-block」が中央寄せ。
「img-responsive」がレスポンシブ対応（スマホやタブレット表示の自動サイズ合わせ）。
「img-rounded」が四隅を丸くするという設定になります。
すんごい楽♪
自分で作ったWebサイトのデザインが「イマイチだな～(-_-;」と感じている方は、Bootstrapを適用し、Bootstrapエディタを使って自分で好きに手軽にデザインをいじくり回して見るのが良いのかと思います(^-^)/
まとめ
- BootstrapはWebサイト向けのレスポンシブデザインを採用したHTML, CSS, JavaScript フレームワーク！
- Bootstrapを自前でいじくるのは面倒くさい。
- Bootstrap向けの色々なエディタが存在する。
- 今回は「Pingendo」と呼ばれるインストール型のBootstrapエディタを使ってみた！
- Pingendoではドラッグ＆ドロップでパーツを配置することでデザインを組み立てていくことが出来る！
- 一気にオシャレな見栄えのレスポンシブデザインのサイトを作ることが出来る！
