• ページの履歴を表示しています #91911

キャビネット

早い話がファイラー。エクスプローラのようにグラフィカルにぺったんRのデータを閲覧・操作できる。一覧表示で見渡して、選んだファイルを閲覧する。ファイルには一覧表示と詳細表示の機能が必要。

キャビネットはぺったんRがどんなページ遷移をするのが理想的かをわかりやすく示した貴重なサンプル。 ただし、ぺったんRの仕様を正しく反映しているとは限らないのですり合わせが必要となる。

Explorerとダイアログ

一口にexplorerといっても、二つのモードがある。ユーザがコンテンツを眺めるための用途に使うのがexplorerだが、素材の選択など漫画の作成に必要なファイルを探す用途も必要となる。比較的外観は似ていても、根本的な動作が違ってくる。一つのコンテンツを選択し、そのIDをパラメータとして流し込むことになる。

Explorerではクリックされたとき、ページは遷移する。ダイアログではクリックしても、 JavaScriptで画面を書き換えるだけにとどまる。つまり、ダイアログはJavaScriptの環境必須であり、パネルエディタ以外では現れない。

リンクの管理

動作モードによってクリックした時の動作が変わってくるのであれば、リンク先の情報を構造体によって管理する必要が出てくる。

ファイルタイプ

キャビネットにはリストとファイルの2種類のアイテムが表示される。

ファイルは1件のデータ。リストは複数のファイルを束ねたデータで一般的なファイルシステムでは、ディレクトリと言われるものである。

ぺったんRはほんの少しだけリッチなので、ファイルごとに表示される内容が違うこともある。リストにはディレクトリとフォルダとショートカットがある。ファイルには作家、コミック、素材など様々な種類がある。この種類によって表示すべき内容が少しずつ変わる。例えば素材を表示するときはクレジット情報が表示される。

権限

ファイルは読み取りと編集の2つ。

読み取り権限がなければ、ファイルは一覧に表示されず、それを無理に表示しようとしても権限エラーが出る。編集権限がなければ、ファイルを更新あるいは削除することはできない。

read

実素材画像のように読み取り権限があっても画像だけは表示できないケースもある。

読み取り権限については、ログイン中のアカウントと作家活動を行っているかどうかのフラグなどを組み合わせて判定するので、モデルごとに判定処理を書かなければならない。

write

編集権限については、コンテンツのオーナーかどうかで判別する必要がある。モデルごとに判定処理を書かなければならない。

一覧の表示

一覧に含まれるすべてのアイテムを表示する。ただし、読み取り権限のないファイルは表示されない。

フェイス

  • ファイルを実行するためのボタン的な機能を持つエリアのこと。
  • ファイルの中身を一目で判別できるように、最も重要な項目を表示することができる。
  • シンボルとキャプションに分かれる

シンボル

  • シンボルとはコンテンツを瞬間的に見分けるための画像的な表示物である。
  • 必ずしも画像でなくても良い。例えば、背景色ではカラーコードのboxが表示される。
  • 項目が指定されていない場合、 白紙の画像が表示される。
  • クリックするとコンテンツが表示される。

キャプション

  • キャプションとはコンテンツを要約した情報を表示する部分である。
  • コンテンツによってはキャプションが存在しないものもある。
  • キャプションをクリックすることによって、オルタネイティブの閲覧ができる。
  • 例えば、スクロールや用紙などのように、「表示」と「読む」が分かれているときに使う。
  • シンボルをクリックしたときはスクロールを閲覧し、キャプションをクリックしたときはスクロールを読むといった具合である。

選択ボタン

ファインダモードの時に表示される。このボタンをクリックすることで、親ウィンドウにこのコンテンツのIDを返す。

選択ボタンを表示するための仕組みも必要。例えば作家を選択するとき、作家以外のコンテンツを表示しても選択ボタンは現れないようにしたい。素材を選択するときは、さらにややこしくて、コマ絵などの関連コンテンツを表示している時も選択ボタンを表示したい。これができないとクリック数が増えて、ユーザビリティが極端に落ちてしまう。となると、コマ絵などの体系の違うIDから必要とするIDに変換する機能も必要となってくるはず。

