ブラウザだけで学ぶWebアプリ開発
•
38 likes•5,156 views
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/380/room ーーーーーーーーーーーーーーーーーーーーーーー
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to ブラウザだけで学ぶWebアプリ開発
Similar to ブラウザだけで学ぶWebアプリ開発 (20)
More from schoowebcampus
More from schoowebcampus (20)
Recently uploaded
Recently uploaded (10)
ブラウザだけで学ぶWebアプリ開発
- 2. これから お話する⼈人
- 5. 本⽇日の流流れ
- 6. アジェンダ • • • • • • • 準備の確認 Webアプリを作る理理由 開発環境の準備 アプリケーション開発 事始め 少し機能を作ってみよう カスタマイズしてみよう 本番環境を作ってみよう • Webアプリの基礎 • Webアプリ開発のための勉強⽅方法
- 7. この授業の特徴 • まずは全体の流流れを体感しましょう – 全体像を把握すれば勉強しやすくなる！ • 難しいことは後回しにしましょう – プログラム⾔言語、フレームワーク、サーバー
- 8. 準備してありますか？ • Google Chrome : ブラウザ • メールアドレス – パソコンで受信チェックできるもの • iPhoneで⾒見見られるだけはこの授業では使えません • 例例： Gmail など
- 10. 進め⽅方 • ⼀一緒に作業を⾏行行います • スライド左上に「作業」は、実施する内 容が書かれています。 • スライド左上に「結果」は、実施した内 容で同⼀一の結果になれば作業完了了です。
- 11. では、本題へ
- 12. 今回利利⽤用するサービスの全体像 Nitrous • 開発環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • テストサーバ • ローカルリポジトリ heroku • 本番環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • 本番サーバ • リモートリポジトリ
- 13. 開発環境の準備 アカウントを作る
- 14. 作業 http://bit.ly/FirstPaaS 右側にSign Up for Freeを⼊入⼒力力
- 15. 結果
- 17. 結果 この画⾯面が表⽰示される
- 19. 結果 “bookshelf is running” になればOK!!
- 21. 結果
- 25. 作業 画⾯面の調整 クリックする
- 27. 作業 コンソールを使ってみよう RubyとRailsのバージョンを確認 ハイフン1コ ruby -v スペース rails -v
- 28. 結果
- 31. 作成されたディレクトリに移動 作業 cd bookshelf ls 結果 cd b まで打ったら TABを押してみよう！
- 36. 少し機能を作ってみよう
- 38. 本棚に潜む課題とは？ 例例えば・・・ • 漫画を買おうと思ったけ ど、何巻まで買ったか忘 れてしまった！ • 買ってみたけど、家に 帰ってみたら同じのが！ • ⾃自分ではなく、家族が 持っていた！
- 41. 要件定義２ • 情報を登録する – 本を登録する • 情報を表⽰示する – 本の⼀一覧を⾒見見る • 情報を変更更する – 本の情報を変更更する（修正 等） • 情報を削除する – 本の情報を削除する
- 44. 何を作るか決める 蔵書アプリを作る book • 本の属性情報を保存する • 本のタイトル(⽂文字)と 本の価格(数字)を管理理対象とします title : string price : integer
- 45. 機能を⽣生成するコマンドを実⾏行行 作業 rails g scaffold book title:string price:integer rails : コマンドのベース部分 g : generateの略略 scaffold : “⾜足場”という意味 book : 保存する対象 以降降、保存したい情報を列列挙する ワーク： ⽣生成されたファイルの中⾝身をみてみましょう
- 47. データベースの⽣生成を⾏行行う 作業 rake db:migrate 結果 最後に「~$ 」となったら完了了 補⾜足：ここではsqlite3というファイルベースのデータベースをしようしています。 本番ではPostgreSQLというデータベースを利利⽤用します。
- 48. 動作を確認しよう 作業 rails s 先ほど確認をしたタブを選び、 URLの最後に books を追加してアクセス 例例： http://book-2.ae1.actionbox.io:3000/books 結果
- 49. ここまでのまとめ • 何を作るか決める – bookを保存するアプリ • bookはtitleとprice持っている • コマンドでScaffold(⾜足場)を作成 – ⾃自動でプログラムが⽣生成される • データベースの準備 • サーバを動かしてみる – 登録、表⽰示、変更更、削除が⾏行行える 基本的なアプリケーションを⾃自動作成して動かしました
- 50. カスタマイズしよう
- 52. ⽇日本語化してみよう 作業 • ページの⽇日本語化 – bookshelf > app > views > books > index.html.erb １⾏行行⽬目のListring …を 書籍⼀一覧へ変更更 Saveを忘れずに
- 54. ここまでのまとめ • ⾒見見た⽬目を変更更する場合は bookshelf > app > views > books 以下のファイル群に作業を⾏行行う 間違えても作り直せば良良いので、どんどん変更更してみよう！ ※最初に戻す⽅方法は巻末参照
- 56. 作業 https://heroku.com/ Sign up for freeをクリック
- 58. 作業 メール内のURLをクリック
- 62. routes.rbを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > config > routes.rbをクリック
- 64. Gemfileを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > config クリックして畳む Gemfileをクリック
- 67. 作業 gitの準備 • 以下の準備コマンドを実⾏行行します。 • この作業はNitrous.ioで１Boxを作るたびに⾏行行う必 要があります。 • コンソールで実⾏行行します。 • メアド、なまえは半⾓角英数で⼊入⼒力力してください。 • メアドはHerokuに登録したものを使います git config --global user.email “メアド” git config --global user.name “なまえ”
- 68. 結果
- 69. 作業 プロジェクトをバージョン管理理の配下に • バージョン管理理のセットアップ(1回) git init • バージョン管理理へ登録する(変更更毎に) git add . git commit –m “ 変更更内容のメモ ” 以降降、何らかのファイルを書き換えた場合は add と commitを⾏行行う 事で、変更更履履歴が保存されます。 ワーク： gitのコマンドの使い⽅方を調べ、変更更履履歴を⾒見見てみましょう
- 70. 作業 作業 結果
- 71. NitrousとHerokuを繋げる 作業 heroku login heroku login : NitrousでBoxを表⽰示したら必ず⾏行行う。(ブラウザ更更新時も)
- 72. 結果 もし、上記のFound …. Uploading … が無い場合は、 以下のコマンドを実⾏行行する $ heroku keys:add ~/.ssh/id_rsa.pub heroku keys:add : Boxを新しく作った時に１度度実⾏行行する
- 73. Herokuへデプロイする 作業 gem install rake -v '10.1.1' heroku create heroku create : Nitrousでプロジェクトを作ったら１度度実⾏行行する git push heroku master 途中で⽌止まったらYesと応える git push: 本番環境のソースコードを更更新したいタイミングで⾏行行う
- 74. 結果
- 75. 結果 確認 • git push heroku master の出⼒力力最後に注⽬目 • Launching … done なら成功 • このメッセージが出てない場合は、ここまでの⼿手順で間違っ てます • URLが表⽰示されている （このURLを後で確認する） ワーク ： heroku logs を実⾏行行し、サーバの様⼦子を⾒見見てみよう heroku とコマンドを打って、他の機能も⾒見見てみよう
- 76. データベースに反映 作業 heroku run rake db:migrate heroku run : heroku側で実⾏行行したい処理理を指⽰示する rake db:migrate : データベースの作成、変更更を実施する
- 77. 結果
- 78. booksを表⽰示してみる ワーク： ここまでの流流れを復復習し、TitleとPriceを⽇日本語化しましょう。 Nitrousにて変更更、表⽰示して確認、Gitへ登録、Herokuへ反映
- 80. ⽮矢印をクリックすると・・・
- 81. ここまでのまとめ • • • • • • • • • routes.rbとGemfileを修正する bundle の実⾏行行 gitの準備 herokuにログイン herokuにアプリを作成 gitにアプリケーションを登録 gitでHerokuへデプロイ (git push) Herokuでデータベースを作成 動作を確認
- 83. Webアプリ開発のワークフロー • 開発の周期は１〜～２週間を⽬目安とする • テストを先に書き、実装を進める⼿手法 • 細かい単位でのデプロイを繰り返す 仕様決め 実装 チケット管理理 分散型 バージョン管 理理 かんばん⽅方式 Scrum Git XP • デザインなども含めUXを考える • 利利⽤用者も巻き込む • 継続的な活動 テスト リリース CI ステージング プロダクショ ン Jenkins TravisCI クラウド環境 デプロイ
- 85. 今回利利⽤用するサービスの全体像 Nitrous • 開発環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • テストサーバ • ローカルリポジトリ heroku • 本番環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • 本番サーバ • リモートリポジトリ
- 86. RubyのことはRubyに聞こう • gem install pry • pry やってみよう a = [] a.methods 開発中にも わからないもの を試して進める
- 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. それ以外に勉強すること • jQuery – Javascriptのライブラリ。Railsでは標準で使 えるようになっている。サーバとの通信 (Ajax)やアプリ画⾯面へアニメーションを付け るなどで利利⽤用する。 – ｔｒｙjQuery • http://railsdoc.com/ – ドットインストール JavaScript / jQuery • http://dotinstall.com/lessons/basic_javascript • http://dotinstall.com/lessons/basic_jquery
- 90. それ以外に勉強すること • jQuery – Javascriptのライブラリ。Railsでは標準で使 えるようになっている。サーバとの通信 (Ajax)やアプリ画⾯面へアニメーションを付け るなどで利利⽤用する。 – ｔｒｙjQuery • http://railsdoc.com/ – ドットインストール JavaScript / jQuery • http://dotinstall.com/lessons/basic_javascript • http://dotinstall.com/lessons/basic_jquery
- 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
- 93. Heroku活⽤用Tips 1 • HerokuではアプリケーションはDynoと呼 ばれるサーバのようなものに詰め込まれ、 実⾏行行させられます。750時間の無料料枠があ ります。 • もし処理理性能が⾜足りない場合はDynoを増 やして対応するという考え⽅方をします。 • 参考ＵＲＬ – http://blog.mah-lab.com/2013/05/16/ heroku-commons-16/
- 94. Heroku活⽤用 Tips2 ~ 必須コマンド • heroku logs – ログの閲覧 • heroku releases – デプロイされたバージョンを表⽰示 – heroku rollback vXX (XXはreleasesで表⽰示 されるバージョン番号）にて、好きなバー ジョンに戻す事ができる
- 95. Heroku活⽤用 Tips3 ~ 独⾃自ドメイン • 独⾃自ドメインを保有しており、レコードの追加が⾏行行える状態になっ てください • Herokuログイン > Settings > Domainsを確認 – 独⾃自ドメインの⼊入⼒力力 – DNSへCNAMEレコードでアプリのドメインを登録
- 96. Herokuが便便利利な理理由 • Herokuはサーバを管理理することから開発者を解放 してくれます。開発者はアプリケーションの開発 に集中する事が可能となり、殆どのコントロール を開発環境から実⾏行行する事が可能です。 • 実際に多くのアプリケーションや有償サービスが 稼働しており、PaaSの中ではもっとも実績がある 環境といえます。 • PaaSはIaaSと違いサーバを操作できないため、 アプリケーションの開発でカバーできない要件に ついては対応が難しい場合が有ります。 • ⼀一⽅方でサーバ管理理から開放される為、より⼤大きな アプリケーションのサービスを提供できることを 意味します。
- 97. Herokuをもっと使いこなす為に • Herokuにアプリケーションをデプロイしたとき、同時に Heroku Postgresというサービスも利利⽤用しています。 https://postgres.heroku.com/ • Herokuには多くのAdd-onがあります。Herokuの指針である、 開発者はアプリケーション開発に集中しように基づき、使え そうなサービスについては開発を⾏行行わずにサービスに任せる という開発スタイルが最もHerokuを使いこなす上で必要とな ります。 https://addons.heroku.com/ • 「ベンダーロックイン」と⾔言う⽅方もいますが、昔の「ロック イン」とは現在はだいぶ状況が違います。Herokuはオープン ソースのライブラリを活⽤用していますし、⾃自分で運⽤用したけ れば移⾏行行が可能です。あくまで運⽤用を⼈人に任せ、より開発に 集中するために利利⽤用するものと捉えましょう。
- 98. 開発環境の構築について • 今回はNitrous.ioやHerokuといったサービス を活⽤用しましたが、もし完全に⾃自分でやりた い場合は以下の作業を⾏行行いましょう。 – ⾃自⾝身のPC等へRubyとRailsをセットアップする – ⾃自⾝身のPC等へDatabeseのセットアップを⾏行行う – Herokuに関するセットアップを⾏行行う • https://devcenter.heroku.com/articles/quickstart – 本番環境の準備を⾏行行う • IaaSを使う or レンサバ等を使う or 所有する物理理サー バを使う
- 99. 参考URL • heroku – https://devcenter.heroku.com/articles/rails4getting-started • Nitrous.IO – http://help.nitrous.io/heroku/ – 2013年年8⽉月27⽇日現在では、上記のURLの通りにや らずherokuの⽅方のドキュメント⼿手順で進めて問 題ない