Skip to content

ツールチップティラノスクリプトプラグイン

Notifications You must be signed in to change notification settings

kyusu0918/tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

【ツールチップラグイン tooltip ver1.0.0】

====================================================================================================
■ 概要
====================================================================================================
テキストに説明文としてツールチップを付加するプラグインです。
説明文の直接表示はもちろん、変数を使ったリストからの表示も可能です。

====================================================================================================
■ 作成者
====================================================================================================
Name: 柚須 佳
Mail: kyusu0918@gmail.com
X: https://twitter.com/kei_yusu

====================================================================================================
■ 対象
====================================================================================================
1.TyranoScript|ティラノスクリプト Ver5.00 以上
※動作確認はVer5.00で行っています。

2.TyranoBuilder 2.0.1b standard ja 以上
※動作確認は2.0.1b standard jaで行っています。

====================================================================================================
■ ファイル
====================================================================================================
1.tooltip: ティラノスクリプト用プラグインフォルダ
2.tooltip.tbp: ティラノビルダー用プラグインファイル
3.readme.txt: 当ファイル

====================================================================================================
■ 機能
====================================================================================================
1.テキストへのツールチップの設定と表示
2.ツールチップの初期設定
3.ツールチップデータの登録
4.ツールチップデータの削除
5.ツールチップデータのクリア

====================================================================================================
■ 使い方(ティラノスクリプト用)※ティラノビルダー用は後述
====================================================================================================
1.data/others/plugin にtooltip{バージョン}.zipファイル内の「tooltip」フォルダをコピーてください。
  ※下記構成で2ファイルがあるか確認してください。
  data/others/plugin/tooltip/init.ks
  data/others/plugin/tooltip/tooltip.js
2.first.ksからプラグインを呼び出してください。
  [plugin name=tooltip]
3.後述のタグリファレンスを参考にして好感度管理を行います。

====================================================================================================
■ タグリファレンス(ティラノスクリプト用)※ティラノビルダー用のコンポーネントリファレンスは後述
====================================================================================================

; 下記リファレンスの1~5の内容を、ティラノスクリプトのシナリオファイル(.ks)に、そのまま貼り付けても動作します。

;----------------------------------------------------------------------------------------------------
; 1.ツールチップ開始終了タグ
;
; 開始タグと終了タグで、ツールチップを表示したいテキストを囲みます。
; 例)このテキストのここが[tooltip desc="これがツールチップです"]ツールチップ[end_tooltip]の対象なります。
;
; 【注意】
; tooltipタグには、idかdescのどちらかのパラメータが必要になります。
; 両方とも省略された場合は、ツールチップは表示されません。
;
; 【タグ】
; tooltip, end_tooltip
;
; 【パラメータ】
; id              省略可能  ツールチップ登録で登録したID(省略時はID参照せずdescの値を使用する)
; text_color      省略可能  テキストカラー(省略時はツールチップ設定で設定した値)
; desc            省略可能  ツールチップ説明文(省略時はdescの値を使用せずID参照する)
; position        省略可能  ツールチップ表示位置「top,bottom,left,rightを指定可能」(省略時はツールチップ設定で設定した値)
; desc_fontsize   省略可能  ツールチップフォントサイズ(省略時はツールチップ設定で設定した値)
; desc_color      省略可能  ツールチップフォントカラー(省略時はツールチップ設定で設定した値)
; desc_backcolor  省略可能  ツールチップ背景カラー(省略時はツールチップ設定で設定した値)
; desc_height     省略可能  ツールチップ高さ(省略時はツールチップ設定で設定した値)
; desc_width      省略可能  ツールチップ幅(省略時はツールチップ設定で設定した値)
;----------------------------------------------------------------------------------------------------
①「tooltip」と「end_tooltip」タグを使ってツールチップを表示[r]
例)このテキストのここが[tooltip desc="これがツールチップです"]ツールチップ[end_tooltip]の対象となります。[r]
マウスカーソルを当てると説明文が表示されましたね[p]

設定により[tooltip text_color="orange" desc_color="0xff0000" desc_backcolor="pink" desc_height="100px" desc="テキストとツールチップの色を変更しました"]ツールチップの色[end_tooltip]を変更しました。[r]
また、[tooltip position="bottom" desc_width="50%" desc="テキストの下に出してみました"]ツールチップの位置[end_tooltip ]も変更することができます。[p]

;idパラメータについては、「tooltip_set」タグで説明します。


