い。

◆

3. まとめRIA（Rich Internet Application）の現状と考察

以上が主要路線探索サービス・ソフトの概要である。はっきり言えることは 1995 年頃にパソコンの普及，そして 1998 年に携帯電話の普及で大きく成長したということだ。

鉄道路線探索サービスは非常に便利で利用者に絶大な影響を京都情報大学院大学 准教授 田渕 篤

及ぼしたサービスである。そのため，鉄道路線探索サービスに併せてダイヤ作成をしないと利用客が離れてしまうかもしれな◆

2.3. 市町村の発展に関わる路線検索

い時代になった。鉄道路線探索サービス一つで街全体に影響があると言っても過言ではない。そのためにも検索サイトの傾向

さてこのいいことずくめの路線検索だが気になることがあっ◆

1. はじめに--- が求められ，また実装できるようになってきた。このことが，今日の RIA 技術の進展に繋がっている [3]。

からダイヤを構築していく時代だといえる。

た。検索エンジンの普及で駅の乗降客の変動に大きな特徴が見2011 年秋，惜しまれつつこの世を去った Apple 社 CEO のられるようになった。まず，検索エンジンで結果が出される路【参考文献・脚注】

Steve Jobs 氏。彼は，1985 年に一度 Apple 社を追われた後，色として，具体的に以下のようなものを挙げている。

線の乗車率が上がったことである。これは即ち，「検索エンジ[1] 河地裕介，「課程修了プロジェクトレポート

再起を期して NeXT 社を創業した（10 年後に Apple 社に買収

●プログラム実行・データ通信・コンテンツ表示を効率よくンの結果が出ない路線は過疎化する」ことを意味する。例とし

ウェブビジネス」（2010 年）される）が，そこでの彼の仕事が，いわゆる WWW（Worldて阪急京都線烏丸駅と河原町駅の比較を行うことにする。

[2] JR 西 日 本・ プ レ ス リ リ ー ス 8p http://www.westjr.co.jp/

Wide Web）の黎明に貢献していることは，あまり知られてい

ICSFiles/afieldfile/2010/12/17/20101217_honsya.pdf

ない事実かもしれない。WWW の提唱者である Tim Berners-[3] JR 西日本の路線愛称名。大和路線 = 関西本線の一部

Lee は，1990 年末に世界初の Web サーバと Web ブラウザと●強力で拡張性の高いデータオブジェクトモデル[4] JR 西日本

を試作し稼働させたが，その開発環境となったのが NeXT 社製●再利用可能なコンポーネントによる容易な開発のワークステーション（NeXTcube）だったのである [1]。

● HTML 以外（XML 等）のデータサービスとの連携

鉄道ダイヤと琵琶湖線・JR 京都線・JR 神戸線時刻表 2011年 3 月改正から。
[5] JR 西日本

図６ 阪急京都線烏丸駅と同線河原町駅の 1 日平均乗車人数 [8][9]Tim Berners-Lee が WWW を構想した背景には，彼が当時所

阪和線・関西空港線時刻表 2011 年 3 月改正[6] B 先生が持つ PiTaPa でも JR 区間は乗車可能だが現金チャ属していた欧州原子核研究機構（CERN）において，研究者た

先の Macromedia 社の技術レポートでは，RIA が持つべき特行う実行環境●文字・音声・動画などの各種メディア，及びそれらの送受
信の統合●オンライン／オフラインを問わない動作●マルチプラットフォーム／マルチデバイスへの対応

ージしないと乗れない。JR 区間の残額は 0 なので乗車不可能

ちが膨大な数の技術文書を相互にリンクし，効率よく閲覧するである。

『分散文書管理システム』への強い要求があったという。それ式に大別される [4]。

これらを実現するアプリケーション基盤は，以下の３つの方[7] 阪急電鉄リネア 5 月臨時号 2011 年 5 月 14 日改正

から 20 余年を経て，人々が Web の世界に求めるものは大き1. Web ブラウザそのものの機能を拡張して，HTML で表現さ[8] 阪急電鉄上位 50 位乗降客数（平日）2007 年から 2010 年

く様変わりした。その最も大きな変化の一つが「文書から RIA

れた Web コンテンツに JavaScript や CSS による対話性や表

この 2 駅は乗降客数が単純に 2 倍にならない駅である。理由はhttp://rail.hankyu.co.jp/station/passenger.html（Rich Internet Application）へ」という流れである。

現力を持ち込む方法。Ajax 技術によるコンテンツの部分更烏丸駅で降りて河原町駅で乗車する客，路線検索の普及で烏丸[9] 京都府統計書 1987 年，1992 年から 2006 年

