「スタート編」に続き、本編ではWebアプリの作成を開始します。今回作成するWebアプリのお題としては、エンジニアならよくお世話になっている、IT勉強会サイトを使わせてもらおうと思います。希望する勉強会のキーワードと通知メールアドレスを、今回作成するWebアプリに登録することによって、IT勉強会サイトに、そのキーワードにマッチする勉強会が登録された場合、登録メールアドレスに対して勉強会の内容を連絡してくれるというアプリです。 勉強会に参加しようと思っても、気になる内容のものがなかったり、気がついたときには人数が多くて参加できなかったりという過去の経験から思いつきました。

概要設計

まずなんといっても、サイト名を決定しないといけません。IT勉強会をサーチするということで、「IT勉強会サーチ」、プロジェクトコードを「it_study_search」にします。 登録を行う側をWebフロント側とし、RingoJSを通して、MySQLのDBにメールアドレスと検索キーワード(探したい勉強会のワード)を登録します。検索キーワードは複数条件を指定でき、AND検索とします。DBに登録されているデータを１日１回Cronでチェックして、Google Calendar APIに対して、検索キーワードを投げてマッチする勉強会が無いかどうか調べ、マッチした勉強会があれば、登録されているユーザのメールアドレスに通知を行います。このCronで行う処理側をバッチ処理側と呼ぶことにします。下記にWebフロント側の画面遷移イメージをおこしたので添付します

（画面遷移イメージ）

RingoJSのコマンドラインで雛型生成

下記コマンドで、it_study_searchプロジェクトのアプリケーション雛型を作成します。ここでは特に説明は必要ないかと思います。スタート編に書いた、公式サイト First Stepsを見てもらえばわかると思います。

$RINGO_HOMEはRingoJSを設置したディレクトリをさします。

$ $RINGO_HOME/bin/ringo-admin create it_study_search 

赤色のファイルが今回中身を実装するファイルとなります。雛形を作成した初期はもっとファイル数は少くなく、今後作成していくプログラムファイルが含まれています

it_study_search/  (Webアプリ プロジェクトディレクトリ)
       | 
       |-- README.txt
       |-- actions.js  (コントローラー プログラムファイル)
       |-- batch.js　　(バッチ処理 プログラムファイル)
       |-- config
       |   |-- jetty.xml
       |   `-- log4j.properties
       |-- config.js  (設定ファイル)
       |-- main.js    (アプリケーションのエントリポイント)　    
       |-- model.js   (DB Entity プログラムファイル)　
       |-- public
       |   `-- stylesheets
       |       `-- page.css  (共通CSSファイル)
       |-- service.js        (ビジネスロジック プログラムファイル)
       `-- skins
           |-- base.html
           |-- complete.html (登録完了ページのhtmlスキン)
           |-- email
           |   |-- batch.tpl     (バッチ処理全体のmailスキン)
           |   |-- batchPart.tpl (バッチ処理の部分mailスキン)
           |   `-- confirm.tpl   (仮登録ページのmailスキン)
           |-- error.html
           |-- index.html        (申し込み、仮登録ページのhtmlスキン)
           `-- notfound.html

コーディング開始

インデント

好みの問題なので、世間のオーソドックスなルールですとJavaScriptファイルのインデントはスペース4つが主流だと思いますが、ここではスペース2つでコーディングしています。

登録ページの作成(http://localhost:8080/indexのページ)

メールアドレス、勉強会検索キーワードを入力するための、登録ページをまず作成します。action.jsのexports.indexを以下のように変更します。title、headMessageがhtmlテンプレートファイルに渡す変数と値になります。テンプレートファイル側では<% %>で値を取得します。

[action.js]

var {Response} = require('ringo/webapp/response');

/**
 * index page
 */
exports.index = function (req) {
  return Response.skin(module.resolve('skins/index.html'), {
    title: 'IT勉強会サーチ',
    headMessage: '検索したい勉強会キーワードと受け取るメールアドレスを入力してください'
  });
};

テンプレートファイルの修正

つぎに、skins/index.htmlを修正してIT勉強会サーチのためのhtmlに変更します。下記のようにhtmlファイルを修正します

[skins/index.html]

<% extends ./base.html %>

<% subskin content %>
<div id="header"><h1><% title %></h1></div>
<div id="body">
<p id="message"><% errorMessage %></p>
<h3><% headMessage %></h3>
<form action="/confirm" method="post">
<p><input type="text" name="email" value="" size="50">&nbsp;&nbsp;：&nbsp;&nbsp;<input type="text" name="keyword" value="" size="50"></p>
<p>メールアドレス&nbsp;&nbsp;：&nbsp;&nbsp;検索キーワード</p>
<input type="submit" name="submit" value="送信">
</form>
<br />
<br />
<p>検索方法：</p>
<p>
検索キーワードをスペース区切りで入力する事により、<br />
AND検索になります。今のところOR検索はできません。
</p>
</div>

public/stylesheets/page.cssにエラーメッセージを赤色強調表示させるためのCSS記述を追加します

[public/stylesheets/page.css]

#message {
    color: red;
    font-size: 18px;
    font-weight: bold;
}

とりあえず起動

それではringoコマンドを使い、IT勉強会サーチアプリを起動させてます

$ $RINGO_HOME/bin/ringo it_study_search/main.js 

http://localhost:8080/にアクセスすると、以下のような登録ページが表示されます

本編は登録ページのloadしかなかったので、特にロジカルな事はありませんでした、次編より、DB接続、メール送信などを使用する仮登録処理の開発に入ります