ボタンのカスタムアクション

概要：カスタムアクションとは？

カスタムアクションを使うと、カレンダーにオリジナルのボタンを追加できます。追加したボタンから自分で作ったFileMakerのスクリプトを実行することで、カレンダーの機能を拡張できる便利な方法です。

それぞれのソースに独自のアクションのボタンを作ることができます。サンプルのイベントのテーブルには、ボタンが2つあります。1つは該当するFileMakerのレイアウトからイベントのレコードへジャンプするボタン、もう1つはシンプルなダイアログを表示するだけのボタンです。

イベントのポップオーバーの右下にある歯車のアイコンをクリックして、アクションのドロワーを表示します。カスタムアクションはいくつでも追加できます。アクションのリストがドロワーに表示しきれなくなると、スクロールできるようになります。

動作の概要と、サンプルのアクションに手を加えてオリジナルのアクションを作るヒントを、以下に示します：

Extending the DayBack FileMaker Calendar with Custom Actions

オリジナルのアクションを作る方法

「Load Source Settings at Startup...」スクリプトを編集して、アクションボタンを定義します。このスクリプト中の各ソースに「$sc_CustomEventActions」という変数があります。この変数の定義で、アクションボタンの名前と実行するスクリプトの名前を宣言しています。

これは「ボタン名＜コンマ＞スクリプト名」の形式をとります。上の動画にあるポップオーバーのうち、「$sc_CustomEventActions」の定義を以下に示します：

List (
"View Event Record, Go To Event Record From WebViewer";
"Sample Custom Action, Custom Action Example" ;
""
)

これは、DayBackが「View Event Record」という名前のアクションボタンを表示し、このボタンがクリックされると「Go To Event Record From WebViewer」という名前のFileMakerのスクリプトをコールするという意味です。3行目が意図的に空欄になっているのは、「Watch For Event Changes」（イベントの変更を監視する）のオプションです。このオプションはTrueまたはFalseにセットできます。ほとんどの場合、このオプションは必須ではなくスクリプトが複雑になるため、3つめのパラメータは空欄にしておくことを推奨します。この機能については、このページで後述します。

ドロワー上部のテキスト（「独自のスクリプトを実行する」）は、カレンダーをローカライズするファイルを調整することで好きなように変更できます。

カスタムアクションボタンにアイコンと色を追加する

カスタムアクションボタンの外観を変更するには、それらのボタンに固有のCSSを追加します。これが機能する方法は、新しいCSSクラス名を対象となるボタンにタグ付けし、DayBackのCSSでそのクラス名のスタイルを定義します。

ボタンにCSSクラス名をタグ付けする
スクリプト「Load Source Settings at Startup...」を見てください。ボタンにCSSクラスを追加するには、ボタンに設定されているスクリプト名の後に追加のパラメータを追加します。そのため、ボタンは次のようになります。

例：「Go To Event Record From WebViewer」のボタンにクラス名をタグ付け
```
List (
"View Event Record, Go To Event Record From WebViewer, SomeClassName";
"Sample Custom Action, Custom Action Example, AnotherClassName" ;
""
)
```
クラス名をスペースで区切ることによって、ボタンに複数のクラスをタグ付けすることができます。
CSSクラス名にcssを適用する
次に、そのクラスにCSSを適用します。DayBackのCSSに新しい行を追加して、ボタンのスタイルを設定します。
スタイルの変更についてはテーマの変更で詳しく解説されています。
例：ボタンを青色にしてチェックアイコンを付けるためのサンプルCSS
```
.SomeClassName .btn { 
background-color: blue; 
} 
.SomeClassName .btn:hover { 
background-color: gray; 
} 
.SomeClassName .btn:active { 
background-color: black; 
} 
.SomeClassName .btn::before { 
content: "\f00c"; 
font-family: FontAwesome; 
padding-right: 5px; 
}
```
- アイコンの使用
  CSSでFontAwesomeアイコンセットのアイコン名を指定することができます。上の例では「.btn ::before」"\ f00c" を指定しています。
- アイコンを指定するときは、https://fontawesome.com/cheatsheet で探してUnicodeを調べます。ください（DayBackでは、FontAwesomeアイコンの大部分をサポートしています。

アイコンの右側に、アイコンのUnicodeが表示されます。使用したいアイコンのUnicodeの先頭に「\」をつけます。この場合は "\f073"です。

アクションスクリプトを書くためのヒント

サンプルの「Go To Event Record From WebViewer」スクリプトを見てください。ここに、アクセスする変数が示されています。

「Find Event by ID (ID)」スクリプトをコールし、「$eventID」変数をスクリプトのパラメータとして渡すことによりイベントにジャンプする方法にも注目してください。

カスタムアクションでコールするスクリプトは、イベントを見つけて操作するためのいくつかのローカル変数にアクセスします。ローカル変数は、スクリプトの実行が開始された時にすでに宣言されています：

$start：クリックしたイベントの開始のタイムスタンプ。たとえば「2014/10/28 12:15:00」。
$source：クリックしたイベントが割り当てられているソースの番号。たとえば、イベントが「Source No 1」レイアウトに割り当てられていれば、$sourceは「1」になります。
$eventID：プライマリキー（ユニークIDで、多くの場合シリアル番号）、またはクリックしたイベント。「DBk_WebViewerSource」の計算フィールドにおいて「id」で指定されているフィールドから取得します。
$end：クリックしたイベントの終了のタイムスタンプ。たとえば「2014/10/28 12:15:00」。
$allDay：終日のイベント（開始時刻のないイベント）かどうかに関するTrueまたはFalse。

$startと$endのパラメータはカレンダーで使用している日付の書式になることに注意してください。日付の書式をデフォルトのままにしている場合は、あなたの地域の日付の書式になります。

イベントの変更を監視する

これが「Load Calendar Settings」スクリプトでカスタムアクションを作成する際の3つめのオプションです。通常は、このオプションは空欄にしておきます。このオプションを「True」にすると、Webビューアに対して「$queryID」パラメータをカスタムアクションのスクリプトに戻すようにシグナルを送ります。このようにして、各プロセスが独自のIDを持つようになります。イベントが更新された時にシグナルを送るために使うためのものでもありますが、これに関しては現在はもっと良い方法を用意しています。特に、FileMakerのレコードでイベントが変更されたらWebビューアでイベントを更新するための「Close Event Window & Refresh Calendar」スクリプトがあります。

FileMakerのスクリプトではなく、Webアプリケーション中のスクリプトを動作させる必要がある場合

FileMakerスクリプトから他のアプリケーションのURLを呼び出すことができます。

参考記事　Connect Your Calendar to the Rest of Your Life

また、JavaScriptを使って他のアプリケーションと直接対話することもできます。

JavaScriptのカスタムアクションを参照してください。

このドキュメントの最新バージョン（英語）
DayBack Documentation and Integration Instructions｜Custom Button Actions

このセクションの記事