どうも！chuckです。
ついに！ロシア語アプリケーションをHerokuにデプロイしました！
いやあ、ネット上で公開しているとなるとモチベーションがぐんと上がりますね！
今回はBootstrapを使ってデザインを付け加えたので、そこらへんについて書いていきますヽ(=´▽`=)ﾉ
あ、ちなみにこのアプリケーションの名前なんですが、「ロシアップ」と名づけました！「ロシア語のアプリケーション」かつ「ロシア語の単語力をアップさせる」をかけてます
そもそもBootstrapとは
Twitterが作ったCSSのフレームワークになります。Bootstrapを使えばカンタンに見た目を整えることができ、非常にコスパがいいです。
僕はBootstrapにアイコンを使ったことはあるんですが、CSSフレームワークとして利用するのはこれが初めてです。
ただし、難点として、Bootstrapを使ったサイトの見た目はどれも似たり寄ったりになりがちです。見る人が見ればすぐ分かってしまいます… なので多少アレンジは必要かもしれません(；・∀・)
Bootstrapの導入
Bootstrapの導入はとってもカンタンです。
1. Gemfileに追記
6行目でbootstrap-sass gemを使うことを明記しています。追記したらいつもどおり、bundle installします。
2. CSSファイルにインポート
CSSファイルにbootstrapをインポートします。
以上で準備は完了ですヽ(=´▽`=)ﾉ
Bootstrapの使い方
準備が整ったので、さっそくBootstrapを使っていきましょう！
CSSフレームワークとしてのBootstrapは、HTMLタグに特定のクラスを追加することで機能します。
たとえば、この物寂しいHome画面。
以下のようにHTMLタグにクラスを追加すると、
このとおり、それっぽいヘッダーメニューになります。
ドロップダウンメニューもつける
ヘッダーメニューの右端に「アカウント」という項目があるかと思われます。
これをいわゆるドロップダウンメニューにしたいと思います。クリックするとびろーんと降りてくるメニューですね！
ドロップダウンメニューを実装するにはapp/assets/javascripts/application.jsに追記する必要があります。
こちらのファイルに以下のように追記します。(15行目)
このように記述することで(＆適切なクラスが付与されていることで)、ドロップダウンメニューが完成しました！
アカウントをクリックすると、ピロっとメニューが飛び出してきます。
まとめ
Bootstrap様の力を借りて、暫定的ではありますが、それなりに見れるデザインを付けることができましたヽ(=´▽`=)ﾉ
もう少し機能面を強化したら、またデザインに戻ってきたいと思います！もっとCSS3とか使いたいですね！
FollowMe
始まった！Railsやりながら聴いてます https://t.co/JbXNqJwAXj
— タク(chuck) (@chuck0523) August 1, 2015