Jsdo.it と Monaca による端末へ のアプリ導入 5/29 （金）課題 1331019 堀江美香.

Presentation on theme: "Jsdo.it と Monaca による端末へ のアプリ導入 5/29 （金）課題 1331019 堀江美香."— Presentation transcript:

1 jsdo.it と Monaca による端末へ のアプリ導入 5/29 （金）課題 1331019 堀江美香

2  jsdo.it とは  Monaca とは  jsdo.it と Monaca による端末でのアプリ動作方 法 準備 jsdo.it のコードを Monaca へ ビルド方法 ‐ 目次 ‐

3  jsdo.it とは  Monaca とは  jsdo.it と Monaca による端末でのアプリ動作方 法 準備 jsdo.it のコードを Monaca へ ビルド方法 ‐ 目次 ‐

4  JavaScript の投稿共有コミュニティサイト Jsdo.it とは

5  Web 上でコードを入力してその場で実行  コードを Web 上に保存し、作品として公開 特徴

6  jsdo.it とは  Monaca とは  jsdo.it と Monaca による端末でのアプリ動作方 法 準備 jsdo.it のコードを Monaca へ ビルド方法 ‐ 目次 ‐

7  スマートフォン向けアプリの開発環境  HTML CSS JavaScript を使って、スマホや タブレットで動作するアプリが簡単に作成 Monaca とは

8  必要なものは Web ブラウザのみ  ソースコードを保存するだけで実機上で即時 確認 特徴

9  jsdo.it とは  Monaca とは  jsdo.it と Monaca による端末でのアプリ動作方 法 準備 jsdo.it のコードを Monaca へ ビルド方法 ‐ 目次 ‐

10  jsdo.it のコードを Monaca に導入することで、 スマホやタブレットでアプリを動作させるこ とができる jsdo.it と Monaca による 端末でのアプリ動作方法

11  1. 動かしたいコードを選ぶ  2. 「ダウンロード」 → PC 上に保存 準備（ jsdo.it ）

12  1. プロジェクトの作成  2. 「 HelloWorld アプリ」を選択 準備（ Monaca ）

13  3. 新規プロジェクト → 「プロジェクトを作成 する」  4. すべてのプロジェクト → 「 HelloWorld アプ リ」開く 準備（ Monaca ）

14  5.MonacaIDE が開く 準備（ Monaca ）

15  MonacaIDE のサイドメニューバーに jsdo.it でダウンロードしたファイル をドラッグ Jsdo.it のコードを Monaca へ

16  1.iOS 向け Monaca アプリ用  2.Android 向け Monaca アプリ用 ビルド方法

17  1.MonacaIDE メニュー上の「ビルド」 → 「 iOS アプリ のビルド」  2.iOS アプリケーションのビルド → 「ビルド設定を開 く」 1.iOS 向け Monaca アプリのビル ド

18  3.iOS ビルド設定 ※ iOS Developer Program への登録が必要になる → iPhone で Monaca アプリをダ ウンロード 1.iOS 向け Monaca アプリのビル ド

19  1.MonacaIDE メニュー上の「ビルド」 → 「 Andorid ア プリのビルド」 2.Andoroid 向け Monaca アプリのビル ド

20  2.Android アプリケーションのビルド → 「デバッグビル ド」 → 次へ 2.Andoroid 向け Monaca アプリのビル ド

21  3. 「ビルドが完成しました」 → QR コードを「名前を付 けて保存」 2.Andoroid 向け Monaca アプリのビル ド