【Monaca】CSVデータを読み込む

今回は、内閣府のホームページより国民の祝日のCSVデータを読み込む方法を紹介します。

www8.cao.go.jp
国民の祝日について - 内閣府
https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html
内閣府 国民の祝日について。国民の祝日に関する法律や政令、年間の国民の祝日の一覧など。

Continue reading

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

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

otak-lab
【Monaca】Onsen UIの画面内に外部Webページを表示する
🕒️2018/05/06
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
【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する
🕒️2019/08/01
今回は、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