概要
<div class="fblist" src="[フォルダパスや検索条件]"></div> //縦方向に配列
<div class="fbtile" src="[フォルダパスや検索条件]"></div> //横方向に配列
ファイル一覧もしくは検索結果を一覧表示します。
タグ・属性
適用されるタグ
div タグ
class
fblist もしくは fbtile を指定します。fblist = ファイル一覧を縦方向に配列、fbtile=横方向にファイルを配列します。
src
一覧したいフォルダもしくは検索結果のURLを指定します。URLは以下の手順で作成します。
| 1. | 一覧したいフォルダをブラウザで表示します。トップフォルダでも構いません。 |
| 2. | 検索結果を表示したい場合には、検索キーワードを入力して下さい。 |
| 3. | ブラウザのアドレスバーに表示されるURLをコピーし、src属性に指定します。 |
| 4. | 以上で表示可能ですが、必要に応じて以下のパラメータを付与します。 |
例）http://localhost/FileBlog/index.php#path=%2F&dra=&keyword=jpg&target=2&doctype=10
上記の例の#移行のように、URLクエリ形式（&区切りでname=value）でパラメータを付与します。
パラメータ |
意味 |
path |
フォルダパス。ドキュメントルートからの相対パスです。必ずdraとセットで指定します。URLEncodeが必要です（※1）。 |
dra |
フォルダパスのエイリアス。ドキュメントルートのエイリアスを指定します。必ずpathとセットで指定します。 |
first |
表示件数を数値で指定します。 |
doctype |
ファイルやフォルダのみを一覧します。 0=フォルダのみ, 1=ファイルのみ, 10=両方。 |
order |
並び順。 1=タイトル(昇順)、2=タイトル(降順)、 3=更新日時(昇順)、4=更新日時(降順) 5=サイズ(昇順)、6=サイズ(降順)、 7=ファイル種類(昇順)、8=ファイル種類(降順) |
keyword |
検索文字列。URLEncodeが必要です（※1）。検索しない場合（特定フォルダ以下のファイル一覧を表示する場合）は指定不要です。 ※Ver3.1.5.0以降ポータル機能によって発生した検索イベントは、アクセスログに出力されません。 |
target |
検索対象。 1=ファイル名検索, 2=全文検索。 keywordとセットで指定します。検索しない場合は指定不要です。 |
その他の検索条件 isd, datefmなど |
日付範囲やサブフォルダ含む/含まない、プロパティ検索などの各種検索オプションです。いずれの検索条件も、ブラウザのアドレスバーに反映されますので、FileBlogの検索オプションにて検索条件を入力し、アドレスバーよりコピーして指定して下さい。詳しい仕様を明記できません。 |
※1:path, keywordは2byte文字を含むためURLEncodeする必要があります。
URLEncodeはphpのrawurlencodeと互換性のある方法で行って下さい。
フィールド設定
一覧に表示する列や行のレイアウトを変更するには、フィールド設定を行います。
フィールド設定
<div class="fblist" src="http://localhost/fileblog/index.php?path=%2F&dra=">
<!--
{ "datarequest":{
"getcomment": false,
"getauthor": false,
"getdescription": false,
"getbodytext": false,
"getattribute": true,
"getthumexists": false,
"getcanopen": true,
"gethassubdir": false
},
"header":{"visible":true},
"fields":[
{"field":"name", "link":true, "escape":true, "maxlength":15, "icon":true},
{"field":"updt"},
{"field":"parent", "parentlink":true, "escape":true, "maxlength":15}
]
}
-->
</div>
div要素の中に、コメント（<!--で始まり、-->で終わる）領域に、Json形式で設定を記述します。
設定が正しいJson形式でない場合、"Invalid config."という文字列が表示されます。Json記法については、wikipediaの解説を参考にして下さい。
コメント領域以外に、HTMLを記述しないようにしてください。設定が正しくロードできなくなる可能性があります。
datarequest
データ取得方法を指定します。
今までsrcに指定していたfirstやorderなどの他、以下のパラメータを指定することが出来ます。
パラメータ |
意味 |
getcomment |
FileBlogコメントを取得します |
getdescription |
FileBlog概要を取得します |
getauthor |
更新者、作成者を取得します |
getbodytext |
ファイル本文を取得します |
getattribute |
Officeプロパティを取得します |
getthumexists |
サムネイルを取得します |
getcanopen |
オープン権限があるかどうかを取得します |
gethassubdir |
サブフォルダを持つかどうかを取得します |
header
visibleプロパティのみ。boolean値を指定します。falseに設定すると、一覧のヘッダ行を非表示にすることができます。
なお、class="fbtile"の場合にはそもそもheaderがありませんので、このプロパティは意味がありません。
fields
各フィールドプロパティです。1つのフィールド定義は、fblistの場合は列、fbtileの場合は行にレイアウトされます。
プロパティ |
型 |
意味 |
caption |
文字列 |
ヘッダ行に表示される値です。省略時には、デフォルトのキャプションが使われます。 |
field |
文字列 |
フィールド名を指定します。以下のいずれかを指定することができます。 name ファイル名 size サイズ updt 更新日時 crdt 作成日時 ext ファイル種類 parent 親フォルダ名 thum サムネイル画像(sサイズ) thum_m サムネイル画像(mサイズ) index 上から何番目か？のインデックス。先頭は0。 parentfull 親フォルダのフルパス。検索時のみ。 comx コメント。（datarequestにてgetcomment=trueにする必要があります） desc 概要。（datarequestにてgetdescription=trueにする必要があります） updr 更新者。（datarequestにてgetauthor=trueにする必要があります） crtr 作成者。（datarequestにてgetauthor=trueにする必要があります） body 本文。（datarequestにてgetbodytext=trueにする必要があります） ofau Office更新者。（datarequestにてgetattribute=trueにする必要があります） ofti Officeタイトル。（datarequestにてgetattribute=trueにする必要があります） ofky Officeキーワード。（datarequestにてgetattribute=trueにする必要があります） ofca Officeカテゴリ。（datarequestにてgetattribute=trueにする必要があります） ofco Officeコメント。（datarequestにてgetattribute=trueにする必要があります） ofsu Officeサブジェクト。（datarequestにてgetattribute=trueにする必要があります） ranking_num ランキング全般使用時のみ ranking_keyword 検索ランキング時のみ。 |
template |
文字列 |
フィールドの内容を独自のHTMLで記述したい場合に使用します。templateを指定すると、fieldやescapeなどのその他のプロパティ(hclass, hstyle, class, styleを除く)は、 無効になります。 そのため通常はtemplateは定義しないでください。templateに使用できる変数一覧は※1を参照してください。 例） {"template":"<a href='$(link)'>$(name)</a>"} |
escape |
Boolean |
trueを指定すると、文字列中の< > ' & \n を < > ’ & <br/> に置換します。省略時はfalseです。 |
maxlength |
数値 |
最大表示文字数。ファイル名など、文字長が長すぎるとレイアウトが崩れてしまうために用意されています。省略時は0です。0を指定した場合、すべての文字を表示します。 |
icon |
Boolean |
trueを指定すると、ファイル種別アイコンをそのフィールドの左端に表示します。省略時はfalseです。 |
link |
Boolean |
trueを指定すると、ファイルリンクが張られます。省略時はfalseです。 |
parentlink |
Boolean |
trueを指定すると、親フォルダリンクが張られます。省略時はfalseです。 |
hclass |
文字列 |
ヘッダフィールド(thタグ)のclass属性です。通常設定しません。省略時はfieldと同じになります。 |
hstyle |
文字列 |
ヘッダフィールド(thタグ)のstyle属性です。通常設定しません。 |
class |
文字列 |
フィールド(tdタグ)のclass属性です。通常設定しません。省略時はfieldと同じになります。 |
style |
文字列 |
フィールド(tdタグ)のstyle属性です。通常設定しません。 |
※１：templateに使用できる変数一覧
$(name) |
ファイル名 |
$(index) |
上から何番目か？のインデックス。先頭は0。 |
$(size) |
サイズ |
$(parentfull) |
親フォルダのフルパス。検索時のみ。 |
$(updt) |
更新日時 |
$(comx) |
コメント |
$(crdt) |
作成日時 |
$(desc) |
概要 |
$(ext) |
ファイル種類 |
$(updr) |
更新者 |
$(thum) |
サムネイル画像URL(sサイズ) |
$(crtr) |
作成者 |
$(thum_m) |
サムネイル画像URL(mサイズ) |
$(body) |
本文 |
$(link) |
ファイル閲覧URL |
$(ofau) |
Office更新者 |
$(parentlink) |
親フォルダURL |
$(ofti) |
Officeタイトル |
$(parent) |
親フォルダ名 |
$(ofky) |
Officeキーワード |
$(icon) |
アイコンURL |
$(ofca) |
Officeカテゴリ |
$(ofco) |
Officeコメント |
||
$(ofsu) |
Officeサブジェクト |
||
$(ranking_num) |
ランキング順位。ランキング全般使用時のみ |
||
$(ranking_keyword) |
ランキングキーワード。検索ランキング時のみ |
スタイルのカスタマイズ
スタイルシートを上書き・追加することで、見た目を変更することが出来ます。
| 1. | デフォルトのスタイルシート(fblog.css)から、fblist（もしくはfbtile）のスタイルをコピーします。 |
※fblog.cssはFileBlogインストールフォルダ\Apache\htdocs\fileblog\cssにインストールされています。
| 2. | thtmlファイルの先頭にスタイルタグとして貼り付けます。 |
<style>
<!--
div.fblist table{margin-top: 0px;table-layout:fixed;}
div.fblist span{white-space:nowrap;}
div.fblist table th{font-size:13px;padding-left:5px;font-weight:normal;height:18px;margin-top: 10px;text-align: left;background: #E6E6FA;white-space:nowrap;word-break:keep-all;overflow:hidden;}
div.fblist table th.size{padding-left:10px;padding-right:10px;text-align: right;width:70px;white-space:nowrap;word-break:keep-all;overflow:hidden;}
div.fblist table td{font-size:13px;padding-top:0px;padding-bottom:0px;padding-left:2px;padding-right:10px;width:100%;white-space:nowrap;word-break:keep-all;overflow:hidden;}
div.fblist table td.name{width:auto;word-break: break-all}
div.fblist table td.size{padding-left:10px;padding-right:10px;text-align: right;width:70px;}
div.fblist table td.updt{padding-left:10px;padding-right:10px;width:120px;}
div.fblist table td.crdt{padding-left:10px;padding-right:10px;width:120px;}
div.fblist table td.ext{padding-left:10px;padding-right:10px;width:40px;}
div.fblist table td.parent{width:auto;word-break: break-all}
div.fblist table td.parent a{text-decoration:none; color:green; font-size:13px;cursor:pointer;}
div.fblist table img.icon{vertical-align:middle;}
div.fblist table img.thum{border: 1px solid #D4D0C8;padding:0px;width:100px;height:100px}
div.fblist table img.thum_m{border: 1px solid #D4D0C8;padding:0px;width:170px;height:170px}
div.fblist table img.thumicon{border:0px;width:16px;height:16px;position: relative; top: -2px; left:-18px;}
-->
</style>
| 3. | スタイルを修正します |
<style>
<!--
div.fblist table th{color:white;background: blue;}
div.fblist table td{color:blue;}
div.fblist table td.name{color:white;background: aqua;}
-->
</style>
上記の例では、背景と文字色の設定を上書きしました。(nameやsizeなどのfield名がそのままclass属性として利用できます。)
旧ポータルオプションとの違い
新ポータルオプションでは、以下の機能は使用できなくなりました。
| • | 右クリックメニュー |
| • | サムネイル画像のページめくり |
また、PCサイトでは利用可能ですが、モバイルサイトでは以下の機能を使用できません。
| • | 直接オープン |
サンプル
オンラインデモサイトに、各種サンプルを掲載しています。
| • | whats_new fblistとfbtileの基本的な使い方 |
| • | columns fblistをtableタグを使って横に２つ並べます |
| • | list_option fblistをフィールド定義でカスタマイズ |
| • | tile_option fbtileをフィールド定義でカスタマイズ |
| • | template フィールド定義でtemplateプロパティを使って独自レイアウト |
| • | expand javascriptを使って、クリック時に動的にレンダリングをします |
| • | template テンプレートの使い方 |