データベースを使ったアプリ作成 1 (Ruby on Rails の利用)

はじめに

Rails では MVC (Model, View, Controller) モデルで開発を行う．本ドキュメントでは，まず最初のステップとして，モデル (Model) を使わないでコントローラ (Control) とビュー (View) のみでアプリを作成する．

モデル：
  データベースなどでデータを管理

コントローラ：
   モデルからデータを読み出して成形してビューに引き渡す
   ビューからデータを受け取って成形してモデルに格納する

ビュー : 
   HTML でデータを表示する
   利用者からの画面入力を受け付け

環境設定

必要な Debian パッケージのインストール

$ sudo apt update

$ sudo apt install autoconf bison build-essential libssl-dev libyaml-dev \
   libreadline-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm-dev     \
   libgdbm-compat-dev libdb-dev sqlite3 libsqlite3-dev ruby-dev git tree -y

Debian パッケージで提供される rails はバージョンが古いので， Ruby のパッケージシステム (gem) で rails をインストールする．

$ sudo gem i rails

インストールできたか確認する．

$ rails -v
  Rails 7.0.6

一番小さな Rails アプリづくり

最初の一歩

作業ディレクトリを作成する．

$ mkdir my_web_apps
$ cd my_web_apps

アプリを作る．以下のように rails new コマンドを行う．以下の例のように append config/importmap.rb と出れば OK である．

$ rails new helloworld
  ...(略)...
  append  config/importmap.rb

    注意：
    gem のインストールが発生する場合には sudo のパスワードの入力が求められる.      
    以下はパスワードを要求されたときの例

    to install the gems into ./vendor/bundle/, or you can enter your password
      and install the bundled gems to RubyGems using sudo.

    Password:  <-- パスワードを入れる (何も表示されないことに注意)

アプリが出来たら，サーバを立ち上げる． rails s の s はサーバ (server) の略になっている．デフォルトだとローカルホストからのみサーバにアクセスできる設定なので， "-b 0.0.0.0" を付けてインターネット上のどこからでもアクセスできるようにしている．

$ cd helloworld/
$ rails s -b 0.0.0.0

サーバを起動したら，ブラウザで http://10.176.0.1XX:3000 (自分の VM の 3000 番ポート) にアクセスしてみよ．以下のような画面が表示されれば OK である．確認ができたら Ctrl-C でサーバを止める．

rails g コマンドでページを作る

以下のようにコマンドを実行してページ hello コントローラと index アクションを作成する．もし，打ち間違えた場合は，g の部分を d にして再実行すると，rails g コマンドで作成したファイルをまとめて削除することができる．

$ rails g controller hello index

$ rails s -b 0.0.0.0

サーバを起動したら，ブラウザで http://10.176.0.1XX:3000/hello/index にアクセスしてみよ (XX は自分の VM に合わせること)．以下のような画面が表示されれば OK である．確認ができたら Ctrl-C でサーバを止める．

ビューの作成

次にこのページに "Hello World" を表示させるためのビューを作成する．拡張子から分かるように，このファイルは ERB (埋め込み Ruby) 形式である． ERB なので Ruby スクリプトを埋め込むことができる．以下の例では，現在時刻を Web ページに表示するようにしている．

$ vi app/views/hello/index.html.erb

  <p>Hello world!</p>
  <p>現在時刻: <%= Time.current %></p>

サーバを起動する

$ rails s -b 0.0.0.0

コントローラの作成

最後に，コードのロジック部分をビューに書くのではなく，コントローラで書くことにする．

コントローラを次のように変更する．@time という変数に現在時刻を代入する．このようにしておくと，ビューで何度も Time.current といった命令を実行しなくて済むようになる．

$ vi app/controllers/hello_controller.rb

  class HelloController < ApplicationController
    def index
      @time = Time.current.in_time_zone('Asia/Tokyo')
    end
  end

ビューを以下のように変更する．

$ vi app/views/hello/index.html.erb

  <p>Hello world!</p>
  <p>現在時刻: <%= @time %></p>

サーバを起動する

$ rails s -b 0.0.0.0

サーバを起動したら，ブラウザで http://10.176.0.1XX:3000/hello/index にアクセスしてみよ (XX は自分の VM に合わせること)．先ほどと同じ画面が表示されるはずである．確認ができたら Ctrl-C でサーバを止める．

[まとめ] アプリの構造・動作

今回作ったアプリの主要なファイルを並べると以下のようになっている．

helloworld
├── app
│   ├── controllers
│   │   └── hello_controller.rb
│   └── views
│       ├── hello
│       │   └── index.html.erb
│
├── config
│   ├── routes.rb

クライアントからのリクエストが来ると，以下のような順で Rails アプリがリクエストを受けてレスポンスを返す．

クライアントからのリクエスト：
   URL : http://localhost:3000/hello/index
   HTTPメソッド : GET
   ↓
Rails アプリ
   Routes (config/routes.rb)
       URL・HTMLメソッドとコントローラ・アクションの対応関係の定義
       /hello/index は HelloController クラスの index メソッドと対応している (後述の図参照)
   ↓
   Controller (app/controllers/hello_controller.rb)
       さまざまな処理を行い，ビューで使う情報をインスタンス変数を使って渡す
         @time (インスタンス変数) に演算結果を代入
   ↓
   View (app/views/hello/index.html.erb)
       ERB (埋め込み Ruby) を用いて，Ruby コードを実行して HTML に埋め込む
         @time の中身を表示する → <%= @time %>
   ↓
クライアントへのレスポンス
       作成した HTML をクライアントへ返す

Routes については，サーバを起動して /rails/info/routes へアクセスしてみると分かりやすい．「パス "hello/index" への GET でのアクセスで HelloController の index アクションが呼ばれる」ということが分かる．

なお，config/routes.rb ファイルには以下のように書かれている．

$ config/routes.rb

   get 'hello/index'

課題

上記の手順を参考に，新しいアプリ "hello2" を作成して下さい．

hello2 にはページを 3 つ作ってください．

index
page1
page2

注意：
page1, page2 に対するアクションは直接 app/controllers/hello2_controller.rb を編集して下さい．
page1, page2 のアクションを定義して下さい (中身は空で大丈夫です)．

$ rails g controller hello2 index
$ rails g controller hello2 page1   <-- エラーが出る．hello2_controller は既に存在すると言われる．

$ vi app/controllers/hello2_controller.rb

コントローラの index アクション内でリストを定義してください．
```
@pages = ["page1", "page2"]
```

Routes (config/routes.rb) を設定する．

注意：
前述の "rails g controller hello2 index" を実行したことにより，hello2/index のパスは設定されている．
ここでは，page1, page2 のパスを定義してください．書き方は hello2/index と同様にすれば大丈夫です.

index のビューにおいて，page1, page2 へのリンクを作成してください．但し，インスタンス変数 @pages を利用し，埋め込み Ruby (erb) でループを回すこと．

page1, page2 のビューの内容は各自で適宜考えること．

自分の趣味を紹介したり，お勧めの一品を紹介したり，....

注意：
 page1, page2 のビュー用のファイルは index をコピーして修正するのが良いです．

 $ cp app/views/hello2/index.html.erb  app/views/hello2/page1.html.erb
 $ cp app/views/hello2/index.html.erb  app/views/hello2/page2.html.erb

作成した Controller, View のプログラムと，ページ 3 つ (index, page1, page2) のスクリーンショットを提出すること．
- 必ずブラウザの URL バーが含まれるようにスクリーンショットを取ること．