LoginSignup
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-10

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

Webアプリの仕様

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

  1. タイトル : Today's Lunch

  2. サービス仕様

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

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

スクリーンショット

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

PC画面想定

pc.png

モバイル画面想定

sp.png

システム構成

  1. Herokuで動かす。(といっても静的ページ機能しか使わない)
  2. 施設一覧はGoogle Map APIのプレイス ライブラリで検索
  3. 地図はGoogle Map API
  • Herokuは静的ページを配信するテンプレートを利用させていただきました。
  • Bootstrapのテンプレートは日本語がきれいだということで、Honokaを利用させていただきました。

Webアプリ

Bootstrapを使ってみた感想

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11