読者です 読者をやめる 読者になる 読者になる

5分ちょいで開発完了!Ruby on Railsで作る簡単な自己紹介アプリ!(Mac編)

プログラミング テックキャンプ Ruby

f:id:yoshitokamizato:20161015183848j:plain

どうも!!

研究者のかみざと(@yoshito410kam )です。

 

今回はRuby on Rails を使って簡単な自己紹介アプリを作成する過程を見せ、皆さんのWebプログラミングに対するハードルを下げたいと思います!

プログラミングと言うと、初心者の方にとってはかなり難しそうなイメージがあるかもしれませんが、実際はぼくみたいな全くの素人でもすぐに基本的なことはできるようになるので、全く難しく考える必要はありません。

なのであまり気構えず、気楽にプログラミングに挑戦してみてください(^^)

 

この記事では、自己紹介アプリを作成するまでの全工程を録画した動画を載せました!

なので、Webプログラミングにご興味のある方は良かったら見てみてください。

その動画を見ると、少しはプログラミングに対するハードルも下がるかと思います。

 

 

自己紹介アプリ作成動画

5分ちょいあれば簡単な自己紹介アプリが作れます。

自分で好き勝手にコードをいじるのは、思った以上に楽しいです。

 

どうでしょう?

まだぎこちない部分もありますが、非エンジニアであってもこのくらいならすぐにできるようになります。

ただ参考書に沿って勉強するよりも、自分が表示させたい画像や文章を好きなようにカスタマイズしている方がはるかに楽しいので、最近は好き勝手に色んなページ作って遊んでいます。

 

こんな感じのやつとか↓(無駄にログイン機能付いてます)

f:id:yoshitokamizato:20161015184504j:plain

 

それでは、今回作成した自己紹介アプリの作成過程をご説明したいと思います!

ちなみに、この記事はRuby on Rails の実行環境が整っていることを前提にご説明させていただきます。

最初は詳細を理解できなくてもいいので、「あ〜、なんとなくこんな感じで作るんだ〜」くらいに思っていただければ大丈夫です。

 

ではさっそく、いってみましょー! 

 

アプリを立ち上げる

まず最初に「ターミナル」を使ってアプリを立ち上げます。

ターミナルは「移動→アプリケーション→ユーティリティ」の順で進むと見つけることができます。

 

Macのデスクトップ上部、移動を選択。

f:id:yoshitokamizato:20161014204155j:plain

 

アプリケーションを選択。

f:id:yoshitokamizato:20161014204208j:plain

 

ユーティリティを選択。

f:id:yoshitokamizato:20161014204455j:plain

 

下の方にターミナルがあります。

f:id:yoshitokamizato:20161014204511j:plain

 

ちなみに、Macの下部にある「Dock」に追加すると、簡単にターミナルを立ち上げられるようになります。

f:id:yoshitokamizato:20161014204809j:plain

 

で、ターミナルを開いて、アプリを立ち上げたいフォルダ内で「rails new profile」と入力します。

ぼくの場合は、「projects」というフォルダにアプリを作成しているので「cd ~/projects」でprojectsフォルダ内に移動し、「rails new profile」で「profile」という名前のアプリを立ち上げます。

f:id:yoshitokamizato:20161014203438j:plain

 

そうすると、アプリを動かすために必要なファイルがダーーーーーーーっと作られていきます。

こういうのを勝手にやってくれるから、Ruby on Rails を使うと楽にアプリを作ることができるんです。

ちなみに、このように開発を簡単にできるように手助けしてくれるものを「フレームワーク」と言います。 

f:id:yoshitokamizato:20161012073803j:plain

 

再度、コードを入力できるようになるとアプリに必要なファイルが作成されています。

f:id:yoshitokamizato:20161012073843j:plain

 

「profile」という名前でアプリを立ち上げたので、profileという名前のフォルダが作られています。

f:id:yoshitokamizato:20161012073949j:plain

 

中には、アプリを動かすために必要なファイルが自動的に作られています。

f:id:yoshitokamizato:20161012074240j:plain

 

テキストエディタ(Sublime Text)を開く

次に、立ち上げたアプリの編集をするために、テキストエディタを開きます。

ちなみに、ぼくが使っているのはテックキャンプが推奨している「Sublime Text」というテキストエディタです。

