読者です 読者をやめる 読者になる 読者になる

Kuroyagi飼育日誌

学んだことの備忘録

webサービス開発(統合版)

webサービス開発はやったことがありません.




webサイトすら作ったことがありません.


そんなレベルの私が0からwebサービスを作っていく過程を失敗なども含めて全部記しておきます.ちなみに数回にわたって記事を分けることも考えましたが,一連の流れが見やすいように全てつなげた記事としました.途中で投稿して,追記があればこの記事にどんどん追加していきます.


ある程度済んだら最後のあたりに簡潔にまとめた手順書のようなものを作る予定です.それまでは読めば苦労を追体験できるような感じの文章になっておりますのであしからず!


途中途中で経過時間を入れておきます.これは自分の勉強に要した累計時間の確認のためです.勉強の効率を高めたいので,そのためには成果と要した時間の記録が不可欠だからです.




さて,何から始めるか?webサービスを作るためにまったく情報を持っていないためgoogleで"webサービス 基本"や"webサービス 入門"と調べてみましたが,なかなか本当の初心者に分かる記事はありません.


見た記事の分類としては以下のような印象です


・全体像が抽象的に分かって,実際何するの?という記事

・書いてあることをやればいいんだろうけど,未経験者にはそもそも書いてあることを実行できない記事

webサービスは作ったことが無いけれど,関連する知識はある程度持っている人が書いた記事


だいたいこんな感じで,なかなか何をすればいいか分かりません.


先ずは習うより慣れろということで,その中で【記事1】は端的にやることが書いてあり,実際に試すことが出来そうだったので試してみました.


【記事1】
type.jp

■■■ Rubyのインストール ■■■


先ずは【記事2】を参考にして,windowsでのrubyインストールから行います.


【記事2】
qiita.com


私が見たときrubyのバージョンは以下の画像の2.3.3 X64です.


【画像1】

f:id:cocosuzu:20170131195130p:plain




ダウンロードが終わったらインストールします.


続いてDevelopment Kitをインストールします.上のDevelopement Kitの2.0 and above(x64 - 64bits only)を選びました.


手順どおりにすすめてインストール終了.


続いて,【記事1】にあるsinatraのインストールを行います.と,ここで問題発生.インストールの終わりにrbenvのrehashを行うのですが,rbenvってコマンドは無いよ!といわれます.こういうのが初心者にとっては辛い問題となりますね…


とりあえずrbenvのインストールを【記事3】に従って行います.


【記事3】
qiita.com


gitが必要とのことで早速gitをインストールします.インストール自体はよく分かりませんが,とりあえず適当にポチポチすすめてみます.


インストール終了.しかしgitの使い方が分からない.ということで,【記事4】を参考にします.


【記事4】
qiita.com


解説を見ても途中からついていけません…手法のみ書いてあって各手法の意味と全体像でいうどこを担うのかという情報が無いので初心者には何がなんだか(笑)


そもそもバッチファイルが用意してあるということは…これを使うのか?どう使うのか分かりません!


ということで,後々gitあたりは使うことが多そうなので学んでおきます.


【記事5】
tracpath.com


【記事5】が分かりやすかったので読んでみました.ふむふむ,概念は分かりました!続いては実際にどう使うかです.


今困っているのはrbenvをインストールする手順にあるバッチファイルの実行が何を指すか分からないことです.何で実行すればいいのか?


目的に立ち戻りましょう.やりたいことはrbenvを使えるようにすること.gitを使えるようにすることが目的ではないので,もうちょっと分かりやすく書いてある記事を探します.いやその前にこの方法を試しておこう…むむむ,思いつきでバッチファイルを作ってコマンドプロンプトから実行したらインストール出来ました.


ここでバッチファイルについて.基本的過ぎることなのかもしれませんがwiki先生いわく以下の通りらしいです.


バッチファイル(Batch File)とは、MS-DOSOS/2Windowsでのコマンドプロンプト(シェル)に行わせたい命令列をテキストファイルに記述したもの。


素人にはこういうのもよく分からないのです(笑)


バッチファイルはテキストファイルを作って【記事3】にあったリンク先のソースコードを書き込んで保存.その後ファイルの拡張子を.txtから.batにしてコマンドプロンプトから実行したらrbenvがインストールできたようです.上記記事の続きでrbenv helpとやってみると,きちんとヘルプが出ます.


それではrubyの他バージョンをインストールしていきましょう.ひとまず【記事3】のバージョンをインストールするために


rbenv install 2.2.4


コマンドプロンプトに入力してみます.


【画像2】
f:id:cocosuzu:20170201222231p:plain




こんな感じでインストールできたようです.




この後rbenv global 2.2.4と入力するとrbenv rehashが通るようになります.


必要なバージョンは追々インストールしていきたいと思います.


ちなみに,このインストールの部分は【記事1】の以下の部分を達成するための作業です.こんなシンプルに書かれても…




f:id:cocosuzu:20170201222750p:plain




f:id:cocosuzu:20170201222720p:plain




rbenvに至ってはいきなりrbenv rehashってそもそもrbenvどこから出てきたのさという…と愚痴はこのへんにして,ようやく環境が整ったので【記事1】に戻ります.


■■■ Rubyのインストール終了 ■■■

ようやく拡張子がrbのファイルを作れると思ったのですが,その前にsinatraをgemから落とそうとしても落とせません.ざ、挫折しそう….色々とやる前はsinatraまでは順調にいけてたと思うんだけどなぁ.


【画像3】
f:id:cocosuzu:20170201224704p:plain




しかし,幸運なことにこの不具合への対策記事を発見しました.


【記事6】
qiita.com


これで上手くいくかと思いましたが,いかない!!そもそもgemのアップデートの段階でSSLが~と同様に怒られます.ここでの問題はgemが最新版でないことが問題であると考え,最新版のgemをインストールすることにします.


【累計5時間 / 更新2017.02.01】


さて,日を変えて続きをやっていきましょう.