;----------------------------------------------------------------------------------------------------
; 2.ツールチップ設定
;
; ツールチップの初期値を設定します。
; ツールチップ開始タグでパラメータが省略された際に使用されます。
;
; 【タグ】
; tooltip_config
;
; 【パラメータ】
; text_color      省略可能  テキストカラー(省略時はデフォルト値のlightgreen)
; position        省略可能  ツールチップ表示位置「top,bottom,left,rightを指定可能」(省略時はデフォルト値のtop)
; desc_fontsize   省略可能  ツールチップフォントサイズ(省略時はデフォルト値の12)
; desc_color      省略可能  ツールチップフォントカラー(省略時はデフォルト値のlightgreen)
; desc_backcolor  省略可能  ツールチップ背景カラー(省略時はデフォルト値のgray)
; desc_height     省略可能  ツールチップ高さ(省略時はデフォルト値の自動調整)
; desc_width      省略可能  ツールチップ幅(省略時はデフォルト値の自動調整)
;----------------------------------------------------------------------------------------------------
②「tooltip_config」タグを使って、ツールチップの初期値を設定[p]
[tooltip_config text_color="skyblue" position="right" desc_fontsize="16" desc_color="blue" desc_backcolor="lightblue"]

[tooltip desc="初期値が反映されている"]初期値[end_tooltip]を設定したので、色や配置を毎回指定しなくてもツールチップが変更されてますね。[p]


;----------------------------------------------------------------------------------------------------
; 3.ツールチップ登録
;
; ツールチップストアにIDと説明文を登録します。
; ツールチップストアは、システム変数(sf)内にtooltip_store配列として作成されます。
;
; 【タグ】
; tooltip_set
;
; 【パラメータ】
; id    必須      ツールチップを識別する一意のキー
; desc  省略可能  ツールチップ説明文(省略時は空白)
; memo  省略可能 メモ(省略時は空白)
;----------------------------------------------------------------------------------------------------
③「tooltip_set」タグを使って、ツールチップストアにデータを登録[p]

[tooltip_set id=1 desc="ID=1として登録した説明文"]
[tooltip_set id=2 desc="データはIDで管理しています"]
[tooltip_set id="Test" desc="IDは文字列でもOK"]

IDと説明文で[tooltip id=1]データ[end_tooltip]として登録しておけば、呼び出しが簡単です。[r]
[tooltip id=1 position="top"]データ1[end_tooltip]と[tooltip id=2]データ2[end_tooltip]みたいにした場合も楽々ですね。[r]
IDは[tooltip id="Test"]文字列[end_tooltip]でも大丈夫です。[p]


[tooltip_set id=2 desc="同一IDに設定した場合は上書き"]

こちらが[tooltip id=2 desc_color="red"]上書き[end_tooltip]された内容です。[p]


;----------------------------------------------------------------------------------------------------
; 4.ツールチップ削除
;
; ツールチップストアに登録されたデータを削除します。
;
; 【タグ】
; tooltip_del
;
; 【パラメータ】
; id    必須      ツールチップを識別する一意のキー
;----------------------------------------------------------------------------------------------------
④「tooltip_del」タグを使って、ツールチップストアのデータを削除[p]

[tooltip_del id="Test"]

IDが[tooltip id="Test"]Testのデータ[end_tooltip]を削除したのでツールチップが表示されない。[p]


;----------------------------------------------------------------------------------------------------
; 5.ツールチップクリア
;
; ツールチップの設定とストアデータを全てクリアします。
;
; 【タグ】
; tooltip_clear
;
; 【パラメータ】
; なし
;----------------------------------------------------------------------------------------------------
⑤「tooltip_clear」タグを使って、ツールチップの設定とストアデータを全てクリア[p]

[tooltip_clear]

ストアデータが削除されているので[tooltip id=1]ツールチップ[end_tooltip]が表示されない。[p]

初期値もクリアされているのでデフォルトの[tooltip desc="色とか位置がデフォルトです"]ツールチップ[end_tooltip]で表示される。[p]

