サーモンラン配信サムネイルメーカー v1.7.2

スケジュールの選択

テンプレートの選択

スクリプトの編集

デフォルトに戻す
テンプレートを削除する
スクリプトをダウンロードする

編集したスクリプトは自動的にブラウザのローカルストレージに保存されます。ローカルストレージのデータはブラウザの閲覧履歴を削除するときに同時に削除される可能性があるため、ご注意ください。

1:11:11

1:11:11
背景色を変更

ダウンロード

1920x1080 (png)
1280x720 (png)
1920x1080 (jpg)
1280x720 (jpg)

外部サイトの画像を使用している場合、上のボタンからはダウンロードできません(ブラウザのセキュリティの仕様上の問題)。その場合は、大きなプレビュー画像を右クリックして「名前を付けて画像を保存」から保存してみてください。

動画概要欄用テキスト

設定項目 内容
開始時刻のフォーマット
終了時刻のフォーマット
出力フォーマット
出力結果

出力結果をコピー
デフォルトに戻す

スクリプトについて

  1. スクリプトは自由に編集できます。また、編集内容は自動で保存されます。
  2. スクリプトは基本的に半角英数で入力してください。タグ・パラメータ・スペース・イコール・クォーテーションなどが全角で入力されている場合、正常に動作しません。
  3. スクリプトの各行は次のような構造になっています。
    タグ名 パラメータの名前1="値1" パラメータの名前2="値2"
  4. まず要素の種類を決める「タグ」を書き、その後ろに「名前="値"」で一組になった「パラメータ」を書いていきます。タグとパラメータの間、パラメータとパラメータの間には半角スペースを入れてください。
  5. 行の先頭に「#」(半角のナンバー)を付けるとコメントアウトできます。

タグとパラメータについて

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 | シャドーの濃さを指定します。
			

image

画像を描くタグです。

				パラメータ名 | 初期値 | 説明
				x | 0 | 画像のx座標をpx単位で指定します。
				y | 0 | 画像のy座標をpx単位で指定します。
				src | 右で説明 | 画像のURLを指定します。省略すると「./assets/img/stage/1280x720/1.png」が読み込まれます。
				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」のどちらかで指定します。「1」はイカリングなどで見られるステージ画像、「2」はバイト開始時のイントロで流れるステージ画像です。
				width | 1920 | 画像の横幅をpx単位で指定します。高さは自動で決定されます。
				radius | 0 | 角に丸みを付けたい場合、丸みの半径をpx単位で指定します。
			

weapon

ブキの画像を描くタグです。

				パラメータ名 | 初期値 | 説明
				x | 0 | 画像のx座標をpx単位で指定します。
				y | 0 | 画像のy座標をpx単位で指定します。
				id | 0 | ブキのIDを指定します。ブキのIDは<a href="https://splamp.info/salmon/api/#e" target="_blank">スプランプ</a>さんの「参考:ブキデータ対応表」で調べることができます。また、その対応表に加え、7000=クマブラ、7010=クマシェル、7020=クマチャー、7030=クマスロを選択することができます。
				width | 300 | 各ブキの画像の横幅をpx単位で指定します。
				color | none | 背景の円の塗りつぶしの色を指定します。
				stroke_color | none | 背景の円の線の色を指定します。
				stroke_width | 2 | 背景の円の枠線の太さをpx単位で指定します。
				align | | centerを指定すると座標の基準が画像中央になります。
			

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単位で指定します。
				align | | centerを指定すると座標の基準が画像中央になります。
			

set_date_format

これは何かを描くタグではありません。「スケジュールの始まる時間や終わる時間をテキストで表示する際のフォーマットを指定する」という特殊なタグです。

				パラメータ名 | 初期値 | 説明
				start | M/d HH:mm | スケジュールの始まる時間のフォーマットを指定します。たとえば「y.M.d (D) HH:mm」と指定すると、「2020.9.25 (金) 03:00」のような表記になります。
				end | M/d HH:mm | スケジュールの終わる時間のフォーマットを指定します。
			

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} | ステージの日本語の略称。
				{w1} | ブキ1のID。
				{w2} | ブキ2のID。
				{w3} | ブキ3のID。
				{w4} | ブキ4のID。
				{w1_ja} | ブキ1の日本語の正式名称。
				{w2_ja} | ブキ2の日本語の正式名称。
				{w3_ja} | ブキ3の日本語の正式名称。
				{w4_ja} | ブキ4の日本語の正式名称。