2015年6月27日土曜日

Angular2.x系が出るまで1.x系でES6やTypeScriptと共存させる方法についてのビデオ

Angular2.x系が出るまで1.x系でES6やTypeScriptと共存させるにはどうしたらよいのか?

この疑問に、このビデオ「Getting Ready for Angular 2.0」がある程度答えてくれていたのでメモ。



55:34あたりからThe question is…「But What Do We Do Now?」と始まる。そう。そこが聞きたかった!

ES6って何となく全く違う言語のような気がしていて、一体どんな風に書くの?と思っていた。

しかし、よくよく考えてみるとES6はES5の機能を受け継いでいるので、ES6で書いてもAngular1.x系は動くのである。というか、「ES5でES6の拡張機能が使えるようになったと考えた方がいい」ということに気づかされた。


例えば、これがおなじみの1.x系でのコントローラーの書き方だ。


そして、ES6と共存させて書くとこうなる。


より現実的には、このようにクラスをファイルに分けることになるだろう。


これを使う場合はこうなる。


その他、ディレクティブやNew Routerについてもメンションされている。

これらをヒントに、これからES6というかTypeScriptで書く実験をしてみたいと思う。

ES6はつい先日正式版になったばかりだ。ではES6を使い始めるのは一体いつか?それは今でしょう。

Thanks, Yuri Takhteyev!

2015年6月12日金曜日

ionicでインストールするcrosswalkを選択できない件

追記15.07.11:最新版のionic(1.6.1)では「ionic browser add crosswalk@バージョン」で指定通りインストールできるようになった。この記事も合わせて読むとionicの更新に依存することなくcrosswalkの最新版をインストールできるようになる。

琴線探査: ionicで最新版のcrosswalkをインストールする方法

----

最近ionicのCLIが1.5.0にバージョンアップしたのだが、その後platform/androidを削除してcrosswalkを再インストールしたら、localStorageに保存したはずの値がアプリの再起動時に保存前の状態に戻っているという動作になってしまった。

ChromeのDevToolsでは、crosswalkのバージョンは42.0.2311.135となっている。以前のバージョンが何だったのかは覚えていないが、このバグが出る前は確か41系だったような気がする。

「ionic browser ls」でインストールできるcrosswalkを見ると、crosswalk-liteが増えていたりするので多分アップデートされたと思う。

幸いなことに、ionicはcrosswalkのインストール時にバージョンを指定できるので、stableで一番古いものをインストールして実行し、再びDevToolsでバージョンを確認すると…全く変わっていない!

何かおかしい。ネットで調べると、どうやらcrosswalk-liteもインストールできないという話。

cordova - How to build android with Crosswalk lite using ionic-cli? - Stack Overflow

このページを参考に、「ionic browser add」で何をやっているのかソースを見てみることにした。場所としてはここ。

/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/browser.js

問題の場所はこの11行目だとわかった。



cordova 5.0.xがインストールされていると「Browser.installCordovaCrosswalk(appDirectory);」を実行するようになっていて、せっかく指定したバージョンを無視している!これではダメに決まってる。

そこで、11行目をコメントしてその下の処理に流してやるようにした。ついでにインストールしようとしているバージョンを表示するようにした。



これでcrosswalkの任意のバージョンをインストールできるようになった。

2015年6月11日木曜日

ionic(cordova)のカスタムプラグイン開発のワークフローを構築する

カスタムプラグイン開発のワークフローが必要だ!

ionic(cordova)のカスタムプラグインを開発するのはそれほど難しいことではない。しかし当然の事ながら、プラグインの開発は試行錯誤を重ねる必要がある。そのための円滑なワークフローを構築するのにかなり苦労したので、まとめておきたいと思う。

ここでは、ionic側からカスタムプラグインを叩いてネイティブのノーティフィケーションを表示するサンプルを作ろうと思う。とりあえずAndroid用を開発することにする。


ionicプロジェクトの作成

まず、ionicプロジェクトを作り、CordovaLib-debug.aarを作るため一度ビルドする。



AndroidStudioプロジェクトの作成

AndroidStudioで~/Documents/git/customplugin-androidに、パッケージ名ex.customplugin、Blank Activityを選択してプロジェクトを作る。

