【Monaca】Basicプランでは解決できず!InAppBrowser Google OAuth2認証の問題

【Monaca】アプリリリース後の問題について」で記載したInAppBrowserを使用したGoogle OAuth2認証の問題だが、海外のサイトなどいろいろと調査した結果、cordova-plugin-googleplusを導入すれば解決できることがわかった。
しかし、無料のMonaca Basicプランではプラグインが使用できず、結果的に解決できない事態となった。

Cordovaの開発環境を構築し、MonacaからCordovaへ環境を移行するしか方法がないようだ。

【Monaca】「[要対応] Google Play デベロッパー ポリシー違反に関わる警告」のメールが届く

本日、下記メールが届いた。

Google Play デベロッパー様

お客様のアプリ ギャンブル収支管理(パッケージ名 jp.wpblog.hatopp.gambleprofitmanager)が、Google Play の個人情報や機密情報に関するユーザー データ ポリシーに違反していることが確認されました。

警告の詳細: Google Play では、ユーザーや端末に関する機密情報を要求する、または取り扱うアプリの場合、デベロッパーは有効なプライバシー ポリシーを提供する必要があります。当該のアプリは、個人情報または機密情報に関わる権限 (カメラ、マイク、アカウント、連絡先、スマートフォンなど) またはユーザー データを要求していますが、有効なプライバシー ポリシーが確認できませんでした。

必要な対応: [ストアの掲載情報] ページとアプリ内に有効なプライバシー ポリシーへのリンクを記載してください。詳しくは、こちらのヘルプセンター記事をご参照ください。

なお、機密情報に関わる権限やユーザー データに対するリクエストをアプリからすべて取り除かれた場合には、上記のご対応は必須ではございません。

また他にも公開している同様のアプリがある場合、すべてのアプリについて目立つ方法での開示の要件を満たしているかどうかご確認ください。

2017 年 3 月 15 日までにこの問題を解決いただくようお願いいたします。ご対応いただけない場合、Play ストアからの削除も含め、お客様のアプリの公開を制限する措置を取らせていただきます。恐れ入りますが、あらかじめご了承ください。Google Play のユーザー皆様にわかりやすく透明性の高いサービスを提供するため、ご協力いただけますと幸いです。

どうぞよろしくお願いいたします。

Google Play チーム

原因は、「Nifty Cloud for Push Notification Plugin」をアップデートしてアプリをリリースしたため。
プライバシーポリシーについて調査する時間がなく、また3月15日と期限が短いため、やむを得ずプッシュ通知機能を廃止して回避することにした。

【Monaca】アプリリリース後の問題について

これまでMonacaの開発環境を利用して、Android版「FX収支管理」「ギャンブル収支管理」「シンプル体重管理」「ナンバーズサーチ」の計4タイトルのアプリをリリースしたが、達成感に浸っている暇はない。

例えば、アプリ内のデータをバックアップする方法として、「Dropbox Datastore API」という便利なサービスを利用し、必死に仕様を調査して実装までたどり着いた。
しかし、2016年4月に「Deprecating the Sync and Datastore APIs」サービスを終了するお知らせが・・・
この機能を実装するまで、当時のMonacaのInAppBrowserプラグインの問題なども含めて1ヵ月近くの時間を要したわけだが、半年後には使えなくなるという自体に。
対応策を考え、Google Driveにバックアップする方法を選択し、必死に仕様を調査して実装までたどり着いた。

しかし、2017年4月に「ネイティブ アプリのOAuthインタラクションを最新にしてユーザビリティとセキュリティを向上する」WebViewでのGoogleへのOAuthリクエストのサポート終了するお知らせが・・・

一難去ってまた一難である。
Google Driveにアクセスする前にInAppBrowserを介してオーソライズを行っているが、それができなくなるということだ。
まだ4ヵ月あるとはいえ、早々に対応しておかないと身動きが取れなくなる。

アプリをリリースしても、不具合やユーザーの要望に加え、こうしたサービス終了に伴う問題など、なかなか放置できないのが現状である。

【Monaca】Ionic Color Pickerっぽい機能を実現する

