2008年2月25日Adobe社がFLEX３を公開し、 そして同じく2008年の5月14日Google社が Google Maps API for Flashを公開して、 Flash技術を使ったより高機能な地図掲示板を作る環境が整ったことが挙げられます. ではこれからこの二つのツールが公開されるに至ったこれまでのIT業界の流れ見ていきます ーーーーーーーーーーーーーーーーーーーーーーーーーー

本研究の目的はFlash技術の高い表現力と処理能力を活かした、地図とマルチメディア配信を連動させた高機能な情報共有のためのWebアプリケーションを作ることです。 その研究の背景として

まずFlexとは何かというとFlashベースのアプリケーションを作成するフレームワークです。 そしてFlexアプリケーションの開発ツールとして現在Adobe社よりFlex SDKとFlex Builderが提供されています。 FlexSDKはアドビ社より無償で提供される開発キットでテキストエディタのみで開発が行えます。 FlexbuilderはJava統合開発環境であるエクリプスをベースにした統合開発環境で、こちらはアドビ社より有償の 提供となります。コード補完機能を持つソースエディタ、GUIデザイナーやデバッガを含み、大変効率的に 開発作業を行うことができます。本研究ではこのFlex Builderを使って開発を行います。 またFlexアプリケーション本体はSWF形式のファイルで、 ブラウザにプラグインされたFlash Playerというプログラムで実行します。 それでは次にFlexのプログラミング言語について解説していきます。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Flexのプログラミング言語はMXMLとActionScript3です。 MXMLはXMLマークアップ言語のひとつで、 Flexアプリケーションのユーザーインターフェイス要素を配置したり、レイアウトするために使用します。 そしてActionScripthはJabascriptと同じECMAScript(ECMA-262)言語仕様草案をベースとしてます。そのためJabascriptと似た文法要素が多くあり、経験者には取り組みやすいといえます。 またActionscriptのバージョン３から本格的なオブジェクト指向対応言語となり、JavaやC++の経験者にも非常に取り組みやすいものになりました。 Flexアプリケーションのソースは、すべてActionscriptで記述できます。Mxmlで記述したソースプログラムは、すべてFlexコンパイラによってActionscriptコードに変換されSwf形式にビルドされます。このことからMXMLはタグベースのわかりやすい記述でFlexアプリケーションを効率良く記述できることを目的として開発された言語であることがわかります。 実際には、FlexアプリケーションがすべてMXMLで記述できるわけではなく開発にあたってクラスを作成したり、イベントリスナーを定義したりといろいろな場面でActionscriptを使用しなければならない場面が出てきます。これはXMLは構造化データを記述するための言語で、「制御構造」と呼ばれる、処理の流れを制御するプログラミング要素を持たないことからも必然的なことといえます。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Flexアプリケーションの開発するためにはまず、MXMLとActionAcriptの二つのプログラミング言語を使って ソースファイルを完成させます。 そして次にプログラムソースの文法をチェックして、FlashPlayerで実行できる形式であるＳＷＦ形式のファイル に変換するために、コンパイルという処理を行います。

次に開発者は、コンパイルにより生成されたSWF形式のファイルを エンドユーザーがそのファイルをリクエストできるサーバーに置きます。 ＜＜サーバー設置まで＞＞ そしてエンドーユーザーがインターネットを通してリクエストをしてブラウザーに SWFファイルがダウンロードされます。 ＜＜カスタマーDLまで＞＞ PHPやコールドフュージョン、ASP.NET、JSPアプリケーションと違い、FLEXアプリケーションは サーバー上ではなくクライアント側で動作します。 ＜＜次画面へ＞＞

FLEXアプリケーションはPHPやColdFusion,ASP.NET,Java Servarなどのサーバーサイドのテクノロジーと連携させることに よってよりリッチインターネットアプリケーションとしての力を発揮します １．まずフレックスアプリケーションがアプリケーションサーバーにデータをリクエストさせると ２．アプリケーションサーバーはデータベースにデータをリクエストします。 ３．そしてデータベースはサーバープログラムにデータを返して、 ４．サーバープログラムはフレックスアプリケーションにそのデータを返します。 このようにRIAであるFLEXアプリケーションではエンドユーザーはシームレスに情報をアップデートすることができます。 （Seamless継ぎ目のない⇒いちいちページ全体の情報をリクエストしてページ全体を毎回切り替える必要がない。 ⇒必要な情報だけを取得して必要な部分のみ切り替わる。最小限の手間でユーザの利便性が向上。）

そして本研究ではこのFlexを使い、Google Maps API for Flashを利用した地図と動画や画像を連携させた掲示板を開発します。 ではその製作中のアプリケーションのデモを見てもらいます。 どんな機能があるか・特徴＋今までのAjaxVerとの違い ・シームレス ・デザイン性 ・動作が速い

現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

のタイトル・地理情報・メディアタイプ（地図のみ・画像・動画）・メディアファイル等のデータをdata.xmlから取得。その情報をもとに地図やメディア、掲示板等に命令を出し表示を変更する。 ①最初にアプリケーションのコアとなるMXMLファイルを実行し、全体のレイアウトを表示。そして各ノードの情報をまとめたXMLファイルをサーバーより取得し、それぞれのタイトルをカテゴリーに表示。 ②カテゴリー・ツリーのノード選択時、そのノードの情報を読み込み、右側の地図・メディア・掲示板の表示を変更する関数を実行。 現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

