thtmlファイルの編集

ポータル表示に使用するthtmlファイルの編集にはHTMLの知識が必要です。

動作について

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

  • お客様の手元にあるHTMLは弊社ではテストできないためご了承ください。

  • バージョンアップ前にご相談ください。お客様のポータルページが動作しなくなった後では弊社でもサポートが難しいです。

本マニュアルや公開サンプルで示されている範囲内の要素を組み合わせてHTMLの編集を行なってください。そうすることによりお客様のポータルページが、将来のバージョンアップ時にも不具合なく動作する可能性が高まります。

thtmlファイルの編集では、HTML要素に付与するid属性は、FileBlogがプログラム内部で使用するオブジェクトのidと重複してはなりません。プログラム既定のidの公開は控えますが、お客様側にて十分に長いプリフィクスを付与するなどして重複を避けるようにしてください。

thtmlファイルの編集

一般的にHTMLファイルで使用される<html> <head> <body>の要素は記述不要です。ポータルとして表示させるコンテンツのみのHTMLを記述します。

  1. スタイルの編集

    thtmlファイルではスタイル要素/属性を使用できます。

    • ブロック要素内で属性指定する。

      <div style="">hello world</div>

    • 属性やクラス属性に対してスタイル要素を指定する。

      <style>
     h2 {}
     .fb01 {}
</style>
<h2>hello world</h2>
<div class="fb01">The earth was blue.</div>

  2. クラス属性

    クラス属性でスタイルを指定する場合は、FileBlogプログラム内で利用されているクラス属性と重複しないようにします。そのためにコンテンツ全体をポータル専用のクラス属性で囲うことをおすすめします。

    ポータルとプログラムのクラス属性が重複するとUI全体に影響が及ぶことがあります。

    <div class="MyPortal">
    Contents
    ...
    ...
</div>

    class="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>

<FbTree></FbTree>

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

<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>

ランキングの表示に使用します。

data-rankingid=""には、AccessLogSummaryRankingListで登録したID値を指定します。

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

<FbFrame></FbFrame>

FileBlogトークのチャット画面の表示に使用します。
次のようなコードをFileBlogトークのシステム設定で取得（コピー）できます。

<FbFrame data-src="/talk/chat/597cfe8a-c5b5-452c-b6ad-79b460dc9670"></FbFrame>
<FbFrame data-src="/talk/search/SearchFbManual"></FbFrame>

HTML要素の属性

独自要素（タグ）の中で使用できる属性です。

  • 属性の値は=""で指定します。

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

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

data-path

対象のパスを指定します。FileBlogのVFSパスを使用します。

<FbGrid data-path="/DocRoot/hello"></FbGrid>

data-viewid

ファイル一覧の表示形式を指定できます。

値

説 明

details_normal

基本表示形式の［一覧表示］と同じ

data-keywordを併用すると 親フォルダ＋親フォルダパス も表示される

details_dateparent

ファイル名＋親フォルダ＋更新日 が表示される［一覧表示］

details_nameonly

ファイル名のみ表示される［一覧表示］

details_date

ファイル名＋更新日 が表示される［一覧表示］

details_size

ファイル名＋サイズ が表示される［一覧表示］

details_ext

ファイル名＋拡張子 が表示される［一覧表示］

detailtag

基本表示形式の［タグ一覧］と同じ

thumbnails

基本表示形式の［画像表示］と同じ

largethumbnails

基本表示形式の［画像表示(大)］と同じ

card

基本表示形式の［詳細表示］と同じ

slimtile

ファイル名のみがタイル形式で整列表示される（既定幅180px）

slimdetails

ファイル名の下に 更新日時＋サイズ＋親フォルダ が表示される

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-viewid="card" data-header="true"></FbGrid>

data-orderby  /  data-orderbydescending

並び順の昇順・降順を指定できます。

  • data-orderby： 昇順を指定

  • data-orderbydescending： 降順を指定

値

説 明

name

ファイル名

size

ファイルサイズ

lastwritetime

更新日

extention

