タグ: Cordova

【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

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