ここまで色々とごちゃごちゃ弄ってきているので,rubyとその周辺がごちゃごちゃしています.余計な問題が発生しないように,全て削除した上でここまでの正しい手順だけをやってみようと思います.


コントロールパネルのプログラムの追加と削除からruby本体とgitをアンインストールしました.残っているファイルも探して消します.


Cドライブ直下にあったdevkit,ruby22-x64,ruby23-x64をとりあえず消しておきます.


1. ruby installerでruby本体をインストール

2. devkitをインストール

3. gemでsinatraをインストール

4. rbenvでrehashする


ここまではOK

続いて本来やろうとしていたことが書いてある【記事1】の続きをやります.書いてある通りにmyapp.rbを作って,myappのあるフォルダにcdして実行!!


f:id:cocosuzu:20170207223956p:plain




なにやらサービスが立ち上がっていそう…


そしてhttp://localhost:4567/をブラウザで表示すると!!


【画像4】

f:id:cocosuzu:20170202204401p:plain



なんと!!サーバーが立ち上がっており,hello worldと表示されました!!




ようやく,当初の目的を果たせました!!これはhello worldと画面に表示サービス!!と言い張れば立派なwebサービスです(笑)記事はこの後ももう少し続いているので,勢いのあるうちにちゃっちゃとやってしまいましょう.


次はHTMLとCSSをあわせて使う方法です.


先ほどのmyapp.rbの中身を記事の通りに書き直して,myapp.rbのあるディレクトリにviewsという名前のフォルダをつくり,その中にindex.erbをテキストで作ってソースを書き込んで出来上がり!


コマンドプロンプトで最初と同様にmyapp.rbのディレクトリからmyapp.rbを実行すると…


【画像5】

f:id:cocosuzu:20170202212704p:plain




かなり見た目が変わりましたね!これにて記事の内容の全てが終わりました.


ここまでwebサービスを作るという目標に対しては凄く基本的なことしかやっていません.しかし,これすらも出来ないのならその先にある目標など実現できないので,先ずは一歩進めただけでもよしとします.


次の目標を探しましょう.といきなり海に漕ぎ出すと痛い目を見るので,順当に先述の記事の続編に取り組んでみます.ここまではとにかく素人がなんちゃってwebサービス作りを体験するということが主題でした.これは本来細々したことを全てやらなければいけないところをFrameworkであるsinatraに何とかしてもらっている状態です.


この後もしばらくsinatraに頑張ってもらいつつ,もう少し複雑なwebサービスを実現するスキルを身に付けていこうという訳です.


【記事7】
type.jp


そこで使うのがwebAPIです!


と,次の目標が決まったところで,ひとまず記事を更新しておきます.




【累計8時間 / 更新2017.02.02】




さて,また日が変わりましたが【記事7】についてやっていきましょう.


ふむふむtwitterの関連のサービスを作るということで,twitter関連の設定が必要となります.


CONSUMER_KEY

CONSUMER_SECRET


以上の二つを先ずは手に入れる必要があるようです.取り方の詳細は書いてなかったため,詳細は以下の別記事を参考にします.


【記事8】
hello-apis.blogspot.jp



twitterのサイトに入ったら左のカラムのmy appsをクリック


アカウントでsign inする


Create New Appをクリック


【記事8】のcallback URLは【記事7】とは異なるかもしれないため,ここだけは【記事7】の記事の通りにしようと思います.しかし,【記事7】では一例があり,”~など適切に設定します”と書いてありますが,適切って何?ということで,以下の記事も参考にして適切とは何かを調べます.


【記事9】
syncer.jp


【記事10】
rhysd.hatenablog.com


ローカルホストを使う場合ということで【記事10】を参考にします.ところが!create applicationするとtwitterのアカウントが電話番号登録してないからしてね!と警告が出てきます.


仕方ないのでtwitterのアカウント設定から電話番号登録を行い,電話番号にSMSで送られてくる認証コードを使って認証しようとしましたがここで認証できませんでした…


何が問題なんだと,調べたところ以下の記事を発見.


【記事11】
qiita.com





なるほど!携帯番号だと先頭の0を削るといけるのですね.試したところいけました!全く次から次へと…とぼやいている暇なんてありません.


元に戻ってcreate applicationすると何か出来ました.


ここではCONSUMER Keyを確認しておきます.CONSUMER Secretがどこにあるかわかりません.以下create application後の画面です.


【画像6】
f:id:cocosuzu:20170204111735p:plain

他の人の画像だとConsumer Keyの直ぐ下にあるのですが,どうなってるんですかね….と,ちょうどいい記事がありました.


【記事12】
github.com




こういうのも初心者にとっては意外と致命傷になるので,こういう記事は有難いです.


【画像7】
f:id:cocosuzu:20170204113258p:plain


ありました!!よし!!これで【記事7】の続きが出来ます.


myapp.rbのソースコードを書いて.gemでoauthをインストールして上で,myapp.rbをrubyで実行!!


やった!!動かないです!!笑


こういうときは落ち着いてエラーをちゃんと読みましょう.


: cannot load such file -- twitter (LoadError)
from C:/Ruby23-x64/lib/ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55
:in `require'
from myapp.rb:5:in `<main>'



ほうほう,myapp.rbの冒頭にあるrequire 'twitter'に問題があるようです.requireでそのほかにも要求しているものはOKのようです.oauthはgemでインストールしておいたから大丈夫だったのですかね?ということで,gemでtwitterをインストールします.コマンドプロンプトでgem install twitterと入力すると,18gemsインストールされました.


仕切りなおして,myapp.rbを実行します.


やった!!動かないです!!笑


今度のエラーは以下の通りです.



myapp.rb:14:in `<main>': undefined method `configure' for Twitter:Module (NoMeth
odError)



ソースコード14行目のTwitterのconfigureメソッドなんてもの定義されてないよ!ってことですかね?


とりあえず,"twitter gem configure メソッド"とgoogleで調べたらこんな記事が出てきました.


【記事13】
www.mk-mode.com


