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

今すぐ本編を読む！

発売日	2025-05-30 16:00:00
FANZA品番	d_599233
ジャンル	全年齢向けデモ・体験版あり男性向けコミケ105（2024冬）
メーカー	るてんのお部屋
価格	1100 円～

今すぐ本編を読む！

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

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

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

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

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

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

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

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

本体のPDFは95ページです。また、付属のサンプルには、ソースコードが入っています。

●簡略化した目次

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

●詳細な目次

第1章開発するプログラム
・1-1画面の遷移
・1-2ファイル構成

第2章開発の準備
・2-1開発環境の準備
・2-2Pixi.js
・2-3Anime.js
・2-4画像とフォント
・2-5タロット占いのデータdata-tarot.js

第3章アプリケーションの入り口
・3-1HTMLファイルindex.html
・3-2CSSファイル
・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-1Webフォントの軽量化fontmin
・7-2ライブラリーの出力vite