SinatraでWebの基本を学ぶ
今回は Sinatra を使って Web の基本を学びます！
Ruby on Rails は機能が多いので、Sinatra からのほうが入りやすいそうです。
目次
１．Sinatraインストール
まず Sinatra をインストールをします。
$ gem install sinatra
同様に、関連 gem もインストールしておきます。
$ gem install sinatra-contrib
$ gem install activerecord
私は既にインストール済みですが、sqlite3を未インストールの場合ここでインストールしておいたほうが良さそうです😐
２．ディレクトリの作成
ここからは以下のサイトを参考に進めていきます！
まずディレクトリを作成します。ここではディレクトリ名はsinatra_sampleとします。
作成したディレクトリに移動して、bundle initを実行します。これにより bundler が使えるようになり、Gemfileというファイルが作成されます💡
Gemfile内には既に数行書かれていますが、以下の1文を追加します。
gem 'sinatra'
続いてgemのインストールを行います💪
３．アプリケーションの作成と起動
試しにRubyファイルを作成します。ファイル名はapp.rbにします。
中身は以下のように書きます✍️
書けたら、bundler で実行します。
bundle exec ruby app.rbとなります！
この状態でlocalhost:4567に接続すると、helloという文字が現れます✨
ローカルホストなのでブログリンクから飛んでも表示されませんが💦
こんなふうになります。
４．sinatra reloader
app.rbの内容を変更してブラウザを再読み込みしても、変更が反映されません。
変更を反映するには、sinatraを再起動する必要があります。
そこで再起動を簡単にするために、 sinatra reloader をインストールします！
まず起動中のアプリを閉じ、Gemfileに以下を追加します。
gem 'sinatra-contrib'
追加したら先程と同じく$ bundle installを実行します。
次にapp.rbを編集します。
再びbundle exec ruby app.rbを実行すると、localhost:4567は以下の画面になります！
今後はブラウザの再読み込みで変更が反映されます🎉
５．動かしてみる
先程のapp.rbのコードに3行追加します。path/toとか書いてあるあたりです。
ルーティングを追加しています。
この状態だと、localhost:4567/path/toが以下のように表示されます🙂
次に、静的ファイルを追加します。
ルートディレクトリ配下にpublicディレクトリを作成します。
その中にthis is html file.と書かれたtest.htmlファイルを作成します。
この状態でlocalhost:4567/test.htmlを開くと以下のようになっています👀
更にapp.rbに3行追加します。
この場合、*がワイルドカードで任意の文字列が入ります。
なのでlocalhost:4567/hello/sayakaにアクセスすると、以下のようになります！
sayaka を別の名前にしても同様です。
次はビューを使ってみます。
app.rbにまた3行追加します。見づらくなってきたので、行番号を表示しました😊
16〜18行目のところです。
追加できたら、今度はディレクトリとファイルを作成します。
ディレクトリはviewsで、ファイルはerb_template_page.erbです💡💡
erb_template_page.erbの中身は以下の1行です。
この状態で、localhost:4567/erb_template_pageにアクセスすると、現在時刻が表示されます！
続いて、redcarpet という、Markdownに対応させる gem を対応させます。
Gemfileに1行追加し、$ bundle installを実行します。
gem 'redcarpet'
app.rbに3行追加します。対象箇所だけ抜粋します。
またviewsディレクトリの中にファイルを作成します。
名前はmarkdown_template_page.markdownです。
中身は以下のとおりです😎😎
これでlocalhost:4567/markdown_template_pageを見ると、以下のようになります。
Markdown の見出し#が反映されているようですね👏
先程の erb と markdown を組み合わせてみます。
※ここからリンク先サイトとは少し違います。たぶんリンク先サイトに誤りがあります。
app.rbに以下の3行を追加します。
viewsディレクトリの中にファイルを2つ作成します。
ひとつめはerb_and_md_template_page.erbで、中身は以下のとおりです🙂
ふたつめは同名のmarkdownファイルで、中身は以下のとおりです。
これでlocalhost:4567/erb_and_md_template_pageを見ると、以下のようになっています🎉🎉🎉
Sinatraの基本は以上です！