【記事13】の対処法を試して見ます.もともとあったソースコードコメントアウトしておこっとと思いましたが,rubyコメントアウトのしきたりは#で1行コメントアウトしか知らなかったので,調べてみたところ【記事14】のようにその他便利な表現があるようです.


【記事14】
qiita.com


表現を直して,myapp.rbを実行!!


やった!!動きました.


ウェブブラウザでlocalhostをブラウズすると,


【画像8】
f:id:cocosuzu:20170204122238p:plain




こんな質素なページが表示されます.twitter access start!!を押すと以下のページが表示されました.


【画像9】
f:id:cocosuzu:20170204122359p:plain




連携アプリを承認すればいいらしいのでぽちっとな.


【画像10】
f:id:cocosuzu:20170204122642p:plain




あからさまにダメそうなページが出てきました.ぱっと見てcallbackが上手く動いていないようです.myapp.rbのソースコードで/twitter/callbackを検索すると,callback_urlとしてhttp://localhost:4567/twitter/callbackが代入されるようになっています.

これは【記事7】のソースコードをそのまま使っているので,twitterのcreate applicationしたときのcallback URLと違います.ここが原因かもしれないので,create applicationしたときのcallback URLをソースコードに書き込んでみます.

そして実行してみると,特にエラーは出ません.そして以下のように元のページに戻ってきます.


【画像11】
f:id:cocosuzu:20170204122238p:plain




何にも変わらない…これでいいのでしょうか?アウトプットがどうなるか詳しく書いてなかったので,どうなると成功なのかいまいち分かりません.


試しにcallback URLを【記事7】と同じようにしてましょう。twitterでのcreate application時にはcallback URLをhttp://127.0.0.1:4567/twitter/authとしてソースコードはそのままにして実行してみます.


結果はエラーでした.ということで,最終形がどうなればいいのか分かりませんが,エラーが出ていないところを見ると上手くはいっているのかな?


少しずつ慣れてきたところで,他の記事で最終的なアウトプットが分かりやすい例を探してみたいと思います.


【累計10時間/ 更新2017.02.04】




とは言うものの【記事1】,【記事7】とお世話になってきた連載ですが,第3回までということでせっかくなので最後までやってみます.ということでお次は【記事15】です.


【記事15】
type.jp


さて,日を改めて続きをやっていきましょう.


今回は今まで自分のPCの中で完結していたサービスを外部のサーバーで動作させましょうといったところでしょうか.


そのために使うのがHerokuです.PaaSクラウドサーバーの一つらしいですが,PaaSとクラウドというワードが通常のサーバーとどういった差別化になっているのか実感が無いので,簡単に調べてみます.


素直に"PaaSクラウドサーバー"だけで検索してみたところ概要を説明して下さっている【記事16】を見つけました.


【記事16】
gihyo.jp


クラウドコンピューティングは大きく分けるとIaaS,PaaS,SaaSと三つに分けられるようです.連載初回でその点の概要について触れられているようなので【記事17】も見てみましょう.と記事は2011年….私のIT知識はそれ以前で止まっている….というかちゃんと調べたことないから当然ですね.波に乗れていないというか,海にすら行っていない状態です(笑)気を取り直して【記事17】から見ていきましょう


【記事17】
gihyo.jp


SはService,PはPlatform,IはInfrastructureで残りのaaSはas a Serviceです.ふむふむ,とこまでクラウド利用者に自由度があるか?といったところでしょうか.今回はさらっとPaaSがアプリケーションを動作させるプラットフォームがクラウド上にあるという理解までで進めていきたいと思います.


先ずはherokuのアカウント作りをします.




www.heroku.com




選択肢で開発言語は?という質問があったのですが,ひとまずRubyと選んでおきました.


【記事15】では登録完了画面でheroku toolbeltが表示されると書いてあったのですが,どれを指すのか分かりません.同記事中のHeroku toolbeltをクリックするとHeroku CLIのインストール方法のページにいけます.しかしログインしたところからどのように行けばいいのか分からなかったので探してみたところ以下のように辿り着けました.


右上のアカウント横のメニューからDocumentationに移動


【画像12】
f:id:cocosuzu:20170205205931p:plain


続いてReferenceタブに移動


【画像13】
f:id:cocosuzu:20170205210019p:plain


その中のCommand LineにあるHeroku CLIの項目に移動


【画像14】
f:id:cocosuzu:20170205210134p:plain


これで【記事15】のページに行けました.ただ,toolbeltをインストールしますよって言っているのに,CLIの項目?と思いましたが,読んでみるとCLIはtoolbeltですよって書いてありました.ということで,windows用の64bitインストーラーをダウンロードしてインストールします.


バンドルでgitもインストールします.全体的にはポチポチしていけばいいのですが一箇所ひっかかりました.それは以下の【画像15】のconfiguring the line ending conversionsで何を選べばいいのかというところです.


【画像15】
f:id:cocosuzu:20170205213056p:plain


そこで【記事18】を参考にしました.


【記事18】
opcdiary.net


【画像15】の一番上を選ぶ例が多いらしいのですが【記事18】ではgitに改行の取り扱いを担当させるのは弊害の方が多いとのことで,gitには改行を弄らせないas-isを選ぶのがよいと書いてありました.それに倣ってas-isを選びます.


また次の【画像16】ではgitを使用するconsoleを選択します.ここでも迷うのですがMiniTTYはcygwinで使用されているコンソールらしいのですが,cygwin関連は全然触れていないので,windowsデフォルトを選びました.


【画像16】
f:id:cocosuzu:20170205213835p:plain


以上でひとまずherokuのインストールは完了です.


それでは【記事15】に戻ります.作ったrbファイルのディレクトリにcdして以下のコマンドを入力するとherokuのloginが行われるはずです.


$ heroku login



しかし!コマンドとして受け付けられません.インストールをミスっている?とりあえずアンインストールして再度インストールしましたが,コマンドとして受け付けられません.うーむ,どうしたものか…


