UI全般については
→UI

目次 † Edit

  1. 目次
    1. 関連
  2. ページ/編集/UIとは
  3. 思い付き
    1. 個人用スタイル、ビュー
    2. 全画面モード
    3. テキストエリアを使わずに（テキストで）編集したい
    4. マウス用UI
    5. 次へ
    6. 編集直後のページ表示では、編集した行に「更新した」というマークを
    7. 編集後は差分表示へリダイレクト
    8. 追加用のテキストエリアを一行テキストボックスに変更可能に
    9. ページ/継承欄
    10. プレビューは入力欄と違うページに
    11. プレビュー不要
    12. プレビューでも「ページ/最新の差分を強調」
    13. 消すボタン封じ
    14. リロード時のページ破棄封じ
    15. フォーム
    16. 間違えにくいショートカットキー
    17. ヘルプ内検索ボックス
    18. テンプレート一覧
    19. とりあえず投稿
    20. 型やフォーマットよりも用途を選ぶ
    21. 新規作成時に既存ページ名を参照したい
    22. 新規作成時、履歴が目に留まるように
    23. 新規作成時、Googleのサジェストを見たい
    24. ページ/編集ページにGoogle検索リンクを載せたい
    25. ファイル取り込み
    26. 画像を貼りやすく
    27. 下位ページを含む編集が分かりやすいように
    28. WYSIWYG編集
  4. 早く入力するために
    1. 続けて新規作成
    2. 投稿時にページ遷移なし
    3. フォーム2つに
    4. テキストボックス化
    5. 「かんたん機能入力サポート」
    6. クリックで章追加
    7. ユニバーサルエディットボタン(Universal Edit Button)
  5. 方法
    1. よく出てくる単語（頻出語）の一覧
    2. 削除できない
    3. フォーム生成時すでにパーマリンク
    4. 編集キャンセルはリンク
    5. 一定割合以上変更されるなら確認
    6. 閲覧時編集
    7. 全画面
    8. 編集欄に前空行
    9. ユーザーから見たページ構成
    10. 削除時の警告
    11. 属性変更
    12. ページ遷移なし編集を実装するなら
  6. 参考に
    1. Atlassian Confluence
    1. 追記するとき
    2. 編集者用メニューにdiffを
    3. アクセスキーはユーザー設定
    4. 編集ページは可変長
    5. 新規ページ作成時、ページを作ってから入力受け付け

関連 † Edit

検索:UI

#tagcloud(0,related=UI)

 

ページ/編集/UIとは † Edit

ページ編集のためのUIについて。

思い付き † Edit

ページ名を表示するようなブックマークレットがあればiPhone用Safariでも便利。
ページ名になる記法をページ編集以外にどこでも使えるようにすることでも解決できそう。

個人用スタイル、ビュー † Edit

あまり深刻にならない範囲で、認証済みユーザーはビューを選択可能に。
1.スタイルシートだけ
工夫なしにできる。
2.ビュー全て
システムの既定値と互換性がないと。

ビューとはページ。内容はフォームも含めてNotationになっているのでページ化できる。
つまり個人用編集ページ。

全画面モード † Edit

Macのテキストエディターにあるような全画面テキストエリアのモード。
トグルスイッチで、値は永続化。

黒背景テーマと合わせて。

要、安心感。データが失われることのないように。

テキストエリアを使わずに（テキストで）編集したい † Edit

編集した行頭にマークを付けようとしても、テキストエリアの中にマークを入れないといけないが、送信されたときにマークを削除しなければならなくて不便。
（クライアント側で調整しない限り）テキストエリアでは閲覧時とフォントが異なるため、閲覧ページと同じ文字で編集したい。

マウス用UI † Edit

例えばリスト編集専用の、ドラッグ操作で項目の順序を入れ替えるUI。
編集ページはテキスト用なので、閲覧用ビューか、また別のビューで。

次へ † Edit

