ラベル Android の投稿を表示しています。 すべての投稿を表示
ラベル Android の投稿を表示しています。 すべての投稿を表示

2020年12月25日

Androidで単語帳を作ろう(3)- SQLiteデータベースの使い方

6. SQLiteデータベースの使い方



公式の開発者向けサイトでは、Room というライブラリを使ってデータベースアクセスを行うことが推奨されています。




もちろんこれにしたがって Room を使っても良いのですが、今回はまずはシンプルに自分でSQLクエリーを発行してデータベース処理を実装していくことにしました。



SQLiteOpenHelperを使う


SQLiteデータベースの初期化と接続の管理を行うには、SQLiteOpenHelperを継承したクラスを作成するのが便利です。


--- DatabaseHelper.java
---


テーブル名、カラム名などの固定文字列は、後述するWordsRepositoryクラス内に定数として定義してあるので、二重で定義しないようにそちらを参照しています。


今後データベースにテーブルを追加したりカラムを追加したりする場合は、データベースのバージョン番号を上げて、onUpgrade() メソッド内で必要なSQLを発行する処理を実行します。今は最初のバージョンなのでまだ何も実装していません。



アプリケーション全体を通してデータベース接続を保持する


では、上で作成したDatabaseHelperクラスをどのように使うかを見てみましょう。

    DatabaseHelper dbHelper = new DatabaseHelper(this);
    SQLiteDatabase db = dbHelper.getWritableDatabase();
    try(final Cursor cursor = db.rawQuery("SELECT * FROM words", null)){
        while (cursor.moveToNext()){
            (...)
        }
    }

tryのカッコ内で Cursor をオープンすると、tryを抜けたときに自動でクローズしてくれるので便利ですね。


このようにデータベースアクセスが必要になる度に毎回 DatabaseHelperのインスタンスを生成してから getWritableDatabase()メソッドを呼んでも構わないのですが、この方法だとデータベースのオープン/クローズ処理が毎回行われることになります。


今回のサンプルアプリケーションでは毎回データベース接続をオープン/クローズするのではなく、「カスタムアプリケーションクラス」を使ってアプリケーション全体を通してデータベース接続を保持する方法を使うことにします。


    🎬[Android]Applicationクラスとは



--- MyApplication.java
---


Applicationクラスのインスタンスはアプリケーションのプロセスが動いているかぎり破棄されることはないので、このクラス内のインスタンス変数として変数を宣言しておけばアプリケーションのどこからでも共通に使うことができます。


今回はこれを利用してDatabaseHelperのインスタンスをApplicationクラスで保持することにしました。getDb()というメソッドが初めて呼ばれたときにデータベースをオープンします。

また、アプリケーションが終了するときに onTerminate() が呼ばれるので、このタイミングでデータベース接続をクローズしています。



カスタムアプリケーションクラスが起動時に正しく呼ばれるようにするには、マニフェストファイルでクラス名を指定しておく必要があります。







リポジトリクラスを使ってデータベース処理を一箇所にまとめる


次に、実際にデータベースに対してSQLクエリーを発行してデータを取得したり更新したりする処理を実装します。これらの処理はテーブル単位で実行されることが多いので、その単位で「リポジトリクラス」を作ってまとめるのが良いでしょう。


今回のサンプルアプリケーションでは、WordsRepository というクラスを作って単語データに関するデータベース処理を記述しました。


全件を取得する


    public List<Word> getList() {
        ArrayList<Word> list = new ArrayList<>();

        // tryの括弧内でCursorを生成することで自動的にcloseされる。
        try(final Cursor cursor = mDb.rawQuery("SELECT * FROM " + TABLE_NAME + " ORDER BY " + COL_ID, null)){
            while (cursor.moveToNext()){
                final Word word = buildWordFromCursor(cursor);
                list.add(word);
            }
        }

        return list;
    }


1件だけを取得する


    // idで指定された単語を返す。idが0の場合は新規インスタンスを生成して返す。idが見つからない場合はnullを返す。
    public Word getById(int id) {
        if (id == 0){
            return new Word(0, "", "");
        }

        Word word = null;
        String[] args = { Integer.toString(id) };

        // tryの括弧内でCursorを生成することで自動的にcloseされる。
        try (final Cursor cursor = mDb.rawQuery("SELECT * FROM " + TABLE_NAME + " WHERE " + COL_ID + " = ?", args)) {
            // 主キーで絞っているため結果は1行か0行かのどちらかなのでwhileでループする必要はない。
            if (cursor.moveToFirst()){
                word = buildWordFromCursor(cursor);
            }
        }

        return word;
    }


単語を追加または更新する


    // idが0の場合は新規追加、0以外の場合は更新処理を行う。
    public void save(Word word) throws InvalidKeyException, SQLException {
        if (word._id == 0) {
            String sql = "INSERT INTO " + TABLE_NAME + " ("
                    + COL_ENGLISH + ", "
                    + COL_JAPANESE + ", "
                    + COL_DONE
                    + ") VALUES (?, ?, ?) ";
            String[] args = { word.english, word.japanese, boolToString(word.done) };
            mDb.execSQL(sql, args);
            return;
        }

        Word existing = getById(word._id);
        if (existing == null) {
            throw new InvalidKeyException("");
        }

        String sql = "UPDATE " + TABLE_NAME + " SET "
                + COL_ENGLISH + " = ?, "
                + COL_JAPANESE + " = ?, "
                + COL_DONE + " =? "
                + " WHERE (" + COL_ID + " = ?) ";
        String[] args = { word.english, word.japanese, boolToString(word.done), Integer.toString(word._id) };
        mDb.execSQL(sql, args);
    }



単語を削除する


    // idで指定された単語を削除する。単語が見つからない場合は何もしない。
    public void delete(int id) throws SQLException {
        Word existing = getById(id);
        if (existing == null) return;

        String sql = "DELETE FROM " + TABLE_NAME + " WHERE (" + COL_ID + " = ?) ";
        String [] args = { Integer.toString(id)};
        mDb.execSQL(sql, args);
    }




今回はSQLiteデータベースの使い方について見てみました。
ひとまずこれで単語帳アプリのVersion 0.1が動くようになりました。


ここまでのソースコードは下のURLで公開していますので良ければプロジェクト全体をクローンして動かしてみてください。




Androidで単語帳を作ろう - 目次
Androidで単語帳を作ろう(3)- SQLiteデータベースの使い方






🍻

2020年12月17日

Androidで単語帳を作ろう(2)- ListViewの使い方

今回は単語一覧画面の実装方法を詳しく見てみましょう。


5. ListViewの使い方





このリストでは、1行に「英語」と「覚えたフラグ(チェックマーク)」の2つの項目を表示したいので、カスタムアダプタを実装しました。


    Androidでリストビュー(ListView)をカスタムして表示する - Qiita 



--- WordListActivity.java



--- WordListViewAdapter.java
---





ListViewとカスタムアダプターの実装方法はほぼ決まりきったイディオムのようなものなので、ひとまずこれはこういうものとして覚えておけば良いのではないかと思います。




ちなみに最近のAndroidではListViewよりもRecyclerViewを使う方が推奨されているようです。ListViewと実装方法においてそれほど大きな違いはなさそうですが、こちらも一応確認しておきたいところです。

    🎬[Android]RecyclerViewの仕組み




次回は、
6. SQLiteデータベースの使い方

