カードが動くタロット占いをつくろう JavaScriptでアニメーションするWebアプリ

Webブラウザー上で「カードが動くタロット占い」を作る本です。

　画面上にカードを並べ、シャッフルし、配るものです。最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。

　実現方法はいくつかありますが、今回は次のような方針で作ることにしました。

* 使用言語はJavaScript
* canvasに描画する
* Tween方式でアニメーションする
* PC、スマホで使うことを想定して、画面サイズに合わせて初期canvasサイズを変える
* 結果の文章は、canvasの外にテキストとして出力させる
* 既存のWebサイトに占いページを追加することを想定する
* 最終的にライブラリーとしてファイルをまとめる

　canvasへの描画は、『Pixi.js』を使います。ゲーム用の有名ライブラリーで、WebGLを利用して高速に描画できます。

　Tween方式のアニメーションは『Anime.js』を使います。軽量で使いやすいアニメーション用のライブラリーです。DOM要素を動かすだけでなく、オブジェクトのプロパティの値をアニメーションできます。

　この2つのライブラリーは、いずれもMIT licenseです。

　それではWebブラウザー上で「カードが動くタロット占い」アプリケーションを作っていきましょう。

第1章　開発するプログラム
第2章　開発の準備
第3章　アプリケーションの入り口
第4章　タイトル画面
第5章　カード操作
第6章　占いの結果
第7章　公開の準備

第1章　開発するプログラム
　　1-1　画面の遷移
　　1-2　ファイル構成
第2章　開発の準備
　　2-1　開発環境の準備
　　2-2　Pixi.js
　　2-3　Anime.js
　　2-4　画像とフォント
　　2-5　タロット占いのデータ　data-tarot.js
第3章　アプリケーションの入り口
　　3-1　HTMLファイル　index.html
　　3-2　CSSファイル
　　3-3　エントリーポイント　main.js
　　3-4　縦横サイズ　size.js
　　3-5　リソースの読み込み　preload.js
第4章　タイトル画面
　　4-1　【進行】アプリの進行　proc.js
　　4-2　【進行】タイトル画面　proc-01-title.js
　　4-3　【UI】テキストボタンを作る　ui-button-text.js
　　4-4　【UI】フェードアウトとフェードイン　ui-fade.js
第5章　カード操作
　　5-1　【進行】カードを積み重ねる　proc-02-stack.js
　　5-2　【UI】メッセージボックスを作る　ui-message-box.js
　　5-3　【UI】スプライトボタンを作る　ui-button-sprite.js
　　5-4　【進行】シャッフル画面　proc-03-shuffle.js
　　5-5　【進行】カードの展開　proc-04-spread.js
第6章　占いの結果
　　6-1　【進行】カードの選択　proc-05-select.js
　　6-2　【進行】カードの開示　proc-06-open.js
　　6-3　【進行】結果の表示　proc-07-result.js
第7章　公開の準備
　　7-1　Web フォントの軽量化　fontmin
　　7-2　ライブラリーの出力　vite