ショートコードについて

Slim Chatworkバージョン0.3.5よりテンプレート登録機能にてショートコード（短いコードで呼び出せる便利な機能）を利用することが可能になりました。ショートコードを使用する事でテンプレート登録機能をより便利に活用することが出来ます。ここではそんなショートコードの活用例をご紹介します。

バグ報告はこちら
拡張機能のレビューはこちら
「こんなショートコードあると便利！」などのご意見は（@_cofus）にてお待ちしております

選択テキストの挿入

メッセージ入力エリアで選択中のテキストを、登録テンプレート内の指定位置に挿入する事が出来ます。

構文

{@selected:}

活用例

例えばチャットワーク装飾タグの中にはテキストを囲む事でリッチな枠を付けられる（[info][/info]）等の装飾タグがありますが、ショートコードを活用すると選択中のテキストを装飾タグで囲む事が簡単に出来ます。

例）選択テキストを`[info][/info]`で囲む

[info]{@selected:}[/info]

実際の操作の様子

例）選択テキストを`[info][title][/title][/info]`で囲む

[info][title][/title]{@selected:}[/info]

実際の操作の様子

※ ボタンを押した後のカーソル位置はこちらの構文で指定可能です。

例）選択テキストを`[code][/code]`で囲む

[code]{@selected:}[/code]

実際の操作の様子

例）選択テキストを`[info][title][/title][code][/code][/info]`で囲む

[info][title][/title][code]{@selected:}[/code][/info]

実際の操作の様子

仕様について

未選択の時

構文が複数ある場合

カーソル位置の指定

テンプレート登録機能で追加したボタンをクリックすると登録テンプレートをメッセージ入力エリアに挿入する事が出来ますが、挿入した後のカーソルの位置を明示的に指定することが出来ます。

構文

{@cursor:}

活用例

例えば{@selected:}構文と組み合わせることで、チャットワーク装飾構文の「枠＋タイトル」の「タイトル」にカーソル位置を指定することが出来ます。

[info][title]{@cursor:}[/title]{@selected:}[/info]

先頭にカーソル指定

{@selected:}{@curdor:}と2つ並べる事で選択テキストを囲みつつ、更にカーソル位置を指定する事も可能です。

[info]{@cursor:}{@selected:}[/info]

実際の操作の様子

末尾にカーソル指定

[info]{@selected:}{@cursor:}[/info]

実際の操作の様子

日時の挿入

指定したフォーマットでリアルタイムの日時の挿入が出来ます。

※日時処理にはdayjsを使用しています。

構文

{@time:format}

指定可能なformatの例

List of all available format tokens

Format	Output	Description
`YY`	18	Two-digit year
`YYYY`	2018	Four-digit year
`M`	1-12	Month, beginning at 1
`MM`	01-12	Month, 2-digits
`MMM`	Jan-Dec	The abbreviated month name
`MMMM`	January-December	The full month name
`D`	1-31	Day of month
`DD`	01-31	Day of month, 2-digits
`H`	0-23	Hours
`HH`	00-23	Hours, 2-digits
`h`	1-12	Hours, 12-hour clock
`hh`	01-12	Hours, 12-hour clock, 2-digits
`m`	0-59	Minutes
`mm`	00-59	Minutes, 2-digits
`s`	0-59	Seconds
`ss`	00-59	Seconds, 2-digits
`S`	0-9	Hundreds of milliseconds, 1-digit
`SS`	00-99	Tens of milliseconds, 2-digits
`SSS`	000-999	Milliseconds, 3-digits
`Z`	-05:00	Offset from UTC
`ZZ`	-0500	Compact offset from UTC, 2-digits
`A`	AM PM	Post or ante meridiem, upper-case
`a`	am pm	Post or ante meridiem, lower-case
`Do`	1st… 31st	序数付きの日

活用例

`YYYY年MM月DD日`のフォーマットで日時の挿入

本日は{@time:YYYY年MM月DD日}です。

`H:m:s`のフォーマットで時間の挿入

只今の時間は{@time:H:m:s}です。

曜日の挿入

曜日：{@time:dddd}
曜日（短縮表記）：{@time:ddd}

実際の操作の様子

未来日付の挿入

指定したフォーマットで押下時を基準にした未来日時の挿入が出来ます。（Slim Chatworkバージョン0.9.2より追加）

※日時処理にはdayjsを使用しています。

構文

{@date:format,追加日数,unit}

指定可能なformatの例

List of all available format tokens

