LIFE is 日々一歩(32)[コラム]Bootstrapの使い方をまとめてみた(1)/森 和恵

投稿:  著者:  読了時間:11分(本文:約5,000文字)


こんにちは! 森和恵です。体調不良とバタバタを乗り越えたご褒美に、週末映画を観てきました。アメリカのヒーローたちが活躍するシリーズの最新作“シビルウォー”です。
http://marvel.disney.co.jp/movie/civilwar.html

実は、前作をまったく観たことがありませんでした。なのになぜ観に行ったかというと、声優の中村悠一さんが、おそ松さんのイベントで「キャプテンアメリカ役の中村悠一です。シビルウォー見てる?」って挨拶していたのがきっかけです。カラ松、恐るべし。

ついていけるか不安でネットの前評判を探ると、「前設定知らないとわかりにくいかもね」という意見がありました。そうか〜と、「シビルウォー 前提」って検索したところ、ちょうどいいページが見つかって助かりました。おかげで、混乱することなく映画に集中できました。ネット社会ってありがたい。

【『シビル・ウォー』を観る為の予備知識。キャプテン・アメリカとアイアンマンの関係性って?】
http://music-book.jp/video/news/column/117543

映画は面白くて、見終わったらすっかり世界観にはまってしまいました。キャプテンもトニーもどちらも素敵。続き…あるのかなぁ。

さてさて。今回から、Bootstrapの使い方をぼちぼちとまとめていきます。最終的には、Dreamweaverのテンプレート化して、自分のサイトでガシガシ使ってみるところまでいきたいなぁと思っております。

まずは、事始め的な話から。




●Bootstrapって何だろう?

Bootstrap(ブートストラップ)とは、Webページを作るためのひな形になるものです。レイアウトや修飾のためのデザインをCSSコードで、スライドショーやポップアップウインドウなどの動きをJavaScriptコードで提供してくれます。

フレームワークと呼ばれるものの一つです。

BootstrapをWebページに組み込むことで、そのお作法に従ってHTMLをコーディングすれば、苦労なく簡単にページ作成を進めることができます。

ブラウザ上で動くWebアプリケーションを開発するエンジニアの間で、Webページを自分でデザインしなくても、簡単にイマドキのカッコイイページが組めるという理由で使われ出したのが、流行るきっかけだったように思います。

もともとは米ツイッターがオープンソースとして開発しました。以前はTwitter Bootstrapと呼ばれていましたが、最近では単にBootstrapと呼ばれます。
http://getbootstrap.com/

●HTMLページへの組み込み

では、さっそくHTMLページにBootstrapを組み込んでみましょう。公式サイトの“Getting started”ページを開きます。
http://getbootstrap.com/getting-started/

冒頭をみると“Download”とありますが、BootstrapはCDN(シーディエヌ:Contents Delivery Network)と呼ばれる、URLで直接ファイルを参照するリンクファイルが提供されています。下手に自分でファイルをダウンロードするよりも手軽で表示も速く扱えるのでおすすめです。

なので、ダウンロードは無視してページの下へ進みます。“Basic template”の見出しがついた部分のHTMLコードをそのままページへコピペしましょう(コードがある枠の右上ある[Copy]リンクをクリックすると手早くコードをコピーできます)。

次に、コードを書き換えたり、不要な部分を削除したりと調整をします。

2行目)<html lang="en">

enをjaと書き換えます。これは、ページで使う言語の設定で“ja”は日本語です。

7行目)<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

「4〜6行目の<meta>タグは先頭になくてはならない」という説明のコメント文です。不用なので削除しましょう。

9・10行目)<!-- Bootstrap -->

9行目の空白行、10行目の上記コメントは不用なので削除します。

11行目)<link href="css/bootstrap.min.css" rel="stylesheet">

Bootstrapで用いるCSSコードです。CDNを用いて外部ファイルを参照するために、“Bootstrap CDN”の項目にある下記コードと差し替えます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

12〜14行目)
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

