![「アプリ」で解決してみよう！
どこにいても、本棚を調べられたら便便利利そう
本棚を管理理するためには、どんな「情報」を管
理理するとよいでしょうか？
[課題]
本のどのような情報を管理理すれば、課題解決
に役⽴立立ちそうですか？
５つほど挙げてみましょう](https://image.slidesharecdn.com/web-140120024319-phpapp02/75/Web-39-2048.jpg)
![RubyのことはRubyに聞こう
• gem install pry
• pry
やってみよう
a = []
a.methods
開発中にも
わからないもの
を試して進める](https://image.slidesharecdn.com/web-140120024319-phpapp02/75/Web-86-2048.jpg)
Uploaded byschoowebcampus
ブラウザだけで学ぶWebアプリ開発
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/380/room ーーーーーーーーーーーーーーーーーーーーーーー
More Related Content
![【会社紹介資料】 株式会社カンゲンエージェント [ 11 月 30 日作成資料公開 ].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/11-251211095054-61b5c9e6-thumbnail.jpg?width=640&height=640&fit=bounds)
ブラウザだけで学ぶWebアプリ開発
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. この授業の特徴 • まずは全体の流流れを体感しましょう – 全体像を把握すれば勉強しやすくなる！ • 難しいことは後回しにしましょう – プログラム⾔言語、フレームワーク、サーバー
- 8. 準備してありますか？ • Google Chrome: ブラウザ • メールアドレス – パソコンで受信チェックできるもの • iPhoneで⾒見見られるだけはこの授業では使えません • 例例： Gmail など
- 9.
- 10. 進め⽅方 • ⼀一緒に作業を⾏行行います • スライド左上に「作業」は、実施する内 容が書かれています。 • スライド左上に「結果」は、実施した内 容で同⼀一の結果になれば作業完了了です。
- 11.
- 12. 今回利利⽤用するサービスの全体像 Nitrous • 開発環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • テストサーバ • ローカルリポジトリ heroku • 本番環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • 本番サーバ • リモートリポジトリ
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 結果 “bookshelf is running”になればOK!!
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. 作業 コンソールを使ってみよう RubyとRailsのバージョンを確認 ハイフン1コ ruby -v スペース rails -v
- 28.
- 29.
- 30.
- 31. 作成されたディレクトリに移動 作業 cd bookshelf ls 結果 cd bまで打ったら TABを押してみよう！
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. 要件定義２ • 情報を登録する – 本を登録する • 情報を表⽰示する – 本の⼀一覧を⾒見見る • 情報を変更更する – 本の情報を変更更する（修正 等） • 情報を削除する – 本の情報を削除する
- 42.
- 43.
- 44. 何を作るか決める 蔵書アプリを作る book • 本の属性情報を保存する • 本のタイトル(⽂文字)と 本の価格(数字)を管理理対象とします title: string price : integer
- 45. 機能を⽣生成するコマンドを実⾏行行 作業 rails g scaffold book title:string price:integer rails : コマンドのベース部分 g : generateの略略 scaffold : “⾜足場”という意味 book : 保存する対象 以降降、保存したい情報を列列挙する ワーク： ⽣生成されたファイルの中⾝身をみてみましょう
- 46.
- 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.
- 51.
- 52. ⽇日本語化してみよう 作業 • ページの⽇日本語化 – bookshelf> app > views > books > index.html.erb １⾏行行⽬目のListring …を 書籍⼀一覧へ変更更 Saveを忘れずに
- 53.
- 54. ここまでのまとめ • ⾒見見た⽬目を変更更する場合は bookshelf >app > views > books 以下のファイル群に作業を⾏行行う 間違えても作り直せば良良いので、どんどん変更更してみよう！ ※最初に戻す⽅方法は巻末参照
- 55.
- 56. 作業 https://heroku.com/ Sign up forfreeをクリック
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. routes.rbを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > config> routes.rbをクリック
- 63.
- 64. Gemfileを表⽰示 作業 結果 右側に内容が表⽰示される bookshelf > configクリックして畳む Gemfileをクリック
- 65.
- 66.
- 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 pushheroku 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へ反映
- 79.
- 80.
- 81.
- 82.
- 83. Webアプリ開発のワークフロー • 開発の周期は１〜～２週間を⽬目安とする • テストを先に書き、実装を進める⼿手法 • 細かい単位でのデプロイを繰り返す 仕様決め 実装 チケット管理理 分散型 バージョン管 理理 かんばん⽅方式 Scrum Git XP • デザインなども含めUXを考える • 利利⽤用者も巻き込む • 継続的な活動 テスト リリース CI ステージング プロダクショ ン Jenkins TravisCI クラウド環境 デプロイ
- 84.
- 85. 今回利利⽤用するサービスの全体像 Nitrous • 開発環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • テストサーバ • ローカルリポジトリ heroku • 本番環境 • クラウドから提供される専⽤用のサーバ • ⾔言語、フレームワークがセットアップ済み • 本番サーバ • リモートリポジトリ
- 86. RubyのことはRubyに聞こう • gem installpry • pry やってみよう a = [] a.methods 開発中にも わからないもの を試して進める
- 87.
- 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
- 92.
- 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の⽅方のドキュメント⼿手順で進めて問 題ない
- 100.
- 101.