とりあえず,gemでherokuをインストールすることも出来るみたいなので,ダメもとでやってみます.


コマンドプロンプトでgem install herokuと打つとインストールが始まります.


さて,コマンドは通るかな…heroku --versionと打ってみると



heroku-gem/3.43.16 (x64-mingw32) ruby/2.3.3
heroku-cli/5.6.17-bee0f80 (windows-amd64) go1.7.5
You have no installed plugins.


おっ!はじかれずに実行できました!!


続いてloginを試してみます.



$ heroku login

Enter your Heroku credentials.

Email: ********************
Password (typing will be hidden):
Logged in as ***********************



おおーログインできました.これでherokuは使えるようになったのでしょうか.【記事15】の続きのheroku用connfigファイルを作っていきます.


gitはとりあえずherokuについてきたやつをそのまま使います.因みにバージョンは以下の通りです.


git version 2.8.1.windows.1


順番に

git init



git add . 


ピリオド忘れずに!二つ目のコマンドやったら凄まじい寮のwarningが出てました.CRLFに関する警告です.今は問題があるのかよく分からないので.スルーします.


■■■脇道のお話し■■■




待ち時間が長いので,そもそもsinatraってrubyでいうところのどんな存在で,ruby界隈ではどの位の範囲をカバーできるのか気になったので,以下の記事を読んで勉強してみます.


【記事19】
techacademy.jp


ここでようやく,ruby on railsという言葉の意味を理解しました.今まで聞いたことは幾度とありましたが,実際何なのさ!という状態でした.sinatraに触れてみてframeworkというものがどんなものかということを理解できました.


【記事19】を読んでみて本格的にやっていくならRuby on Rails,さくっと小規模で試すならsinatra,さくっと大規模で試すならPadrinoらしいです.これが終わったらRuby on Railsにチャレンジしてみるのがいいかもしれません.


ただ,rubyフレームワークがこの3つだけかというとそうではなく,【記事20】のように他にも数多くあるようです.


【記事20】
eng-entrance.com



■■■脇道のお話おわり■■■


さて色々と処理が終わったようなので,次のコマンドを実行します.



git commit -a -m "first commit"


そうしたら画像17のようにあんた誰?とgitに怒られました.


【画像17】
f:id:cocosuzu:20170206172432p:plain


調べると【記事21】に解決方法が記されていました.


【記事21】
qiita.com


これをやってもだめでした!おかしかったところまで戻りましょう.git add . のところでの大量に出てきてた改行コードのエラーが問題として解決します.


LFの改行コードをgitがCRLFに変更しようとする警告らしいです.【記事22】を参考に対策してみます.


【記事22】
d.hatena.ne.jp


うーむ,これでも上手くいきませんね.もう一回git add . を実行してエラーを確認します.


途中はworningでLFが…というので埋め尽くされています.最後に



error: unable to index file AppData/Local/Google/Chrome/User Data/Default/Cache/
data_0
fatal: adding files failed


と出てきます.ファイルの追加に失敗しました!!ということですね.調べてみると【記事23】のようなそれっぽい解決策が出てきました.しかし!何を言っているのか分からないです!!どう対処すればいいのか分からない…


【記事23】
error: unable to index file – 初めてのGitエラー | yohgaki's blog


これはgitについて学ばなければなりません….結果につながらない無駄な勉強をしないためにもgitを学ぶ必要があるかを再考します.herokuのconfigurationファイルを作成するためにアプリケーションをgitで管理するといった構造であって,他にも方法があるかもしれませんが,gitを回避するのは骨が折れそうです.


ということでgitを使う方法を選択し,そのためにはgitの基本操作であるgit add .を成功させないとgitの操作は始まりません.したがって,直近の課題は【git add . を正常に動作させる】ことです.gitについて冒頭で後回しにしてましたが,やはり避けては通れないようです.


さて,一度gitをアンインストールして再インストール.その後,git initしてgit add . をしたところ同じ現象になりました.


またアンインストール&インストールして改行コードの変なエラーに対する対策【記事22】を今までgit add . の後にやっていたので,そこまずはやる前に対処しておきます.


ちゃんとconfigに反映されているかチェックします.gitconfigファイルを覗いてみると



[core]
autoCRLF = false
quotepath = false



と書いてありました!これで設定は反映されているはず!


もう一つ,多分こっちが致命傷なのですが



unable to index file



というエラーです.調べましょう!


【記事24】
qiita.com


んー類似のエラー対処法なのか…分かりません.やたらと試すと環境が大変なことになりそうなので,もうちょっとしっくりくる記事を探します.


【記事25】
qiita.com


直接関係しませんが,git statusでgitのカレントディレクトリ内のファイルやらフォルダの状態を確認できるようです.かねてより,git add中に確認される膨大なファイルたちについて,これって通常の確認作業なのか?と気になっていました.特にAnacondaのファイルもチェックしているのに違和感…git statusで確認したところやはり,c:\users\****\ディレクトリ内にあるファイル,フォルダを軒並みチェックしているようです.


他の例では空だったり,ちょこっと1,2ファイルあるくらいだったのでどうにかgitのカレントフォルダを変更して試すとうことにチャレンジしてみたいと思います.ということで,【記事26】を参考にカレントディレクトリを本筋の【記事15】で作ったhelloフォルダをgitのカレントディレクトリに指定してみます.


【記事26】
qiita.com


cd "helloフォルダパス"




git init



dir /b /a




git status



結果は



On branch master

Initial commit

Untracked files:
(use "git add <file>..." to include in what will be committed)

myapp.rb

nothing added to commit but untracked files present (use "git add" to track)



先に作ったmyapp.rbだけとなりました.


お!これはいいかもしれません.試しにgit add.してみると何事も無く終わりました.


さて,ようやくこれで本筋の【記事15】を続けられます.次はcommitをします.



git commit -a -m "first commit"



結果は…



[master (root-commit) *********] first commit
1 file changed, 5 insertions(+)
create mode 100644 myapp.rb



