次世代Webプラットフォーム論(9) Wiki 2017/1/16

Wiki

Wikiとは

サーバ上の文書をブラウザで編集できるシステム

Web上の情報共有に利用

Webページをユーザが自由に編集

認証のあるものもある

他ページへのリンクを簡単に設置可能

簡易マークアップ

c.f. Web上のメモ共有サービス

GoogleDocs

EtherPad

Googleに買われた後オープンソースに

TitanPad

c.f. Web上にデータ保存

Dropbox

Evernote

Wikiの例

http://qwik.jp/wiss-pc/FrontPage.html http://gyazo.com/13a6ebe0255f7b053ea9b9bbaa818678.png

Wikipedia

MediaWikiで作った百科事典

http://gyazo.com/05fc583bf16aee2c809bc0c6a07b290d.png

Wiki ≠ Wikipedia

WikipediaはMediaWikiで作った百科事典

Wikipediaのことをウィキと呼んではいけない

Wiki ≠ Wikileaks

USB ≠ USBメモリ

Wikiの利点

手軽な情報共有

手軽な情報編集

どこでも使える

HTMLを知らなくても良い

ブラウザの編集機能

最初のブラウザは編集機能があった

Tim Berners-Leeのポリシー

Netscape Composerあたりまで

Netscape Composer

http://gyazo.com/f96346d28ad446e292048b0b5314f74e.png

Wikiの歴史

1991 WWW誕生

1995 c2.comでWiki Wiki Web公開

http://gyazo.com/f7d8abafec50d64da03df308c9e599a3.png

Wiki Wiki Web @ c2.com

Ward Cunninghamが作成

Perlで331行

文芸的プログラミング

「キャメルケース」

「WikiName」のような記法

自動的にリンクになる

Wiki Wikiバス

http://gyazo.com/c729cfd5488d9d8f4d825ca25510e1d3.png

Wiki Wikiバス

http://gyazo.com/43a24d49bddd2d237b768bfb82d67921.png

Ward Cunningham

Wiki, デザインパターン, Extreme Programming (XP)

http://gyazo.com/1e5d8060ae0bbd4ecec9c1b05f83d64d.png

Wiki Wiki Web

http://gyazo.com/f7d8abafec50d64da03df308c9e599a3.png

Wiki Wiki Web

http://gyazo.com/69d068bb952f48a0b1ed37a8b6176af6.png

デモ: Wiki Wiki Web

江渡浩一郎氏による解説本

http://gyazo.com/3aed10a801567acbbfbc6139444679ac.png

江渡本概要

Wikipediaに代表される「Wiki」は、多くの人々に使われるソフトウェアに成長しました。

「XP(エクストリームプログラミング)」は、現在主流となりつつあるアジャイルな開発方法論です。

設計の定石集である「デザインパターン」は、今や開発者の必須知識となっています。

Wiki、XP、デザインパターン。一見、何の関係もなさそうに思えるこの3つは、実は同じ起源から発生した兄弟です。

しかもその起源は、ソフトウェア開発とは何の関係もない異分野の人である、建築家クリストファー・アレグザンダーの理論に端を発しています。

本書では、アレグザンダー(パターンランゲージの発明者)、ウォード・カニンガム(Wikiの発明者)、ケント・ベック(XPの提唱者)らが織りなす40年の歴史物語を辿りながら、優れた創造を行うための共通原則に迫ります。

著者コメント

私は6年前よりWikiの設計思想について調べてきました。

建築家クリストファー・アレグザンダーの思想にその答えがありました。

アレグザンダーとWikiを巡る歴史物語をまとめた本を書くことができました。

「デザインパターンのどこがいいのかわからん!」

「XPって本当に役に立つの?」

「Wikiに何を書けばいいんだろう...」

そう思っているあなたへおすすめします。

デザインパターン

ソフトウェア開発におけるデザインパターン（型紙（かたがみ）または設計パターン、英: design pattern）とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。

江渡本目次

序章　パターン，Wiki，XPの起源へ

1章　クリストファー・アレグザンダーによる美の原理の追及

2章　アレグザンダーの6つの原理

3章　パターンランゲージ

4章　時を超えた建設の道

5章　パターンランゲージによる建築の実際

6章　アレグザンダーの現在

7章　オブジェクト指向

8章　ソフトウェア開発へのパターンの適用

9章　デザインパターン

10章　プロセスへのパターンの適用

11章　エクストリームプログラミング

12章　HyperCardによるパターンブラウザ

13章　WikiWikiWeb

14章　Wikiモードによるコミュニケーションパターン

15章　Wiki設計原則

16章　Wikiエンジン

17章　Wikipedia

18章　Wikiの現在

終章　時を超えた創造の原則

著者プロフィール

Wikiの問題点

編集モードの切換えが面倒

Wiki用のタグを覚えるのが面倒

古い記述と新しい記述の区別がつかない

ページタイトルを変えるのが難しい

リンクも全部変更の必要あり

Wikiの問題点

小さなデータを管理し辛い

大きなページになりがち

ページ構造やタイトルを最初から真面目に考える必要がある

後から変更するのが難しい

孤立ページができる可能性がある