①地図のみ・動画・画像の各ページに、それぞれGoogle Maps API for Flashのコンポーネントとそれを実行するASファイルを読み込んで地図を表示。 ②ノード選択時に、表示するメディアのページに切り替わり、データを読み込んで地図上にマーカー・ポップアップウィンドウを、地図の右側にメディアを表示。 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

①ノード選択時にそのノードで指定されたIDをもとにHTTP通信でサーバーにアクセスしPHPプログラムを動かし、過去ログファイルをクライアントに送信。 ②掲示板への書き込みは、HTTP通信で書き込んだ情報をサーバーにあるPHPプログラムに送信し、過去ログファイルを変更、クライアントに変更後の内容を送信を行う。 現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

現段階で本研究において加えた新機能としてまず 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。 そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。 地図上のマーカーとポップアップの切り替えです。 この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。

今後の予定としてまず、 現在ＦＬＥＸアプリケーションの方のインターフェイスや各表示方法、掲示板や画像・動画のアップロード機能等々の要素はほとんど揃ってますので、これからPHPによるサーバーサイドのデータ処理機能を作成しそれらの要素の連携を完成させていきます。 （次に画像・動画のファイルをアップロードをする機能登録フォームはFlashPlayer上ではできてます。） あとはビデオスキン・画像や動画の全画面表示等の細かな機能の追加していきより完成度を上げていくつもりです。

Flexを用いたマルチメディア地図掲示板の開発 豊木研究室　T04JJ046　鍋島　利康

研究背景 2005年にGoogle Maps APIが公開された頃から地図を用いた情報共有サービスが急増している。 所属研究室において開発された同APIを用いた地図掲示板システムは多くの利用者を獲得している。 2008年2月にAdobe社がFlashベースのRIA開発環境であるFLEX３を公開。 2008年の5月にGoogle社がGoogle Maps API for Flashを公開。 ⇒Flash技術を使ったより高機能な地図掲示板を 作る環境が整った。

研究目的 　 　 Flash技術の高い表現力と処理能力を活かした、地図とマルチメディア配信を連動させた高機能な情報共有のためのWebアプリケーションを作る。

Flexアプリケーションの概要 FlexとはFlashベースのアプリケーションを作成するフレームワーク。 Flexアプリケーションの開発ツールとしてAdobe社よりFlex SDKとFlex Builderが提供されている。 ⇒本研究ではFlex Builderを使う。 Flexアプリケーション本体はSWF形式のファイルでブラウザにプラグインされたFlash Playerというプログラムで実行。

Flexのプログラミング言語 MXMLとActionScript3の二つを使う。 　・MXMLはXMLマークアップ言語のひとつ。 　　Flexアプリケーションのユーザーインターフェイス要素を配置したり、レイアウトするために使用。 　・ActionScript3はJavaScriptと同じECMAScript(ECMA-262)言語草案をベースとしているオブジェクト指向対応言語。 機能的にはJava言語と同じレベル。

Flexアプリケーションの開発

ソースファイルのコンパイル

Flexアプリケーションのシステム構成

Flexアプリケーションのシステム構成 Request

Flexアプリケーションのシステム構成

Flexアプリケーションのシステム構成

Flexアプリケーションのシステム構成

Flexアプリケーションのシステム構成

Flexアプリケーションのシステム構成

マルチメディア地図掲示板の開発 本研究ではGoogle Maps API for Flashを利用した地図と動画や画像を連携させた掲示板を開発する。 デモへ http://cosmos.js.yamanashi.ac.jp/~toshi/map/tmap.html

マルチメディア地図掲示板の内部構造 カテゴリー・ツリー 地図＆メディア 掲示板

マルチメディア地図掲示板の内部構造 カテゴリー・ツリー ①最初にアプリケーションのコアとなるMXMLファイルを実行し、全体のレイアウトを表示。そして各ノードの情報をまとめたXMLファイルをサーバーより取得し、それぞれのタイトルをカテゴリーに表示。 ②カテゴリー・ツリーのノード選択時、そのノードの情報を読み込み、右側の地図・メディア・掲示板の表示を変更する関数を実行。

マルチメディア地図掲示板の内部構造 カテゴリー・ツリー 地図＆メディア 掲示板

マルチメディア地図掲示板の内部構造 地図＆メディア ①地図のみ・動画・画像の各ページに、それぞれGoogle Maps API for Flashのコンポーネントを実行する共通のASファイルを読み込ませ地図を表示。 ②ノード選択時に、表示するメディアのページに切り替わり、データを読み込んで地図上にマーカー・ポップアップウィンドウを、地図の右側にメディアを表示。

マルチメディア地図掲示板の内部構造 カテゴリー・ツリー 地図＆メディア 掲示板

マルチメディア地図掲示板の内部構造 掲示板 　①ノード選択時にそのノードのデータで指定されたIDをもとにHTTP通信でサーバーにアクセスし、PHPプログラムを動かし過去ログファイルをクライアントに送信。 　②掲示板への書き込みはHTTP通信で書き込んだ情報をサーバーにあるPHPプログラムに送信し、過去ログファイルを変更、クライアントに変更後の内容の送信を行う。 　

現段階で本研究において作成した新機能 地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え機能 ツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図情報とメディアの変更機能 地図上のマーカーとポップアップの切り替え方法

今後の予定 PHPによるサーバーサイドのデータ処理機能を 作成する。 ビデオスキン・画像や動画の全画面表示等の細かな機能の追加して完成度を上げていく。 コンポーネント、Xoopsのモジュールとして公開。 活用分野としては環境問題はもとより、あらゆる 地理情報に関連したコンテンツで幅広く使用できるよう 仕立て上げる。