という感じで成功した?っぽいです.続いて,herokuへのdeploy準備です.deployするために以下の3つの設定ファイルが必要なようなので作ります.


1.Procfile

2.Gemfile

3.Gemfile.lock


それぞれを作るのはいいのですが,どこにおくのか?記事を読み進めるとgit statusで作った3つのファイルが表示されています.このことからとりあえずhelloフォルダに作ってaddするという予測で作って進めてみます.


2つは簡単に作れましたが,Gemfile.lockだけ作れません.問題はbundle installがそもそもコマンドとして通らないです.必要なソフトが足りないのでしょう.bundle installが通るように準備します.


【記事27】
qiita.com



これの冒頭を真似してみましょう.


gem install bundler


っと



bundle -v



っと



Bundler version 1.14.3



インストール完了です.それではbundle installを実行!!Gemfile.lockがhelloフォルダに生成されていました!bundlerが必要なのかい…とにかく上手くいったので進めます.


次はようやく作成した3つのファイルをaddします.



On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

new file: Gemfile
new file: Gemfile.lock
new file: Procfile



おおーちゃんと【記事15】の通りになりました!!それではこの状態をcommitして次の作業に進みます.



git commit -a -m "add heroku config files"



っと



[master 16006c7] add heroku config files
3 files changed, 24 insertions(+)
create mode 100644 Gemfile
create mode 100644 Gemfile.lock
create mode 100644 Procfile



となります.あとはherokuにdeployするだけ!


heroku create



で新規アプリの作成



git push heroku master



でherokuにdeploy,公開されます.



heroku open



でデフォルトブラウザで公開したサービスを表示してくれます!!


f:id:cocosuzu:20170207214148p:plain

表示されるのは最初のものと変わりませんが!!大きな違いはは私のパソコンの中で完結しているURLではなくhttps://mysterious-depths-41878.herokuapp.com/というwebに開かれたサービスであるということです.その確たる証拠として,このURLにスマホからアクセスしてみると…


f:id:cocosuzu:20170207215128p:plain


と,ちゃんとアクセス出来るわけです!!感激!!


さてここいらで連載3回分の手順について要点をまとめておきます.


小まとめ

【記事01:http://type.jp/s/itac/article5.html

【記事03:http://qiita.com/nak1114/items/0cbf4797d95422b04569

【記事07:http://type.jp/s/itac/article7.html

【記事08:http://hello-apis.blogspot.jp/2013/03/twitterapi.html

【記事13:http://www.mk-mode.com/octopress/2013/12/02/ruby-gem-twitter-failure/

【記事15:http://type.jp/s/itac/article11.html

【記事18:https://opcdiary.net/?page_id=27065

【記事26:http://qiita.com/opengl-8080/items/451c5967cbbc262f4f0d

【記事27:http://qiita.com/hyshhryk/items/7e728ad57d963454b142


[1]webサービス開発の基本【記事1】

1. ruby installerでruby本体をインストール

2. devkitをインストール

3. gemでsinatraをインストール

4. rbenvを設定【記事3】

> 4.1 txtファイルにソースコードを書き込む

> 4.2 拡張子をbatにする

> 4.3 コマンドプロンプトからbatファイルを実行

5. rbenvでrehashする

6. myapp.rbを作る

7. カレントディレクトリをmyapp.rbのあるフォルダとする

8. ruby myapp.rb

9. webブラウザでhttp://localhost:4567/を表示


[2]WebAPIを利用したサービスの基本【記事7】

1. twitterアカウントを作る

2. twitter developersでConsumer_KEYとConsumer_secretを入手する【記事8】

>登録時の携帯電話番号は頭の0を入力しない

>call back URLはhttp://localhost:4567/でいいと思う…

3. myapp.rbを作る

>twitter configureの表現が【記事7】のサンプルコードと違う可能性あり.【記事13】の通り修正する.

4. gemでtwitterをインストール

5. ruby myapp.rb

6. webブラウザでhttp://localhost:4567/を表示


[3]サービスをwebに公開する基本【記事15】

1. Herokuのアカウントを作る

2. Herokuのwebさいとからtoolbeltをダウンロードしてインストールする

> toolbeltはheroku CLIと呼ばれるようになっている

> バンドルでgitもインストールする【記事18】

3. myapp.rbを作る【記事15】

4. git の処理をする

>カレントディレクトリをmyapp.rbのあるフォルダにする【記事26】

5. herokuへのdeploy用設定

>5.1 ファイル3つを作る

>>Gemfile,Procfileはtxtファイルで作って拡張子削除&myapp.rbフォルダに置く

>>Gemfileはbundle installで生成する(bundleコマンドの為にgemでbundlerをインストールする【記事27】)

>5.2 作ったファイルをgit add . する

6. gitでcommitする

7. heroku create で新規アプリケーションをheroku上に作成

8. git heroku push masterでサービスをheroku上にdeploy

9. heroku openでデフォルトブラウザからサービスを確認


【累計18時間/ 更新2017.02.06】


このあたりで,どんなwebサービスを作りたいのかを考え直します.通販サイトでブログのように簡単に商品登録できるサービスを作りたいです.


ということで先ずは画像をアップロードすると表示されるサービスを作りたいと思います.


とはいうものの,まだHello world!しか表示したことがないわけで…いきなり背伸びしても分からないことだらけになるのは必至.


ここからはこれまで"hello world!"を表示する程度だったところをもう少し発展させます.ざっくり言うと,よりwebサイトっぽい要素を盛り込みます.


基本的には以下の記事にチャレンジしてみます.

【記事28】
qiita.com


もうたった5行のサービスを作るのに数時間かかることなんてないです!解説の所要時間の通り,数分でとりあえずのサービス立ち上げは終わりました.


ここで小技を覚えました.一度実行したサービスを停止する方法を知らなかったのですが,調べてみたところctrl+Cで止められそうです.今までいちいちコマンドプロンプトを落としていたので,格段に効率がよくなりました.


次にsinatra-reloaderを使ってsinatraでアプリを稼働中にrbファイルの変更をブラウザの更新ボタンで反映させるように改造です.


