JavaScriptでカードが動くタロット占いアプリを作ろう

　このコースでは、JavaScriptを使って、Webページ上でタロットカードがアニメーションする占いアプリケーションを作成します。

　また、その開発を通して、Webページ上でアニメーションするアプリケーションの作り方を学びます。

　あなたはこのコースで、次のような事を学びます。

・ゲーム向けライブラリー「Pixi.js」を利用した、カードをアニメーションさせるアプリケーションの作り方。

・Tween方式でオブジェクトを動かすライブラリー「Anime.js」を利用した、手軽なアニメーションの手法。

・タロット占いのデータの用意の仕方から、実際のアプリケーションの作成までの過程。

・作成したアプリケーションのプログラムやCSSを1つにまとめて、ライブラリー化する簡単な方法。

・Webフォントの縮小化によるファイルサイズの軽量化。

・既存のWebサイトへの新規アプリケーションの組み込み。

　使用するライブラリー「Pixi.js」「Anime.js」はMIT licenseなので無料で利用できます。

　コースで紹介するコードやデータは、サンプルとして全てダウンロードできます。開発は、Windowsでおこなっていきますが、基本的なところはOS共通です。

‥‥‥‥‥‥‥‥‥‥

　コースは、次のように進みます。

● 第1章 イントロダクション

　・画面の遷移

　・ファイル構成

　・サンプルコードの入手

● 第2章 開発の準備

　・開発環境の準備

　・Pixi.js

　・Anime.js

　・画像

　・フォント

　・タロット占いのデータ

● 第3章 アプリケーションの入り口

　・HTMLファイル

　・CSSファイル

　・エントリーポイント

　・縦横サイズの調整

　・リソースの読み込み

● 第4章 タイトル画面

　・進行 - アプリの進行

　・進行 - タイトル画面

　・UI - テキストボタンを作る

　・UI - フェードアウトとフェードイン

● 第5章 カード操作 - シャッフル

　・進行 - カードを積み重ねる

　・UI - メッセージボックスを作る

　・UI - スプライトボタンを作る

　・進行 - シャッフル

　・進行 - カードの展開

● 第6章 カード操作 - 3つの山

　・進行 - 3つの山を作る

　・進行 - 3つの山をまとめる

　・進行 - 4枚を十字に並べる

● 第7章 占いの結果

　・進行 - 結果表示ボタン

　・進行 - 結果の表示

　・全体の確認

● 第8章 ライブラリー化 公開の準備

　・Webフォントの軽量化

　・ライブラリーの出力

‥‥‥‥‥‥‥‥‥‥