UI全般については
→UI

目次 † Edit

  1. 目次
  2. 関連
  3. UI周辺のタグ
  4. ページ/編集/UIとは
  5. 思い付き
    1. テキストエリアを使わずに編集したい
    2. 次へ
    3. 編集直後のページ表示では、編集した行に「更新した」というマークを
    4. 追加用のテキストエリアを一行テキストボックスに変更可能に
    5. プラグイン専用欄
    6. プレビューは入力欄と違うページに
    7. プレビュー不要
    8. 消すボタン封じ
    9. リロード時のページ破棄封じ
    10. フォーム
    11. 間違えにくい
    12. ヘルプ内検索ボックス
    13. テンプレート一覧
    14. とりあえず投稿
    15. ページ編集時にページ名変更可能
    16. 新規作成時に既存ページ名を参照したい
    17. ページ/編集ページにGoogle検索リンクを載せたい
    18. ファイル取り込み
    19. 画像を貼りやすく
  6. 早く入力するために
    1. 続けて新規作成
    2. フォーム2つに
    3. テキストボックス化
    4. 「かんたんプラグイン入力サポート」
    5. クリックで章追加
    6. ユニバーサルエディットボタン(Universal Edit Button)
  7. 実装
    1. ページ遷移なし編集を実装するなら

関連 † Edit

検索:UI

UI周辺のタグ † Edit

Array

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

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

思い付き † Edit

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

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

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

次へ † Edit

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

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

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

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

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

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

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

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

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

プラグイン専用欄 † Edit

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

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

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

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

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

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

プレビュー不要 † Edit

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

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

消すボタン封じ † 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

編集時、ページ属性としてページ名を表示。
いつでも変更可能。ページ編集ができればページ名も変えられる。

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

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

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

コンテンツだけで可能。

ファイル取り込み † Edit

定位置に置いてあるファイルを自動的に取り込む。

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

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

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

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

:t/インポート

画像を貼りやすく † Edit

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

  • 名前（利用者が扱う名前）が重複したら自動的に変更。
  • 時刻を名前にする。
    プラグイン呼び出しには近い時刻を付ければいい。

…のどちらかで。

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

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

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

早く入力するために † Edit

続けて新規作成 † Edit

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

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

フォーム2つに † Edit

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

テキストボックス化 † Edit

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

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

「かんたんプラグイン入力サポート」 † Edit

@wikiの「かんたんプラグイン入力サポート」のようなものはどうか？
要はパラメータの意味を出すヘルプがあればいい。入力欄は分けないほうがいい。

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

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

クリックで章追加 † 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"
/>

†http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E

実装 † Edit

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

ここに追加1.png

↓

ここに追加2.png

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

細部の編集用。

ここに追加1.png

↓

ここに追加3.png

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

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

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