そして、このようなレイアウトを作る。




CordovaLib-debug.aarを組み込む。これはAndroidStudioでCordova関連クラスをimportするのに必要。

File>New>New module>Import .JAR or .ARR Packege>Next。

File Name: ~/Documents/git/customplugin/platforms/android/CordovaLib/build/outputs/aar/CordovaLib-debug.aar

からのFinish。

左のツリーでGradle Scripts>build.gradle(Module app)を開き、dependency部にCordovaLib-debugの記述を追加。



ここでCordova関連クラスをimportできるようにするために一度ビルド。Build>Rebuild Project。


ノーティフィケーションアイコンの作成

適当なサイズのアイコン画像(512x512程度、アルファ付き、塗りは白、アイコン内のパディングは極力少なく)を用意する。

その画像をこちらにアップロードしてDownload Zip。

Android Asset Studio - Icon Generator - Notification icons


ダウンロードしたic_stat_notif_icon.zipを解凍するとresフォルダができるので、その配下のフォルダを全てcustomplugin-android/app/src/main/resにコピー。

これでカスタムプラグインを作る用意ができた。


カスタムプラグインの開発(ネイティブ側)

File>New>Java Class>Name: CustomPlugin。

CustomPlugin.javaをこのように編集する。



MainActivity.javaをこのように編集する。



カスタムプラグインをネイティブで実行確認

Ctrl+Rで実行。


ボタンをクリックするとこのようにノーティフィケーションが表示された。


これでネイティブ側でのカスタムプラグイン開発は終了。ここからが本番。


ionicプロジェクトにカスタムプラグインを構築するフォルダを作成

ここではcustomplugin/plugins-custom/ex.custompluginとする。pluginsというフォルダが元からあるが、ここに作ってはいけない。pluginsはionicのシステムにマネージメントさせる。


ライブラリ(jar)をコピー

次にプラグインに必要なライブラリ(jar)をコピーしておく。



プラグインJSを作成

plugins-custom/ex.customplugin/customplugin.jsをこのように編集する。これがネイティブとの橋渡し役をする。


plugin.xmlを作成

plugins-custom/ex.customplugin/plugin.xmlをこのように編集する。



開発中のプラグインを素早くionicに反映させるgulpスクリプトの作成

次に、開発・編集したネイティブカスタムプラグインをionicプロジェクトへ素早く反映させるためのgulpスクリプトを書く。

まず必要なnodeモジュールをプロジェクトにインストールする。



ところで、ionicはビルド時にprepareを行うが、これはplatform配下に様々なファイルをコピーしたりする処理だ。hooks/after_prepare/010_add_platform_class.jsはそのprepare後に行われる処理。

カスタムプラグイン関連の処理はこのprepareの前に行わなければならないので、スクリプトをhooks/before_prepare/010_copy_custom_plugins.jsと作成してこのように編集する。



gulpスクリプトの動作確認

ここで「ionic prepare android」して次の項目を確認する。

  • plugins-custom/ex.customplugin/src/android/CustomPlugin.javaが存在するか?
  • platforms/android/src/ex/customplugin/CustomPlugin.javaが存在するか?
  • platforms/android/res/drawable-hdpi-v11/ic_stat_notif_icon.pngなどのリソースが存在するか?

これでAndroidStudioで編集したカスタムプラグインのソースをプラグインの追加と削除をせずとも即座に、また自動的にionicプロジェクトに反映させることができるようになった。


カスタムプラグインのインストール

ついにionicプロジェクトにカスタムプラグインをインストールするが、その前にplatforms/android/src/ex/customplugin/CustomPlugin.javaが存在するとインストール時にエラーになるので削除しておく。

そして「ionic plugin add plugins-custom/ex.customplugin/」でインストール。次の項目を確認する。

  • platforms/android/assets/www/plugins/ex.customplugin/customplugin.jsが存在するか?
  • platforms/android/libs/配下にandroid-support-v4.jarとandroid-support-v7-appcompat.jarは存在するか?
  • platforms/android/res/xml/config.xml内に「ex.customplugin.CustomPlugin」が存在するか?