この Sublime Text をカスタマイズすることで、自動的に<h1>や<p>などの閉じタグを補完してくれたり、余計な半角・全角スペースを見つけてくれてエラーを防いでくれるので、コードを書くのがめっちゃ楽になります。

f:id:yoshitokamizato:20161012074416j:plain

 

開くとこんな感じ。

f:id:yoshitokamizato:20161012074453j:plain

 

「File」から「Open」を選択して、さっき立ち上げたアプリを選択します。

f:id:yoshitokamizato:20161012074509j:plain

 

「profile」を選択して、「Open」を押す。 

f:id:yoshitokamizato:20161012074817j:plain

 

そうすると、中に含まれているファイルが一気にダーーーーーーーーーっと表示されます。

f:id:yoshitokamizato:20161012074841j:plain

 

ルーティングの設定

Ruby on Rails の場合、コードを書くときは「ルーティング → コントローラー → ビュー」の順番で書くので、まずはルーティングから編集していきます。

ルーティングの編集は、「config → routes.rb」というファイルから行います。

それを開くとこんな感じ。

f:id:yoshitokamizato:20161012074940j:plain

 

灰色の薄い文字は、サンプルコードなので全て消します。 

f:id:yoshitokamizato:20161012075004j:plain

 

一番最後の「end」は消してしまうとエラーが出るので、消さないように気をつけます。

f:id:yoshitokamizato:20161012202840j:plain

 

そして、「Rails.application.routes.draw do」と 「end」の間に「get 'profile' => 'profile#index'」と書いて上書き保存(command + s)します。 

他のファイルに関しても、コードを書いた時は必ず上書き保存をします。(そうしないと変更が反映されません)

f:id:yoshitokamizato:20161012075059j:plain

 

この時編集した「profile#index」が、次に編集するコントローラーの名前とそのコントローラーのアクション名を指定しています。

f:id:yoshitokamizato:20161012210153j:plain

 

コントローラーの作成

ルーティング → コントローラー → ビュー」のうち、ルーティングの編集は終わったので、次はコントローラーです。

 

まずはコントローラーを作成する必要があるので、「cd profile」で自己紹介アプリのファイルに移動し、「ターミナル」で「rails g controller profile」と入力して「enter」を押します。 

f:id:yoshitokamizato:20161012203947j:plain

 

 

そうすると、コントローラーに関連するファイルがダーーーーーーーーーっと作成されます。

f:id:yoshitokamizato:20161012203829j:plain

 

コントローラーが立ち上がると、「app → controllers」に「profile_controller.rb」というファイルができているので、それを開きます。

f:id:yoshitokamizato:20161012204246j:plain

 

そして、中に下の画像のようなコードを書き、「index」というアクションを指定します。

f:id:yoshitokamizato:20161012204700j:plain

 

そうすることで、先ほどルーティングで編集した「profile#index」にコントローラーのindexアクションが対応することになります。

 

ルーティング

f:id:yoshitokamizato:20161012210153j:plain

コントローラー

f:id:yoshitokamizato:20161014213247j:plain

 

もう一度確認すると、ルーティングで「profile」というコントローラーを指定したから、「rails g controller profile」で「profile」という名前のコントローラーを作成し、「index」というアクションをコントローラー内に書くことで、リクエストがルーティングからコントローラーへ送られるという流れになります。

 

ここまでで質問のある方いらっしゃいますか?

 

、、、、、、、、、、、、えっ??

 

何言ってるかわからない??

 

 

 

 

うるせぇ!!!!

 

ビューの編集

ルーティング→ コントローラー → ビュー」のうち、ルーティングとコントローラーの編集が終わったので、次は「ビュー」を作成します。

これが、自己紹介アプリに表示させたいものを編集するファイルです。

先ほど編集した「profile」というコントローラーに対応するビューは、 「app → view → profile」というファイルの中に作成されたものです。

その中に、「index.html.erb」というファイルを作成すると、「profile」コントローラーの「index」アクションに対応したビューが作成できます。

 

「app → view → profile」を選択し、「New File」をクリックします。

f:id:yoshitokamizato:20161012205145j:plain

 

開いたファイル上で上書き保存(command + s)をします。

f:id:yoshitokamizato:20161012205238j:plain

 

