Bootstrap Studio試用の感想

Bootstrap4.0対応のGUI編集ツールBootstrap Studioを購入した。現在半額で$25。
デスクトップアプリだがサイト上で試用出来るWEBデモと基本同じなのでHTML5製ぽい。

● 良い点

使い勝手は良好。
GUIでパーツをどんどん配置できる。D&Dで移動も、HTMLエディタとしては自然。レイアウト関連はBootstrapの知識ないとわけがわからなくなるかもしれないが・・・。
Bootstrap4.0を勉強しながらつかってみてるけど4.0対応完備わかる。
特徴的なブロックレイアウトもコンポーネントも全部GUIで配置できる。
またCSS編集も補完効き便利。

テンプレートでそれっぽいイメージが何種類か用意されているので、それを改造したりしてTwitterBootstrapの感じをつかむのにもいいかとおもう。　

編集中の画面で、表示サイズをスマホ〜デスクトップまで随時切りかえて表示できる。まあ、この辺は競合でも普通に搭載されているか。簡易的にWebサーバとなって、ブラウザからも観られる機能は便利。エディタで編集すると自動的にブラウザ側でも更新される。

【編集中の画面】

● 不満点

ただし現状では、日本語に入力が正常には出来ず、ローマ字入力やかな漢字変換がつかいものにならない。他のテキストエディタなどで入力してコピペすることはできるので回避は可能。

また、アプリのコンセプトによるのかもしれないが１ページしか作成できないことは不便。
編集したページはExportすると、Bootstrap含むファイル一式が出力される。
ただ、現状試した限りでは、そこには１ページのHTMLしか含められない。
※ いや、しかし本当かなあ。１ページだけっていくらなんでも不便だろうからなにか方法あるのかな・・・。だれか知ってたら教えてほしい。

標準のファイル形式は拡張子が「bsdesign」になるバイナリ形式。
使用するイメージなどもこのファイル中に取り込まれる（取り込み元のイメージを編集しても反映されないので作業の流れは一方通行になる）。
複数のファイルを同時に開くことはできるけど、それぞれ別のbsdesignファイルになり、Exportもまとめてはできない。（HTMLとCSSだけを後からコピーしてまとめることはできるけど）。

HTMLから逆にinportすることもできないので、長期的に保守するというより単発ページをどんどん作っていくことに向くようだ。
定型的なデザインはライブラリとして登録していくことができるので、自分なりのライブラリを拡充することで効率を上げていくのが良いと思われる。

● 他のツール（pingndo）も併用してみる

pingndo ( http://pingendo.com/ ) は直接HTMLを編集するので慣れてきたらこちらが効率よさそう。
こっちもデスクトップアプリなので操作感はなかなか良い。
長く使われてきたツールなので安定してるし解説サイトも豊富。
無償だしね。
ただしまだ3.x用なので4.0は完全に対応できない。
少し試してみた感じではBootstrap StudioでexportしたHTMLは大体扱えるようなので、初期データはBootstrap Studioで作って、手作業で１サイト分を取りまとめて、それをpingndoで編集していく流れがよいと感じた。
コンポーネントでFormが不足しているようなので小さな部分単位はBootstrap Studioで制作して、HTMLとしてコピーしてpingndoへペーストする連携で、２つのツールを活用すると効率ようさそう。

【pingndoに読み込んで編集中の画面】

● 必要な知識、その他

テンプレートで生成されたページを編集していくことで感じもわかってくるけど、やっぱり生のBootstrapのリファレンス読んでから使ったほうが理解ははやそう。そうすると、必要な設定項目の１対１で設定できるようになっていることがすぐわかる。

とりあえずデフォルトのデザインで配置する分にはCSSについてはそんなに知らなくてもいいかなあ・・・。
指定した要素の対応CSSは、bootstrapのものとuser.cssの両方が自動的に表示されるのでこれを編集して勉強するってのもいいかも。
JavaScriptは直接は書けないので、別途どうにかする。（そもそもHTMLも直接は編集できない）

Bootstrap4.0からはIE8は非対応になるけど、もういいよね・・・