You have an old version of Adobe's Flash Player or JavaScript is turned off. Get the latest Flash player here.

Complain

Please select the category that most closely reflects your concern about thepresentation, so that we can review it and determine whether it violates our Terms of Use or isn't appropriate for all viewers.

Submit

Complain

Download

Embed this comment into your blog:

Copy

Comment URL:

Copy

No comments posted yet

1-10 of 34

1-10 of 34

Presentation Notes

Slide 2	2008年2月25日Adobe社がFLEX３を公開し、そして同じく2008年の5月14日Google社が Google Maps API for Flashを公開して、 Flash技術を使ったより高機能な地図掲示板を作る環境が整ったことが挙げられます. ではこれからこの二つのツールが公開されるに至ったこれまでのIT業界の流れ見ていきますーーーーーーーーーーーーーーーーーーーーーーーーーー
Slide 3	本研究の目的はFlash技術の高い表現力と処理能力を活かした、地図とマルチメディア配信を連動させた高機能な情報共有のためのWebアプリケーションを作ることです。その研究の背景として
Slide 4	まずFlexとは何かというとFlashベースのアプリケーションを作成するフレームワークです。そしてFlexアプリケーションの開発ツールとして現在Adobe社よりFlex SDKとFlex Builderが提供されています。 FlexSDKはアドビ社より無償で提供される開発キットでテキストエディタのみで開発が行えます。 FlexbuilderはJava統合開発環境であるエクリプスをベースにした統合開発環境で、こちらはアドビ社より有償の提供となります。コード補完機能を持つソースエディタ、GUIデザイナーやデバッガを含み、大変効率的に開発作業を行うことができます。本研究ではこのFlex Builderを使って開発を行います。またFlexアプリケーション本体はSWF形式のファイルで、ブラウザにプラグインされたFlash Playerというプログラムで実行します。それでは次にFlexのプログラミング言語について解説していきます。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Slide 5	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は構造化データを記述するための言語で、「制御構造」と呼ばれる、処理の流れを制御するプログラミング要素を持たないことからも必然的なことといえます。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Slide 6	Flexアプリケーションの開発するためにはまず、MXMLとActionAcriptの二つのプログラミング言語を使ってソースファイルを完成させます。そして次にプログラムソースの文法をチェックして、FlashPlayerで実行できる形式であるＳＷＦ形式のファイルに変換するために、コンパイルという処理を行います。
Slide 8	次に開発者は、コンパイルにより生成されたSWF形式のファイルをエンドユーザーがそのファイルをリクエストできるサーバーに置きます。＜＜サーバー設置まで＞＞そしてエンドーユーザーがインターネットを通してリクエストをしてブラウザーに SWFファイルがダウンロードされます。＜＜カスタマーDLまで＞＞ PHPやコールドフュージョン、ASP.NET、JSPアプリケーションと違い、FLEXアプリケーションはサーバー上ではなくクライアント側で動作します。＜＜次画面へ＞＞
Slide 11	FLEXアプリケーションはPHPやColdFusion,ASP.NET,Java Servarなどのサーバーサイドのテクノロジーと連携させることによってよりリッチインターネットアプリケーションとしての力を発揮します１．まずフレックスアプリケーションがアプリケーションサーバーにデータをリクエストさせると２．アプリケーションサーバーはデータベースにデータをリクエストします。３．そしてデータベースはサーバープログラムにデータを返して、４．サーバープログラムはフレックスアプリケーションにそのデータを返します。このようにRIAであるFLEXアプリケーションではエンドユーザーはシームレスに情報をアップデートすることができます。（Seamless継ぎ目のない⇒いちいちページ全体の情報をリクエストしてページ全体を毎回切り替える必要がない。 ⇒必要な情報だけを取得して必要な部分のみ切り替わる。最小限の手間でユーザの利便性が向上。）
Slide 15	そして本研究ではこのFlexを使い、Google Maps API for Flashを利用した地図と動画や画像を連携させた掲示板を開発します。ではその製作中のアプリケーションのデモを見てもらいます。どんな機能があるか・特徴＋今までのAjaxVerとの違い・シームレス・デザイン性・動作が速い
Slide 16	現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 17	のタイトル・地理情報・メディアタイプ（地図のみ・画像・動画）・メディアファイル等のデータをdata.xmlから取得。その情報をもとに地図やメディア、掲示板等に命令を出し表示を変更する。 ①最初にアプリケーションのコアとなるMXMLファイルを実行し、全体のレイアウトを表示。そして各ノードの情報をまとめたXMLファイルをサーバーより取得し、それぞれのタイトルをカテゴリーに表示。 ②カテゴリー・ツリーのノード選択時、そのノードの情報を読み込み、右側の地図・メディア・掲示板の表示を変更する関数を実行。現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 18	現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 19	①地図のみ・動画・画像の各ページに、それぞれGoogle Maps API for Flashのコンポーネントとそれを実行するASファイルを読み込んで地図を表示。 ②ノード選択時に、表示するメディアのページに切り替わり、データを読み込んで地図上にマーカー・ポップアップウィンドウを、地図の右側にメディアを表示。地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 20	現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 21	①ノード選択時にそのノードで指定されたIDをもとにHTTP通信でサーバーにアクセスしPHPプログラムを動かし、過去ログファイルをクライアントに送信。 ②掲示板への書き込みは、HTTP通信で書き込んだ情報をサーバーにあるPHPプログラムに送信し、過去ログファイルを変更、クライアントに変更後の内容を送信を行う。現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 22	現段階で本研究において加えた新機能としてまず地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え。そしてツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図とメディアを表示・切り替え。地図上のマーカーとポップアップの切り替えです。この地図上のマーカーとポップアップの表示と切り替えはコンテンツの構造上切り替えをしたとき前に選択したものが消えないで残ったままであったのをそれを残らず消すという操作をするプログラムを作りました。
Slide 23	今後の予定としてまず、現在ＦＬＥＸアプリケーションの方のインターフェイスや各表示方法、掲示板や画像・動画のアップロード機能等々の要素はほとんど揃ってますので、これからPHPによるサーバーサイドのデータ処理機能を作成しそれらの要素の連携を完成させていきます。（次に画像・動画のファイルをアップロードをする機能登録フォームはFlashPlayer上ではできてます。）あとはビデオスキン・画像や動画の全画面表示等の細かな機能の追加していきより完成度を上げていくつもりです。

