Kuroyagi飼育日誌

学んだことの備忘録

webサービス開発その3

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


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

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"と検索したら

【記事31】
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】と同様の記載がありました.最初からここに目を向けられていれば…

【記事32】
Sinatra: README (Japanese)

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

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

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




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

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

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

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

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