ブラウザだけで学ぶWebアプリ開発

4,435 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/380/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business

ブラウザだけで学ぶWebアプリ開発

  1. 1. ブラウザだけで学ぶ Webアプリ開発 開発編 株式会社co-meeting 吉⽥田  雄哉
  2. 2. これから  お話する⼈人
  3. 3. パブリック クラウド えばんじぇりすと 吉⽥田  パクえ http://fb.com/pakuepakue
  4. 4. www.co-‐‑‒meeting.com
  5. 5. 本⽇日の流流れ
  6. 6. アジェンダ •  •  •  •  •  •  •  準備の確認 Webアプリを作る理理由 開発環境の準備 アプリケーション開発  事始め 少し機能を作ってみよう カスタマイズしてみよう 本番環境を作ってみよう •  Webアプリの基礎 •  Webアプリ開発のための勉強⽅方法
  7. 7. この授業の特徴 •  まずは全体の流流れを体感しましょう –  全体像を把握すれば勉強しやすくなる! •  難しいことは後回しにしましょう –  プログラム⾔言語、フレームワーク、サーバー
  8. 8. 準備してありますか? •  Google Chrome : ブラウザ •  メールアドレス –  パソコンで受信チェックできるもの •  iPhoneで⾒見見られるだけはこの授業では使えません •  例例:  Gmail など
  9. 9. メアドがない場合は作成 https://login.yahoo.co.jp ボタンをクリックした後 必要項⽬目を⼊入⼒力力する。 授業後に https://account.edit.yahoo.co.jp へアクセスし、メールアドレス情報を変更更して 登録メールアドレスをパソコンでも⾒見見られる 別のアカウントに変更更すると、⻑⾧長く使うことが できます。
  10. 10. 進め⽅方 •  ⼀一緒に作業を⾏行行います •  スライド左上に「作業」は、実施する内 容が書かれています。 •  スライド左上に「結果」は、実施した内 容で同⼀一の結果になれば作業完了了です。
  11. 11. では、本題へ
  12. 12. 今回利利⽤用するサービスの全体像 Nitrous •  開発環境 •  クラウドから提供される専⽤用のサーバ •  ⾔言語、フレームワークがセットアップ済み •  テストサーバ •  ローカルリポジトリ heroku •  本番環境 •  クラウドから提供される専⽤用のサーバ •  ⾔言語、フレームワークがセットアップ済み •  本番サーバ •  リモートリポジトリ
  13. 13. 開発環境の準備 アカウントを作る
  14. 14. 作業 http://bit.ly/FirstPaaS 右側にSign Up for Freeを⼊入⼒力力
  15. 15. 結果
  16. 16. 作業 登録したメールをチェックしNitrousからのメールを開く メール内のリンクをクリック
  17. 17. 結果 この画⾯面が表⽰示される
  18. 18. 作業 最初の箱を作ろう Name bookshelf Region US West 最後に Create Boxを クリック
  19. 19. 結果 “bookshelf is running” になればOK!!
  20. 20. 作業 右下「Okay, … 」をクリック
  21. 21. 結果
  22. 22. 解説 開発画⾯面 中:ファイルの 編集画⾯面 左:ファイルの     ⼀一覧表⽰示 下:コンソール   コマンドを⼊入⼒力力します
  23. 23. Nitrous.ioを使う時のお願い •  参加者が多い場合、コネクションが切切れ る場合があります。その時は、ブラウザ を更更新してください。 •  更更新してもうまく繋がらない場合は、ブ ラウザを⼀一度度閉じて開き直してください。
  24. 24. アプリケーション作成  事始め 早速作ってみよう
  25. 25. 作業 画⾯面の調整 クリックする
  26. 26. 結果 やたら真っ⿊黒でも凹まないこと
  27. 27. 作業 コンソールを使ってみよう RubyとRailsのバージョンを確認 ハイフン1コ ruby -v スペース rails -v
  28. 28. 結果
  29. 29. 作業 Railsのプロジェクトを作ろう rails new bookshelf スペース
  30. 30. 結果 ⼀一度度画⾯面が⽌止まります そのまま待つ! 最後に「~$ 」となったら完了了
  31. 31. 作成されたディレクトリに移動 作業 cd bookshelf ls 結果 cd b まで打ったら TABを押してみよう!
  32. 32. サーバは直ぐに動き出す 作業 rails s 結果
  33. 33. 作業 確認してみよう 画⾯面上部のメニューから、 Previewをクリックし  「Port3000」を選ぶ
  34. 34. 結果 画⾯面表⽰示された! 動きました コンソールにはアクセスログが 表⽰示されている! 確認したウインドウは閉じないでください! 次の作業でも使います
  35. 35. ここまでのまとめ •  •  •  •  Nitrous.ioでアカウント作成 Railsのプロジェクトを作成 ⾃自動的に作成されたプログラムを動かす サーバが動いていることを確認 Nitrous.ioを利利⽤用して、アプリ開発に必要となる 開発環境の整備をブラウザだけで⾏行行いました。
  36. 36. 少し機能を作ってみよう
  37. 37. “アプリ”とは? アプリケーションは「課題」を解決するためのものです。 今回は「本棚」に潜む 課題を解決してみましょう
  38. 38. 本棚に潜む課題とは? 例例えば・・・ •  漫画を買おうと思ったけ ど、何巻まで買ったか忘 れてしまった! •  買ってみたけど、家に 帰ってみたら同じのが! •  ⾃自分ではなく、家族が 持っていた!
  39. 39. 「アプリ」で解決してみよう! どこにいても、本棚を調べられたら便便利利そう 本棚を管理理するためには、どんな「情報」を管 理理するとよいでしょうか? [課題] 本のどのような情報を管理理すれば、課題解決 に役⽴立立ちそうですか? 5つほど挙げてみましょう
  40. 40. 要件定義 何も要望がないとアプリケーションの 焦点がぼやけます。 今回は以下のとおり 1.  何処からでも情報にアクセスできる 2.  何処でも情報を保存/変更更できる 個⼈人が特定できる情報には気をつけよう!
  41. 41. 要件定義2 •  情報を登録する –  本を登録する •  情報を表⽰示する –  本の⼀一覧を⾒見見る •  情報を変更更する –  本の情報を変更更する(修正  等) •  情報を削除する –  本の情報を削除する
  42. 42. 全体像 Webアプリ 利利⽤用者 サーバー データベース パソコン スマフォ
  43. 43. 開発⽤用サーバを停める 作業 Consoleに戻り、 Ctrl+cを押すとサーバが⽌止まる 結果 最後に「~$ 」となったら完了了
  44. 44. 何を作るか決める 蔵書アプリを作る book •  本の属性情報を保存する •  本のタイトル(⽂文字)と 本の価格(数字)を管理理対象とします title : string price : integer
  45. 45. 機能を⽣生成するコマンドを実⾏行行 作業 rails g scaffold book title:string price:integer rails : コマンドのベース部分 g : generateの略略 scaffold : “⾜足場”という意味 book : 保存する対象 以降降、保存したい情報を列列挙する ワーク:  ⽣生成されたファイルの中⾝身をみてみましょう
  46. 46. 結果 最後に「~$ 」となったら完了了
  47. 47. データベースの⽣生成を⾏行行う 作業 rake db:migrate 結果 最後に「~$ 」となったら完了了 補⾜足:ここではsqlite3というファイルベースのデータベースをしようしています。 本番ではPostgreSQLというデータベースを利利⽤用します。
  48. 48. 動作を確認しよう 作業 rails s 先ほど確認をしたタブを選び、 URLの最後に  books を追加してアクセス 例例:  http://book-2.ae1.actionbox.io:3000/books 結果
  49. 49. ここまでのまとめ •  何を作るか決める –  bookを保存するアプリ •  bookはtitleとprice持っている •  コマンドでScaffold(⾜足場)を作成 –  ⾃自動でプログラムが⽣生成される •  データベースの準備 •  サーバを動かしてみる –  登録、表⽰示、変更更、削除が⾏行行える 基本的なアプリケーションを⾃自動作成して動かしました
  50. 50. カスタマイズしよう
  51. 51. 画⾯面の調整 作業 作業 クリックする 結果 結果
  52. 52. ⽇日本語化してみよう 作業 •  ページの⽇日本語化 –  bookshelf > app > views > books > index.html.erb 1⾏行行⽬目のListring …を 書籍⼀一覧へ変更更 Saveを忘れずに
  53. 53. 結果 index.html.erbの左がXになっていればOK *になっている場合はSaveをクリック 結果 再読み込みをして、変化していればOK
  54. 54. ここまでのまとめ •  ⾒見見た⽬目を変更更する場合は bookshelf > app > views > books 以下のファイル群に作業を⾏行行う 間違えても作り直せば良良いので、どんどん変更更してみよう! ※最初に戻す⽅方法は巻末参照
  55. 55. 本番環境の準備 Herokuへ配置(デプロイ)
  56. 56. 作業 https://heroku.com/ Sign up for freeをクリック
  57. 57. 作業 メールアドレスを⼊入⼒力力し、Sign Upをクリック 結果
  58. 58. 作業 メール内のURLをクリック
  59. 59. 作業 パスワードを⼊入⼒力力し、Saveをクリック
  60. 60. 結果 しばし、そのまま待つ! この画⾯面になったら ワーク:  https://devcenter.heroku.com/ を⾒見見てみましょう
  61. 61. 本番環境へ送る Herokuへ配置(デプロイ)
  62. 62. routes.rbを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > config > routes.rbをクリック
  63. 63. routes.rbを調整 作業 8⾏行行⽬目から#を消す Welcome を booksに変更更する 最後にSaveをクリック 結果
  64. 64. Gemfileを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > config クリックして畳む Gemfileをクリック
  65. 65. Gemfileを調整 作業 7行目を以下のように変更 終わったら保存を忘れずに!
  66. 66. コンソールでbundleを実⾏行行 作業 サーバが動いていたらCtrl+Cで⽌止める 作業 bundleと⼊入⼒力力しエンター 結果
  67. 67. 作業 gitの準備 •  以下の準備コマンドを実⾏行行します。 •  この作業はNitrous.ioで1Boxを作るたびに⾏行行う必 要があります。 •  コンソールで実⾏行行します。 •  メアド、なまえは半⾓角英数で⼊入⼒力力してください。 •  メアドはHerokuに登録したものを使います git config --global user.email “メアド” git config --global user.name “なまえ”
  68. 68. 結果
  69. 69. 作業 プロジェクトをバージョン管理理の配下に •  バージョン管理理のセットアップ(1回) git init •  バージョン管理理へ登録する(変更更毎に) git add . git commit –m “ 変更更内容のメモ ” 以降降、何らかのファイルを書き換えた場合は add と commitを⾏行行う 事で、変更更履履歴が保存されます。 ワーク:  gitのコマンドの使い⽅方を調べ、変更更履履歴を⾒見見てみましょう
  70. 70. 作業 作業 結果
  71. 71. NitrousとHerokuを繋げる 作業 heroku login heroku login : NitrousでBoxを表⽰示したら必ず⾏行行う。(ブラウザ更更新時も)
  72. 72. 結果 もし、上記のFound …. Uploading …  が無い場合は、 以下のコマンドを実⾏行行する $ heroku keys:add ~/.ssh/id_rsa.pub heroku keys:add : Boxを新しく作った時に1度度実⾏行行する
  73. 73. Herokuへデプロイする 作業 gem install rake -v '10.1.1' heroku create heroku create : Nitrousでプロジェクトを作ったら1度度実⾏行行する git push heroku master 途中で⽌止まったらYesと応える git push: 本番環境のソースコードを更更新したいタイミングで⾏行行う
  74. 74. 結果
  75. 75. 結果 確認 •  git push heroku master の出⼒力力最後に注⽬目 •  Launching … done なら成功 •  このメッセージが出てない場合は、ここまでの⼿手順で間違っ てます •  URLが表⽰示されている  (このURLを後で確認する) ワーク  :  heroku logs を実⾏行行し、サーバの様⼦子を⾒見見てみよう               heroku とコマンドを打って、他の機能も⾒見見てみよう
  76. 76. データベースに反映 作業 heroku run rake db:migrate heroku run : heroku側で実⾏行行したい処理理を指⽰示する rake db:migrate : データベースの作成、変更更を実施する
  77. 77. 結果
  78. 78. booksを表⽰示してみる ワーク:  ここまでの流流れを復復習し、TitleとPriceを⽇日本語化しましょう。                Nitrousにて変更更、表⽰示して確認、Gitへ登録、Herokuへ反映
  79. 79. 最終確認 •  Herokuのタブを更更新して、名前をクリック
  80. 80. ⽮矢印をクリックすると・・・
  81. 81. ここまでのまとめ •  •  •  •  •  •  •  •  •  routes.rbとGemfileを修正する bundle  の実⾏行行 gitの準備 herokuにログイン herokuにアプリを作成 gitにアプリケーションを登録 gitでHerokuへデプロイ (git push) Herokuでデータベースを作成 動作を確認
  82. 82. この後は? Herokuへ配置(デプロイ)
  83. 83. Webアプリ開発のワークフロー •  開発の周期は1〜~2週間を⽬目安とする •  テストを先に書き、実装を進める⼿手法 •  細かい単位でのデプロイを繰り返す 仕様決め 実装 チケット管理理 分散型 バージョン管 理理 かんばん⽅方式 Scrum Git XP •  デザインなども含めUXを考える •  利利⽤用者も巻き込む •  継続的な活動 テスト リリース CI ステージング プロダクショ ン Jenkins TravisCI クラウド環境 デプロイ
  84. 84. 各種仕組みの関係性 dev ステージング dev dev User Github Bitbucket Jenkins TravisCI プロダクショ ン User User
  85. 85. 今回利利⽤用するサービスの全体像 Nitrous •  開発環境 •  クラウドから提供される専⽤用のサーバ •  ⾔言語、フレームワークがセットアップ済み •  テストサーバ •  ローカルリポジトリ heroku •  本番環境 •  クラウドから提供される専⽤用のサーバ •  ⾔言語、フレームワークがセットアップ済み •  本番サーバ •  リモートリポジトリ
  86. 86. RubyのことはRubyに聞こう •  gem install pry •  pry やってみよう a = [] a.methods 開発中にも わからないもの を試して進める
  87. 87. Railsを学ぶ上で覚えておくべき習慣 •  Railsは⼤大変バージョンアップが激しいフレー ムワークです。利利⽤用者はそのバージョンに追 随し続ける事で新しい技術を学び、いち早く その恩恵を受ける事が⽂文化的に求められます。 •  Webアプリは最低でも半年年に1度度はフレー ムワークのバージョンアップに対応するのが 良良いでしょう。それ以上の開きがあると、 バージョンアップの対応がとても⼯工数がかか ることになり、結果として脆弱性などを含ん だ状態になってしまいます。
  88. 88. Railsでアプリを作る為に •  Railsチュートリアル •  http://railstutorial.jp/ (Rails3.2) •  http://railstutorial.jp/?version=4.0 •  Ruby on Rails v4.0.1 ドキュメント •  http://railsdoc.com/ •  Qiita – Rails •  http://qiita.com/tags/rails
  89. 89. それ以外に勉強すること •  jQuery –  Javascriptのライブラリ。Railsでは標準で使 えるようになっている。サーバとの通信 (Ajax)やアプリ画⾯面へアニメーションを付け るなどで利利⽤用する。 –  tryjQuery •  http://railsdoc.com/ –  ドットインストール  JavaScript / jQuery •  http://dotinstall.com/lessons/basic_javascript •  http://dotinstall.com/lessons/basic_jquery
  90. 90. それ以外に勉強すること •  jQuery –  Javascriptのライブラリ。Railsでは標準で使 えるようになっている。サーバとの通信 (Ajax)やアプリ画⾯面へアニメーションを付け るなどで利利⽤用する。 –  tryjQuery •  http://railsdoc.com/ –  ドットインストール  JavaScript / jQuery •  http://dotinstall.com/lessons/basic_javascript •  http://dotinstall.com/lessons/basic_jquery
  91. 91. Rubyを学ぶ⽅方法 •  ドットインストールの動画を⾒見見る(全32回) •  http://dotinstall.com/lessons/basic_ruby •  TryRuby •  http://tryruby.org/ •  逆引きRuby •  http://www.namaraii.com/rubytips/ •  パーフェクトRuby •  http://gihyo.jp/book/2013/978-4-7741-5879-2 •  Qiita •  http://qiita.com/tags/ruby
  92. 92. バージョン管理理を始めよう バージョン管理理を使うと、変更更履履歴 が効率率率良良く⾏行行う事ができるようにな ります。最近のバージョン管理理では、 さらに複数名での活動をサポートし てくれるようになっているので、こ れを使って開発をするようにしま しょう。
  93. 93. Heroku活⽤用Tips 1 •  HerokuではアプリケーションはDynoと呼 ばれるサーバのようなものに詰め込まれ、 実⾏行行させられます。750時間の無料料枠があ ります。 •  もし処理理性能が⾜足りない場合はDynoを増 やして対応するという考え⽅方をします。 •  参考URL –  http://blog.mah-lab.com/2013/05/16/ heroku-commons-16/
  94. 94. Heroku活⽤用 Tips2 ~ 必須コマンド •  heroku logs –  ログの閲覧 •  heroku releases –  デプロイされたバージョンを表⽰示 –  heroku rollback vXX (XXはreleasesで表⽰示 されるバージョン番号)にて、好きなバー ジョンに戻す事ができる
  95. 95. Heroku活⽤用 Tips3 ~ 独⾃自ドメイン •  独⾃自ドメインを保有しており、レコードの追加が⾏行行える状態になっ てください •  Herokuログイン > Settings > Domainsを確認 –  独⾃自ドメインの⼊入⼒力力 –  DNSへCNAMEレコードでアプリのドメインを登録
  96. 96. Herokuが便便利利な理理由 •  Herokuはサーバを管理理することから開発者を解放 してくれます。開発者はアプリケーションの開発 に集中する事が可能となり、殆どのコントロール を開発環境から実⾏行行する事が可能です。 •  実際に多くのアプリケーションや有償サービスが 稼働しており、PaaSの中ではもっとも実績がある 環境といえます。 •  PaaSはIaaSと違いサーバを操作できないため、 アプリケーションの開発でカバーできない要件に ついては対応が難しい場合が有ります。 •  ⼀一⽅方でサーバ管理理から開放される為、より⼤大きな アプリケーションのサービスを提供できることを 意味します。
  97. 97. Herokuをもっと使いこなす為に •  Herokuにアプリケーションをデプロイしたとき、同時に Heroku Postgresというサービスも利利⽤用しています。   https://postgres.heroku.com/ •  Herokuには多くのAdd-onがあります。Herokuの指針である、 開発者はアプリケーション開発に集中しように基づき、使え そうなサービスについては開発を⾏行行わずにサービスに任せる という開発スタイルが最もHerokuを使いこなす上で必要とな ります。 https://addons.heroku.com/ •  「ベンダーロックイン」と⾔言う⽅方もいますが、昔の「ロック イン」とは現在はだいぶ状況が違います。Herokuはオープン ソースのライブラリを活⽤用していますし、⾃自分で運⽤用したけ れば移⾏行行が可能です。あくまで運⽤用を⼈人に任せ、より開発に 集中するために利利⽤用するものと捉えましょう。
  98. 98. 開発環境の構築について •  今回はNitrous.ioやHerokuといったサービス を活⽤用しましたが、もし完全に⾃自分でやりた い場合は以下の作業を⾏行行いましょう。 –  ⾃自⾝身のPC等へRubyとRailsをセットアップする –  ⾃自⾝身のPC等へDatabeseのセットアップを⾏行行う –  Herokuに関するセットアップを⾏行行う •  https://devcenter.heroku.com/articles/quickstart –  本番環境の準備を⾏行行う •  IaaSを使う or レンサバ等を使う or 所有する物理理サー バを使う
  99. 99. 参考URL •  heroku –  https://devcenter.heroku.com/articles/rails4getting-started •  Nitrous.IO –  http://help.nitrous.io/heroku/ –  2013年年8⽉月27⽇日現在では、上記のURLの通りにや らずherokuの⽅方のドキュメント⼿手順で進めて問 題ない
  100. 100. 巻末:最初の状態に戻す⽅方法 bookshelfを右クリックから削除
  101. 101. Herokuを最初に戻す settingをクリック ⼀一番下のDelete appをクリック アプリケーションの名前を⼊入⼒力力し Deleteをクリック

×