thtmlファイルの編集

ポータルを動作せるためのthtmlファイルの編集にはHTMLに関する一通りの知識が必要です。

動作について

ポータル機能ではindex.thtmlの中に複雑なHTML要素を記述することができます。しかし将来のバージョンアップにおいてお客様が編集したHTMLが正しく動作する保証はありません。

お客様の手元にあるHTMLは弊社ではテストできないためご了承ください。
バージョンアップ前にご相談ください。
- お客様のポータルページが動作しなくなった後では弊社でもサポートが難しいです。

原則として、本マニュアルや公開サンプルで示されている範囲内の要素を組み合わせてHTMLの編集を行なってください。

そうすることによりお客様のポータルページが、将来のバージョンアップ時にも不具合なく動作する可能性が高まります。

ポータルページを編集する際、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>は特定フォルダや検索結果のファイル一覧を表示します。

<FbGrid data-path="/DocRoot" data-viewid="details" data-first="5" data-orderby="lastwritetime"></FbGrid>

FbGridItem

<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></FbIcon>はFileBlogで使用されるアイコンを表示します。

<FbIcon data-type="docx"></FbIcon>
<FbIcon data-type="pptx"></FbIcon>
<FbIcon data-type="folder"></FbIcon>

FbSearchForm

<FbSearchForm></FbSearchForm>は検索フォームを表示します。

<FbSearchForm data-path="/DocRoot" data-fields="keyword,type"></FbSearchForm>

FbExplorer

<FbExplorer></FbExplorer>はファイル操作用のフォルダガジェットを表示します。

<FbExplorer data-path="/DocRoot/subfolder" data-viewid="details"></FbExplorer>

FbTree

<FbTree></FbTree>は特定フォルダ以下の階層構造を表示します。

<FbTree data-path="/DocRoot/Project/case01" data-viewtype="filetree-list0"  data-initialstate="collapsed"></FbTree>

FbThtml

<FbThtml></FbThtml>は別のthtml/txtファイルの内容を表示します。

<FbThtml data-path="/DocRoot/contents/news.thtml"></FbThtml>

FbRanking

<FbRanking></FbRanking>はランキングを表示できます。アクセスログ集計オプションが必要です。

<FbRanking data-rankingid="download"></FbRanking>

表示できるランキングは閲覧回数・検索キーワード回数・ダウンロード回数の3種類のみです。

属性

独自要素の中で使用できる属性です。

data-path="/DocRoot"のように=と""で値を指定します。

半角スペース区切り、順不同で複数属性を指定できます。

<FbGrid data-path="" data-viewid="" data-first="" data-header=""></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"></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>

data-fields

FbSearchform

<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="keyword,tag.filedname-5,tag.fieldname-1"
- 不適合：data-fields="tag.filedname-5,keyword,tag.fieldname-1"

FbTree

<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ファイルの中で使用できる変数です。

`$<path>`

thtmlファイルの置かれたカレントパスを示します。

URLにエンコードされません。
パス末尾に/はつきません。
例：/DocRoot/sub01にあるthtmlファイルに$<path>/aaa.txtを記述する。
```
/Docroot/sub01/aaa.txt
```

`$<epath>`

thtmlファイルの置かれたカレントパス（URL）を示します。

URLにエンコードされます。
パス末尾に/はつきません。
例：/DocRoot/sub01にあるthtmlファイルに$<epath>&keyword=HOGEを記述する。
```
http://servername/fileblog/#/files?path=%2FDocroot%2Fsub01&keyword=HOGE
```

thtmlファイルの編集

動作について

thtmlファイルの編集

スタイルの編集

クラス属性

FileBlog独自のHTML要素

FbGrid

FbGridItem

FbIcon

FbSearchForm

FbExplorer

FbTree

FbThtml

FbRanking

属 性

data-path

data-viewid

data-first

data-header

data-orderby / data-orderbydescending

data-target

data-href

data-type

data-keyword

data-fields

FbSearchform

FbTree

data-hideext

data-hideprefix

data-initialstate

orderpriority

data-pathvalue

data-rankingid

変 数

$<path>

$<epath>

属性

変数

`$<path>`

`$<epath>`