駅で帰る客があるからだ。

輸・通信2001 年を境に乗車客数が逆転していることがわかる。また，

すなわち Web の利用者は，静的な文書データをリンクをた新等もその例である。Web ブラウザは，元々マルチプラッ

どって順次閲覧するだけに収まらず，より対話的で動的な『アトフォーム対応かつ無償で提供されるため，既に幅広いユー

第 10 章運

前者の場合は行きは急いで，帰りは座って行く客の流れを反

プリケーション』として，Web 上のコンテンツを操作するこ映したものである。しかしそれでは 2001 年以降の烏丸駅の方とに価値を見いだしているのである。その変化に伴い，Web

2. Web ブラウザに各 RIA 専用のプラグインを組込み，Web ペ

ブラウザも，文書閲覧のツールから Web アプリケーションをージ内に埋め込む形（<object> タグ等）で RIA としてのユ

実行する基盤ソフトウェアへと進化していった。また，汎用のーザインタフェースを提供する方法。Adobe Flash や JavaWeb ブラウザだけでなく，用途ごとに特化した単体 RIA の開Applet 等がこれに当たる。Web ブラウザの表現力の制約を発／実行基盤も広がりを見せている。

受けない柔軟なユーザインタフェースが提供でき，ユーザもが乗車人数が多い説明がつかない。そこで後者の理由が出てくる。人は検索結果を信じてそのルートのまま帰ろうとする。
そのため，河原町駅が始発駅であることを知らない客は素直に烏丸駅から乗っていってしまうと考えられる。1995 年から1997 年にかけて河原町駅の乗車人数が急激に減少しているが1995 年に駅すぱあとの最初の Windows95 版が発売されたのだ。そして 1999 年から 2001 年にかけてインターネットの普及と携帯電話の普及でさらに河原町駅の乗車人数が減少している。この減少の原因は路線検索を使って利用する客が増えていったからではないかと筆者は考えている。

河地
Kawachi

裕介
Yuusuke

京都コンピュータ学院情報学科卒，京都情報大学院大学修士課程修了。情報技術修士（専門職。現在，専修学校
京都コンピュータ学院非常勤講師のほかにフリーのプ
ログラマ。

江見
Emi

圭司
Keiji

京都大学理学士，同大学院修士課程修了（化学専攻）」，同大学院博士課程修了（人間・環境学専攻），
人間・環境学博士。元金沢工業大学専任講師。

本稿では，まず RIA が持つべき特色について概観する。次
いでその開発／実行環境として，本命の HTML5 + JavaScript ，および対抗馬となる Adobe Flex，JavaFX のそれぞれの優位点／難点について考察していく。

ザに浸透している，という利点がある。

通常の Web ページへのアクセスと同じ感覚で利用できる，という利点がある。
3. 用途別の単体デスクトップアプリケーションとして RIA を提供する方法。Adobe AIR，JavaFX 等がこれに当たる。RIAの実行プログラムやコンテンツは，アプリケーションサーバ

◆２．RIA（Rich Internet Application）とはを介して個別にユーザに配布される。動作させるのに Web
ブラウザが不要という利点がある

Rich Internet Application という用語が公に用いられたのは，現時点では，方式１に当たる HTML5（+ JavaScript）によ2002 年の Macromedia 社（後に Adobe 社が買収）が提出しる RIA が，普及度や開発コスト等の点で本命と言える。しかし，た技術レポート [2] が最初と言われている。RIA の登場以前，

Adobe 社（Flash / AIR）や Oracle 社（Java）といった有力企業も，Web の利用者は，Web サーバが画面１ページ分の HTML デー

方式２または３による RIA の開発／実行環境を自社製品としタを生成・送信し，Web ブラウザがそれをレイアウトして表て今後も提供していくことを表明しており，これらを対抗馬と示する，という単純なサーバ／クライアントモデルのもとで，する覇権争いは当面続くと予想される [5]。

コンテンツを閲覧していた。しかし，エンドユーザ向け PC の性能が上がるにつれ，クライアント側アプリケーションに対して，より対話性や表現力の高いユーザインタフェース --- 例えば Web コンテンツの動的な書き換えや更新時の視覚効果など

28

29

◆

３．本命：HTML5（+ JavaScript）
HTML5 は，Web ページ記述用言語である HTML の第５版

また近年は，DOM API の上位に当たる様々な JavaScript ラ

アプリケーションの配布は，Applet と同じく Web ブラウザ

イブラリがオープンソースで提供されており，RIA の開発効率に埋め込む場合と，ダウンロードして単体のデスクトップアの向上に貢献している。中でも jQuery[8] は，

