タグ: Monaca

【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

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

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

JavaScript Monaca ons-list-item 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 アプリスクロール

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