投稿

ラベル（HTML5）が付いた投稿を表示しています

iPhoneXかどうかをJavaScriptで判断するには？

イメージ
まずUserAgentで判別できないかと考えた。しかし、 mozilla/5.0 (iphone; cpu iphone os 11_1 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b93 という感じなので無理。 cordova-plugin-deviceでもダメ。 で、世間ではどのような議論が行われているかというと、 ios - Detect if the device is iPhone X - Stack Overflow 画面の幅高さで判別しろとか、ネイティブ側で struct utsname systemInfo; uname(&systemInfo); 的なことをしろとか、safe-area-inset-*があるかどうかで判別しろとか、そういった議論が行われている。 今回はJavaScriptで判別する必要があるので、ネイティブ側から情報を取得する方法は使えない。 画面の幅高さで判別する方法は、現状では問題無いだろうが、端末ごとに幅高さが変更される可能性があることを考えると、あまり上手い方法とは言えない。 safe-area-inset-*があるかどうかで判別するのは有効そうだ。safe-area-inset-*を持つということは「ノッチ」がある端末ということなので、iPhoneXに限らずEssential Phoneなども検出できるだろう。 問題はJSからどのようにsafe-area-inset-*を取得するかだ。 WEBページをiPhoneXに対応させる方法として、CSSで「constant(safe-area-insets-*)」を使うということはわかっているが、これをJSで取得するにはどうするのか？ window.screenやdocument.documentElement.styleのプロパティーをくまなく見てみたが、safe-area-inset-*を取れそうなプロパティーは存在しなかった。 そこで、safe-area-inset-*のpaddingを持つダミーエレメントをテンポラリにDOMツリーに追加し、値を取得した後すぐに削除するというdirtyな実装をした。 /** * セーフエリ...
コメントを投稿
続きを読む

AppleのAppStoreにCordovaアプリを提出してリジェクトされたら…これをチェック！

イメージ
AppleのAppStoreにCordovaアプリを審査に提出したらリジェクトを食らった。曰く。 During review, your app failed to launch on iPad running iOS 9.2.1 and iPhone running iOS 9.2.1 on both Wi-Fi and cellular networks. Specifically, when we selected the application on the Home screen, the app displayed a launch image then quit unexpectedly. This may be because iOS 9 uses a watchdog timer for applications; if an application takes too long to complete its initial startup, the operating system terminates the application. 要するに「起動しない」と。iOS9は「watchdog timer」という、起動に時間がかかり過ぎるアプリを自動的に終了させる機能があるので、そのせいかもしれないとのこと。 結論から言うと、 Runpath Search Paths＞Releaseにパスが設定されているか確認せよ！ ということである。watchdogは関係無かった。単に必要なライブラリがリンクされていないせいでクラッシュしていただけだった^^; もちろん審査に提出するにあたりアプリが正常に起動することは確認している。デバッグモードではね。しかし、 リリースビルドで起動確認することをすっ飛ばしていた。慢心があった。 まずこれが敗因の一つ。 リリースビルドは、Xcode>Window>Organizer>Exportで抽出できる。抽出方法がいくつかあるが、今回のようなテスト目的なら「Sava for Development Deployment」で抽出する。 抽出したリリースビルドは、Xcode>Window>Devicesで各実機にインストールできる。 もうひとつの敗...
コメントを投稿
続きを読む

SwiftでCordova（ionic）のpluginを開発するには？

イメージ
Swiftでcordovaのプラグインを開発することはできるのだろうか？ このあたりを見ると開発できそうだ。 Chris Dell - Software Developer :: Writing an iOS Cordova plugin in pure Swift How to write Cordova plugin in Swift? - Stack Overflow やってみよう。 今回はChrisさんのコードを参考に、HTMLからネイティブに小文字のメッセージを送って大文字変換されたメッセージを受信するというサンプルを作る。これが完成形。 ビルドシステムはionicを使うが、プラグイン部分の開発はcordovaでも通用するはず。 まずはblankプロジェクトを作ろう。 $ ionic start CDVEchoPlugin blank CDVEchoPlugin/www/index.htmlをこのように編集する。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>CDVEchoPlugin</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="...
コメントを投稿
続きを読む

これがAngularJSの$apply()や$digest()が低速な理由のひとつか？

イメージ
昨日書いた記事 「 琴線探査: Dr. GlebのAngularアプリ最適化TIPSまとめ 」 ã«、try-catchがあるとV8では最適化されないため処理が遅くなると書いた。 今日は自分で書いたアプリをプロファイルしてみた。このように、$apply()や$digest()に相当な時間がかかっていることが分かった。 これは予想通りだったが、驚いたのは$apply()や$digest()でtry-catchを使っているらしいことだ。 「Not optimized: TryCatch Statement」とツールチップが出ている。ひょっとすると、これが$apply()や$digest()が低速な理由のひとつなのかもしれない。 だとすると、かなり根本的なレベルで高速化できていないことになる…内部的にtry-catchを使わないようにできないのかなぁ(´・ω・`)
コメントを投稿
続きを読む

Dr. GlebのAngularアプリ最適化TIPSまとめ

Dr. Glebのブログ記事 Improving Angular web app performance example. | Better world by better software を簡単にまとめておこうと思う。 try-catchはできるだけ使わない V8ではtry-catchを使った処理は最適化されないので、特にループ処理ではできるだけ使わないようにする。Primesの例ではtry-catchを無くしただけで全体の処理は2倍以上、メソッド単体では200倍近く高速化している。 追記15.08.26 ：$apply()や$digest()でtry-catchが使われていることが判明(ﾉ∀`) 琴線探査: これがAngularJSの$apply()や$digest()が低速な理由のひとつか？ ダイジェストサイクルをできるだけ速くする $scope.$apply()した時のあれ。ダイジェストサイクルはフレームレートと同じで、長くなるほどUIが固まってしまうことになる。短くする方法は色々ある。 バインドさせる変数をできるだけ少なくする ng-modelとか$scope.valueとか。バインドさせる変数の数だけダイジェストサイクルは遅くなる。 filterはできるだけ使わない filterはダイジェストサイクルを遅くさせる。「{{ "index" | lowercase }}」的な無駄なフィルターはもってのほか。 one-time-bindingを使う サーバーから持ってくるデータは大抵の場合は大量だ。これをページにレンダリングするために2wayバインディングを使ってしまうとダイジェストサイクルが大幅に遅くなる。 そこでAngular1.3から導入されたone-time-bindingを使う。これを使えば、始めだけはバインディングするのでダイジェストサイクルに影響するが、その後は影響が無くなる。 例えば「{{name}}」としている所を「{{::name}}」とするだけでone-time-bindingになる。 AngularJS: Developer Guide: Expressions React的なレンダリング方法に変更する 特にtableの中身などの反復...
コメントを投稿
続きを読む

CSSのtranslate3dをパースして数字の配列にするには？

CSSのtranslate3dは例えば translate3d(5, -10, 0) のような文字列になっているが、このままでは計算するのに使いにくい。 そこで、これをパースして数字の配列にするにはどうすればいいだろう。例えば、このような正規表現を使うというのはどうでしょう？ /** * CSSのtranslate3d文字列を数字の配列に変換して返す */ function parseTranslate3d(string) { var array = string.replace('translate3d', '').match(/-?[\d\.]+/g); for (var i = 0; i
コメントを投稿
続きを読む

ionicでcrosswalkのビルド後のapkがarmv7とx86に分かれた件

最新版のionicでは、crosswalkのビルド後のapkがarmv7とx86に分かれるようになった。 これによって、armv7とx86両対応のために40MB以上になっていたアプリサイズが20MB程度まで軽量化された。 喜ばしい事ではあるけれど、リリース時にとても混乱してしまった。 リリーススクリプトを書いているのだけど、これまでは一つのapkにサインすればよかったものが二つのapkにサインする必要がでてきて、スクリプトがまともに動かなくなってしまったからだ。 しかし、このことに気づいた後は特に問題は無かった。 Google Playでは、すでに一つのリリースで複数のapkをアップロードできるようになっているので全く心配は無い。
コメントを投稿
続きを読む

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!
コメントを投稿
続きを読む

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(appDi...
コメントを投稿
続きを読む

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 Ass...
コメントを投稿
続きを読む

脱jQueryするにはdocument.querySelector()もあるけど状況どう？

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()と使い分けをした方が良いと。
コメントを投稿
続きを読む

angular.element()のjQueryを読み込んだ場合とそうでない場合（jqLite）の動作の違い

できるだけページを軽量化するために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. というのはそういう意味だったのか！とやっと分かった(^^);
コメントを投稿
続きを読む

ionicプロジェクトのsplash.pngを自動でリサイズしながら9-patchする「make-9patched-splash-ionic」

先日、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 この件は自分も困っていたが、他にも多くの人が困っているようなので、このコードが助けになればと思う。
コメントを投稿
続きを読む

nodejsで9-patch画像を自動生成する「FourSide1px9patcher」

イメージ
追記15.05.05 ：使いやすいようにnodeモジュール化した。 junkoro/four-sides-1px-9patcher 9-patchツールの現状 〜 開発意図 前から9-patchを作るのは面倒だし問題だと思っていた。そこで改めて現状を調べてみたが、やはり9-patchを作るには ・Android SDKのdraw9patch ・Android Asset Studio - Simple Nine-patch Generator ・Eclipseプラグイン「 Draw 9-patch Tool 」 ・Fireworksなど汎用の画像編集ソフトを使う という感じ。nodejsで、特にgulpで9-patchを自動化できるツールが無いか探したが、これくらい。 gulp-9-patch このツールはスケーリングしたり非9-patch化する機能しかなく、画像を9-patch仕様に加工することはできない。 開発要件 やはり独自開発するしかないか…もう我慢ならん！こんな ('A`)ﾏﾝﾄﾞｸｾ-ことイチイチやってられるかっての！ ただ、なぜこのような状況なのかは理解できる。9-patchは柔軟性が高く、画像によってパッチすべき場所は変わる。これが自動化ツールが存在しない理由なのだろう。 しかし、画像を作る側が9-patchしやすい条件を作ればどうだろう？たとえばこんな画像で、単純に4辺の周辺1ピクセルを画面にあわせて伸ばすように9-patchすることを考える。 画像はionicのデフォルトスプラッシュスクリーン用の画像 この条件を満たすケースは意外と多いのではないかと。自分的には自動化するためにデザインを犠牲にする覚悟である(^^); このようなことをしてくれるCLIツールを、後々ionicなどgulpやgruntをビルドシステムとして使っているようなものに組み込むことを考えて、nodejsで開発する。 nodejsでの画像処理をどうする？ 〜 技術調査 調べると、みんなよくimagemagickとかを使ってやっているようだが、できればコマンドラインツールに依存するような形にしたくない。 というわけで、前から名前だけは知っていたけれど、よく調べたことがなかったこれを使ってみよう。 ...
コメントを投稿
続きを読む

PCブラウザでネットワーク接続の有無を検知するには？

PCブラウザでネットワーク接続の有無を検知するにはどうしたらいいだろう？ 一応「navigator.onLine」というAPIはある。 window.navigator.onLine - Web API インターフェイス | MDN ブラウザのサポート具合を調べてみると、全てのブラウザというわけにはいかないが、まあまあサポートされていることがわかる。 Can I use... Support tables for HTML5, CSS3, etc しかし、このAPIには色々と問題があることがすぐに分かった。 javascript - How to detect online/offline event cross-browser? - Stack Overflow … Chrome and Safari will detect when you go "offline" automatically - meaning that "online" events and properties will fire automatically when you unplug your network cable. Firefox (Mozilla), Opera, and IE take a different approach, and consider you "online" unless you explicitly pick "Offline Mode" in the browser - even if you don't have a working network connection. … 要するに、ChromeやSafariならネットワーク接続が切れた時点で自動的にオフラインイベントが来るが、FirefoxやOpera、IEはブラウザ側に「オフラインモード」という機能があるので、navigator.onLineの値は実際のネットワーク接続に有無ではなく「オフラインモードかどうか」の値になってしまう、という話。 つまり、全くもって役に立たない！ ではどうするか？ StackOverflowでも議論されているが、要するに「...
コメントを投稿
続きを読む

ツイートボタンをリロードする（ページが読み込まれた後に動的に再作成する）には？

ツイートボタンはこのページで自由にカスタマイズして作成できる。 Twitter Buttons | About 作成したコードをページに埋め込むと、そのページをブラウザでロードしたときに表示されるのは知っての通り。 基本的にツイートするアドレスや内容などはページをロードする時に決まっている必要があるが、ページをロードした後でそれらを変更するにはどうしたらいいだろうか？ ブログやホームページなどの静的なサイトで問題になることはあまりないだろうが、AngularJSなどで構築したシングルページアプリケーションでは大いに問題になり得る。 まず、ツイートボタンを表示するホルダーをこのように作成する。 <!-- ツイートボタンホルダー --> <div id="tweetButtonHolder"> </div> <!-- ツイートボタン作成サイト https://about.twitter.com/resources/buttons#tweet でコピーしたscriptタグ --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> このscriptタグは window.twttr を生成する。このオブジェクトは様々なツイートボタンを作ることができる。 Scripting: Factory Functions | Tw...
コメントを投稿
続きを読む

AngularJSのコードをminify対応にするためのベストプラクティス

AngularJSはDependency Injectionをするので書き方によってはminifyした時にコードが破損してしまう場合がある。 例えばこのようなコードは破損する。 var app = angular.module('app', []); app.controller('AppCtrl', function ($scope, $location, $interval, $timeout) { } ベストプラクティスはこれ。（だと思う） var app = angular.module('app', []); app.controller('AppCtrl', ['$scope', '$location', '$interval', '$timeout', function ($scope, $location, $interval, $timeout) { } 面倒でもfunctionの引数の定義の通りをfunctionの前に記述する。 このことはAngularJS公式チュートリアルの「A Note on Minification」に書いてあった。 AngularJS: Tutorial: 5 - XHRs & Dependency Injection こちらにも同じ議論がある。 javascript - Angularjs minify best practice - Stack Overflow
コメントを投稿
続きを読む

キーボードの記号フォント「Keyboard-JP」（n-yujiさん作）をWEBサイトで使う方法

イメージ
先日、このような記事を見た。 keyboard-font·ã‚­ãƒ¼ãƒœãƒ¼ãƒ‰ã‚’表現した記号フォント MOONGIFT 元々はn-yujiさんの作品だ。 n-yuji/keyboard-font ボタンアイコンのツールチップなどでのキーボードショートの説明に使うのにちょうどいいなと思ってWEBサイトで使ってみようとしたが、正常に表示できるようになるまでに意外と苦労したのでログを残しておこうと思う。 まずは デモ（Keyboard-JP Web Example） 。こんな感じの表示になる。 苦労した最大のポイントは「リガチャー」の変換がうまくできなかったこと。 「リガチャー」というのは「合字」のことで、例えば上の例だと「POWER」とテキストで指定した場合に電源マークに変換されるようなことを言う。 最終的なフォント指定のCSSはこれ。ポイントは「font-feature-settings」と「text-rendering」プロパティー。 HTMLはこんな感じ。HTML内では左の列と右の列で同じ文字列を入れているが、ブラウザでの表示は異なることがポイント。 その他にどのような文字を使えるかは、n-yujiさんのオリジナルパッケージ内のPDFを見るとわかる。 ほとんどの文字はリガチャーによって変換されるが、一部の文字、例えばMacのコマンドキーマークは右に「U+2318」と記述されている。HTMLでこれを指定するには「&#x2318;」と指定する。 最後に、IEで表示するためにはWOFFファイルが必要だ。OTFファイルを下記のソフトでWOFFに変換する。 WOFFコンバータ - 武蔵ソフト 上のフォント指定のCSS（Keyboard-JP-Regular.css）にはすでにWOFFファイルの記述もしてあるのでIEでも動作を確認できる。 プロジェクト全体はここでダウンロードできる。 junkoro/Keyboard-JP_WebExample
コメントを投稿
続きを読む

ionic frameworkのWebViewとしてCrosswalkを使う

イメージ
Use Crosswalk With Ionic Framework Android Apps ふむ。どうやらionicでもWebViewとしてCrosswalkを使えるらしい。実際にやってみよう。 Crosswalkのダウンロード まずはこちらからCrosswalkをダウンロード。 Crosswalk - build world class hybrid apps Canaryはちょっと怖いし、Stableはちょっと保守的過ぎるので、Betaチャンネルを選んだ。アーキテクチャは欲張らずにARMのみにした。ほとんどのAndroid機はARMだし、ARM+x86だとapkが重くなるそうなので。 追記14.12.03 ：Stableをダウンロードすべし。Canaryは動作せず。Beta版は動作はするがcordovaのAPIが動かないので。 Beta版で動かしたときのコンソール出力 ----追記ここまで Crosswalkの組み込み 新しくプロジェクトを作ってCrosswalkを組み込む。 $ ionic start IonicCrosswalk blank $ cd IonicCrosswalk/ $ ionic platform add android $ rm -rf platforms/android/CordovaLib/* $ cp -a /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/framework/* platforms/android/CordovaLib/ $ cp /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/VERSION platforms/android/ $ cd platforms/android/CordovaLib/ $ android update project --subprojects --path . --target "android-19" $ ant debug $ cd ..（androidディレクトリまで戻る） $ vi AndroidManifest.xml WIFI_STATEとNETWORK_STATE...
コメントを投稿
続きを読む

Cordova/PhoneGap開発を加速するライブリロードを何とかする　〜　「ionic」ç·¨

イメージ
これまでCordova/PhoneGapのライブリロードについて色々と調べてきた。 琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする　〜　「PhoneGap Developer App」ç·¨ 琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする　〜　「LiveReload + GapReload plugin」ç·¨ 琴線探査: 「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発 琴線探査: 「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発 ionicのやり方は非常に簡単だ。 Live Reload All the Things: Ionic CLI's Latest Features $ ionic [run|emulate] [options] [--livereload|-l] .... Live Reload app dev files from the device [--consolelogs|-c] ... Print app console logs to Ionic CLI [--serverlogs|-s] .... Print dev server logs to Ionic CLI $ ionic run android --livereload --consolelogs --serverlogs たったのこれだけ。アプリにプラグインを組み込んだり、LiveReload的なサーバーソフトなど、他のものは全く必要無い。 おまけにconsole.logも表示できる。Uncaught Reference Errorのようなエラーメッセージも表示できた。 これまで試した中では最も簡単で安定していると感じる。
コメントを投稿
続きを読む