RubyCaseStudy1

Following Ayaka Ikezawa's text, the author practiced making Web application process using Sinatra on Ruby.

Transcript

1. Ruby実践 「Ruby入門 RubyではじめるWebアプリケー ション入門」(池澤あやか, July 7, 2016)を実践 してみたのでまとめ July 10, 2016 Kenichi kawaguchi
2. 教材について サイト：“https://speakerdeck.com/ikeay/sinatraru-men” に投稿された池澤あやか様のプレゼン資料を教材にします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド1
3. sinatraのインストール Macのアプリ、”ターミナル”で実行します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド6
4. sinatraのインストール “sudo”で実行後、管理者パスワードを入力します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド6 ターミナルの画面 コマンドを入力します。 sudoは管理者権限での実行を表しますので、 Macの管理者パスワードを入力します。
5. sinatraの動作確認 テキストエディタでファイルをつくり、実行します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド7, 8 ターミナルの画面 viエディタでファイルを作りました。 catコマンドでファイルの内容確認。 実行。 WEBrickが動いて います。 WEBrickが動いています。 WEBrickはRubyのWebサーバー用フレーム ワークです。 つまり、このMacでWebサーバーが動いて います。 終了はControl+Cで行います。
6. sinatraの動作確認 ブラウザで”http://localhost:4567/”にアクセスします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド7, 8 ブラウザ(safari)の画面 ファイルに記述した通り、”Hello World”が 表示されました。
7. Webアプリケーションをつくる 「折り返し翻訳辞書」もどきに挑戦します 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド10
8. 翻訳API利用の準備 ”https://azure.microsoft.com/ja-jp/marketplace/”にアクセス 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面
9. 翻訳API利用の準備 text translationを検索します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面 ここに”text translation”と入力して リターン。
10. 翻訳API利用の準備 text translationを検索します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面 ここに”text translation”と入力して リターン。
11. 翻訳API利用の準備 text translationのリンク先に移動します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面 一方がspeech translation、も う一方がtext translationです。 text translationのリンク先に移 動します。
12. 翻訳API利用の準備 text translationのリンク先に移動します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面 “サインアップ”をクリックします。
13. 翻訳API利用の準備 2,000,000文字/月(¥0)をMicrosoftアカウントでサインアップ 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド11 ブラウザ(safari)の画面 “サインアップ”をクリックします。 この後、Microsoftアカウントでの サインイン画面となりますので、 画面に従ってサインインします。
14. 翻訳API利用の準備 マイ アカウントのアカウント情報からプライマリアカウントキー を確認します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ブラウザ(safari)の画面 プライマリアカウントキーをプログラム中 に使用します。
15. 翻訳API利用の準備 アプリケーションを登録するため、”開発者”をクリックします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ブラウザ(safari)の画面 ”開発者”をクリックします。
16. 翻訳API利用の準備 ”登録”をクリックします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ブラウザ(safari)の画面 ”登録”をクリックします。
17. 翻訳API利用の準備 クライアントID, 名前等を任意に入力し、作成をクリックします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ブラウザ(safari)の画面 クライアントIDを入力。 プログラム中に使用します。 名前を入力。 “顧客の秘密”（クライアント シークレット）をプログラム 中に使用します。 ブラウザ(safari)の画面 ”作成”をクリックします。
18. bing_translatorのインストール インストールを実行したところ、エラーが出ました。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ターミナルの画面 エラーが出ました。
19. bing_translatorのインストール エラーの内容を確認します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ターミナルの画面 bing_translatorインストール中にインストール されるNokogiriがlibxml2のバージョンと合って いないようです。
20. bing_translatorのインストール libxmlのインストールとNokogiriインストールを行います。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ターミナルの画面 試行錯誤の末、“$ brew install libxml2”の実行（画面なし） やAnemoneのインストールによりNokogiriがインストール されました。
21. bing_translatorのインストール 再度、bing_translatorをインストールします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド12 ターミナルの画面 今度は無事にインストールが成功しました。 （中略） （中略）
22. 「折り返し翻訳もどき」プログラムの記述と実行 bing_translatorを呼び出し、クライアントID等を設定します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド13 ターミナルの画面 ここにクライアントID, クライアント シークレット, プライマリアカント キーを入れます。
23. 「折り返し翻訳もどき」プログラムの記述と実行 sinatraを呼び出し、テンプレートをレンダリングします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド14 ターミナルの画面 views/index.erbをレンダリングします。 views/result.erbをレンダリングします。
24. 「折り返し翻訳もどき」プログラムの記述と実行 テンプレートindex.erb, result.erbをフォルダviewに作成します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド15, 16 ターミナルの画面 views/index.erb views/result.erb
25. 「折り返し翻訳もどき」プログラムの記述と実行 main.rbを実行し、”http://localhost:4567/”にアクセスします。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド17 ターミナルの画面 ブラウザ(safari)の画面
26. 「折り返し翻訳もどき」プログラムの記述と実行 文章を入力後、検索をクリックし、結果を確認します。 「Ruby入門　RubyではじめるWebアプリケーション入門」 （池澤あやか）スライド23 ブラウザ(safari)の画面
27. まとめ • 簡単なプログラムを通じてSinatraのインストールから実行まで を体験することができた。 • gemを使ってRubyのライブラリを使えるようになった。 • Microsoft AzureのAPI利用の方法を習得した。 • Sinatraを使ったRubyのWebアプリケーションをつくることが できた。 学習中のRubyを用いて、Webアプリ作成を実践す ることができました。 今回のきっかけとなった教材の著者、池澤あやか様 に感謝いたします。 ありがとうございました！