Fork
編集= キャビネット
早い話がファイラー。エクスプローラのようにグラフィカルにぺったんRのデータを閲覧・操作できる。一覧表示で見渡して、選んだファイルを閲覧する。ファイルには一覧表示と詳細表示の機能が必要。
http://sourceforge.jp/projects/pettanr/wiki/AboutCabinet/attach/cv1.PNG
キャビネットはぺったんRがどんなページ遷移をするのが理想的かをわかりやすく示した貴重なサンプル。
ただし、ぺったんRの仕様を正しく反映しているとは限らないのですり合わせが必要となる。
== ファイルタイプ
キャビネットにはリストとファイルの2種類のアイテムが表示される。
ファイルは1件のデータ。リストは複数のファイルを束ねたデータで一般的なファイルシステムでは、ディレクトリと言われるものである。
ぺったんRはほんの少しだけリッチなので、ファイルごとに表示される内容が違うこともある。リストにはディレクトリとフォルダとショートカットがある。ファイルには作家、コミック、素材など様々な種類がある。この種類によって表示すべき内容が少しずつ変わる。例えば素材を表示するときはクレジット情報が表示される。
== 権限
ファイルは読み取りと編集と実行の三つの動作ができる。
読み取り権限がなければ、ファイルは一覧に表示されず、それを無理に表示しようとしても権限エラーが出る。編集権限がなければ、ファイルを更新あるいは削除することはできない。実行権限がなければ、ファイルを実行することはできない。この辺はUnix系のOSとよく似た動作となる。
ファイルをクリックした時のデフォルトの動作は「実行」となる。実行すると関連付けられたアプリケーションによりファイルが開く。
表示、編集、実行の他にプロパティ表示がある。ぺったんRはデータを漫画に組み替えて表示するwebアプリなので、漫画表示だけでは詳細なファイル情報を見る手段がない。これは一般的なOSには無いので注意が必要である。
=== execute
ファイルの実行で最も分かりやすい例は「コミックの実行」である。コミックのタイトルをクリックした場合、ユーザーの希望としては「漫画を読みたい」である。しかし、タイトルのクリックに「漫画を読む」を割り当ててしまうと、コミックのプロパティ表示をすることができなくなってしまう。
=== read
実素材画像のように読み取り権限があっても画像だけは表示できないケースもある。
読み取り権限については、ログイン中のアカウントと作家活動を行っているかどうかのフラグなどを組み合わせて判定するので、モデルごとに判定処理を書かなければならない。
=== write
編集権限については、コンテンツのオーナーかどうかで判別する必要がある。モデルごとに判定処理を書かなければならない。
== 一覧の表示
一覧に含まれるすべてのアイテムを表示する。ただし、読み取り権限のないファイルは表示されない。
=== アイコン
* ユーザが一目でファイルの種類の判別できるようにアイコンを表示することができる。
* クリックするとファイルは実行される。
* 素材の時はサムネイルが表示される。
=== タイトル
* ファイルの中身を一目で判別できるように、最も重要な項目を表示することができる。
* ファイルに実行権限があるときはクリックできる。
* クリックするとファイルは実行される。
* 項目が指定されていない場合、 IDが表示される。
* 文字列を任意の長さで切りつめることができる。
* 画像を表示することができる。
=== プロパティボタン
* ファイルを閲覧できる。
* 現在のキャビネットでは>で表示されている。
* クリックすると、ファイルのプロパティが表示される。
=== サマリー
* ファイルの項目で表示義務がある項目や比較的重要な項目を表示することができる。
* 項目によってはクリックすることでリソースを移動することができる。
* 素材ではクレジットを表示することができる。
* 文字列を任意の長さで切りつめることができる。
=== 更新削除ボタン
* 書き込み権限のあるアイテムでは、更新、削除ボタンが表示される。
* このボタンをクリックすることでアイテムを書き換えるページに遷移できる。
== リストについて詳しく
リストにはディレクトリとフォルダとショートカットがある。
Rails側が公式にサポートするのはディレクトリだけ。それ以外のショートカットや絞り込みは各リッチクライアントの責任で実装しなければならない。ぺったんRのデータ構造が気に入らなければ自由に組み合わせてもいいが、ユーザが混乱しないように、公式なルートとそれ以外のルートを見分けられるようにしておくべきだと考えて分けた。一覧表示では共通して次のように表示する。
* アイコンはフォルダ風アイコンを表示する
* タイトルはコントローラの名前を表示する
* サマリーはフォルダの種類を表示する
* クリックで実行したときは、一つ下の階層を一覧表示する
*
=== ディレクトリ
ぺったんRサーバ上のテーブルである。通信してデータを取得する。rails的なurlと同じ構造
=== フォルダ
ぺったんRのディレクトリ構造を無視して自由にリンクを作成できる。ぺったんRのAPIでは「ある作家のコミック一覧」を表示するには、作家の詳細ページから進まなければならないが、キャビネットでは「コミックを読みたい」→ 「どの作家の? 」といった具合に、通常のAPIとは違ったパスからたどっていくことができる。機能別や逆引きでフレンドリーなUIを目指す。
=== ショートカット
クライアントが独自に構成するディレクトリへのリンク。これをクリックしたときは必ずディレクトリに移動する。
=== 絞り込み
リッチなクライアントでは「状態」を保持しておくことができる。「コミックを読みたい」→ 「どの作家の? 」といった遷移は厳密に言えばリンクでは無い。どちらかといえば「条件を絞り込み」機能である。上記の例で言えば、 「コミック一覧が欲しい」けど条件があって「特定の作家だけに限る」リストを表示してね。といった具合になる。
== ファイルについて詳しく
ファイルは次のように一覧表示される。
* アイコンはデフォルトの画像を表示する
* タイトルはタイトルに指定された項目を二十文字以内に切り詰めて表示する。項目が指定されていないときはIDを使う。
* サマリはサマリーに指定されたすべての項目を指定された順序通りに表示する。項目が指定されていないときは何も表示しない。
ただし、ファイルによっては、これだけのルールでは対応できないことがあるので、個別にカスタマイズすることもできる。
==== コミック
* アイコンは本の画像を表示する
* タイトルはコミックのタイトルを表示する
* サマリは作者と内容紹介を表示する
* 各項目は最大表示文字数が決まっており、切り詰めて表示される
==== コマ
* アイコンはコマの画像を表示する
* タイトルはコマの見出しを表示する
* サマリは作者を表示する
==== 原画
== プロパティの表示
パス情報を使ってリソースのファイルデータを機械的に表示する。
* リソースにはすべての項目が定義されているので、これを定義された順序通りに表示する。
* 項目名と値を表示する。
* 項目名は翻訳ファイルに従って翻訳された名称を表示する。
* 項目が他のリソースへのリンクの時は行き先のリソースを表示する。
* 項目には現れないリソースへのリンクも全て表示する。
== アプリケーション
ファイルを実行すると、アプリケーションが起動される。アプリケーションといっても複雑なものではなく、ほとんどのファイルはちょっと豪華な詳細ページが表示されるだけである。ただし、詳細ページに表示される情報はそれなりに複雑なので、アプリケーションは一つ一つ作成しなければならない。
===== コミック ビューワー
コミックファイルを実行したとき、起動するアプリケーション。コミックを読むことができる。
===== パネルビューワー
コマファイルをクリックしたときに起動するアプリケーション。コマを漫画の形で見ることができる。
= 実装
上記の仕様をサーバとクライアントの両方で破綻をきたさないようにデータを構造化し、実装のメドをつける。ぺったんRがrailsで実装されている以上、外部アプリケーションもrailsライクにならざるを得ない。とは言え、ぺったんRの実装が必ずrailsで行われるとは限らないので、公平性を意識して規格しなければならない。
ものすごく大雑把に規格すると次のような感じである。
* ぺったんRサーバにstructureを要求すると、 json形式のデータが返ってくる。
* そのデータには、ディレクトリ構造が含まれている。
* トップディレクトリのファイルをキャビネットで一覧表示する。
*
ぺったんRのディレクトリ構造は次のような感じである。
{{{
routes:
users:
authors
artists
authors
comics
panels
artists
original
systems
system
}}}
コントローラ、モデル、ビューに分ける。
=== ディレクトリ(コントローラ)
ぺったんRが表示するページは五種類ある。それを二種類に大別するとメニューページとリソースページになる。
外部アプリケーションが利用可能なすべてのコントローラーに対してこの情報を記述する。こうしておくことで、外部アプリケーションは各リソースに対して適切なアイコンを表示するなどの対応が可能となる。
メニューとリソースの違いは大きいが、基本はクラッド。リソースの場合、どのリソースと結びついているかを知らせる必要がある。
大雑把に言って、フォルダ、プロパティビューワー、エディタ、その他アプリケーションがここにぶら下がる。
フォルダはrailsではindexアクションをカバーする機能であり、プロパティビューワーはshowアクションをカバーし、エディタはnew.editをカバーする。それ以外のアクションはアプリケーションで表現する。
==== メニュー
メニューページは各種リソースに移動するためのリンク集として表示され、情報は持たない。
例えば/homeがメニューページに当たる。書式は以下の通り。Typeでこのコントローラーがメニューの機能を提供することを示す。
{{{
home
Type: Menu
}}}
==== リソース
リソースページはユーザーあるいは管理者がぺったんRにアップロードしたデータを表示させるためのもの。
{{{
authors
Type: Resource
ResourceType: User
}}}
{{{
comics
Type: Resource
ResourceType: Author
}}}
{{{
resource_pictures
Type: Resource
ResourceType: Artist
}}}
{{{
licenses
Type: Resource
ResourceType: System
}}}
==== モデル
リソースには四種類あり、作家が作成したリソースのほか、絵師、ユーザ、管理者が作成したものに分かれる。
例えば/comicsが作家リソースであり、/resource_picturesが絵師リソースであり、/authorsがユーザリソースであり、/licensesが管理者リソースである。書式は以下の通り。Typeでこのコントローラーがリソースであることを示し、ResourceTypeで誰のリソースであるかを示す。
==== リレーション
モデル同士のつながりを記述する。
{{{
comics {
relations: {
stories {has_many}
panels {has_many_through}
author {belongs_to}
},
}
}}}
==== カラム
すべてのカラムを宣言しなければならない。カラムは表示スタイルだけでなく、入力規則も宣言する必要がある。また、コントローラと接続できるように記述しなければならない。
* タイトルとして表示すべきカラムはどれか?
* サマリに含まれるカラムはどれか?
* 他のリソースと接続するなら、どのURLにリンクするか?
{{{
comics {
attributes {
:title {
string truncate:
}
:visible: {
boolean
}
author_id: {
}
}
titte: title
summary: [
]
}
}}}
==== バリデーション
入力規則を記述する。フォーマットはjqueryのバリデーションプラグインに準拠するのがいいと思う。
{{{
comics {
rules: [
{:title, :presence => true, :length => {:maximum => 100}}
{visible, :presence => true, :numericality => true, :inclusion => {:in => 0..1}
]
}
}}}
==== ビュー
==== カラムヘルパー
機械的に表示するための部品。リレーション先にリンクしたりアイコン表示したり。
{{{
comics {
attributes {
:title {
icon
truncate 12
}
:visible
author_id
}
}
}}}
== 翻訳
railsのi18nを流用。
* modelsにモデルごとの翻訳名称が入っている。例えばcomicモデルの翻訳名称は「コミック」となる。
* attributesにカラムごとの翻訳名称が入っている。例えば、comicモデルのtitleの翻訳名称は「タイトル」である。
{{{
models:
user: ユーザ
admin: 管理者
demand_user: 借手
comic: コミック
attributes:
comic:
title: タイトル
description: あらすじ
visible: 公開
author_id: 作家
created_at: 更新
updated_at: 作成
comics:
index:
title: コミック一覧
new: 新刊
show:
title: コミック詳細
new:
title: 新刊作成
edit:
title: コミック変更
create:
title: 新刊作成
update:
title: コミック変更
destroy:
title: コミック削除
}}}