ファイルの名前を「index.html.erb」とつけて保存します。 

f:id:yoshitokamizato:20161012210938j:plain

f:id:yoshitokamizato:20161012211049j:plain

 

保存して作成した「index.html.erb」というビューに、自分が表示したい文章をタグで囲って書いていきます。

これは、まんまHTMLの記述方法で大丈夫です。

「自己紹介」の部分は、タイトルなので<h2></h2>で囲み、文章の方は<p></p>で囲みます。

f:id:yoshitokamizato:20161012211124j:plain

 

写真の設定

自分の撮影した写真を、自己紹介アプリで表示できるようにします。

まず、Finderから自分がアプリを立ち上げた場所へ移動します。

f:id:yoshitokamizato:20161012212631j:plain

 

ぼくは「yoshito」フォルダの「projects」という場所に「profile」というアプリを作成したので、そのファイルを開きます。

f:id:yoshitokamizato:20161012213024j:plain

 

「profile」というアプリのファイルを開いたら「app → assets → images」の順にファイルを開き、そこに自分が表示したい画像を入れます。 

f:id:yoshitokamizato:20161012212404j:plain

 

 画像の名前はなんでもいいのですが、今回は「yoshito.jpg」にします。

この時、日本語にするとエラーが出てしまうので注意します。

f:id:yoshitokamizato:20161012212527j:plain

 

次に、ファイルに移動した写真を表示できるように、ビューを編集します。

その時には、「app → views → layouts」に入っている「application.html.erb」を編集します。

f:id:yoshitokamizato:20161012213404j:plain

 

 「application.html.erb」の中身はこんな感じです。

f:id:yoshitokamizato:20161012213523j:plain

 

それを、下の図のように編集します。

この時、<%= image_tag 'yoshito.jpg' %>と表記することで、「images」ファイルに入れた「yoshito.jpg」という画像が表示できるようになります。

f:id:yoshitokamizato:20161012213721j:plain

 

スタイルの指定

次に、作成したビューのスタイルを編集します。

これによって、中央寄せにしたり、幅を変えたり、文字の色やサイズを変えたりすることができるようになります。

 

スタイルの指定は、「app → assets → stylesheets」のapplication.cssというファイルから行います。

f:id:yoshitokamizato:20161015142716j:plain

 

今回はこんな感じに編集しました。

f:id:yoshitokamizato:20161015145206j:plain

 

それぞれのコードの役割を簡単に説明するとこんな感じです。

 

  • 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」というファイルに移動することができます。

f:id:yoshitokamizato:20161014203814j:plain

 

サーバーを立ち上げたら、Chromeの上部にあるurlを表示する部分に「localhost:3000/profile」と入力します。

f:id:yoshitokamizato:20161014203558j:plain

 

そうすると、自己紹介アプリが立ち上がり、作成した画面を表示できるようになります。 

 

f:id:yoshitokamizato:20161015194004j:plain

 

まとめ

いかがでしたか?

完全にはわからなかったけど、なんかやってみるとできそうだなぁ〜」って感じにはなったのではないでしょうか?

プログラミングと聞くと、初心者の方にとってはかなりハードルが高く感じられるかもしれませんが、慣れてくると意外と簡単に自己紹介アプリを作れるようになります。

 

自分で好き勝手にRuby on Rails をいじるのは、思った以上に楽しいのでぜひ挑戦してみてください。

感覚としては、パワポで発表資料を作っているのと似たような感覚です。

ものづくりが好きな人は絶対ハマるはず! 

やってみると楽しいですよ〜(^^) 

 

もし、この記事の説明がわかりにくかったら「オメェ〜の説明わかりにくいんだよ!!!」とFacebookかTwitterなどで直接メッセージをいただければと思います。

 

そうすると、もれなく

 

 

うるせぇ!!!

 

 

と返事が返ってくると思います。

よろしくお願いいたします。

 

 

 

以上!

Ruby on Rails の簡単な自己紹介ページの作成でした!

よかったら挑戦してみてください!

 

プログラミング教えてます

初心者向けプログラミング講座もやっていますので、よかったらご利用下さい!

 

一般の方向けプログラミング講座はこちら! 

utina.yoshitokamizato.com

 

ブロガーさん向けプログラミング講座はこちら!

utina.yoshitokamizato.com