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

Send to your Kindle
追加された行はこの色です。
削除された行はこの色です。
RIGHT:[[:t/UI]]
*** ページ最上部にカラーバー [#t333403f]
RIGHT:[[:t/UI]] [[:t/スタイル]] [[:t/デザイン]]

編集に関わるUIについては
→[[:i/編集/UI]]
ページの種類で色分け。
通常、その他…黒
警告付き…赤
編集…青
要ユーザーアカウント…黄

*目次 [#pee45dfb]
#contents
----
#lsx(new=true);
これはスタイルシートと別。
Wikiの設定で使うか使わないかを選択。

**関連 [#a8465992]
#lsx(tag=UI,new=true,except=^UI(/.*)?$)
*** ナビは最上部か最下部に [#g07e407e]
RIGHT:[[:t/UI]] [[:t/スタイル]]

[[検索:UI]]
ナビは最上部か最下部に。
グローバルナビはスクロールですぐに消えるほうが煩わしくなくて良い。
編集などといった操作をするUIは常に表示されていたほうが良い。

#tagcloud(0,related=UI)
#br
表示中のページに関することは常時表示、他のページに関することはスクロールした（利用者が移動するためリンクを探している）ときに見えればいい。


*UIとは [#wada75d2]
*** ドラッグ対応チェックボックス [#fba6cb85]
RIGHT:[[:t/UI]]

ユーザーインターフェイスについて。
ドラッグでON/OFFできるチェックボックスが欲しい。
プッシュボタン型の。

-見つめさせないこと
-ページ遷移時のアイキャッチ
NPHというわけではないので、ページを去るときに。
入力のレスポンスとして。
-アクセスキー
DOMのクラスごとにアクセスキーを。
同じキーを数回押す使い方。
-UIの遷移図を
プッシュボタン型のラジオボタンも。

→スタイル/テーマ
*** ドラッグできるチェックボックス [#q6342932]
RIGHT:[[:t/UI]]

ドラッグでチェックできるチェックボックス。
見た目をチェックボックスとは違うチェックボックスにしないと。

**携帯向けビュー [#m461f5a7]
サブページが実装されれば目次を表示するだけでいい。
目次からサブページへリンク。
 □
ドラッグすると、マーカーで塗ったような色がつく。
1回のドラッグではONかOFFのどちらか一方の操作だけ。1回のドラッグ中にトグルはしない。最初の1つめがONかOFFか次第。

RIGHT:&tag(UI,モバイル);

***方法 [#ne489b7d]
ユーザーエージェントで携帯かどうか判定。
*** 区切りタグ [#v00a480b]
RIGHT:[[:t/UI]]

RIGHT:&tag(UI);
タグクラウドを区切り線にする。
大きさを変えると見た目がよくないので、色の強弱で。

これを縦線にも使用。
2カラムレイアウトの区切りにする。

**携帯向けのビューでは圧縮 [#n879090c]
-gzip圧縮
-イメージリソースを公式サイトに置いて、クライアント側キャッシュを共有
-その他静的リソースを別サイトに置いて、クライアントにクッキーの送信を要求しないように
*** AutoPagerモード [#yec89534]
RIGHT:[[:t/UI]]

RIGHT:&tag(圧縮,モバイル);
**アイコンはモノトーンでも分かるように [#pf0cb44c]
（塗りつぶしか線だけの）図形か文字を1つ。それを装飾してアイコンを作るように。
AutoPagerのようなのを実装するならスクロールバーを消す。
AutoPagerモードOFFでスクロールバー表示。

トンバ文字とか。
*** タイトルとURLをコピペ [#q921b89e]
RIGHT:[[:t/ページ]] [[:t/スタイル]]

単色ならWebフォントにもできる。
（ページ名部分をバックリンク一覧へのリンクにしないのなら）シングルクリックでページ名をコピペできるように。
内部リンクを作りやすくするため。

Webフォントにするなら[[Google:SymbolSet]]のように単語に割り当て。
記号+単語（つまり記法）に割り当てれられればページ本文にも表われないから邪魔にならない。
HTMLのブロック要素にすれば重ね合わせもできる。
*** 最後に参照したページ [#y29b5cb9]
RIGHT:[[:t/UI]] [[:t/利用者]]

もしWiki外へ出ても元のWikiページに戻れるように、
クライアント側データに「最後に参照したページ」のIDを残す。
クッキーがいい。

**見出しごとのスクロール [#z3931d28]
概観のためのUI。
履歴すべてを残したいところだが、クライアント側のIDとサーバー側のDBで実現。（データが大きくなるので）

見出しごとの表示、「次の見出し」「前の見出し」をアクセスキーで。
ページ最後の見出しで同じキーを押すと終端という意味の表示を。(ページ終端を黄色く光らせるなど)
終端で同じキーを押すと次のページへ。(前後関係のあるページがある場合)
*** 日付別ページ一覧 [#te6bbfdd]
RIGHT:[[:t/日付]] [[:t/一覧]] [[:t/ブログ]] [[:t/分析]]

移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
&ref(:Image/章ごとのスクロール.png);
日付を元にページを作る場合（日記とかブログとか）に。
作業記録にも。Wikiの沿革にも。[[→:沿革]]

- 縦にリスト表示。縦スクロール。各項目にページへのリンクと内容の要約を。
- 左側にカラーバー（月別）
- ページの無い日付には空欄。カラーバーなし。
項目間の間隔が分かるように。カラーバーと同じ効果。
- スケール変更。1時間とか1分ごとに1項目〜1年ごとに1項目くらいまで。
- スケールに見合った範囲のページ一覧を、1つの項目に詰め込む。＋「もっと見る」リンク。

**スクロールバーを豪華に [#m05d49ad]
例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で表示。強調表示のマップを作る。
これを汎用化するとスプレッドシート表示になる。
含まれるファセットを列に、行をページにして。列の中には作成日時や最終更新日時、全ページ中の相対的な更新頻度（を色で表したもの）なども。

もっと豪華にすると[[検索:Sublime Text]]のようなプレビューに。
こういうマップは常時表示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの表示に。
[[:i/タイムライン]]は版を時系列順に並べるもの。
* :i/UI/ [#tbd8e1ba]

#ls

**画面切り換え [#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・ショートカット定義の他にも類するものがあっても追加できるように。


**iPhoneではランドスケープ時のみ2カラム表示 [#g9edba85]

RIGHT:&tag(モバイル);


**リンクにスクリーンショットを [#u23bf9be]
機能。
リンクにはてなスクリーンショットを付ける。
ブラウザー側でこの機能が有効なページでリンクにスクリーンショットを付ける拡張を。

RIGHT:&tag(UI,リンク);