[恋に落ちる寄席] 恋するBootstrap

　……はい、どうもどうも。ありがとうございます。拍手ありがとうございます。特に前列の方ありがとうございます。あら、後ろの方からもありがとうございます。すみませんね、催促したみたいで。

　はい、改めまして｜私《わたくし》、｜風呂場亭亜鈴《ぷろぱていあれい》と申します。変わった名前ですよね。そう思いません？　でもね、｜噺家《はなしか》だからいいんですよ。自分で付けたんだからいいんです。親が付けた本名だったら今頃ひと暴れしてますけどね。
　さて、私が変わってるのは名前だけじゃございません。まず何てったって若くて美しい。いやこれ、本当のことなんだからしょうがないです。物投げちゃいけませんよ。それだけじゃない、なんと｜Web《ウェブ》技術にも｜造詣《ぞうけい》が深い。WebサイトやWebアプリの開発なんかお手の物でございます。まさに才色兼備ですね。｜天《てん》は｜二物《にぶつ》を与えちゃいましたね。はい、物投げちゃいけませんよ。危ないですからね。

　まあそんなわけで、私の演目では、｜HTML5《エイチティーエムエル・ファイブ》、スタイルシート、｜JavaScript《ジャバスクリプト》などと言ったWeb技術についてですね、わかりやすくお話させていただこうかと思っておりますのでね、よろしければお付き合いください。興味を持ったら、｜name《ネーム》プロパティだけでも覚えていってくださいね。

　＊

　さて。Webサイトなんてものは、昔は自分でHTMLとか使って一から書くもんだったんですけど。最近ではSNSだとかブログサービスだとかが主流になったので、そういうWeb技術の基礎を全く知らなくてもネットで情報配信できるようになりまして。ましてや、Webアプリで遊ぶ人が、これはどんな仕組みで作られてるんだろうか、なんて意識することなどないんですけど。
　ただ、ユーザー側はそれで良いんですけど、サービスを提供する側はそうはいかない。そういうブログサービスやらWebアプリを作る側の人ですね。ちゃんと動くプログラムを作るのはもちろん、デバイスだとか｜OS《オーエス》だとかブラウザだとかいろんな違いがある中、どんな環境でも動くように書かなきゃいけない。なかなか大変なんですよ、ホント。
　だから、ベースとなる共通的な部分なんてのは、テンプレートになってて使い回せると開発が楽なんですよね。さらに、ユーザーごとに異なる環境の違いを吸収して、上手い具合に表示してくれるとなおありがたい。こういう機能を持った便利なツールを「Webアプリケーションフレームワーク」なんて言うんですけど。

　その代表格が、今日お話する「｜Bootstrap《ブートストラップ》」と呼ばれるものです。
　これ、元々「｜Twitter Bootstrap《ツイッター ブートストラップ》」って呼ばれてました。その名の通り、あの有名なツイッター社が自社用に開発したツールなんですけど、今ではオープンソースで公開されてて、いろんなWebサイトやアプリで広く使われてます。

　＊

　さて、｜Bootstrap《ブートストラップ》は今や多くのWebサイトで使われているんですけど。これだけ爆発的に広まったのには、ちゃんと理由がありまして。

「おーい、ご隠居ー」
「どうしたんだい、朝っぱらから騒々しい」
「いやね、あっしも『Webサイト』ってもんを作ってみたんでね。ご隠居にも見てもらおうと思って」
「ほう、それは｜殊勝《しゅしょう》な心掛けじゃないか。どれどれ……おや、このページ、左右の隙間が無駄に空いてて、何ともスカスカじゃないか」
「そうですかい？　あっしのパソコンだとちょうど画面いっぱいに表示されてるんですがね」
「お前さん。パソコンと一口に言ってもね、どーんと大きいものもあれば、お前さんのパソコンのようにちっちゃいものある。どんな大きさの画面でも、それなりに綺麗に表示されるように作らにゃならん」
「はあ。てぇことは、それぞれの画面に適したページがいるんですかい」
「パソコンだけじゃない。今はタブレットやらスマートフォンなんてのもある。試しにそのサイトをスマートフォンで見てみなさい」
「何だいこれ。文字が小さすぎて読めたもんじゃないな。米粒に書いたお経みたいなもんだ。つまり、タブレットやスマートフォン用のページも作らなきゃならないと」
「しかも、画面が縦向いたり横向いたりすると画面の幅も変わるので、それも考えて作らないとな」
「なんかいろいろ面倒ですねえ」

