タグ: Cordova

【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.

Cordova cordova-plugin-ionic-keyboard JavaScript keyboardDidHide keyboardWillShow Monaca

【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

Cordova icon JavaScript Monaca Onsen UI アイコン

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

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

otak-lab

2019.07.21

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

https://otak-lab.com/archives/2305

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

otak-lab

2019.10.24

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

https://otak-lab.com/archives/2639

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

$http Calendar Cordova CSV encoding.js JavaScript moment.js Monaca Onsen UI カレンダー祝日

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

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

www8.cao.go.jp

国民の祝日について - 内閣府

https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html

内閣府国民の祝日について。国民の祝日に関する法律や政令、年間の国民の祝日の一覧など。

$http Cordova CSV encoding.js moment.js Monaca カレンダー祝日

【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を引いた値）となるため、ス...

Cordova iframe iOS Monaca Onsen UI Web アプリスクロール

【Cordova】config.xmlのandroid-minSdkVersionが反映されない場合の対処方法

昨日、シンプル利益計算のアップデート版をリリースしようとGoogle Play Consoleでアップロードしたところ、config.xmlのandroid-minSdkVersionが反映されていないことに気がつきました。
今回は、その対処方法について紹介します。
Continue reading

android-minSdkVersion APIレベル config.xml Cordova

【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」と表示され、まったく動作しませんでした。