Utakata.js - 名前変換対応スライドショースクリプト

News&Updates

2024/07/07: Utakata
Moreページにリンク用バナーを追加

これまでの更新履歴

最新: v1.2.1

Outline

Utakata.jsとは

Utakata.jsは、画像と文字を組み合わせて簡易スライドショーを実装できるスクリプト（JavaScript）です。

画像を用意し、Utakata.js本体と指示JavaScriptを読み込むとスライドショーを表示できるようになります。

ざっくりと作っていろいろと模索中ですが、細かいところが気にならない方はぜひ使ってください。

簡易デモページ

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

※Charm.js配布ページと共通のスクリプトを使用しています。

Utakata.jsの特徴

当サイトの名前変換スクリプトの登録名を表示可能なので、名前表示スライドや夢漫画を作れる
詳細：名前変換スクリプトの登録内容を表示する（チュートリアル読み終えた方向け）
他ライブラリやアプリに依存しないので、JavaScriptが動く環境なら使用可能（特定のプレイヤーは不要）
画像の切り替えタイミング、スライド自動化などの再生オプションあり
基本は全画面サイズ表示だけど表示サイズや比率などの描画領域オプションあり
フォントサイズ、色をある程度指定可能
文字の表示位置、縦書きを指定可能
画像に色フィルターを追加可能
スライドにせず、文字入り画像としても使用可能
スクリプトファイルは軽め（スクリプト本体は13KBくらい）
スマホでアクセスしても動く（例外はあるかも）

Utakata.jsで出来ないこと・ご注意

InternetExplorer等の一部の環境では動作しません
重い画像を多用するとうまく動かないかもしれません
サーバにアップロードしないで動作確認をすると、一部の機能は動きません
タグ打ちとファイルアップロードが必要なので、これらに関する知識は必要です
指示JavaScriptを作る必要があるので、多少の知識が必要です（スクリプト本体は編集不要です）
全体的にいろいろと模索中です

Download

ご利用条件

ライセンス（利用条件等を書いたもの）を確認し、同意できる方のみご利用ください。

日本語版も英語版も内容は同じです。お好きな方をご確認ください。

Utakata.jsライセンス（日本語版）

Utakata.jsライセンス（英語版）

Utakata.jsのダウンロード

上記のライセンスをご確認いただくとダウンロードボタンを押せるようになります。

サンプルファイルは簡易デモページのものです。応用ページのものはOptionページにあります。

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

スクリプト本体のみダウンロード

Guide

Utakata.js導入の流れ

Utakata.jsは5つのステップで導入することができます。

スクリプトをダウンロード
スクリプトとスライドショーで使いたい画像を任意の場所に格納

文字や画像の表示を指定した、指示JavaScript（scenario.js）を用意

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',
    }
  ],
});

スライドショーを表示するcanvasページを用意　▼例 slide.html

<!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>
</body>
</html>

canvasより下でutakata.jsとscenario.jsを読み込む

<!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>
  <script src="utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>

基本的な使い方の詳しい手順は次のTutorialをご覧ください。

Tutorial

1. スクリプトをダウンロード

Downloadからサンプルファイルごとダウンロードします。
ファイルを解凍し、フォルダの中身を確認します。
- utakata.js：スライドショースクリプト本体のJavaScriptです。
- scenario.js：スライドショーの指示JavaScriptです。編集していくのはこちらです。
- slide.html：スライドショーを表示するページのHTMLです。
- image1.png：スライドショーに表示する画像です。
- image2.png：スライドショーに表示する画像です。
- image3.png：スライドショーに表示する画像です。
utakata.jsはそのまま使用します。他のファイルは後々お好きなものに変えてください。

画像はcanvasの比率で表示するために拡大したり切り抜いて表示します。 object-fit のcoverみたいな感じになります。

2. スクリプトとスライドショーで使いたい画像を任意の場所に格納

ご自身のWebサイトの任意の場所にサンプルファイルをコピーします。
JavaScriptや画像をフォルダ分けしている方はご自身で決めたフォルダへ、フォルダ分けがよくわからないという方はWebサイトフォルダの中にそのままコピーしてください。

そのままコピーした場合は以下の構成になります。
- Webサイトフォルダ/utakata.js
- Webサイトフォルダ/scenario.js
- Webサイトフォルダ/slide.html
- Webサイトフォルダ/image1.png
- Webサイトフォルダ/image2.png
- Webサイトフォルダ/image3.png
Tutorialはこの構成で説明します。

サーバー上にアップロードすると、slide.htmlは既にサンプルと同じ動きになります。

3. 文字や画像の表示を指定した、指示JavaScript（scenario.js）を編集

エディタを用意する
プログラミングに便利なVisual Studio Codeがおすすめですが、なければメモ帳など他のエディタでもOKです。

