【Monaca】Onsen UI ons-list-itemの余白を調整する

Onsen UIを利用したアプリでデータなどの一覧を表示する場合、ons-listとons-list-itemを使用します。
しかし、ons-list-itemの余白により、表示できる行数が限られたり、表示バランスがイメージどおりにならない問題が発生します。
今回は、ons-list-itemの余白を調整する方法を紹介します。
Continue reading

【Cordova】cordova-plugin-ionic-keyboardプラグインの注意点について

バナー広告を表示した状態でキー入力を行うと、広告が邪魔になってしまいます。
そこで、cordova-plugin-ionic-keyboardプラグインのキーボードの表示直前に発火するkeyboardWillShowイベント、キーボードの非表示後に発火するkeyboardDidHideイベントを利用して、広告の表示・非表示を制御します。
keyboardWillShowイベントはひと癖あるので、今回はその注意点について説明します。

GitHub
GitHub - ionic-team/cordova-plugin-ionic-keyboard: Keyboard Plugin for Cordova
https://github.com/ionic-team/cordova-plugin-ionic-keyboard
Keyboard Plugin for Cordova. Contribute to ionic-team/cordova-plugin-ionic-keyboard development by creating an account on GitHub.

Continue reading

【Monaca】Onsen UIのアイコンをさらに太く表示する

Onsen UI 最新版v2.10.10には、以下のアイコンが組み込まれています。

Material Design Iconic Font v2.2.0
Font Awesome Free 5.8.1
Ionicons, v4.5.5

アイコンをそのまま使うには問題ありませんが、大きさを変えたり、太くしたりする方法は、各アイコンの仕様により異なります。

zavoloklom.github.io
Material Design Iconic Font - Usage Examples
https://zavoloklom.github.io/material-design-iconic-font/examples.html
Material Design Iconic Font is a full suite of official material design icons and community icons for easy scalable vector graphics on websites or desktop.

fontawesome.com
Font Awesome
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

今回は、アイコンをさらに太く表示する方法について紹介します。
Continue reading

【Monaca】Onsen UI上に表示したカレンダーに祝日を表示する

今回は、以前書いた記事「【Monaca】Onsen UI上にカレンダーを表示する」と「【Monaca】CSVデータを読み込む」を組み合わせて、Onsen UI上に表示したカレンダーに祝日を表示する方法を紹介します。

otak-lab
【Monaca】Onsen UI上にカレンダーを表示する
🕒️2019/07/21
Moment.jsを利用して、Onsen UI上にカレンダーを表示する方法を紹介します。※カレンダー表示処理はOnsen UIなしでも利用できます。Monacaデバッガーの表示結果です。ツールバーの左右の矢印を押すと、その月のカレンダーが表示されます。 まず、Moment.jsにアクセスして、「moment-with-locales.min.js」というファイルをダウンロードし、Monacaのlibフォルダにアップロードします。処理内容は、指定した月の第1週の日曜日の日付を取得してhtml生成後、日付を+1日追加します。7日単位でループし、次の日付が翌月の場合はforループを...

otak-lab
【Monaca】CSVデータを読み込む
🕒️2019/10/24
今回は、内閣府のホームページより国民の祝日のCSVデータを読み込む方法を紹介します。※Monacaにて「Onsen UI V2 Angular 1 Minimum」のプロジェクトを作成します。libフォルダに、日時処理が簡単に行うことができる「moment-with-locales.min.js」と文字コードを変換することができる「encoding.min.js」をアップロードします。Monacaデバッガーの結果です。$http.get()を使ってCSVデータを読み込みますが、CSVデータはShift_JIS形式なので、文字化けした状態で読み込んでしまいます。この場合、バイナリーとして読み込む必要があるた...

Continue reading

【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