ios10でシェアプラグインを使うとアプリが落ちる

シェアプラグインで写真などをシェアする先として端末の「写真」を選択するとiOS10ではアプリが落ちるようになりました。エラーメッセージは以下の通りでエラーの原因は明確です。

The app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.

infoPlistに以下のキーを設定する必要があります。

• Key: NSPhotoLibraryUsageDescription
• 説明：Privacy - Photo Library Usage Description
• Type: String
• Value: ここに記載された文章が、写真へのアクセスを求める際に表示されます
• どのような目的でアクセスするのかを書けばいいと思います。  

例：

<key>NSPhotoLibraryUsageDescription</key>

<string>対戦表などを写真アルバムに保存します</string>

説明文章を多言語化

上記では多言語化できないようなので、stringsファイルへそれぞれの言語を記載していきます。

infoPlist.strings のそれぞれの言語へ下記を記載

NSPhotoLibraryUsageDescription = "説明文を記載";

Cordova Admob proプラグインでエラーが出る場合は

(1)プラグインのアップデート
(2)platform rm android/ios , platform add android/ios で入れ直す
(3)cordova-plugin-extensionを以下の手順で最新にする

cordova plugin rm cordova-plugin-admobpro --save
cordova plugin add cordova-plugin-extension@1.5.1 --save
cordova plugin add cordova-plugin-admobpro --save

cordova-plugin-extensionはcordova-plugin-admobproの依存となっているため、本来であれば別々にいれる必要はないが、extensionの方を確実に新しいバージョンにする場合は上記手順で行う。
1.5.1は現在の最新なので適時変更する。

Phonon1.3.1 を UI Framework Catalogへ追加

活発に開発が行なわれているモバイル向けHTML5フレームワークとしてPhononがあります。MITライセンスで提供されており、軽量でかつ、Riot, Angularjs, Reactなどを自由に選べることが特長です。コンポーネントも一通り揃っており、IonicやFramework7を使うほどは大きくないアプリの開発には重宝しそうです。

ただし、見た目はAndroid マテリアルデザイン風なので、iOS向けとしては審査が難しいかもしれません。また、Form周りのコンポーネントが、１行テキスト入力とシンプルなラジオ・チェックボックスのみです。

UI Framework Catalogへも追加しましたので、Cordovaアプリとしてのパフォーマンスのご確認にお役立てください。

Windowsストアではダウンロードが低いとMicrosoft社により非公開にされる

***App has been unpublished.

　Microsoft社から「あなたのアプリは非公開になりました」というメールが届きました。非公開になったアプリは申請の承認が下りて半年ほどは公開されているものでした。
　非公開になった理由としては、"App Policies: 3000.1 App Quality" アプリの品質が低すぎるという理由でした。しかし、同じようなアプリが残っているところをみると、Microsoft社としてはダウンロード数が低いアプリを排除する方針のようです。
　全く同じアプリをAndroid PlayストアやiOS App Storeに公開していますがそこそこダウンロードがあるので、納得はあまりできません。ただ、正直なところWindowsストアに公開する効果は他のストアの1/10000程度なので、関心が持てないというのが感想です。
　こんなことをしていると開発者離れが益々進んでしまいそうですが・・・

まとめとしては、
Windowsストアではダウンロード数が低いとMicrosoft社により非公開にされます

Mac Bookの空き容量を増やす方法リンク集

128GByteの開発用のMacbookAirがいつの間にか残り3Gになっていました。特にアプリケーションをたくさん入れているわけではないので空き容量増やす方法を調べました。

Xcode関連の不要ファイルを削除してディスクスペースを節約 Qiita

必ず行った方がいいと思います。
記載されている全項目を確認して、不要なものを削除すると８G以上はサイズが空きました。

ハードディスクの空き容量が極端に少なくなる場合の対処方法 Apple コミュニテイ

必ず行った方がいいと思います。
特に大きなフォルダの検索は不要なディレクトリの発見がありました。

以下個人的に行っていること

• Androidの不要なエミュレーター用のイメージ削除

jQuery Mobile1.5デモサイト

開発中であるjQuery Mobile1.5のデモサイトができていました。

