ページ最上部にカラーバー † ![Edit Edit](image/plus/paraedit.png)
編集に関わるUIについては
→ページ/編集/UI[?]
ページの種類で色分け。
通常、その他…黒
警告付き…赤
編集…青
要ユーザーアカウント…黄
目次 † ![Edit Edit](image/plus/paraedit.png)
関連 † ![Edit Edit](image/plus/paraedit.png)
ナビは最上部か最下部に † ![Edit Edit](image/plus/paraedit.png)
検索:UI
ナビは最上部か最下部に。
グローバルナビはスクロールですぐに消えるほうが煩わしくなくて良い。
編集などといった操作をするUIは常に表示されていたほうが良い。
#tagcloud(0,related=UI)
表示中のページに関することは常時表示、他のページに関することはスクロールした(利用者が移動するためリンクを探している)ときに見えればいい。
UIとは † ![Edit Edit](image/plus/paraedit.png)
ドラッグ対応チェックボックス † ![Edit Edit](image/plus/paraedit.png)
ユーザーインターフェイスについて。
ドラッグでON/OFFできるチェックボックスが欲しい。
プッシュボタン型の。
- 見つめさせないこと
- ページ遷移時のアイキャッチ
NPHというわけではないので、ページを去るときに。
入力のレスポンスとして。 - アクセスキー
DOMのクラスごとにアクセスキーを。
同じキーを数回押す使い方。 - UIの遷移図を
プッシュボタン型のラジオボタンも。
→スタイル/テーマ
ドラッグできるチェックボックス † ![Edit Edit](image/plus/paraedit.png)
ドラッグでチェックできるチェックボックス。
見た目をチェックボックスとは違うチェックボックスにしないと。
携帯向けビュー † ![Edit Edit](image/plus/paraedit.png)
サブページが実装されれば目次を表示するだけでいい。
目次からサブページへリンク。
□
ドラッグすると、マーカーで塗ったような色がつく。
1回のドラッグではONかOFFのどちらか一方の操作だけ。1回のドラッグ中にトグルはしない。最初の1つめがONかOFFか次第。
方法 † ![Edit Edit](image/plus/paraedit.png)
ユーザーエージェントで携帯かどうか判定。
区切りタグ † ![Edit Edit](image/plus/paraedit.png)
タグクラウドを区切り線にする。
大きさを変えると見た目がよくないので、色の強弱で。
これを縦線にも使用。
2カラムレイアウトの区切りにする。
携帯向けのビューでは圧縮 † ![Edit Edit](image/plus/paraedit.png)
AutoPagerモード † ![Edit Edit](image/plus/paraedit.png)
アイコンはモノトーンでも分かるように † ![Edit Edit](image/plus/paraedit.png)
(塗りつぶしか線だけの)図形か文字を1つ。それを装飾してアイコンを作るように。
AutoPagerのようなのを実装するならスクロールバーを消す。
AutoPagerモードOFFでスクロールバー表示。
トンバ文字とか。
タイトルとURLをコピペ † ![Edit Edit](image/plus/paraedit.png)
単色ならWebフォントにもできる。
(ページ名部分をバックリンク一覧へのリンクにしないのなら)シングルクリックでページ名をコピペできるように。
内部リンクを作りやすくするため。
WebフォントにするならGoogle:SymbolSetのように単語に割り当て。
記号+単語(つまり記法)に割り当てれられればページ本文にも表われないから邪魔にならない。
HTMLのブロック要素にすれば重ね合わせもできる。
最後に参照したページ † ![Edit Edit](image/plus/paraedit.png)
もしWiki外へ出ても元のWikiページに戻れるように、
クライアント側データに「最後に参照したページ」のIDを残す。
クッキーがいい。
見出しごとのスクロール † ![Edit Edit](image/plus/paraedit.png)
概観のためのUI。
履歴すべてを残したいところだが、クライアント側のIDとサーバー側のDBで実現。(データが大きくなるので)
見出しごとの表示、「次の見出し」「前の見出し」をアクセスキーで。
ページ最後の見出しで同じキーを押すと終端という意味の表示を。(ページ終端を黄色く光らせるなど)
終端で同じキーを押すと次のページへ。(前後関係のあるページがある場合)
日付別ページ一覧 † ![Edit Edit](image/plus/paraedit.png)
移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
![章ごとのスクロール.png 章ごとのスクロール.png](https://wiki.pmint.name/?plugin=ref&page=%3AImage&src=%E7%AB%A0%E3%81%94%E3%81%A8%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB.png)
日付を元にページを作る場合(日記とかブログとか)に。
作業記録にも。Wikiの沿革にも。→:沿革
- 縦にリスト表示。縦スクロール。各項目にページへのリンクと内容の要約を。
- 左側にカラーバー(月別)
- ページの無い日付には空欄。カラーバーなし。
項目間の間隔が分かるように。カラーバーと同じ効果。 - スケール変更。1時間とか1分ごとに1項目〜1年ごとに1項目くらいまで。
- スケールに見合った範囲のページ一覧を、1つの項目に詰め込む。+「もっと見る」リンク。
スクロールバーを豪華に † ![Edit Edit](image/plus/paraedit.png)
例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で表示。強調表示のマップを作る。
これを汎用化するとスプレッドシート表示になる。
含まれるファセットを列に、行をページにして。列の中には作成日時や最終更新日時、全ページ中の相対的な更新頻度(を色で表したもの)なども。
もっと豪華にすると検索:Sublime Textのようなプレビューに。
こういうマップは常時表示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの表示に。
:i/タイムラインは版を時系列順に並べるもの。
:i/UI/ † ![Edit Edit](image/plus/paraedit.png)
画面切り換え † ![Edit Edit](image/plus/paraedit.png)
フェードアウト/インだけでもいい。
クリック→全体を単色化する→フェードアウト→フェードイン→カラーリング。
単色化には1枚で全画面をカバーするフィルターのようなものがないと不可。
浮き上がるUI † ![Edit Edit](image/plus/paraedit.png)
フォーカスを得ると浮き上がる。バルーン化。
複数ページをまとめて扱う † ![Edit Edit](image/plus/paraedit.png)
RegExpで複数ページをまとめて指定、それらをページとして扱い、クエリーをそれぞれに与えたい。
選択された全ページで受け付けられないクエリーでもいい。適用されないだけ。
APIも。
一覧の効果を最大化 † ![Edit Edit](image/plus/paraedit.png)
検索結果でページ複数選択→まとめて削除など。
一覧が現れる場面ではまとめて同じ操作をしたいことが多い。
ユーザーの要求と(ちょうどいいビューがそこにある)実装が合致する好機。
パーマリンク/静的リンク中心 † ![Edit Edit](image/plus/paraedit.png)
URI。
動的な(意味が変わる)リンクは使わない。
検索結果、検索ボックスの既定値、フォーカス位置、ダンプのダウンロードページのオプションなども。
参考に † ![Edit Edit](image/plus/paraedit.png)
クリエイターのためのライフハック | マイナビニュース
ショートカットキーやHTML内のIDを重複させないため † ![Edit Edit](image/plus/paraedit.png)
テスト(重複テスト)というメソッドを用意。
呼び出し順 † ![Edit Edit](image/plus/paraedit.png)
→ | ページD(中) |
処理順 † ![Edit Edit](image/plus/paraedit.png)
例。
- Aを呼び出す
- Bを呼び出す
- Cを呼び出し、テスト…OK
- Dを呼び出し、テスト…OK
- Bのテスト…NG
- AのテストはNG
(下位にあるBのテストがNGなので) - 結果…NG(AのテストがNGなので。それ以外のテスト結果は考慮しない)
テストでは下位の全IDの中に自身が持つIDが有るか調べる。
が、下位のテストがNGならそれだけでNGにしていい。結果は変わらない。
下位の全ID・ショートカット定義を扱う。
戻り値はOK/NGの区別と、下位と自身の全ID・ショートカット定義
実装ではID・ショートカット定義の他にも類するものがあっても追加できるように。