wikiシステムの開発
TRANSCRIPT
平成２３年度卒業論文
スマートフォンでの利用に特化したWikiシステムの開発
情報通信工学科 情報通信システム学講座
０８１０１３７ 佐々木佳祐
指導教員 寺田 実 准教授提出日 ２０１２年 １月２７日
目 次
第 1章 序論 6
1.1 背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.1 Wikiによる情報共有 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.2 スマートフォンの普及 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.1 解像度やアスペクト比の差異による操作感の差 . . . . . . . . . . . . . . . . 8
1.2.2 入力デバイスの差によるWiki記法の入力の手間 . . . . . . . . . . . . . . . 8
1.3 目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.4 本論文の構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
第 2章 関連研究 10
2.1 Wikiシステムによる情報共有の事例 . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1 Wiki型システムによる研究室内情報共有の試み [1] . . . . . . . . . . . . . 10
2.1.2 学生の情報共有・交換方法としてのWikiの効果 [2] . . . . . . . . . . . . . 10
2.2 携帯アプリによる観光地情報収集システム [3] . . . . . . . . . . . . . . . . . . . . 10
2.3 ネットワークを利用した手書きメモの同期/非同期システム [4] . . . . . . . . . . . 10
2.4 関連研究についての考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
第 3章 提案するシステムの仕様 12
3.1 概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 用語の定義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.1 記事 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.2 モード . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.3 クライアント . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.4 サーバ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 スマートフォン用アプリケーション . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3.1 記事の一覧表示及び閲覧 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3.2 記事の作成および編集 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.3 記事の閲覧 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3.4 画像の添付 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3.5 位置情報 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4 サーバ用のWikiシステム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.4.1 概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.5 同期機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1
第 4章 実装 23
4.1 開発環境 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 データ構造 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 スマートフォン用Wiki アプリケーション ”MobileWiki” . . . . . . . . . . . . . . 24
4.3.1 アプリケーションの構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.4 サーバ用Wikiシステム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.5 同期機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
第 5章 評価実験 28
5.1 評価方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.1.1 被験者 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.1.2 実験 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.1.3 実験 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.2.1 実験 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.2.2 実験 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3 考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
第 6章 結論 32
6.1 結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.2 今後の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.2.1 アプリケーション本体 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.2.2 同期機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.2.3 研究全般 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2
図 目 次
1.1 Wikipedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Wikiのページ作成例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 スマートフォンから閲覧したWikipedia(拡大しないと文字が見えない) . . . . . . 8
1.4 スマートフォンのキーボード . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1 システム概要図 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Wikiの例 (PukiWiki) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 記事の一覧 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.4 記事の編集と閲覧 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.5 記号の入力 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.6 閲覧モード . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.7 画像の挿入 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.8 位置情報の利用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.9 サーバ用Wiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.10 サーバとクライアントのレンダリングの差異 . . . . . . . . . . . . . . . . . . . . . 20
3.11 同期処理の流れ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.1 問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.1 編集領域上部にボタンがある UIの例 . . . . . . . . . . . . . . . . . . . . . . . . . 33
3
表 目 次
1.1 Wiki記法の例 (PukiWikiの場合) . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1 対応済みのWiki記法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1 記事のデータ構造 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 Wiki記法と Htmlタグの対応関係 . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1 実験 1の計測結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.2 実験 2のアンケート結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4
概要Wikiは, Webブラウザから誰でも利用することができる,強力なコンテンツマネジメントシステムである. また近年普及しつつあるスマートフォンは, PCとほぼ同等の機能を備えたWebブラウザを搭載しているが,画面解像度や物理的な大きさの問題から, PCを同じ操作感を得ることは難しい. そこで本研究では,スマートフォンから快適に利用できるWikiシステムを開発し,モバイル環境における情報共有にWikiシステムが有効であるかを検証した.
方法本研究では,スマートフォン用のWikiアプリケーションと,アプリケーション間の記事を共有するためのサーバを構築した. アプリケーションを作成する際には,Wiki独特の記号を用いた本文編集が煩雑にならないための UI設計を行った.
結論評価実験の結果,設計した UIが,スマートフォンにおけるWikiの編集に有効である可能性は立証できた. また,モバイル環境における情報共有にWikiが有効かどうかは,判断材料に欠けるという結果となった. 今後, UIや同期機能の改善を行なっていくとともに, 長期間の運用実験を行い, システムの有効性について検証していきたい.
5
第1章 序論
1.1 背景1.1.1 Wikiによる情報共有
Wikiの概要 Wikiは, Webブラウザから簡単にWebページを作成,閲覧,編集できるコンテンツ管理システムである. 誰でもページを作成できるという特徴から,個人的なメモとして,あるいは複数人での情報共有など,幅広い用途で利用されている. その最たる例がWikipedia1である (図 1.1).
図 1.1: Wikipedia
Wikipediaは誰もが編集できる百科辞典であり,世界で最も巨大なWiki サイトである.
Wikiの歴史 Wikiの起源は, 1995年にウォード・カニンガムが自身のWebサイト中に, 「誰でも編集できるデータベース」という位置づけで公開した”WikiWikiWeb”である [5]. そのコードが公開されると, 「Wikiクローン」と呼ばれる, WikiWikiWebを改良したソフトウェアが現れるようになり, それは次第に独自性を持つようになり, 呼称も「Wikiエンジン」へと変化していった.
現在に至るまでにWikiは様々な方向に進化しており, 誰でも自分のサーバにWikiシステムが設置できる”PukiWiki2”や, メーリングリストとWikiが統合された”qwikWeb3”などのソフトウェアが誕生している. Wikiシステムは現在でも,複数人での情報共有や,個人の情報整理に広く利用されている.
1http://www.wikipedia.org2http://pukiwiki.sourceforge.jp/3http://qwik.jp/
6
Wikiの特徴 Webページの記述言語である Htmlは,人間が手入力するにはやや煩雑である. そのためWikiでは, Htmlをより簡潔に記述できるように「Wiki記法」を導入している. このWiki
記法が, Wikiの最大の特徴であるといえる.
Wikiエンジンによって記法はまちまちで,先述した PukiWikiでは,表 1.1のようなWiki記法をサポートしている.
表 1.1: Wiki記法の例 (PukiWikiの場合)
記法 意味* 文字列 見出し- 文字列 箇条書き---- 区切り線”文字列” 文字列の強調[[文字列]] 文字列をページ名とするページへのリンク
この記法を用いてページを作成する例を図 1.2に示す.
(a) Wiki 記法による入力例 (b) Html に整形して表示
図 1.2: Wikiのページ作成例
1.1.2 スマートフォンの普及
また近年爆発的に普及し始めているスマートフォンは,その携帯性と,アプリケーションの豊富さから,思い立った時にすぐメモを残すなど,情報整理デバイスとしての価値も高い. スマートフォンには PCと同程度のWebブラウザが標準搭載されているため,モバイル環境でWikiを利用するといったケースも今後増加していくのではないかと考えられる.
1.2 問題点スマートフォンのWebブラウザでWikiを利用しようとすると, PC環境との差異から 2つの問題が発生する. 本研究では,この 2つの問題について考える.
7
1.2.1 解像度やアスペクト比の差異による操作感の差
Wikiサイトをスマートフォン上で閲覧すると,図 1.3のように PCから閲覧するWikiと同様のページが表示される. 図の撮影に用いたスマートフォンの解像度は 854× 480であり (現在日本に普及しているスマートフォンの解像度は 480× 800, 540× 960, 720× 1280 のいずれかであることが多い (スマートフォンデータベース4より)), PCサイトの表示という面では申し分ないものの,画面サイズが PCのそれとは明らかに小さい (3.5 ∼ 4.5インチが一般的)ため, そのままの表示では文字が小さくなり,どうしてもページの拡大/縮小といった作業が必要となる.
図 1.3: スマートフォンから閲覧したWikipedia(拡大しないと文字が見えない)
1.2.2 入力デバイスの差によるWiki記法の入力の手間
スマートフォンは,一部機種を除いて物理的なキーボードを備えておらず,文字の入力は画面に表示される仮想的なキーボードで行うのが一般的である (図 1.4(a)). キーボードソフトウェアにもよるが,記号を入力する際には記号一覧を呼び出し,その中から入力したい記号を探さなければならない (図 1.4(b)). Wikiを編集する際は, Wiki記法と呼ばれる,記号を用いた編集規則 (例：表 1.1)
を用いて文書を成型するのが一般的であるので,快適にWikiを編集するためには快適に記号が入力できなくてはならない.
4http://smartphone.ultra-zone.net/
8
(a) 日本語入力モード (b) 記号入力モード
図 1.4: スマートフォンのキーボード
1.3 目的本研究では, 前節で述べたような問題を解決したインタフェースを持つスマートフォン向けの
Wiki システムの開発を行い,モバイル環境における情報共有にもWikiが有効かどうかを検証する.
1.4 本論文の構成本論文の構成について簡単に解説する.
本章では,「序論」として本研究の背景と問題点,目的について述べた.
第 2章では,本研究に関連する研究を紹介し,本研究との相違点を述べる.
第 3章では,本研究で作成したシステムの仕様について述べる.
第 4章では,本研究で作成したシステムの実装について述べる.
第 5章では,実験の結果および考察について述べる.
第 6章では,結論と今後の課題について述べる.
9
第2章 関連研究
2.1 Wikiシステムによる情報共有の事例第 1章で述べたような, Wikiシステムを情報共有に用いた研究の事例を紹介する.
2.1.1 Wiki型システムによる研究室内情報共有の試み [1]
概要 当研究は, Wikiがまだ今ほど世に浸透していない頃に,研究室内の情報共有ツールとして,
掲示板やメーリングリストの代わりにWikiを利用した事例である.
結論 掲示板を設置するよりも学生のアクセス数が増加,また学生同士の意見交換の活性化が見込めるであろうという結論が得られている.
2.1.2 学生の情報共有・交換方法としてのWikiの効果 [2]
概要 卒業研究に着手した大学 4年生向けに情報を共有する目的でWikiを利用し,そこで発生したことを調査する.
結果 学生がWikiに記した情報に他の学生や教員からコメントが入ることによってWikiが活性化し,またプラグイン機能などを利用して編集作業を簡略化した結果, Wikiが情報共有の場として活用されるという結果が得られている.
以上の 2つの研究以外にもWikiを情報共有の場として活用した事例は多々存在する. しかし,携帯端末を用いたWikiシステムの利用事例を発見することはできなかった.
2.2 携帯アプリによる観光地情報収集システム [3]
概要 ユーザに実際に観光地に赴いてもらい,携帯電話のアプリケーションを用いてゲーム感覚で各地の情報を入力させ,観光地の情報を収集するシステムである. このシステムは,観光地のリストが予め与えられ,実際に観光地に近づくとクイズに回答する権利が取得でき,更にクイズに正答すれば宝物がもらえる,というスタンプラリー形式のアプリケーションである. また,ユーザが新たに観光地を作成することもできる.
2.3 ネットワークを利用した手書きメモの同期/非同期システム [4]
概要 手書きシステムを複数人で利用するにあたり,必ず発生するのが同期の問題である. 同期の問題は
10
同期的問題 1枚のキャンバスに書けるのは同時に 1人であるため,リアルタイムで情報を追加・編集できないという問題
非同期的問題 利用者がそれぞれ別のキャンバスに描画したのち,それをマージする際に発生する問題
以上 2つの問題に大別される. これらを解決した,複数人での利用に適した手書きシステムを開発,
評価を行う.
結果 同期的な共有は有用性が認められたが,非同期的共有のインタフェースが直感的ではなく,改善の余地が見られた.
2.4 関連研究についての考察2.1節より, Wikiシステムは複数人での情報共有に適したツールであるといえる. 本研究では,
本来 PCでの利用を想定したWiki システムがモバイル環境においても有効に利用できるかを検討する.
またモバイル環境での利用にあたり,現在のスマートフォンにはほぼ確実に内蔵されているGPS
機能を用いて,編集した位置などを共有するといった場面も想定できる. 2.2節で紹介した研究は情報収集の際コメント機能を用いていたが, 本研究ではWiki記法を用いて情報を収集することの有効性を検証する.
加えて,本研究ではシステムの複数人での利用を想定しているため,ユーザが同じ項目を編集する際の衝突について考慮しなくてはならない. そこで 2.3節で述べた関連研究の,非同期的問題の解決法を適用する.
11
第3章 提案するシステムの仕様
3.1 概要本研究では,図 3.1のように PCのWebブラウザと,スマートフォンにインストールされたアプリケーションから編集可能な一つのWikiシステムを構築する. なお図内の矢印はデータの入出力関係を表す. スマートフォンおよび PCのWebブラウザからサーバ上のWikiを参照する際は,どの端末からも同じ内容が閲覧できる. さらに,各スマートフォン上のアプリケーションではネットワークに接続されていなくともローカルでWikiが編集可能であり,ネットワークに接続して同期処理を行うことで, Webサーバ上のWikiと内容を揃えることができる.
図 3.1: システム概要図
3.2 用語の定義3.2.1 記事
Wikiが持つ一つ一つのデータを記事と定義する. 記事は,
• タイトル
12
• 本文
• 画像
• 位置情報
• 保存された時間
などのデータを持つ.
3.2.2 モード
Wikiは一般的に,記事の本文を表示する画面と,本文を編集する画面を行き来して利用される.
本論文では,アプリケーションが記事の本文を表示している状態を閲覧モード,編集を行う画面を表示している状態を編集モードと定義する.
3.2.3 クライアント
システム専用のスマートフォン用Wikiアプリケーションがインストールされた端末をクライアントと定義する. 各クライアント内のアプリケーションは同期機能を利用しない限りはネットワーク通信を必要とせず,単独で動作する. よって,クライアントはユーザにとって,オフラインの携帯用Wikiとなる.
3.2.4 サーバ
本研究では,Web上で動作しているWikiシステムをサーバと定義する. サーバは PCやスマートフォンのWebブラウザからいつでも参照できる. クライアントはサーバと同期処理を行うことで,
他のクライアントから投稿された記事を参照できる.
3.3 スマートフォン用アプリケーション第 1章でも述べたように,スマートフォンは PCと比べ画面の大きさや入力デバイスが異なるため, それに合わせたインタフェースを設計する必要がある.
3.3.1 記事の一覧表示及び閲覧
通常, Web上のWikiのレイアウトはそのページの左右どちらかに記事の一覧やメニューが配置され,余ったスペースに本文が記述されているというパターンが用いられることが多い (例：PukiWiki1図3.2).
このレイアウトはアスペクト比が横に大きい PCモニタ向けに設計されており,縦長の比率で利用される場面が多いスマートフォンで同じレイアウトを利用するのは得策ではない. よって,アプ
1http://pukiwiki.sourceforge.jp/
13
図 3.2: Wikiの例 (PukiWiki)
リケーション起動時には記事の一覧が表示されるように設計した. またMobile UI Patterns2を参考に,画面上部にはアプリケーションのタイトルなどを表示するバーを設けた.
以上を踏まえて,実際に作成したアプリケーションの起動画面が図 3.3である. 記事は更新日時の順にソートされて表示される. 内容を参照したい記事のタイトルをタップすると,本文が表示される (閲覧モードに移行). ただし,記事がない場合はその旨を示すメッセージが表示される. 右上の新規ボタンで記事の新規作成 (編集モードに移行),右下の同期ボタンで後述の同期機能が実行される.
3.3.2 記事の作成および編集
図 3.6(a)が記事を編集する画面である. 画面上部がツールバーとしての役割を持ち,ここから記号入力の支援を行う. タイトルを入力した段階で,そのタイトルの記事が既存だった場合,その記事の内容を読み込むことができる. 読み込みを行わずにそのまま保存した場合は,既存の内容は上書きされる. 下部のメニューボタンから,写真の撮影や選択,位置情報の取得ができる (図 3.4(b)).
表 3.1: 対応済みのWiki記法記法 意味! 文字列 見出し (!!, !!!と 3つまで並べることが可能)
* 文字列 箇条書き (**. ***と 3つまで並べることが可能)
[[文字列]] 文字列をページ名とするページへのリンク[[URL]] URLへのリンク
2http://mobile-patterns.com/
14
図 3.3: 記事の一覧
(a) 編集画面 (b) 編集メニュー
図 3.4: 記事の編集と閲覧
記号入力支援 上部左側のスピナーから入力する記号を選択し追加ボタンを押すことで,現在カーソルがある位置に記号を挿入することができる (図 3.5(a), 図 3.5(b)). また,挿入できる記号とそれによるWiki記法を表 3.1に示す.
15
(a) 記号入力前 (b) 記号入力後
図 3.5: 記号の入力
3.3.3 記事の閲覧
前節で編集した図 3.6(a)の記事を,閲覧モードで表示すると,図 3.6(b)のように文章が整形される. 画面上部のバーにはタイトル,編集モードへ移行するためのボタンが配置されている.
(a) 本文の例 (b) レンダリング結果
図 3.6: 閲覧モード
3.3.4 画像の添付
カメラまたは端末のストレージから画像を取得, 挿入することができる. 挿入後は左上にプレビューが表示される (図 3.7). 現状では,挿入できる画像は 1枚のみで,画像の拡大表示にも対応していない.
16
図 3.7: 画像の挿入
3.3.5 位置情報
スマートフォンのGPS機能を用いて,記事を作成した位置の情報を保存,閲覧することができる.
図 3.4(b)から「位置情報を取得」を選択すると,端末が緯度と経度を取得し,記事データの一部としてデータを保存する他,ユーザにその位置情報を知覚させるため,本文末尾に緯度と経度が埋め込まれる (図 3.8(a)中央部). 本文中の値を削除しても内部で保存された位置情報は削除されずに残る. 位置情報を更新したい際はもう一度取得を選択すれば良い. 内部に保存された位置情報は現時点では削除できない. 記事に位置情報が付加されている場合,閲覧時の右下に地図アイコンが表示される (図 3.8(a))下部. アイコンつきボタンをタップすると, 位置情報がスマートフォンに標準搭載されている Google Maps3に送信され,地図が表示される (図 3.8(b)).
(a) 位置情報がある場合の表示 (b) 地図の表示
図 3.8: 位置情報の利用
3https://market.android.com/details?id=com.google.android.apps.maps
17
3.4 サーバ用のWikiシステム3.4.1 概要
サーバとなるWiki システムは,通常のWikiとしての機能に加え,クライアントとの通信用 API
を備えている必要がある.
システム仕様 作成したWikiシステムは, PukiWikiをはじめとする一般的なWikiシステムと同様に,トップページ,記事の追加および編集画面,記事本文の表示画面からなる.
以下では,サーバ用Wikiシステムをブラウザから参照した際の UIについて解説する.
トップページ トップページでは図 3.9(a)のように記事の一覧が表示される. タイトルをクリックすると記事の閲覧画面へ, ”New Page”をクリックすると新規作成画面へジャンプする.
記事の作成 新規作成画面 (図 3.9(b))では,まず記事のタイトルを入力する. ”Create Page”ボタンをクリックすると,入力したタイトルの記事を編集する画面にジャンプする. 既存のタイトルが入力された場合は, PukiWikiと同様にそのタイトルの記事を編集することになる.
記事の編集 図 3.9(c)が記事の編集画面である. テキストボックスに本文を入力し, ”Update Page”
ボタンをクリックすると内容が保存される.
記事の閲覧 保存されているタイトル,本文を表示する. 図 3.9(c)の内容は,図 3.9(d)のように成型されて表示される. また,記事に位置情報が付加されている場合,図 3.9(e)のように地図が表示される. 後ほど,詳細な位置が一目でわかるようにマップ内にピンが立つように機能を追加する予定である.
サーバとクライアントのレンダリングの違い 参考に,同じ内容の記事を,サーバとクライアントから参照した際のそれぞれの表示の違いを図 3.10に示す.
18
(a) トップページ (b) 新規作成
(c) 記事の編集 (d) 記事の閲覧
(e) 位置情報付き記事の閲覧
図 3.9: サーバ用Wiki
19
(a) クライアント (b) サーバ
図 3.10: サーバとクライアントのレンダリングの差異
20
3.5 同期機能Wikiは誰でも同じ記事を編集できることが一つの利点である. よってWikiシステムを名乗る以上,個人の端末で作成された記事を,他の端末からも参照,編集可能にしておく必要がある. 複数端末によるデータの共有方式としては, P2Pやクライアント・サーバ方式が考えられるが, 本研究では各端末の所持者がどのようにWikiを編集しているかの管理のしやすさから後者を採用し, サーバとしてWeb上で動作するWikiを各クライアントから編集するようなイメージで同期機能を実装する.
アルゴリズム 同期のアルゴリズムを以下に示す.
1. 端末が,サーバから全記事のデータをダウンロードする
2. 同名の記事が存在しない場合,クライアントに新規に記事を作成,保存する
3. 同名の記事が存在する場合は,クライアントにある記事よりもサーバにある記事の編集日時が新しい場合に,サーバの内容をクライアントに保存する
4. クライアント上に存在する,ダウンロード時に更新が行われなかった記事データをサーバに送信する
5. データを受け取ったサーバは,同名の記事が存在する場合上書き保存,しない場合は新規に記事を作成,保存する
以上の手順によって同期が行われる. 例を以下に示す. 新規にアプリケーションをインストールした直後の状態が図 3.11(a)であり,その時点でサーバには図 3.11(b)のように記事が保存されているとする. この状態でアプリケーションの同期ボタンを押すと,図 3.11(c)のように記事がダウンロードされる.
同期機能の懸念点 サーバと同期を行う際にはいくつかの問題点がある.
記事名の重複 サーバとクライアント上に同名の記事が存在している場合,記事の更新日が新しい方を優先して上書きを行う. この時,サーバにあるものが別のユーザによって編集されたものであった場合にその内容が失われる可能性がある. 現時点ではそのケアは行われないため,他ユーザによる編集の検出も含めて今後の課題とする.
解決策としては,
• 記事のダウンロードとアップロードの工程を分割し,ダウンロード時にマージする
• アップロード時に,上書きの確認を行う
などの手段が考えられる. また PukiWikiでは,編集を保存する際に編集元の記事が書き換わっていた場合,無視して上書きするか,マージして書き込むかの選択が可能となっている.
21
(a) 新規インストール後 (b) サーバの状態
(c) 同期処理後
図 3.11: 同期処理の流れ
22
第4章 実装
4.1 開発環境クライアントの対象 OSは Androidとし,その上で動作するアプリケーションを作成した. なお
Androidアプリケーションの記述言語は Javaである. サーバ用のWikiアプリケーションはWeb
アプリケーションフレームワークである Ruby on Rails1を用いて作成した. また記事データベースにはクライアント,サーバともに SQLite2を用いた. Androidは標準で SQLiteをサポートしており, またサーバに届くリクエストもさほど大きいものでないため, 軽量な DBMSである SQLiteで問題ないであろうという判断からの選択である.
4.2 データ構造サーバおよびクライアントでは, 1つ 1つの記事は表 4.1のようなデータ構造を持つ記事クラスとして扱う.
表 4.1: 記事のデータ構造
名称 データ型 詳細title 文字列 記事のタイトルbody 文字列 記事本文
category 文字列 記事のカテゴリ (現時点では未使用)
photo 数値記事に写真がついているか判定するための数値
(1以上で写真あり, 0で写真なし)
latitude 文字列 緯度 (度)
longitude 文字列 経度 (度）
created 文字列
作成日時 (yyyy-MM-ddTkk:mm:ss)
(y:年, M:月, d:日, k:24時間中の時, m:分, s:秒Tは ISO86011で定められた,日付と時刻の組み合わせる際に用いる記号)
updated 文字列 更新日時 (形式は同上)
なお,記事のタイトルは重複しないものとする.
1http://rubyonrails.org/2http://www.sqlite.org/1http://www.iso.org/iso/iso catalogue/catalogue tc/catalogue detail.htm?csnumber=40874
23
4.3 スマートフォン用Wiki アプリケーション ”MobileWiki”
スマートフォン用アプリケーションは,アプリケーション名を”MobileWiki”として開発を進めた.
4.3.1 アプリケーションの構成
画面の表現 Androidのアプリケーションは, 1つの画面に対して
• レイアウトファイル (XMLで記述)
• アクティビティファイル (javaで記述)
をそれぞれ 1つずつ持つ. レイアウトファイルでは画面を構成するためのボタンやテキストなどのパーツの配置を, アクティビティファイルではそれらのパーツに対するユーザからの操作 (タップや長押しなど)にどう対応するかを記述する. アクティビティファイルには基本的に Androidが提供する Activityクラスを継承した xxxActivityクラスが記述されている. 以降では,アクティビティファイルとレイアウトファイルからなる画面 1枚をアクティビティと呼ぶ.
画面の切り替え アクティビティの切り替えは,インテントという機能を用いて行う. インテントとは,遷移先のアクティビティと,遷移先に渡したい情報をインテントに付加してシステムに送信すると, システムが宛先を判断してそのアクティビティやアプリケーションを呼び出してくれるという仕組みである.
記事一覧表示 一覧表示のためのアクティビティは, 項目をリスト化して表示するコンポーネントである ListViewを手軽に扱える ListActivityというクラスを継承して作成した. アクティビティが呼び出されると,データベースから全ての記事データを取得し,更新日時の順にソートして表示する. 項目をタップすると,そのタイトル,本文などのデータをインテントに付加し,閲覧用のアクティビティに送信する.
記事閲覧 閲覧モードのためのアクティビティは,タイトルと本文を表示する領域,また位置情報が付加されている記事の場合はそれを表示するためのボタンを持つ. インテントからタイトルと本文,写真の有無と位置情報を受け取り,それぞれ以下のように処理する.
タイトル タイトルはそのまま,上部のバーに表示される.
本文 後述するパーサによってWiki記法を Htmlタグに変換し,表示する.
写真の有無 添付されている写真がある場合,記事と紐付けられた画像ファイルを SDカードなどのストレージから読み込み,表示する. 記事と画像ファイルとの紐付けは,画像のファイル名を「記事の作成日時.jpg」とすることで実現する.
位置情報 位置情報が空でない (何らかの値が入っている)場合に,画面右下にボタンを表示する. ボタンが押下されると,位置情報をインテントを用いて Google Mapsに送信する.
24
Wiki記法のパーサ パーサは Parserクラスとして作成した. Parserクラスのメソッド parse()に本文を渡すと, Wiki記法の本文を Htmlの形式で出力する. 具体的には,以下の手順で変換を行う.
1. 本文を 1行ずつ読み込む
2. 行内にリンクを示す記号の左端 ([[)があれば,中括弧で括られた部分を Htmlの Aタグ (<a
href=></a>)で書き換える
3. 行頭が’ !’または’*’である時,その記号の個数を数え,対応するタグおよび記号に書き換える
4. 書き換えた行の末尾に改行タグ (<br>)を加え,バッファに格納する
5. 次の行を読み込み,変換の結果をバッファに追記していく
6. 全ての行の読み込みが終了したら,バッファの内容を文字列データとして出力する.
3.において,対応する記法とタグの関係を表 4.2に示す. ここで,箇条書きにタグ (<ul></ul>)ではなく記号を利用しているのは, Androidのテキスト表示部品である TextViewが,箇条書きのタグに対応していないためである.
表 4.2: Wiki記法と Htmlタグの対応関係Wiki記法 Htmlタグ! 文字列 <h2>文字列 </h2>
!! 文字列 <h3>文字列 </h3>
!!! 文字列 <h4>文字列 </h4>
* 文字列 ●文字列** 文字列 (半角スペース 1つ開けて)○文字列*** 文字列 (半角スペース 2つ開けて)■文字列
記事の編集 記事の編集用アクティビティは,タイトルや本文を入力するためのテキストボックス,
また保存やメニューを呼び出すためのボタンを持つ. 重複タイトルの確認は,テキストボックス内が変更されるたびに行われる. テキストボックスには内容が変更されたイベントを検知し,処理を行うリスナを設定することができるので, そのリスナに「テキストボックス内の文字列がデータベースのタイトルと一致するか」という処理を加えて実装した. また,後述する画像挿入のために,新規作成の画面が呼び出された時点で,その時の日付データを created atとして保持しておく.
記号入力 追加ボタンがタップされると,本文のカーソルの位置に選択された記号が挿入される.
この処理は,テキストボックス内の本文をカーソル位置で分割し,前半と後半の間に記号を加えた新しい文字列をテキストボックスに戻すことで実装している. また,リンクを挿入する場合は,リンク先の URLを入力するダイアログが表示される.
画像の挿入 メニューから「写真を撮る」または「写真を選択」を選択するとと,それぞれの機能を持つアプリケーション (カメラやギャラリー)を呼ぶためのインテントが発行される. 取得した画像は,記事と画像との紐付けのため, 「(編集中の記事の created at).jpg」というファイル名で保存する.
25
位置情報の取得 メニューから「位置情報の取得」を選択すると,端末の存在する緯度と経度を取得する. 位置情報を取得する手段は
• Wi-Fi
• GPS
• 3Gネットワーク
の 3通り存在し,上にいくほど精度が高くなる. クライアント側でWi-Fiや GPS機能をオフにすることも可能なので, アプリケーションではどれを利用するかというのは固定せず, クライアントが利用可能なネットワークのうち最も高精度なものを選択するように実装した.
4.4 サーバ用Wikiシステムサーバ用システムは,記事のデータベースとそれの読み書きが最低限可能であればよいので, Rails
に標準搭載されている scaffolding機能を利用して実装した. scaffoldingを利用すると, データベースへのレコードの挿入やデータの編集などができるWebアプリケーションが自動で生成される. この自動で生成されたコードを編集し, MobileWikiからの同期に対応する APIを作成した.
API設計 APIは,主に HTTPメソッド3の GETと POSTを用いる.
GETメソッドは, Webサーバからデータを取得する際に用いられるメソッドで,ブラウザがWeb
ページの URLから htmlを取得する,などといった場面によく用いられる.
POSTメソッドは, GETとは逆にWeb上にデータを送信する際に用いられるメソッドである.
HTTPメソッドはこの他にも PUT, DELETEなどがあるが,本システムでは以上の 2つを用いる.
記事一覧の取得 GETメソッドで,全ての記事を JSON4形式で取得する. 同タイトルの,タイムスタンプが端末上の記事よりも新しいものがあるか,端末上に存在しないタイトルの記事が一覧にある場合に,それを端末に保存する.
記事データの送信 GETメソッドによりサーバに存在する記事と端末上に存在する記事の差分ができるので,その中でサーバに存在しないものを JSON形式に変換し, POSTメソッドでアップロードする.
4.5 同期機能クライアントとサーバのデータのやり取りの際には,記事データを JSON形式に変換して行う.
XMLや他のデータ形式も選択肢にあったが,エンコードやデコードが容易で,余計なタグなどがなく軽量であることから JSONを選択した. アプリケーションでは同期処理をダウンロードとアップロードの 2つのタスクに分割して実装した.
3http://www.studyinghttp.net/rfc ja/rfc26164http://www.json.org/
26
ダウンロード 前述の APIにアクセスし,サーバ上の記事データを JSONの配列という形式で受け取る. JSONを変換すると,記事クラスの配列となる. この配列を 1つずつ,クライアント内の記事と比較し,クライアントに保存するかどうかを判断する.
アップロード アップロードは,JSON形式に書き換えられた記事データを 1つずつ送信する. 送信時も受信時と同様,送信する記事一覧を JSONの配列にすることも可能であったが,
• リクエストが簡潔になる
• サーバ側の実装が容易
などの理由から, 1つずつ送信するという実装にした.
27
第5章 評価実験
5.1 評価方法5.1.1 被験者
実験は,本学の学部 4年生,また Twitter1経由で募集したスマートフォン利用者計 7名の方に協力していただいた.
5.1.2 実験 1
目的 開発したシステムによって, Wiki記法の入力がスマートフォンでスムーズに行えるようになるかを確認する.
手順 Wiki 記法によって以下のような記事をMobileWikiと被験者が日常で使用しているメモ帳アプリケーションとで作成してもらい,本文の入力にかかる時間を計測する.� �タイトル：食神本文：電気通信大学のすぐ近くにある中華料理店!メニューメニューには番号が割り振られていて、1から 12の中から食べたいものを選ぶ!!おすすめ*1番 麻婆豆腐**山椒がすごく効いていて、ピリッと辛い。*5番 麻婆春雨**普通の麻婆春雨だが、辛口を注文することで、劇的に辛さが変化する。**辛口を注文すると、食べ切れたかどうかの結果を店主が Twitterで報告してくれる。**半分以上残すと唐辛子の代金を追加で請求されるので注意が必要。� �
5.1.3 実験 2
目的 開発したシステムが,実際のグループワークにおいて有効であるかとともに, Wikiシステムがモバイルにおいても有効なツールとなるかを確認する.
1http://twitter.com
28
概要 東京都周辺の飲食店について,情報を収集,共有するシナリオを用意した. クライアントを持つ被験者それぞれが,外食のたびにその飲食店で食事をしたメニューや,お店の場所,雰囲気などの特徴をWiki記法でまとめ, サーバにアップロードしてもらう. また,被験者が既知の飲食店の情報についてあらかじめサーバに保存しておき,その飲食店について知っていることを追記してもらう,
というタスクも用意した. 最後にアプリケーションの使用感やスマートフォンを使ったWikiでの情報共有について,アンケートを行った.
手順 具体的な手順を以下に示す.
1. 実験前に,事前にサーバにいくつか記事を用意しておく (この記事の内容は, 筆者と被験者と実際に食事をした飲食店のデータである)
2. 被験者の端末に,アプリケーションをインストールする
3. まず同期処理を行ない,サーバから記事をダウンロードする
4. 既存の記事に追記,および新規に記事を追加して,サーバと同期する
アンケート アンケート内容を以下に示す.
1. スマートフォンの使用歴は何ヶ月か
2. PCでWikiを編集したことがあるか
3. 2.であると答えた場合,スマートフォンから編集したことはあるか
4. 2.であると答えた場合,本システムを利用すれば,スマートフォンで積極的にWikiを使えると感じたか
5. 2.でないと答えた場合, Wikiというシステムは記号入力が必要であるが,スマートフォンのキーボードで記号を入力するのは面倒であると感じるか
6. 2.でないと答えた場合,画面上部のバーから記号を入力する機能は便利だと感じたか
7. アプリケーションの使用感,同期のシステムなどについて自由記述で
なお,アンケートの回答形式は自由記述,スマートフォンの利用暦を除いて全てある/なしの 2択である.
5.2 実験結果5.2.1 実験 1
3人の被験者の,文章を入力するまでにかかった時間を表 5.1に示す.
被験者 3より,「Wikiアプリケーションは,記号入力は確かに便利だが,いちいち上にスクロールしなくてはいけないのが手間」という意見を頂戴した.
29
表 5.1: 実験 1の計測結果MobileWiki メモ帳 短縮された時間
被験者 1 4分 54秒 5分 51秒 57秒被験者 2 4分 06秒 4分 16秒 10秒被験者 3 4分 26秒 3分 50秒 -36秒
表 5.2: 実験 2のアンケート結果質問 1 質問 2 質問 3 質問 4 質問 5 質問 6
被験者 1 18ヶ月 ある ない 思った - -
被験者 2 19ヶ月 ある ない 思った - -
被験者 3 9ヶ月 ない - - 面倒と感じない 感じた被験者 4 3ヶ月 ない - - 面倒と感じる 感じた
5.2.2 実験 2
4人の被験者から得られたアンケート結果を表 5.2に示す.
アンケートで得られたアプリケーションおよびシステムに関する意見を以下に示す.
• 良い点
– UIがシンプルで良い
– 記号入力が簡単で幸せを感じた
– 記号入力バーの存在はありがたい
• 悪い点・意見
– キーボードを表示すると下部のバーが隠れてしまう (図 5.1(a))
– 文章を伸ばすと上部のバーが隠れてしまう (図 5.1(b))
– 位置情報取得の際に座標が本文に埋め込まれる意図がわからなかった
– 記事の検索やカテゴライズ機能が欲しい
– 記事ごとに同期,または同期する記事を選択したい
5.3 考察実験 1の結果より,編集時の画面上部に配置したツールバーは, 実験 2でも得られたコメントの通り,文章が長くなると上部のバーが隠れてしまう現象によって,逆に入力に時間がかかるというケースも見られたので, バーを固定するなどの処置を施せば,非常に効果的なUI部品となりうると考えられる. 実験 2の結果, Wikiを PCで利用した経験の有無に関わらず, 本アプリケーションはWikiとして情報を取りまとめるのに効果を発揮できるであろうという結果が得られた. また, シンプルな UIがわかりやすいという意見が多いため,機能追加の際にはシンプルさを保ちつつ適切
30
(a) キーボード表示で下部のバーが隠れる
(b) さらに長文になると上部のバーも隠れる
図 5.1: 問題点
な UIを設計する必要があると考えられる. モバイル環境におけるWikiを用いた情報共有に関しては,特に意見が得られなかった.
31
第6章 結論
6.1 結論本研究では,多くの記号入力を必要とするWikiの編集をスマートフォンで行いやすくすることに加え,モバイル環境においてWikiを用いた情報共有が有効な手段であると確認することを目的とした. その結果,設計した UIが,スマートフォンにおけるWikiの編集に有効である可能性は立証できた. また,モバイル環境における情報共有にWikiが有効かどうかは,判断材料に欠けるという結果となった.
6.2 今後の課題6.2.1 アプリケーション本体
アンケートで得られた意見 (前章を参照)や既存のWikiとの機能比較から,現在のアプリケーションに追加すべき機能や改善点を検討する.
使用できる記法 現在使用できるWiki記法は,
• 見出し
• 順序なしリスト
• リンク
のみである. この他にもWikiは表や文字の装飾 (強調,文字色,サイズ)など,沢山の記法をサポートしている. 可能な限り多くの記法が使用できるよう改善していく必要があると考えられる.
記事の検索機能 記事の数が増加していくにつれ,一覧表示だけでは必要な情報を取り出すのが困難になる. そこで,本文や記事のタイトルから,必要な記事を検索する必要があると考えられる.
UIの改善 評価実験の考察でも述べたが,編集時に文章が長くなるにつれ,ツールバーが隠れるという現象が発生している. この問題の他にも, UI的な改善点は多々あると思われるので,見つかり次第改善していく.
また, Wikiサイトによっては,編集時の UIとしてテキストボックス上に入力を支援するボタンが配置されていることがある (例：@Wiki1(図 6.1)).
項目が増えてくると,画面上部に部品が集中し煩雑になると考え今回は採用しなかったが,このパターンの UIを適用し,どちらがより効率的であるかを検討,調査することも今後の課題として挙げられる.
1http://atwiki.jp/
32
図 6.1: 編集領域上部にボタンがある UIの例
6.2.2 同期機能
アンケート結果から,同期機能についての改善点を検討する.
記事ごとに同期 現状では,アプリケーションとサーバにある記事の全てを対象に同期が行われる.
記事の数が増加すると処理に時間がかかる上,編集されていない古い記事について処理を行うのはリソースの無駄である. また,自分が編集した記事だけをアップロードしたいという意見もあるので,
• 選択した記事だけをアップロード
• 前回の同期の日付よりも更新日時が新しいものだけど同期の対象とする
という 2つの同期モードを追加すべきであると考えられる.
記事の上書き 現状では,同じ名前の記事が存在すると,同期した段階で編集した日時が新しい記事が優先して保存されるが, この仕様ではサーバに存在している記事を他人が更新していた場合,
その更新内容が失われてしまう恐れがある. この衝突問題の解決も早急に求められる.
写真の共有 本システムはサーバに記事を送信する際,位置情報は共有できるものの,クライアントが保持している写真については送信していない. クライアントが備えている機能を存分に発揮するためにも,写真の同期機能も実装しなくてはならないと考えられる. その際,各クライアントが同じ日付,時刻で記事を作成した場合,ファイル名が衝突してしまうので,各クライアントで一意な ID
を発行するなどして,ファイル名の衝突も避けねばならない.
6.2.3 研究全般
今回の実験では,思いの外被験者同士の記事の編集が発生せず, モバイル環境におけるWikiの有効性を判断するには材料不足となる結果となったので, もう少し長期間の運用実験を行い,改めて有効性を判断すべきであると考えられる.
33
謝辞
本研究は,電気通信大学情報通信工学科寺田研究室において,寺田実准教授のご指導の下,卒業研究として行われました.
寺田実准教授には,本研究を進めるにあたり,数多くの御助言,御指導を頂きました. 心より御礼申し上げます.
また,東京大学情報基盤センターの丸山一貴助教にも同様に研究室の輪講や研究全般において多くの御指摘や御指導を頂きました.心より御礼申し上げます.
本研究室修士課程二年の田中英人さん,修士課程一年の伊藤亜樹さん, 猪俣順平さん,大井彩香さん,太田侑介さん,学部四年の石川斉さん,井上尚亮さん,河上惟人さん,小沢美香さん,平山拓朗さんには,研究についての助言や,研究室での生活に関することなど,様々な面でお世話になりました.
本当にありがとうございました.
また評価実験にお付き合い頂いた学部四年の友人達, Twitterで知り合った数多くの友人達にも多大なる感謝を申し上げます.
34
関連図書
[1] 伊藤 久祥:電子情報通信学会技術研究報告. ET, 教育工学 103(226), 13-18, 2003.
[2] 村木 翔, 美馬 義亮:情報処理学会研究報告, コンピュータと教育研究会報告 2008(128), pp.69-74.
[3] 市村 匠, 鎌田 真, 目良 和也, 新美 礼彦:携帯アプリによる観光地情報収集システム, 第 15回日本知能情報ファジィ学会中国・四国支部大会講演論文集 (2010) pp. 5-8.
[4] 増子 直樹, 寺田 実:ネットワークを利用した手書きメモの同期/非同期共有システム, 電気通信大学卒業論文, 2010.
[5] 江渡 浩一郎, ”パターン、Wiki、XP～時を超えた創造の原則” ,技術評論社, 2009.
35