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

作品説明

Webブラウザー上で「カードが動くタロット占い」を作る本です。 画面上にカードを並べ、シャッフルし、配るものです。最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。 実現方法はいくつかありますが、今回は次のような方針で作ることにしました。 ・使用言語はJavaScript ・canvasに描画する ・Tween方式でアニメーションする ・PC、スマホで使うことを想定して、画面サイズに合わせて初期canvasサイズを変える ・結果の文章は、canvasの外にテキストとして出力させる ・既存のWebサイトに占いページを追加することを想定する ・最終的にライブラリーとしてファイルをまとめる canvasへの描画は、『Pixi.js』を使います。ゲーム用の有名ライブラリーで、WebGLを利用して高速に描画できます。 Tween方式のアニメーションは『Anime.js』を使います。軽量で使いやすいアニメーション用のライブラリーです。DOM要素を動かすだけでなく、オブジェクトのプロパティの値をアニメーションできます。 この2つのライブラリーは、いずれもMIT licenseです。 それではWebブラウザー上で「カードが動くタロット占い」アプリケーションを作っていきましょう。 本体のPDFは95ページです。また、付属のサンプルには、ソースコードが入っています。 ● 簡略化した目次 第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