====================================================================================================
■ 使い方(ティラノビルダー用)
====================================================================================================
※ティラノビルダー用は「tooltip.tbp」ファイルを使用します。
1.「tooltip{バージョン}.zip」を展開してください。
2.ティラノビルダーのメニューから、「プロジェクト」-「プラグイン」を選択しプラグイン画面を表示してください。
3.プラグイン画面で「プラグインを追加」ボタンを押して展開したフォルダ内の「tooltip.tbp」を選択してください。
4.プラグインがインストールされると、新規プラグイン「ツールチッププラグイン」インストール完了と表示されます。
5.「プラグインを追加」ボタンの下にあるリストに「ツールチッププラグイン」が追加されます。
6.プラグイン画面を閉じます。
7.ティラノビルダーのメニューから、「プロジェクト」-「コンポーネント管理」を選択しコンポーネント管理画面を表示してください。
8.コンポーネント管理画面を下へスクロールし、「プラグイン」をチェックしてください。
9.「ツールチップ設定」「ツールチップ登録」「ツールチップ削除」「ツールチップクリア」の5つのコンポーネントがチェックされていることを確認してください。
10.コンポーネント管理画面の下部にある「適用する」ボタンを押してください。
11.ティラノビルダーのメイン画面に戻り、コンポーネントの最下部にプラグインが表示されているか確認してください。
12.後述のコンポーネントリファレンスを参考にしてツールチップを使用します。

====================================================================================================
■ コンポーネントリファレンス(ティラノビルダー用)
====================================================================================================
;----------------------------------------------------------------------------------------------------
; 1.ツールチップ開始終了タグ
;
; ティラノビルダーの標準コンポーネントである「テキストコンポーネント」内で
; 開始タグ([tooltip])と終了タグ([end_tooltip])で、ツールチップを表示したいテキストを囲みます。
;
; 例)このテキストのここが[tooltip desc="これがツールチップです"]ツールチップ[end_tooltip]の対象なります。
;
; 【注意】
; tooltipタグには、idかdescのどちらかのパラメータが必要になります。
; 両方とも省略された場合は、ツールチップは表示されません。
;
; 【コンポーネント】
; なし(タグの直接使用)
;
; 【パラメータ】
; id              省略可能  ツールチップ登録で登録したID(省略時はID参照せずdescの値を使用する)
; text_color      省略可能  テキストカラー(省略時はツールチップ設定で設定した値)
; desc            省略可能  ツールチップ説明文(省略時はdescの値を使用せずID参照する)
; position        省略可能  ツールチップ表示位置「top,bottom,left,rightを指定可能」(省略時はツールチップ設定で設定した値)
; desc_fontsize   省略可能  ツールチップフォントサイズ(省略時はツールチップ設定で設定した値)
; desc_color      省略可能  ツールチップフォントカラー(省略時はツールチップ設定で設定した値)
; desc_backcolor  省略可能  ツールチップ背景カラー(省略時はツールチップ設定で設定した値)
; desc_height     省略可能  ツールチップ高さ(省略時はツールチップ設定で設定した値)
; desc_width      省略可能  ツールチップ幅(省略時はツールチップ設定で設定した値)
;----------------------------------------------------------------------------------------------------
ティラノビルダーの標準コンポーネントである「テキストコンポーネント」を
シナリオエリアにドラッグ&ドロップし、下記3行をテキストに入力

例)このテキストのここが[tooltip desc="これがツールチップです"]ツールチップ[end_tooltip]の対象となります。
設定により[tooltip text_color="orange" desc_color="0xff0000" desc_backcolor="pink" desc_height="100px" desc="テキストとツールチップの色を変更しました"]ツールチップの色[end_tooltip]を変更しました。
また、[tooltip position="bottom" desc_width="50%" desc="テキストの下に出してみました"]ツールチップの位置[end_tooltip ]も変更することができます。