iPhoneのSafari用に。
ページの更新ボタンを押す必要があるとき、「次へ」ボタンで更新ボタンのそばまでスクロールできる。

→iPhone用なら、ページングか、WikipediaのようなCollapse/Expand式に。

編集直後のページ表示では、編集した行に「更新した」というマークを † Edit

章立てになっていても、1つの章が長い場合もあるので、行単位で。

つまり、差分表示のページへ遷移。
差分表示はWikiTextソースではなく、閲覧用の表示で行ないたい。
見やすいので。

編集後は差分表示へリダイレクト † Edit

誤った編集をしても、前のページが表示されているのですぐにコピペできる。（リバートは場合によっては適切ではない。やり直しになってしまう。やり直しよりは編集前を見ながら訂正した方が簡単）

差分表示にはWikiTextのほか、HTML表示（閲覧時そのまま）も付けて。

追加用のテキストエリアを一行テキストボックスに変更可能に † Edit

Enterで送信できるのが良い。
この場合、改行を別の文字で代用。送信されると改行になる。
記法
で良い。閲覧時に<br />に変換。編集時に置き換えなくてもいい。

一行タイプにするかどうかは追加コマンドとは別に「一行追加コマンド」でも作ればいい。
付け足しだけで実現できる。

挙動はGoogle:checkpad.jpのように。

ページ/継承欄 † Edit

ページ/継承される可能部分を書く。

ページの属性を決めるような機能はページ本文とは別に書きたい。
本文を書くときに邪魔になったり、いつの間にか重複していたりするので。
欄内では呼び出し記述ごとにソート。

テキストエリア。
1行に1つ。

閲覧時展開で本文とマージ（連結）、1つのテキストとして処理するので、本文内に書いた場合と変わらない。
編集ごとにソートされる点が本文欄と違う。
ソートされることを利用して、こちらに本文を書くこともできる。

編集時に本文と別れていればいい。

プレビューは入力欄と違うページに † Edit

新しいウィンドウかインラインフレームで。
本当のページでなければプレビューにならない。

プレビュー不要 † Edit

戻しやすく戻したときに跡が残らない「更新」を導入する。
→これで編集とプレビューをまとめる。
→他ページから参照される部分もプレビューできる。プレビューが他のページに影響を与えるところも確認できる。

プレビューページは参照不可能でそのうち削除されるページ。
機能のトリガーのため。
UIから使うためのもの。機能でなら元から可能だから。

プレビューでも「ページ/最新の差分を強調」 † Edit

章のサブページ化があるので変更した部分は追いやすくなるけど。

消すボタン封じ † Edit

IEであってもESCキーで消えないように。
ESCキーは「範囲選択を解除」とか「IMEの状態を初期化」だけでいい。

リロード時のページ破棄封じ † Edit

ページの有効期限を適切に付けて。
またはページ遷移封じを。ページ遷移でフォームの内容が残るならリロードだけを封じて。

フォーム † Edit

ページを作るボタンにはテキストボックスを。つまり「…というページを作る」ということ。
「ページを作る」よりも「見たいページ」のほうがいい。「…というページを見る」。作成と閲覧と検索のUIを一つに。
検索ボックスでいいかも知れない。検索結果にはページ作成フォームがあるので。

「…というページはありません」ではなく「…について書いてください」というメッセージ。

間違えにくいショートカットキー † Edit

ページの編集のUIで、Alt+SやAlt+PよりもAlt+f 1回、Alt+f 2回のほうが間違えにくい。

ヘルプ内検索ボックス † Edit

編集中にヘルプを読みたいことがある。

テンプレート一覧 † Edit

編集欄の傍らにテンプレート一覧とその検索ボックスを。ヘルプ検索と統合してもいいかも。ヘルプは見るだけの（コピペしない）テンプレート。

テンプレート項目は1行〜3行程度。
検索ボックスに入力→絞り込み、ソート順は前方一致したもの＞部分一致したもの。第二キーは辞書順。

