TIPプラグインの使い方

TIPプラグイン Ver4.05版

複数のCSVファイルを読み込む

1. CSVファイルは、tip_data.csv と同じ、「csv」フォルダへ保存してください。

2. [tip_loadcsv] タグで、CSVファイルを読み込みます。

   sample.csv を読み込む場合
   [tip_loadcsv file=sample.csv]

3. sample.csv の内容を表示する時は、各タグに data_name=sample を記述します。

   例：tip タグの場合
   [tip key=xxx data_name=sample]xxx[endtip]

   例：TIPリストの場合
   [tip_list data_name=sample]

   例：tip_show タグの場合
   [tip_show key=xxx data_name=sample]

   例：[tip_flag]タグの場合
   [tip_flag key=xxx flag_name=yyy data_name=sample]

   例：[tip_btn] タグの場合
   [button (略) name=tip_btn,sample role=sleepgame]
   [tip_btn data_name=sample]

フラグ

フラグについて

CSVファイル読み込み時に自動で flag の項目が追加されます。
初期値は、flag=true または省略時は -1、flag=false 時は 0 になっています。
TIPを開くごとにカウントがプラスされていきます。

複数のフラグを追加する

新たなフラグを追加する場合は、[tip_flag] タグを使います。
key または id のどちらかは必須です。

フラグ名を flag_name で追加します。

フラグの値は flag_val で指定します。
省略時は true が入ります。

ページを解放したいタイミングでタグを実行します。
[tip_flag key=tyrano flag_name=xxx]

テンプレートでは、{{if}} タグで条件分岐します。

{{if xxx==true}}～{{/if}}

詳しくは「JsRenderタグ {{if …}}～{{else}}～{{/if}}」を参照してください。

サンプルでは、flag2 という名前のフラグを追加し、TIPの2ページ目の解放に使用しています。

TIPから別のTIPを表示する

CSV に直接htmlタグを記述し、class名 tip と、data-key を記述します。

<span class='tip' data-key='hoge'>ほげ</span>
<span class='tip' data-key='hoge' data-name='sample'>ほげ</span>

マークを付ける場合は class名 mark を追記します。

<span class='tip mark' data-key='hoge'>ほげ</span>
<span class='tip mark' data-key='hoge' data-name='sample'>ほげ</span>

TIPをページ分けする

CSVファイルは、ページごとに項目を分けて記述します。
※サンプルは tip,tip2 となっていますが、項目名は何でもOK。

csvファイル
key,title,tip,tip2,...
tyrano,ティラノ,1ページ目テキスト,2ページ目テキスト,...

テンプレートに必要なページ数分、htmlタグを記述します。
class=tip_body の数でページ数を数えます。

tip.html
<span class="tip_body">{{:tip}}</span>
<span class="tip_body">{{:tip2}}</span>

2ページ目が存在しない時は非表示にする

<span class="tip_body">{{:tip}}</span>
{{if tip2}}<span class="tip_body">{{:tip2}}</span>{{/if}}

※{{if tip2}} は {{if tip2==true}} と同じです。

2ページ目をフラグ管理する（フラグ名「page2」の場合）

{{if tip2 && page2}}<span class="tip_body">{{:tip2}}</span>{{/if}}

フラグ管理してテキストだけ変える場合

<span class="tip_body">{{if tip2 && page2}}{{:tip2}}{{else}}まだ秘密{{/if}}</span>

ページを指定してTIPを開く

ページを数値で指定する

複数ページがある場合、開くページを指定できます。

[tip key=hoge page=2] ※pageは1から

表示中のページ数しか数えられないので、フラグでページの表示を制御してる場合は注意してください。

ページに名前を付けて指定する

1. テンプレートに data-page="xxx" と名前を付けます。

   <div class="tip_body" data-page="testpage">

2. タグで名前を指定します。

   [tip key=hoge page=testpage]

※data-page の値は、先頭に数値のある名前は動作しません。
〇　page2
×　2page

TIPテキストにマークをつける

全てのTIPテキストにマークを付ける

[plugin] タグに mark=true を指定します。

[plugin name=tip mark=true]

指定したテキストにだけ付けたい

[plugin] よりも [tip] の指定が優先になります。

1. [plugin] タグでは mark の指定をしません。

   [plugin name=tip]

2. [tip] タグに mark=true を指定をします。

   [tip key=xxx mark=true]

指定したテキストだけ消したい

mark=false で消す事もできます。

1. [plugin] タグでは mark=true の指定をします。

   [plugin name=tip mark=true]

2. [tip] タグに mark=false を指定をする。

   [tip key=xxx mark=false]

バックログのmarkだけ消したい

1. [plugin name=tip mark=true] にします。

2. バックログのmarkはスタイルシートで非表示にします。

   .log_body .tip.mark{
   	margin: 0px;
   }
   .log_body .tip.mark:after{
   	background:none;
   }

バックログだけマークを付けたい

1. [plugin name=tip mark=true] にします。

