【Monaca】Onsen UIの画面内に外部Webページを表示する その2

「【Monaca】Onsen UIの画面内に外部Webページを表示する」の記事において、iOS版のスクロールがうまくいかないと問い合わせが多く、また某サイトでも何度か話題となっており、再度チャレンジしてみました。

otak-lab
2018.05.06
【Monaca】Onsen UIの画面内に外部Webページを表示する
https://otak-lab.com/archives/1297
2019/10/18現在、iOS上で正常に動作しません。急遽、新しい記事を書きましたので、そちらをご覧ください。既存のWebアプリをネイティブアプリに切り替えたい。しかし、時間も費用も厳しい。その場合、iframeを使用することで、Webアプリをネイティブアプリ風に見せることができる。Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Tabbar」を作成し、Monacaデバッガーで動作確認済み。今回、iframeのサイズ設定にDirectiveを使用したが、クラスpage__contentのサイズが画面の有効サイズ（toolbarとtabbarを引いた値）となるため、ス...

Continue reading

【Monaca】Android版をビルドしてAndroid 9 で実行すると「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」と表示される


Monacaにおいて、「【Monaca】Onsen UI WordPressのWP REST APIを利用してons-carouselに記事を表示する」のAndroid版のデバッグビルドを行い、実際にau SHV40(Android 9)でアプリを実行したところ、「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」と表示され、まったく動作しませんでした。

otak-lab
2019.08.01
【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する
https://otak-lab.com/archives/2376
今回は、Onsen UI + Angular JSを使用して、WordPressのWP REST APIを利用してons-carouselに記事を表示する方法を紹介します。Monacaデバッガーの結果です。左右にスワイプすると、WordPressのWP REST APIを利用して取得した最新のブログ記事5件分のタイトルとサムネイルが切り替わります。下記URLをブラウザ上で入力すると、JSON形式の配列の内容が表示されます。http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5この情報をもとにサムネイルとタイトル、リンク先URLを取得してons-carousel-itemを生成します。ons-caro...

今回は、このエラーを回避する方法について紹介します。
Continue reading

【Monaca】localStorageを使用してアプリの設定データを取得・保存する

今回は、localStorageを使用してアプリの設定データを取得・保存する方法について説明します。

developer.mozilla.org
 
Window.localStorage - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
localStorage プロパティはローカルの Storage オブジェクトにアクセスすることができます。 localStorage は sessionStorage (en-US) によく似ています。唯一の違いは、localStorage に保存されたデータには保持期間の制限はなく、sessionStorage に保存されたデータはセッションが終わると同時に（ブラウザが閉じられたときに）クリアされてしまうことです。

Continue reading

【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる

Monacaの「Onsen UI V2 JS Splitter」のサンプルやOnsen UIのons-splitterの実例では、ons-splitter-contentのloadメソッドでページの切り替えを行っていますが、ons-navigatorを組み合わせてページ遷移を行うサンプルがないので、どのようにすればよいか悩む方も多いと思います。

ons-splitter-content内にons-navigatorを組み込み、メニューで項目を選択した場合、ons-splitter-contentではなく、ons-navigatorのページを切り替えることで実現できます。
Continue reading

【Cordova】phonegap-plugin-mobile-accessibilityプラグインがインストールできない

【Monaca】フォントサイズを変更しても画面デザインが崩れないようにするという記事のアクセスが急増しているので、いろいろと調べていたところ、Androidのプラットフォームが存在する場合にphonegap-plugin-mobile-accessibilityプラグインがインストールできない状態であることがわかりました。

otak-lab
2018.05.01
【Monaca】フォントサイズを変更しても画面デザインが崩れないようにする
https://otak-lab.com/archives/1287
MonacaやCordovaを使用したアプリ開発で必ずこの問題にぶち当たる。フォントサイズを大きくすると、画面デザインが崩れてしまう問題だ。開発においては、一般的なフォントサイズに合わせて画面デザインを行う。フォントサイズを小さくすると、全体的に寂しくなるが、画面デザインが崩れることはない。しかし、フォントサイズを大きくすると、下記のとおり画面デザインが崩れてしまう。この問題を解決するには、phonegap-plugin-mobile-accessibilityプラグインを使用する。Onsen UI V2 + Angular JSの場合、最初に呼び出されるコントロ...

GitHub
 
GitHub - phonegap/phonegap-mobile-accessibility: PhoneGap plugin to expose mo...
https://github.com/phonegap/phonegap-mobile-accessibility
PhoneGap plugin to expose mobile accessibility APIs. - GitHub - phonegap/phonegap-mobile-accessibility: PhoneGap plugin to expose mobile accessibility APIs.

実際にcordovaでインストールしようとすると、以下のようなエラーが発生します。

C:\app\test>cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git
Failed to fetch plugin https://github.com/phonegap/phonegap-mobile-accessibility.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/phonegap/phonegap-mobile-accessibility.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxx\AppData\Roaming\npm-cache\_logs\2019-07-10T00_56_27_188Z-debug.log

Continue reading