についてまとめたいと思います。


2020年12月15日

Androidで単語帳を作ろう(1) - 画面遷移、アクティビティのライフサイクルなど

今回から3回に分けてAndroid用の単語帳アプリを作って行こうと思います。

ひとまず Version 0.1として最低限の機能を実装してみます。

Version 0.1の機能

  • 単語一覧(英語のみ表示。覚えたものにはチェックマークを表示。)

  • 単語確認(英語・日本語を表示。「覚えた」「忘れた」ボタンでフラグ更新)

  • 単語新規登録

  • 単語編集・削除




作成する画面は以下の4画面ですが、新規登録と編集・削除は同じアクティビティなので実質的には3画面になります。









ソースコード





実装する上でポイントになる点としては、大まかに分けて以下の6つがあります。

1. ConstraintLayoutによるレイアウト
2. ActionBar(Toolbar)の使い方
3. 画面遷移の実装方法
4. Activityのライフサイクル
5. ListViewの使い方
6. SQLiteデータベースの使い方


以下にそれぞれのポイントについて簡単にメモして、参考になりそうなリンクなどを紹介していきます。


*なお、今回の説明のために参考になる資料を探していたところ、みんなのプログラミング by Telulu LLC 様の説明が大変分かりやすかったので、以下の説明で特にたくさんリンクさせていただきました。(ありがとうございます!)


1. ConstraintLayoutによるレイアウト


従来通りのRelativeLayoutやLinerLayoutを入れ子にして画面を作成する方法でも良かったのですが、どうせなら新しいバージョンで推奨されているやり方を使おうと言うことで、ConstraintLayoutを使って画面レイアウトを作成しました。

この方法だとほとんど入れ子構造を使わずにフラットな構成でウィジェット同士の相対的な位置関係を定義することでレイアウトが出来るので、慣れれば確かにこちらの方が効率が良いかも知れません。特にAndroid Studioのレイアウトエディタを使いこなせるようになればドラッグ&ドロップで画面をデザイン出来るので、かなり強力ですね。


下の動画を観ればおおよその使い方は分かると思います。

    🎬[Android]Constraint Layoutはこれだけ知っておこう① 

    🎬[Android]Constraint Layoutはこれだけ知っておこう② 

    🎬[Android]Constraint Layoutはこれだけ知っておこう③

    🎬[Android]ConstraintLayoutでレイアウトを作成する場合の注意点


公式のガイドも必読ですね。

    Layout Editor を使用して UI を作成する  |  Android デベロッパー





2. ActionBar(Toolbar)の使い方


「戻る」「編集」「削除」などのボタンを画面上部のActionBar内に表示する方法です。


最近(と言ってもAndroid 5以降らしいですが)のAndroidではActionBarではなく「Toolbar」を使うほうが何かとメリットが大きいようです。

    AndroidのToolBar(新しいActionBar)メモ - Qiita 


ただ今回のサンプルでは特に不都合は無かったのでActionBarを使って実装しました。

    アプリバーの設定  |  Android デベロッパー 


また単語の新規登録と編集で同じアクティビティを使っていますが、新規登録の場合はActionBar内の「削除」メニューを非表示にする制御を行っています。

    OptionMenuの内容を動的に変更する - Qiita 

    実行時におけるメニュー項目の変更  |  Android デベロッパー 




3. 画面遷移の実装方法


Androidでの画面遷移を上手く制御するためには、アクティビティの「スタック」の概念をしっかりと理解しておく必要があります。






たとえば、新しい画面に遷移する場合は startActivity() を使いますが、前の画面に戻るときは finish() で現在のアクティビティを「終了」する必要があります。

終了せずにさらに startActivity() で元の画面に遷移してしまうと、スタックの上にさらに新しいアクティビティのインスタンスが積まれることになります。


    🎬[Android]今の画面を閉じて前の画面に戻る方法


また、複数の画面(A → B → C)を開いたあとで、(Bを飛ばして)一気に最初の画面(A)に戻りたいという場合には、ちょっと工夫が必要になります。


今回のサンプルでは、単語一覧(A) → 単語確認(B) → 単語編集(C)と遷移した状態で、単語が削除されたらBではなくAに戻すためにこの方法を使いました。


この場合は finish() で戻るのではなく startActivity() を使いますが、そのさいに特別なフラグをパラメータに追加することで  C → A  という画面遷移が可能になります。

    private void backToList(){
        Intent intent = new Intent(getApplicationContext(), WordListActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
        startActivity(intent);
    }


詳しくは下のサイトを参照してください。

最初のActivityに戻る - Qiita 



次の画面にデータを渡す


単語一覧画面から単語確認画面に遷移するケースでは、画面間で「どの単語がタップされたのか」という情報を受け渡す必要が出てきます。これは、インテントの putExtra() メソッドを使って渡したいデータをインテント内に詰め込むことで実現出来ます。

            Intent intent = new Intent(getApplicationContext(), WordViewActivity.class);
            intent.putExtra("_id", word._id);
            startActivity(intent);


渡されたデータを取得する


遷移先の画面では、onCreate または onResume でインテントの getIntExtra(), getStringExtra() などのメソッドを使って詰め込まれたデータを取り出します。


    protected void onResume() {
        super.onResume();

        // 渡されたインテントから単語IDを得る。
        Intent intent = getIntent();
        mWordId = intent.getIntExtra("_id", 0);

        // 指定された単語のデータをデータベースから取得して表示する。
        loadWord(mWordId);
    }




4. Activityのライフサイクル


サンプルの WordViewActivity では、上に書いた「元の画面から渡されたデータを取り出す」という処理を onResume でおこなっていますが、これは単語一覧画面から開かれたときだけでなく単語編集画面から戻ってきた場合にも単語の表示を更新したい(=編集後の最新の値を反映したい)ためです。


onCreate はアクティビティが生成されたタイミングでしか呼ばれませんが、onResume はアクティビティがスタックの先頭に来て画面に表示される度に毎回呼ばれます。


Android用のアプリケーションを開発する上では、このようにアクティビティのライフサイクルを理解することが非常に重要になります。


これについては下の動画が大変分かりやすいのでオススメです。

    🎬[Android]画面(Activity)のライフサイクルとは




今回は、
1. ConstraintLayoutによるレイアウト
2. ActionBar(Toolbar)の使い方
3. 画面遷移の実装方法
4. Activityのライフサイクル

について書きました。

次回は、

についてまとめたいと思います。




Androidで単語帳を作ろう - 目次
Androidで単語帳を作ろう(1)- 画面遷移、アクティビティのライフサイクルなど 







🍻

2016年12月28日

Androidで18万DLされた自作アプリをWindowsストアに移植した結果

Androidで18万回以上ダウンロードされた自作アプリをWindowsストアに移植して約2ヶ月経ちました。

移植作業にはなんだかんだ言って1ヶ月近くの工数がかかってしまったのですが、その結果をまとめてみました。

ダウンロード数: 339回
広告表示回数: 1,745回
Fill Rate:    約20%
広告クリック数:  6回
広告収益:   48セント (約50円)


なんなんでしょう、この結果は。。。


あまりの少なさにがく然としています。(笑)

Windows 10のタブレットや2 in 1も増えて来たので、そろそろ行けるかな〜と期待していたのですが、Windowsストアからアプリをダウンロードして使うという使い方はまだまだそんなに広まっていないのかも知れませんね。


ちなみに広告はUWPアプリではAdMobが使えなかったので標準の「Microsoft advertising ad」というものを使ってバナー広告を表示しています。これですがFill Rateが20%って、AdMobと較べて低すぎですよね。


もちろん、宣伝の仕方やアプリのカテゴリなどによって結果は大きく変わると思います。


ただ個人的には次のアプリからはしばらくWindowsストアはパスという事に決定です。


とりあえず試してみて大体の感触が分かったのでまあ良しとして、次に行きます。^^)





 