http://view.jquerymobile.com/1.5-dev/demos/

もう２年近くjQuery Mobileはメジューバージョンアップされていませんが、Githubでのコミットも続いているので近くリリースされるのではないでしょうか。

Crosswalk18に注意 overflow-xが効かない

Cordova Android 1.7のディフォルトで使用される Crosswalk18はChrominium48がベースとなっていますが、このバージョンでoverflow-xが効かないなどの不具合が出ました。

config.xmlの記載を以下のうように20以上が読み込まれるようにすると解消されました。
ただしこのバージョンからはandroidの最小バージョンが4.1(SDK 16)となることに注意が必要です。
<preference name="xwalkVersion" value="20+" />

ionic2で日本向けのをアプリを作成するためのカスタマイズ

ionic2で日本向けのアプリを作成していると、いくつか気になる箇所が出てきました。

フォント設定

ios,android向けのみでWebアプリを作成しない場合は変える必要はないと思います。

フォントサイズ

全体的にはそのままでよさそうですが、一部文章を記入する箇所などで文字が小さすぎるように感じましたので変えました。

app.md.scss

ion-card ion-card-content{
  font-size: 1.6rem;
}

WebStormでionic2開発時にCPU使用率が高い場合

プロジェクトのインデックス対象からビルド後のディレクトリを除外する。これで私の環境(Macbook Air2011)は収まりました。

1. メニュー「Preference」
2. 「Directories」選択
3. www/build を選択して「Excluded」を選択

/platformsがexcludedになっていると思いますが、なっていない場合はexcludedにしておきます。

ionic2開発のためのAngularjs2 チートシート

• () view -> controller
• [] controller -> view
• [()] view <-> controller 双方向

繰り返し

*ngFor="let item of items"

スイッチ

<div [ngSwitch]="fruit">

  <div *ngSwitchWhen="'apple">

  </div>

  <div *ngSwitchWhen="'banana">

  </div>

</div>

クリックイベント

(click)="openNewPage(val)"

入力項目変更時イベント

(ionChange)="onChanged($event)"

cssスタイルをセット

[ngStyle]="{'background-color': colorVal}"

ionic2でブラウザ表示時にプラットフォームのテーマを切り替える

ionic serve　でブラウザ表示するとandroid用の見た目で表示されますが、以下のようにurlを変更することでiosやwindowsの見た目へ切り替えられます。

ios
http://localhost:8101/?ionicPlatform=ios
windows
http://localhost:8101/?ionicplatform=windows

ionic2でページをコマンドで作成

ionic g page new-page

app/pages/ に以下のディレクトリとファイルができます。

new-page/

  +- new-page.html

  +-new-page.scss

  +-new-page.ts

コマンド実行後に注意書きが表示されますが、app_core.scssには自動的にimport文が追加されないようです。

Don't forget to add an import for new-page.scss in app/themes/app.core.scss:
  @import "../pages/new-page/new-page.scss";

ionic g コマンドは他にも
 ionic g provider
があります。

参考
http://ionicframework.com/docs/v2/cli/generate/

ionic2でunderscorejsを使用する

ionic2でTypeSciprtで開発している場合、underscorejs[lodash]をただ使おうとすると、
Cannot find name '_'　
と出ると思います。

事前準備

事前にtypingsを入れておく必要があります。
npm install -g typings

underscorejsをいれる

npm install underscore --save

underscorejsの型定義ファイル作成

typings install underscore --ambient --save

typings/browser/ambient/underscore/index.d.tsが作成されます

tsconfig.json設定 

filesへmain.d.tsを追加
  "files": [
      "typings/main.d.ts"
  ],

undescorejs使用

使用したいファイルで読み込みます。

import * as _ from 'underscore';

上記だと全ての関数が読み込まれますが



import "reject" from 'underscore';
のようにして個別にも読み込めるようです。

ionic2 searchbarでエンター押下時に検索

<ion-searchbar [(ngModel)]="searchQuery" (input)="searchItem($event)"></ion-searchbar>

