d_599233 カードが動くタロット占いをつくろう 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
もっど見せる
画面上にカードを並べ、シャッフルし、配るものです。
最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。
実現方法はいくつかありますが、今回は次のような方針で作ることにしました。
・使用言語は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