Presentation Transcript

Slide 1	Flexを用いたマルチメディア地図掲示板の開発豊木研究室　T04JJ046　鍋島　利康
Slide 2	研究背景 2005年にGoogle Maps APIが公開された頃から地図を用いた情報共有サービスが急増している。所属研究室において開発された同APIを用いた地図掲示板システムは多くの利用者を獲得している。 2008年2月にAdobe社がFlashベースのRIA開発環境であるFLEX３を公開。 2008年の5月にGoogle社がGoogle Maps API for Flashを公開。 ⇒Flash技術を使ったより高機能な地図掲示板を作る環境が整った。
Slide 3	研究目的　　 Flash技術の高い表現力と処理能力を活かした、地図とマルチメディア配信を連動させた高機能な情報共有のためのWebアプリケーションを作る。
Slide 4	Flexアプリケーションの概要 FlexとはFlashベースのアプリケーションを作成するフレームワーク。 Flexアプリケーションの開発ツールとしてAdobe社よりFlex SDKとFlex Builderが提供されている。 ⇒本研究ではFlex Builderを使う。 Flexアプリケーション本体はSWF形式のファイルでブラウザにプラグインされたFlash Playerというプログラムで実行。
Slide 5	Flexのプログラミング言語 MXMLとActionScript3の二つを使う。　・MXMLはXMLマークアップ言語のひとつ。　　Flexアプリケーションのユーザーインターフェイス要素を配置したり、レイアウトするために使用。　・ActionScript3はJavaScriptと同じECMAScript(ECMA-262)言語草案をベースとしているオブジェクト指向対応言語。機能的にはJava言語と同じレベル。
Slide 6	Flexアプリケーションの開発
Slide 7	ソースファイルのコンパイル
Slide 8	Flexアプリケーションのシステム構成
Slide 9	Flexアプリケーションのシステム構成 Request
Slide 10	Flexアプリケーションのシステム構成
Slide 11	Flexアプリケーションのシステム構成
Slide 12	Flexアプリケーションのシステム構成
Slide 13	Flexアプリケーションのシステム構成
Slide 14	Flexアプリケーションのシステム構成
Slide 15	マルチメディア地図掲示板の開発本研究ではGoogle Maps API for Flashを利用した地図と動画や画像を連携させた掲示板を開発する。デモへ http://cosmos.js.yamanashi.ac.jp/~toshi/map/tmap.html
Slide 16	マルチメディア地図掲示板の内部構造カテゴリー・ツリー地図＆メディア掲示板
Slide 17	マルチメディア地図掲示板の内部構造カテゴリー・ツリー ①最初にアプリケーションのコアとなるMXMLファイルを実行し、全体のレイアウトを表示。そして各ノードの情報をまとめたXMLファイルをサーバーより取得し、それぞれのタイトルをカテゴリーに表示。 ②カテゴリー・ツリーのノード選択時、そのノードの情報を読み込み、右側の地図・メディア・掲示板の表示を変更する関数を実行。
Slide 18	マルチメディア地図掲示板の内部構造カテゴリー・ツリー地図＆メディア掲示板
Slide 19	マルチメディア地図掲示板の内部構造地図＆メディア ①地図のみ・動画・画像の各ページに、それぞれGoogle Maps API for Flashのコンポーネントを実行する共通のASファイルを読み込ませ地図を表示。 ②ノード選択時に、表示するメディアのページに切り替わり、データを読み込んで地図上にマーカー・ポップアップウィンドウを、地図の右側にメディアを表示。
Slide 20	マルチメディア地図掲示板の内部構造カテゴリー・ツリー地図＆メディア掲示板
Slide 21	マルチメディア地図掲示板の内部構造掲示板　①ノード選択時にそのノードのデータで指定されたIDをもとにHTTP通信でサーバーにアクセスし、PHPプログラムを動かし過去ログファイルをクライアントに送信。　②掲示板への書き込みはHTTP通信で書き込んだ情報をサーバーにあるPHPプログラムに送信し、過去ログファイルを変更、クライアントに変更後の内容の送信を行う。
Slide 22	現段階で本研究において作成した新機能地図のみ・動画・画像を表示するそれぞれのページの表示・切り替え機能ツリーのそれぞれのノード選択時にそのノードのデータを読み込んで地図情報とメディアの変更機能地図上のマーカーとポップアップの切り替え方法
Slide 23	今後の予定 PHPによるサーバーサイドのデータ処理機能を作成する。ビデオスキン・画像や動画の全画面表示等の細かな機能の追加して完成度を上げていく。コンポーネント、Xoopsのモジュールとして公開。活用分野としては環境問題はもとより、あらゆる地理情報に関連したコンテンツで幅広く使用できるよう仕立て上げる。