PositLog - スプライトモデルを用いた絵地図型のWebコンテンツ構築システム -

スプライトモデルを用いた 絵地図型のWebコンテンツ構築システム 久保田秀和（産業技術総合研究所）

Webを自由自在にレイアウトしたい Grid & Flow layout (blog) （従来）大きなブロックで構成 ＋ 縦の広がり Absolute layout (PositLog) 小さなブロックを任意の位置へ配置 ＋ 縦・横の広がり

アプローチ • 自由に移動できる小さなコンテンツ部品（Sprite）で ページを構成する • 雑多な情報を規格化・カプセル化することによって，統 一的な操作を可能にする． ABC... Sprites （x, y, z, w, h）

スプライトモデル マイクロコンテンツを統一的な方法で自由に 操作・配置するためのwrapper sprite（id, 配置情報） region （視覚的UI） 反応エリア contents （コンテンツ本体） HTML4.01，CSS2.1およびJavaScript1.3で記述され たコンテンツ info （メタデータ） タグなど 作者，更新時刻，uri，

スプライト（実装） HTML4.01，CSS2.1に基づいた実装 固有のIDをもつ，DIV要素の入れ子構造 <div class=“sprite” id=“sprXXXX” style=“position:absolute; top:10px; left:20px; ...”> <div class=“region”> <div class=“contents”> <div class=“info”> IDを指定して，CSSと JavaScriptで操作，配置． Wrapしてしまえば，中 身に依らず統一的に扱う ことができる （移動，削除，コピーな ど）

Spriteの中身はどんなHTMLでもOK ◼ 静的なデータ ◼ テキスト，HTML ◼ 動的なデータ ◼ OBJECT要素，IFRAME要素 ◼ 音声，動画，Flashなど各種メディア， ◼ YouTube，GoogleMapのようなブログパー ツ ◼ JavaScript ◼ スクリプトやボタンも埋め込み可能

UIの特徴その１ ◼ 直接編集 Web標準の技術（Ajax+HTML）を用いて，コンテンツの読み， 書き，配置を実現 ◼ いつでもどこでもWebページを編集 ◼ ページに直接，文字や矢印，注釈を書き込み ◼ 一般的なWebと互換 ◼ Flashのような閉じたシステム上にないため，HTMLのコピー＆ ペーストでさまざまなWebコンテンツを取り込み可能． ◼ ブログパーツ ◼ YouTube，GoogleMapなど

UIの特徴その2 ◼ ◼ 情報のカプセル化 ◼ 「スプライト」と呼ばれるHTMLベースのカードを作成，配置することにより ページ作成 ◼ 情報をスプライト形式を用いてパッケージ化することで，一貫した操作・整理法 を提供 自由なレイアウト ◼ ◼ カード型データベース 無限のスペース上の好きな位置にスプライトを配置 相互関係 ◼ 各スプライトにはpermalinkが与えられる ◼ ◼ URLを開くと，対象スプライトが中央となるようにページがスクロールして表示 http://wat.saasboard.jp/hidekaz/080803ao.html#id_spr6wpnu ◼ タグによる分類・整理 ◼ スプライトの再利用（エイリアス）

UIの特徴その3 ◼ ◼ 地図型インタフェース カジュアルなWeb閲覧 ◼ ページをドラッグでスクロール ◼ マウスホイールでズーム ◼ ページの全体地図も表示 空間的なコンテキスト提示 ◼ 表示位置ごとに個別のURLを持つ ◼ ◼ http://wat.saasboard.jp/hidekaz/080803ao.html?p=152,991&z=0.53 リンク先では，まわりのコンテンツも視野に入る リンク先 コンテキスト

そのほかの特徴 ◼ グループウェア機能 ◼ 投稿者，ページ毎の閲覧編集権限設定 ◼ ユーザグループ，ページグループの管理 ◼ RSS配信 ◼ プラグインによる拡張 ◼ ページテンプレート ◼ 国際化対応 ◼ 広汎な動作環境 ◼ サーバ側：Perl5.8のみ ◼ クライアント側：IE, Firefox, Opera, Safari

アーキテクチャ Page requests PositLog CGI HTML+CSS documents Sprite Sprite (Perl 5.8) Store/Retrieve Sprites Management data Storage PositLog Server XMLHttpRequest Response Control of drawing and layout PositLog JavaScript Diff of conents Import RSS Blogs abc… Web browser Contents editor

PositLog のこれまで ◼ 2006年6月 ◼ PositLog version 0.1 リリース 人工知能学会第7回AI若手の集い（MYCOM2006）において，優秀 プレゼンテーション賞を受賞 ◼ 2007年5月 ◼ PositLog（サーバインストール型）をオープンソースライセンス (GPL)で広く公開 ◼ 2008年2月 ◼ 英語版リリース ◼ 2008年12月までにのべ ◼ 2008年6月 ◼ ◼ 3,400 ダウンロード SaasBoardリリース ニューロネット株式会社と協力して，事業展開 SaaSとしてBtoB，BtoC（SNS）同時展開

ユーザによる作成例 ◼ コミュニティサイト ◼ 年表 ◼ グループ創作 ◼ イラスト帳 ◼ ミーティング支援 ◼ 遠隔会議 ◼ 講義支援 ◼ 議論の可視化 ◼ オンラインマニュアル

個人ページ（アーティスト，イラストレーター） 熊井正氏のサイト 置き方の無重力 （Akihiko Taniguchi氏のサイト）

キャリアデザイン支援 画像を検索，貼り付け 大阪大学・大学教育実践センター