上記の場合はキーを押下時にsearchItemが呼ばれます。既にあるリストをフィルタする場合などは良いのですが、サーバーに呼び出しを行いたい場合は頻繁に負荷をかけることになるのでエンターを押した場合のみ呼び出したい場合もあると思います。

inputではなくsearchイベントを使うことで解決できます。(ドキュメントには未記載)

<ion-searchbar [(ngModel)]="searchQuery" (search)="searchProduct($event)" ></ion-searchbar>

input,searchイベント共に呼ばれる関数内で モデルとしてバインドされているsearchQueryを使用してはいけないようです。関数が呼ばれた時点ではまだ値の同期が終わっていない場合がありました。
したがって以下のように関数に渡しているeventから値を取得する必要があります。

inputの場合
searchItem = function(event){
//eventがsearchbarなので
 var query = event["value"];
} 

searchの場合
searchItem = function(event){
//eventはEventオブジェクトなので
 var query = event["target"]["value"];
}

ionic2 ページ遷移でパラメータを渡す

リストページ-詳細ページのページ構成などでパラメータ(idなど)を渡す方法です。

リストページ側
pushの第２引数で渡します。ページを差し込む他のメソッドでも引数の順番は違えど渡せます。

this.nav.push(DetailPage,{itemId:item.id});

詳細ページ側
NavParamsを使って取り出します。

import{NavController,NavParams} from 'ionic-angular';

constructor(navParams: NavParams) {
       this.itemId = navParams.get('itemId');
}

ionic2を始める

ionic2をnpmでインストール

npm install -g ionic@beta

cordovaをインストール(入っていない場合)

npm install -g cordova

ionic2プロジェクトを作成

(TypeScript使用)
ionic start ionic-sample --v2 --ts
(JavaScript使用)
ionic start ionic-sample --v2

ionic2のサンプルなどはTypeScriptで記載されているので type scriptを使用したほうが良いかと思います。

サーバーを起動

cd ionic-sample

ionic serve

ブラウザが立ち上がります。liveloadが有効になっているのでコードを変更すると自動的コンテンツが変わります。liveloadをoffにする場合は ionic serve --nolivereload でサーバを起動します。

ターゲットデバイス追加

作成したいアプリのデバイスを追加します。このあたりのコマンドはcordovaがionicに置き換わっただけです。

ionic platform add android --save

ionic platform add ios --save

デバイスで実行

ionic run android --device

ionic run ios --device

ionic2の感想

動作速度
ionic2になりAndroid,iOSそれぞれのネイティブの見た目に近づきました。Angular2となりパフォーマンスも向上されたはず(?)です。

しかしながら、心なしか旧バージョンより動作が遅いような気がしてしました。

開発
ionic2のAPIは分かりやすくリファレンスを参照して必要なコンポーネントを使うだけなので学習コストは低くかったです。
むしろAngular2とTypescriptに慣れるのに４、５時間かかりました。TypeScriptを使用使っていくべきかどうかはもう少し使ってみて判断したいと思いました。

まだまだionic2もangular2もベータ版なので今後の動きに注目して参りたいです。

developer.microsoft.comの不具合対処

Windowsアプリを公開する上で必ずアクセスすることになるMicrosoftの開発者サイトdeveloper.microsoft.com　は残念ながらChromeなどのブラウザでアクセスすると私の環境では不具合が頻発します。いくつか対応策が見えてまいりましたので記載しておきたいと思います。

developer.microsoft.comページは機能していません

上記の場合はCookieを削除するのが手っ取り早く治ります。

Service Unavailable - Zero size object

ログインすると下記のようなサーバーエラーが出る場合、microsoftのcookieを削除し、ログイン画面でログインする前に・・・をクリックしてsign outを行ってからアクセスすると入れる場合があります。

アプリの紹介画像がアップロードできない場合

一見アップロードされたように見えますが、保存ボタンを押しても実は保存されていません。文章などは保存されているので見落とす場合があるので注意が必要です。
時間を置いてアップロードするか他のブラウザを使用するとアップロードできます。

Cordova Windows 4.3.2はストアアプリビルドで不具合