2016年10月5日

Nexus 6から中古のiPhone 5sに変えて起こった変化とは

1ヶ月ほど前に、愛用していたNexus 6を硬い床の上に落としてかなり派手に画面を割ってしまいました。実はまだ24回払いの残金も残っているというのに。(涙)

それから、余っていたiPhone 5sを仕方なくメインの携帯として使っています。今までアプリ開発のテスト用にたまに触るぐらいだったiPhoneですが、毎日使ってみると(予想通り)やっぱり使いやすいですね。

なんと言っても、まずポケットに入れたときの収まりの良さが違います。(笑) まあこれは単にサイズの違いなんですが。

ただ画面が小さい分文字を読むのが辛く感じます。

Nexus 6だと、FeedlyでRSSをチェックしてからSmartNewsで最新ニュースを読んで、その後Twitterをダラダラと眺める、という流れでゆうに1時間ぐらいはスマホの画面を見続ける事が出来たのですが、老眼が入ってきつつある眼にはiPhone 5sの画面サイズで同じ事をするのはきついです。


そこでこの1ヶ月で起こった変化とは、、、



Nexus 7(2013年モデル)の復活!! 



でした。

最近全然使わなくなっていたNexus 7ですが、このところ毎日活躍しています。このサイズ感は本当にいい感じです。




Googleからもうすぐ新しい7インチクラスのタブレットが出るらしいという噂もあるので、そちらも楽しみです。








 

2016年4月23日

Android Support Libraryが古いとAdMobのエラーでアプリが落ちる件

3月に自作のアプリを更新したところ、急にクラッシュレポートの数が増えて来ました。




レビュー欄にも「インストールしたけど起動しません」という報告がちらほらと出始めて、あせりました。



エラーの詳細はこんな感じです。

java.lang.NoClassDefFoundError: android.support.v4.util.SimpleArrayMap
at com.google.android.gms.ads.internal.zzs.(Unknown Source)
...
at com.google.android.gms.ads.internal.ClientApi.createBannerAdManager(Unknown Source)
...
at com.google.android.gms.ads.BaseAdView.loadAd(Unknown Source)
at com.google.android.gms.ads.AdView.loadAd(Unknown Source)

java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/util/SimpleArrayMap;
at com.google.android.gms.ads.internal.zzs.(Unknown Source)
...
at com.google.android.gms.ads.internal.ClientApi.createBannerAdManager(Unknown Source)


どうもAndroid Support Libraryの「SimpleArrayMap」クラスが見つからないという事で、AdMobでの広告の表示時にエラーが発生しているようです。


AdMobがAndroid Support Libraryに依存しているというのは意識していませんでしたが、このエラーを見る限り依存しているみたいですね。

参考)
http://stackoverflow.com/questions/23717006/do-i-need-support-library-v4-for-google-play-services-ads




今までlibsフォルダに「android-support-v4.jar」をコピーしてあったのですが、それが古いままだったのが行けなかったようです。


(ちなみに今だにEclipse+ADTです。)


一旦libsフォルダのandroid-support-v4.jarを削除して、Android SDK内にあるものを「コピー」ではなく「リンク」として追加しました。



これでビルド時に最新のSupport Libraryが使われるようになるはずです。



この変更をしてアプリを更新した後は、AdMobが原因でのクラッシュは無くなりました。



しかし今回は手持ちの端末でテストしても全く起きなかった問題だったので、Androidアプリのメンテナンスはいろいろ大変だ奥が深いな〜、とつくづく思いました。笑)








.

2015年1月13日

Cocos2d-JSでAdMob広告を表示する手順 (iOS, Android)

2015年1月12日現在の情報です。

開発環境


- Mac OS X 10.9.5
- Cocos2d-JS v3.2
- Cocos Code IDE v1.1.0
- Xcode v6.1.1
- Eclipse (ADT) 23.0.2


cocos newコマンドでプロジェクトを作成


cocos new -p com.example.CocosJSAdmob -l js CocosJSAdmob

(もちろんCocos Code IDEのメニューから新規プロジェクトを作成する事も出来るのですが、そうすると生成されるファイルが微妙に違ったりするので私はcocosコマンドを使う事にしています。)


Cocos Code IDEでプロジェクトを開く


現状ではcocos newコマンドで作成したプロジェクトをそのままCocos Code IDEにインポートしようとしても「プロジェクトが見つからない」というエラーになるので、まずプロジェクトのルートディレクトリに下の内容で .project ファイルを作成する必要があります。

<name>CocosJSAdmob</name>の部分だけ適宜変更して下さい。

.projectファイルを作成した後、Cocos Code IDEにインポートします。





Cocode Code IDE上で実行出来る事を確認しておきます。



ネイティブコードサポートを追加する。


Cocos Code IDEのCocos Toolsメニューから「Add Native Codes Support」を選択します。
これによってプロジェクトの下に frameworks/runtime-srcというディレクトリが出来ます。



Xcodeでプロジェクトを開く


下のディレクトリにXcode用のプロジェクトファイルがあるのでそれを開きます。

  /(プロジェクトルート)/frameworks/runtime-src/proj.ios_mac/



ターゲット(実機またはシミュレータ)を選んでそのまま実行するとビルドされて実行出来ます。ただ初回は全てのソースファイルをコンパイルするので数分かかるかも知れません。



iOSでのAdMob対応


下を見ながらAdMob SDKを組み込みます。

https://developers.google.com/mobile-ads-sdk/docs/admob/ios/quick-start

AdMob SDKのファイルをプロジェクトに追加。



ライブラリを追加。

下の青枠内が今回追加したもの。特に「GameController」はGoogleのドキュメントでは記載漏れになっているみたいなので要注意です。



-ObjCリンカフラグを追加。


*追記:
AdMobの最新版(v7以降)では-ObjCリンカフラグは不要になったそうです。


ソースコードを変更。


AppController.h
AppController.mm

dealloc関数の後ろ、@endの前に以下を追加。

JavascriptからObjective-Cのコードを呼ぶ。


詳細は下記を参照して下さい。
 How to call Objective-C functions using js on iOS/Mac

app.jsの適切な場所に下のコードを追加します。今回は HelloWorldLayer の ctor関数の一番最後に追加しました。

jsb.reflection.callStaticMethod("AppController", "ShowAdView");


iOSでAdMob広告が表示されたところ

広告を隠したい時はHideAdViewを呼べばOKです。

jsb.reflection.callStaticMethod("AppController", "HideAdView");

iOSでの対応は以上で終わりです。




Eclipse(ADT)でプロジェクトを開く


下のディレクトリにEclipse用のプロジェクトがあるのでそれをインポートします。

  (プロジェクトルート)/frameworks/runtime-src/proj.android/

インポートした後、プロジェクトのディレクトリで

cocos compile -p android

を実行して全てのソースコードをコンパイルしておきます。これも初回は数分ぐらいかかるかも知れません。


