【Monaca】Onsen UI 自作のテンキーボードを制御する

前回紹介した【Monaca】Onsen UI 自作のテンキーボードを表示するの続き、制御の処理を追加したいと思います。
※2020/05/04 コードの一部を修正。

otak-lab
2020.04.03
【Monaca】Onsen UI 自作のテンキーボードを表示する
https://otak-lab.com/archives/3113
今回は、Onsen UIに自作のテンキーボードを表示する方法を紹介します。FX収支管理の入力画面と同じ方法です。Monacaデバッガーの結果です。iOS版Android版次回は、各キーの制御について紹介する予定です。HTML<div class="div-tenkey"> <div class="div-tenkey_board"> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class=&...

Continue reading

【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
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形式なので、文字化けした状態で読み込んでしまいます。この場合、バイナリーとして読み込む必要があるた...

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