プリケーションとしてインストールする場合とに対応してい[6] であり，現在 Web 技術の標準化団体である W3C において，●基本的な DOM 操作からイベント処理，Ajax，視覚効果まで，る。後者は，Java Web Start（JWS）と呼ばれる独自の配布方

2014 年の正式勧告を目指して仕様の策定が進められている。

RIA に必要な機能を幅広くカバーする。更にプラグイン方式

式 [13] によって，バージョンや付随ライブラリなどの管理もでの機能拡張も容易である。

自動的に行なうのが一般的である。

HTML5 では，マークアップ用のタグ仕様の改訂に加え，
Web コンテンツを各種プログラムから操作するための新たな●操作対象とする DOM 要素の集合を CSS のセレクタ式で選別

API 仕様を多く含んでいる。即ち，RIA の構築に必要なオブジ
ェクトやメソッド等を Web ページ内で直接記述できるようにできるため，従来の Web 技術との親和性が高い。
●ライブラリのサイズ自体が小さく（約 30KB），ブラウザへ

して，RIA を Web ブラウザのネイティブアプリケーションとして動作させようという方向性が見て取れる。

などの特徴があり，開発者の人気を集めている。
◆

４．対抗馬 (1)：Adobe Flex（Flash / AIR）

オブジェクト指向の API（この仕様も W3C が標準化している）
が実装されている [7]。HTML5 の新しい API 仕様では，このAdobe Flex[9] は，Adobe（前 Macromedia）Flash から派生

DOM API を拡張する形で提供されるものと，DOM 要素ではな

した RIA 開発基盤である。Flash は，対話的なアニメーション

くクライアント側 OS の機能（ファイルシステムやネットワー

やゲームを提供するマルチメディアツールとして広く認知されク等）との橋渡しを担うものとが新たに加わっている。

ている。Flex は，その対話的なユーザインタフェースの構成

例えば，HTML5 で導入される canvas タグ（図形の描画領域）
は，それ自体で何らかの図形を表すものではなく，canvas の

図表 2 Adobe Flex の MXML と ActionScriptによる GUI 定義の例（Adobe 提供）の負荷が少ない。

近年の Web ブラウザでは，表示中の HTML 要素を動的に操作するために，DOM（Document Object Model）と呼ばれるいずれの場合も，Adobe Flex と同じく，任意のサーバとの要素やバックエンドの通信部分等を ActionScript 言語のクラス
ライブラリとして再構築したものと位置づけられる。

通信，ローカルファイルシステムや組込みデータベースの利用などが可能である。

ま た，Eclipse ベ ー ス の 統 合 開 発 環 境 で あ る Flash
Builder[11] も提供されており，Flash または AIR どちらのタイ●開発環境：JavaFX を直接サポートする統合開発環境は，現プのアプリケーション開発にも使える。対話的な画面エディタ

在 Oracle が提供する NetBeans IDE 7.1 のみであるが，純粋にとデバッガ，他のグラフィックツール（Adobe Photoshop 等）

Java プログラムとして作成するなら，Eclipse など他の Java 向との連携，プロジェクト管理などの機能が提供されている。有け開発ツールも用いることができる。

償ツールであるが，学生・教職員は無償で使用できる。

JavaFX の当初の大きな特徴として，JavaFX Script と呼ばれる独自のスクリプト言語で画面設計の大半を宣言的に記述でき◆

５．対抗馬 (2)：JavaFXる，という点があった。しかし，最新版では事実上撤回され，
Adobe Flex / AIR と同様の XML タグ（FXML）と CSS を併用

JavaFX[12] は，Sun Microsystems 社（ 現 Oracle 社 ） がする画面設計のアプローチが採用されている [14]。

2007 年頃から推進している Java の RIA 構築用クラスライブ

イベント処理については，通常の Java 言語でのメソッド記

DOM 要素から取得した描画コンテキストに対して，描線の指Flex からは，従来の Web ページ埋め込み型の Flash アプリ

ラリである。Java は，Web ブラウザ内に埋め込む GUI アプリ

述／実行だけでなく，JavaScript や Ruby など Java 仮想マシ

定や塗りつぶし等を指示するメソッドを動的に呼び出して描画

ケーションだけでなく，Adobe AIR[10] と呼ばれる単体のデス

ケーションである Applet を古くから提供しており，その意味

ン上で解釈できるスクリプト言語でも記述できるよう API がを行なう（図表 1）。同様に video（動画）や audio（音声）のクトップアプリケーションも作成することができる。即ち，共では RIA プラットフォームの先駆と言える。

拡張されている。