掲示板 矢印でコメント イラストを書き添え ることも PositLog Forum (http://positlog.org/forum/positlog.cgi?load=pg071217gM_latest)

コミュニティサイト 関連情報のクリップ，自由帳など しずく氏 ひきこもりに関するコミュニティサイト（http://mizunosizuku.net/positlog/positlog.cgi）

年表？ 広さ50画面相当の巨大年表 多摩美術大学情報デザイン学科 Webマガジン「webAGORA」上で展開 http://webagora.jp/universe/

じつは，パンフレットの下書きでした ◼ 前スライドの年表は，多摩美術大学情報デザイン学 科創立10周年記念パンフレットの下書きだったそう です． ◼ 教職員，学生のみなさんが思うままに書き綴った様子 創立以降の歴史が放射状 にレイアウトされている

グループ創作 アイデアノート，スケッ チ，年表，地図など hsy氏「ゆらぎの地図帳」

手書きによるノウハウ SP48K氏のサイト

個人ページ（コレクター） お気に入りのニコニコ動画 を集めて並べてコメント SP48K氏のサイト

ワークショップ支援 ホワイトボード． 会議のアジェンダ， 発表に対するコメント 人工知能学会 MYCOM 2006, 2007 (http://cresta.kuis.kyoto-u.ac.jp/positlog/mycom2007.html)

講義支援 講義資料配付， コミュニケーション， レポート作成 公開された講義資 料に対して，直接 質問書き込み 情報技術演習 http://cresta.kuis.kyoto-u.ac.jp/positlog/itp.html （京都大学文学部／情報・史料学専修2006，Matsuzaka氏のレポートページ)

議論の可視化 KJ法，ブレストの結果を Webで公開 AI2.0 http://cresta.kuis.kyoto-u.ac.jp/positlog/positlog.cgi?load=070702oX

オンラインマニュアル 手書きツール，矢印ツール，タ グを活用して，グラフィカルな 索引付きマニュアルを作成 http://positlog.org/

訪問者に与えた印象 ◼ ソーシャルブックマークのタ グより ◼ ◼ ◼ Web, Webサービス，ツール 構成技術 ◼ Ajax, Perl システムの用途 ◼ Blog, CMS, Wiki 特徴的な機能 ◼ UI，地図 241件公開 システムの提供形態 ◼ ◼ del.icio.us ◼ ◼ 510件（うち391件公開） 既存のWebシステムとの関連 ◼ はてなブックマーク ◼ ◼ ◼ Webデザイン，mindmap ◼ なお，タグ以外の自由記述で は，付箋紙感覚での利用，ホ ワイトボードや情報共有ツー ルとしての利用，自由なレイ アウトについて述べられた．

訪問者に与えた印象 はてなブックマークにおけるタグ タグ名 登場数 Webサービス101 ツール Ajax Blog Web CMS Webデザイン56 これはすごい ソフトウェア Perl Web2.0 サービス JavaScript Webアプリ あとで読む アイデア PositLog Wiki デザイン UI オープンソース フリーソフト 地図 その他 87 87 74 61 56 55 38 37 32 26 24 21 20 18 15 14 13 12 6 6 5 53 del.icio.usにおけるタグ タグ名 Ajax blog tools software Web2.0 Web perl cms free webdesign javascript positlog webservice application service wiki mindmap map idea ui canvas css design drawing opensource 登場数 97 81 60 52 50 41 34 31 25 20 16 16 15 10 10 10 9 9 7 7 6 6 5 5 5

大学講義での利用 ◼ ◼ ◼ 文学部情報技術演習（2-4回生）の議論とレポート レポートは調査段階ごとにまとめてPositLogに掲載，他の受講者 からのコメント書き込みをうけて改稿 受講者にとって身近な情報技術を各自提案 2006年度 2007年度 ◼ 「動画編集とYouTubeを巡る諸問題につ ◼ 「インターネット広告」 いて」 ◼ 「おサイフケータイは使えるか」 ◼ 「情報操作と戦争」 ◼ 「ブログについて」 ◼ 「Wikipediaにおける議論のイメージ」 ◼ 「ニコニコ動画という現象について」 ◼ 「ゲームから見る3Dグラフィックス」 ◼ 「仮想現実の中での『現実』と『楽し さ』について」 ◼ 「アートフォームとしてのMySpace」 ◼ 「モバイル・コンピューティング」 ◼ 「人工知能の可能性について」 ◼ 「電子化される書籍」

参加者 講義レポート ◼ 2006年度 ◼ ◼ ほとんどが従来的な1コラム論文形 式 参加者Fのみブレスト／KJ法の島のよ うな配置 ◼ 2007年度 ◼ ◼ ◼ これまでのページ作成事例を事前に 提示 ページ数，スプライト数ともに2006 年度の倍 横方向への配置を持つ A B C D E F G 平均 参加者 H I J K L M 平均 参加者F 「電子化される書籍」 表3：2006年度レポート ページ数 スプライト数 1 1 3 1 1 4 5 2.3 30 34 21 19 13 78 32 32.4 表4：2007年度レポート ページ数 スプライト数 6 1 4 4 8 7 5 82 31 39 49 87 91 63.2

おわりに ◼ 現在のようなブログを用いたコミュニケーションスタイルを盛 り上げたのは，MovableTypeやWordPressのような個人用 CMSツール ◼ ◼ 企業によるサービス化と相補的に発展 「次」のWebコミュニケーション基盤となるようなCMSツー ルを目指しています。