;----------------------------------------------------------------------------------------------------
; 2.ツールチップ設定
;
; ツールチップの初期値を設定します。
; ツールチップ開始タグでパラメータが省略された際に使用されます。
;
; 【コンポーネント】
; ツールチップ設定
;
; 【パラメータ】
; テキストカラー              ツールチップの対象となるテキストの色(初期値は#90ee90 lightgreen)
; 表示位置                   ツールチップを表示する位置「テキストの上,テキストの下,テキストの左,テキストの右を指定可能」(初期値はテキストの上)
; ツールチップフォントサイズ  ツールチップのフォントサイズ(初期値は12)
; ツールチップテキストカラー  ツールチップのテキストの色(初期値は#ffffff white
; ツールチップ背景カラー      ツールチップの背景色(初期値は#808080 gray)
; ツールチップ高さ            ツールチップの高さ(初期値は空白の自動調整)
; ツールチップ幅              ツールチップの幅(初期値は空白の自動調整)
;----------------------------------------------------------------------------------------------------
STEP-1:「ツールチップ設定」コンポーネントをシナリオエリアにドラッグ&ドロップし、各パラメータを設定

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  テキストカラー:#a0d8ef
  表示位置:テキストの右
  ツールチップフォントサイズ:16
  ツールチップテキストカラー:#0000ff
  ツールチップ背景カラー:#add8e6
  ツールチップ高さ:100px
  ツールチップ幅:100px
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  

STEP-2:ティラノビルダーの標準コンポーネントである「テキストコンポーネント」を
シナリオエリアにドラッグ&ドロップし、下記1行をテキストに入力

[tooltip desc="初期値が反映されている"]初期値[end_tooltip]を設定したので、色や配置を毎回指定しなくてもツールチップが変更されてますね。


;----------------------------------------------------------------------------------------------------
; 3.ツールチップ登録
;
; ツールチップストアにIDと説明文を登録します。
; ツールチップストアは、システム変数(sf)内にtooltip_store配列として作成されます。
;
; 【コンポーネント】
; ツールチップ登録
;
; 【パラメータ】
; ID      ツールチップを識別する一意のキー(初期値は空白)
; 説明文  ツールチップ説明文(初期値は空白)
; メモ    メモ(初期値は空白)
;----------------------------------------------------------------------------------------------------
STEP-1:「ツールチップ登録」コンポーネントをシナリオエリアにドラッグ&ドロップし、各パラメータを設定

  ※このサンプルでは3レコードのデータを登録しています。
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1つ目
  ID:1
  説明文:ID=1として登録した説明文
  メモ:1つ目
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  2つ目
  ID:2
  説明文:データはIDで管理しています
  メモ:2つ目
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  3つ目
  ID:Test
  説明文:IDは文字列でもOK
  メモ:3つ目
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  

STEP-2:ティラノビルダーの標準コンポーネントである「テキストコンポーネント」を
シナリオエリアにドラッグ&ドロップし、下記3行をテキストに入力

IDと説明文で[tooltip id=1]データ[end_tooltip]として登録しておけば、呼び出しが簡単です。
[tooltip id=1 position="top"]データ1[end_tooltip]と[tooltip id=2]データ2[end_tooltip]みたいにした場合も楽々ですね。
IDは[tooltip id="Test"]文字列[end_tooltip]でも大丈夫です。


;----------------------------------------------------------------------------------------------------
; 4.ツールチップ削除
;
; ツールチップストアに登録されたデータを削除します。
;
; 【コンポーネント】
; ツールチップ削除
;
; 【パラメータ】
; ID  ツールチップを識別する一意のキー(初期値は空白)
;----------------------------------------------------------------------------------------------------
STEP-1:「ツールチップ削除」コンポーネントをシナリオエリアにドラッグ&ドロップし、各パラメータを設定

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ID:1
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  

STEP-2:ティラノビルダーの標準コンポーネントである「テキストコンポーネント」を
シナリオエリアにドラッグ&ドロップし、下記1行をテキストに入力

IDが[tooltip id=1]1のデータ[end_tooltip]を削除したのでツールチップが表示されない。


;----------------------------------------------------------------------------------------------------
; 5.ツールチップクリア
;
; ツールチップの設定とストアデータを全てクリアします。
;
; 【コンポーネント】
; ツールチップクリア
;
; 【パラメータ】
; なし
;----------------------------------------------------------------------------------------------------
STEP-1:「ツールチップクリア」コンポーネントをシナリオエリアにドラッグ&ドロップ

STEP-2:ティラノビルダーの標準コンポーネントである「テキストコンポーネント」を
シナリオエリアにドラッグ&ドロップし、下記2行をテキストに入力

ストアデータが削除されているので[tooltip id=2]ツールチップ[end_tooltip]が表示されない。
初期値もクリアされているのでデフォルトの[tooltip desc="色とか位置がデフォルトです"]ツールチップ[end_tooltip]で表示される。

====================================================================================================
■ 免責
====================================================================================================
1.作成者は当プラグインの利用によって生じるいかなる損害に対しても一切の責任を負いません。

====================================================================================================
■ 利用規約
====================================================================================================
1.当プラグインを利用する際は、すべての適用法律および規制を遵守しなければなりません。
2.当プラグインの複製・変更・再配布は自由です。ただし、有償での再配布は禁止します。
3.当プラグインの利用報告、クレジット記載などは任意です。(報告や記載して頂けると嬉しいです。)

====================================================================================================
■ リリースノート
====================================================================================================
2024/01/20  ver1.0.0  初版リリース

About

ツールチップティラノスクリプトプラグイン

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages