サーモンランNW配信サムネイルメーカー v1.2.11
スケジュールの選択
第回
テンプレートの選択
スクリプトの編集
デフォルトに戻す
スクリプトを削除する
スクリプトをダウンロードする
編集したスクリプトは自動的にブラウザのローカルストレージに保存されます。ローカルストレージのデータはブラウザの閲覧履歴を消去したときに同時に消去されることがあるため、ご注意ください。
close
プレビュー
ダウンロード
プレビュー
1:11:11
1:11:11
背景色を変更
ダウンロード
外部サイトの画像を使用している場合、上のボタンからはダウンロードできません（ブラウザのセキュリティの仕様上の問題）。その場合は、大きなプレビュー画像を右クリックして「名前を付けて画像を保存」から保存してみてください。
動画概要欄用テキスト
| 設定項目 | 内容 |
|---|---|
| 開始時刻のフォーマット | |
| 終了時刻のフォーマット | |
| 出力フォーマット | |
| 出力結果 |
スクリプトについて
- スクリプトは自由に編集できます。また、編集内容は自動で保存されます。
- スクリプトは基本的に半角英数で入力してください。タグ・パラメータ・スペース・イコール・クォーテーションなどが全角で入力されている場合、正常に動作しません。
-
スクリプトの各行は次のような構造になっています。
タグ名 パラメータの名前1="値1" パラメータの名前2="値2" - まず要素の種類を決める「タグ」を書き、その後ろに「名前="値"」で一組になった「パラメータ」を書いていきます。タグとパラメータの間、パラメータとパラメータの間には半角スペースを入れてください。
- 行の先頭に「#」（半角のナンバー）を付けるとコメントアウトできます。
タグとパラメータについて
rect
四角形を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 四角形の左上のx座標をpx単位で指定します。ゼロだと画面の左端に描画されます。数を増やすと右に移動します。 y | 0 | 四角形の左上のy座標をpx単位で指定します。ゼロだと画面の上端に描画されます。数を増やすと下に移動します。 width | 500 | 四角形の横幅をpx単位で指定します。 height | 500 | 四角形の高さをpx単位で指定します。 radius | 0 | 角に丸みを付けたい場合、丸みの半径をpx単位で指定します。 color | black | 四角形の塗りつぶしの色を指定します。形式は「white」「#ffffff」「rgb(255, 255, 255)」「rgba(255, 255, 255, 1)」など。「none」で透明になります。色の指定に使用可能な形式について、詳しくは<a href="https://gray-code.com/html_css/about-color-specify-of-css/" target="_blank">こちら</a>を見てください。 stroke_color | none | 四角形の線の色を指定します。 stroke_width | 2 | 四角形の枠線の太さをpx単位で指定します。 align | | centerを指定すると座標の基準が四角形の中央になります。
circle
真円を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 円の左上のx座標をpx単位で指定します。ゼロだと画面の左端に描画されます。数を増やすと右に移動します。 y | 0 | 円の左上のy座標をpx単位で指定します。ゼロだと画面の上端に描画されます。数を増やすと下に移動します。 width | 500 | 円の直径をpx単位で指定します。 color | black | 円の塗りつぶしの色を指定します。 stroke_color | none | 円の線の色を指定します。 stroke_width | 2 | 円の枠線の太さをpx単位で指定します。
dotted_line
水平方向の点線を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 円の左上のx座標をpx単位で指定します。ゼロだと画面の左端に描画されます。数を増やすと右に移動します。 y | 0 | 円の左上のy座標をpx単位で指定します。ゼロだと画面の上端に描画されます。数を増やすと下に移動します。 width | 1000 | 線全体(四角形)の横幅をpx単位で指定します。 height | 20 | 線全体(四角形)の高さをpx単位で指定します。 a | 40 | 点ひとつの横幅円の横幅をpx単位で指定します。 b | 20 | 点と点の間隔をpx単位で指定します。 color | black | 線の色を指定します。
text
文字を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | テキストのx座標(基準点は左上とは限らない)をpx単位で指定します。 y | 0 | テキストのy座標(基準点は左上とは限らない)をpx単位で指定します。 text | text | テキストを指定します。 align | start | テキストの横方向の基準点をキーワードで指定します。「start」「end」「center」でそれぞれ「左寄せ」「右寄せ」「中央寄せ」を指定できます。 baseline | alphabetic | テキストの縦方向の基準点をキーワードで指定します。「top」「middle」「alphabetic」「bottom」でそれぞれ「上端」「中央」「アルファベットのベースライン」「下端」を指定できます。詳しくは<a href="http://www.htmq.com/canvas/textBaseline.shtml" target="_blank">こちら</a>を見てください。 size | 200 | 文字サイズをpx単位で指定します。 family | Splatoon1 | フォントを指定します。「Splatoon1」「Splatoon2」の他、「sans-serif」でゴシック体、「serif」で明朝体を指定できます。PCにインストールされているフォント名を指定することもできます。使用可能なフォントは<a href="https://wordmark.it/" target="_blank">Wordmark.it</a>で調べることができます。 weight | normal | フォントの太さを指定します。「normal」または「bold」を指定してください。 color | black | 線の色を指定します。 stroke_color | none | 縁取り線の色を指定します。 stroke_width | 20 | 縁取り線の太さをpx単位で指定します。 shadow_color | none | シャドーの色を指定します。 shadow_x | 0 | シャドーのx座標をpx単位で指定します。 shadow_y | 0 | シャドーのy座標をpx単位で指定します。 shadow_blur | 5 | シャドーの広がりをpx単位で指定します。 shadow_strong | 5 | シャドーの濃さを指定します。 marker_color | none | テキストの背景色を指定します。 marker_radius | 0 | テキストの背景色の角の丸みを指定します。「10,20,30,40」のようにカンマ区切りで4つの数字を指定すると「左上,右上,右下,左下」の丸みを別々に指定できます。 marker_padding | 20 | テキストの背景色の余白の大きさを指定できます。 marker_ika | none | 「black」などの色を指定すると、その色のイカのドット絵がテキストの背景に描画されます。
image
画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 src | 右で説明 | 画像のURLを指定します。省略すると「./assets/img/product-image/1.jpg」が読み込まれます。 width | | 画像の横幅をpx単位で指定します。横幅だけを指定すると、高さは元画像の縦横比にしたがって自動で決定されます。横幅も高さも省略すると、元画像と同サイズになります。 height | | 画像の高さをpx単位で指定します。 radius | 0 | 角に丸みを付けたい場合、丸みの半径をpx単位で指定します。 clip | | 画像を別の透過画像でクリッピングできます。クリッピング用の画像のURLを指定します。 tile_width | 0 | これを指定すると、width/heightで指定した四角形内に、画像をタイル状に敷き詰めることができます。そのタイルの横幅を指定します。 tile_height | 0 | タイルの高さを指定します。
stage
ステージの背景画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 type | 1 | ステージの画像タイプを「1」「2」「3」「4」のいずれかで指定します。「1」はイカリングなどで見られるステージ画像、「2」「3」「4」はバイト開始時のイントロで流れるステージ画像です。 width | 1920 | 画像の横幅をpx単位で指定します。高さは自動で決定されます。 radius | 0 | 角に丸みを付けたい場合、丸みの半径をpx単位で指定します。
stage_badge
ステージのバッジ画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 type | 1 | バッジの画像タイプを「1」「2」「3」「4」「5」のいずれかで指定します。順に「オリジナル色」「銅」「銀」「金」「白黒(ピクトグラム)」となります。 width | 512 | 画像の横幅をpx単位で指定します。高さは自動で決定されます。
boss
オカシラシャケの画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 width | 300 | 各ブキの画像の横幅をpx単位で指定します。 color | none | 背景の円の塗りつぶしの色を指定します。 stroke_color | none | 背景の円の線の色を指定します。 stroke_width | 2 | 背景の円の枠線の太さをpx単位で指定します。 circle_width | | 背景の円の横幅を指定します。省略した場合はブキ画像の横幅と同じになります。 shadow_color | rgba(0,0,0,0.3) | シャドーの色を指定します。 shadow_x | 10 | シャドーのx座標をpx単位で指定します。 shadow_y | 10 | シャドーのy座標をpx単位で指定します。 shadow_blur | 0 | シャドーのぼかしをpx単位で指定します。 align | | centerを指定すると座標の基準が画像中央になります。 edge | none | 「white」や「black,white」のように指定すると、ブキ画像に縁取りを施すことができます。
weapon
ブキの画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 id | 0 | ブキのIDを指定します。ブキのIDは<a href="https://docs.google.com/spreadsheets/d/1V0MqnklCR8vqoaCeAD7wJ3kTVCpZYaa8y-2tJeHLPZM/edit?usp=sharing" target="_blank">こちらのスプレッドシート</a>の「weapon-jp」シートをご参照ください。 width | 300 | 各ブキの画像の横幅をpx単位で指定します。 color | none | 背景の円の塗りつぶしの色を指定します。 stroke_color | none | 背景の円の線の色を指定します。 stroke_width | 2 | 背景の円の枠線の太さをpx単位で指定します。 circle_width | | 背景の円の横幅を指定します。省略した場合はブキ画像の横幅と同じになります。 shadow_color | rgba(0,0,0,0.3) | シャドーの色を指定します。 shadow_x | 10 | シャドーのx座標をpx単位で指定します。 shadow_y | 10 | シャドーのy座標をpx単位で指定します。 shadow_blur | 0 | シャドーのぼかしをpx単位で指定します。 align | | centerを指定すると座標の基準が画像中央になります。 type | 2d | 「2d」「3d」を選択できます。 edge | none | 「white」や「black,white」のように指定すると、ブキ画像に縁取りを施すことができます。
weapon_list
ブキ4個を並べた画像を描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 width | 300 | 各ブキの画像の横幅をpx単位で指定します。 margin | 50 | 各ブキの画像の間隔をpx単位で指定します。 color | none | 背景の円の塗りつぶしの色を指定します。 stroke_color | none | 背景の円の線の色を指定します。 stroke_width | 2 | 背景の円の枠線の太さをpx単位で指定します。 circle_width | | 背景の円の横幅を指定します。省略した場合はブキ画像の横幅と同じになります。 shadow_color | rgba(0,0,0,0.3) | シャドーの色を指定します。 shadow_x | 10 | シャドーのx座標をpx単位で指定します。 shadow_y | 10 | シャドーのy座標をpx単位で指定します。 shadow_blur | 0 | シャドーのぼかしをpx単位で指定します。 align | | centerを指定すると座標の基準が画像中央になります。 type | 2d | 「2d」「3d」を選択できます。 edge | none | 「white」や「black,white」のように指定すると、ブキ画像に縁取りを施すことができます。
logo
サーモンラン NEXT WAVEのロゴを描くタグです。
パラメータ名 | 初期値 | 説明 x | 0 | 画像のx座標をpx単位で指定します。 y | 0 | 画像のy座標をpx単位で指定します。 width | 300 | 画像の横幅をpx単位で指定します。 type | 1 | ロゴのタイプを「1」「2」「3」のいずれかで指定します。黒の背景が付いているかどうかなどがちょっと違います。
set_date_format
これは何かを描くタグではありません。「スケジュールの始まる時間や終わる時間をテキストで表示する際のフォーマットを指定する」という特殊なタグです。
パラメータ名 | 初期値 | 説明 start | M/d HH:mm | スケジュールの始まる時間のフォーマットを指定します。たとえば「y.M.d (D) HH:mm」と指定すると、「2020.9.25 (金) 03:00」のような表記になります。 end | M/d HH:mm | スケジュールの終わる時間のフォーマットを指定します。 today | yyyy/M/d | 今日の日付のフォーマットを指定します。
set_var
これは何かを描くタグではありません。変数に値をセットするための特殊なタグです。ひとつのタグで複数の変数に値をセットすることができます。このタグで値をセットしておいた変数は、それ以降のタグのパラメータ内で{変数名}という形で呼び出すことができます。
パラメータ名 | 初期値 | 説明 任意の変数名 | | 任意の変数に値をセットします。
set_var hoge_number="200" hoge_text="ほげほげ" hoge_color="Yellow" text text="変数の値は{hoge_text}です" size="{hoge_number}" color="{hoge_color}"
特殊なパラメータの値
パラメータの値として「スケジュールごとに固有の情報」に置換される特殊な文字を使うことができます。たとえばパラメータの値に{stage_ja}を指定すると、その部分はスケジュールのステージ名に置き換えられます。
置換元 | 置換先
{num} | スケジュールが第何回か。
{start_date} | スケジュールの始まる時間。
{end_date} | スケジュールの終わる時間。
{dutation} | スケジュールが何時間開催されているか。
{stage_id} | ステージのID（1～5）。
{stage_ja} | ステージの日本語の正式名称。
{stage_ja_short} | ステージの日本語の略称。
{stage_en} | ステージの英語の正式名称。
{stage_en_short} | ステージの英語の略称。
{w1} | ブキ1のID。
{w2} | ブキ2のID。
{w3} | ブキ3のID。
{w4} | ブキ4のID。
{w1_ja} | ブキ1の日本語の正式名称。
{w2_ja} | ブキ2の日本語の正式名称。
{w3_ja} | ブキ3の日本語の正式名称。
{w4_ja} | ブキ4の日本語の正式名称。
{w1_en} | ブキ1の英語の正式名称。
{w2_en} | ブキ2の英語の正式名称。
{w3_en} | ブキ3の英語の正式名称。
{w4_en} | ブキ4の英語の正式名称。
{boss_ja} | オカシラシャケの日本語の正式名称。
{boss_en} | オカシラシャケの英語の正式名称。
{today} | 今日の日付。