※Onsen UI + AngularJSを使用。
アプリにカラーピッカーのような機能を実現したいと思っていたところ、
Ionic Color Picker – Ionic Marketplace
というページを見つけ、早速それっぽい機能を実現してみた。

新規プロジェクトから「Onsen UI V2 Angular 1 Minimum」を作成。
$watchCollection()colorオブジェクトの変更を検知し、RGBのHEXコードを生成している。


Continue reading

【Monaca】ons-list-itemをドラッグ&ドロップで並び替える・その2

Onsen UI V2対応はこちらから。


※11/22再編集
前回の「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える」で記載したコードにはいくつか問題点があった。
ons-list-itemの背景色でわかりにくかったが、helper(移動中のons-list-item)のborder-topが消えたり、一番下のons-list-itemを移動させると、下から二番目のons-list-itemが下がるが、ons-listborder-bottomons-list-item)のborder-bottomが重なって線が太くなるなど。

二日間もいろいろと試した結果、下記のコードになった。
【Monaca】Onsen UI ons-list のズレをなくす」で紹介したCSSを適用することで面倒なborder-topborder-bottomの処理を軽減することができた。
また、「三」のアイコンをドラッグすることで入れ替えが行われるように変更した。
それから、style.cssでは、CSSによる変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。
Continue reading

【Monaca】ons-list-itemをドラッグ&ドロップで並び替える

Onsen UI V2対応はこちらから。


※Onsen UI + AngularJSを使用。
以下のファイルを準備する。
jquery-3.1.1.min.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
④jquery-ui.min.css(②zipに同梱)
jsフォルダに上記①~③ファイルとapp.jsを配置する。
cssフォルダに上記④ファイルとstyle.cssを配置する。

$scope.tableに初期データを設定し、ons-listで一覧を表示する。
ons-list-itemをドラッグ&ドロップし、[Check Table]ボタンを押下すると、コンソールに並び替えた$scope.tableの内容が表示される。
———-
ルメール
戸崎
川田
デムーロ
福永

2016-11-17-20-42-44 2016-11-17-20-45-21

index.html

app.js

ons-list-itemの高さが45px(奇数)だと、ドラッグ&ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css

【Monaca】ベーシックプランでInAppBrowserのバージョンを変更する方法

前回、「【Monaca】Cordova 6.2対応で問題発生!」において、InAppBrowserプラグインがv1.4.0のため、Android 4.0.4上で動作しない件を掲載した。

ベーシックプランでは、プラグインのバージョンを変更することができない。
2016100202

しかし、ある方法でベーシックプランでもプラグインのバージョンを変更することができる。
今回は、InAppBrowserプラグインをv1.4.0からv1.5.0に変更する方法を説明する。
※この記事を掲載後にMonaca側が何らかの対策を行った場合、変更できない可能性があるのでご注意いただきたい。

①「ファイル」→「Cordovaプラグインの管理」と選択し、Cordovaバージョン:CLIバージョンを「6.2.0」を選択する。
②6.2.0に変更後、「ファイル」→「プロジェクトをエクスポート」と選択し、エクスポートを実行する。
③エクスポートしたzipファイルを解凍し、「.monaca」フォルダにある「project_info.json」をメモ帳などで開く。

④18行目の“cordova-plugin-inappbrowser@1.4.0”,“cordova-plugin-inappbrowser@1.5.0”,に変更して保存する。
⑤解凍して作成されたフォルダやファイルを圧縮する。
⑥Monacaの「Import Project」を選択し、「プロジェクトのパッケージをアップロード」で圧縮したファイルを選択し、インポートを行う。
⑦InAppBrowserプラグインがv1.5.0であることを確認する。
2016100201

Android 4.0.4の端末で動作確認済み。
おそらくこの方法で問題ないと思われる。

【Monaca】Cordova 6.2対応で問題発生!

MonacaがCordova 6.2に正式に対応し、シンプル体重管理の最新版をCordova 6.2でリリースする予定だったが、思わぬところで問題が発生した。

アプリをリリースする場合、Android 4.0.4・4.4.4・5.1.1上で必ず動作チェックを行っているが、Android 4.0.4だけGoogle Driveのバックアップ・リカバリー機能が動作しない。
処理を一つ一つ検証したところ、オーソライズを行うためにwindow.open(authUrl, “_blank”, features)を実行している箇所が動作しない。

