読者です 読者をやめる 読者になる 読者になる

マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

Bootstrapエディタ「Pingendo」を導入!Webサイトの見栄えアップ!

スポンサーリンク
あとで読む

新プロジェクト開始!

新年度を迎えて、思う所もあり新しい挑戦として「新プロジェクト」を立ち上げることに!
まずは、このブログに紐づけて作ってあるWebサービスのリニューアルから。

デザインについては放置してきていたため、今回デザインも「今時に」リニューアルさせる!
調べてみたところ、Bootstrapという物を使うと手軽にレスポンシブデザインにも対応させることが出来て便利なのが分かりました!

昨日はこのBootstrapフレームワークを使って、既存のWebサービスを新デザインにしてみました(^-^)v

でもですねぇ、適当なBootstrapテンプレートを適用したので、ちぐはぐなデザインになってしまいました(^-^;
生命保険計算サービスなのに、下記の様な海辺の絵に。

f:id:MoneyReport:20160411160131j:plain

このままだとイマイチ過ぎるので、きちんとしたBootstrapのデザインに変えていきたいと思います(^-^)/

Bootstrapエディタ

昨日WebサイトをBootstrapに対応させてみて思ったのですが、普通のテキストエディタだけで作業をするのは、やりづら過ぎるということ。
Bootstrapのタグやクラスの書き方も理解していない状態で、一から勉強しつつデザインを適用していくのは地道過ぎてきつい作業(-_-;
なので、Bootstrapに特化したエディタで書ければ簡単じゃないかな、という事で、昨夜色々と調べて探しまくりました!

で、その中でBootstrapエディタは色々あることが分かってきました。
特に最近のお手軽さを強調したオンライン上で手軽にデザインを確認したり、コードを書き換えて即時反映する様なものも結構ありました。
ですが、きちんとローカルマシンにインストールして使えるソフトウェアの方が性に合うので、アプリケーションタイプのエディタを探し試してみる事にします。

Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。
そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。


Pingendo – web authoring with comfort
PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OSX/Windows/Linux用が用意されています。細かいプロパティ含めてカスタマイズできます。


Bootstrapの画面を手軽に作れるツールまとめ | hifive開発者ブログ

で、良さげなのが「Pingendo」かな、と。
Pingendoのサイトに行ってOSを選択します。
f:id:MoneyReport:20160412153656j:plain

Mac、Windows、Linuxと主要なデスクトップOSが揃っています(^-^)v
私はWindowsなのでWindowsを選ぶと64bitと32bitが選べて、64bit版を選択しました。

ダウンロードして解凍すると下記のsetup.exeが手に入ります。
f:id:MoneyReport:20160412154108j:plain

PingendoのSetup画面です。「I Agree」ボタンを押します。
f:id:MoneyReport:20160412154136j:plain

フォルダを選択して「Install」ボタンを押します。
f:id:MoneyReport:20160412154300j:plain

インストール中。
f:id:MoneyReport:20160412154343j:plain

インストール完了!「Close」ボタンを押します。
f:id:MoneyReport:20160412154359j:plain

インストールされた「Pingendo」ソフトウェア。
f:id:MoneyReport:20160412154425j:plain

これでいつでもBootstrapエディタを使う事が出来ます!
オンラインのエディタだと突然サービス終了とかされると非常に困りますが、ローカルにインストールしてしまえばエディタ配布サイトが終了してしまっても、自分のローカルのエディタは残って使い続ける事ができますからね~(^-^)v

昨今のソーシャルゲームもゲーム会社が倒産してしまえばもう遊べなくなってしまいますが、据え置き型のゲームカートリッジを購入した場合には会社が倒産しようがずっと遊べるのに似ています。

Pingendoでデザイン!

Pingendoの起動画面。初回起動時にはupdateがあるかチェックが走ります。
f:id:MoneyReport:20160412154456j:plain

起動した画面。最初は空っぽの状態で起動します。
f:id:MoneyReport:20160412154543j:plain

昨日、適当なBootstrapテンプレートのデザインを適用したページを表示してみました。
f:id:MoneyReport:20160412154612j:plain

ただ、既にテンプレートが適用されたものをいじくるのは、なかなか難儀なので、新規にページを作りこんでみます!

まずは左上のファイルマークの「新規作成」ボタンを押します。
f:id:MoneyReport:20160412154957j:plain

すると「Default empty page」と「Landing page」が選べます。
今回は「Default empty page」を選択して、一から配置してみたいと思います。

空ページを新規作成した所。左の「SECTIONS」と「COMPONENTS」をドラッグ&ドロップで配置していきます。
f:id:MoneyReport:20160412155200j:plain

HEADERS、CONTENTSを配置し、さらにFORMSを配置するためにドラッグ&ドロップ中の場面。
f:id:MoneyReport:20160412155520j:plain

で、このまま色々と直せると良いのですが、うまく書いてあるテキスト本文とかを修正できなかったので、ここまで作った「Untitled.html」を保存して、テキストエディタで追加&修正を行いました(^-^;
この辺の使い勝手も上がると良いのですが。
それか、私がきちんと使い方を分かっていないだけかもしれません。

Pingendoエディタで作ったWebページ

で、ひとしきり追加&修正して自分のページの情報を乗せ換えたのが下記ページになります。
f:id:MoneyReport:20160412154658j:plain

作ったページは右上の表示サイズボタンを押せばチェック出来ます。これは最大表示時。
f:id:MoneyReport:20160412155954j:plain

これはスマホ表示サイズ。
f:id:MoneyReport:20160412160059j:plain

こちらはタブレット表示サイズ。
f:id:MoneyReport:20160412160324j:plain

で、さらに下の「HTML」をクリックすると、HTMLソースが表示されます。
f:id:MoneyReport:20160412160342j:plain

「LESS/CSS」をクリックすればCSSが見られます。
f:id:MoneyReport:20160412160442j:plain

パソコン表示の完成形!
f:id:MoneyReport:20160412160742j:plain

スマホ表示の完成形!
f:id:MoneyReport:20160412160811j:plain

昨日までのダサダサ表示とは違います(^-^)v
これ、良いですね!
Bootstrap!

実際に作ったページも公開しておきますので、パソコンやスマホ、タブレット等で表示してみてもらえると嬉しいです(^-^)v

【Bootstrap適用後のWebサービス】
マネー報道 WebService~生命保険計算~
マネー報道 WebService~生命保険計算結果~

簡単にWebサイトの見た目の調整が出来て、簡単なコード追加で色んな見栄えを適用できますね!

例えば、下記のうちのブログロゴ画像なんかも四隅を丸くして、レスポンシブにしてあります。(画像が小さいのでパソコンとかでは画面いっぱいにはなりませんが・・・)
f:id:MoneyReport:20160412161033j:plain

これらの適用も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ではドラッグ&ドロップでパーツを配置することでデザインを組み立てていくことが出来る!
  • 一気にオシャレな見栄えのレスポンシブデザインのサイトを作ることが出来る!