- 追加された行はこの色です。
- 削除された行はこの色です。
RIGHT:&tag(UI);
編集に関わるUIについては
→[[ページ/編集/UI]]
*目次 [#pee45dfb]
#contents
----
#lsx(new=true);
**関連 [#a8465992]
#lsx(tag=UI,new=true,except=^UI(/.*)?$)
[[検索:UI]]
#tagcloud(0,related=UI)
#br
*UIとは [#wada75d2]
RIGHT:[[:t/UI]]
ユーザーインターフェイスについて。
-見つめさせないこと
-ページ遷移時のアイキャッチ
NPHというわけではないので、ページを去るときに。
入力のレスポンスとして。
-アクセスキー
DOMのクラスごとにアクセスキーを。
同じキーを数回押す使い方。
-UIの遷移図を
→スタイル/テーマ
**携帯向けビュー [#m461f5a7]
サブページが実装されれば目次を表示するだけでいい。
目次からサブページへリンク。
RIGHT:&tag(UI,モバイル);
***方法 [#ne489b7d]
ユーザーエージェントで携帯かどうか判定。
RIGHT:&tag(UI);
**携帯向けのビューでは圧縮 [#n879090c]
-gzip圧縮
-イメージリソースを公式サイトに置いて、クライアント側キャッシュを共有
-その他静的リソースを別サイトに置いて、クライアントにクッキーの送信を要求しないように
RIGHT:&tag(圧縮,モバイル);
**アイコンはモノトーンでも分かるように [#pf0cb44c]
（塗りつぶしか線だけの）図形か文字を1つ。それを装飾してアイコンを作るように。
トンバ文字とか。
単色ならWebフォントにもできる。
Webフォントにするなら[[Google:SymbolSet]]のように単語に割り当て。
記号+単語（つまり記法）に割り当てれられればページ本文にも表われないから邪魔にならない。
HTMLのブロック要素にすれば重ね合わせもできる。
**見出しごとのスクロール [#z3931d28]
概観のためのUI。
見出しごとの表示、「次の見出し」「前の見出し」をアクセスキーで。
ページ最後の見出しで同じキーを押すと終端という意味の表示を。(ページ終端を黄色く光らせるなど)
終端で同じキーを押すと次のページへ。(前後関係のあるページがある場合)
移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
&ref(:Image/章ごとのスクロール.png);
**スクロールバーを豪華に [#m05d49ad]
例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で表示。強調表示のマップを作る。
もっと豪華にすると[[検索:Sublime Text]]のようなプレビューに。
こういうマップは常時表示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの表示に。
**画面切り換え [#p50aaa70]
フェードアウト／インだけでもいい。
クリック→全体を単色化する→フェードアウト→フェードイン→カラーリング。
単色化には1枚で全画面をカバーするフィルターのようなものがないと不可。
**浮き上がるUI [#q01c1f52]
フォーカスを得ると浮き上がる。バルーン化。
**複数ページをまとめて扱う [#hefe559c]
RegExpで複数ページをまとめて指定、それらをページとして扱い、クエリーをそれぞれに与えたい。
選択された全ページで受け付けられないクエリーでもいい。適用されないだけ。
APIも。
RIGHT:[[:t/API]]
**一覧の効果を最大化 [#ab801c3c]
検索結果でページ複数選択→まとめて削除など。
一覧が現れる場面ではまとめて同じ操作をしたいことが多い。
ユーザーの要求と（ちょうどいいビューがそこにある）実装が合致する好機。
**パーマリンク/静的リンク中心 [#t5387a79]
URI。
動的な（意味が変わる）リンクは使わない。
検索結果、検索ボックスの既定値、フォーカス位置、ダンプのダウンロードページのオプションなども。
**参考に [#h0eb7fb1]
[[クリエイターのためのライフハック | マイナビニュース>http://news.mynavi.jp/column/lifehack/index.html]]
**ショートカットキーやHTML内のIDを重複させないため [#ke25abe8]
テスト（重複テスト）というメソッドを用意。
***呼び出し順 [#hb1f17bd]
|ページA（外）|→|ページB（中）|→|ページC（中）|
|~|~|~|→|ページD（中）|
***処理順 [#d27cebe8]
例。
+Aを呼び出す
+Bを呼び出す
++Cを呼び出し、テスト…OK
++Dを呼び出し、テスト…OK
+Bのテスト…NG
+AのテストはNG
（下位にあるBのテストがNGなので）
+結果…NG（AのテストがNGなので。それ以外のテスト結果は考慮しない）
テストでは下位の全IDの中に自身が持つIDが有るか調べる。
が、下位のテストがNGならそれだけでNGにしていい。結果は変わらない。
下位の全ID・ショートカット定義を扱う。
戻り値はOK/NGの区別と、下位と自身の全ID・ショートカット定義
実装ではID・ショートカット定義の他にも類するものがあっても追加できるように。