Cordova 6.2対応でアップデートしたInAppBrowserプラグイン v1.4.0の問題と思い、「InAppBrowser Android 4.0.4」で検索したところ、やはり思ったとおりだった。

InAppBrowser doesn’t open on Android 4.0.4 (regression)

最近リリースされたv1.5.0でfixされたようだが、問題はMonaca側がこの件に対応するかどうか。
この件についてMonacaのお問い合わせから送信したが、不具合等の報告、技術的な質問はStackOverflowに誘導しているため、相手にされない可能性もある。

現状では月額5,000円のゴールドプランに入り、技術サポートチケットを使って対応してもらうか、独自でv1.5.0のブラグインを組み込むしか方法はなさそうだ。
※9/20追記
技術的な問題のため、Monaca側の回答を引用させていただく。

貴重な情報、ありがとうございます。
弊社でも検証させていただき、対応を検討させていただきます。
InAppBrowserプラグイン1.5.0をMonacaでご利用になる場合は、
InAppBrowserプラグインの設定にある「プライグインのバージョン」で「1.5.0」を選択し、
ご利用ください。

現状では月額5,000円のゴールドプランに入り、プラグインのバージョンを変更するしか方法はないようだ。
万が一、ほかのプラグインも不具合が発生した場合に対応できないとなれば、安定して動作しているCordova 5.2でリリースするしかない。

今、楽天モバイルでASUS ZenFone 2 Laser 16GBモデルが税別7,800円で購入できます。

【Monaca】nend広告を一定の間隔で更新させる

Monacaでnend広告を一定の間隔で更新させることができるか挑戦してみた。
※注意事項
1.Monacaデバッガー上での動作確認であり、リリース版での動作については未確認。
2.広告更新後のバナーをタップした場合、収益が計上されるかについては未確認。
3.広告更新ごとに通信が発生するため、更新のタイミングやアプリの使用時間によってユーザーにパケット代の負担をかけることになる。
4.index.html上で動作させる必要がある。(8/14追記)

広告タグのスクリプト(nendAdLoader.js)が実行されると、複数の広告用タグが埋め込まれる。
スクリプトを動的に実行すれば広告を更新させることができるが、埋め込まれたタグを削除しないと更新ごとにタグが追加されてしまう。

広告表示テスト用広告コードを実行する。

すると、2行目(3行目の内容は省略)、10行目、11行目のタグが埋め込まれる。

広告を更新させるには、2行目(div)、10行目(script)に埋め込まれたタグ、動的にスクリプトを実行するために8行目(script)のタグを削除する必要がある。
※11行目は、一度削除してしまうと二度と埋め込まれなくなるので削除しない。

実際の広告コードに切り替えて実行すると、1分おきに広告の更新を確認することができた。
2016081301
     ↓
2016081302
     ↓
2016081303
     ↓
2016081304
     ↓
2016081305

※8/17追記
nendCommon.init()を実行すると、広告が更新(初期化)されることがわかった。

参考サイト – Monacaでnend広告のリフレッシュ方法について

ただし、10行目(script)に埋め込まれたタグは更新ごとに追加されるので削除する必要がある。
また、nendCommon.init()は一般には未公開のため、使用には要注意。

【Monaca】Onsen UI 選択したデータを前画面に渡す

JavaScript + Onsen UI V2版はこちら。

※Onsen UI + AngularJSを使用。

ons-navigatorpushPage()popPage()を利用すれば、次画面に進み、前画面に戻ることが実現できる。
しかし、次画面で選択したデータを前画面に渡す方法は記載がない。
$rootScope.$broadcast()を利用して親コントローラ(page1Controller)にデータを渡し、$scope.$on()で受け取ればよい。

Page1で「ここをタップ」をタップし、Page2で「1000」をタップすると、Page1に戻り「1000」と表示される。
2983291e-9b3c-42cf-b5bc-8094b371f7c9 4c4aee94-6c9d-419f-8ca4-138286fd7463 7693ddf9-229c-4d9f-8b0a-642ccabe47f2
Continue reading