目指せ年収1000万PGタイトルロゴ
IT業界の底辺職であるプログラマーが年収1000万円を目指す生き様を各年収事に綴った自分史型ブログ



【STEP3】RubyをWEBページとして表示する

RubyをWEB化

STEP2では簡単に「Ruby」について触れてみましたがSTEP3では「RubyをWEBページとして表示する」という事に着目してすすめていきたいと思います。


STEP3の開始まえに、まずはSTEP2の、答え合わせを実施します。



≪STEP2の答え合わせ≫
こたえ

◆ソース
ブラウザプレビュー

STEP2の4章のRuby出力用のソースです。HTML部分が長くなるので中略としているのですが、ここでのポイントは一つで、putsの中のダブルクォーテーション「”」マークの前に「¥」マークを入れているところです。


例えば「これは”パン”です」という文字をダブルクォーテーションで囲うとこれはパンですとなってしまいます。


プログラムは「”」から「”」までの間を文字列として解釈するので上記の例では「”これは”」までを文字列として判断してしまい、「パン”です”」の部分が不正な構文として解釈されてしまいます。


なので「¥」マークを付けてこの「”」は文字列の終了じゃなくて文字の「”」としてとらえてねとプログラムに伝えているのです。


この表現について詳しく理解したい人は「Ruby 文字列 エスケープ」というキーワードで検索して理解できる説明のあるサイトを調べてみて下さい。



STEP2の課題が終わったら次は「登録フォーム」を実際に登録できるようになるために「システム化」していきましょう。 ただの「ホームページ」ではなく、フォームの情報を登録する「システム」を作りこんでいく必要があります。 すこし回りくどくなってしまいますが、STEP2では「システム化するための土台の知識」にフォーカスをあてていきたいと思います。





1.RubyをWEBページとして表示する

STEP2の4章で「HelloWorld」ではなくわざわざHTMLを吐き出してもらったのには意味があります。なんとなくお気づきだとは思いますがRubyが吐き出したHTMLをブラウザで表示するためです。


ブラウザ表示するには下記のポイントを理解することが必要です。


順番に説明していきましょう。


1-1.RubyソースがRubyとして動く事について

なんか、哲学的なタイトル…(*´Д`)


RubyをSSH上で実行するときに「ruby ソース名」と入力したと思います。

Ruby実行コマンド

これは、最初の「Ruby」というのが実行するプログラム名です。コンソールにRubyを実行するぞーーって命令しているわけですね。


で、スペースを一個入れて「ソース名」を入れています。これは「Rubyのプログラムとして実行するのはこのソースだ!」と情報を与えています。


この実行するプログラムと、プログラムへ与える情報という指示の仕方はLinux(っていうかどのOSでも)では覚えておくべき基礎となります。


「プログラム名 指示(引数)」


というのがコンソールで何かを実行するときのポイントとなります。

Ruby実行コマンド


Rubyを実行するのだから、まずは「ruby」と打つ!


「ruby test.rb」⇒(和訳)⇒「Rubyさん、test.rbを実行して」ってことですね。(上の図のイメージ)



ただ、これだとプログラムを実行するたびに毎回毎回「Rubyさん!」「Rubyさん!」とお願いしに行くことになってしまいます。(下の図のイメージ)


Ruby実行コマンド(多忙)


Rubyで書いたソースなんだから、「Rubyさん!」って呼びに行かなくても Rubyさんに実行してもらいたいなぁーーーって 思ってしまうのが人間のサガというものです。


と、言う分けで これは「Ruby」が実行するソースなんだよっていうのと「これはただのファイルじゃなくて動くプログラムだよ」という情報を作成したRubyソースに付けてあげましょう。


1-2.自分は動くRubyだと認識させる

Rubyソースを作るときに、メモ帳等のツールを使って作ったと思いますが、この状態だと「ただのテキストファイル(文字を書いただけのファイル)」のままです。


なので「自分はRubyが実行するファイルなんだ!」という自己主張をファイルに書き込みましょう。アップロード先のLinuxさんは空気の読めるやつなのでこの自己主張を解釈してくれます。


自己主張の方法は一行目に「#!/usr/bin/ruby」と書くだけです。


訳すと「自分はrubyというプログラムが実行するファイルなんですよー」って意味です。(/usr/bin/rubyというのはrubyプログラムがいる場所です)


ソースのイメージはこんな感じです。

修正後のRuby

ただ、これだけではRubyさんは動いてくれません。自己主張を加えても「動く事」を許可していないので動いてくれないのです。


そこで「実行権限」をルビーに与えてあげる必要がでてきます。FileZillaを起動し、サーバへ接続した後に動かしたいRubyソースを選択し右クリックから「パーミッションの変更」を選択します。

パーミッション変更指定

「パーミッションの変更」というウィンドウが開くので「実行」の部分全てにチェックを入れます。

パーミッション変更画面

パーミッションの変更が終わったらSSHの画面を開いて「ls -l」とうってみて下さい。詳細情報の左部分に「-rwxr-xr-x」と表示されていれば成功です。


変更後のパーミッション確認

これでうごくRubyができました!


さっそく動かしてみましょう。SSHのターミナルで「./test.rb」と入力するだけです。

変更後のパーミッション確認

1-3.WEBページだと認識できるようにする

動くRubyソースができたら、この動くRubyソースをWEBページとして表示できるようにしましょう。


HTMLファイルは、ファイルをアップロードしただけでWEBページとして表示できましたが、Rubyのようなプログラムはそのままでは動きません。


あまりおまじないという表現は使いたくないのですが、HTMLのソースの前におまじないを書く事によってHTMLページを表現するRubyプログラムに変える事ができます。


putsを実行する前に
「print "Content-type: text/html\n\n"」

といったおまじないの1行を追加してください。こうするとこのRubyの実行結果はWEBページの実行結果だという事になります。


ただ、自分もそうだったのですが、おまじないってなんじゃーーーってなる事があります。そうなってしまったらCotent-typeとはといったキーワードで検索すると「なんとなく」意味がわかるかと思います。


Content-typeを付けたあとにブラウザから「http://アップロードしたURL/Rubyソース」
例:http://150.95.183.157/ebiebi_pg/test.rb
といった感じでアクセスすると、Rubyから出力したHTMLのページが閲覧できると思います。




2.少し動的にしてみる

動くRubyページ

1章の内容にそってRubyを使ってページが表示できても「動くとか言っているけど普通のHTMLと何も変わらないじゃん!」と思うかもしれません。


せっかくの「プログラムを使って動くページ」なので、何か変化をくわえてみたいと思います。


そこで、比較的簡単な「現在時刻を表示するページ」を作っていきたいと思います。下記2点についてGoogle検索をし、作ったページを改修してみてください。


1.Rubyの文字列中に式を表示させる方法
2.Rubyで現在時刻を表示させる方法

出来上がりイメージは下記のようになります。


↓下記のようなソースなら

時刻表示イメージ・ソース

↓このようなページが表示される

時刻表示イメージ・ブラウザ


※ヒント※
時刻表示方法について、まず調べる必要があるのでRubyで現在時刻を表示する方法について検索し、時刻表示部分を上記ソースの???????部分に入れてやれば表示できると思います。

いきなりHTML中に時刻を表示させるのは難しいかもしれません。そういった時は
1.Rubyで現在時刻を表示
2.現在時刻を変数に入れてputsで表示
3.変数をクォーテーションで囲まれた文字列中に表示
といったステップで実施すると分かるかもしれません。