sinatra-reloadertってこういうことが出来るようになるgemなんですね.sinatraだけのときはブラウザの更新ボタンだけではダメで,一度アプリを停止して再度アプリを稼動させないとrbファイルの変更は反映されないところから使いやすくなりました.

【累計19時間/ 更新2017.02.10】


次にsinatraのルーティングを追加します.


rbファイルを以下の内容に書き換えて,ブラウザを更新します.



require 'sinatra'
require 'sinatra/reloader'

get '/' do
'how are you?'
end

# ここから
get '/path/to' do
"this is [/path/to]"
end
# ここまでを追加


ほうほう,これでhtmlを読み込める訳ですね.




続いて以下にapp.rbを書き換えます.



require 'sinatra'
require 'sinatra/reloader'

get '/' do
'how are you?'
end

get '/path/to' do
"this is [/path/to]"
end

# ここから
get '/hello/*' do |name|
"hello #{name}. how are you?"
end
# ここまでを追加


これで以下にアクセスするとAliceに対しての応答文となる.




http://localhost:4567/hello/Alice





…あまり記事の内容をそのまま書いていくと記事の丸パクリになってしまい昨今のキュレーションサイト問題みたいになってしまうので,ここからは引っかかったことや記事に掲載されていない内容などを書いていきます.記事ではtouchというコマンドを何回か使用していますが,これはコマンドプロンプトでは存在しません.ということで以下の記事を参考にします.





【記事29】
Reread : Windows のコマンドプロンプトで空ファイルを作成する方法



type null > 任意のファイル名


とするといいみたいです.




むむ!通りません.ということで【記事29】にあるもう一つの方法



copy null > 任意のファイル名


を試してみます.お!こっちは出来ました.ただし,空のファイルではなく,"指定されたファイルが見つかりません。"と書き込まれています.ただ,結局中身を書き換えるので今回はスルーします.




redcarpetを使うところで引っかかりました.




f:id:cocosuzu:20170211101725p:plain




とエラーが出てきてしまい,そんなディレクトリないよ!と言われます.




redcarpetはgemフォルダにあり,コマンドプロンプトでbandleとコマンドした結果でも以下のようにgemとして登録されています.



Using backports 3.6.8
Using multi_json 1.12.1
Using rack 1.6.5
Using redcarpet 3.4.0
Using tilt 2.0.6
Using bundler 1.14.3
Using rack-protection 1.5.3
Using rack-test 0.6.3
Using sinatra 1.4.8
Using sinatra-contrib 1.4.7
Bundle complete! 3 Gemfile dependencies, 10 gems now installed.
Bundled gems are installed into ./vendor/bundle.


まさか!redcarpetのバージョンが変わってmarkdown: ***が使えなくなっているとか!?とも考えましたが,それは色々と確認してから確認することにします.




他にはソースコード

require 'redcarpet'

の記述が無いのが気になります.今まで使うgemはrequireしていたので,とりあえずこの記述を追加してみましたが,結果は変わらず…




ううう…




何が原因なのか調べてみます.




気分転換にひとまず街を散歩して,いきなりステーキで腹ごしらえ&人気調査をしてきます.


【累計経過時間 22時間】


さて,前回の続きをやっていきましょう. 問題解決には現在の状態を知る必要があります.ということで,全体の状態を改めて書いておきます.




まずはディレクトリの構成確認です.コマンドプロンプトディレクトリを表示するコマンドは以下の通りです.



tree


【出力結果】



