%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
%	tani_resume.syt 使用例
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%#! platex resume.tex
\documentclass[a4paper]{jarticle}

\usepackage{tani_resume_last}

\alignbeforeskip -5mm
\alignafterskip -5mm
\eqnarraybeforeskip -5mm
\eqnarrayafterskip -5mm
% 日本語たいとる
\jptitle{
Google Maps APIを利用した時空間分析ツールの試作\\
―喜多村緑郎日記を対象として―}
% 英文タイトル
\etitle{Spatiotemporal Web Resource Discovery and Analyses:\\
  A Survey for Kitamura Rokuro Diary}
% 名前
\jpauthor{松嶋 慎太郎}
\eauthor{Shintaro Matsushima}
\course{谷　研究室}
\year{19}
\abstract{%
  喜多村緑郎日記を対象に、専門家だけでなく一般ユーザの興味を引くアーカイブを試作する。Google Maps APIを使い日記を地図上に復元し、Ajaxで操作性の向上を目指す。}

% 最終更新時刻の挿入
\compheading

\begin{document}

% タイトルを表示させる
\maketitle

\begin{multicols}{2}

  \section{はじめに}
  旧来のページ遷移により画面の更新を行うWebアプリケーションは、
  利用者にとって決して使いやすいものとは言えなかった。
  これに対して、
  Ajaxを用いた、ページ遷移を伴わない動的なWebアプリケーションが注目されている。
  Ajaxは既存の公開された技術から成り、別途プラグインを必要としないため、広く使われるようになった。
  ドラッグできる地図や、キーワード先読みなどの形で体験したことのある人は多いだろう。
 
  本研究では、Google Maps APIとAjaxを使い、
  「喜多村緑郎日記」を対象に、専門家だけでなく一般ユーザの興味を引くアーカイブを試作することを目的とする。
  日記に関連情報を付加してアーカイブ化することで、古い日記をGoogle Maps上に復元することができ、
  当時と現在の町並みを比較したり、時空間を往還しながらの日記の閲覧が可能となる。
  また、Ajaxを使用することでより使い易いユーザインタフェイスを提供することができる。

  2節ではGoogle Mapについて、
  3節ではAjaxに使われている技術と問題点ついて、
  4節では試作したツールについて、
  5節では今後の課題について解説する。
  \section{Google Maps}
  Google Maps\cite{GoogleMaps}は、Googleが提供している地図情報サービスである。
  地図をドラッグで自由にスクロールできたり、指定した地域のサービスを検索することができる。
  通常の地図表示のほか、衛星写真の表示や、地図と衛星写真を複合的に表示することもできる。

  APIは無償で提供されており、Google Mapsで提供されている地図情報を自由にWebページに取り入れ、
  加工することができる。  
  \section{Ajax}
  Ajaxは(Asynchronous JavaScript + XML)の略で、
  スクリプト言語のJavaScriptや汎用マークアップ言語のXMLといったオープンな技術を組み合わせてWebアプリケーションを開発する手法を指す。
  実際にAjaxという技術があるのではなく、「DOM、JavaScript、CSSを使いWebページの内容を動的に更新し、
  XMLHttpRequestで非同期にサーバからXML形式でデータを取得する」という
  従来からある標準的な技術を組み合わせて、より効果的な利用方法を提唱したものを指している。
  
  この技術に対し、米国のJesse James Garrett氏が2005年2月に
  「Ajax: A New Approach to Web Applications」\cite{def-ajax}というコラム内で、
  「Ajax」という分かりやすい名前を付けたことで、この言葉が世界中に広がった。
  \subsection{非同期通信}
  Ajax(Asynchronous JavaScript + XML)のAsynchronousの部分でAjaxの核となる部分である。
  JavaScriptのXMLHttpRequestにより実現される。

  旧来のWebアプリケーションでは、インタフェイスに対するユーザの操作により
  サーバへのリクエストが発生し、その処理結果をサーバから受け取ることで画面は更新される。
  サーバが処理を行っている間、ユーザインタフェイスはブロックされ、
  ユーザはただ待たされることになる。

  Ajaxでは、JavaScriptを使いユーザインタフェイスと並行して、ユーザとアプリケーションとのやりとりを失速させることなくサーバと非同期に通信を行い、
  サーバからのレスポンスを動的・部分的に画面に反映させる。
  これによりサーバと通信を行なっている間も、ユーザはブラウザ上で他の作業を行なうことができる。
  \subsubsection{XMLHttpRequest}
  XMLHttpRequestは、HTTP通信を行うためのJavaScript組み込みクラスである。
  すでに読み込んだWebページからさらにHTTPリクエストを発することができ、
  ページを遷移することなしにデータを送受信できるAjaxの基幹技術である。
  \subsection{JavaScript}
  Netscape Communications社が開発した、Webブラウザなどでの利用に適したオブジェクト指向のスクリプト言語。
  Sun社のJava言語と名前や記法が似ているが、互換性は無い。
  従来は印刷物のような静的な表現しかできなかったWebページに、
  動きや対話性を付加することを目的に開発された。

  1997年、通信に関する標準を策定する国際団体Ecma Internationalによって
  JavaScriptの中核的な仕様がECMAScriptとして標準化され (ECMA 262, ISO/IEC 16262, JIS X 3060)、
  多くの Webブラウザで利用できるようになった。
  \subsection{XML}
  XML(Extensible Markup Language)は、汎用的に使うことができるマークアップ言語である。
  W3C(World Wide Web Consortium)\cite{W3C}により勧告されている国際標準の構造化文書の技術であり、
  無償で使うことができる。
  \subsection{CSS}
  CSS(Cascading Style Sheets)とは、HTMLやXMLで記述された文書に対して、
  その表示スタイルを定義するための仕様。W3Cにより勧告されている。
  \subsection{DOM}
  Dom(Document Object Model)は、W3Cから勧告されているHTML文書やXML文書をアプリケーションから利用するためのAPIである。
  \subsection{クロスブラウザ}
  クロスブラウザとは「複数のブラウザで同じように表示される」ということである。
  Ajaxは、DOM、JavaScript、CSSを使ってWebページを動的・部分的に更新するが、
  それらの実装はブラウザごとに異なっており、
  クロスブラウザの問題は、Ajaxでの開発を難しくしている。
  しかし、このブラウザ間の互換性の問題は、
  優れたJavaScriptライブラリの登場で大きく解決された。
  \subsubsection{JavaScriptライブラリ}
  例えば、Ajaxの核であるXMLHTTPRequestオブジェクトの作り方は、
  Internet ExplorerとFirefoxでは異なる。
  こうした差異をJavaScriptライブラリは吸収し、1つの構文でクロスブラウザ対応が出来るようする。
  また、JavaScriptの基本クラスを拡張や、ユーティリティ関数、リッチなインタフェイス作成を提供する。

  現在、JavaScriptライブラリは、多数がリリースされており、
  代表的なものにRuby on Railsにも採用されているPrototype.js(Prototype JavaScript framework)、
  大規模で多機能なDojo.js、軽量で簡潔な記述のJQueryなどがある。
  \section{Google Maps APIを用いた時空間分析ツール}
  本節では試作した時空間分析ツールを示す。
  本研究では「喜多村緑郎日記」を対象にGoogle Maps APIとAjaxを使うことによって、
  専門家だけでなく一般ユーザの興味を引くアーカイブを試作した。
  
  試作したツールでは、Google Maps APIを使うことでテキストデータの日記を地図上に復元している。
  これにより、ユーザは日記をテキストだけでなく、移動距離や建物の位置関係などを地図上で確認することができる。
  今回のように対象の日記が古いものだと、地図上に当時の町並みが再現され、
  ユーザは時空間を往還しながら日記の閲覧が可能となる。
  
  また、Ajaxを使ってページ遷移のない、より使い易いユーザインタフェイスを提供している。

  \subsection{喜多村緑郎日記について}
  今回対象にした日記は、喜多村緑郎日記の中から大阪に関するものに限定し、全文ではなく一部抜粋している。
  \subsubsection{喜多村緑郎}
  新派の名優。明治４年（1871）年に生まれ、昭和36年に没した。
  明治29（1896）年に、秋月桂太郎、高田実、小織桂一郎らと、大阪道頓堀角座で成美団を結成。
  以後十年間、大阪を拠点に活躍した。伊井蓉峰、河合武雄とともに新派を牽引し、
  新派の女形の芸を完成した人物。当たり役に『婦系図』のお蔦、『不如帰』の浪子などがある。
  花柳章太郎、初代水谷八重子の師匠でもあり、また泉鏡花や谷崎潤一郎など、作家たちとの交流も深い。
  \subsubsection{喜多村緑郎日記}
  喜多村緑郎が残した日記。大正12年から昭和33年まで、ほぼ毎年のものが確認されている。
  一部が翻刻され、演劇出版社より昭和37年に刊行されている。
  役者の生活を知ることができる資料であることはもちろんのこと、興行に関する記録は貴重で、
  演劇資料としての価値も高い。また、食にうるさかった喜多村は、数々の名店を訪れており、
  その記録はグルメマップさながらである。
  たとえば、居酒屋程度の小さな店から出発し、
  当時は名もなかった「吉兆」にも、喜多村は開店間もなく足を運びコメントを記している。

  \subsection{システム概要}
  試作したツールでは、一般ユーザは閲覧のみ可能で、データの追加・更新・削除は管理者が管理用のページから行う構成になっている。
  公開用ページ・管理用ページ共にAjaxを使用したユーザインタフェイスを提供しており、
  ページ遷移することなく日記の閲覧やデータの管理が可能である。
  Ajaxによるページ遷移を伴わない画面の更新は、特に管理用ページで威力を発揮し、
  複雑な設定をひとつの画面で簡単に行うこと可能にしている。
  
  
  JavaScriptの役割に注目すると、喜多村緑郎日記サーバと非同期通信を行い画面を動的に更新する一方、
  Google Maps表示のためGoogle Maps APIを通してGoogle社のサーバとも非同期通信を行う。
  \begin{center}
    \includegraphics[width=8cm]{figure1.eps}
    \figurename{1　システム全体図}
  \end{center}
  \subsection{データ管理}
  試作したツールでは、ユーザの興味を引くために日記本文に関連情報を付加してアーカイブ化している。
  関連情報には、専門家による解説のほか、Google Mapsで表示する場所の位置情報や画像などが含まれる。
  \begin{center}
    \includegraphics[width=8cm]{figure2.eps}
    \figurename{2　日記と関連情報}
  \end{center}

  実際のシステムでは、日記データ・用語データ・地図データ・画像データという4つのデータフォーマットを定義して使用している。各データは個別に管理され、各データ間の関係は図3のようになっている。
  \begin{center}
    \includegraphics[width=8cm]{figure3.eps}
    \figurename{3　各データフォーマットと関係}
  \end{center}
  \subsection{使用技術}
  試作したツールでは、JavaScriptライブラリにmootools\cite{mootools}、サーバサイドスクリプトにPHP\cite{PHP}、データベースにSQLite\cite{SQLite}を使用した。
  また、データフォーマットにJSON\cite{JSON}を使用した。
  \subsubsection{mootools}
  mootoolsは、軽量かつ機能充実のJavaScriptライブラリ。
  MIT Licenseのもとで、オープンソースソフトウェアとしてリリースされている。
  
  W3CのHTML・XHTML検証サービス「The W3C Markup Validation Service（ http://validator.w3.org/ ）」でも使われている。
  \subsubsection{JSON}
  JSON(JavaScript Object Notation)は、 軽量のデータ交換フォーマットで、
  JavaScript（ECMA-262標準第3版 1999年12月）の一部をベースに作られている。
  このため、JavaScriptではXMLよりパースが容易である。
  さらに、XMLより軽量であるため、Ajaxの分野では、XMLの代わりにデータフォーマットとして採用されることが多くなっている。

  また、C/C++、Java、Perl、PHP、Python、Rubyなど、
  多くのプログラミング言語で利用可能である。
  \subsubsection{PHP}
  HTMLとロジックを自然に融合できるプログラム言語である。PHP5ではオブジェクト指向
  が大幅に強化され、SQLiteがデフォルトでバンドルされた。
  \subsubsection{SQLite}
  SQLiteはMySQLやPostgreSQLと同じDBMS（データベース管理システム）であるが、
  サーバとしてではなくアプリケーションに組み込まれて利用される軽量データベースである。
  一般的なRDBMS（リレーショナルデータベース管理システム）
  に比べて大規模な仕事には不向きだが、中小規模ならば速度も遜色はない。 
  データベースは単一ファイルであり可搬性が高い。
  SQLiteに権限管理機構は無く、アクセス制御はファイルのパーミッションに依存する。
  \section{今後の課題}
  最後に今回試作したツールの今後について、アーカイブデータの利用と表現力の向上という観点から考えてみる。

  まず、アーカイブデータの利用について考えてみる。
  試作したツールでは、アーカイブデータをJSON形式で扱っている。
  これは、アーカイブデータのWebアプリケーションでの利用を第一に考えたためであるが、
  一方で、アーカイブデータの試作ツール以外での利用を難しくしている。
  そこで、データをXMLなどの広く普及しているフォーマットにして公開することで、
  他分野でのデータの利用や、データの交換といった他のシステムとの連携などが期待できる。

  次にツールの表現力の向上を考えると、Ajaxの代わりにAdobe Flashを使うことが考えられる。
  Flashは従来からリッチなWebページを製作するのに使われており、Ajaxの核である非同期通信も行える。
  また、Ajaxよりも表現力（画像・動画・音声など）が強力で、
  よりリッチなインタフェイス提供することができる。
  Flash を使うことで、ユーザに画像や動画などを多用したリッチな「時空間分析ツール」を提供することができる。
  
  \subsection{Adobe Flash}
  Adobe Flashは、アドビシステムズが開発している動画やゲームなどを扱うための規格及び
  それを制作する同社のソフトウェア群の名称。
  ベクターイメージが規格の中心で、
  それにスクリプトで制御することによりマウスの動きに合わせてアニメーションしたり、
  音を鳴らしたりなど、インタラクティブなサイトを作成するのに向いている。
  
  Flashによって作られたファイルを閲覧するには、
  Webブラウザに専用のプラグイン「Flash Player」をインストールしておく必要がある。
  Flash自体は有料だが、Flash Playerは無料で配布されている。

  Flashは、プログラマでなくても手軽に高機能なWebページが構築でき、Ajaxを使った場合と比べ遥かに簡単である。また、Ajaxでの開発で問題となるブラウザ互換性の問題も少ない。
  一方で、HTMLとの親和性が低く、ブラウザのインタフェイスに沿った動作も実現しにくい。

