:i/UI/編集のバックアップの現在との差分(No.90)

to your Kindle
追加された行はこの色です。
削除された行はこの色です。
RIGHT:[[:t/編集]] [[:t/UI]]
RIGHT:&tag(ページ,編集,UI,記法,機能,タグ,思い付き,方法,目次);
編集に関するいろいろなUI.

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

UI全般については
→[[UI]]


#contents

*あとでなおす [#q19f5999]
-ページ名はシングルクリックで選択できるように
ページ名はテキストボックスで表示。編集ページなら「［ページ名］の編集」のように。
リンクにはしない。それはトピックパスにあるので。ページ更新はトピックパスの末尾（ページ名）クリックか、ブラウザーの機能で。ブログのようにページ名をクリックして更新…とはしない。ページ名をコピーすることが多いので。
*** ボタン [#f7dcd597]
RIGHT:[[:t/UI]] [[:t/おまけ]] [[:t/手書き]]

ページ名を表示するようなブックマークレットがあればiPhone用Safariでも便利。
ページ名になる記法をページ編集以外にどこでも使えるようにすることでも解決できそう。
%%ペンタブレット + 手書き文字（あるいはオンライン手書き文字認識）なら、ボタンが便利な省入力になる。ページ/編集時に記法を追加するボタンを用意したり。%%
%%→ iPhoneが登場して、スマートフォンでの省入力が一般的になったので不要。%%

%%使ったボタンの履歴をリスト化したりも。再利用しやすく。→ 文脈が失われてしまうのでよくない。ボタンを場所に移すと意味不明になる。%%

**編集/UI [#d2528ca3]
多彩な記法で書くテキストエリア使用時でも閲覧ビューを再現
編集対象になっていない部分を閲覧ビューのままで表示。
閲覧ビューの中に編集ビューがあるような印象に。
よく使うボタンが強調表示になるだけでもいい！！
→ [[:i/よく使うボタンを強調表示]]

閲覧ビュー/編集ビューの差を減らして分かりやすく。
%%入力補助なので、クライアント側でやるべき。WikiEngineに組み込むならサーバーにあるデータを選べるようなものを。実装するならWebブラウザーのカスタマイズとして。%%
%%→ テキスト選択して、JavaScriptで加工するようなアプリが併用できるので、それでいい。%%

RIGHT:[[:t/編集]] [[:t/UI]]
%%他には自動処理、マクロ処理的なことをボタンにするといい。%%
%%→ テキスト処理を自動化するアプリがあるので、なんでも記法で済ませられればそれで済む。%%

%%行単位編集。1行ごとにマークアップしないといけない記法に（引用とか）。でもそういうのは記法を改善すべき。%%

**引用にはタイトルを [#z827272c]
1行目または最後の行にタイトルを書けるように。
記法/タイトル記法？
**個人用スタイル、ビュー [#z60a417c]
あまり深刻にならない範囲で、認証済みユーザーはビューを選択可能に。
1.スタイルシートだけ
工夫なしにできる。
2.ビュー全て
システムの既定値と互換性がないと。
*** メニューバー [#gea6b9e4]
RIGHT:[[:t/管理]]

ビューとはページ。内容はフォームも含めてNotationになっているのでページ化できる。
つまり個人用編集ページ。
**全画面モード [#w958cbfc]
Macのテキストエディターにあるような全画面テキストエリアのモード。
トグルスイッチで、値はクライアント側で永続化。
[[その場編集]]でUIを作成する機能。

黒背景テーマと合わせて。
ブックマークを作るようにメニュー項目作成。
メニューに載せるページで「+」アイコンクリック→メニューバーに追加。

要、安心感。データが失われることのないように。
**テキストエリアを使わずに（テキストで）編集したい [#f13fdaba]
編集した行頭にマークを付けようとしても、テキストエリアの中にマークを入れないといけないが、送信されたときにマークを削除しなければならなくて不便。
（クライアント側で調整しない限り）テキストエリアでは閲覧時とフォントが異なるため、閲覧ページと同じ文字で編集したい。
ページ内のリンクをメニューバーにドロップ→メニューバーに追加。

メニューバーの専用編集モードでドラッグして順序入れ替えとか。

**マウス用UI [#z7fdb17e]
例えばリスト編集専用の、ドラッグ操作で項目の順序を入れ替えるUI。
編集ページはテキスト用なので、閲覧用ビューか、また別のビューで。
RIGHT:[[:t/柔らかいUI]]
**%%次へ%% [#n1b7fb40]
%%iPhoneのSafari用に。%%
%%ページの更新ボタンを押す必要があるとき、「次へ」ボタンで更新ボタンのそばまでスクロールできる。%%
メニューバーをショートカットキーヘルプにするのも。
*** メール投稿 [#g3422218]
RIGHT:[[:t/連携]] [[:t/メール]]

→iPhone用なら、ページングか、WikipediaのようなCollapse/Expand式に。
**編集直後のページ表示では、編集した行に「更新した」というマークを [#j00fba3e]
章立てになっていても、1つの章が長い場合もあるので、行単位で。
メールで投稿。[[:/Twitterから]]とも似ている。
追加。
機能/メール取り込み。mailin.
追加用スペースに。「*草稿（追加待ち）」wikiの組み方で。システムがサポートする機能ではなく。
メールだと元になった版が分からないし、元とする版を取り寄せてから編集、投稿では手軽さが無いので。

つまり、差分表示のページへ遷移。
差分表示はWikiTextソースではなく、閲覧用の表示で行ないたい。
見やすいので。
-誰でも可
-承認したアドレスからのみ可
アカウントと合わせて。
-投稿用アドレスを隠す

**編集後は差分表示へリダイレクト [#yb6d6182]
誤った編集をしても、前のページが表示されているのですぐにコピペできる。（リバートは場合によっては適切ではない。やり直しになってしまう。やり直しよりは編集前を見ながら訂正した方が簡単）
投稿結果を返信。
対象ページへのリンク付き。
後でメール投稿したページを再編集しやすいように。

差分表示にはWikiTextのほか、HTML表示（閲覧時そのまま）も付けて。
誰かの利用者ページ（のサブページ）に追記出来れば、メールとして使える。
*** 音 [#af56029c]
RIGHT:[[:t/編集]] [[:t/UI]]

:CreateJS|
[[http://www.createjs.com/]]
音声を読み込んで再生。

環境音を加工したり、環境音に連動して何かを鳴らせないか
[[参考:OmmWriter]]

**追加用のテキストエリアを一行テキストボックスに変更可能に [#wd0e0290]
Enterで送信できるのが良い。
この場合、改行を別の文字で代用。送信されると改行になる。
記法 \\ で良い。''閲覧時に''<br />に変換。編集時に置き換えなくてもいい。

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

挙動は[[Google:checkpad.jp]]のように。
**ページ/継承欄 [#n12d2dc2]
なおす。

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

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

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

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

編集時に本文と別れていればいい。
**プレビューは入力欄と違うページに [#we7ee581]
新しいウィンドウかインラインフレームで。
本当のページでなければプレビューにならない。
**プレビュー不要 [#ad56218e]
戻しやすく戻したときに跡が残らない「更新」を導入する。
→これで編集とプレビューをまとめる。
→他ページから参照される部分もプレビューできる。プレビューが他のページに影響を与えるところも確認できる。

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

RIGHT:&tag(機能,いろいろなページ);
**プレビューでも「ページ/最新の差分を強調」 [#df3a658b]
章のサブページ化があるので変更した部分は追いやすくなるけど。
**消すボタン封じ [#b72c4280]
IEであってもESCキーで消えないように。
ESCキーは「範囲選択を解除」とか「IMEの状態を初期化」だけでいい。
**リロード時のページ破棄封じ [#ga7b3727]
ページの有効期限を適切に付けて。
またはページ遷移封じを。ページ遷移でフォームの内容が残るならリロードだけを封じて。
**フォーム [#s56e3c97]
ページを作るボタンにはテキストボックスを。つまり「…というページを作る」ということ。
「ページを作る」よりも「見たいページ」のほうがいい。「…というページを見る」。作成と閲覧と検索のUIを一つに。
検索ボックスでいいかも知れない。検索結果にはページ作成フォームがあるので。

RIGHT:[[:t/検索]]

「…というページはありません」ではなく「…について書いてください」というメッセージ。
**%%間違えにくいショートカットキー%% [#ia13b88b]
%%ページの編集のUIで、Alt+SやAlt+PよりもAlt+f 1回、Alt+f 2回のほうが間違えにくい。%%
**ヘルプ内検索ボックス [#d1356327]
編集中にヘルプを読みたいことがある。

-編集ページにヘルプへのリンクを
-ヘルプには類義語を含めて、検索しやすいようにしておく。
（コンテンツだけの話。システムではサポートしなくていい）
-テンプレートもヘルプの一種
テンプレートはそのサイトのローカルルールのヘルプ。

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

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

アクセスキーやマウスで選択→カーソル位置に挿入。
例えば…
 [[Googleで検索:検索キーワード]]
テキストボックスが文字装飾可能なら、「検索キーワード」の部分は淡い文字で表示。

RIGHT:[[:t/テンプレート]] [[:t/検索]] [[:t/ヘルプ]]

テンプレートの他、添付ファイルの一覧も同じ一覧に含めて。添付ファイルを埋め込むような記法で。
**とりあえず投稿 [#q48aec39]
一部でも投稿できるように。
Wikiは推敲できるのが特徴だから。

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

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


**型やフォーマットよりも用途を選ぶ [#p2e3c334]
一つの用途は複数のデータ型でできている。
一つのフォーマットを返すだけで完結するユースケースはまずない。

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

なので、一つのレスポンスにはそれだけでユースケースを達成するように複数のフォーマットを混在させることになる。
**%%新規作成時に既存ページ名を参照したい%% [#sda6636c]
-%%既存ディレクトリの下にページを作るために。%%
-%%ページ名を統一するために。%%

→追記先検索の機能で。


**新規作成時、履歴が目に留まるように [#r9fa6305]
ページ新規作成時の追記先探しにそのページ（が削除される前の）の履歴も含める。

**新規作成時、Googleのサジェストを見たい [#ief78fb4]
吹き出しで、Google先生はこうおっしゃっていると。
**ページ/編集ページにGoogle検索リンクを載せたい [#rd90e821]
編集ページの定義に、ページ名（フルパス）を検索するリンクを入れればいい。
ルートページの名前も含めれば、そのWikiに関連するページだけが検索されるはず。

コンテンツだけで可能。
ページ名をスペース区切りにするような機能も必要？
**ファイル取り込み [#xfa56264]
特定ディレクトリに置いてあるファイルを自動的に取り込む。
+ファイルを作る
+FTPクライアントなどでどこかにアップロード
他サーバーでも可？
※ファイル一覧が得られないと不可能。
+取り込み
+マークアップをページに書き込むことで貼り付け

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

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

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

[[:t/インポート]]
**画像を貼りやすく [#xaaa4133]
%%画像やその他ファイルを貼るとき、既存のファイル名を調べたりしなくていいように。%%
-%%名前（利用者が扱う名前）が重複したら自動的に変更。%%
%%RIGHT:[[:t/ページ/内部名]]%%
-%%時刻を名前にする。%%
%%機能呼び出しには近い時刻を付ければいい。%%

%%…のどちらかで。%%

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

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

RIGHT:[[:t/添付]]

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

----

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

**WYSIWYG編集 [#ibf10045]
利点
-プレビューせずにカーソル位置で自動リンクを作れる
ちゃんとリンクすることをすぐに確認できる。（オートフォーマットでもできること）
*早く入力するために [#c8e1e863]
**続けて新規作成 [#q9057bcb]
新規作成ページはページ一覧を備える。
で、送信後にまた空の新規作成ページを返すように。
続けて新規作成ができるようになる。

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


コンテンツだけで可能。
**投稿時にページ遷移なし [#vb94f04b]
編集・投稿→そのまま。投稿処理はキューイング。
投稿に必要なトークンは更新するか再び使用可能。

投稿後に閲覧ビューを呼ぶと２つのユースケースを同時に行うので遅い。分ければ体感速度は早くなる。
**フォーム2つに [#f204ae2c]
フォームを2つ用意、Tabキーでフォーカスを移して、1文字でも入力した時点で前のフォームを（バックグラウンドで）送信。
というのもいい。
1文字入力を待つのは間違い防止のため。
全てのページを打ち終わったら「送信」ボタン。最後のフォームを送信してページ遷移。

コンテンツの追加だけで可能。
**テキストボックス化 [#bc7c1d47]
最近編集したページ一覧で。
ページ名を選択するとテキストボックス化。ページ内容が読み込まれる。
編集後、送信。ページは更新され、テキストボックスはページ名に戻る。

編集日時などは更新してもページリロードまでソートしないこと。
**「かんたん機能入力サポート」 [#lb40bcd5]
[[@wiki><a href="<a href="http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？">http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？</a>">http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？">http://atwiki.jp/]]の「かんたん機能入力サポート」のようなものはどうか？</a></a>
要はパラメータの意味を出すヘルプがあればいい。入力欄は分けないほうがいい。

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


→テンプレート一覧のような検索可能な一覧で実現。
**クリックで章追加 [#wfb1ee72]
最初の章と最後の章には「ここに追加」ボタンを。
全章に付けてもいい。
ページの途中、任意の章の前に追加するのをやりやすく。


**ユニバーサルエディットボタン(Universal Edit Button) [#g82ca541]

 <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="<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>http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E]]</a>">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>http://universaleditbutton.org/%E6%97%A5%E6%9C%AC%E8%AA%9E]]</a></a>



*方法 [#od8c2fef]

**よく出てくる単語（頻出語）の一覧 [#ja7b2592]
新しいページを作るきっかけなので、「新規ページ作成」ボタンの前に利用者に見せたい。
新規作成のページで表示するのもいい。ページ名を統一するために。似ているページ名を探すのに役立つ。

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

頻出語のリストには、最後に発見された((システムが見つけた))日付も。
データを活用するために。

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

RIGHT:&tag(動的,ページ,編集);
**削除できない [#u58b0fd9]
「削除」という言葉を排除。管理者以外は削除できないので。
代わりに「アーカイブにしまう」か「履歴にしまう」か「用済みにする」か「無効化する」という表現を。

付け加えるなら「最新版を見えなくして」とか「最新版を削除して」…
**フォーム生成時すでにパーマリンク [#o465a5d9]
永続的なURIでページ作成。
戻るボタンを押して戻れたり、ページ作成画面をブックマークできたりするように。

「存在しないページは新規作成」なので、予めURIを作っておいたほうが実装はシンプルになる。
**編集キャンセルはリンク [#q5cdd93e]
ページ移動するだけなので。プレビューWiki終了にしても一時データはまだある。ブラウザーの戻るボタンで戻れるように。
**一定割合以上変更されるなら確認 [#x3bb6130]
SPAM対策と誤り防止。
一定割合以上変更されたら（編集前後の共通点が一定割合以下なら）確認のページ。権限は特に要らない。
割合はサイトの設定による。
**閲覧時編集 [#ede45a64]
チェックボックスなどは閲覧時に編集したい。
[[検索:チェックボックス]]
チェックを入れるとページ更新。残る。

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

----
行単位選択、行ごとに一つの記法で書き換えするツール。編集時に使えるように。取り消し線をかけたり。
**全画面 [#ya8738ca]
編集対象だけを表示するモード。ブラウザーの全画面モードと組み合わせればディスプレイ全体を使える。

全画面での閲覧ならブラウザー側でできる。利用者設定のペインを全ページの共通部分に表示すれば広い画面でも活用できる。閲覧ならブラウザーの機能と併用したほうがいいので、特別なUIは要らない。
**編集欄に前空行 [#b625a763]
iPhoneでも追加しやすいように。
文頭、文末の空行は削除、必要なときに自動付与。
**ユーザーから見たページ構成 [#yc64bba1]

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


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

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

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

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

例:
ページ1を編集、「ページ2」で始まる見出しにすると投稿後にページ2の投稿した見出しにジャンプ。
**削除時の警告 [#hfe22696]
ページ内容を空にした瞬間、「このまま保存すると削除になり、下位ページもいずれ削除されます。」というメッセージを表示。
ダイアログではなく、表示するだけのもの。

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

空にしたときのメッセージに「削除する」ボタンを入れるのもいい。分かりやすい。
実際は「ページの更新」と同じボタン。
**属性変更 [#d2c5533c]
正規表現でページセット作成、それらの属性を指定した値に変更。
値名と値はどう指定するか。→文字列で。値を空文字列にすると削除。
**ページ遷移なし編集を実装するなら [#o3590988]
> &ref(ここに追加1.png,,50%);
> ↓
> &ref(ここに追加2.png,,50%);
> 章に付いている編集アイコンで章の編集。
> 細部の編集用。

> &ref(ここに追加1.png,,50%);
> ↓
> &ref(ここに追加3.png,,50%);
> 章末尾の追加アイコンでそこに追加。
> 章編集で章より前に追加しても同じ。分かっている利用者にとってこのボタンは不要。

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

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


*参考に [#v22730d2]
**Atlassian Confluence [#z3109eb4]
[[12 Things You Didn't Know About the Confluence Editor | Atlassian Blogs>http://blogs.atlassian.com/2012/12/12-things-you-didnt-know-about-the-confluence-editor/]]
記法を使わないエディターが持つ12の機能。
* [#ucbc4c66]
**追記するとき [#oac95ba4]
Wikiに追記するとき…
+検索する
+繰り返す
++検索結果から追加位置を探す
++それっぽいページを開く
+追記する

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

-検索結果にページ内容を併記
編集ボタンも。

RIGHT:&tag(手間);
**編集者用メニューにdiffを [#nea2a761]
編集者の場合によく使うメニュー
+差分(diff)
+検索
+編集
+新規
+最終更新

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

RIGHT:&tag(編集,UI,差分);


**アクセスキーはユーザー設定 [#g6734212]


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


**新規ページ作成時、ページを作ってから入力受け付け [#xda1be4d]
通常では「ページ作成」（またはDanglingLinkを使用）→更新をして作成されるページ。
これをページ作成で作成するようにする。（で、既存ページを更新することに）

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

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

RIGHT:&tag(編集);

**UI/ [#xd7d61b5]
#ls

**[[tag:UI]] [#x3a0cf9a]
#lsx(tag=UI,new=true)