StartPage周りで不具合の多いCordova Windowsですが、ver4.3.2はストアアプリ向けのビルドを行うまではいいのですが、いざMicrosoftに申請するとコンテンツが表示されないとリジェクトされてしまいました。
普段は見ない認定キットの認定中の画面を見ていると確かに画面が表示されていません。(ただし認定は全て合格する)
レジュームに問題はありますがまだ4.3.0を使い続けるのが良さそうです。

CordovaでOAuthを利用する(GoogleID利用編)

ng-cordova-oauthを使ってCordovaアプリでOAuthを利用してみます。このライブラリはAndroid,iOS,Windowsへ対応しています。

Googleアカウントでログインしてみます。

bowerやリポジトリからダウンロードするなどしてファイルを読み込みます。
<script src="lib/ng-cordova-oauth/ng-cordova-oauth.min.js"></script>

必要なプラグインを入れます。

cordova plugin add cordova-plugin-inappbrowser --save
cordova plugin add cordova-plugin-whitelist --save

Googleの開発者コンソールでプロジェクトを作成します。

「OauthクライアントID」タイプは「ウェブアプリケーション」で作成します。
承認済みのリダイレクト URIには"http://localhost/callback"を登録しておきます。

モジュールを関連付けます。

var module = angular.module('app', ['onsen','ngCordovaOauth']);

OAuth呼び出し

$cordovaOauth.google("Access ID", ["email"]).then(function(result) {

            //Success

        }, function(error) {

            //Error

        });

Successの場合のresult
{
  "access_token":"*****",
  "token_type":"Bearer",
  "expires_in":"3600",
  "id_token":"*****"
}

Androidの場合の画面遷移

Inappbrowserが中に開いてログイン画面が表示されます。ブラウザ標準の拡大・縮小画面が表示されるので違和感は少しあります。デバイスの戻るボタン以外で元の画面に戻る術はありませんでした。

iOSの画面遷移

"Done"をクリックすると元の画面へ戻ります。問題はApple社の審査をこの動作で通過できるかですが、issueには上がっていないようです。

UI Framework CtalogへApp.jsを追加

モバイル向けUIフレームワークのカタログアプリUI Framework Catalogへ「App.js」を追加しました。

App.jsの用途はリストを少し表示するようなちょっとしたアプリや軽量なのを活かしてWebアプリなどが良いのではないでしょうか。
UI Framework CatalogでもトップメニューにはApp.jsを使用しています。覚えるのがとても簡単ですぐに使い始めることができました。

App.jsの特徴

• 軽量 -> コンポーネントの数はかなり少ない
• iOS, Androidの向けのUI
• タイトルバー、ダイアログのデザインとページ遷移時のアニメーションが違うのみ
• 学習コストはかなり低い

App.jsコンポーネント

• ボタン
• タイトルバー
• リスト
• ダイアログ
• 画像カルーセル

画面画像

Cordova Android5.1.1, iOS4.1がリリースされました

昨日Cordova Androidが5.1.1へCordova iOSは4.1へアップデートできるようになりました。どちらも最近困っていました不具合が解消されました。
現在動作を確認している限りではAndroid5.1.1に目立った不具合は感じられません。

Cordova Android5.1.1注目のアップデート内容

• Uninstall app from device/emulator only when signed apk is already installed
• テスト時に端末やエミューレータのデータがディプロイの度に消えていましたが、解消されました。

Cordova iOS4.1.0注目のアップデート内容

• correct the paths for iOS icon and splashscreen resources
• アーカイブ時に出ていたリソースが見つからない問題が解消されます

UI Framework Catalogリリース

色々なUIフレームワークを全てCordovaアプリにパッケージ化した場合のパフォーマンスを図りたかったので、アプリ UI Framework Catalog を作成いたしました。
WebviewはCrosswalkを使用しています。

確認可能フレームワーク

- Framework7 Material 1.4.0
- OnsenUI 1.3.14
- jQuery Mobile 1.4.5

アプリ画面

Cordova-sqlite-storageからWindowsサポートが無くなります

