【デザイン音痴必見！】booststrapテンプレートをRailsに適用させる
どうもこんにちは。
都内の大学生です。
今回がブログの初投稿となります。
簡単に言うとポートフォリオがてらRailsで自分のブログアプリを作っちゃおうと思いまして、そのアプリの完成までの経緯をブログにしようと思ったわけです。
今回はRailsをある程度学習し、アプリを自分で作った時に必ず起こるデザインどうするの問題について説明します。
Railsを学習されている方の参考になれば幸いです。
もちろん、無料で使用できます。
- Railsのアプリを開発した時にデザインどうするの問題
- デザインテンプレートって何？無料なの？Railsで使えるの？
- startbootstrapをダウンロード
- Railsのアプリにテンプレートを実装していく
- 実装するときのポイントまとめ
Railsのアプリを開発した時にデザインどうするの問題
みなさん、Railsを学習して
「そろそろ自分でアプリケーションを作成してみたい」
と思い、勢いよくメモアプリなどを開発した時
「あれ、デザインどうしよう。」
なんて思った経験あるのではないのでしょうか。
筆者も全く同じ経験をしました。
勢いよく作成したメモアプリを勢いのままデザインするとなんとも無残な姿に...
そうなんです。
デザインが全くの素人の私たちが少しかじった程度のCSSやJSの知識でWebアプリのデザインなんてできるはずがないのです。
なんか悲しい。
でも毎回CSS、JSに学習の時間をまた割くのもめんどくさい...。
デザインテンプレートって何？無料なの？Railsで使えるの？
そんな私たちを救ってくれるのがデザインテンプレートです！
私も開発中のブログサイトに使用しています。
初めて適用できた時は涙が止まりませんでした。
無料のものも数多くあります。
もちろんRailsにも簡単に適用させることができます。
世界中のデザイナーさんに感謝しながら使わせて頂きましょう。
Railsでのテンプレにおすすめのサイト 【startbootstrap】
まず紹介するのは「startbootstrap」です。
後ほど説明するRailsへの実装編でもこちらのサイトのテンプレートを使用します。
数多くのテンプレートが無料で使用でき、作りたいアプリの目的に合わせて選ぶことができます。
有料のものでは無料のものよりもさらに多くのテンプレートを使用できちゃいます。
テンプレートに慣れてきたら、検討してみても良いかもしれませんね。
他にも多くのテンプレートを無料でダウンロードできるサイトはありますが、今回はRailsへの実装がメインのため省略させていただきます。
気になる方はこちらの記事が参考になると思います。
startbootstrapをダウンロード
さて、上のリンクから飛ぶとこのような画面に行き着くと思います。
スクロールすると「BROWSE ALL THEMES」のボタンがあり、それを押すと無料のテンプレートを使用できます。
今回筆者が使用するテンプレートはこちら。
右上の「Free Down Lowd 」のボタンを押せばダウンロードが開始されます。
解凍して中を覗くとこんな感じです。
なんだか沢山のファイルがありますね。
私は初めて使用しようとした時ここらへんで挫折しました。（笑）
Railsのアプリにテンプレートを実装していく
ここからが本番です。
とりあえずいつものようにアプリを仮想環境で作成しました。
とにかくどファイルをどこにコピペしたら良いかわからなかった筆者。
ググりにググりこんな記事に行き着きました。
この記事を見ればしっかり実装できます。
その他参考になる記事
アイコンフォントが表示されない時はこの記事。
jQueryが適応されない時はこの記事。
筆者もまだ内容は書き換えていませんが、無事実装に成功しました。
実装するときのポイントまとめ
私もテンプレートを実装するだけでこんなに苦労するなんてまだまだです。（泣）