タグで挿入されたメディアの再生／停止等も，DOM 要素への通の開発基盤から，ターゲットに応じて異なるタイプの RIA

メソッド呼び出しを介して行なう。一方，ブラウザ側で連想配を作り分けられるという特徴がある。

列形式の任意データを保存／取得する API である localStorage

Applet と比較すると，JavaFX は，RIA で特に重要な視覚表
現の実装が強化され，GPU アクセラレーションを活用するグ

◆

６．考察

ラフィックエンジン（Prism）や，アニメーション・エフェク

オブジェクトは，対応する HTML 要素は無く，ローカルファ●実行環境：Flex ベースのアプリケーションは，Flash / AIR

ト等を制御するクラスが追加されている（図表 3）。また画面

以上，３つの RIA 構築基盤の現状を概観してきたが，それ

イルシステムとのインタフェースを提供する存在である。

とも SWF 形式のバイナリファイルにコンパイルされ，クライ設計やイベント処理も手軽に記述できるように進化している。

らが開発側（プログラマ／デザイナ）と利用者側とでどのよう

アント PC で実行される。

な優位点／難点を持っているかを考察する。

Flash アプリケーションは，<object> タグ等で Web ページ
内に埋め込まれ，Web ブラウザのプラグイン（Flash Player）◆

6.1

プログラマの立場から：を介して動作する。一方，AIR アプリケーションは，インスト

まず，開発ツールを揃える金銭的コストについては，有ーラ形式で利用者に配布され，単体で動作する（即ち実行時に償の Flash Builder を事実上使わざるを得ない Adobe Flex がWeb ブラウザは不要）。ただし，AIR 専用の実行時ライブラリ

不 利 で あ ろ う。 ま た， 学 習 コ ス ト の 点 で も，Adobe Flex の（AIR Runtime）を事前にインストールしておく必要がある。

ActionScript は，開発経験や既存コードの蓄積が豊富な Java

いずれも実行時に PC のファイルシステムやデバイスを利用

や JavaScript に比べて若干不利であろう。ただ，ActionScript

したり，任意のサーバと通信したりすることが可能である。

が Ver.3.0 で完全なオブジェクト指向プログラミング（OOP）に対応したことで，今後 Java などで OOP の経験を持つプログ●開発環境：Flex の ActionScript クラスライブラリやコンパイ

ラマを取り込める可能性はある。

ラ等（SDK）は，オープンソース化されており無償で入手でき

開発効率，特にデバッグにおいては，コンパイラで厳密なデる。SDK の最新版は ver.4.6 である。
図表１ canvas API を用いた図形描画の例（田渕が作成）

30

Flash / AIR とも，ActionScript 言語のみでアプリケーション

ータ型チェックのできる JavaFX や Adobe Flex が優位で，イ
図表３：JavaFX の XYChart クラスによるグラフ表示の例（Oracle 提供）を作成できるが，
画面設計（部品配置，
視覚効果，
画面遷移など）ンタプリタ型言語の JavaScript は必然的に不利となる。
クロスプラットフォーム対応という点では，現時点では，これらの API は，特定のプログラム言語に依存する仕様では専用の XML タグ（MXML）や CSS で宣言的に定義し，イベ●実行環境：JavaFX は，通常の Java アプリケーションと同じ

スマートフォンを含む主要な OS・デバイスに対応しているはないが，Web ブラウザ上では JavaScript のプログラムからント処理の手続き部分のみを ActionScript で記述，という作成

バイトコードにコンパイルされ，専用の実行時ライブラリ上でAdobe Flex が最も優位である（ただし Adobe は，スマートフ

実行するのが現実的である。JavaScript は，2000 年頃までは方法も可能で，こちらの方が開発効率が良い（図表 2）。

動作する。ライブラリの最新版は Ver.2.0 で，現在 Windowsォン向け Flash Player の開発中止を表明しており，今後はスマ

ブラウザ間の互換性に問題が多かったが，その後標準化が進み，版のみが提供されている（SDK も同じ）。2013 年リリース予

ートフォン向けには AIR のみが選択肢となる [15]）。HTML5 は，

特に Ajax（非同期通信による DOM 要素の動的更新）の技術が定の Java SE 8 では，他の OS の Java 実行環境（JRE）にも同

W3C が正式な仕様勧告を出す 2014 年までは，各 Web ブラウ

注目されたことで，RIA の記述言語として定着していった。

包される予定である。

ザベンダが個別に実装を進めており，ブラウザ間で互換性の31

◆３．本命：HTML5（+ JavaScript）
HTML5 は，Web ページ記述用言語である HTML の第５版

また近年は，DOM API の上位に当たる様々な JavaScript ラ