CordovaでSqliteを使用する上での定番プラグインCordova-sqlite-storageからWindowsのサポートがなくなります。(0.8.0より) 同じメンテなの別プロジェクトCordova-sqlite-legacy, cordova-sqlite-extに移されるとのことです。

Windows8.1までの対応でしたがWindows10 Universalアプリでも使用できておりました。Android, iOSと同じソースコードで利用できたのでこのプラグインのおかげでWin10アプリが簡単に開発できたといっても過言ではありませんでした。

別プロジェクトでも開発が続けてくださることを願います。
何らかのプロジェクトに貢献できることをして参りたいです。

Xcode7.2でERROR ITMS-90032 icon.pngがないと言われたら

Cordova ios4.0.1 Xcode 7.2でArchiveしてアップロードすると icon.pngがない言われてエラーになります。
以下フォーラム通りにするとエラーがなくなりました。
ERROR ITMS-90032 “Invalid image path”

手順

• BuldPhase
• Copy Bundle Resources
• +
• Add Other
• Images.xcassets -> App.appiconsets　以下のpngを全部選択
• CreateFolder Referenceを選択
• Images.xcassets -> LaunchImage.launchimage にも同じ手順をする

ionic2 VS OnsenUI2 (比較中)

ionicもonsenuiもバージョン２になってからよりネイティブのUIの見た目に近づきました。他にもネイティブな見た目のフレームワークとしてFramework7がありますが私はAngularJSを使用したいのでionic2とOnsenUI2を両方使用して少しづつ比較してまりたいと思います。

両方ともまだプレビュー版です。特にionic2はAngularjs2を待つ必要があるのでリリースはまだまだ先になるのではないでしょうか。

依存するフレームワーク

ionicはAngularJS2に依存しているためその習得(少なくとも簡単な理解)が必要です。

それに対してOnsenUI2はフレームワークには依存していないようです。しかしながら、一部のUIコンポーネントや機能は現在のところAngular1が必要となっています。

CSS対応プラットフォーム

ネイティブデザインの見た目が含まれているかということです。Android向けのデザインをWindowsアプリとしてリリースすることももちろんできます。

プラットフォーム	ionic2	OnsenUI2
iOS	有	有
Android	有	有
Windows(Phone)	有

コンポーネントの比較

差分があるもののみ記載しましたが、全体的に同じコンポーネントでもionicの方がまだクオリティが高いです。しかしながら、OnsenUIにはPC画面やタブレットのUIに必要なSplitViewなどがあり、今後の差別化に注目です。

コンポーネント	ionic2	OnsenUI2
Select	有
SplitView		有
Select	有
Tabs	スクロール？	スクロール不可

Androidアプリもリジェクトされます

先日公開しましたAndroidアプリがGoogle社によりリジェクトされました。
Androidは審査がほぼないというのが多くの開発者の認識だと思いますが、iosほどではありませんが審査があり、リジェクトもされるようになったようです。

リジェクトされるとメールが届き、上のメッセージが開発者コンソールに表示されるようになります。
噂によると何度かリジェクトされるとアカウントが停止されるそうです。

リジェクトに対しては異議申し立てを行うことができます。
最初のリジェクトメールでは何が原因でリジェクトされたのか理解できませんでしたので、異議申し立てを行ったところ(英語のみ)、スクリーンキャプチャ付きで理由の添えられた返答を頂くことができました。

リジェクトされたアプリがあるからといって、その後他のアプリが申請,アップデートできなくなるわけではありません。
しかしながら、時間をかけて作成したアプリを公開すらできないというのはアプリ作成のモチベーションが下がるのは確かですね。

Windows Universal アプリ開発 アプリ認定キット不合格 UTF-8 ファイル エンコード

ver4.2.0で本問題は修正されています。

useminを使ってjsファイルを小さくすると以下のエラーがアプリ認定キットで出るようになりました。

展開と起動のテスト
バイトコードの生成
•エラーが見つかりました: バイトコード生成テストで、以下のエラーが検出されました:◦ファイル **** には、JavaScript の構文またはその他の問題があります。
Cordova windows 4.3.0では以下の現象は起きなくなりました。

