タグ: Monaca

【Monaca】Onsen UIで数字をタップして選択する

「カレンダーの日付を選択する方法がわからない」など問い合わせが多いので、そのヒントとして、数字をタップして選択する方法について説明します。

数字をタップして選択する箇所は、HTML + CSSのみで実現できます。
Continue reading

【Monaca】Onsen UIの動きを理解するには・・・

teratailに質問しても回答が得られないまたは問題が解決されない質問を例に、Onsen UIの動きを理解するにはどうすればよいか、解説したいと思います。

teratail[テラテイル]

teratail【テラテイル】｜ITエンジニア特化型Q&Aサイト

~~https://teratail.com~~

teratail（テラテイル）はプログラミングに特化したQ&Aサイトです。実現したい機能や作業中に発生したエラーについて質問すると、他のエンジニアから回答を得られます。

JavaScript Monaca Onsen UI teratail

【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 + JavaScriptで買い物リストを作るその4

今回は、localStorageからニフクラ mobile backendのデータストアにデータを保存するように改造します。

mbaas.nifcloud.com

ニフクラ mobile backend

https://mbaas.nifcloud.com

スマホアプリ開発に必要な機能をクラウド上で提供するので、面倒なサーバー開発が一切不要。アプリ開発をよりスマートにスピーディに。

ncmb.min.jsというファイルが必要ですので、githubからダウンロードしてください。

GitHub

GitHub - NIFCLOUD-mbaas/ncmb_js: ニフクラ mobile backend JavaScript SDK

https://github.com/NIFCloud-mbaas/ncmb_js

ニフクラ mobile backend JavaScript SDK . Contribute to NIFCLOUD-mbaas/ncmb_js development by creating an account on GitHub.

JavaScript mBaaS mobile backend Monaca NIFCLOUD ons-list-item ons-splitter Onsen UI ニフクラリスト買い物

【Monaca】Onsen UI + JavaScriptで買い物リストを作るその3

今回は、ons-splitterでメニューを表示し、初期化画面に切り替え、買い物リストを初期化する処理を追加します。
※前回より少しずつコードが変わっていますので、ご注意ください。
Continue reading

JavaScript localStorage Monaca ons-list-item ons-splitter Onsen UI リスト買い物

【Monaca】Onsen UI + JavaScriptで買い物リストを作るその2

前回の「【Monaca】Onsen UI + JavaScriptで買い物リストを作る」では、再起動するたびに買い物リストが消えてします。

otak-lab

2019.10.31

【Monaca】Onsen UI + JavaScriptで買い物リストを作る

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

今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。買い物リストの保存については、次回に紹介する予定です。Monacaデバッガーの結果です。買い物リスト画面の右下の(＋)ボタンをタップすると、商品名入力画面が表示されます。商品名を入力後、右上の保存ボタンをタップすると、買い物リストに入力した商品名が追加されます。買い物リストの商品名をタップする...

今回は、localStorageを使用し、買い物リストを読み込み・保存する処理を付け加えます。
Continue reading

JavaScript localStorage Monaca ons-list-item Onsen UI リスト買い物

【Monaca】Onsen UI + JavaScriptで買い物リストを作る

今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。
機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。
買い物リストの保存については、次回に紹介する予定です。
Continue reading

JavaScript Monaca ons-list-item Onsen UI リスト買い物