├─.bundle
├─public
├─vendor
│ └─bundle
│ └─ruby
│ └─2.3.0
│ ├─bin
│ ├─build_info
│ ├─cache
│ ├─doc
│ ├─extensions
│ │ └─x64-mingw32
│ │ └─2.3.0
│ │ └─redcarpet-3.4.0
│ ├─gems
│ │ ├─backports-3.6.8
│ │ │ ├─lib
│ │ │ │ └─backports
│ │ │ │ ├─1.8.7
│ │ │ │ │ ├─argf
│ │ │ │ │ ├─array
│ │ │ │ │ ├─binding
│ │ │ │ │ ├─dir
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─enumerator
│ │ │ │ │ ├─env
│ │ │ │ │ ├─fixnum
│ │ │ │ │ ├─float
│ │ │ │ │ ├─gc
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─integer
│ │ │ │ │ ├─io
│ │ │ │ │ ├─kernel
│ │ │ │ │ ├─method
│ │ │ │ │ ├─module
│ │ │ │ │ ├─numeric
│ │ │ │ │ ├─object_space
│ │ │ │ │ ├─process
│ │ │ │ │ ├─range
│ │ │ │ │ ├─regexp
│ │ │ │ │ ├─stdlib
│ │ │ │ │ ├─string
│ │ │ │ │ ├─struct
│ │ │ │ │ └─symbol
│ │ │ │ ├─1.9.1
│ │ │ │ │ ├─array
│ │ │ │ │ ├─dir
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─enumerator
│ │ │ │ │ ├─env
│ │ │ │ │ ├─file
│ │ │ │ │ ├─float
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─integer
│ │ │ │ │ ├─io
│ │ │ │ │ ├─kernel
│ │ │ │ │ ├─math
│ │ │ │ │ ├─numeric
│ │ │ │ │ ├─proc
│ │ │ │ │ ├─range
│ │ │ │ │ ├─regexp
│ │ │ │ │ ├─stdlib
│ │ │ │ │ ├─string
│ │ │ │ │ └─symbol
│ │ │ │ ├─1.9.2
│ │ │ │ │ ├─array
│ │ │ │ │ ├─complex
│ │ │ │ │ ├─dir
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─float
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─kernel
│ │ │ │ │ └─stdlib
│ │ │ │ │ └─matrix
│ │ │ │ ├─1.9.3
│ │ │ │ │ ├─file
│ │ │ │ │ ├─io
│ │ │ │ │ └─string
│ │ │ │ ├─2.0.0
│ │ │ │ │ ├─array
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─enumerator
│ │ │ │ │ ├─env
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─nil
│ │ │ │ │ ├─range
│ │ │ │ │ ├─stdlib
│ │ │ │ │ └─struct
│ │ │ │ ├─2.1.0
│ │ │ │ │ ├─array
│ │ │ │ │ ├─bignum
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─fixnum
│ │ │ │ │ └─module
│ │ │ │ ├─force
│ │ │ │ ├─rails
│ │ │ │ ├─random
│ │ │ │ └─tools
│ │ │ ├─set_version
│ │ │ ├─spec
│ │ │ │ └─tags
│ │ │ │ ├─1.8.6
│ │ │ │ │ └─core
│ │ │ │ │ ├─argf
│ │ │ │ │ ├─array
│ │ │ │ │ ├─complex
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─enumerator
│ │ │ │ │ ├─env
│ │ │ │ │ ├─file
│ │ │ │ │ ├─fixnum
│ │ │ │ │ ├─gc
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─integer
│ │ │ │ │ ├─io
│ │ │ │ │ ├─kernel
│ │ │ │ │ ├─math
│ │ │ │ │ ├─module
│ │ │ │ │ ├─numeric
│ │ │ │ │ ├─proc
│ │ │ │ │ ├─range
│ │ │ │ │ ├─string
│ │ │ │ │ └─symbol
│ │ │ │ ├─1.8.7
│ │ │ │ │ └─core
│ │ │ │ │ ├─array
│ │ │ │ │ ├─complex
│ │ │ │ │ ├─enumerable
│ │ │ │ │ ├─env
│ │ │ │ │ ├─file
│ │ │ │ │ ├─hash
│ │ │ │ │ ├─integer
│ │ │ │ │ ├─io
│ │ │ │ │ ├─kernel
│ │ │ │ │ ├─math
│ │ │ │ │ ├─module
│ │ │ │ │ ├─proc
│ │ │ │ │ ├─range
│ │ │ │ │ ├─string
│ │ │ │ │ └─symbol
│ │ │ │ ├─1.9.1
│ │ │ │ │ └─core
│ │ │ │ │ ├─array
│ │ │ │ │ ├─env
│ │ │ │ │ ├─hash
│ │ │ │ │ └─io
│ │ │ │ └─1.9.2
│ │ │ │ └─core
│ │ │ │ └─io
│ │ │ └─test
│ │ ├─multi_json-1.12.1
│ │ │ └─lib
│ │ │ └─multi_json
│ │ │ ├─adapters
│ │ │ └─vendor
│ │ ├─rack-1.6.5
│ │ │ ├─bin
│ │ │ ├─contrib
│ │ │ ├─example
│ │ │ ├─lib
│ │ │ │ └─rack
│ │ │ │ ├─auth
│ │ │ │ │ ├─abstract
│ │ │ │ │ └─digest
│ │ │ │ ├─backports
│ │ │ │ │ └─uri
│ │ │ │ ├─handler
│ │ │ │ ├─multipart
│ │ │ │ ├─session
│ │ │ │ │ └─abstract
│ │ │ │ └─utils
│ │ │ └─test
│ │ │ ├─builder
│ │ │ ├─cgi
│ │ │ │ ├─assets
│ │ │ │ │ ├─folder
│ │ │ │ │ ├─fonts
│ │ │ │ │ ├─images
│ │ │ │ │ ├─javascripts
│ │ │ │ │ └─stylesheets
│ │ │ │ └─test+directory
│ │ │ ├─multipart
│ │ │ ├─rackup
│ │ │ ├─registering_handler
│ │ │ │ └─rack
│ │ │ │ └─handler
│ │ │ ├─static
│ │ │ │ └─another
│ │ │ └─unregistered_handler
│ │ │ └─rack
│ │ │ └─handler
│ │ ├─rack-protection-1.5.3
│ │ │ ├─lib
│ │ │ │ └─rack
│ │ │ │ └─protection
│ │ │ └─spec
│ │ ├─rack-test-0.6.3
│ │ │ ├─lib
│ │ │ │ └─rack
│ │ │ │ └─test
│ │ │ └─spec
│ │ │ ├─fixtures
│ │ │ ├─rack
│ │ │ │ └─test
│ │ │ └─support
│ │ │ └─matchers
│ │ ├─redcarpet-3.4.0
│ │ │ ├─bin
│ │ │ ├─ext
│ │ │ │ └─redcarpet
│ │ │ ├─lib
│ │ │ │ └─redcarpet
│ │ │ └─test
│ │ │ └─fixtures
│ │ ├─sinatra-1.4.8
│ │ │ ├─examples
│ │ │ ├─lib
│ │ │ │ └─sinatra
│ │ │ │ └─images
│ │ │ └─test
│ │ │ ├─integration
│ │ │ ├─public
│ │ │ └─views
│ │ │ ├─a
│ │ │ ├─b
│ │ │ └─foo
│ │ ├─sinatra-contrib-1.4.7
│ │ │ ├─lib
│ │ │ │ └─sinatra
│ │ │ │ └─contrib
│ │ │ └─spec
│ │ │ ├─config_file
│ │ │ ├─content_for
│ │ │ ├─namespace
│ │ │ │ └─nested
│ │ │ ├─reloader
│ │ │ └─respond_with
│ │ └─tilt-2.0.6
│ │ ├─bin
│ │ ├─docs
│ │ ├─lib
│ │ │ └─tilt
│ │ ├─man
│ │ └─test
│ │ └─markaby
│ └─specifications
└─views


こんなに沢山出てきても見難いので,整理すると以下のようになっています.