アクセスキーやマウスで選択→カーソル位置に挿入。
例えば…

[[Googleで検索:検索キーワード]]

テキストボックスが文字装飾可能なら、「検索キーワード」の部分は淡い文字で表示。

テンプレートの他、添付ファイルの一覧も同じ一覧に含めて。添付ファイルを埋め込むような記法で。

とりあえず投稿 † Edit

一部でも投稿できるように。
Wikiは推敲できるのが特徴だから。

ページ名が無い、内容が無い、機能に必要な引数が無い、設定が無い、クエリーが無いなど。

後で編集できるように。
※作成時と同じUIで。

型やフォーマットよりも用途を選ぶ † Edit

一つの用途は複数のデータ型でできている。
一つのフォーマットを返すだけで完結するユースケースはまずない。

が、一つのユースケースは、フォーム呼び出し→入力（Ajaxでの入力補助含む）→リクエスト→レスポンス、で達成されるのがいい。リクエストがバックグラウンドで行われるなら、リクエストとレスポンスの代わりに「ユーザーが結果に満足して次へ」になる。

なので、一つのレスポンスにはそれだけでユースケースを達成するように複数のフォーマットを混在させることになる。

新規作成時に既存ページ名を参照したい † Edit

→追記先検索の機能で。

新規作成時、履歴が目に留まるように † Edit

ページ新規作成時の追記先探しにそのページ（が削除される前の）の履歴も含める。

新規作成時、Googleのサジェストを見たい † Edit

吹き出しで、Google先生はこうおっしゃっていると。

ページ/編集ページにGoogle検索リンクを載せたい † Edit

編集ページの定義に、ページ名（フルパス）を検索するリンクを入れればいい。
ルートページの名前も含めれば、そのWikiに関連するページだけが検索されるはず。

コンテンツだけで可能。
ページ名をスペース区切りにするような機能も必要？

ファイル取り込み † Edit

特定ディレクトリに置いてあるファイルを自動的に取り込む。

  1. ファイルを作る
  2. FTPクライアントなどでどこかにアップロード
    他サーバーでも可？
    ※ファイル一覧が得られないと不可能。
  3. 取り込み
  4. マークアップをページに書き込むことで貼り付け

取り込む際、ファイル名がページ名になる。（だから/が使えない）

拡張子次第で取り込み方振り分け。
結果は取り込みログ専用ページ（単一）に。取り込みがあれば通常通りのページ更新。通知機能なども働く。
ログ内容は記録とすぐ活用するための何か（イメージなら貼り付け用の記法など）

この一覧のテンプレートはページになっていて、編集可能。

:t/インポート

画像を貼りやすく † Edit

画像やその他ファイルを貼るとき、既存のファイル名を調べたりしなくていいように。

  • 名前（利用者が扱う名前）が重複したら自動的に変更。
    RIGHT::t/ページ/内部名[?]
  • 時刻を名前にする。
    機能呼び出しには近い時刻を付ければいい。

…のどちらかで。

「1つ前の」という指定で埋め込める。
編集時に展開されるように。

ファイルの種別はMIMEか拡張子から自動判別。

→検索可能な一覧を編集ページに。

→テンプレート一覧に添付ファイルも含める機能で。
どこにも貼られていない添付ファイルが分かるような色づけで。

下位ページを含む編集が分かりやすいように † Edit

下位ページを含むような大きな見出しの編集ボタンと、下位の編集ボタンは違うデザインで。
テキストで文字を付けたほうがいいかも知れない。見出しに合わせて大きな文字になるので。

WYSIWYG編集 † Edit

利点

  • プレビューせずにカーソル位置で自動リンクを作れる
    ちゃんとリンクすることをすぐに確認できる。（オートフォーマットでもできること）

早く入力するために † Edit

続けて新規作成 † Edit

