読み込み中...

chevron_left Lanama

Utakata.js

slide show

Option

名前変換のある応用ページ一式はこちらから（オプション解説を読んだ人向け）

Optionページについて

このページはJavaScriptコードで何を設定するのかわかりやすくするために、コード内にコメントを多用しています。
コメントとは、コード内で説明や注意を記述するために使われるテキストのことです。コメントはプログラムの実行には影響せず、プログラムを読む人がコードの動作を理解しやすくするために用います。
JavaScriptでは、//をつけた行は//以降がコメントになります。
複数行の場合は/*と*/で挟むことでコメントになります。
例えば、以下のコードのうち「ここはコメントです。メモをしています。」というテキストがコメントです。

// ここはコメントです。メモをしています。
const test = "JavaScriptのコードです。";
/*
ここはコメントです。
メモをしています。
*/

コードをコピーする際はコメントごとコピーして貼り付けたり、コメントを編集しても問題ありません。

コードの下にあるボタンからサンプル画面を確認できます。

一部併用できないオプションもありますが、だいたいのオプションは併用して指定できます。
以上を踏まえてご覧ください。

全体オプション・全体小技

  1. canvasの比率を指定する
  2. canvasの画面内の大きさを%指定する
  3. canvasをリサイズさせない
  4. canvasをリサイズさせない（CSS設定）
  5. スライド間のフェードイン所要時間を指定する
  6. スライド間のフェードイン前待機時間を指定する
  7. 自動開始時の開始タイマーを設定する
  8. スライドを手動スタートにする
  9. スライドを手動進行にする
  10. 文字の行間を設定する
  11. 文字間を設定する
  12. スライドのテキスト全てを縦書きにする
  13. スライド中の背景色を変更する
  14. スライドを無限ループさせる（自動進行のみ）
  15. 名前変換スクリプトの登録内容を表示する
  16. スライドショーではなく文字入り画像として扱う

各スライドオプション・小技

  1. スライドの数を増やす
  2. 各スライドのフォントを変更する
  3. 各スライドの画像に対し色フィルターをかける
  4. 各スライドのテキスト色を変更する
  5. 各スライドの文字位置を微調整する
  6. 各スライドに文章をもう1組追加する

canvasの比率を指定する

resizeAspect

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。この指定を入れることで縦横比を固定することができます。比率に用いる数字は自然数を指定してください。

▼5:2にする場合

