Successfully reported this slideshow.
SinatraアプリをHerokuにアップ12年8月31日金曜日
今回の狙い  ✤   twitter Bootstrap を利用して      見栄えを改善する  ✤   作成したアプリをHerokuに      アップして公開する                                http:/...
Twitter Bootstrapとは?          Twitter社が開発/提供するCSSフレームワーク。これを利用すると          簡単にTwitterっぽいデザインのWebサイトが作成できる12年8月31日金曜日
Twitter Bootstrap導入までの流れ  ✤   サイトからファイルをダウン      ロードして解凍する  ✤   publicフォルダを作成しその配                    http://twitter.github...
1.Firefoxを使ってBootstrapのダウンロード  サイトに行きます   http://twitter.github.com/bootstrap/)12年8月31日金曜日
2.ZIPファイルを開きbootstrap.min.cssを表  示します   ①bootstrapフォルダ   ダブルクリック                    ②cssフォルダをダブ                    ルクリック  ...
3.bootstrap.min.cssだけを抽出します                             ③Create Folderをク                             リックして、Publicフォ       ...
4.抽出後のフォルダ構成は以下のようになり  ます12年8月31日金曜日
5.前回作ったindex.erbにBootstrap読み込む  記述を追加します    <html>      <head>        <title>erb sample</title>        <link href="bootstr...
6.ターミナル上でSinatraを起動して表示確認  します        localhost:4567/template にアクセスします12年8月31日金曜日
サーバーの階層構造について理解する12年8月31日金曜日
サーバーの構造              {                  プログラム                  ミドルウェア                    OS                    HW12年8月31日金曜日
代表的な組み合わせ                                                            VB.        プログラム         Java        Ruby         PHP...
今回利用するHerokuというクラウドサービス                             Ruby    Java   PHP*                                    ミドルウェア         ...
アプリ作成∼Herokuにアップまでの全体像         ① https://api.heroku.com/signup でHerokuアカウントを作成         自分のマシン                             ...
事前準備:Herokuログイン出来るか確認  ✤   heroku login で作成したアカウントで      ログイン出来るかターミナル上で以下      コマンド入力します      ✤   heroku login  ✤   Enter...
①Sinatraアプリアップ作業用ファイル作成  ✤   これまで作ってきたフォルダ配下にGemfileと                 source :rubyforge      いう名前のファイルを作成して、右記内容を記         ...
②Gitというツール利用準備  ✤   これまで作ったファイル/フォ      ルダをGitが管理できるように      以下コマンド入力します                               git init とやった      ...
③Gitを通じて手元の環境とHerokuの環境が  連携できるようにする  ✤   まずはHerokuにログインするためにターミナル上で      以下入力します      ✤   heroku login  ✤   ログイン出来たら以下手順で...
参考情報:Git のcommitについて  ✤   http://blog.asial.co.jp/894 より引用      ✤   ドラクエでいうと、中ボス前にセー          ブした内容とボス前にセーブした          データ...
参考情報:Git のpushについて  ✤   http://blog.asial.co.jp/894 より引用      ✤   プッシュすることで、これまでのコ          ミット内容を共有リポジトリに送る          ことがで...
Upcoming SlideShare
Loading in …5
×

Sinatraアプリをherokuにアップ

1,614 views

Published on

  • Be the first to comment

Sinatraアプリをherokuにアップ

  1. 1. SinatraアプリをHerokuにアップ12年8月31日金曜日
  2. 2. 今回の狙い ✤ twitter Bootstrap を利用して 見栄えを改善する ✤ 作成したアプリをHerokuに アップして公開する http://www.flickr.com/photos/alanant/4483533096/12年8月31日金曜日
  3. 3. Twitter Bootstrapとは? Twitter社が開発/提供するCSSフレームワーク。これを利用すると 簡単にTwitterっぽいデザインのWebサイトが作成できる12年8月31日金曜日
  4. 4. Twitter Bootstrap導入までの流れ ✤ サイトからファイルをダウン ロードして解凍する ✤ publicフォルダを作成しその配 http://twitter.github.com/bootstrap/ 下にダウンロードしたファイル を解凍する ✤ index.erbのheadに記述 <link href="bootstrap.min.css" rel="stylesheet">12年8月31日金曜日
  5. 5. 1.Firefoxを使ってBootstrapのダウンロード サイトに行きます http://twitter.github.com/bootstrap/)12年8月31日金曜日
  6. 6. 2.ZIPファイルを開きbootstrap.min.cssを表 示します ①bootstrapフォルダ ダブルクリック ②cssフォルダをダブ ルクリック ③bootstrap.min.c ssが表示されているの を確認12年8月31日金曜日
  7. 7. 3.bootstrap.min.cssだけを抽出します ③Create Folderをク リックして、Publicフォ ルダを作成します ①bootstrap.m ② 前回作った in.css上で右ク フォルダを開き リックして ます。 Open With を 選択 ④Publicフォルダをダブルク リックして開いてから Extract ボタンをクリックします12年8月31日金曜日
  8. 8. 4.抽出後のフォルダ構成は以下のようになり ます12年8月31日金曜日
  9. 9. 5.前回作ったindex.erbにBootstrap読み込む 記述を追加します <html>   <head>     <title>erb sample</title> <link href="bootstrap.min.css" rel="stylesheet"> この1行を追加   </head> <body>   <h1>ERB sample</h1>   <ul>     <%        url =https://api.twitter.com/1/statuses/public_timeline.json?count=3        json = open(url).read        JSON.parse(json).each do |items|     %>     <li>       <%= items["text"] %>     </li>     <% end %>   </ul> </body> </html>12年8月31日金曜日
  10. 10. 6.ターミナル上でSinatraを起動して表示確認 します localhost:4567/template にアクセスします12年8月31日金曜日
  11. 11. サーバーの階層構造について理解する12年8月31日金曜日
  12. 12. サーバーの構造 { プログラム ミドルウェア OS HW12年8月31日金曜日
  13. 13. 代表的な組み合わせ VB. プログラム Java Ruby PHP C# NET Passenger mod_php IIS+ WebSphere、 ミドルウェア .NET Frame Tomcatなど work Apache OS Linux、FreeBSD、Unix(Solaris) Windows HW DELL、hp、IBM、NEC、富士通など12年8月31日金曜日
  14. 14. 今回利用するHerokuというクラウドサービス Ruby Java PHP* ミドルウェア OS HW * PHPは公式には利用できないのですが、やり方によっては利用可能なようです。(http:// d.hatena.ne.jp/ishikawam/20120413/p1)12年8月31日金曜日
  15. 15. アプリ作成∼Herokuにアップまでの全体像 ① https://api.heroku.com/signup でHerokuアカウントを作成 自分のマシン ssh Virtual Box上のLinux環境 ② Linux環境上でSinatraのアプリ作成 ③ Sinatraアプリアップ作業用ファイル作成 ④ 作成したアプリをHerokuに転送12年8月31日金曜日
  16. 16. 事前準備:Herokuログイン出来るか確認 ✤ heroku login で作成したアカウントで ログイン出来るかターミナル上で以下 コマンド入力します ✤ heroku login ✤ Enter your Heroku credentials.と表 示された後にメールアドレスの入力を 促されるので、Herokuに登録したメー ルアドレスを入力します ✤ その後パスワード入力を促されるので Herokuに登録したパスワードを入力し ます12年8月31日金曜日
  17. 17. ①Sinatraアプリアップ作業用ファイル作成 ✤ これまで作ってきたフォルダ配下にGemfileと source :rubyforge いう名前のファイルを作成して、右記内容を記 gem sinatra 述 gem json Gemfile ✤ ターミナル上で bundle install と入力。 ✤ Heroku上でSinatraを起動させるために必要な Procfileに右記内容を記述します ✤ Procfileについては以下を参照しました http://www.ownway.info/Ruby/ index.php?heroku%2Fhelloclockwork web: bundle exec ruby app.rb -p $PORT Procfile12年8月31日金曜日
  18. 18. ②Gitというツール利用準備 ✤ これまで作ったファイル/フォ ルダをGitが管理できるように 以下コマンド入力します git init とやった だけでは空っぽ ✤ git init ✤ git initi入力後これまで作成し git add . たファイル/フォルダをGitに登 録するために以下入力します ✤ git add . ✤ git commit -m init12年8月31日金曜日
  19. 19. ③Gitを通じて手元の環境とHerokuの環境が 連携できるようにする ✤ まずはHerokuにログインするためにターミナル上で 以下入力します ✤ heroku login ✤ ログイン出来たら以下手順でアプリケーション名を 登録します ✤ heroku create --stack cedar neri0829-01 ssh ※ この後、git remote と入力して、herokuと git push heroku masterで 表示されれば成功です Herokuにファイルが転送 ✤ 最後にSinatraアプリを以下コマンド入力して (push)される Herokuに転送します ✤ git push heroku master ✤ 転送終了したら以下コマンド実行してアプリケー ション起動します ✤ heroku ps:scale web=112年8月31日金曜日
  20. 20. 参考情報:Git のcommitについて ✤ http://blog.asial.co.jp/894 より引用 ✤ ドラクエでいうと、中ボス前にセー ブした内容とボス前にセーブした データが残っていて、それぞれに 「中ボス前 薬草の数注意」「ボス 前 選択肢はいいえを押すこと」と いった、コミットに対するメッセー ジが残せるかんじです。 ✤ こうすることで、ボスを倒したあと で、「いややっぱり中ボスからやり 直したい」と思ったら、コミット メッセージを参考に中ボス前のデー タまで戻ればいいのです12年8月31日金曜日
  21. 21. 参考情報:Git のpushについて ✤ http://blog.asial.co.jp/894 より引用 ✤ プッシュすることで、これまでのコ ミット内容を共有リポジトリに送る ことができます。 ✤ 今回の作業では「共有」とある部分が Herokuのサーバと読み替えてください12年8月31日金曜日

×