asssets配下のcustomplugin.jsはprepare・ビルド時にplugins/ex.customplugin/customplugin.jsが毎回上書きコピーされる。before_prepareでplugins-custom配下のjs(マスター)をplugins配下にコピーしているのはそのためなので、編集はplugins-cutom配下のものを編集する。

java/jarファイルのコピーとplugin.xmlの設定によるconfig.xmlの変更はプラグインをインストールした時にしか行われない。jarの追加やplugin.xmlの変更は比較的少ないのでまぁそれでも良いが、javaファイルの変更は頻繁に行われるはずで、それではまずい。before_prepareでjavaファイルのコピーをしているのはこのため。


カスタムプラグインのアンインストール

ここで一度「ionic plugin rm ex.customplugin」でアンインストールして次の項目を確認する。

  • platforms/android/assets/www/plugins/ex.customplugin/customplugin.jsが削除されているか?
  • platforms/android/libs/内のandroid-support-v4.jarとandroid-support-v7-appcompat.jarは削除されているか?
  • platforms/android/res/xml/config.xml内の「ex.customplugin.CustomPlugin」は削除されているか?


カスタムプラグインの再インストールスクリプトを作成

plugin.xmlの編集やjava/jarファイルの追加などを行う場合にはプラグインのインストール・アンインストールを繰り返すことになるので、このようなスクリプトを用意しておく。



「chmod 744 reinstall-custom-plugins.sh 」で実行権限を与えておくのを忘れずに。


カスタムプラグインをionicで動作確認

これでカスタムプラグインの導入は完了!最後にionicプロジェクトでの動作確認をする。

www/index.htmlをこのように編集する。



www/js/app.jsをこのように編集する。



「ionic run android」でAndroidの実機で実行。するとこのように表示される。


「ノーティフィケーション表示」のボタンをクリックすると、このようにノーティフィケーションが表示される。


つまり、ネイティブアプリケーションと同様に、カスタムプラグインを使ってionicからノーティフィケーションを表示できるようになったわけだ。


ワークフローの再確認

ここで安心してはいけない。目的はあくまでワークフローの構築。カスタムプラグインを変更して素早くionicのプロジェクトに反映させられるかを確認しなくてはならない。

AndroidStudioに戻り、CustomPlugin.javaのshowNotification()メソッドの1行目に「Toast.makeText(context, "ノーティフィケーション表示", Toast.LENGTH_LONG).show();
」を追加してネイティブのトーストを表示してみよう。実行するとこのようになる。


さて、ionicでも同様に動作するだろうか?「ionic run android」で実行。するとこのようになる。


このように、カスタムプラグインのJavaソースを変更してネイティブで動作を確認しつつ、その後にコマンド一発でionicでも動作を確認できるようになったわけだ。


各プロジェクトのダウンロード

いや〜大変(^^);

customplugin(ionicプロジェクト)とcustomplugin-android(AndroidStudioプロジェクト)はgithubにアップしてある。

junkoro/customplugin
junkoro/customplugin-android

2015年6月2日火曜日

コンテンツのレーティング(IARC)が理由でアプリが不承認(リジェクト)される件 @ Google Play

Google Playにて、コンテンツのレーティング(IARC)が理由でアプリが不承認(リジェクト)された!不承認を通知するメールにはこんな文言が…

不承認の理由: Google Play コンテンツ レーティング ポリシーへの違反。


提出したアプリの性質からして、どう考えてもリジェクトされる理由が分からなかった。こんなことは初めてだ。しかし、しばらくすると自動的に承認された(^^);

原因は、「IARC認定」(Certificate ID)が得られる前にアプリを提出したことだと分かった。

IARCのコンテンツレーティング認定アンケートなど、アプリの掲載情報を入力すると提出可能になる。

しかし、実際問題としてはアンケートに答えるだけではダメで、IARCからCertificate IDのメールが来て、Google Play Developer Consoleが次のような状態にならなければ承認されないようだ。


12:37に行ったアンケートにはIARC認定のCertificate IDが無い。15:35のはある。

焦ってググったが、この件についての記事が見つからなかったので書いておくことにした。

同様の状態にハマった方は、焦らず、しばらく待ちましょう(^^);

Google Playには、Certificate IDが得られるまで提出ができないようなバリデーションを行っていただきたい。