AndroidでのAdMob対応


次のドキュメントに従って Google Play Serviceを組み込んで下さい。

https://developers.google.com/mobile-ads-sdk/docs/?hl=ja


Java側にAdMob広告を表示する処理を追加。


AppActivity.javaに以下の変更を加えます。

1. AppActivityクラスの先頭に変数を追加。

private static Activity activity = null;
private static AdView adView = null;


2. onResumeでactivityを変数に保持。

@Override
protected void onResume() {
super.onResume();
activity = this;
};

3. AppActivityクラスに3つのメソッドを追加。

public static void createAdView()
public static void showAdView()
public static void hideAdView()

変更後のAppActivityクラスは下の状態になります。
(xxxxxxxxxxxxxxxx...xxxxxxの部分は適宜置き換えて下さい。)

JavascriptからJavaのコードを呼ぶ


app.jsを下の様に変更します。


Android上でAdMob広告が表示されたところ


Androidでの注意点


現状、Google Play Serviceへの参照をプロジェクトに追加して一旦Eclipse上でRunしてしまうと、それ以降は cocos run, cocos compile, cocos deployなどのコマンドが下の通りエラーで中断してしまいます。


-package-resources:
     [aapt] Creating full resource package...
     [aapt] invalid resource directory name: /Applications/android-sdk-mac_x86/extras/google/google_play_services/libproject/google-play-services_lib/bin/res crunch

BUILD FAILED
/Applications/android-sdk-mac_x86/tools/ant/build.xml:932: The following error occurred while executing this line:
/Applications/android-sdk-mac_x86/tools/ant/build.xml:950: null returned: 1

Total time: 43 seconds
Error running command, return code: 1


