カードが動くタロット占いをつくろう JavaScriptでアニメーションするWebアプリ
サークル: るてんのお部屋
サークルHP:
発売日: 2025年05月30日 16時
ジャンル: 技術書 占い
内容紹介
Webブラウザー上で「カードが動くタロット占い」を作る本です。
画面上にカードを並べ、シャッフルし、配るものです。最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。
実現方法はいくつかありますが、今回は次のような方針で作ることにしました。
*使用言語はJavaScript
*canvasに描画する
*Tween方式でアニメーションする
*PC、スマホで使うことを想定して、画面サイズに合わせて初期canvasサイズを変える
*結果の文章は、canvasの外にテキストとして出力させる
*既存のWebサイトに占いページを追加することを想定する
*最終的にライブラリーとしてファイルをまとめる
canvasへの描画は、『Pixi.js』を使います。ゲーム用の有名ライブラリーで、WebGLを利用して高速に描画できます。
Tween方式のアニメーションは『Anime.js』を使います。軽量で使いやすいアニメーション用のライブラリーです。DOM要素を動かすだけでなく、オブジェクトのプロパティの値をアニメーションできます。
この2つのライブラリーは、いずれもMITlicenseです。
それでは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