2. メッセージのマークをスタイルシートで非表示にします。
   tip.css の下の方にコピペしてください。※削除禁止の上あたり

   .message_inner .tip.mark {
   	margin: 0px;
   }
   .message_inner .tip.mark_on:after {
   	display:none;
   }

Newマークを付ける

サンプルのテンプレートには最初からついていますが、
tip.html と tip_list.html で flag の指定が変わりますので注意してください。
flag の値は下記のようにカウントが増えていきます。

未開放時	-1
解放済み未読時	0
表示時	+1

リストでは未読状態、TIPでは初回表示を New としています。

tip.html	{{if flag==1}}New{{/if}}
tip_list.html	{{if flag==0}}New{{/if}}

リスト表示用ボタンに未読数をつける

1. [button] [glink] タグに name=tip_btn,data_name を指定します。
   ※data_name は初期値の tip_data.csv でも省略できません。

   tip_data.csv の場合
   [button name=tip_btn,tip_data role=sleepgame]

2. [button] [glink] タグのすぐあとに [tip_btn] タグを書きます。
   make.ks にも [tip_btn] タグを書きます。

   [button name=tip_btn,tip_data role=sleepgame]
   [tip_btn]

リストのソート

指定した項目でソートしてTIPリストを表示する

[tip_list] タグの sort_key パラメータに、ソートしたい列の「見出し」を指定します。

※title列でソートする場合
[tip_list sort_key=title]

ソート順を指定する

パラメータ sort_reverse に true/false を指定します。

false	昇順
true	降順

[tip_list sort_key=title sort_reverse=true]

TIPリストをにソートボタンを付ける

1. tip_list.html に直接htmlタグを記入し、要素にクラス名 tip_sort を指定します。
2. data-sortkey にソートしたい列の「見出し」を指定します。
3. ソート順を固定する場合は data-reverse を指定します。
   

   fasle	昇順
   true	降順

   ※指定が無ければtoggleボタンになります。

   <span class="tip_sort" data-sortkey="id">idでソート</span>

4. デザインをスタイルシートで整形します。
   ※現在ソート中の .tip_sort には Class名「now」が付き、降順の時は class名「reverse」が付きますので、どうにか良い感じに使ってください。

ソートボタン例

<div class="sort">
	<span class="tip_sort" data-sortkey="id" data-reverse="">idでソート</span>
	<span class="tip_sort" data-sortkey="title" data-reverse="">titleでソート</span>
</div>

テンプレート

最低限必要なDOM要素

※JsRenderタグは省略しています。

tip.html

<div id="tip_container">　←必須
	<a class="tip_close_button"></a>　←必須
	<ul class="tip_nav"></ul>　←ページ分けする時は必須
	<div class="tip_body"></div>　←ページ分けする時は必須
</div>

tip_list.html

<div id="tip_list_container">　←必須…でもないけど一応
	<div class="button_close"></div>　←必須
	<ul class="tips_nav"></ul>　←ページ分けする時は必須
	<li class="tip_list" data-num={{:id}}></li>　←TIP開く時は必須
</div>

使える変数

tip.html

• CSVファイルで定義した見出し
• tip_flag タグで追加したフラグ名
• id （CSVの表記順）
• flag （数値）

tip.html

ループで使える変数

• CSVファイルで定義した見出し
• tip_flag タグで追加したフラグ名
• id （CSVの表記順）
• flag （数値）

ループでは使えない変数

• maxnum （総データ数）
• truenum （解放数）
• unread （未読数）

JsRenderタグ

{{:xxx}}

値を出力するタグです。タグ内で演算も可能です。
TIPプラグインでは、idを1スタートにするために、{{:id+1}} と記述しています。

{{for xxx}}～{{/for}}

配列をループしたい時に使用します。
例えば、リスト用の表示用データはこんな感じになっているのですが。

data = {
　truenum : 数値 ,　←解放数
　maxnum : 数値 ,　 ←総データ数
　unread : 数値 ,　 ←未読数
　tips = [
　　{id : 0 , key : tyrano , title : ティラノスクリプト , tip : 1ページ目 , ...},
　　{id : 1 , key : akane , title : あかね , tip : 1ページ目 , ...},
　　{...}
　]
}

{{for tips}}～{{/for}} で tips の配列をループします。

{{if …}}～{{else}}～{{/if}}

条件分岐したい時に使います。
{{else}} は条件を入れると elseif としても機能します。

TIPプラグインでは、Newマークや、未開放時のテキスト隠しなどに使っています。

テキストだけ隠したい時

<div> {{if flag>=0}} {{:title}} {{else}} ？？？？？ {{/if}} </div>

要素ごと隠したい時

{{if flag>=0}} <div> {{:title}} </div> {{/if}}

別のテンプレートを指定する

テンプレートファイルは tip/html フォルダに保存してください。
※ファイル名はなんでも

[tip_loadcsv] に、パラメータ tip_html tiplist_html を指定します。

[tip_loadcsv file=sample.csv tip_html=sample_tip.html listtip_html=sample_listtip.html]

CSV読み込み時に指定する事で、以降指定を省略できます。
[tip_list data_name=sample] で、sample_listtip.html が使用されます。

関連記事