Format	Output	Description
`YY`	18	Two-digit year
`YYYY`	2018	Four-digit year
`M`	1-12	Month, beginning at 1
`MM`	01-12	Month, 2-digits
`MMM`	Jan-Dec	The abbreviated month name
`MMMM`	January-December	The full month name
`D`	1-31	Day of month
`DD`	01-31	Day of month, 2-digits
`H`	0-23	Hours
`HH`	00-23	Hours, 2-digits
`h`	1-12	Hours, 12-hour clock
`hh`	01-12	Hours, 12-hour clock, 2-digits
`m`	0-59	Minutes
`mm`	00-59	Minutes, 2-digits
`s`	0-59	Seconds
`ss`	00-59	Seconds, 2-digits
`S`	0-9	Hundreds of milliseconds, 1-digit
`SS`	00-99	Tens of milliseconds, 2-digits
`SSS`	000-999	Milliseconds, 3-digits
`Z`	-05:00	Offset from UTC
`ZZ`	-0500	Compact offset from UTC, 2-digits
`A`	AM PM	Post or ante meridiem, upper-case
`a`	am pm	Post or ante meridiem, lower-case
`Do`	1st… 31st	序数付きの日

指定可能なunitの例

Unit	Shorthand	Description
`day`	`d`	Day
`week`	`w`	Week
`month`	`M`	Month
`quarter`	`Q`	Quarter（QuarterOfYearプラグインに依存）
`year`	`y`	Year
`hour`	`h`	Hour
`minute`	`m`	Minute
`second`	`s`	Second
`millisecond`	`ms`	Millisecond

活用例

押下時を基準に未来日付を挿入

今日　　：{@date:YYYY-MM-DD HH:mm:ss（ddd）}
明日　　：{@date:YYYY-MM-DD HH:mm:ss（ddd）,1,d}
明後日　：{@date:YYYY-MM-DD HH:mm:ss（ddd）,2,d}
一週間後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,1,w}
二週間後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,2,w}
三週間後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,3,w}
四週間後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,4,w}
一ヶ月後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,1,M}
二ヶ月後：{@date:YYYY-MM-DD HH:mm:ss（ddd）,2,M}
半年後　：{@date:YYYY-MM-DD HH:mm:ss（ddd）,6,M}
一年後　：{@date:YYYY-MM-DD HH:mm:ss（ddd）,1,y}

実際の操作の様子

https://twitter.com/SlimChatwork/status/1661738225805955074

経過日数の挿入

指定したフォーマットで、指定日付からの経過日数の挿入が出来ます。

構文

{@timecountdown:2021/1/1,format}

利用可能なフォーマット

年：y
日：d
時：h

活用例

1970年1月1日からの経過日数をそれぞれのフォーマットで挿入

1970年1月1日からの経過年数： {@timecountdown:1970/1/1,y}年
1970年1月1日からの経過日数： {@timecountdown:1970/1/1,d}日
1970年1月1日からの経過時間： {@timecountdown:1970/1/1,h}時間

実際の操作の様子

ショートコードを組み合わせたテンプレート集

そのままコピペでご利用可能なテンプレートをリストアップしていきます（随時更新予定）。皆様からのおすすめテンプレートも（@_cofus）にてお待ちしております！

チャットワーク囲み装飾（タイトル付き）＋日付タイトル＋本文へカーソル指定

[info][title]{@time:YYYY年MM月DD日（dddd）}[/title]{@cursor:}[/info]

チャットワーク囲み装飾（タイトル付き）＋タイトルへカーソル指定＋選択テキストコード囲み

[info][title]{@cursor:}[/title][code]{@selected:}[/code][/info]

ショートコードについて

選択テキストの挿入

構文

活用例

例）選択テキストを[info][/info]で囲む

例）選択テキストを[info][title][/title][/info]で囲む

例）選択テキストを[code][/code]で囲む

例）選択テキストを[info][title][/title][code][/code][/info]で囲む

仕様について

未選択の時

構文が複数ある場合

カーソル位置の指定

構文

活用例

先頭にカーソル指定

末尾にカーソル指定

日時の挿入

構文

List of all available format tokens

活用例

YYYY年MM月DD日のフォーマットで日時の挿入

H:m:sのフォーマットで時間の挿入

曜日の挿入

実際の操作の様子

未来日付の挿入

構文

List of all available format tokens

活用例

押下時を基準に未来日付を挿入

実際の操作の様子

経過日数の挿入

構文

利用可能なフォーマット

活用例

1970年1月1日からの経過日数をそれぞれのフォーマットで挿入

ショートコードを組み合わせたテンプレート集

例）選択テキストを`[info][/info]`で囲む

例）選択テキストを`[info][title][/title][/info]`で囲む

例）選択テキストを`[code][/code]`で囲む

例）選択テキストを`[info][title][/title][code][/code][/info]`で囲む

`YYYY年MM月DD日`のフォーマットで日時の挿入

`H:m:s`のフォーマットで時間の挿入