Visual Studio CodeはMicrosoftが開発した無料でオープンソースのテキストエディタです。日本語拡張機能を入れればメニューを日本語表示できますし、拡張機能が優れているので気が向いたら使ってみてください。
スライドのブロックを作る
scenarioの中身はスライドショーの各スライドです。以下のように { から }, までが1スライドです。
```
{ 
  text: 'あいうえおあいうえお',
  size: 3,
  src: 'image1.png',
  position: 'right',
},
```
textの右側にある'あいうえおあいうえお'が表示する文字です。
文字を変えるときは'aiueoaiueo'のようにクォーテーション(')を残して書き換えてください。
文に(')を使用したい場合は"aiueoaiueo"のようにダブルクォーテーションで挟んでください。
改行ありの文を表示したいときは'あいうえお\n改行しました'のように改行したいところへ「\n」を入れます。

sizeの右側にある3は文字サイズです。
canvasの横幅に対するパーセンテージなので、この例だと一文字一文字がcanvasの約3％の文字サイズになります。
指定がない場合は自動で5％になります。

srcの右側にある'image1.png'はslide.htmlから見た表示する画像のパスです。
この例では、slide.htmlと同じフォルダ内に入っているimage1.pngを表示する指示になっています。
slide.htmlと同じ階層のフォルダ「img」の中にある場合は'img/image1.png'にする等、運用中のサイトに合わせて変更してください。

positionの右側にある'right'は文字をスライド内のどの位置に出すかの指定です。
以下の指定ができます。

top-left　top　top-right　left　center　right　bottom-left　bottom　bottom-right　original
意味は左上、中央の上、右上、左、中央、右、左下、中央の下、右下、独自指定です。
文字のベースラインや行間設定が影響するので、位置はだいたいの大雑把な指定です。

指定が無い場合は自動でcenterになります。
originalの場合は追加の指示が必要になるため、詳細は Optionページを参照してください。

同じスライド内に違う位置指定でもう一つ文を出したり、フィルターを入れたりフォントを変えたりもできます。Charm.jsやBerrycake.jsで登録した名前を文字で表示することもできます。こちらについても詳細は Optionページをご覧ください。
各スライドをまとめて、Slideshowクラスのインスタンスを生成する
scenario配列を含むobjectでインスタンス生成したコードをscenario.jsに書いて保存します。

インスタンス生成って何？って方は全体をコピーして、textやsrc等、変えたいところだけを慎重に変える方法でコードを書いてください。
```
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',
    }
  ],
});
```
コードを編集する際の注意点は以下の通りです。
- カンマ(,) コロン(:) セミコロン(;) 括弧(){}[]を消さないように注意
- カンマ(,) コロン(:) セミコロン(;) 括弧(){}[]を全角記号にしたり環境依存文字に変えないように注意
- 数字など特定の場合を除き、指示は基本的にクォーテーションで必ず囲む
- クォーテーションで挟んでいる中身を除き、全角スペースは使わない（全角スペースがあるとエラーになります）
- クォーテーションの中でコードを改行しない（改行表示は\nを使い、コード自体は改行しないで書いてください）
指示JavaScriptを保存する
インスタンス生成したコードをscenario.jsに上書きして保存します。

保存の際、文字コードはUTF-8にしてください。参考リンク：UTF-8って？

ファイル名はscenario.jsにしなくても問題ありませんが、ファイル名を変えた場合はhtmlで読み込むときには変更後の名前で読み込んでください。

4. スライドショーを表示するcanvasページを用意

任意のhtmlを用意し、idがutakataの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"></canvas>
</body>
</html>
```
サンプルではslide.htmlというファイル名ですが、他の名前に変更しても問題ありません。

CSSの読み込みや他のコンテンツを追加しても動きます。必要でしたら追加してください。

canvasの上や下にも文字やコンテンツを追加しても問題ありませんが、このチュートリアルで作るスライドショーは自動で再生される設定になっています。閲覧者さんがスクロールする前にスライドが動き始めるので、その点を考慮しておくと良いかと思います。

5. canvasより下でutakata.jsとscenario.jsを読み込む

canvasタグよりも下でJavaScriptを読み込む
```
<!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>
  <script src="utakata.js"></script>
  <script src="scenario.js"></script>
</body>
</html>
```
utakata.jsをscenario.jsよりも先（上）に書いてください。

この2点の読み込み位置はbodyの閉じタグ直前がおすすめです。

これで、サーバ上のslide.htmlにアクセスすると自動でスライドショーが開始されます。

基本的な導入設定は以上です。設定お疲れさまでした。

Utakata.jsは様々なオプションがあります。もしご興味があれば Optionページから使い方をご確認ください。