アプリケーションの配布は，Applet と同じく Web ブラウザ

イブラリがオープンソースで提供されており，RIA の開発効率に埋め込む場合と，ダウンロードして単体のデスクトップアの向上に貢献している。中でも jQuery[8] は，

プリケーションとしてインストールする場合とに対応してい[6] であり，現在 Web 技術の標準化団体である W3C において，●基本的な DOM 操作からイベント処理，Ajax，視覚効果まで，る。後者は，Java Web Start（JWS）と呼ばれる独自の配布方

2014 年の正式勧告を目指して仕様の策定が進められている。

RIA に必要な機能を幅広くカバーする。更にプラグイン方式

式 [13] によって，バージョンや付随ライブラリなどの管理もでの機能拡張も容易である。

自動的に行なうのが一般的である。

HTML5 では，マークアップ用のタグ仕様の改訂に加え，
Web コンテンツを各種プログラムから操作するための新たな●操作対象とする DOM 要素の集合を CSS のセレクタ式で選別

API 仕様を多く含んでいる。即ち，RIA の構築に必要なオブジ
ェクトやメソッド等を Web ページ内で直接記述できるようにできるため，従来の Web 技術との親和性が高い。
●ライブラリのサイズ自体が小さく（約 30KB），ブラウザへ

して，RIA を Web ブラウザのネイティブアプリケーションとして動作させようという方向性が見て取れる。

などの特徴があり，開発者の人気を集めている。
◆

４．対抗馬 (1)：Adobe Flex（Flash / AIR）

オブジェクト指向の API（この仕様も W3C が標準化している）
が実装されている [7]。HTML5 の新しい API 仕様では，このAdobe Flex[9] は，Adobe（前 Macromedia）Flash から派生

DOM API を拡張する形で提供されるものと，DOM 要素ではな

した RIA 開発基盤である。Flash は，対話的なアニメーション

くクライアント側 OS の機能（ファイルシステムやネットワー

やゲームを提供するマルチメディアツールとして広く認知されク等）との橋渡しを担うものとが新たに加わっている。

ている。Flex は，その対話的なユーザインタフェースの構成

例えば，HTML5 で導入される canvas タグ（図形の描画領域）
は，それ自体で何らかの図形を表すものではなく，canvas の

図表 2 Adobe Flex の MXML と ActionScriptによる GUI 定義の例（Adobe 提供）の負荷が少ない。

近年の Web ブラウザでは，表示中の HTML 要素を動的に操作するために，DOM（Document Object Model）と呼ばれるいずれの場合も，Adobe Flex と同じく，任意のサーバとの要素やバックエンドの通信部分等を ActionScript 言語のクラス
ライブラリとして再構築したものと位置づけられる。

通信，ローカルファイルシステムや組込みデータベースの利用などが可能である。

ま た，Eclipse ベ ー ス の 統 合 開 発 環 境 で あ る Flash
Builder[11] も提供されており，Flash または AIR どちらのタイ●開発環境：JavaFX を直接サポートする統合開発環境は，現プのアプリケーション開発にも使える。対話的な画面エディタ

在 Oracle が提供する NetBeans IDE 7.1 のみであるが，純粋にとデバッガ，他のグラフィックツール（Adobe Photoshop 等）

Java プログラムとして作成するなら，Eclipse など他の Java 向との連携，プロジェクト管理などの機能が提供されている。有け開発ツールも用いることができる。

償ツールであるが，学生・教職員は無償で使用できる。

JavaFX の当初の大きな特徴として，JavaFX Script と呼ばれる独自のスクリプト言語で画面設計の大半を宣言的に記述でき◆

５．対抗馬 (2)：JavaFXる，という点があった。しかし，最新版では事実上撤回され，
Adobe Flex / AIR と同様の XML タグ（FXML）と CSS を併用

JavaFX[12] は，Sun Microsystems 社（ 現 Oracle 社 ） がする画面設計のアプローチが採用されている [14]。

2007 年頃から推進している Java の RIA 構築用クラスライブ

イベント処理については，通常の Java 言語でのメソッド記

DOM 要素から取得した描画コンテキストに対して，描線の指Flex からは，従来の Web ページ埋め込み型の Flash アプリ

ラリである。Java は，Web ブラウザ内に埋め込む GUI アプリ

述／実行だけでなく，JavaScript や Ruby など Java 仮想マシ

定や塗りつぶし等を指示するメソッドを動的に呼び出して描画

ケーションだけでなく，Adobe AIR[10] と呼ばれる単体のデス

ケーションである Applet を古くから提供しており，その意味

