![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日金曜日](https://image.slidesharecdn.com/sinatraheroku-120828171601-phpapp01/85/Sinatra-heroku-9-320.jpg)
厂颈苍补迟谤补アプリを丑别谤辞办耻にアップ
- 2. 今回の狙い ? twitter Bootstrap を利用して 見栄えを改善する ? 作成したアプリをHerokuに アップして公開する http://www.?ickr.com/photos/alanant/4483533096/ 12年8月31日金曜日
- 3. Twitter Bootstrapとは？ Twitter社が開発／提供するCSSフレームワーク。これを利用すると 簡単にTwitterっぽいデザインのWebサイトが作成できる 12年8月31日金曜日
- 4. Twitter Bootstrap導入までの流れ ? サイトからファイルをダウン ロードして解凍する ? publicフォルダを作成しその配 http://twitter.github.com/bootstrap/ 下にダウンロードしたファイル を解凍する ? index.erbのheadに記述 <link href="bootstrap.min.css" rel="stylesheet"> 12年8月31日金曜日
- 5. 1.Firefoxを使ってBootstrapのダウンロード サイトに行きます http://twitter.github.com/bootstrap/） 12年8月31日金曜日
- 6. 2.ZIPファイルを開きbootstrap.min.cssを表 示します ①bootstrapフォルダ ダブルクリック ②cssフォルダをダブ ルクリック ③bootstrap.min.c ssが表示されているの を確認 12年8月31日金曜日
- 7. 3.产辞辞迟蝉迟谤补辫.尘颈苍.肠蝉蝉だけを抽出します ③Create Folderをク リックして、Publicフォ ルダを作成します ①bootstrap.m ② 前回作った in.css上で右ク フォルダを開き リックして ます。 Open With を 選択 ④Publicフォルダをダブルク リックして開いてから Extract ボタンをクリックします 12年8月31日金曜日
- 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. 6.ターミナル上でSinatraを起動して表示確認 します localhost:4567/template にアクセスします 12年8月31日金曜日
- 12. サーバーの构造 { プログラム ミドルウェア OS HW 12年8月31日金曜日
- 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. 今回利用する贬别谤辞办耻というクラウドサービス Ruby Java PHP* ミドルウェア OS HW * PHPは公式には利用できないのですが、やり方によっては利用可能なようです。（http:// d.hatena.ne.jp/ishikawam/20120413/p1） 12年8月31日金曜日
- 15. アプリ作成～贬别谤辞办耻にアップまでの全体像 ① https://api.heroku.com/signup でHerokuアカウントを作成 自分のマシン ssh Virtual Box上のLinux環境 ② Linux環境上でSinatraのアプリ作成 ③ Sinatraアプリアップ作業用ファイル作成 ④ 作成したアプリをHerokuに転送 12年8月31日金曜日
- 16. 事前準備：Herokuログイン出来るか確認 ? heroku login で作成したアカウントで ログイン出来るかターミナル上で以下 コマンド入力します ? heroku login ? Enter your Heroku credentials.と表 示された後にメールアドレスの入力を 促されるので、Herokuに登録したメー ルアドレスを入力します ? その後パスワード入力を促されるので Herokuに登録したパスワードを入力し ます 12年8月31日金曜日
- 17. ①Sinatraアプリアップ作業用ファイル作成 ? これまで作ってきたフォルダ配下にGem?leと source :rubyforge いう名前のファイルを作成して、右記内容を記 gem 'sinatra' 述 gem 'json' Gemfile ? ターミナル上で bundle install と入力。 ? Heroku上でSinatraを起動させるために必要な Proc?leに右記内容を記述します ? Proc?leについては以下を参照しました http://www.ownway.info/Ruby/ index.php?heroku%2Fhelloclockwork web: bundle exec ruby app.rb -p $PORT Procfile 12年8月31日金曜日
- 18. ②Gitというツール利用準備 ? これまで作ったファイル/フォ ルダをGitが管理できるように 以下コマンド入力します git init とやった だけでは空っぽ ? git init ? git initi入力後これまで作成し git add . たファイル/フォルダをGitに登 録するために以下入力します ? git add . ? git commit -m init 12年8月31日金曜日
- 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=1 12年8月31日金曜日
- 20. 参考情報：Git のcommitについて ? http://blog.asial.co.jp/894 より引用 ? ドラクエでいうと、中ボス前にセー ブした内容とボス前にセーブした データが残っていて、それぞれに 「中ボス前?薬草の数注意」「ボス 前?選択肢はいいえを押すこと」と いった、コミットに対するメッセー ジが残せるかんじです。 ? こうすることで、ボスを倒したあと で、「いややっぱり中ボスからやり 直したい」と思ったら、コミット メッセージを参考に中ボス前のデー タまで戻ればいいのです 12年8月31日金曜日
- 21. 参考情報：Git のpushについて ? http://blog.asial.co.jp/894 より引用 ? プッシュすることで、これまでのコ ミット内容を共有リポジトリに送る ことができます。 ? 今回の作業では「共有」とある部分が Herokuのサーバと読み替えてください 12年8月31日金曜日