Bootstrapで画像をアルバムみたいにカッコよく表示しよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第7回

動画埋め込み

　Bootstrapをつかうと、YouTubeなどの動画をサイト内に埋め込みをするとき、表示するデバイスの幅に応じて、自動でサイズを変更できます。ここではBootstrapでの動画埋め込みについて説明します。

YouTubeの動画埋め込み

　動画を埋め込むときは、iframe要素のclass属性に"embed-responsive"を指定します。埋め込む動画は、iframe要素のsrc属性でURLを指定します。

　動画の表示のアスペクト比を指定するには、class属性に以下の値を指定します。アスペクト比とは、動画の縦と横の長さの比のことで、「横：縦」で表記します。

動画の埋め込み

アスペクト比	class属性の設定値
16:9	embed-responsive-16by9
4:3	embed-responsive-4by3

リスト7　動画の埋め込み（embed-responsive.htmlの抜粋）

<div class="embed-responsive embed-responsive-16by9">
    <iframe src="http://www.youtube.com/embed/OXRBm-hiqNQ?rel=0"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
    <iframe src="http://www.youtube.com/embed/OXRBm-hiqNQ?rel=0"></iframe>
</div>

動画の埋め込み

実用例（アプリケーションメニュー）

　今回の連載でご紹介したナビゲーションバーや画像表示などのBootstrapのUIコントロールを利用すると、次のようなスタイリッシュなメニューが出来ます。

　ソースコートは以下のサイトで公開されていますので、参考にしてみてください。

• Viewing snippet Dropdown thumbnail preview | Bootsnipp.com

メニューの例

おわりに

　本連載では、業務アプリケーション開発エンジニアで、ビジネスロジックはバリバリ開発しているけど、デザインセンスがないので出来上がったアプリケーションの見栄えが……と感じられている方に、7回にわたりBootstrapを使ったWebアプリケーションの画面作成をご紹介しました。

　業務Webアプリケーションは、ミッションクリティカルなシステムでも使用されている場合が多いため、暗黙の了解でビジネスロジックの開発に重きがおかれています。そのため、ネットワークやデータベースの知識、JavaやRuby on Railsなどの言語／フレームワークは基礎からしっかり技術を勉強している、というエンジニアは多いと思いますが、その反面、CSSやHTML5などのフロントエンド技術は、片手間で断片的な情報をもとに、なんとなく実装しているケースが多いのではないのでしょうか？

　Bootstrapを導入すると、フロントエンド開発にフレームワークを導入することで開発生産性をあげることができ、業務アプリケーションでコアとなるバックエンド開発に注力できます。さらに流行りのデザインを取り入れることができるので、アプリの操作性や情報の見せ方、マルチデバイス環境での実行などについて顧客のニーズを吸収しやすくなります。

　システム開発の仕事は、納期／コスト／品質を守りながら、顧客の要件を満たすものをつくることです。時には重大なバグで大幅な手戻りが発生したとか、なかなか仕様が決まらず納期が迫っていて止むを得ず徹夜で作業など、辛いこともあることでしょう。

　しかし、エンジニアはものづくりが好きな人たちのあつまりです。自分たちで頑張って作ったものが「カッコいい」というのは、なによりのモチベーション向上につながるのではないでしょうか。

　これからも、Bootstrapを使って見栄えの良いWebアプリをたくさん作ってくださいね。