ン上で解釈できるスクリプト言語でも記述できるよう API がを行なう（図表 1）。同様に video（動画）や audio（音声）のクトップアプリケーションも作成することができる。即ち，共では RIA プラットフォームの先駆と言える。

拡張されている。

タグで挿入されたメディアの再生／停止等も，DOM 要素への通の開発基盤から，ターゲットに応じて異なるタイプの RIA

メソッド呼び出しを介して行なう。一方，ブラウザ側で連想配を作り分けられるという特徴がある。

列形式の任意データを保存／取得する API である localStorage

Applet と比較すると，JavaFX は，RIA で特に重要な視覚表
現の実装が強化され，GPU アクセラレーションを活用するグ

◆

６．考察

ラフィックエンジン（Prism）や，アニメーション・エフェク

オブジェクトは，対応する HTML 要素は無く，ローカルファ●実行環境：Flex ベースのアプリケーションは，Flash / AIR

ト等を制御するクラスが追加されている（図表 3）。また画面

以上，３つの RIA 構築基盤の現状を概観してきたが，それ

イルシステムとのインタフェースを提供する存在である。

とも SWF 形式のバイナリファイルにコンパイルされ，クライ設計やイベント処理も手軽に記述できるように進化している。

らが開発側（プログラマ／デザイナ）と利用者側とでどのよう

アント PC で実行される。

な優位点／難点を持っているかを考察する。

Flash アプリケーションは，<object> タグ等で Web ページ
内に埋め込まれ，Web ブラウザのプラグイン（Flash Player）◆

6.1

プログラマの立場から：を介して動作する。一方，AIR アプリケーションは，インスト

まず，開発ツールを揃える金銭的コストについては，有ーラ形式で利用者に配布され，単体で動作する（即ち実行時に償の Flash Builder を事実上使わざるを得ない Adobe Flex がWeb ブラウザは不要）。ただし，AIR 専用の実行時ライブラリ

不 利 で あ ろ う。 ま た， 学 習 コ ス ト の 点 で も，Adobe Flex の（AIR Runtime）を事前にインストールしておく必要がある。

ActionScript は，開発経験や既存コードの蓄積が豊富な Java

いずれも実行時に PC のファイルシステムやデバイスを利用

や JavaScript に比べて若干不利であろう。ただ，ActionScript

したり，任意のサーバと通信したりすることが可能である。

が Ver.3.0 で完全なオブジェクト指向プログラミング（OOP）に対応したことで，今後 Java などで OOP の経験を持つプログ●開発環境：Flex の ActionScript クラスライブラリやコンパイ

ラマを取り込める可能性はある。

ラ等（SDK）は，オープンソース化されており無償で入手でき

開発効率，特にデバッグにおいては，コンパイラで厳密なデる。SDK の最新版は ver.4.6 である。
図表１ canvas API を用いた図形描画の例（田渕が作成）

30

Flash / AIR とも，ActionScript 言語のみでアプリケーション

ータ型チェックのできる JavaFX や Adobe Flex が優位で，イ
図表３：JavaFX の XYChart クラスによるグラフ表示の例（Oracle 提供）を作成できるが，
画面設計（部品配置，
視覚効果，
画面遷移など）ンタプリタ型言語の JavaScript は必然的に不利となる。
クロスプラットフォーム対応という点では，現時点では，これらの API は，特定のプログラム言語に依存する仕様では専用の XML タグ（MXML）や CSS で宣言的に定義し，イベ●実行環境：JavaFX は，通常の Java アプリケーションと同じ

スマートフォンを含む主要な OS・デバイスに対応しているはないが，Web ブラウザ上では JavaScript のプログラムからント処理の手続き部分のみを ActionScript で記述，という作成

バイトコードにコンパイルされ，専用の実行時ライブラリ上でAdobe Flex が最も優位である（ただし Adobe は，スマートフ

実行するのが現実的である。JavaScript は，2000 年頃までは方法も可能で，こちらの方が開発効率が良い（図表 2）。

動作する。ライブラリの最新版は Ver.2.0 で，現在 Windowsォン向け Flash Player の開発中止を表明しており，今後はスマ

ブラウザ間の互換性に問題が多かったが，その後標準化が進み，版のみが提供されている（SDK も同じ）。2013 年リリース予

ートフォン向けには AIR のみが選択肢となる [15]）。HTML5 は，

特に Ajax（非同期通信による DOM 要素の動的更新）の技術が定の Java SE 8 では，他の OS の Java 実行環境（JRE）にも同

W3C が正式な仕様勧告を出す 2014 年までは，各 Web ブラウ

注目されたことで，RIA の記述言語として定着していった。

包される予定である。

