Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScriptでカードが動くタロット占いアプリを作ろう
Highest Rated
Rating: 4.6 out of 5(35 ratings)
289 students

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

Web上でアニメーションするアプリケーションの作り方
Highest Rated
Created by柳井 政和
Last updated 10/2024
Japanese

What you'll learn

  • JavaScriptでアニメーションをおこなうアプリケーションを作れるようになります
  • JavaScriptでカードが動くタロット占いアプリケーションを作れるようになります
  • Webフォントの軽量化や、プログラムやCSSのライブラリ化をおこなえるようになります
  • JavaScriptでアプリを作り、既存のWebサイトに組み込めるようになります

Course content

8 sections • 68 lectures • 4h 16m total length

  • コース全体のロードマップ4:55

    ここでは、本コースのおおまかなロードマップを示します。何が学べるのか、何ができるようになるのか、どんな進め方をするのか、どんな学習をするのかを紹介します。

  • このセクションで学ぶこと1:31

    このセクションで学ぶことを把握します。

  • 画面の遷移6:59

    本コースで作る「タロット占いアプリ」の画面の遷移を確認します。各画面でどのような処理をおこなうのかを把握します。

  • ファイル構成5:18

    本コースで作る「タロット占いアプリ」のファイル構成を確認します。既存のWebサイトにアプリケーションを追加するために、どのようなファイル構成にするのかを把握します。

  • ソースコードについて0:58

    ここでは、サンプルプログラムのソースコードをダウンロードします。

Requirements

  • エディタとして無料のVisual Studio Codeを利用します
  • WebブラウザーはGoogle Chromeで説明します
  • JavaScriptの基本的な文法は分かっているものとします
  • フォントの軽量化やプログラムやCSSのライブラリ化はNode jsを使います
  • 動画はWindowsパソコン上での開発です（JavaScript部分はOS共通です）

Description

　このコースでは、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フォントの軽量化

　・ライブラリーの出力


‥‥‥‥‥‥‥‥‥‥


Who this course is for:

  • Webサイトにタロットカード占いのページを追加したい人
  • JavaScriptでアニメーションするWebアプリを作りたい人
  • JavaScriptで作ったアプリを既存Webサイトに追加したい人

Report abuse