年末にホームページのデザインを見直しました。昨年 (2014年) 末もホームページのスマホ対応してました。恒例行事化してる..
Responsive web のお勉強でホームページ(死語)を修正中。iPhone でも見えるようになった。 http://t.co/0tCdPAZcgL
— MH (@kondoumh) 2014年12月29日
この時は CSS3 のメディアクエリを適用しただけで1年間放置してました*1。
Google が Web Starter Kit という Boilerplate を公開しています。Google が見繕った gulp プラグインを取り揃えて便利な Task を書いてくれてるので、すぐ Web 開発に取りかかれます。Scss で Material Design なスタイルを提供してくれてるので、変えたいところをちょこっと変更するだけで統一感あるデザインが実現できます。少し前なら Twitter の Bootstrap を使うところかもしれません*2。。
Microsoft も Web Essentials という同様のテンプレート (というか Visual Studio 拡張) を提供してます。
Material Design はタイポグラフィを基調としている(らしい)ので、ちょっとした画像とかフローティング要素は廃止しました。アクティブに更新してるわけでもないので Amazon のバナーとかソーシャルボタンとかも廃止しました。断捨離のようですね。
Starter kit ではローカル Web サーバとして browser-sync が採用されています。複数の ブラウザを起動して、一つのブラウザの操作をサーバ経由で他のブラウザに伝えることができるものです。Mac でページを編集して Windows で 複数のブラウザので同期してプレビューする・・とかできます。スクロールや画面遷移も同期してくれるのでなかなか便利です(戻るボタンは同期されませんが)。マルチブラウザの確認が効率よくできて便利です。
Internet Explorer / Edge / Firefox / Chrome をタイル表示して同期してるところです。
スマートデバイスの動作確認は Chrome の DevTools と実機 (iPhone / iPad / Nexus) で行いました。
制作環境について、今まで Dropbox にファイルを置いて Panic Coda2 で編集、Coda 2 の FTP 機能で Publish していました*3が、この機会に git に移行し構成管理を厳密にしました。 Publish は gulp-ftp に移行。エディタは Coda2 から Visual Studio Code にスイッチ。
ということで移行後のサイト。まんま Starter Kit 臭を漂わせて新年を迎えます。