ザベンダが個別に実装を進めており，ブラウザ間で互換性の31あるコードかどうか悩む状況が当面続くであろう。JavaFX も，【参考文献（引用順）】

開発／実行ライブラリ自体が Windows 以外の OS やモバイル[1]. Tim Berners-Lee, "The WorldWideWeb browser",http://www.w3.org/People/Berners-Lee/WorldWideWeb.html

環境への対応で出遅れている。

電子黒板及びタブレット端末を用いた教育用システムの提案
京都情報大学院大学

奥田 茂人・河地 裕介・江見 圭司[2]. Jeremy Allaire,"Macromedia flash MX- A next-generation rich client",◆

6.2 デザイナの立場から：
RIA では GUI の視覚デザインが重要であり，グラフィックデ

ザイナとプログラマとの共同制作が必要となるケースが多い。
その点では，デザイナ向けの使い勝手の良いツールを提供ある
いは連携できていない JavaFX はかなり不利である。

http://download.macromedia.com/pub/flash/whitepapers/
richclient.pdf, 2002
[3]. 三井英樹, "Rich Internet Application (RIA) の時代",◆

http://itpro.nikkeibp.co.jp/article/COLUMN/20060309/232091/,2006[4]. 日経NETWORK, "RIAとは", 		

1. はじめにして，これは授業とは直接関係ないのだが，教材を一度作ってデータ保存しておけば次年度からも同じように使える上に，そ◆1.1. 教育用システムの電子化の修正も楽にできるという利点がある。

Adobe Flex を Flash Builder 上で利用する場合，同じ Adobe

http://itpro.nikkeibp.co.jp/article/Keyword/20071113/287037/, 2007

社のグラフィックツールの成果物をデザイン要素としてスム[5]. 吉田育代 ,"アドビ，MS，
サンの「R I A 開 発にお ける優 位 点」とは？",

近年授業で組込み技術を用いた電子黒板（以下，電子黒板）の授業で使用したのは最後の 5 分だけであったのだが，児童ーズに取り込めるため，デザイナの支持を得やすい。HTML5

http://techtarget.itmedia.co.jp/tt/news/0904/03/news02.html, 2009を使用したいという学校が増えてきている。これに応えるかのの教科書は従来どおりの紙だった。この公開授業はデジタル教

は，もともと Web デザイナと JavaScript プログラマの協業が[6]. W3C,"HTML5 -- A vocabulary and associated APIs for HTML and

ように，電子黒板を発売する企業は年を追うごとに増加してお科書を活用したモデルケースということであったが，児童の所

り，教材に関する展示会でも今や電子黒板は大きな一角を占め持する教科書に関してはまだ充分に進んでいないというのが現ている。また，世間では Apple 社の iPhone や各社が発売して状である。

進んでおり，またデザイナにとっての学習コストが比較的低い
jQuery などのライブラリの普及も優位に働いている。

XHTML", http://www.w3.org/TR/html5/, 2011[7]. W3C, "Document Object Model (DOM) Technical Reports",
http://www.w3.org/DOM/DOMTR, 2004◆

6.3 ユーザの立場から：最もユーザの目を引く GUI の美しさや対話性については，

どの方式も一定の満足を得られる仕上がりになっており，その点での差別化は難しい。
実 行 環 境 の 導 入 コ ス ト の 点 で は，Web ブ ラ ウ ザ と Flash
Player の圧倒的な普及率を考えると，HTML5 と Adobe Flash
が有利である。Adobe AIR および JavaFX も実行時ライブラリは無償だが，そのインストーラのダウンロードと実行の手間が避けられない（初回限りではあるが）。
アプリケーションやコンテンツへのアクセスの容易さの点では，Web ブラウザ内で動作する HTML5，Flash，Applet 方式[8]. The jQuery Project, "jQuery : The Write Less, Do More,
JavaScript Library", http://jquery.com/[9]. Adobe Systems,

ただし，全てが電子化されていたわけではなかった。45 分

いる Android 系の携帯端末機などが普及しつつあり，携帯電話同様に街中で見かけることも珍しくなくなった。最近ではますます拡大する勢いを見せている。

[10]. Adobe Systems, "Adobe AIR 3",
http://www.adobe.com/jp/products/air.html[11]. Adobe Systems, "Adobe Flash Builder 4.6 Premium",		
http://www.adobe.com/jp/products/flash-builder.html

これから提案するシステムの構成は，情報処理技術者試験のの電子化に対応しなければならない。今回は，電子化した教材

システムアーキテクト試験の問題 [2] を参考にして作ってみた。

（以下，コンテンツ）を使用する，電子黒板及びタブレット端

