1. ホーム
  2. コラム
  3. 簡単に実装できる!静的ファイルだけで動的なWebページを制作する方法

簡単に実装できる!静的ファイルだけで動的なWebページを制作する方法

こんにちは。2015年度新卒のWEBガーデン仙台所属エンジニアの赤池です。

今回、技術的なノウハウのコラムを書かせていただくことになりました。Webページを制作する際に大量のデータを手作業でコピー&ペーストしていることをもっと楽にもっと簡単に手作業なく実現できる方法を紹介させていただきます。


Webページへのデータの反映

統計のデータを表にしたい時に多くの場面では、HTMLのtableタグを使って、ひとつひとつのデータをコピー&ペーストをして挿入しています。

手作業でコピー&ペーストしていると必ず挿入する箇所や順序を間違えてしまうことがあります。

日本政府観光局(JNTO)の「2015年8月訪日外客数(JNTO推計値)」を使用して動的に表を制作する方法を紹介します。

HTMLコード
HTMLコードの表示結果

*左(スマホは上):データをコピー&ペーストで挿入したHTML

*右(スマホは下):HTMLをWebブラウザで表示した状態

出典:日本政府観光局(JNTO)「2015年8月訪日外客数(JNTO推計値)」

そこで私が紹介するのは、AngularJSです。Google社が開発しているJavaScriptのアプリケーションフレームワークです。AngularJSはMVWフレームワークと呼ばれるデザインパターンを採用しており、Webページとデータを表示・操作する仕組みを実現してくれます。

同じような機能を提供してくれるJavaScriptアプリケーションフレームワークは、「Knockout.js」や「Backbone.js」などありますがどれも依存関係や値の反映などAngularJSより劣ります。なおかつ、AngularJSであれば、JavaScriptの記述を簡略化出来ます。

今回は、AngularJSの仕組みではなく、その使い方についてご説明します。


AngularJSを利用する準備

以下の環境で、制作します。

  • JavaScriptフレームワーク: AngularJS
  • テキストエディタ: Sublime Text 3
  • サーバー環境: nginx
  • OS: Mac OS X

AngularJSを利用するには、ダウンロードまたはCDNで利用できます。今回はダウンロードして利用します。

AngularJSには、現行のバージョン1と開発途上のバージョン2があります。

バージョン1をAngularJSのWebページよりダウンロードします。

参考:AngularJS — Superheroic JavaScript MVW Framework

参考:コンテンツデリバリネットワーク – Wikipedia

AngularJSのトップページ
AngularJSのダウンロードモーダル

*左(スマホは上):AngularJSのトップページ

*右(スマホは下):ダウンロードのモーダル

「Download AngularJS 1」をクリックし、表示されたモーダル内の「Download」ボタンよりダウンロードできます。


AngularJSを利用して、Webページを作る方法

AngularJSを利用してデータをWebページに表示するには、表示するページと表示したいデータを連携させる設定が必要です。

まずは、表示したいデータを作ります。

JSONと呼ばれるデータ形式で表示したいデータを作ります。

「2015年8月訪日外客数(JNTO推計値)」の「月」を「month」、「平成27年」を「heisei_27」、「平成26年」を「heisei_26」、「伸率」を「change」としてJSONを制作します。

ファイル名:inbounds.json

参考:JavaScript Object Notation – Wikipedia

inbounds.jsonのキャプチャ

データを表示するための雛形としてHTMLを作ります。

ファイル名:index.html

index.htmlのキャプチャ

データ(JSON)と表示する雛形(HTML)を連携させるためのJavaScriptを作ります。

ファイル名:controllers.js

controllers.jsのキャプチャ

注:JavaScriptの記述は、AngularJSの記法に則った記述です。

参考:$接頭辞命名規則($ Prefix Naming Convention)

解説1 JavaScriptの読み込み

HTML:

index.htmlの4から5行目

こちらで、WebページにAngularJSとデータとHTMLを連携させるためのcontroller.jsを読み込んでいます。

解説2 AngularJSと連携

HTML:

index.htmlの2行目

JavaScript:

controllers.jsの1行目

それぞれに記述したこの行の'inboundApp'でAngularJSがHTMLと連携されます。

記述したこの文字をコントローラ名といいます。

解説3 表示する箇所を指定

HTML:

index.htmlの19から24行目

JavaScript:

controllers.jsの5行目

HTMLの"inbound in inbounds"とJavaScriptの$scope.inboundsで値を表示する場所が連携されます。

この表示する場所を設定することをバインディングといいます。

また、HTMLの{{inbound.month}}をエクスプレッションと呼びJavaScriptの$scope.inboundsをプロパティ名と呼びます。

解説4 表示する箇所を指定

JavaScript:

controllers.jsの3から6行目

JavaScriptの'inbounds.json'でJSONのファイルを指定してします。

ここでは、Ajaxという手法を用いて、ファイルの読み込みをおこないます。読み込まれたJSONはバインディングした箇所へ表示されます。

参考:Ajax – Wikipedia


AngularJSを利用して出力されるWebページ

AngularJSの表示結果

このように大量のデータを一つ一つコピー&ペーストせずとも表示してくれます。

また、データの順序を変更することが可能です。

次のようにJSONでchangeと名前を付けたデータを昇順に変更したい場合は、HTMLの下記の行を

index.htmlの5行目

次のように変更を加えると

index.htmlの19行目

たった数文字追加することで、下記のように伸率が昇順に変更できます。

伸率を昇順にした表示結果

AngularJSでは、データの表示順序を昇順・降順にすることも楽におこなえます。

参考:AngularJS: API: orderBy


まとめ

このようにAngularJS を使うことで、多くの手作業を省くことができます。

たとえば、表示したいデータを検索して表示することやユーザーが入力した情報の整合性チェックなども簡単に実装することが出来ます。

今回は、データを簡単に表示できることをご紹介しました。しかし、AngularJSには他にもさまざまな機能を備えています。人が手作業をしていた冗長的な作業をAngularJSが代わりに担ってくれます。利用するのも簡単なので、試してみてください。

■コラム執筆者

赤池泰平(あかいけたいへい)

2015年度 株式会社メンバーズ入社

部署 第3ビジネスユニット-アカウントサービス第4ユニット

WEB構築・アプリ開発の経験があり、技術を更に高めるため日々精進しています。

RSS