原因はADTとAntでビルドの方法(一時ファイルの場所など)が異なる事にあるみたいです。
( http://stackoverflow.com/questions/19746319/how-to-solve-invalid-resource-directory-name-resource-crunch )


対策としては、Eclipseを完全に終了するかまたはEclipseの自動ビルドをオフに設定してから cocosコマンドを実行すればエラーにならない様です。



以上、Cocos2d-JS v3.2でAdMob広告を表示する方法でした。

jsb.reflection.callStaticMethod という関数を使えばJavascriptからObjective-CやJavaのメソッドを簡単に呼び出せるので便利ですね!

これを使えば広告の表示制御だけでなく、
  • ブラウザで任意のURLを開く
  • AppStoreに飛ばす
  • Facebook, Twitterなどに投稿する
など色々な事が簡単に出来そうです。









 .

2014年12月5日

Nexus 6を買って14日目の感想

大きさと重さについては「案ずるより産むが易し」


慣れれば大丈夫。と言うよりこの画面の大きさはクセになる。

重さに関してはもちろん軽いに越したことはないけれど、タブレットみたいに重さで手が疲れるとかそういう事は無いので気にならない。

でもポケットから取り出す時には落とさない様にちょっと気を付ける必要があるかも。


Webサイトの閲覧はますますスマホ中心に


縦持ちでも結構広いし横持ちにすれば大体どんなPC用サイトでもそのまま閲覧出来る。

今までは「スマホではブログやニュース記事のタイトルだけチェックして中身はPCで後から読む」というスタイルだったのが、「スマホでその場で読む」に変わりつつある。

縦向き

横向き

やっぱり画面が広いのは良い事だ。


大きいキーボードで文字入力が速く快適に!


2年以上愛用したGalaxy S3と比べて一番変わったのはこの点かも知れない。
今までは
「スマホで文字を入力する事」=「極力避けたい事」
だったのが、これからはそうでもなくなりそうだ。


充分に高機能なカメラ


カメラについては、前に使っていたGalaxy S3と比べるとかなりスペックが上がっているので特に不満は無し。かと言って正直感動するほどでもなかったかな。



パノラマ撮影

ぼかし効果付きの写真も簡単に撮影可能。

あとGalaxy S3はカメラのシャッター音が大きくて不便だったけれど、Nexus 6の場合は端末のボリュームを下げてバイブにしておけば無音で撮影出来る。これは嬉しい。




キーボードとマウス、外部ディスプレイを繋げばPCになる(?)


Chromecast があれば無線で簡単に画面全体を外部ディスプレイへ出力する事が可能だ。大画面で見ると 2560×1440px というNexus 6の解像度の高さがますます活きてくる
(訂正: Chromecastを経由すると解像度が落ちるので2560x1440pxの画面がそのまま表示される訳ではない。)

会社のPCにRemote Desktopで接続すればPC無しでデスクトップ環境を再現する事も出来そうだ。(遅延がどれくらいになるかはまだ試していないので分からない。)  
(*試した結果は下の「後日談」参照)


Nexus 4や5では、MicroUSBポートに「SlimPort」という規格に対応したアダプタを挿せばHDMIのディスプレイに画面をミラーリング出来たらしい。ところがどうも調べた所 Nexus 6ではケーブル接続での外部ディスプレイ出力には対応していないみたいだ。

なので外部ディスプレイとの接続には Chromecast か Miracast* を使うしかなさそうだ。

* Googleのサポートページによると、なんと 『Nexus 6とNexus 9はMiracastをサポートしていません』との事。
https://support.google.com/nexus/answer/2865484?hl=en

** なぜか工場出荷時にMiracastを使用不可にしてあるらしく、Root化してbuild.propというファイルに1行追加すれば使える様になるとの情報が下のページにあった。
http://forum.xda-developers.com/nexus-6/help/nexus-6-miracast-t2952461/page2



我が家には1年以上前に買ったChromecastがあったので、試しにそれで居間のテレビに画面をミラーリングしてみた。
通知エリア内の「Chromecast」ボタンを押すと画面のミラーリングが始まる。
Chromeブラウザの画面。スクロールすると一瞬のタイムラグを感じる。

Youtubeの動画をミラーリングして観るだけなら遅延はほとんど感じない。


画面を出力する事が出来たら、次はキーボードとマウスだ。

1. USBケーブルで有線接続する
2. Bluetoothで無線接続する

の2通りの方法がある。
どちらでも良いのだけれどとりあえずOTGアダプタ(こんなやつ)とUSBハブを買って1つめの方法で試して見ようと思っている。これだといつもPCで使い慣れているキーボードとマウスをそのまま使える。



*後日談
PCにRemote Desktopで接続してChromecast経由でディスプレイ出力するというのを試して見た。MicrosoftのRemote DesktopクライアントとGoogleのChrome Remote Desktopの両方を試した。

結果、やっぱりあまり実用的には使えない事が判った。キーボードはそれなりに使えるのだけど、マウスの動作がどうしても1テンポ遅れてしまう。これでは細かな作業には使いづらい。

Remote Desktop自体はNexus 6の画面上ではストレス無く動いているので、Chromecastを経由する事による遅延が原因だと思う。もちろん無線LANの速度にも影響されるだろう。試した環境は11n(300Mbps)だったので、これが11ac(6.9Gbps)とかになれば改善されるのかも知れない。と思ったらChromecastは11acに対応していないらしいので現状ではこれ以上は無理そうだ。

また、遅延の問題以前に解像度の問題もある。Chromecastを経由する事で解像度が落ちてしまい文字がボヤケて表示されるのだ。

こういう用途はそもそも想定外で、Chromecastはあくまで写真・動画の鑑賞やプレゼンなどに使うものという事だろう。

もしSlimportかMHLでの有線接続が出来ていたらもっと便利に使えただろうと思うとちょっと残念だ。



3日目に遭遇したトラブル


買ってから2日目の夜にバッテリーが残り20%ぐらいの状態でそのまま寝てしまった。朝になってから使っていると何か画面の反応がおかしい。スクロールすると縦半分だけが取り残されて表示が崩れたりする。最後には白黒の砂嵐状態になってしまった。ちょうど電波が無い時の地上波テレビみたいな感じだ。

慌てて電源アダプターをつなぐ。それから完全にシャットダウンして再起動してもしばらくすると同じ現象が起きる。しかも全く電話が繋がらない。「これはキャリア(Sprint)の店舗に行って交換してもらうしか無いかな〜」と焦っているうちにうんともすんとも反応しなくなってしまった。

結局、電源アダプターをつないだまま2時間ほど触らずに置いておく事でこの現象は直った。それ以降は必ず1日1回は充電する様にしている。それから再発はしていないので、多分大丈夫だと思う。


総合的には今のところ「ほぼ満足」


端末代は高いけれど、最先端のAndroidを体験したい人には強くおすすめ出来る。実はiPhone 6 Plusにしようかこっちにしようかかなり迷ったけど、Nexus 6にして良かった。Android 5.0は完成度が高くてとても使い易い。

Remote Desktop接続を多用する超小型PC好きとしては、有線で遅延/劣化の無いディスプレイ出力が出来ないのだけがちょっと残念だ。(笑)








 
 

2014年10月17日

JavaScriptでスマホゲームアプリを作る - Cocos2d-JS編

前回のPlatino版に続いて、Cocos2d-JS版が出来た。



ソースコードはこちら。https://github.com/mikehibm/15puzzle-cocos2d


● 困ったところ


う〜ん、特になし。

あえて言えばy座標の指定方法(上下)がこれまでと逆になるのでそれを変更する必要があったぐらい。

あとそういえば、ifで座標が一致するかどうかを比較して分岐している箇所があって、

 if (piece.x !== new_pos.x || piece.y !== new_pos.y){
   ...処理...
 }

と書くと処理が実行されなくて困った。(浮動小数点数なので)
下の様に差分の絶対値で比較する様に変更した。

 if (Math.abs(piece.x - new_pos.x) > 1 || Math.abs(piece.y - new_pos.y) > 1){
   ...処理...
 }



● 良かったところ


アニメーションの作り方やシーン遷移の方法など、これまでに得たCocos2dの知識が活かせるので楽が出来た。

実機での実行速度も申し分無し。

デバッグが簡単。Cocos Code IDEからデバッグ実行しておくとJSファイルを修正して保存した瞬間にデバッグアプリ内でコードが再ロードされるのですぐに確認出来る。もちろんブレークポイントを設定する事も可能!


● アニメーション実行中にさらにアニメーションを実行する場合


MoveToを使ってピースを移動するアニメーションを実行中に、場合によってはさらに次のアニメーションを開始する必要がある場合がある。連続でタッチして同時に複数のピースを動かした場合などだ。

その場合、同じSpriteに対して同時に複数のMoveToアニメーションを実行してしまうと最終的な位置が思わぬ所にずれてしまう事になる。

これについては、2つめのMoveToアニメーションを実行する前に

 piece.stopActionByTag(ACTION_TAG);

を実行して前のMoveToを中止する事で解決出来た。


● Mac版デバッグアプリの設定変更


Cocos Code IDEから実行するとデフォルトだとMac版のデバッグ用アプリが立ち上がって来てその中でアプリが実行される。

このデバッグ用アプリの画面サイズ(Zoom設定)が、起動する度に100%になってしまいMBAだとiPhone5の縦画面がディスプレイに収まらないので、そこがちょっと使い辛かった。

これは下のページの通りに設定を変更する事で50%表示にする事が出来た。これでとても快適になった。
Lua - Cocos Code IDEのシミュレーターのデフォルト設定 - Qiita 



● ソースコード


今回のソースコードはこちら。
https://github.com/mikehibm/15puzzle-cocos2d




● 感想


さすがに注目度急上昇中のフレームワークだけあって Cocos2d-JS は使い易い。デバッグも素早く出来るので気分良く開発が出来る。

またXcodeやEclipseからもプロジェクトを開いて実行出来るので、広告表示やアプリ内課金などのネイティブ連携も頑張ればなんとかなりそうだ。

パーティクルエディタやシーンエディタなどのツール群も充実しているので、やっぱり一番安心して実戦で使えるのはこれかなあと思う。

あと次はUnityにチャレンジしてCocos2d-JSを上回るメリットがあるかどうかを試したい。








 .

2014年10月14日

JavaScriptでスマホゲームアプリを作る - Titanium + Platino編

ようやく15パズルのTitanium+Platino版が出来た。

Platino Game Engine


ソースコードはこちら。 https://github.com/mikehibm/15puzzle-platino


● Platinoプラグインの導入


プラグインの導入は至って簡単。トライアル版をダウンロードして解凍して所定のフォルダにコピーすればTitanium側で認識してくれた。

あとはプログラムの先頭に

var platino = require('co.lanica.platino');

をいれてガンガン使って行くだけだ。
BGMや効果音を鳴らす時は

var ALmixer = platino.require('co.lanica.almixer');

も必要。
さらにapp.jsなどで最初に一回だけ

ALmixer.Init(0,0,0);

を呼んで初期化しておく必要がある。最初この初期化をしてなかったせいで音が出なくて30分ほど悩んだ。


● まずはサンプルのソースを確認


Herlockと同じくPlatinoもドキュメントを見てもいまいち分からないので、最初はまずサンプルプログラムを全てダウンロードしてソースを熟読するのが良いと思う。


Flappy Birdや戦車ゲームのサンプルが面白いけれど、多分一番参考になったのは「Codestrong Shooter」というシューティングゲームのサンプルだ。


● マルチ解像度対応


サンプルプログラムのマルチ解像度対応がちょっと気に入らなかったので、自分なりに試行錯誤する必要があった。背景の画像などは全てiPhone5sの640x1136のサイズを基準にして作っておいて、端末の解像度に合わせて横幅を画面一杯にして縦が短い場合は上下が切れる様に調整した。ApplicationWindow.js の updateScreenSize 関数でその辺りをやっている。

スプライトなどを画面に配置する時は、横幅は常に640として固定値で指定して構わないのだけれど、縦の高さは端末によって変わるので、真ん中に寄せたいもの(パズルのピースなど)については中央からの相対指定として、上端または下端に合わせたいものはそれぞれ上端(y=0)または下端(y=画面サイズ)からの相対指定とする様にした。


● タッチイベント


画面に配置したSpriteのタッチイベントを取得するのが少々面倒だった。まず画面(Sceneオブジェクト)のタッチイベントを書いて、その中でスケールを考慮して座標を変換した上で Sceneの forwardTouchToSprites 関数を呼んでやる必要がある。


● 連続でアニメーションを実行


アニメーションは下の様な感じでTransformオブジェクトを生成して実行する形になる。
var transform  = platino.createTransform({
  duration: 500,
  alpha: 0,
  easing: platino.ANIMATION_CURVE_CUBIC_IN,
  autoreverse: true,
  repeat: -1
 });
sprite.transform(transform);
ただ、連続で複数のアニメーションを実行するための簡単な方法が標準では用意されていない。「Codestrong Shooter」のサンプルにもある通り、アニメーション終了時のcompleteイベントを拾って次のアニメーションを開始すれば良いのだけれど、非常に面倒だ。

そこで調べたところ下のモジュールを見つけた。


これを使えば例えば6個のアニメーションを連続で実行する場合でも下の通り簡潔に書くことが出来るのでとても便利だった。
highScoreTranstion = new Transition([
  { duration: 1000, x: CENTER_X-highScoreLabel.width/2, easing:   platino.ANIMATION_CURVE_QUAD_OUT }
  ,{ duration: 500, alpha: 0, easing: platino.ANIMATION_CURVE_CUBIC_OUT }
  ,{ duration: 1000, alpha: 1, easing: platino.ANIMATION_CURVE_CUBIC_OUT }
  ,{ delay: 500 }
  ,{ duration: 1000, x: game.screen.width*-2, easing: platino.ANIMATION_CURVE_QUAD_IN }
  ,{ duration: 1, x: game.screen.width*2 }
]);
highScoreTranstion.animate(highScoreLabel, -1);


● Androidでのフルスクリーン表示


Androidで実行すると画面の上部にタイトルバーが表示されてしまって困った。
とりあえず tiapp.xmlファイルに

<fullscreen>true</fullscreen>
<statusbar-hidden>true</statusbar-hidden>
<navbar-hidden>true</navbar-hidden>

と書いてみたけれども Android 4.4 では効果なし。調べると新しいAndroidではプログラム内で

   window.activity.actionBar.hide();

を呼ぶ必要があるという事だったのでその通りにしたら無事フルスクリーンで表示された。


● iOSとAndroidで微妙に挙動が違う所


TextSpriteを配置した時にiOSとAndroidで位置がずれてしまって困った。
どうもAndroidだとwidth,heightが自動では計算されていない(0,0になっている)みたいだ。これは platino.createTextSprite 関数を呼ぶ際に明示的に widthとheightをセットする事で解決した。

他に、Androidだと微妙に処理が遅いのか少しカクカクした感じがしてしまう。上にアップした動画でも雲の動きがちょっとカクカクしているのが分かるけれど、iOSだともっとスムーズに動いた。Titanium + Androidでは前にも、「今ひとつどうもな〜」という経験をした事があるので、今回もやっぱりそうかという感じはある。


● ソースコード


今回のソースコードはこちら。
https://github.com/mikehibm/15puzzle-platino


● 一応の結論


Titaniumでのアプリ開発をずっとやっている人で、「ゲーム開発にもTitaniumを使いたい!」と言う場合には良い選択肢かも知れない。

あとドキュメントの中の下のページはすごく参考になった。

http://docs.lanica.co/docs/#!/guide/javascript_best_practices
配列をクリアする時は
myArray = []; 
ではなく
myArray.length = 0;
と書いた方が良い、とか。







 

2014年9月5日

JavaScriptでスマホゲームアプリを作る - Herlock編

さて今回はHerlockを使って15パズルを作ってみた。



● Herlockとは


http://herlock.do/faqs/1304
株式会社ソニックムーブが提供するスマートフォンネイティブアプリ開発環境となります。
http://herlock.do/faqs/1338
AndroidとiOSに対応したワンソースでネイティブアプリを同時に開発することができます。
また、Web IDEを使用して開発、デバッグからビルドまで行うことができ、開発時のアプリはクラウド上で保存するだけで簡単に動作確認が可能です。
さらに、JavaScriptでOpenGLによる実装ができ、ゲームのようなハイパフォーマンスのアプリケーションを簡単に開発することが可能となります。




● 作ったもの


PhoneGap編Monaca編と基本的に同じ15パズル。

ただ今回は画像を使ったので見た目が大分違っている。
Herlockのサンプルにあった「ねこ穴」というアプリのソースコードを元にして作ったので、勢いで一部の画像をそのまま使わせて頂いてしまった。


ソースコードはこちら。(とても自慢出来たものではないですが。笑)

tmlib.jsには含まれているシーン管理やアセット管理の部分をHerlockでは自分で作り込まなければならないのが結構大変だった。(結局ねこ穴のソースから大部分をコピペして使った。) 逆に言うと自分で好きなように作りこんだりどこかのライブラリを使ったり、自由度が高いと言えるかも知れない。

アニメーションについてはTweenJSで簡単に出来たので助かった。



● Herlockの素晴らしいところ


WebViewではなくネイティブのOpenGL機能を使っているのでアニメーションのパフォーマンスは申し分ない。JavaScriptだけでこれだけの事が出来るというのは本当に素晴らしい。

サウンドの方もiOS, Androidともに全く問題無しだった。PhoneGapやMonacaではAndroidで音が出ない問題に悩まされただけに、これは嬉しい。

Web IDEが提供されているのでローカルに開発環境を用意する必要が無い。これもさくっとアプリを作りたい時には大変有難い。



● 苦労したところ


1.実行するまでエラーが分からない

これは特にHerlockだからという訳ではないけれども、JavaScriptでの開発は静的型付けのある言語と比べると意外と大変だなあと改めて感じてしまった。ちょっとしたスペルミスや引数の間違いなどでもその箇所が実行されるまでなかなか気付く事が出来ない。この事から感じるストレスは開発が進めば進むほど大きな負担になって来る。
今回Herlockで開発しながら特にこの点が気になったのは、おそらく次に挙げる要因が関係していると思う。

2. Herlock Viewerでアプリのリロードに時間がかかる

Web IDE上でプログラムの変更を保存してから、それを端末上のデバッグ用アプリ(Herlock Viewer)で再読み込みするのに結構時間がかかる。自分の環境(米国からのアクセス)だと最低でも15秒、サーバー側が重くなっている様に感じられる時だと30秒から40秒程度待たされる事もある。

原因は、最初に全ての画像や音声のデータを読み込む様なプログラムになっているからという事もあると思う。ただ、サーバー側が重くなっている時などはプログラムの実行を開始する前にJSファイル(require.jsなど)の読み込みの段階でタイムアウトしてしまう事もよくある。

この辺りは、Herlock Viewerの方でJSファイルや画像・音声などのデータをキャッシュしてくれて、任意のタイミングで開発者がキャッシュの更新を指示出来る様に(もしくは変更されたものだけ自動で読み込む様に)してもらえれば改善される様な気がしないでもない。

また、Android版はまだマシだったが、iOS版のHerlock Viewerではアプリのリロード処理中にタイムアウトしてしまう確率がかなり高かった。(特にサーバー側が重い時)

3. アプリ内でのシーン管理やアセット管理のための標準的な方法が分からない

APIドキュメントには基本的なコードしか載っていないので、最初は戸惑った。
結局サンプルアプリの「ねこ穴」のコードを見よう見まねでいじりながらなんとか形にはなったけれど、シーン管理やアセット管理のためのクラスは標準で存在した方が有難い。その上でtmlib.jsのチュートリアルの様な平易なドキュメントがあればなお嬉しい。




● これからHerlockに期待したいこと


1. TypeScript対応

Web IDEがJavaScriptだけでなくTypeScriptにも対応してくれれば、上に書いた「実行するまでエラーが分からない」という問題はほぼ解決すると思う。


2. Herlock Viewerでの再ロード時間の短縮

キャッシュ対応やサーバー側のスペック向上などでなんとか「数秒程度」でリロードが完了する様にしてもらえないものだろうか。
再実行に15秒以上かかる様だと「すぐに実行して動作確認出来る」というJavaScriptの利点がほぼ相殺されてしまうので、なんとも惜しい気がする。


3. ローカル開発用SDK

コマンドラインのみのSDKで良いので提供してもらえれば、Web IDEを使わずにローカルで好きなエディタを使って開発出来る様になる。もしこれが可能ならぜひ実現してもらいたい。
PhoneGapで言う「phonegap serve」コマンドの様なものを実行するとPCが接続待ち状態になり、そこにHerlock Viewerで同一LAN内から接続出来る様になれば多分リロードに時間がかかるという問題も解消されるだろう。

ローカルにソースコードがあればGitなどでの管理も自由に出来るし、理想的な開発環境になるのではないだろうか。

4. ドキュメントの充実

HerlockのAPIドキュメントは見た目はなかなか良いのだけれど、内容はまだまだ充実させる余地があると思う。



● 今日の結論


- JavaScriptだけでネイティブアプリの開発が出来るHerlockはアプリ開発者ならぜひ試して見る価値あり。

- ただデバッグ実行時のリロード時間の短縮はなんとしても実現して欲しい。

- なんだかんだ言っても結局のところ非常に面白いし将来有望な開発環境だと思うので、これからのより一層の改善に期待!



以上!







 .

2014年8月24日

JavaScriptでスマホゲームアプリを作る - Monaca + tmlib.js編

● Monaca とは


Monacaの機能と特徴 | HTML5を使ったクロスプラットフォーム型モバイルアプリ開発 




● PhoneGap/Apache Cordovaとの違い


内部的にはPhoneGap/Cordovaを使っているので、ソースコードはPhoneGap/Cordova用に作ったものをほとんど変更せずに使える。

一番大きな違いは、Monacaだとローカルに開発環境を用意する必要が無い事だ。ブラウザさえあればどこからでもすぐにプロジェクトを開いて開発を続けられる。


先にPhoneGap用に作った15パズルのソースコードをMonacaのIDEにアップロードすると何の問題も無く実行出来た。

実機でのデバッグ実行は「Monacaデバッガー」というアプリをインストールして行う。


PhoneGap Developerのアプリと同様こちらもとても便利。さらに端末上でログ出力が確認出来たり、開発者のIDEに画面のハードコピーやメッセージを送ったりも出来るみたいだ。





● 結論


開発環境の違いはあるがソースコード的にはPhoneGap/Cordovaと同じものをほぼそのまま動かせる。

なのでAndroidではWebAudioを使うとかなりの確率で音が出ないという問題も同じだ。この問題があるのでゲームアプリを作るのには残念ながらちょっと適さない。 (追記参照)




● 追記


Monacaデバッガーの「ハイパフォーマンス版(4.0以降のみ対応)」というのがあったのでこちらで試した見た所、Androidでも音が鳴った。BGMも効果音も問題無しだ。やったー!
とは思ったものの、デバッガー経由でなくビルドしたものを端末でダウンロードしてインストールしてから動かすと、やっぱり音が鳴らない。これはビルド時の設定か何かで直るものなのだろうか。それともMonaca側がまだ最新の環境に対応していないのだろうか。良く分からないけれども何となく期待は持てそうだ。


Monacaサイトの説明によると、ハイパフォーマンス版のデバッガーは

  • 最新のChromiumベースのブラウザーエンジン(インテルのCrosswalk)を用いており、高速なレンダリングと高度なCSS、JavaScript APIを利用可能です。

との事なので、Chromiumのバージョンに関係がありそうだ。となると、ビルドして配布する場合はユーザーの端末に入っているChromiumブラウザーのバージョンに依存するという事だろうか。



● さらに追記 (2014年9月7日)


下のブログ記事を見つけたのでAndroid用のビルド設定を「ハイパフォーマンス (Crosswalkエンジン)」を使う様に変えて試してみた所、ビルドしたアプリでも問題無く音が鳴る様になった。

Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ 

APKファイルのサイズが19MBに大きくなったけれども、まあ許容範囲だろう。ともかくこれでAndroidでも音が出る様になったという事で、スッキリした。
Monaca素晴らしい!







 

 

2014年8月23日

JavaScriptでスマホゲームアプリを作る - PhoneGap + tmlib.js編

● tmlib.jsを使ってみた


tmlib.jsが面白そうなので初めて触ってみた。

このチュートリアルを読めば大体の使い方がつかめる。素晴らしい!
tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step00 ゲームのひな形を作ろう | TM Life 




● スマホでも結構使えそうな感じ


作ったものは平凡だけれどとりあえずこんな感じの15パズル。
動画はNexus7(2012)上で動かしたもの。




ブラウザ上でPlay出来るバージョンはこちら。



開発環境は、最初はVisual Studio 2013に
Multi-Device Hybrid Apps (Preview) for Visual Studio 
という拡張機能を入れて使おうと思ったのだけれど、入れてみるとまだちょっと使いづらい部分があったので今回はパス。

結局  Brackets というエディタとTerminalだけで十分だった。Bracketsには「ライブプレビュー」というボタンがあってそれを使うとすぐにChromeを開いて実行出来るのでこれがとても役に立った。

実機で実行したい時は、Terminalでプロジェクトのフォルダから

phonegap serve

を実行しておく。そして実機(Android, iOS, Windows Phone)上でPhoneGap Developerアプリを実行し、PCのIPアドレスを入力すればOK。実機とPCが同一ネットワーク内にあれば良いのでUSBケーブルをつなぐ必要が無いのが有り難い。
この状態でソースコードを変更して保存すれば1〜2秒で自動的に実機側のアプリを再起動してくれる。これは実際に使って見るとものすごく便利だ。複数の端末を同時に接続出来るので、Android、iPhone, iPad, Windows Phoneを全て接続してそれらが同時に更新されるのを眺めているとそれだけでも面白い。


ちなみにビルドしてパッケージ化されたものを動かしたい時は、実機をUSB接続した上で、

 phonegap run android --device  または phonegap run ios --device

を実行すればOK。



ソースコードはこちら。
https://github.com/mikehibm/15puzzle-phonegap







● あれ、Androidで音が出ない。。。


iPhone,iPadでは全く問題無くBGMと効果音が再生されるのだけれど、手元のGalaxy S3とNexus7では全く音が出ない。それどころか、ローディング画面が出たまま止まってしまう。デバッグすると、WebAudioのcontextがnullになっている。これは悲しい。色々試したけどAndroidではどうも音声はダメそうなので、tm.sound.WebAudio.isAvailableが trueでない時は一切音を鳴らさない様に変更した。この問題が無ければ十分使えると思っただけに、残念。



● 結論


- アニメーションはあまり複雑な事をやらなければスマホでも結構使える。
- PhoneGap Developerアプリを使えば開発が捗る。
- でもAndroidでは端末によってWebAudioへの対応がまちまちで、かなりの確率で音が出ないのがなんとも残念。
- iOSまたはPCをターゲットにして作るなら十分選択肢の一つになり得ると思う。
- tmlib.jsは便利!これからも使いたい。









 

2014年8月14日

JavaScriptでスマホゲームアプリを作るための開発環境いろいろ

● とりあえず何か作ってみないと始まらない


最近、次のスマホアプリを何で作ろうかと真剣に悩んでいる。既にCocos2d-xのC++版で2つほどアプリを作って公開したけど、やっぱり出来ればJavaScriptが使いたい。

悩んでばかりいても仕方がないので、とりあえず下の6つの環境でサンプルゲームを作って試してみようと思う。



PhoneGap (Apache Cordova) 


WebViewをラップしてネイティブアプリとして動作させる。
ゲームを作るならCanvasを簡単に扱うためのライブラリを使うと便利。

ライブラリには CreateJSenchant.jstmlib.jsArctic.js ... などがある。

将来的にはWebGLがもっと普及するとCanvasよりも格段に描画が高速になるらしいけれど、現状ではまだ実アプリで使うには早いみたいだ。
WebGLことはじめ
http://www.slideshare.net/hirumakazuya/webgl-35833170?next_slideshow=1

簡単なパズルゲーム程度であればおそらくCanvasでも大丈夫なのではないかと思う。(やってみないと分からないけれど。)

最近、Visual Studio 2013 (Update 2以上)の拡張機能としてPhoneGap(Cordova)対応が追加されたので、今回はこれを使ってみようと思う。
Multi-Device Hybrid Apps for Visual Studio 2013



Monaca 


PhoneGapをベースにしたWeb上の開発環境。PhoneGap/Cordovaのインストールや設定を一切しなくてもブラウザさえあればすぐに使えるのが素晴らしい。実機でのデバッグもUSB接続不要で簡単に出来て便利。

Monacaのサンプルを見ると Pixi.js を使ったブロック崩しゲームがある。これは、と思って実機で試してみた。結果、Nexus7(2012, Android 4.4.2)ではスムーズに動くもののGalaxy S3(Android 4.4.2)だとカクカクしてほぼプレイ出来ない状態だった。おそらくNexus7ではWebGLが有効になっていてGalaxy S3ではなっていないからだと思うけれど、Canvasだとやっぱりゲームアプリは無理なのか、と不安になる。ただ簡単なパズル系のゲームだったらどうなのか、その辺りを試してみたい。




Herlock 


JavaScriptからネイティブのOpenGLを扱える様にするフレームワーク。
Monacaと同様にブラウザさえあれば開発が出来る環境が用意されているので開発環境をローカルにインストールする必要はない。HerlockViewerというアプリを実機にインストールしておけばネットワーク経由でスクリプトの更新やデバッグログの確認が可能。
個人的にはかなり期待大。



Titanium 


Lanica Platino Engine」という拡張機能(有料・79.99ドル/年)を使うとOpenGLを使って高速に動くゲームアプリの開発が可能になるとの事。少し前までは年間800ドルぐらいしたと思ったけど、それと比べると今はかなり安くなったのでちょっとトライして見ようかと思う。



Cocos2d-JS 


スマホ用ゲームアプリ開発の大本命。
C++版では既にいくつかアプリを作ったので、次はJavaScript Bindingでどこまで開発が速くなるのか試してみたい。



Unity 


こちらも言わずと知れた超有名ツール。C#のイメージが強いけれど、JavaScriptでも開発出来るという事なので今回初めてじっくりと触ってみようかと思う。




以上、実際にサンプルアプリを作ってみてどうだったかは、これから少しづつ書いて行こうと思う。
またそれぞれの環境で下記の点についてもざっと調べておきたいと思う。

  • 多国語対応の方法(端末の言語設定によって画像や文字列を切り替える)
  • 広告(主にAdMob)の挿入方法
  • アプリ内課金の実装方法







 .

2014年1月8日

2年前に作ったAndroid用オセロゲームを真面目に改善した時のメモ


コンピュータの思考ルーチンの強化


得点テーブルを使うのは序盤のみ。
自分の全滅は最低の評価、相手の全滅は最高の評価。

中盤は独自の評価関数を使う。
  •   自分が打てる場所を多く、相手の打てる場所を少なく。
  •   確定石のプラス評価。
  •   Wingのマイナス評価。
  •   X打ち、C打ちのマイナス評価
終盤は完全読み切り。
ゆらぎ(Randomness)の実装。(毎回同じ手を打たない様に。)

Javaコードのパフォーマンス改善


盤面のオブジェクトを手番が進むたびにコピーする代わりに、事前に60要素の配列を準備して入れておく様に変更。
これだとUndoして一つ前の状態に戻すには配列のインデックスをマイナス1するだけ。

盤面の状態を表すのにオブジェクトの配列ではなくintの配列を使う。(System.arraycopyが使えるので高速。)

オブジェクトの生成を極力避ける。
  •  Pointオブジェクトは最初にnewしてset()メソッドで使い回す。
  •  ArrayListは最初にfinal修飾子付きでnewしてclear()で初期化して使い回す。

ループの終了判定に.size()や.lengthを参照しない。


広告の表示方法への工夫


ゲーム中は表示せず、終了後にふわっと現れる様に。


UIの改善


コンピュータ思考中のプログレス表示と処理中アイコン表示を追加。


JUnitを使った単体テスト


思考ルーチンのデバッグには単体テストが不可欠だった。




以上

2013年11月6日

子供向けにぜひおすすめしたい算数アプリ4選

cocos2d-x を使って子供向けの算数ドリルのアプリを作ろうとしていて、そのための参考に既存のアプリを調べていたら「これはすごい!」と思えるものがいくつか見つかったのでメモしておこうと思う。

Google Playで「算数」や「Math」で検索して大体200位ぐらいまでの結果の中から良さそうなものを選んで、かれこれ40個ほどをインストールして実際に動かしてみた上で厳選した結果なので、子供向けの算数アプリを探している方にはぜひ参考にして頂ければと思う。



第4位


Math Is Fun:陽気な数学


グラフィックがいい味を出している。ドリルというよりはパズル的。結構考えないと行けないのでどちらかと言うと高学年向けかも。大人でも遊べる。

Android app on Google Play  




第3位


Mathemagica Free - Kids Math


独特のグラフィックで最初はとっつきにくい感じがしたけれど、やってみるとなかなか面白い。問題のパターンが多くて、よく考えられている。
算数を始めたばかり、というレベルから高学年まで幅広いレベルに対応した問題が用意されているので、ぜひ有料版を買って長く遊びたい。

Android app on Google Play 




第2位


おサルさんの算数 ― 空飛ぶアドベンチャー


最初にこれをやってみた時は感動した。きれいなグラフィックと軽快な横スクロールでシューティングゲーム風のプレイは斬新だ。
子供はきっとのめり込むと思う。

Android app on Google Play  




そして一番「すごい!」と思ったのはこれ!


第1位


Hudriks Math For Kids


『美しいグラフィック、3Dアニメーション、特殊効果が、小学校に通うあなたのお子様にとって、算数の学習を忘れられないほど楽しいものにしてくれます。』

確かに美しく描かれたキャラクターと背景のグラフィックが素晴らしい! キャラクターが飛び跳ねるアニメーションの時にはちゃんと影の大きさも変わる。このクオリティの高さにはただただ脱帽。(見た感じ多分開発環境はUnityだろうな。) 
ワクワクさせられる音楽も良い。
ストーリーモードでは面倒な設定やレベル選択の必要も無く簡単な問題から自然に難しい問題に変わっていく辺りも良く考えられていると思う。

Android app on Google Play