12行目の空白行、13・14行目の上記コメントは不用なので削除します。これは、
15行目から始まる古いInternet Exploerへの対策コードについての説明です。

15〜18行目)
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

これは、Internet Exploer8・9用の対策コードです。このバージョンでは、HTML5のコードを理解せず、レスポンシブ(CSS3のMedia Queries)に対応していません。Bootstrapではその両方を用いています。そのため、JavaScriptで書かれたプログラムを使って、無理矢理対応させています。

【IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js】
http://pb-times.jp/P_52ce2f4c3db6a

ただし、Internet Exploer8・9は、メーカーのサポートもほぼ終了しているバージョンですので、サポートが不用であれば削除してもOKです。

21〜23行目)
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

22行目の空白行と、21・23行目の上記コードは不用なので削除します。21行目は本文として仮に入れられた文章(伝統の「Hello, world!」)で、23行目は次に続くコードはBootstrapで必要な、JavaScriptコードであることを説明しているコメントです。

25行目)<!-- Include all compiled plugins (below), or include individual files as needed -->

次の26行目は必要に応じてコードに付加してください、というコメントです。不用なので削除しましょう。

26行目)<script src="js/bootstrap.min.js"></script>

Bootstrapのコンポーネントを使ってさまざまな動きをつけるために必要なコードです。CDNを用いて外部ファイルを参照するために、“Bootstrap CDN”の項目にある下記コードと差し替えます。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


ここまで書き換えたBootstrapのテンプレートファイルを、下記にアップロードしました。ブラウザで表示してもまだ真っ白ですので、ソースコードを確認してくださいね。

http://r360studio.com/dgcr/bootstrap/step1.html

次回から、このファイルを使って実際にBootstrapを動かしていきます。

《補足1》CDNコードの中にあるintegrityという属性が気になって調べてみました。CDNでは、外部サイトを参照します。皆がつかうコードなので、愉快目的の攻撃者がそのソースを書き換えるなどの悪質な行為をするかもしれません。

そこで、CDNコードの提供者が、ソースの整合性をチェックするための仕組みとしてSubresource Integrityという仕組みを用います。そのチェックのために必要な鍵となるコードが、integrity属性です。

万が一問題がある場合は、参照先からコードが読み込まれなくなっています。

【Subresource Integrityについて調べた】
https://blog.kazu69.net/2015/10/01/check-for-subresource-integrity/

《補足2》24行目で読み込んでいるのは、JQueryの本体ファイルです。Bootstrapで提供されるJavaScriptコードは、JQueryライブラリのため、JQueryの本体ファイルを先に読み込まないと実行することができません。

JQueryは、JavaScriptコードとの間を取り持つ中間言語と呼ばれるもので、これを間に入れることでJavaScriptプログラムの開発を容易にします。

https://jquery.com/

●あの“とほほ”さんにもBootstrap入門が!

今回Bootstrapを改めて取り上げることにしたのは、あの“とほほのWWW入門 ”さんが取り上げていたからです。

HTMLやCSSを学ぶ時にお世話になっているこのサイトですが、いつもはコードを直接検索するので、トップページはほとんど見ることがありません。ある日、たまたま見る機会があり、驚きました。「Bootstrap増えてるやん!」と。

http://www.tohoho-web.com/ex/bootstrap.html

とほほさんで紹介されるぐらいであれば、世間一般に広く普及したのだろうなぁ…ということで、今回取り組んでみることにしました。

さて、次回はおそらくこの続きです。今度は、Bootstrapを使って、HTMLタグを修飾したり、ボタンを作ったり…をCSSを書かずにサクッと行ってみたいと思います。

ちなみに公式サイトの解説ページはこちらです。予習したい方は、どうぞ。
http://getbootstrap.com/css/#type

ではでは、また!(^^)


【森和恵 r360studio 〜 Web系インストラクター 〜】
site: http://r360studio.com
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio

web系の担当講座、8月までのスケジュールが公開されました。好評受付中です。ぜひ!
http://r360studio.com/seminar/