Bootstrapを使ってWebアプリを作ってみた。

自前の簡単なWebアプリではBootstrapなんて大仰かな〜と、CSSをぽちぽち書いていたんですが、めんどくさがってばかりいてもだめだなということでBootstrapの勉強も兼ねてWebアプリをつくってみました。

Webアプリの仕様

こんなサービスを考えてみました。

1. タイトル : Today's Lunch

2. サービス仕様

   • 今日のおすすめランチスポットを探す。
   • 現在地から一定範囲内のランチスポットを検索、範囲は変更可能
   • 行ったところを記憶しておいて、マンネリを防ぐ
   • 実際に行ったところを記録し、ヒストリー表示にする。

3. システム仕様

   • all javascriptで作る。
   • bootstrapでレスポンシブなデザインにする。
   • ランチの記録はローカルストレージに保存する。

スクリーンショット

• Bootstrapをつかってレスポンシブデザインになるようにしたのでメニューとかいい感じになりました。

PC画面想定

モバイル画面想定

システム構成

1. Herokuで動かす。（といっても静的ページ機能しか使わない）
2. 施設一覧はGoogle Map APIのプレイス ライブラリで検索
3. 地図はGoogle Map API

• Herokuは静的ページを配信するテンプレートを利用させていただきました。
• Bootstrapのテンプレートは日本語がきれいだということで、Honokaを利用させていただきました。

Webアプリ

• 現在はhttps://todays-lunch.herokuapp.com/で動かしてます。

Bootstrapを使ってみた感想

• 作法に沿って書けばレスポンシブ対応になるのはやっぱり便利ですねー
• div,div,divと結構HTMLのサイズが大きいですね。Bootstrap自体の大きさもあるし、モバイル回線的にはどうなんでしょうか？
• 出来合いの色パターンをつかえばあまり深く考えなくてもそれっぽいサイトができるのがいいですね。