先日、Twitter Bootstrapが2.1.1にアップデートされました。
Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。
最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。
とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。
Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。
そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。
jetstrap - Broadband from Max Lynch on Vimeo.
「Jetstrap」を使えば、Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。
Bootstrap版 Dreamweaver
のようなものです！
手軽にページデザインができるので、サイトのモックアップを作る段階などに使うと効果的です。
それでは、実際に使い方をみていきましょう。
「Jetstrap」にアクセスして「Try it now」のボタンをクリックします。
Twitterアカウント、Googleアカウント、GitHubアカウントの何れかでログインします。
ログインすると、Jetstrapのエディタが開きます。 初期状態で、NavbarとHero Unitが設置されています。
Hero Unitの「Hello, World!」の部分をダブルクリックすると、テキストを編集することができます。 書体（太字、斜体、下線）やリスト、リンクのツールバーが用意されています。
Navbarの部分をクリックすると、コンポーネントの属性が編集できるダイアログが開きます。 TypeをDefaultからInverseにすると背景が黒に変更できました。
Componentsの中から追加したいコンポネントをドラッグアンドドロップで配置することができます。 Buttonをドラッグするとボタンが配置できました。
Componentsには、Bootstrapで使えるコンポーネントが全て用意されているので、簡単にタブやパンくず、フォーム、グリッド、テーブルなどを追加することができます。
Responsiveデザインの確認を行うこともできます。 上部にある4種類の解像度別ボタンをクリックすると、そのサイズで確認ができます。
PreviewをOnにすると、ボタンやリンクなどの動作を確認することができます。
CSSを編集する機能もあります。 配置したコンポーネントにIDやClass名を予め設定しておき、CSSボタンをクリックするとCSSの編集エリアが表示されるので、自由にデザインを調整することが可能です。
最後に、Exportボタンをクリックして、生成されたHTMLを確認します。 「Download .zip」ボタンを押すと、HTMLとBootstrapの一式をダウンロードすることができます。
今まで、Bootstrapのコンポーネントを覚えるのが大変だった人や、初めてBootstrapを使う人にとっては重宝するエディタだと思います。
「Jetstrap」はBootstrapをうまく融合した
最速でウェブのユーザーインターフェースを構築するツール
すごく便利なので、デザイナーもプログラマーの方も是非、チェックしてみてください。
それでは、また！