Greetingのシステムについて解説します。本システムは、クローラとWebサーバの2つのプログラムから構成されています。クローラは、サンリオピューロランドの公式サイトからグリーティング情報を取得し、データベースに格納します。Webサーバは、ユーザからのリクエストに応じてデータベース内の情報を表示します。テーブル構成データベースのテーブル構成は以下のER図のようになっています。ここでは本質的ではないいくつかのカラムは省略しています。schedulesは、複数回のグリーティングを束ねた1日のスケジュールを表現するためのテーブルです。1行が1日に対応しています。greetingsは、グリーティングを表現するテーブルです。3要素が一致する複数のキャラクターの登場を1つのグリーティングとして扱います。Webページの下図のような枠1つが1行に対応すると考えるとわかりやすいかもしれません。appearancesは、greetingsとcharactersを結ぶための中間テーブルで、キャラクターの登場を表現しています。characters、costumes、placesは、それぞれキャラクター、衣装、場所を表現するテーブルです。キャラクター、場所については特に説明は不要かと思います。ことを意味しています。クロール解説は必要ないと思われるので省略。http://greeting.sucretown.net/)です。タイムテーブル表示について解説します。いっても、本システムの要であるレスポンシブデザインはBootstrapが実現してくれているものなので、ここではHTMLの組み立て方とJavaScriptの処理概要について述べます。HTMLの組み立てHTML生成の流れは以下のとおりです。これはあくまで概念的なものなので、実際の処理順序とは異なります。(終了時刻が同じ場合は開始時刻順)各greeting-categoryおよびgreeting-groupについて順にHMTLを生成していく最終的に出力されるHTMLのグリーティング情報部分は以下の図のような構造です。図中の緑の部分は最終的なレンダリング結果として描画される部分で、破線部分は実際には表示されません。systemによって実現しています。assets/stylesheetsディレクトリにあります。Hamlで書かれているので理解しづらいかもしれませんが、タグで囲む代わりにインデントで階層構造を表現しているだけで、複雑なものではありません。上の図や実際に動いているシステムのHTMLと見比べると若干わかりやくなると思います。JavaScript本システムのJavaScriptは、主にgreeting-categoryの更新を行っています。チェックし、現状から変化する場合には適切なgreeting-category内に配置し直します。この処理はassets/javascripts/greetings.jsに記述されています。