　てな感じで、Webサイトを見る環境は多種多様、画面の大きさもピンからキリまでございますが、それぞれの大きさに合わせてページを作るのは一苦労でございまして。
　その問題に対応できるような仕組みが、『レスポンシブデザイン』というものです。
　作るページは一種類だけにして、画面のサイズに合わせて最適なデザインに切り替えるようにしましょう、っていう仕組みですね。広い画面だと3列のコンテンツだけど、狭い画面だと2列になるとか。あとは、パソコンで見ると画面の左側にメニューがあるけど、スマートフォンだとコンテンツの下にメニューがあるとか。そういうのがレスポンシブデザインです。自分でスタイルシート書いて実現できないこともないんですけど、｜Bootstrap《ブートストラップ》を使うととっても簡単に作ることができるんですよ。便利な世の中になりましたね。

　＊

　さて、他にも便利な機能が用意されてますんでね、いくつかご紹介しましょうかね。

　例えば、『ダイアログ』ってあるんですけど。たまに、小さいウィンドウとボタンが急に表示されて、イエスかノーかを選ばないと次に進めない場面ってあるじゃないですか。それがダイアログです。
　あとは、よく分からずに「｜I Agree《アイ アグリー》」の方を選ぶとあとで莫大な請求がきちゃって大変、とかいう時。あ、そういう時は警察や弁護士に相談してくださいね。ウチに来ても困っちゃいますからね。
　そういうダイアログも、よく見るグレーの無機質なものじゃなくて、もっとオシャレな感じのものが用意されています。

　他にもね、タブを切り替えて表示する画面とか、写真をスライドショーみたいに自動で切り替えてくれる機能とか。よく使われる部品が標準で組み込まれてるので、とても楽なんですよね。
　かと言って、そのまんま使うと「またこのデザインか……」みたいに思われちゃうので、ちょっとした工夫というか個性は必要ですけどね。
　その辺、落語にも通じるものがありますね。お客さんに合わせて枕の話を変えたり。個性がないと、どの業界でも生きていくのは難しいですね。楽してばかりじゃダメなんです。

　＊

　さて、そもそも『ブートストラップ』って何なんだい、って話なんですけど。
　ブートって、要はブーツです。あの長ーい靴。あの女子が｜履《は》いて｜蒸《む》れるやつ。それの、一番上に輪っかとか金具が付いてて、引っ張り上げやすいようになってるんですけど。そのつまむ部分のことをブートストラップ、って言うんだそうで。ブーツの、ストラップ。なんとなくイメージ湧きました？　お客さん、ちょっと賢くなったね。高い金払った甲斐があったね。
　で、それを元にしたアメリカン｜小咄《こばなし》がございまして。

「ご隠居、あそこにある高ーい塀、飛び越えるにはどうしたらいいですかね？」
「そりゃあ、自分のブーツを自分で引っ張り上げりゃいいんじゃないか」

　なんてやり取りが昔のアメリカン長屋であったかどうかは知りませんけどね。
　この話を、コンピューター用語にしちゃった人がいるんですよ。
　コンピューターってのはプログラムを読み込まないと何にも出来ないんですけど、起き抜けにいきなり全部のプログラムを読み込めるほど賢くない。なんで、「プログラムを読み込むための小さなプログラム」ってのを最初に読み込まなきゃならないんですよね。で。このパラドックス的な仕組みがさっきの小咄に似てるってんで、最初に読み込まれる小さなプログラムのことを『ブートストラップ』と呼ぶようになったそうで。
　余談ですが、コンピューターを起動することを『ブート』というのも、ここからきてるんだそうですよ。また賢くなったねお客さん。元取れたね。

　で、Webアプリケーションフレームワークに『｜Bootstrap《ブートストラップ》』という名前が付けられたのにも、そういう意味合いが込められてるんじゃないですかね？　私が作ったわけじゃないのでよく知りませんけど。

　＊

　というわけで、便利なWebアプリケーションフレームワーク、『｜Bootstrap《ブートストラップ》』についての一席でございました。

　え、落語なのにオチはないのかって？　いいんですよ。
　Webサイトは、落ちちゃダメなんです。