新規作成ページはページ一覧を備える。
で、送信後にまた空の新規作成ページを返すように。
続けて新規作成ができるようになる。

新規作成ページを別フレームにするのもいい。

コンテンツだけで可能。

投稿時にページ遷移なし † Edit

編集・投稿→そのまま。投稿処理はキューイング。
投稿に必要なトークンは更新するか再び使用可能。

投稿後に閲覧ビューを呼ぶと２つのユースケースを同時に行うので遅い。分ければ体感速度は早くなる。

フォーム2つに † Edit

フォームを2つ用意、Tabキーでフォーカスを移して、1文字でも入力した時点で前のフォームを（バックグラウンドで）送信。
というのもいい。
1文字入力を待つのは間違い防止のため。
全てのページを打ち終わったら「送信」ボタン。最後のフォームを送信してページ遷移。

コンテンツの追加だけで可能。

テキストボックス化 † Edit

最近編集したページ一覧で。
ページ名を選択するとテキストボックス化。ページ内容が読み込まれる。
編集後、送信。ページは更新され、テキストボックスはページ名に戻る。

編集日時などは更新してもページリロードまでソートしないこと。

「かんたん機能入力サポート」 † Edit

[[@wiki><a href="http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？">http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？</a>
要はパラメータの意味を出すヘルプがあればいい。入力欄は分けないほうがいい。

打っているそばから表示更新…はカーソル位置が得られないと…差分を得て…は重くて無理。
→選択すると表示。

→テンプレート一覧のような検索可能な一覧で実現。

クリックで章追加 † Edit

最初の章と最後の章には「ここに追加」ボタンを。
全章に付けてもいい。
ページの途中、任意の章の前に追加するのをやりやすく。

ユニバーサルエディットボタン(Universal Edit Button) † Edit

<link rel="alternate"
 type="application/wiki"
 title="このページを編集..."
 href="?%E3%83%9A%E3%83%BC%E3%82%B8%2F%E7%B7%A8%E9%9B%86%2FUI&cmd=edit"
/>

†<a href="http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E">http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E>http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E]]</a>

方法 † Edit

よく出てくる単語（頻出語）の一覧 † Edit

新しいページを作るきっかけなので、「新規ページ作成」ボタンの前に利用者に見せたい。
新規作成のページで表示するのもいい。ページ名を統一するために。似ているページ名を探すのに役立つ。

独立したページにすべき。
活用しやすくするため。1ページが1つのDBテーブルのようなもの。

頻出語のリストには、最後に発見された*1日付も。
データを活用するために。

→機能/テンプレート生成[?]

削除できない † Edit

「削除」という言葉を排除。管理者以外は削除できないので。
代わりに「アーカイブにしまう」か「履歴にしまう」か「用済みにする」か「無効化する」という表現を。

付け加えるなら「最新版を見えなくして」とか「最新版を削除して」…

フォーム生成時すでにパーマリンク † Edit

永続的なURIでページ作成。
戻るボタンを押して戻れたり、ページ作成画面をブックマークできたりするように。

「存在しないページは新規作成」なので、予めURIを作っておいたほうが実装はシンプルになる。

編集キャンセルはリンク † Edit

ページ移動するだけなので。プレビューWiki終了にしても一時データはまだある。ブラウザーの戻るボタンで戻れるように。

一定割合以上変更されるなら確認 † Edit

SPAM対策と誤り防止。
一定割合以上変更されたら（編集前後の共通点が一定割合以下なら）確認のページ。権限は特に要らない。
割合はサイトの設定による。

閲覧時編集 † Edit

チェックボックスなどは閲覧時に編集したい。
検索:チェックボックス
チェックを入れるとページ更新。残る。

これをリスト記法 (ol, ul, 定義リスト) の機能にすれば…？

行単位選択、行ごとに一つの記法で書き換えするツール。編集時に使えるように。取り消し線をかけたり。

全画面 † Edit

