文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

GoogleのWeb Starter Kitのライブデモを用意してみました!

こういうのは触ってみないといけませんね。


f:id:treeapps:20180418115102p:plain

先日GoogleはWeb Starter Kitというボイラープレート的なhtmlを公開しました。
Web Starter Kit  |  Tools for Web Developers  |  Google Developers

TeckCrunchによると、このWeb Starter Kitは以下であるそうです。

Googleによれば、ここに収められたテンプレートはマルチプラットフォームでのパフォーマンスやレイアウトが最適化されておりデベロッパーがすばやくアプリを開発するのを助けるという。簡単に言えば、これまでGoogleが推奨してきた開発方針を実際に作動するコード化し。、必要なツールを加えたパッケージだ。ただしWeb Starter Kitはユーザーの環境にNode、Ruby、Ruby Sass gem、ストリーミング・ビルドシステムのGulp.jsがインストールされていることを前提としている。Gulpの利用は必須ではないが、これを使えばLiveReload、自動的な画像最適化、HTMLのミニファイなどの機能が利用できるようになる。

http://jp.techcrunch.com/2014/06/20/20140619google-launches-web-starter-kit-a-boilerplate-for-multi-screen-web-development/

今回はとりあえずどんなものなのかを知るため、tree-tipsにライブデモを用意してみました。
完全に初期状態のテンプレートでつまらないですが、是非触ってみて下さい!!
↓↓↓ こちらからどうぞ ↓↓↓

レスポンシブなので、ブラウザのウインドウサイズを小さくしてみたり、USER-AGENTをスマホやタブレットに変えてみて、見た目や挙動がどう変わるかを体験してみて下さい!!

試しにchromeの標準機能でユーザーエージェントをiPhone5にしてみると、以下のようになりました。
bootstrapのような所謂ドロワーメニュー機能もありました。
f:id:treeapps:20140627010607p:plain


google本人も言ってますが、bootstrap等に置き換わるものではないそうです。リッチな汎用コンポーネントが欲しいなら素直にbootstrap使えと言ってます。テンプレートといえどgoogle製なので、もしかしたら今後bootstrap級のシェアを獲得する可能性もありますね


bootstrapというか、HTML5 ★ BOILERPLATEが競合だな。しかしボイラープレートなのにコンポーネントも少し用意しちゃってるから、どっちつかずというか、中途半端感もするな。今後はWeb Starter Kitにリッチなコンポーネントを追加してくれるアドオンが大量に出てきてbootstrapと勝負する流れなのかな。


googleには既にpolymerっていうWeb Componentがあるから、これと組み合わせて使えるようにしてくれる、とかいう流れかもしれんね。どうせならWeb Starter KitとPolymerを統合すればいいのにな。