test_app
├─app.rb
├─Gemfile
├─Gemfile.lock
├─.bundle
├─public
├─vendor
│ └─bundle
│ └─ruby
│ └─2.3.0
│ ├─bin
│ ├─build_info
│ ├─cache
│ ├─doc
│ ├─extensions
│ │ └─x64-mingw32
│ │ └─2.3.0
│ │ └─redcarpet-3.4.0
│ ├─gems
│ │ ├─backports-3.6.8
│ │ ├─multi_json-1.12.1
│ │ ├─rack-1.6.5
│ │ ├─rack-protection-1.5.3
│ │ ├─rack-test-0.6.3
│ │ ├─redcarpet-3.4.0
│ │ ├─sinatra-1.4.8
│ │ ├─sinatra-contrib-1.4.7
│ │ └─tilt-2.0.6
│ └─specifications
└─views
  ├─erb_template_page.erb
  └─markdown_template_page.md


app.rb本体は以下の通り



require 'sinatra'
require 'sinatra/reloader'
require 'redcarpet'

get '/' do
'how are you?'
end

get '/path/to' do
"this is [/path/to]"
end

get '/hello/*' do |name|
"hello #{name}. how are you?"
end

get '/erb_template_page' do
erb :erb_template_page
end

# ここから
get '/markdown_template_page' do
markdown :markdown_template_page
end
# ここまでを追加

Gemfileは以下の通り

# frozen_string_literal: true
source "https://rubygems.org"

# gem "rails"
gem 'sinatra'
gem 'sinatra-contrib'
gem 'redcarpet'


それで,エラーはというと
f:id:cocosuzu:20170212135157p:plain




じっくりとエラー画面を眺めてみます…




と,ここであることに気付きました!!




f:id:cocosuzu:20170212135539p:plain




どうやら拡張子が.markdownのファイルを探しに行っているようです.現状ではmarkdownファイルを.mdという拡張子にしているので,もしかすると…




ということで以下のようにファイル名を変更します.



markdown_template_page.md => markdown_template_page.markdown


これで【[http://localhost:4567/markdown_template_page】にアクセスしてみると…




f:id:cocosuzu:20170212140109p:plain




おおおお!!出来た!!出来ました!!そういうことだったのですね…答えは既に書いてあったのです.大切なのはとにかくエラーをよく見ること.最近他のプログラミング言語も多種やっているのですが,成長しない人ほどエラーを見ようとせず,エラーの見方を理解していない気がします.私のことです(笑)どんな言語でもエラーはしっかり読みましょうということですね.




さて問題解決したところで,続いてはmarkdownとerbを組み合わせて使います.




手順どおりに色々作りました.




構成は以下の通り


test_app
├─app.rb
├─Gemfile
├─Gemfile.lock
├─.bundle
├─public
├─vendor
│ └─bundle
│ └─ruby
│ └─2.3.0
│ ├─bin
│ ├─build_info
│ ├─cache
│ ├─doc
│ ├─extensions
│ │ └─x64-mingw32
│ │ └─2.3.0
│ │ └─redcarpet-3.4.0
│ ├─gems
│ │ ├─backports-3.6.8
│ │ ├─multi_json-1.12.1
│ │ ├─rack-1.6.5
│ │ ├─rack-protection-1.5.3
│ │ ├─rack-test-0.6.3
│ │ ├─redcarpet-3.4.0
│ │ ├─sinatra-1.4.8
│ │ ├─sinatra-contrib-1.4.7
│ │ └─tilt-2.0.6
│ └─specifications
└─views
  ├─erb_template_page.erb
  ├─markdown_template_page.markdown
├─erb_and_md_template_page .erb
└─erb_and_md_template_page.markdown


最後の2つの.erbファイルと.darkdownファイルを追加して本体のapp.rbを書き換えました.




いざサービスを稼動!!【http://localhost:4567/erb_and_md_template_page】にアクセス!!




ほげぇ




エラーです
f:id:cocosuzu:20170212173208p:plain




ローカル変数かメソッドであるlocalsってなんなんですか!!って怒られています.




そんなこと言われても…




といっていてもどうにもならないので調べましょう.




"method variables erb markdown エラー sinatra get do"と検索したら




【記事30】
kataribe.naist.jp




こんな便利なサイトが出てきました.sinatraについてのリファレンスを和訳して下さった感じでしょうか.




早速"locals"で検索してみましょう.




結果の中にMarkdown テンプレートについて書かれている部分があります.ここで記述例がある訳ですが…



erb :overview, :locals => { :text => markdown(:introduction) }


ほうほう,大体同じような感じ…




私の書いたコードは



erb :erb_and_md_template_page, locals => { md => markdown(:erb_and_md_template_page) }


あれ?localsの前にコロンが付いてます.textの部分にもコロンが!!もしかするとこれかもしれません.




早速私の書いたコードを以下に変更します.



erb :erb_and_md_template_page, :locals => { :md => markdown(:erb_and_md_template_page) }


それでもってブラウザを更新!!




f:id:cocosuzu:20170212194904p:plain




わー!!上手くいきました!!




とここまで来て,本筋の【記事28】末尾になんとsinatraのリファレンスページがあり,そこにもmarkdownテンプレートについて【記事29】と同様の記載がありました.最初からここに目を向けられていれば…




【記事31】
Sinatra: README (Japanese)




ということでとりあえず【記事28】の内容終了です.




徐々にsinatrarubyに慣れてきました.sinatraに関してはなんとなく入り口が分かってきた程度です.




もうちょっとsinatraでそれっぽいサイト作りを学んでRubyにも慣れるようにしたいと思います.その後,Railsに手を出していこうかと.






それとは別に,そろそろ作りたいサービスについていろいろと考え始めます.




1.記憶支援
忘却曲線に沿って一度学習したことの復習リマインドを知らせてくれる学習支援

2.髪の毛カット記録
髪型の管理サービス.カットの周期やサロン,担当者,金額などが簡単に確認できる.ライフログの一種.

3.raspberry pi 入出力表示
興味本位.rasberry piでのデータ取得を絡めてハードウェアとソフトとサービスの総合力を鍛える

4.服装と天気のリンク
服装の写真を取ってその日の最後に快適だったか寒かったかなどを天気とリンクさせて保存.その後は天気から快適だった服装の候補をサジェストしてくれる


【累計経過時間 27時間】