編集対象だけを表示するモード。ブラウザーの全画面モードと組み合わせればディスプレイ全体を使える。

全画面での閲覧ならブラウザー側でできる。利用者設定のペインを全ページの共通部分に表示すれば広い画面でも活用できる。閲覧ならブラウザーの機能と併用したほうがいいので、特別なUIは要らない。

編集欄に前空行 † Edit

iPhoneでも追加しやすいように。
文頭、文末の空行は削除、必要なときに自動付与。

ユーザーから見たページ構成 † Edit

階層化しても、上位ページ（基準ページの1つ下）に統合されるように見える。
ページ/編集/UI → 「ページ」の一部になる。UIや編集の一部でもある。全てのページにUI/ページ/編集やページ/編集/UIとして表示される。

基準ページの下からが見出しになる。
ルートページ/UI/ページ/編集 という見出しは
UI/ページ/編集 と表示される。

下位展開しないページを基準にするべき。
→一体化。

ページ作成、投稿後、基準ページ（の一つ下）の今作成した見出しへジャンプ。
深い階層にページを作っても、基準ページ（の一つ下）の一部になる。

見出しを変更すると、基準ページ内の位置ばかりか対応する基準ページも変わる。

例:
ページ1を編集、「ページ2」で始まる見出しにすると投稿後にページ2の投稿した見出しにジャンプ。

削除時の警告 † Edit

ページ内容を空にした瞬間、「このまま保存すると削除になり、下位ページもいずれ削除されます。」というメッセージを表示。
ダイアログではなく、表示するだけのもの。

空でなくなった瞬間に警告は消すこと。

空にしたときのメッセージに「削除する」ボタンを入れるのもいい。分かりやすい。
実際は「ページの更新」と同じボタン。

属性変更 † Edit

正規表現でページセット作成、それらの属性を指定した値に変更。
値名と値はどう指定するか。→文字列で。値を空文字列にすると削除。

ページ遷移なし編集を実装するなら † Edit

ここに追加1.png

↓

ここに追加2.png

章に付いている編集アイコンで章の編集。

細部の編集用。

ここに追加1.png

↓

ここに追加3.png

章末尾の追加アイコンでそこに追加。

章編集で章より前に追加しても同じ。分かっている利用者にとってこのボタンは不要。

ページ遷移を伴うがっつり編集モードはページ冒頭のツールバーにでも置いた編集アイコンから。
編集サポートやツールが使いやすいモード。

編集後も画面遷移は無いので差分を確認したいなら差分コマンドを実行してもらう。

参考に † Edit

Atlassian Confluence † Edit

12 Things You Didn't Know About the Confluence Editor | Atlassian Blogs
記法を使わないエディターが持つ12の機能。

† Edit

追記するとき † Edit

Wikiに追記するとき…

  1. 検索する
  2. 繰り返す
    1. 検索結果から追加位置を探す
    2. それっぽいページを開く
  3. 追記する

この繰り返し部分を減らすには？

Tag: 手間を省く

編集者用メニューにdiffを † Edit

編集者の場合によく使うメニュー

  1. 差分(diff)
  2. 検索
  3. 編集
  4. 新規
  5. 最終更新

同じページを毎日チェックするとか、
書くとか、書く前に検索、編集するか新規作成か考えるためのメニュー。

アクセスキーはユーザー設定 † Edit

編集ページは可変長 † Edit

テキストエリアは可変長。でもブラウザーの機能で出来てる。
テキストエリアのスクロールバーを出さないように十分な大きさに伸ばす。
代わりにページのスクロールバーを使う。

新規ページ作成時、ページを作ってから入力受け付け † Edit

通常では「ページ作成」（またはDanglingLinkを使用）→更新をして作成されるページ。
これをページ作成で作成するようにする。（で、既存ページを更新することに）

作成されるページ内容はWikiの定義による。
「ページ新規作成時のテンプレート」というページで定義。

DanglingLinkをクリックするだけでページが作られる。