第53話 見返したつもりが
卓也さんの「全然駄目だね」に「は！？」となった状態から、僕は一晩眠れずに過ごした。
「何が駄目なんだ……？完璧に再現できてるのに」
デスクトップで何度も見直すが、問題が分からない。
翌朝、我慢できずにLINEを送った。
『山田さん、何が駄目なんでしょうか？』
すぐに返事が来る。
『スマホで見た？』
『え？でも、まだローカルファイルなので、スマホでは見られないんですが……どうやって確認すればいいんでしょうか？』
しばらく既読のまま返信がなかった。そしてやっと来た返事は冷たかった。
『ggrksって知ってる？』
それで終わりだった。
何だそれ？意味が分からなくて、僕は「ggrks」で検索してみた。
「ググレカス」
検索結果を見た瞬間、僕は血が上るのを感じた。要するに「Googleで検索しろ、バカ」という意味のネットスラングだった。
カーッとなった。なんだそれ、馬鹿にしやがって。
『わかりました。調べてみます』
僕は必死に「スマホ 確認 ローカルファイル HTML」でググった。そして見つけたのが、Chromeのデベロッパーツールという機能だった。
「これか……」
F12キーを押すと、画面の下に見慣れない開発者向けの画面が表示された。そこには「Toggle device toolbar」というボタンがあり、クリックするとスマホやタブレットの表示をシミュレートできることがわかった。
iPhone、iPad、様々なデバイスサイズに切り替えてみる。そして……。
「あ……うそだろ……まじかぁ」
レイアウトが完全に崩壊していた。文字が小さすぎて読めない。
僕はスクリーンショットを撮って送信した。
『確認しました……崩れてました』
『当たり前だ。レスポンシブ対応してない。今時スマホ対応してないサイトなんて使い物にならない。
やり直しだ。今度はちゃんとモバイル対応してこい』
クソー……まだ足りないのか。
放課後、再び情報教室へ向かった。
「先生、今作ってるウェブサイトを、携帯とパソコンを両立させたいんです」
Chromeのデベロッパーツールを見せて、見た目が崩れてしまっているのを見せる。
「レスポンシブデザインのことだね」
僕は事情を説明した。
「実は、先輩に作ったサイトを見せたら『全然駄目だね』って言われてしまって……」
「この段階でスマホのことまで、意識させるかー。なかなかスパルタだなぁ、その人は」
小林先生はガシガシと頭をかいた。
「でも佐藤くんは、確実に力は付いてるよ。まあそういうことなら、Bootstrapを導入してみようか」
「Bootstrap……ですか」
初めて聞く言葉だ。
「そもそも、レスポンシブってなんですか？どういう意味です？」
「レスポンシブデザインは、スマホ、タブレット、PCの画面サイズに応じて、自動的にレイアウトが最適化されるデザインのことだよ。今回君が体験したような『スマホで見ると崩れる』問題を解決する技術だね」
小林先生は手振りを交えながら説明を続けた。
「そして、Bootstrapはそのレスポンシブ対応を簡単にできるフレームワークなんだ。CSSの次のステップとして学ぶにはちょうどいいんじゃないかな。
実は、Bootstrapも君が学んだHTMLとCSSで作られてるフレームワークなんだ。プロが君の学んだ技術を高度に組み合わせて作った、いわば技術の集合体みたいなものだね。興味があったらコードをあとで読んでみると良い」
小林先生はブラウザを開いてBootstrapの公式サイトを表示した。
「Bootstrapには大きく3つの便利な機能がある。まず一つ目は12カラムのグリッドシステム。col-sm、col-md、col-lgっていうクラスを組み合わせることで、デバイスサイズごとに最適なレイアウトを指定できる」
「つまり、この仕組みでデザインすれば、タブレットもモバイルも一気に対応できるってことですね！」
僕は興奮して聞き返した。
「そのとおり。
そして二つ目は、ボタンやナビゲーションバー、カード型レイアウトなど、よく使われるUIコンポーネントが最初から用意されてること。CSSを一から書かなくても、クラス名を指定するだけで美しいデザインが使える」
「便利だなぁ……」
「そして三つ目が、世界中の開発者が作ったBootstrapテンプレートが無料で使えることだ」
小林先生はブラウザで、Bootstrapのテンプレート紹介サイトを開いて見せてくれた。
「おー……」
ショップ、コーポレート、レストラン、ホテル……様々な業種向けのテンプレートがずらりと並んでいる。どれもプロが作ったような洗練されたデザインだ。
「ダウンロードして中身をちょっと変えるだけで、すぐにかっこいいサイトが作れる」
「これはめちゃくちゃ便利そうです……帰ったら早速試してみます！」
「ん、がんばれ！」
◆
帰宅後、まずはBootstrapの公式ドキュメントを読み漁った。col-sm、col-md、col-lgの概念を理解していく。
その後、小林先生が教えてくれたStart Bootstrapのサイトを見て回った。
「すげー……プロが作ったみたいなテンプレートがこんなにあるのか」
ビジネス向けのシンプルなテンプレート、飲食店向けのおしゃれなデザイン、ポートフォリオサイト用のクールなレイアウト……どれも無料とは思えないクオリティだった。
水野屋に合いそうなテンプレートを探していると、和菓子屋にも使えそうなシンプルで上品なデザインのテンプレートを見つけた。
「これだ……これをベースに水野屋バージョンを作ろう。みてろよ！」
深夜まで学習を続け、ついにレスポンシブ対応が完了した。
やってるうちに楽しくなってきてしまって、もともとのサイトにもないこだわりを入れたりしているうちに、気づいたら深夜2時をまわっていた。
「やべ」
でも一通り揃った。最終チェックで、ChromeのデベロッパーツールでしっかりとPC、タブレット、スマホでの動作確認を行う。
「今度こそ完璧だ……！」
3つのデバイスサイズでのスクリーンショットを撮影、ソースコードごとまとめてファイルをZip圧縮して。
翌朝、再チャレンジの時が来た。
『レスポンシブ対応完了しました』
データを送りドキドキしながらまつ健太。
数分後、
『bootstrap使ったのか……まあまあだな』
というコメントがメッセージで届く。
『よし、じゃあこのサイトを公開してみろ』
次に行く許可が出た！一段階進んだ！やった！
