Cordova Windows UAP Content-Security-Policyでリソースがディレクティブに違反しました

画像などのURLをバインドすると CSP違反というエラーが出て読み込めませんでしたが、よく見ると画像のパスが unsafe:ms-appx-web://**** とunsafe:がついています。
これはangularjsがつけたものですので、compileProvider.imgSrcSanitizationWhitelist でms-appx-webを追加してあげます。

Cordova Windows Universalアプリ開発 APPHOST9626

/ja/****.html や/en/*****.pngを呼ぼうとするとこのエラーが出ます。

言語が入ったパスを使ってはいけないようです。

Microsoftのドキュメントで解決策はリネームしてくださいとなっています。(もしくは多言語化の仕様に乗っとるか)

cordovaでWindows Universal アプリを作成 感想

ios,android向けのCordovaアプリをwindows universalアプリに対応した際のメモです。

crosswalkもwindowsに対応しているようですがwindows10の１バージョンの対応ですので今回は使わずに対応しました。

感想

• 情報の入手[bad] 
• Windows Universalアプリの作者も少ない中でさらにCordovaなので情報がとても少ないです。
• 対応の手間[bad] 
• AndroidをiOSに対応するよりも面倒でした。市場がとても小さいことを考えると対応の必要があるかを考える必要があると思います。
• プラグイン[bad] 
• windowsに対応しているプラグインであってもwin10への対応を既に捨てて8.1のみであることがあります。
• バグ[bad]
•  アニメーションにジャギーが出る。処理落ちで画面が化けている。
• ビルドしているとVisualStudioのソリューションファイルが時々壊れて初めからになる。
• なぜかパッケージの翻訳に日本語,英語に加えていつも「オランダ語」が含まれる。
• 開発者向けのWebページに不具合が多い。(特にEdge,IE以外を使った場合)
• 処理速度[good] 
• PCであることを考慮してもアプリの起動が早いです。メモ帳を開くぐらいの感覚で使ってもらえそうです。
• 公開の手間[good]
• 公開向けのパッケージの作成はとても親切なので、迷わずに行えました。
• アプリの説明やスクリーンショットは他のストア共通化できるものが少なかったですが、画像サイズなどが柔軟で作りやすかったです。細かく説明したい人にも、簡単に説明したい人にも親切な設計でした。
• 審査[bad]
• 申請から１時間で審査が通りました。極めて迅速です。ストアのWebページへの掲載は６時間ぐらいはかかりました。アプリによっては審査合格後２日経っても未だに掲載されません。
• ダウンロード数[Ummm]
• Androidでそこそこのダンロード数のアプリであってもwindowsストアではほぼありません。自分自身も一度もストアからダウンロードしたことないですし..
• クラッシュ[Ummm]
• クラッシュの報告率が極めて高いです。Windows10の１バージョンということでテストは楽かと思っていましたが、いろいろなテスト環境が欲しいところです。

最初に知っておくこと

• local context, web context(cordovaの記載ではremote mode)による制限

ビルド,実行

cordova build windows

cordova run windows

アーキテクチャの指定が必要な場合

cordova run windows --archs="x86"

windowsのターゲットを指定する場合 uap(universalアプリ)

--appx=uap

ビルドを行うと/platform/windowsにvisual sutdioのソリューションファイルができます。(CordovaApp.sln)

config.xml

ターゲットのwindowsのバージョン(指定しないとwin8.1も入ってくるようです)

<preference name="windows-target-version" value="10.0">

Angularjsを使ってwin8.1もターゲットにする場合

エラーが出て実行できないのでMicrosoftから出されているライブラリが必要です。

https://github.com/MSOpenTech/winstore-jscompat

(win10.0のみをターゲットにしたほうが良いと思います。)

cordovaのプラットフォーム,バージョンをjsで取得する

プラットフォーム取得

cordova.platformId

//ex: windows

バージョン取得

cordova.platformVersion

//ex: 4.1.0

iTunesでiosアプリのファイルを共有

Cordovaに限った話ではありません。
アプリで作成したファイルをiTunesを使ってやりとりをする場合はplistファイルへ設定を行います。

platforms/ios/{アプリ名}/{アプリ名}-info.plistをエディタで開いて以下のキーを追加

<key>UIFileSharingEnabled</key>
<true/>

もしくは

 xcodeでプロジェクトファイルを開いて Resources/{アプリ名}-info.plistを開いて「Application supports iTunes file sharing」を追加してvalueをYESに設定

CordovaでMac OSXのアプリを作成する

platform listで以前からosxの文字があり気になっていましたので、画面を表示するところまで行ってみました。
CordovaのWebサイトにもOSXの記述はないためサポート対象ではないようです。また、ほとんどのプラグインが使えないので実質オフラインでブラウザを表示しているだけの状態です。

1. 画面を表示するまでの手順

参考 Github cordova-osx

cordova create hello-osx org.eniblo.cordova.osx HelloOSX

cd hello-osx

cordova platform add osx@3.4.1 --save

cordova run osx

アプリ画面

右クリックで再読み込みボタンが表示されました。

(この時点でストアの審査は難しそうです)

dockにはアイコンが表示されています

iphoneのcordovaアプリはPCのsafariで認識して開発コンソールを表示できますが、このosxのアプリはリストに表示されませんでした。

2. リリースファイルの作成

ドキュメントには書いてありませんでしたが推測で行いました。

cordova build osx --release

3. サポートされている?プラグイン

• Fileプラグイン

4. 感想

以下ができるとUIを簡単に作れるという点からもいろいろと使えそうです。

• メニューを操作するプラグイン
• コマンドを実行するプラグイン

Onsenui 日付ピッカー

Framework7のようにスライドするものは作れませんでしたがツールバーで前後に移動するものは作ることができました。Githubに置いておきます。

タブレット

スマホ