拡張子

 
<FbGrid data-path="/DocRoot/hello" data-viewid="card" data-orderby="lastwritetime"></FbGrid>

data-href

<FbGridItem>で使用します。URLを指定してハイパーリンクを作成できます。リンク先が外部URL（FileBlogサーバーと同一ホスト内ではない）だと常に別タブで開きます。

<FbGrid>
    <FbGridItem data-href="https://www.shinyokohama.com">テキスト1</FbGridItem>
    <FbGridItem data-href="https://www.sakuragicho.com">テキスト2</FbGridItem>
</FbGrid>

  • www.shinyokohama.comが外部サイトを指すとき、別タブで開きます。

  • www.sakuragicho.comがFileBlogサーバーのホスト名を指すとき、現在タブで開きます。

data-target

<FbGrid>で使用します。<FbGridItem>の全てのリンク先が別タブで開くようになります。

<FbGrid data-target="_blank">
    <FbGridItem data-href="https://www.shinyokohama.com">テキスト</FbGridItem>
    <FbGridItem data-href="https://www.sakuragicho.com">テキスト2</FbGridItem>
    <FbGridItem data-path="/DocRoot/kikuna"></FbGridItem>
</FbGrid>

  • https://www.shinyokohama.comが外部サイトを指すとき、別タブで開きます。

  • www.sakuragicho.comがFileBlogサーバーのホスト名を指すとき、別タブで開きます。

  • /DocRoot/kikunaはFileBlogパスを示しますが、別タブで開きます。

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-slimtile-column-width

data-viewid="slimtile"表示のタイル幅を指定できます。

<FbGrid data-viewid="slimtile"　data-slimtile-column-width="280px"></FbGrid>

data-fields

  1. <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="tag.fieldname-2,keyword,tag.fieldname-1"のようには指定できません。

  2. <FbTree></FbTree>
    プロパティやタグをヘッダーに表示できます。

    値

    説 明

    size

    ファイルサイズ

    extension

    拡張子

    lastwritetime

    更新日時

    tag.[タグフィールド名]

    タグ項目

    		 
    <FbTree data-fields="lastwritetime,tag.tfb_description,tag.fieldname"></FbTree>

data-gridviewpathlinktype

<FbExplorer>タグで使用すると、ポータル表示のファイルに対して［WebServer/GridViewPathLinkType］の動作を指定できます。（フォルダはshowviewの動作に限定されます）

  • showview = 1

  • directopen = 2

  • download = 3

  • downloadopen = 4

  • shownewview = 6

  • downloadedit = 7

<FbExplorer data-gridviewpathlinktype="4" data-path="/DocRoot></FbExplorer>

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>

カレントパスの値に置換します。

  1. index.thtmlファイルで使用すると、そのindex.thtmlファイルのあるフォルダパスを示します。

    • /DocRoot/sub01/index.thtmlの中で$<path>を使用すると、/DocRoot/sub01を示します。

    • $<path>/news.txtは、/DocRoot/sub01/news.txtを示します。

    <FbGrid data-path="$<path>" data-viewid="card"></FbGrid>

  2. FbThtmlの指定先ファイル内で使用すると、指定先ファイルを示します。

    • <FbThtml data-path="/DocRoot/sub01/news.txt">のとき、news.txtファイルの中で使用すると、/DocRoot/sub01/news.txtを示します。

$<epath>

カレントパスのURLエンコードした値に置換します。

  1. index.thtmlファイルで使用すると、そのindex.thtmlファイルのあるフォルダパスを示します。

    • /DocRoot/sub01/index.thtmlの中で$<epath>を使用すると、%2FDocRoot%2Fsub01を示します。

    • $<epath>/news.txtは、%2FDocRoot%2Fsub01%2Fnews.txtを示します。

    <FbGrid data-path="$<epath>" data-viewid="card"></FbGrid>

  2. FbThtmlの指定先ファイル内で使用すると、指定先ファイルを示します。

    • <FbThtml data-path="DocRoot/sub01/news.txt">のとき、news.txtファイルの中で$<epath>を使用すると、%2FDocRoot%2Fsub01%2Fnews.txtを示します。