thtmlファイルの編集
ポータル表示に使用するthtmlファイルの編集にはHTMLの知識が必要です。
動作について
ポータル機能ではthtmlファイルの中に複雑なHTML要素を記述することができます。しかし将来のバージョンアップにおいてお客様が編集したHTMLが正しく動作する保証はありません。
お客様の手元にあるHTMLは弊社ではテストできないためご了承ください。
バージョンアップ前にご相談ください。お客様のポータルページが動作しなくなった後では弊社でもサポートが難しいです。
本マニュアルや公開サンプルで示されている範囲内の要素を組み合わせてHTMLの編集を行なってください。そうすることによりお客様のポータルページが、将来のバージョンアップ時にも不具合なく動作する可能性が高まります。
thtmlファイルの編集では、HTML要素に付与するid属性は、FileBlogがプログラム内部で使用するオブジェクトのidと重複してはなりません。既定idの公開は控えますが、お客様側にて十分に長いプリフィクスを付与するなどしてidの重複を避けるようにしてください。
thtmlファイルの編集
一般的にHTMLファイルで使用される<html> <head> <body>の要素は記述不要です。ポータルとして表示させるコンテンツのみのHTMLを記述します。
スタイルの編集
thtmlファイルではスタイル要素/属性を使用できます。
ブロック要素内で属性指定する。
<div style="">hello world</div>
属性やクラス属性に対してスタイル要素を指定する。
<style> h2 {} .fb01 {} </style> <h2>hello world</h2> <div class="fb01">The earth was blue.</div>
クラス属性
クラス属性でスタイルを指定する場合は、FileBlogプログラム内で利用されているクラス属性と重複しないように、コンテンツ全体をポータル専用のクラス属性で囲うことをおすすめします。
ポータルとプログラムのクラス属性が重複するとUI全体に影響が及ぶことがあります。
<div class="MyPortal">
Contents
...
...
</div>
MyPortal部分は任意の重複のない値にします。MyPortalはプログラムのクラス属性と重複しません。
FileBlog独自のHTML要素
FileBlogでは一般的なHTML要素とは別に独自のHTML要素を用意しています。
表示例はこちらをご覧ください。
<FbGrid></FbGrid>
特定フォルダや検索結果のファイル一覧を表示します。
<FbGrid data-path="/DocRoot" data-viewid="details" data-first="5"></FbGrid>
<FbGridItem></FbGridItem>
<FbGrid></FbGrid>の子要素でリンク集の表示を想定しています。次の属性でターゲットを指定します。data-path=""：ドキュメントルート以下のファイル/フォルダへのリンクになります。data-href=""：URLリンクとして扱います。data-type=""：ファイルアイコンを指定できます（未指定時はURLアイコン）
<FbGrid data-viewid="slimtile"> <FbGridItem data-path="/DocRoot/001.doc"></FbGridItem> <FbGridItem data-path="/DocRoot/files"></FbGridItem> <FbGridItem data-href="https://www.teppi.com/" data-type="doc">ホーム</FbGridItem> </FbGrid>
<FbIcon></FbIcon>
FileBlogで使用されるアイコンを表示します。
<FbIcon data-type="docx"></FbIcon> <FbIcon data-type="pptx"></FbIcon> <FbIcon data-type="folder"></FbIcon>
<FbSearchForm></FbSearchForm>
検索フォームを表示します。
<FbSearchForm data-path="/DocRoot" data-fields="keyword,type"></FbSearchForm>
<FbExplorer></FbExplorer>
ファイル操作用のフォルダガジェットを表示します。
<FbExplorer data-path="/DocRoot/subfolder" data-viewid="details"></FbExplorer>
<FbGridItem></FbGridItem>
特定フォルダ以下の階層構造を表示します。
<FbTree data-path="/DocRoot/Project/case01" data-viewtype="filetree-list0" data-initialstate="collapsed"></FbTree>
<FbThtml></FbThtml>
別のthtml/txtファイルの内容を表示します。
<FbThtml data-path="/DocRoot/contents/news.thtml"></FbThtml>
<FbRanking></FbRanking>
ランキングの表示に使用します。
<FbRanking data-rankingid="download"></FbRanking>
HTML要素の属性
独自要素の中で使用できる属性です。
属性にに=""を付けて値を指定し、半角スペース区切り、順不同で複数の属性を指定できます。
<FbGrid data-path="/DocRoot" data-viewid="details" data-first="5" data-header="true"></FbGrid>
data-path
対象のパスを指定します。FileBlogのVFSパスを使用します。
<FbGrid data-path="/DocRoot/hello"></FbGrid>
data-viewid
ファイル一覧の表示形式を指定できます。
値
説 明
details_nameonly
ファイル名のみ表示される［一覧表示］
details_ext
ファイル名＋拡張子が表示される［一覧表示］
details_date
ファイル名＋更新日が表示される［一覧表示］
details_dateparent
ファイル名＋親フォルダ＋更新日が表示される［一覧表示］
thumbnails
基本表示形式の［画像表示］と同じ
largethumbnails
基本表示形式の［画像表示(台)］と同じ
card
基本表示形式の［詳細表示］と同じ
detailtag
基本表示形式の［タグ一覧］と同じ
slimdetails
ファイル名の下にプロパティ情報が表示される
slimtile
ファイル名のみがタイル形式で整列表示される
slimtags
ファイル名の下に更新日＋タグ情報が表示される
<FbGrid data-path="/DocRoot/hello" data-viewid="detailtag"></FbGrid>
data-first
表示させる先頭件数を指定できます。値よりも件数の多い場合は［さらに表示］ボタンが表示されます。
<FbGrid data-first="5"></FbGrid>
data-header
ヘッダー（名前・サイズ・更新日時・種類・タグ項目）を表示します。
<FbGrid data-path="/DocRoot/hello" data-path="/DocRoot/hello"data-header="true"></FbGrid>
data-orderby / data-orderbydescending
並び順の昇順・降順を指定できます。
値
説 明
name
ファイル名
size
ファイルサイズ
lastwritetime
更新日
extention
拡張子
<FbGrid data-path="/DocRoot/hello" data-viewid="card" data-orderby="lastwritetime"></FbGrid>
data-target
<FbGrid>で使用します。リンク先のサイトが別タブで開くようになります。<FbGrid data-target="_blank"> <FbGridItem data-href="https://www.shinyoko.com">テキスト</FbGridItem> </FbGrid>
data-href
<FbGridItem>で使用します。URLを指定してハイパーリンクを作成できます。<FbGrid> <FbGridItem data-href="https://www.shinyoko.com">テキスト</FbGridItem> </FbGrid>
data-type
<FbGridItem>で使用します。表示アイコンを指定できます。<FbGrid> <FbGridItem data-type="pptx"></FbGridItem> </FbGrid>
data-keyword
検索キーワードを指定できます。検索ツールバーで使用できる検索式を使用できます。
<FbGrid>で使用すると検索結果が表示されるようになります。<FbSearchForm>で使用するとキーワードが予め入力された状態で表示されます。
<FbGrid data-keyword="(ワード1 OR ワード2) type=word"></FbGrid> <FbSearchForm data-fields="keyword,type" data-keyword="ワード1 ワード2"></FbSearchForm>
data-fields
<FbSearchForm>で使用すると指定した項目が検索フォームとして表示されます。値
説 明
keyword
キーワード
body
含まれている語句（全文検索）
title
ファイル名（ファイル名検索）
type
ファイル種類
lastwritetime
更新日
creationtime
作成日
ishidden
隠し属性
tag.[タグフィールド名]
タグ（タグ検索）
<FbSearchForm data-fields="keyword,type,lastwritetime,tag.tfb_description,tag.fieldname"></FbSearchForm>
data-fieldsで記述した値の順に検索フォームが表示されます。上の記述では「キーワード・ファイル種類・更新日・タグ1・タグ2」の順の表示になります。タグ項目は1つのグループとして表示されるので連続して指定してください。
data-fields="tag.fieldname-2,keyword,tag.fieldname-1"のようにはしません。
<FbTree>で使用するとプロパティやタグを表示できます。値
説 明
size
ファイルサイズ
extension
拡張子
lastwritetime
更新日時
tag.[タグフィールド名]
タグ項目
<FbTree data-fields="lastwritetime,tag.tfb_description,tag.fieldname"></FbTree>
data-hideext
<FbTree>で使用するとファイル名の拡張子を非表示にできます。true：表示する（オプション無指定時も同じ）
false：表示しない
<FbTree data-hideext="false"></FbTree>
data-hideprefix
<FbTree>で使用しするとファイル名にある最初のアンダースコアより前部分を非表示にできます。true：表示しない
false：表示する（無指定時も同じ）
<FbTree data-hideprefix="false"></FbTree>
data-initialstate
<FbTree>で使用するとツリーの展開状態を指定できます。expanded：展開された状態（無指定時も同じ）
collapsed：畳まれた状態
<FbTree data-initialstate="collapsed"></FbTree>
orderpriority
<FbTree>で使用するとファイルとフォルダのどちらを先の表示にするか指定できます。file：ファイルが先に表示
folder：フォルダが先に表示（無指定時も同じ）
<FbTree data-orderby="file"></FbTree>
data-pathvalue
<FbThtml>で使用すると、<FbThtml>が読み込んだthtmlファイルの中にある$<path>$<epath>を指定パスに置き換えて読み込みます。<FbThtml data-path="/Demo/PortalOption/news.thtml" data-pathvalue="/Hoge/Foo/news.thtml"></FbThtml>
data-rankingid
<FbRanking>で使用し、［AccessLogSummaryRankingList］で登録したIDを指定します。<FbRanking data-ranking="ID値"></FbRanking>
変 数
thtml・txtファイルの中で使用できる変数です。
$<path>
カレントパスの値に置換します。
index.thtmlファイルで使用する
index.thtmlファイルのあるフォルダパスを示します。
/DocRoot/sub01/index.thtmlの中で$<path>を使用すると、/DocRoot/sub01を示します。$<path>/news.txtは、DocRoot/sub01/news.txtを示します。
FbThtmlの指定先ファイル内で使用する
<FbThtml data-path="DocRoot/sub01/news.txt">のとき、news.txtファイルの中で$<path>を使用すると、/DocRoot/sub01/news.txtを示します。
$<epath>
カレントパスのURLエンコードした値に置換します。
index.thtmlファイルで使用する
index.thtmlファイルのあるフォルダパスを示します。
/DocRoot/sub01/index.thtmlの中で$<epath>を使用すると、%2FDocRoot%2Fsub01を示します。$<epath>/news.txtは、%2FDocRoot%2Fsub01%2Fnews.txtを示します。
FbThtmlの指定先ファイル内で使用する
<FbThtml data-path="DocRoot/sub01/news.txt">のとき、news.txtファイルの中で$<epath>を使用すると、%2FDocRoot%2Fsub01%2Fnews.txtを示します。