サマリー

  • ファイルの項目で表示義務がある項目や比較的重要な項目を表示することができる。
  • 項目によってはクリックすることでリソースを移動することができる。
  • 素材ではクレジットを表示することができる。
  • 文字列を任意の長さで切りつめることができる。

ファイルタイプアイコン

  • ユーザが一目でファイルの種類の判別できるようにアイコンを表示することができる。
  • クリックするとファイルのプロパティが表示される。

更新削除ボタン

  • 書き込み権限のあるアイテムでは、更新、削除ボタンが表示される。
  • このボタンをクリックすることでアイテムを書き換えるページに遷移できる。

リストについて詳しく

リストにはリモートフォルダとローカルフォルダとショートカットがある。

ぺったんRのデータ構造が気に入らなければ自由に組み合わせてもいいが、ユーザが混乱しないように、公式なルートとそれ以外のルートを見分けられるようにしておくべきだと考えて分けた。一覧表示では共通して次のように表示する。

  • アイコンはフォルダ風アイコンを表示する
  • タイトルはコントローラの名前を表示する
  • サマリーはフォルダの種類を表示する
  • クリックで実行したときは、一つ下の階層を一覧表示する

リモートフォルダ

ぺったんRサーバ上のコントローラである。通信してデータを取得する。rails的なurlと同じ構造

ローカルフォルダ

ぺったんRのディレクトリ構造を無視して自由にリンクを作成できる。ぺったんRのAPIでは「ある作家のコミック一覧」を表示するには、作家の詳細ページから進まなければならないが、キャビネットでは「コミックを読みたい」→ 「どの作家の? 」といった具合に、通常のAPIとは違ったパスからたどっていくことができる。機能別や逆引きでフレンドリーなUIを目指す。

ショートカット

クライアントが独自に構成するディレクトリへのリンク。これをクリックしたときは必ずリモートフォルダに移動する。

絞り込み

リッチなクライアントでは「状態」を保持しておくことができる。「コミックを読みたい」→ 「どの作家の? 」といった遷移は厳密に言えばリンクでは無い。どちらかといえば「条件を絞り込み」機能である。上記の例で言えば、 「コミック一覧が欲しい」けど条件があって「特定の作家だけに限る」リストを表示してね。といった具合になる。

ファイルについて詳しく

ファイルは次のように一覧表示される。

  • アイコンはデフォルトの画像を表示する
  • タイトルはタイトルに指定された項目を二十文字以内に切り詰めて表示する。項目が指定されていないときはIDを使う。
  • サマリはサマリーに指定されたすべての項目を指定された順序通りに表示する。項目が指定されていないときは何も表示しない。

ただし、ファイルによっては、これだけのルールでは対応できないことがあるので、個別にカスタマイズすることもできる。

コミック

  • アイコンは本の画像を表示する
  • タイトルはコミックのタイトルを表示する
  • サマリは作者と内容紹介を表示する
  • 各項目は最大表示文字数が決まっており、切り詰めて表示される

コマ

  • アイコンはコマの画像を表示する
  • タイトルはコマの見出しを表示する
  • サマリは作者を表示する

原画

プロパティの表示

パス情報を使ってリソースのファイルデータを機械的に表示する。

  • リソースにはすべての項目が定義されているので、これを定義された順序通りに表示する。
  • 項目名と値を表示する。
  • 項目名は翻訳ファイルに従って翻訳された名称を表示する。
  • 項目が他のリソースへのリンクの時は行き先のリソースを表示する。
  • 項目には現れないリソースへのリンクも全て表示する。

アプリケーション

ファイルを実行すると、アプリケーションが起動される。アプリケーションといっても複雑なものではなく、ほとんどのファイルはちょっと豪華な詳細ページが表示されるだけである。ただし、詳細ページに表示される情報はそれなりに複雑なので、アプリケーションは一つ一つ作成しなければならない。

コミック ビューワー

コミックファイルを実行したとき、起動するアプリケーション。コミックを読むことができる。

パネルビューワー

コマファイルをクリックしたときに起動するアプリケーション。コマを漫画の形で見ることができる。

実装

CabinetStandard