どうも、神里です。
今回はRuby on Rails を使って簡単な自己紹介アプリを作成する過程を見せ、皆さんのWebプログラミングに対するハードルを下げたいと思います！
プログラミングと言うと、かなり難しそうなイメージがあるかもしれません。ですが、実際は全くの素人でもすぐに基本的なことはできるようになるので、難しく考える必要はありません。あまり気構えず、気楽にプログラミングに挑戦してみてください。
この記事では、自己紹介アプリを作成するまでの全工程を録画した動画を載せました。なので、Webプログラミングにご興味のある方は良かったら見てみてください。その動画を見ると、少しはプログラミングに対するハードルも下がるかと思います。
- 自己紹介アプリ作成動画
- アプリを立ち上げる
- テキストエディタ（Sublime Text）を開く
- ルーティングの設定
- コントローラーの作成
- ビューの編集
- 写真の設定
- スタイルの指定
- Chrome（クローム）で表示
- まとめ
自己紹介アプリ作成動画
5分ちょいあれば簡単な自己紹介アプリが作れます。
自分で好き勝手にコードをいじるのは、思った以上に楽しいです。
非エンジニアであっても、このくらいならすぐにできるようになります。ただ参考書に沿って勉強するよりも、自分が表示させたい画像や文章を好きなようにカスタマイズしている方がはるかに楽しいので、最近は好き勝手に色んなページ作って遊んでいます。
こんな感じのやつとか↓（無駄にログイン機能付いてます）
それでは、今回作成した自己紹介アプリの作成過程をご説明していきます。ちなみに、この記事はRuby on Rails の実行環境が整っていることが前提です。もしやっていない場合は、こちらの記事を参考にしてみてください。
最初は詳細を理解できなくてもいいので、「あ〜、なんとなくこんな感じで作るんだ〜」くらいに思っていただければ大丈夫です。
ではさっそく、いってみましょー！
アプリを立ち上げる
まず最初に「ターミナル」を使ってアプリを立ち上げます。ターミナルは「移動→アプリケーション→ユーティリティ」の順で進むと見つけることができます。
Macのデスクトップ上部、移動を選択。
アプリケーションを選択。
ユーティリティを選択。
下の方にターミナルがあります。
ちなみに、Macの下部にある「Dock」に追加すると、簡単にターミナルを立ち上げられるようになります。
で、ターミナルを開いて、アプリを立ち上げたいフォルダ内で「rails new profile」と入力します。ぼくの場合は、「projects」というフォルダにアプリを作成しているので「cd ~/projects」でprojectsフォルダ内に移動し、「rails new profile」で「profile」という名前のアプリを立ち上げます。
そうすると、アプリを動かすために必要なファイルがダーーーーーーーっと作られていきます。こういうのを勝手にやってくれるから、Ruby on Rails を使うと楽にアプリを作ることができるんです。ちなみに、このように開発を簡単にできるように手助けしてくれるものを「フレームワーク」と言います。
再度、コードを入力できるようになるとアプリに必要なファイルが作成されています。
「profile」という名前でアプリを立ち上げたので、profileという名前のフォルダが作られています。
中には、アプリを動かすために必要なファイルが自動的に作られています。
テキストエディタ（Sublime Text）を開く
次に、立ち上げたアプリの編集をするために、テキストエディタを開きます。ちなみに、ぼくが使っているのはテックキャンプが推奨している「Sublime Text」というテキストエディタです。あとは、「Atom」なんかもオススメ。
この Sublime Text をカスタマイズすることで、自動的に<h1>や<p>などの閉じタグを補完してくれたり、余計な半角・全角スペースを見つけてくれてエラーを防いでくれるので、コードを書くのがめっちゃ楽になります。
開くとこんな感じ。
「File」から「Open」を選択して、さっき立ち上げたアプリを選択します。
「profile」を選択して、「Open」を押す。
そうすると、中に含まれているファイルが一気にダーーーーーーーーーっと表示されます。
ルーティングの設定
Ruby on Rails の場合、コードを書くときは「ルーティング → コントローラー → ビュー」の順番で書くので、まずはルーティングから編集していきます。ルーティングの編集は、「config → routes.rb」というファイルから行います。それを開くとこんな感じ。
灰色の薄い文字は、サンプルコードなので全て消します。
一番最後の「end」は消してしまうとエラーが出るので、消さないように気をつけます。
そして、「Rails.application.routes.draw do」と 「end」の間に「get 'profile' => 'profile#index'」と書いて上書き保存（command + s）します。 他のファイルに関しても、コードを書いた時は必ず上書き保存をします。（そうしないと変更が反映されません）
この時編集した「profile#index」が、次に編集するコントローラーの名前とそのコントローラーのアクション名を指定しています。
コントローラーの作成
「ルーティング → コントローラー → ビュー」のうち、ルーティングの編集は終わったので、次はコントローラーです。
まずはコントローラーを作成する必要があるので、「cd profile」で自己紹介アプリのファイルに移動し、「ターミナル」で「rails g controller profile」と入力して「enter」を押します。
そうすると、コントローラーに関連するファイルがダーーーーーーーーーっと作成されます。
コントローラーが立ち上がると、「app → controllers」に「profile_controller.rb」というファイルができているので、それを開きます。
そして、中に下の画像のようなコードを書き、「index」というアクションを指定します。
そうすることで、先ほどルーティングで編集した「profile#index」にコントローラーのindexアクションが対応することになります。
ルーティング
コントローラー
もう一度確認すると、ルーティングで「profile」というコントローラーを指定したから、「rails g controller profile」で「profile」という名前のコントローラーを作成し、「index」というアクションをコントローラー内に書くことで、リクエストがルーティングからコントローラーへ送られるという流れになります。
ビューの編集
「ルーティング→ コントローラー → ビュー」のうち、ルーティングとコントローラーの編集が終わったので、次は「ビュー」を作成します。これが、自己紹介アプリに表示させたいものを編集するファイルです。
先ほど編集した「profile」というコントローラーに対応するビューは、 「app → view → profile」というファイルの中に作成されたもの。その中に、「index.html.erb」というファイルを作成すると、「profile」コントローラーの「index」アクションに対応したビューが作成できます。
「app → view → profile」を選択し、「New File」をクリックします。
開いたファイル上で上書き保存（command + s）をします。
ファイルの名前を「index.html.erb」とつけて保存します。
保存して作成した「index.html.erb」というビューに、自分が表示したい文章をタグで囲って書いていきます。
これは、まんまHTMLの記述方法で大丈夫です。「自己紹介」の部分は、タイトルなので<h2></h2>で囲み、文章の方は<p></p>で囲みます。
写真の設定
自分の撮影した写真を、自己紹介アプリで表示できるようにします。まず、Finderから自分がアプリを立ち上げた場所へ移動します。
ぼくは「yoshito」フォルダの「projects」という場所に「profile」というアプリを作成したので、そのファイルを開きます。
「profile」というアプリのファイルを開いたら「app → assets → images」の順にファイルを開き、そこに自分が表示したい画像を入れます。
画像の名前はなんでもいいのですが、今回は「yoshito.jpg」にします。この時、日本語にするとエラーが出てしまうので注意します。
次に、ファイルに移動した写真を表示できるように、ビューを編集します。その時には、「app → views → layouts」に入っている「application.html.erb」を編集します。
「application.html.erb」の中身はこんな感じです。
それを、下の図のように編集します。この時、<%= image_tag 'yoshito.jpg' %>と表記することで、「images」ファイルに入れた「yoshito.jpg」という画像が表示できるようになります。
スタイルの指定
次に、作成したビューのスタイルを編集します。これによって、中央寄せにしたり、幅を変えたり、文字の色やサイズを変えたりすることができるようになります。
スタイルの指定は、「app → assets → stylesheets」のapplication.cssというファイルから行います。
今回はこんな感じに編集しました。
それぞれのコードの役割を簡単に説明するとこんな感じです。
- margin: 0 auto; → 中央寄せ
- width: 600px; → 横幅の指定（この場合は600px）
- font-size: 30px; → 文字の大きさを30pxに指定
- color: red; → 文字の色を赤に指定
これらのコードを、スタイルを適用させたいものに表記します。例えば、pタグの文字の大きさを20pxに指定したいなら、p{ font-size: 20px;} というふうに書きます。 これによって、表示される画面のスタイルを自分の好きなようにカスタマイズすることができます。
Chrome（クローム）で表示
最後に、Chromeで作った自己紹介アプリを表示させます。まずは、アプリを立ち上げた「profile」というファイル上で「rails s」と入力し、サーバーを立ち上げます。
繰り返しになってしまいますが、ファイル間を移動するときはターミナルで「cd ~/projects/profile」と入力すると「profile」というファイルに移動することができます。
サーバーを立ち上げたら、Chromeの上部にあるurlを表示する部分に「localhost:3000/profile」と入力します。
そうすると、自己紹介アプリが立ち上がり、作成した画面を表示できるようになります。
まとめ
いかがでしたか？「完全にはわからなかったけど、なんかやってみるとできそうだなぁ〜」って感じにはなったのではないでしょうか？プログラミングと聞くと、初心者の方にとってはかなりハードルが高く感じられるかもしれませんが、慣れてくると意外と簡単に自己紹介アプリを作れるようになります。
自分で好き勝手にRuby on Rails をいじるのは、思った以上に楽しいのでぜひ挑戦してみてください。感覚としては、パワポで発表資料を作っているのと似たような感覚です。ものづくりが好きな人は絶対ハマるはず！
もし、この記事の説明がわかりにくかったら「オメェ〜の説明わかりにくいんだよ！！！」とFacebookかTwitterなどで直接メッセージをいただければと思います。
以上！
Ruby on Rails の簡単な自己紹介ページの作成でした！
よかったら挑戦してみてください！