まず，各教室に電子黒板及び無線 LAN のアクセスポイントを末を用いた教育用システム（以下，本システム）を新たに提案設置する。校内にサーバ及び管理 PC を設置し，各教室の電子する。

黒板及び無線 LAN のアクセスポイントと LAN で接続する。次に，タブレット端末（これはスマートフォンで代替可能）は無◆

1.2. 大阪教育大学附属池田小学校におけるモデルケース[13]. Sun Microsystems, "Java Web Start 1.5.0 開発者ガイド", 		

始められるのに対し，AIR と JWS 方式の JavaFX は，一旦アプ

http://www.adobe.com/jp/products/flash-builder.html

リケーションをダウンロードしてインストールする手間がかか[14]. 櫻庭祐一, "JavaFX 2.0 -- Javaによるリッチクライアント基盤",

去る 2011 年 6 月に，大阪で「デジタル教科書を活用した

http://www.infoq.com/jp/articles/javafx20_01（前編）,

小学校算数授業」[1] という公開授業が行われた。これは，大同/ javafx20_01（後編）,2011

阪教育大学附属池田小学校の 4 年生の児童に対して，原田朋

反面，AIR と JWS 方式の JavaFX は，単体アプリケーション
だけに，手軽な起動（アイコンのダブルクリック）やメモリの[15]. Mike Chambers, "モバイルブラウザー向けFlash Player,

続する。最後に，座席位置情報を記録した無線通信方式の IC
ステムの構成図を図 1．に示しておく。

哉教諭が電子黒板を用いて授業をしたものである。

消費量の少なさに利点がある。これは特にハードウェア資源に限りのあるスマートフォンでの動作では有利であろう。

http://www.adobe.com/jp/aboutadobe/pressroom/

板で，その両脇には保護者や報道関係者のためにプロジェクタ

pressreleases/20111117_adobe_flash.html, 2011が設置されていた。授業は原田教諭が電子黒板により進めてい７．終わりに線 LAN のアクセスポイント経由で，サーバ及び電子黒板と接タグ（以下，RF タグ）を全教室の全ての机に設置する。本シFlash Platform, Flashの今後について",◆2.1. 想定した電子黒板

従来の授業では，プロジェクタで教材をホワイトボードに投の JavaFX が Web サーバ上の URL へのアクセスだけで利用しる（AIR の場合はマシンの管理者権限も必要）。

◆影していた。これに対して我々は，今後本格的に到来する教育[12]. Oracle, "JavaFX | Rich Internet Applications Development",
http://javafx.com

2. システム構成と各機能の仕様の提案

Microsoft 社の Windows Phone も発売され，携帯端末市場は"無償のオープンソースフレームワーク| Adobe Flex",
http://www.adobe.com/jp/products/flex.html◆

使用された教材は，黒板についてはタッチパネル式の電子黒くのだが，電子黒板に表示された電子教科書に対して指でなぞってマーキングすることで印象づけようとする他，児童にも積

今回は，RIA のクライアントアプリケーションとしての開発／実行環境に焦点を当てたが，RIA は本来，データベースや業
務ロジックなどを操作するサーバアプリケーションと連携した
形で真価を発揮するものである。特に今後，クラウド・コンピ

32

田渕Tabuchi篤Atsushi

京都大学・工学修士，元 NEC 研究員

極的に発言させることで授業に引き込もうとするなど，様々な手段が用いられていた。
これらの中で，本システムに関連する部分に絞って特徴を以下に述べる。

ューティングが普及するにつれ，より快適なユーザ体験をクラ

まず，黒板を消すことがすぐにできる，つまり初期化がすぐ

イアント側にもたらす RIA の役割は重要になるであろう。開できることが挙げられる。従来の黒板では書き込んだ後に一旦発者・利用者とも，サーバ側とクライアント側との機能分担や，消してから再度書く必要がある。しかし，電子黒板ではボタン

本システムにおける電子黒板の機能及び仕様は，次のとおり

開発効率と利便性とのバランスが最適化されるよう，RIA 構築

一つで書き込んだ全てを消すことができるので，テンポ良く授である。まず，サーバからダウンロードしたコンテンツ及び外基盤を選択していく必要がある。今後もその動向を見守ってい業ができる。また，指でなぞった部分が線となって表示される部接続器を介して，印刷物から読み取ったデータなどの表示及きたい。

というのは，単純に見た目のインパクトがあるので受講生（こび音声出力が行える。コンテンツを電子黒板内のメモリに保持の場合は児童）の注目を引きつけやすいという面もあった。そできる。ディスプレイの前面に設けられたタッチパネルを用い

図 1．本システムの構成

33