const slideshow = new Slideshow({
  // キャンバスの比率を指定する場合のみ追加
  // 指定比率を'横:縦'で指定 例'5:2',
  resizeAspect: '5:2',
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

比率固定 5:2

canvasの画面内の大きさを%指定する

resizeAspectSize

resizeAspectを設定したときに使える指定です。Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。この指定を入れることで縦横比を固定することができます。比率に用いる数字は自然数を指定してください。

▼5:2かつ最大ではなく90%サイズにする場合

const slideshow = new Slideshow({
  // キャンバスの比率を指定する場合のみ追加
  // 指定比率を'横:縦'で指定
  resizeAspect: '5:2',
  // 画面に対する描画の大きさを%指定
  resizeAspectSize: '90%',
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

canvasを画面の右や中央に寄せたい場合は、cssを使って寄せてください。

canvas大きさ指定

canvasをリサイズさせない

noResize

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。

trueという文字はクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

noResizeをtrueにすると、スクリプトはcanvasをリサイズしなくなります。なので、canvasの大きさをタグへ直接設定してください。

▼タグでcanvasの大きさ指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライドショーページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <canvas id="utakata" width="300px" height="300px"></canvas>
  <script src="../utakata_example/utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>

const slideshow = new Slideshow({
  // キャンバスをリサイズしない
  noResize: true,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 8,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 9,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

canvasリサイズしない

canvasをリサイズさせない（CSS）

noResize

Slideshowインスタンスを生成するオブジェクトの直下階層で、noResizeをtrue指定します。

scenario.jsの設定方法はcanvasをリサイズさせないと同じです。

こちらはcanvasの大きさをCSSで設定する方法です。CSSは別ファイルに切り出しても動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライドショーページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
  <canvas id="utakata"></canvas>
  <script src="../utakata_example/utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>

const slideshow = new Slideshow({
  // キャンバスをリサイズしない
  noResize: true,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 8,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 9,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

canvasリサイズしない

スライド間のフェードイン所要時間を指定する

fadeDuration

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。スライド間のアニメーションの開始からフェードイン完了までの所要時間をミリ秒単位で指定できます。指定しない場合は自動で1000ミリ秒です。

この指定の数字はクォーテーションで囲まず、自然数をそのまま書いて行末にカンマをつけてください。

▼500ミリ秒にする場合

const slideshow = new Slideshow({
  // フェードアニメーション所要時間（ミリ秒）
  fadeDuration: 500,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

フェードイン所要時間 500ミリ秒

▼2000ミリ秒にする場合

const slideshow = new Slideshow({
  // フェードアニメーション所要時間（ミリ秒）
  fadeDuration: 2000,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

フェードイン所要時間 2000ミリ秒

スライド間のフェードイン前待機時間を指定する

changeInterval

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。スライドが表示されてから次のフェードインが始まるまでの待機時間を指定します。指定しない場合は自動で3000ミリ秒です。

あまり短くすると他の処理との兼ね合いでスライドが戻ったりチラついて不安定になるので、少なくとも100ミリ秒以上の方が良さそうです。実際に何度か動かして試してみてください。

この指定の数字はクォーテーションで囲まず、自然数をそのまま書いて行末にカンマをつけてください。

▼待機を短くする場合（前のスライドのフェードインが完了したらすぐに次のフェードインが始まる）

const slideshow = new Slideshow({
  // フェードイン前待機時間（ミリ秒）
  changeInterval: 100,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

フェードイン前待機 100ミリ秒

▼待機を5000ミリ秒にする

const slideshow = new Slideshow({
  // フェードイン前待機時間（ミリ秒）
  changeInterval: 5000,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

フェードイン前待機 5000ミリ秒

自動開始時の開始タイマーを設定する

startTimer

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。ページが表示されてからスライドショーが始まるまでの待機時間をミリ秒で指定します。指定しない場合は0で動きます。

次の項目で説明する、スライドショー手動スタート設定が有効になっている場合は使えません。

この指定の数字はクォーテーションで囲まず、自然数をそのまま書いて行末にカンマをつけてください。

const slideshow = new Slideshow({
  // 開始タイマー（ミリ秒）
  startTimer: 2000,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

自動開始タイマー 2000ミリ秒

スライドを手動スタートにする

manualStart

Slideshowインスタンスを生成するオブジェクトの直下階層に2つ指定します。

まずはmanualStart: true,を追加します。

次に、プロパティ（設定）として、object形式でstartWindow: {～}をサンプル通りの項目で設定します。

スタートボタンを使用する場合は、showButton: true, 使用しない場合はfalse

スタートボタンを使用で、ボタンの文字色を変えたい場合はbuttonColorに色コードを設定します。

スタートボタンを使用で、ボタンの文字を変えたい場合はbuttonTextに表示したい文字を設定します。

スタートボタンを使用で、ボタンのフォントを変えたい場合はbuttonFontFamilyに設定します。（Webフォント可）

スタートボタンを使用で、ボタンの文字サイズを変えたい場合はbuttonSizeに画面に対する比率で設定します。

スタート画面に画像を使用したい場合は、srcに画像のパスを設定します。

trueという文字はいずれもクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

const slideshow = new Slideshow({
  // 手動スタート
  manualStart: true,
  // 手動スタートのプロパティ
  startWindow: {
    // スタートボタンを使用する場合はtrueを指定
    // 指定が無い場合はキャンバスクリックでスタート
    showButton: true,
    // ボタンの文字色
    buttonColor: '#ccc',
    // ボタンの文言
    buttonText: 'Start★',
    // ボタンのフォント
    buttonFontFamily: 'Arial',
    // ボタン文字の大きさ（画面に対する一文字の比率）
    buttonSize: 1,
    // 画像パス
    src: "image4.png",
  },
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

手動スタート 設定多め

▼ボタンを使わず、スタート前画像を指定

const slideshow = new Slideshow({
  // 手動スタート
  manualStart: true,
  // 手動スタートのプロパティ
  startWindow: {
    // ボタン指定が無いので、キャンバスクリックでスタート
    // 画像パス
    src: "image4.png",
  },
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

手動スタート 設定少なめ

スライドを手動進行にする

manualAdvance

Slideshowインスタンスを生成するオブジェクトの直下階層に2つ指定します。

まずはmanualAdvance: true,を追加します。

次に、プロパティ（設定）として、object形式でadvanceItem: {～}をサンプル通りの項目で設定します。

次のスライドを表示するためのボタンタグに設定するidを、nextにも設定します。

前のスライドを表示するためのボタンタグに設定するidを、prevにも設定します。

スタートボタンを使用で、ボタンの文字色を変えたい場合はbuttonColorに色コードを設定します。

スタートボタンを使用で、ボタンの文字を変えたい場合はbuttonTextに表示したい文字を設定します。

スタートボタンを使用で、ボタンのフォントを変えたい場合はbuttonFontFamilyに設定します。（Webフォント可）

スタートボタンを使用で、ボタンの文字サイズを変えたい場合はbuttonSizeに画面に対する比率で設定します。

スタート画面に画像を使用したい場合は、srcに画像のパスを設定します。

trueという文字はクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

▼scenario.jsを編集

const slideshow = new Slideshow({
  // 手動進行
  manualAdvance: true,
  // 手動進行のプロパティ
  advanceItem: {
    // 次へボタンのID
    next: "utakataNext",
    // 前へボタンのID
    prev: "utakataPrev",
  },

  // サンプルのボタン位置が見えにくいのでcanvasサイズ指定
  resizeAspect: '1:1',
  resizeAspectSize: '60%',

  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

▼canvasタグのあるページに、ボタンを2つ用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライドショーページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <canvas id="utakata"></canvas>
  <button id="utakataPrev">前のスライドを表示</button>
  <button id="utakataNext">次のスライドを表示</button>
  <script src="../utakata_example/utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>

手動進行（自動スタート）

▼手動進行フェードインなし

const slideshow = new Slideshow({
  // フェードアニメーション所要時間
  fadeDuration: 0,
  // 手動進行
  manualAdvance: true,
  // 手動進行のプロパティ
  advanceItem: {
    // 次へボタンのID
    next: "utakataNext",
    // 前へボタンのID
    prev: "utakataPrev",
  },

  // サンプルのボタン位置が見えにくいのでcanvasサイズ指定
  resizeAspect: '1:1',
  resizeAspectSize: '60%',

  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

手動進行フェードインなし

文字の行間を設定する

lineHeight

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。改行のあるテキストを表示する際の行間サイズを設定できます。

フォントサイズに対する倍率を指定してください。未指定だと1.4が自動で設定されます。単位は不要です。

設定値はクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

const slideshow = new Slideshow({
  // 文字間 ※未指定の場合は1.2 
  lineHeight: 2.6,
  scenario: [
    { 
      text: '吾輩は猫である。\n名前はまだ無い。',
      size: 3,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'どこで生れたか\nとんと見当けんとうがつかぬ。',
      size: 3,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: '何でも薄暗いじめじめした所で\nニャーニャー泣いていた事だけは記憶している。',
      size: 2,
      src: 'image3.png',
    }
  ],
});

文字の行間 2.6

テキスト全体の文字間を設定する

letterSpacing

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。文字同士の間隔を設定できます。

フォントサイズに対する倍率を指定してください。未指定だと1.2が自動で設定されます。単位は不要です。

設定値はクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

const slideshow = new Slideshow({
  // 文字間 ※未指定の場合は1.02 
  letterSpacing: 1.5,
  scenario: [
    { 
      text: '吾輩は猫である。\n名前はまだ無い。',
      size: 3,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'どこで生れたか\nとんと見当けんとうがつかぬ。',
      size: 3,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: '何でも薄暗いじめじめした所で\nニャーニャー泣いていた事だけは記憶している。',
      size: 2,
      src: 'image3.png',
    }
  ],
});

文字の行間 1.5

スライドのテキスト全てを縦書きにする

tategaki

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。

tategakiをtrueで指定することで、スライドのテキストが全て縦書きになります。

このtrueはクォーテーションで囲まず、そのまま書いて行末にカンマをつけてください。

フォントそれぞれのベースラインの影響もあるので、lineHeightや位置調整は思ったよりズレて見えるかもです。

フォントによっては記号類の表示位置がズレてみえるかもしれません。半角カナの濁点と半濁点は正常に表示されません。

const slideshow = new Slideshow({
  // 縦書き指定のみ 
  tategaki: true,
  scenario: [
    { 
      text: '春すぎて',
      size: 3,
      src: 'image1.png',
      position: 'top',
    },
    { 
      text: '夏来にけらし 白妙の',
      size: 2,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: '衣干すてふ  天の香具山',
      size: 2,
      src: 'image3.png',
      position: 'top',
    }
  ],
});

縦書き指定のみ

スライド中の背景色を変更する

fillColor

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。

fillColorを任意の16進数カラーコードを設定すると、背景色を設定できます。未指定の場合は#fffです。

各スライドに画像を設定している場合はこの色は見えません。

また、スライドを手動開始にしたときに表示される、スライド開始前のcanvasの色はcssで直接指定してください。

const slideshow = new Slideshow({
  // スライド全体の背景色指定 
  fillColor: '#eac2f9',
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
    }
  ],
});

背景色をまとめて変更

スライドを無限ループさせる

isEndless

Slideshowインスタンスを生成するオブジェクトの直下階層で指定します。

isEndlessをtrueにすると最後のスライドから最初のスライドに戻り、無限ループになります。

trueという文字はクォーテーションで囲まずそのまま書いて行末にカンマをつけてください。

手動進行の場合は無限ループ不可です。

const slideshow = new Slideshow({
  // 無限ループ指定（手動進行は無限ループ不可）
  isEndless: true,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    }
  ],
});

スライド無限ループ

名前変換スクリプトの登録内容を表示する

Utakata.jsには、Charm.jsまたはBerrycake.jsの登録データを呼び出す機能があります。

Slideshowインスタンスを生成する前に、UtakataNameインスタンスを作成します。

このとき、new UtakataName('●●●●');の●●●●には登録keyを設定します。スクリプト本体を編集していない場合は、Charm.jsならcharm、Berrycake.jsならberrycakeを設定します。

変えている方は、スクリプト本体のコード内のstorageKeyNameの設定値を確認してください。

次に、utakataName.getName('○○○', '夢主');というフォーマットで名前を呼び出します。

○○○は名前登録inputタグのidです。Charm.jsのサンプル通りならcharmname1、Berrycake.jsならcake1などです。

「夢主」は未登録時に表示するテキストです。

ここまでで登録データの読み込みができました。

読み込んだ名前は、scenarioオブジェクト内に特殊な書き方をすると表示できます。

「おはよう、夢主さん」のように表示するには、${name1}のように書きます。

また、Tutorialではシングルまたはダブルクォートでテキストを囲むよう書きましたが、スクリプトの登録内容を表示するときはバッククォート ` で囲みます。

※名前の登録にはそれぞれのスクリプトと登録ページが必要です。

※閲覧者さんには、名前登録のページで先に登録してもらってからスライドショーを開いてもらう必要があります。

▼Charm.jsの呼び出し例（名前登録4つのサンプル）

// 名前を登録したkey名でUtakataNameインスタンス生成
const utakataName = new UtakataName('charm');
// 登録inputのid名と、デフォルト名を使って呼び出す
// デフォルト名はこのタイミングで自由に決めてOK、他のページに合わせなくても動きます
const name1 = utakataName.getName('charmname1', '苗字');
const name2 = utakataName.getName('charmname2', 'みょうじ');
const name3 = utakataName.getName('charmname3', '名前');
const name4 = utakataName.getName('charmname4', 'なまえ');

// 名前の読み込みコードの後にSlideshowインスタンスを生成
const slideshow = new Slideshow({
  scenario: [
    { 
      text: `おはよう、${name3}さん`, // バッククォート注意
      size: 6,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: `フルネームは${name1}${name3}さん`, // バッククォート注意
      size: 5,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: `ふりがなは${name2}${name4}さんですね`, // バッククォート注意
      src: 'image3.png',
    }
  ],
});

Charm 動作サンプル

名前呼び出し Charm

▼Berrycake.jsの呼び出し例（名前登録4つのサンプル）

// 名前を登録したkey名でUtakataNameインスタンス生成
const utakataName = new UtakataName('berrycake');
// 登録inputのid名と、デフォルト名を使って呼び出す
// デフォルト名はこのタイミングで自由に決めてOK、他のページに合わせなくても動きます
const name1 = utakataName.getName('cake1', '苗字');
const name2 = utakataName.getName('cake2', '名前');
const name3 = utakataName.getName('cake3', 'みょうじ');
const name4 = utakataName.getName('cake4', 'なまえ');

// 名前の読み込みコードの後にSlideshowインスタンスを生成
const slideshow = new Slideshow({
  scenario: [
    { 
      text: `おはよう、${name2}さん`, // バッククォート注意
      size: 6,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: `フルネームは${name1}${name2}さん`, // バッククォート注意
      size: 5,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: `ふりがなは${name3}${name4}さんですね`, // バッククォート注意
      src: 'image3.png',
    }
  ],
});

Berrycake 動作サンプル

名前呼び出し Berrycake

それぞれのスクリプト特有のカスタム変換はできませんが、省略表現は対応しています。

なまえ、という登録で「なま」ちゃんという表記をするには以下のように書きます。

Charm.jsもBerrcake.jsもこのカスタムの考え方は同じです。

// 名前を登録したkey名でUtakataNameインスタンス生成
const utakataName = new UtakataName('charm');
const name1 = utakataName.getName('charmname1', '苗字');
const name2 = utakataName.getName('charmname2', 'みょうじ');
const name3 = utakataName.getName('charmname3', '名前');
const name4 = utakataName.getName('charmname4', 'なまえ');
// ここまでは同じ
// 読み込んだ後、カスタム変換の呼び出しをします。
// Charm.jsもBerrycake.jsも、例のコードではname4に「なまえ」にあたるテキストが格納されています。
// 省略表示を使用するときは、↓のコードを追加します。
const short4 = utakataName.customShort(name4, 2);
// 最後の「2」の部分が今回使用したい文字数です。
// これで、${short4}を呼び出すと、2文字省略のデータを表示できます。

// 名前の読み込みコードの後にSlideshowインスタンスを生成
const slideshow = new Slideshow({
  scenario: [
    { 
      text: `おはよう、${short4}ちゃん`,
      size: 6,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: `${short4}ちゃんの名前、${name3}だったよね`,
      size: 5,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: `おやすみ、${short4}ちゃん`,
      src: 'image3.png',
    }
  ],
});

名前呼び出し 省略

実装例としてcanvasを正方形に比率固定、縦書きだとこのようになります。

なまえ、という登録で「なま」ちゃんという表記をするには以下のように書きます。

Charm.jsもBerrcake.jsもこのカスタムの考え方は同じです。

// 名前を登録したkey名でUtakataNameインスタンス生成
const utakataName = new UtakataName('charm');
const name1 = utakataName.getName('charmname1', '苗字');
const name2 = utakataName.getName('charmname2', 'みょうじ');
const name3 = utakataName.getName('charmname3', '名前');
const name4 = utakataName.getName('charmname4', 'なまえ');
// ここまでは同じ
// 読み込んだ後、カスタム変換の呼び出しをします。
// Charm.jsもBerrycake.jsも、例のコードではname4に「なまえ」にあたるテキストが格納されています。
// 省略表示を使用するときは、↓のコードを追加します。
const short4 = utakataName.customShort(name4, 2);
// 最後の「2」の部分が今回使用したい文字数です。
// これで、${short4}を呼び出すと、2文字省略のデータを表示できます。

// 名前の読み込みコードの後にSlideshowインスタンスを生成
const slideshow = new Slideshow({
  scenario: [
    { 
      text: `おはよう、${short4}ちゃん`,
      size: 6,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: `${short4}ちゃんの名前、${name3}だったよね`,
      size: 5,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: `おやすみ、${short4}ちゃん`,
      src: 'image3.png',
    }
  ],
});

名前呼び出し 省略

簡易暗号化を使用している場合は、UtakataNameインスタンス生成のときに例のコードのようにtrueを追加してください。

// 名前を登録したkey名でUtakataNameインスタンス生成
const utakataName = new UtakataName('charm', true);
// 以降の処理は同じ

登録名の文字数制限をしたいときは

Charm.jsまたはBerrycake.jsの登録内容を表示する際、登録名が長いと見切れてしまう場合があります。
見切れないようにするには、登録inputタグに文字数制限を追加します。

<input type="text" id="charmname1" placeholder="最大5文字まで" maxlength="5">

maxlength="5"が文字数制限をするための追加部分です。
この場合は英数字も日本語も最大5文字になります。

これはCharm.jsやBerrycake.jsの機能ではなく、inputタグの標準的な機能です。

文字数を制限するときは、placeholderなどで閲覧者さんに制限内容をわかりやすくしてあげると親切なので、ぜひ活用してください。

名前変換のある応用ページ一式はこちらから（オプション解説を読んだ人向け）

スライドショーではなく文字入り画像として扱う

待機時間などを0にしてスライド数を1つにすると、切り替わりがなくなるので画像のように扱うことができます。

const slideshow = new Slideshow({
  // フェードアニメーション所要時間
  fadeDuration: 0,
  // 次のフレームまでの待機時間
  changeInterval: 0,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'center',
    },
  ],
});

スライド単体

縦書きもできます。

const slideshow = new Slideshow({
  // 縦書き指定
  tategaki: true,
  // フェードアニメーション所要時間
  fadeDuration: 0,
  // 次のフレームまでの待機時間
  changeInterval: 0,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 2,
      src: 'image1.png',
      position: 'center',
    },
  ],
});

スライド単体 縦書き

スライドの数を増やす

scenario

Slideshowインスタンス内のscenarioオブジェクト内に追加します。

scenarioは配列なので、カンマ区切りで{}を増やしていきます。

プログラミングはよくわからない、という方はサンプルで強調している部分を真似て増やしてください。

{～},{～},{～},{～}という感じで増やしていくので、「さしすせそ」のフレーム{}の直後のカンマを忘れないよう気を付けてください。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
    },
    {
      text: 'たちつてと', // 表示テキスト
      size: 3, // サイズ指定
      src: 'image4.png', // 画像指定
      position: 'top', // 位置指定
    }
  ],
});

スライドの数を増やす

各スライドのフォントを変更する

fontFamily

scenarioオブジェクト内の各スライドの設定にfontFamilyを追加します。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: "Once upon a time, \nin a certain place, \nthere was a beautiful swan.",
      size: 3,
      src: 'image1.png',
      position: 'right',
      fontFamily: 'Times New Roman',
    },
    { 
      text: "This swan had the ability to sing \nwith a beautiful voice.",
      size: 3,
      src: 'image2.png',
      position: 'top',
      fontFamily: 'Times New Roman',
    },
    {
      text: "Everyone wished to hear \nthe swan's song.",
      size: 3,
      src: 'image3.png',
      fontFamily: 'Times New Roman',
    }
  ],
});

スライドのフォントを変更

スライドショーのページで読み込まれていればWebフォントも使用可能です。この例では縦書きも併用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライドショーページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Webフォント読み込み -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tsukimi+Rounded&display=swap" rel="stylesheet">
</head>
<body>
  <canvas id="utakata"></canvas>
  <script src="../utakata_example/utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>

const slideshow = new Slideshow({
  // 縦書き指定
  tategaki: true,
  scenario: [
    { 
      text: "いろはにほへと　ちりぬるを",
      size: 3,
      src: 'image1.png',
      position: 'top',
      fontFamily: 'Tsukimi Rounded',
    },
    { 
      text: "わかよたれそ　つねならむ",
      size: 3,
      src: 'image2.png',
      position: 'top',
      fontFamily: 'Tsukimi Rounded',
    },
    {
      text: "うゐのおくやま　けふこえて",
      size: 3,
      src: 'image3.png',
      position: 'top',
      fontFamily: 'Tsukimi Rounded',
    }
  ],
});

Webフォントに変更

各スライドの画像に対し色フィルターをかける

filter

scenarioオブジェクト内の各スライドの設定にfilterを追加します。

rgba形式のフィルターがかけられます。50&透過した白ならrgba(255, 255, 255, 0.5)のように指定します。

同じ画像、同じフィルター指定でもスライドごとに少しチラつくので、同じ背景のまま文字だけ変化させたい場合はフィルターがいらない画像を使うことをおすすめします。

フィルターは文字の下レイヤーからかかるので文字色に影響はありません。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
      filter: 'rgba(255, 255, 255, 0.5)',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
      filter: 'rgba(255, 100, 100, 0.5)',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
      filter: 'rgba(255, 100, 10, 0.5)',
    }
  ],
});

色フィルターをかける

各スライドのテキスト色を変更する

color

scenarioオブジェクト内の各スライドの設定にcolorを追加します。

16進数カラーコード、rgba、文字指定（redなど）で設定できます。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'right',
      color: 'red',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'top',
      color: 'rgba(255, 160, 100, 0.5)',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
      color: '#50cc23',
    }
  ],
});

テキスト色を変更

各スライドの文字位置を微調整する

position

scenarioオブジェクト内の各スライドの設定にposition: 'original',を追加します。

Tutorialページでも触れた通り、これで独自の設定になります。

横位置の指定にはtargetXを用います。一文字目の開始位置を指定します。左の端が0%、右端が100%です。

縦位置の指定にはtargetYを用います。一文字目の開始位置を指定します。上の端が0%、下の端が100%です。

文字のベースライン行間、文字間に影響を受けるので、必ずしも0と100で綺麗に角に表示できるわけではありません。

文字の左右寄せを変更したい場合はtargetTextAlignを指定します。targetTextAlignはleft, center, rightが指定可能で、未指定の場合はcenterになります。

※targetTextAlignは横書き専用のオプションです。縦書きでは使用できません。

※縦位置（targetY）は描画の都合上0%にするとcanvasから見切れてしまいます。5%以上がおすすめです。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'original',
      targetX: '0%',
      targetY: '5%',
      targetTextAlign: 'left',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'original',
      targetX: '100%',
      targetY: '30%',
      targetTextAlign: 'right',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
      position: 'original',
      targetX: '40%',
      targetY: '60%',
    }
  ],
});

文字位置を微調整

縦書きの指定例 縦書きのtargetXは5%～95%、targetYは5%くらいがおすすめです。

const slideshow = new Slideshow({
  // 縦書き指定
  tategaki: true,
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'original',
      targetX: '5%',
      targetY: '5%',
    },
    { 
      text: 'かきくけこ',
      size: 6,
      src: 'image2.png',
      position: 'original',
      targetX: '95%',
      targetY: '5%',
    },
    {
      text: 'さしすせそさしすせそ',
      size: 2,
      src: 'image3.png',
      position: 'original',
      targetX: '10%',
      targetY: '10%',
    }
  ],
});

縦書きで文字位置調整

各スライドに文章をもう1組追加する

text2

scenarioオブジェクト内の各スライドの設定にもう一組分として、以下のオプションを追加します。

text2、position2は必須です。position2がoriginalの場合はtargetX2、targetY2、targetTextAlign2も追加します。末尾に2がついているものが全て2組目の設定です。

各設定方法は1組目と同じなので、設定方法はTutorialと各スライドの文字位置を微調整するを確認してください。

※size、color、fontFamilyは一組目と同じ設定になります。個別の設定はできません。

const slideshow = new Slideshow({
  scenario: [
    { 
      text: 'あいうえおあいうえお',
      size: 5,
      src: 'image1.png',
      position: 'top-left',
      text2: 'アイウエオアイウエオ',
      position2: 'bottom-right',
    },
    { 
      text: 'かきくけこかきくけこ',
      size: 3,
      src: 'image2.png',
      position: 'top-right',
      text2: 'カキクケコカキクケコ',
      position2: 'bottom-left',
    },
    {
      text: 'さしすせそさしすせそ',
      src: 'image3.png',
      position: 'original',
      targetX: '40%',
      targetY: '60%',
      text2: 'サシスセソサシスセソ',
      position2: 'original',
      targetX2: '65%',
      targetY2: '20%',
    }
  ],
});

文字位置を微調整

縦書きの指定例

const slideshow = new Slideshow({
  // 縦書き指定
  tategaki: true,
  scenario: [
    { 
      text: 'あいう\nあいうえお',
      size: 3,
      src: 'image1.png',
      position: 'top-left',
      text2: 'アイウエオアイウエオ',
      position2: 'bottom-right',
    },
    { 
      text: 'かきくけこかきくけこ',
      size: 3,
      src: 'image2.png',
      position: 'top-right',
      text2: 'カキクケコカキクケコ',
      position2: 'bottom-left',
    },
    {
      text: 'さしすせそさしすせそ',
      size: 3,
      src: 'image3.png',
      position: 'original',
      targetX: '40%',
      targetY: '8%',
      text2: 'サシスセソサシスセソ',
      position2: 'original',
      targetX2: '60%',
      targetY2: '8%',
    }
  ],
});

縦書きで文字位置調整

設定お疲れさまでした。
JavaScriptを触ったことがない方にとってはアレンジは難しいかもしれませんが、まずはコピペから試していただければと思います。
使ってみた感想やご利用報告もいただけるととても嬉しいです。

Advanced

Optionの解説を一通り読んだ方向けに、応用サンプルファイルをZipで配布しています。

ダウンロードしたZipを解凍し、README.txtを参照してください。

※各スクリプトにはライセンスがあります。ライセンスの条件に従ってご使用ください。

名前表示のある応用ページ

応用ページにある画像の再配布、二次利用は禁止しています。

Redistribution and secondary use of the images on the Advanced page are prohibited.

名前表示のある応用ページを見る

サンプルファイルをダウンロード

keyboard_control_key