琴線探査

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!

追記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(appDi...

カスタムプラグイン開発のワークフローが必要だ！ 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 Ass...

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が得られるまで提出ができないようなバリデーションを行っていただきたい。

AngularJS内蔵のjqLiteを使うことにしたが、DOMElementを取得するのにdocument.getElementById()というのは使いにくい場合もある。 ところで、jQueryライクなものとしてdocument.querySelector()もあるけど、状況はどうなのか？と。 Can I use... Support tables for HTML5, CSS3, etc な〜んだ。全然大丈夫じゃん！なら、もはやjQueryも必須ではないし、getElementById()も要らないじゃん！と思ったが… document.querySelector - Web API インターフェイス | MDN 【訳注: 上記ではクラスセレクタを用いた検索を例示していますが、この様な単発のクラス名の場合は getElementsByClassName() メソッドを用いた方が高速な動作となります。また、ID セレクタ ( # ) を対象とする検索も可能ですが、その場合は getElementById() メソッドを用いた方が高速です。対象セレクタが流動的で有る場合や、または隣接セレクタなどによるコンビネーションセレクタでの複雑な検索の場合に於いて、querySelector() や querySelectorAll() は真価を発揮します。】 ということなので、要らないということは無いようだ。 つまり、複雑なクエリ条件の場合はquerySelector()、単純な場合はgetElementById()とかgetElementsByClassName()と使い分けをした方が良いと。

できるだけページを軽量化するためにjQueryを読み込まないようにしようと思った。しかし、jQueryは便利なので捨てがたいなと思っていた。そんな時、angular.element()というメソッドがあることに気がついた。 AngularJS: API: angular.element AngularJSは内部でjqLiteというjQueryのサブセット版を持っていて、angular.element()はそれを使ってjQueryのオブジェクトを返してくれるらしい。 ただ実際に使ってみると、jQueryを読み込んだ場合とそうでない場合で動作が違うのでハマった。 jQueryを読み込んでいる場合はこのように#targetを取得できるが、そうでない場合、つまりjqLiteのみの場合は取得できない。 var $elm = angular.element('#target'); 要するにjQueryを読み込んでいる場合は次と等価だ。 var $elm = $('#target'); 一方、jqLiteのみの場合はこのようにする。 var elm = document.getElementById('target'); var $elm = angular.element(elm); Wraps a raw DOM element or HTML string as a jQuery element. というのはそういう意味だったのか！とやっと分かった(^^);

先日、nodejsで9-patch画像を自動生成する方法について書いた。 琴線探査: nodejsで9-patch画像を自動生成する「FourSide1px9patcher」 その後、このコードを使いやすいようにnodeモジュール化した。 junkoro/four-sides-1px-9patcher ここからが本番。ionicプロジェクトでsplash.pngを自動的にリサイズしつつ9-patchするコードを書くときがｷﾀ(・∀・)!! すでにnodeモジュール化して公開済み。 junkoro/make-9patched-splash-ionic インストール方法やコード内容についてはgithubに譲るとして、ここでは開発時に困ったことについて書いておきたいと思う。 9-patchについては開発済みだったので何の問題も無かったが、画像のリサイズが困った。node-canvasでもリサイズはできるのだが、リサイズ後の画像のクオリティーがとても使えたものではないのだ(´・ω・`) この問題はブラウザ上のJSでも同じで、以前に研究したことがあった。 琴線探査: HTML5 Canvasで画像のリサイズするならコレ！「JS-Image-Resizer」 というわけで、再びこの「JS-Image-Resizer」を使わせていただくことにした。結果は上々だ。 ただ、「JS-Image-Resizer」はブラウザ用のJSコードなので、node用に多少変更する必要があった。と言っても、「modules.exports」行の追加とエラーになる部分（WebWorker部）をコメントするくらいだったが。 これでこの件にコメントすることができるようになった。 Bad splashscreen ratio with Android using CLI new feature - ionic - Ionic この件は自分も困っていたが、他にも多くの人が困っているようなので、このコードが助けになればと思う。