ファイルのエンコードのテスト
UTF-8 ファイル エンコード
•エラーが見つかりました: UTF-8 ファイル エンコード テストで、以下のエラーが検出されました:*** は UTF-8 で正しくエンコードされていません。ファイルを UTF-8 をもう一度保存してください (バイト オーダー マークを含む)。

修正方法に従って以下の手順を行いました
該当ファイル(js,css.html)を開き、ファイル->名前をつけて保存
「上書き保存」の右にある下マークをクリックして「エンコード付きで保存」
「Unicode(UTF-8 シグネチャ付き) - コードページ65001　を選択

その結果 該当ファイル以外がVisual Studioより認識されなくなりました.....
もちろんこの状態で実行してもファイルが足りないのでアプリは実行できません。

wwwを選択し「プロジェクト」->「すべてのファイルを表示」　を押すと半透明で認識されなくなったファイルが表示されます。
次に半透明のファイルやフォルダを選択してから、「プロジェクトに含める」で再度認識させます。

これで認定テストが通ります。

Cordova 6.0.0 リリース

Cordovaもメインバージョンが6.0.0に上がりました。大きなのは各プラットフォームのディフォルトバージョンが Cordova Androidは5, Cordova iOSは4 となったことでしょうか。

公式ブログ

Cordova Android4.1.1 -> 5.1.0 にアップデート

• 開発端末のアプリのデータがリセットされたので注意が必要です。

Cordova iOS 3.9,2 -> 4.0.1へのアップデート

• 公式としてWKWebViewをサポート。
• sqliteプラグインとの相性が悪いのかDBが開けないことがあります。
• bitcodeが最初からoffになっています。(自分でoffにする必要なし)
• LanguageがEnglishのみになっていました。
• アイコンの画像がビルドに含まれないので自分で含んであげる必要がありました。

Cordova Windows 4.2.0 -> 4.3.0(4.3.1)へのアップデート

• 認定テストツールでの文字コードエラーがなくなるため対応不要になりました。
• [注意] 重大なバグ修正を含んだ4.3.1がでていますが、こちらはバグ修正の影響で逆にindex.htmlのパスを見つけられなくなってしまいました。動かない場合は4.2.0を使うしかありません。 　今は4.3.0は動かず4.3.1が動きます。

jQuery Mobile は生きている

既に現在のメインリリースバージョン1.4が出てから１年以上経ち、プロジェクトがまだ生きているのか疑問視する声が上がっていましたjQuery Mobileですが、本日開発ブログが１年３ヶ月ぶりに更新されました。

A long overdue status update

jQuery Mobileと他のモバイルフレームワークとの違いは PCのWebブラウザ(IEなど)もサポートしていることでした。
しかしながら、あまりにもサポート範囲を広く取りすぎてパフォーマンスの面などで劣っていましたが、今後はIE11以上などをサポートしていく方針などを打ち出されています。

「Cordovaでスマホアプリ」も「PCのWebアプリ・サイト」も両方開発する場合などには選択肢として選ぶことができるのではないでしょうか。
ionic,onsenuiも次のバージョン2ではネイティブにより近いデザインとなっていきますが、カスタマイズを前提としたオリジナルデザインのフレームワークとして頑張って欲しいです。

Cordova Windows Universalアプリ開発 ストアからアプリを削除

アプリをストアから非公開にしたいと思い、ボタンを探しましたが見つかりませんでした。
Webで調べるとやはり同じような状況の方がいらっしゃいました。

Windowsストアアプリの公開を停止してみた(Windows Dev Center)

自分用に手順を箇条書きすると

• 申請を新たに作成
• 「価格と使用可能状況」
• 「分布と認知度」
• 「非表示にして取得できないようします」をチェック
• 保存して申請
• 申請が許可されると「非売品」の表示に変わります

Visual Studioアカウント接続エラー

visual studio で予期しないエラーが発生したため、Microsoftアカウントサービスに接続できません

上記のようなエラーが出てストアアプリのパッケージ化ができなくなりました。
それにしても何も解決の糸口すら与えないこのエラーメッセージはいいですね。諦めがつきそうです。