Wikiタグ

qwikWebのタグ記法

Wikiの拡張

動的なページ生成

JavaScriptでページ生成

パラグラフ化

パラグラフ単位の編集を可能にする

Wikiの拡張

IF部品の利用

投稿フォーム

投票ボタン

PDAのWiki

e.g. PalmWiki

掲示板との融合

様々なWikiクローン

YukiWiki

早い時期に結城浩氏作成

様々なシステムに真似られた

YukiWikiMini

結城浩氏作成の簡易Wiki

Perlで100行

PukiWiki

YukiWikiをPHPにしたもの

増井雄一郎氏開発

Wikiクローン

Hiki

たけうちひとし氏

Ruby

RWiki

関氏

Ruby

Wikiクローン

MediaWiki

Wikipedia用に開発

MoinMoin

海外でポピュラーなWiki

Python

Wikiサービス

7行Wiki

http://www.hyuki.com/dig/7wiki.html http://gyazo.com/d6758dbe6bc274b9892a60dab309e248.png

PalmWiki

http://gyazo.com/9a65db95baedb0abb3e82a699c4dbe71.png

Wikiと掲示板の比較

Wiki = ストック型

いつでも参加できる

古いデータが消えてしまう

掲示板 = フロー型

データが消えずに時間順に並ぶ

古いデータの編集不可

Wiki掲示板システム

Wikiと掲示板を併用

http://gyazo.com/a8396b53cdf643f58203e81c1257fa4c.png

Wiki型ページ

http://gyazo.com/1a3eb768b0ff56dd726573bc6c0aacbe.png

掲示板型ページ

http://gyazo.com/3d55b494968aafe9a404337a97c4bb44.png

メーリングリストとWiki

メーリングリスト = フロー情報

Wiki = ストック情報

併用するとうまくいく可能性あり

QuickML + Wiki

QuickMLとWikiを併用

ストック情報とフロー情報の両者を適宜利用

メーリングリストのWikiページ

http://i.gyazo.com/ea51bd3046b7eb70e99271cf1011f98f.png

qwikWeb

MLに流れたメールが自動的にWikiページになる

http://qwik.jp/yomoyomo/4.html http://gyazo.com/16ea9e50a500a96c08670b8d7dfa31a7.png

デモ: qwikWeb

qwikWebの問題点

メール記事を後で編集できてしまう

あらゆるメール記事が意図せずWebページになってしまう

Gyazz

http://gyazo.com/4f97f746d4804cc9fec11a22312b5bb7.png

Gyazz

Wikiの問題点を改善

編集モードが面倒臭い

セーブが面倒

逆リンクが無い

特殊なタグ記法

古い記述と新しい記述の区別がつかない

Gyazz

オートセーブ

簡単なタグ記法

アウトライン編集

あらゆるバージョン保存

日本語インクリメンタル検索

画像リンク表示

自動桁揃え

行/桁変換

画像なぞなぞ認証

アイコン表示

編集情報をチャットで通知

増井研Gyazz

http://gyazo.com/b4742192e948f0abae9904d0234a6489.png

デモ: Gyazz

デモ: メモへの利用

どこでも読める

どこでも書ける

リンク情報をたどるのが便利

デモ: 研究室ホームページ

デモ: プログラミングへの応用

文芸的プログラミングを実現

デモ: 日本語入力辞書編集

単語接続情報を定義

http://gyazo.com/73e46f58850dd4f8b428123498a7f633.png

Slime: Android版IMEなどで利用

デモ: 日本語入力辞書編集

デモ: 推薦Wiki

ジャンルを問わず良いものを推薦

小さな集団で情報共有

とっておきの店/場所の公開を促進する

デモ: プレゼンの利用

Wikiに書いたものをすぐにスライドショー可能

デモ: ファイルアップロード

デモ: 編集履歴の視覚化

デモ: チャット通知

Gyazz for Android

http://gyazo.com/613f38bec4f7ca69da5b44bbf7193d55.png

Gyazzの課題

編集衝突対策

使い方の簡単化

Scrapbox

https://gyazo.com/1b129045fcb1ea47afbbec786582d3b1

Gyazzの新実装

Scrapboxの特徴

WYSIWYG同時編集

アイコン記法

簡単で協力なタグ記法

Scrapboxの例

/Wordnet

/masuilab

Wiki的システム

本棚.org

地図帳.org

ユーザ登録せずにページを編集

本棚.org

Web上で書籍情報共有

http://gyazo.com/4401b49e940bb988040ec683a225ef3e.png

デモ: 本棚.org

地図帳.org

位置情報共有

店、観光地、レストラン、...

http://gyazo.com/c45569af74ed60dcf966b1f4ee6cc40b.png

Wiki的システムの問題点

荒らされやすい

2015/6 本棚.orgがボロボロにされた

直感的でない?

Wikipediaの編集履歴

「Abortion」の編集履歴

http://gyazo.com/47ba75aff16d3e1f511bf40da93dfb3e.png

まとめ

Wikipedia以外にあまり使われていない

なにかと面倒なことが多い

Webサービスは若干利用されている

うまく実装すればかなり便利

e.g. Scrapbox

今後に期待