初心者がMonaca/CreateJSでスマホのハイブリッドアプリを作ったブログ

CreateJSで作ってMonacaでビルドするという誰得なスマートフォンのアプリ開発奮闘記。 (Android/iPhoneどっちもいけます)

2016年03月

続きです。

②プログラミング

1.新規プロジェクトを選択します。
cf6b722b


2.Hello Worldアプリの選択ボタンを選択します。
cf6b722b



3.プロジェクト名を入れて(ここでは前章 その1とします)、プロジェクトを作成するを選択します。
cf6b722b


4.すべてのプロジェクトに前章 その1が表示されるので、
そのプロジェクトの開くを選択します。
cf6b722b

5.画面が表示されるので以下のコードを入力します。
cf6b722b


↓↓↓↓↓ ここから ↓↓↓↓↓

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <!-- ネットワークのcreatejsのファイル -->

        <script src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>

        <title>zensyo(1)</title>
    </head>
    <body>
        <canvas id="main" height="300" width="300"></canvas>

        <script>
            /*
            easeljs-0.6.0.min.js

            The MIT License (MIT)

            Copyright (c) 2013 gskinner.com

            Permission is hereby granted, free of charge, to any person obtaining a copy of
            this software and associated documentation files (the "Software"), to deal in
            the Software without restriction, including without limitation the rights to
            use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
            the Software, and to permit persons to whom the Software is furnished to do so,
            subject to the following conditions:

            The above copyright notice and this permission notice shall be included in all
            copies or substantial portions of the Software.

            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
            FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
            COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
            IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
            CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
            */

            window.onload = function()
            {
                var canvas;
                var stage;
                var circle;

                // <canvas id="???"> の???を指定してcanvasを取得
                canvas = document.getElementById("main");
                stage = new createjs.Stage(canvas);
 
                circle = new createjs.Shape();
                circle.graphics.beginFill('green').drawCircle(0, 0, 150);
                circle.y = 150;
                circle.x = 150;
 
                stage.addChild(circle);
                stage.update();
            }
        </script>
    </body>
</html>

↑↑↑↑↑ ここまで ↑↑↑↑↑



6.保存を選択します。
cf6b722b

②プログラミングはここまでです。


③ブラウザによる確認
1.Previewに以下のようなものが表示されていればOKです。

cf6b722b


できた!!

③ブラウザによる確認はここまでです。
お疲れ様でした。


皆様こんにちは。どりゃ~です。

さっそくはじめましょうか。
前章 その1は以下のようなストーリーで進めていきます。

ストーリー

①開発環境を用意する
・ウェブブラウザ Windowsの場合はGoogle Chrome、Macの場合はSafariインストールしてください。
「使い慣れたブラウザがいいんだけど・・・」なんて言っている人も上記で進めてください。
後ではまります。

・メールアドレス
Monacaに対してアカウント登録するときに必要です。
Hotmailなどのフリーメールでいいと思います。

・スマートフォン
スマホアプリを作ってみるが目的なので、持っていたほうがよろしいのではないでしょうか?
Android、iPhoneどちらでもかまいません。


1.Monacaにアクセスします。
https://ja.monaca.io/


2.サインアップを選択します。
1


3.用意したメールアドレス、任意のパスワードを入れて今すぐ試すボタンを選択する。
2


4.用意したメールアドレスに確認メールが飛ぶのでメール本文内にあるリンクを選択する。


5.リンク先でメールアドレスとパスワードを求められるので、3で入力したメールアドレスとパスワードを入力し、ログインを行う。


6.以下のような画面が表示される。
3


①開発環境を用意するはここまでです。
お疲れ様でした。

この後の話ですが、
・前章 その1 実際にMonacaとCreateJSで何か作ってみる。
・前章 その2 説明、わかったことなど。。。

その後で章立てしてサンプルなどを作ってみたいと思います。
皆様、しばしおつきあい下さい。。。
 

始めるにあたりQ&Aを用意しました。

Q:iPhoneでもアプリを作ることはできますか?
A:できます。

Q:無料ですか?
A:リリースをするとき(Android:GooglePlay、iPhone:AppStore) に登録をするのですが、
その時にお金がかかります。
そのため、Android、iPhone共に「自分の携帯環境でアプリを作成している限りにおいて」無料です。

Q:iPhoneで登録せずに開発のイメージがつかめない
A:MonacaデバッガーというものがAppStoreにあり、それで開発を進めていくことができます。

Q:使用言語は?
A:ほぼ、JavaScript




 

はじめまして。本ブログの筆者どりゃ~と申します。
ご来訪頂きありがとうございます。

これからmonacaとCreateJSを使用したハイブリッドアプリの作成方法やその他もろもろについて記載していきますが・・・
まず大前提としてここで取り扱うアプリの方向性について確認いたします。

・monacaではハイブリットアプリを作成することができます。
(ものすごくざっくりというとiPhone、Android両方で動くアプリ)

・CreateJSではFlashのようなオブジェクトの操作ができます。
(ものすごくざっくりというとゲームが作成できます)


つまり上記を組み合わせると
monacaとCreateJSを使用したアプリ
⇒Flashのような動きをするiPhone、Android両方で動くアプリ

ということになります。
イメージはこんな感じですかね。
(筆者は絵がものっそい下手です。今後もなんか描きますが内容はお察しください。。。)
アプリイメージ



もし、貴方が作ろうとしているスマホアプリがAndroidのみをフォーカスにしているなら
従来通りJavaで作ることを検討してもいいかもしれません。
(CreateJSだとJavaScriptなので簡単というメリットはあるかもしれませんが。)

もし、貴方が作ろうとしているスマホアプリがハイブリッドアプリだが、
Flashのような機能が不要な場合
(例えば、ニュースアプリのようなちょっとした文字、画像などを表示)
monacaを使用、かつ、CreateJSを不使用という選択肢もありですね。


monacaとCreateJSと使用して1つアプリを作ってみました。
このようなものができます。
「普通」のアプリだと思います。普通でないのは環境ですかね。
https://play.google.com/store/apps/details?id=com.doryakobo.CrystalSearch



さて、改めて確認しましょうか。
貴方が作成しようとしているアプリはこのような方向で合ってますか?

↑このページのトップヘ

人気ブログランキング