Microsotのサポートに問い合わせたところ、現在(2016/1/28)対策中とのことでしたので同様の症状の方がいらっしゃいましたらとりあえず待ちましょう。

エラーが出なくなり無事にアプリをパッケージ化できるようになりました。

cordovaでwindows universalアプリ作成 プラグイン使用時の注意事項

Sqliteプラグイン

--archs="x86"をビルド時に設定しなければエラーとなる。

sqlite3ファイルの場所

{ドライブ}¥Users¥{ユーザ名}¥AppData¥Local¥Packages¥{パッケージ}¥LocalState

LocalStoreに置かれました。iosと違いこのあたりの置き場のディフォルトの指定がどうやって行うのかわかりませんでした。

プラグインのドキュメントにはdeleteDatabaseが実装されていないと書かれていたが使える。(8.1のみ使えないのかも)

SocialSharingプラグイン

Android,iosはメッセージ,リンク,画像のシェアができますが、画像のシェアができません。
現状画像のシェアができるプラグラインがないので後ほど作成したいと思います。

Admobプラグイン

Admobはwindows8 phoneのみの対応である。
(windows universalアプリはPC,タブレット,スマホも含まれるためAdmobが対応していないのも仕方がないと思います)

Fileプラグイン

cordova.fileを参照することができない(バグ？)

CordovaでWindows Universalアプリ作成 他の言語(オランダ語)が自動的に追加される

英語と日本語しか対応していないにもかかわらずストアリリース用にパッケージ化して、ストアにアップロードするとなぜか、オランダ語も含まれており、説明文やスクリーンショットの記載を求められました。

 Webで調べるとブルガリア語が追加されている方もいらっしゃいました。

Windows 8:ブルガリア物語顛末　眠るシーラカンスと水底のプログラマー

Cordovaの問題かと思いましたが、パッケージ化するVisual Studioの自動言語抽出機能?が問題のようでした。cordovaプラグインにnlドメインを使うものがあるため、プラグイン内でオランダ語を使っているのかもしれません。

対応

• ***.appxmanifestファイルをコードベースで開きます。
• <Resources><Resource Language="x-generate" /> を見つけます
• <Resource Language="x-generate" />を削除します。
• 代わりに以下を入れます(日本語と英語(米国)を入れる場合)
• <Resource Language="JA" /><Resource Language="EN-US" />

プラットフォームを追加したら Error: Platform windows already added

platformフォルダに windows,android など既に追加使用しているものがないか確認する。
ある場合はフォルダ毎削除

windowsをrmすると高確率で残ります。

Windows Universal アプリ アプリ名多言語対応

• CordovaAppを選択しフォルダ作成で「Strings」フォルダを直下に作成
• Stringsフォルダ以下に言語フォルダを作成する(enとしなかったのはcordovaはディフォルト言語をen-USと入れてくるため)
• Strings/en-US
• Strings/ja
• それぞれの言語フォルダに 「resouces.resjson 」ファイルを作成
• resouces.resjsonを編集

{

  "AppName": "EnglishName"

}

• package.windows10.appxmanifestを編集します(ビジュアル編集でもコード編集でも可)
• 多言語文字列が必要な場所に「ms-resource:AppName」を入れていきます。
• ビジュアルの場合
• 「アプリケーション」タブ「表示名」
• 「ビジュアル資産」タブ「タイル:短い名前」
• 「パッケージ化」タブ「パッケージ表示名」
• 規定言語に設定した言語がディフォルト元となります。

注意

• ビルドすると「タイル：短い名前」以外は元に戻ります。

Windows Universalアプリ アイコン・スプラッシュスクリーン

<platform name="windows">
        <icon width="150" height="150" src="res/windows/icon-150.png"  />
</platform>

cordova本家のドキュメントにwindowsの記述はありませんが、サイズをあわせるとコピーされました。
ただし、cordova規定しているサイズのものしかコピーされませんでした。
また、バッジ画像もサイズを合わせてもコピーされませんでした。
面倒がないようにCordovaがディフォルトで作成するアイコンのサイズのものは用意しておいた方が良いと思います。それでバッジアイコン以外は全て埋まります。

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に置いておきます。

タブレット

スマホ