\end{multicols}   

\begin{thebibliography}{9}
\bibitem{def-ajax}
  Ajax: A New Approach to Web Applications :

  http://www.adaptivepath.com/ideas/essays/archives/000385.php
\bibitem{xhtml}
  CSS + XHTMLホームページ作成テクニカルガイド―基礎から実践まで体系的に学べ、リファレンスも充実
  　佐久嶋 ひろみ (著)
\bibitem{JSON}
  Introducing JSON : http://www.json.org/
\bibitem{GoogleMaps}
  Google Maps : http://maps.google.com/
\bibitem{mootools}
  mootools - home : http://mootools.net/
\bibitem{PHP}
  PHP: Hypertext Preprocessor : http://www.php.net/
\bibitem{php5-1}
  PHP5徹底攻略 エキスパート編　廣川 類 (著), 桑村 潤 (著) 
\bibitem{php5-2}
  PHP5本格派―PHP5で始めるWebアプリケーション構築ガイド　qnote (著) 
\bibitem{SQLite}
  SQLite Home Page : http://www.sqlite.org/
\bibitem{W3C}
  World Wide Web Consortium : http://www.w3.org/
\bibitem{intro-ajax}
  入門Ajax 増補改訂版　高橋 登史朗 (著)

\end{thebibliography}
\end{document}

