【Monaca】D3.jsを使用して棒グラフを表示する

今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、棒グラフを表示する方法を紹介します。

otak-lab
【Monaca】D3.jsを使用して折れ線グラフを表示する
🕒️2020/06/16
私が開発したアプリの折れ線グラフは、すべてD3.jsを使用しています。「どうやって折れ線グラフを表示しているのか」など問い合わせが多いため、今回はコピー＆ペーストすればアプリに使える、折れ線グラフを表示する方法について紹介します。d3.min.jsをフォルダにアップロードしてください。2次元配列dataに年月日と数値を設定し、window.fn.chart.createLineChart("chart", data)を実行すれば、折れ線グラフが表示されます。※見た目が少し変わるように、Google Fontsを使用しています。Monacaデバッガーの結果です。iOS版...

Continue reading

【Monaca】D3.jsを使用して折れ線グラフを表示する

私が開発したアプリの折れ線グラフは、すべてD3.jsを使用しています。

d3js.org
D3.js - Data-Driven Documents
https://d3js.org
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

「どうやって折れ線グラフを表示しているのか」など問い合わせが多いため、今回はコピー＆ペーストすればアプリに使える、折れ線グラフを表示する方法について紹介します。
Continue reading

【Cordova】cordova-sqlite-storageプラグインでデータベースのオープンを通知する

アクティブユーザー数が3万を超えた「シンプル体重管理」ですが、ユーザー数が増えると共にトラブルも増え、アプリの低評価も目立つようになってきました。

その原因の一つが、localStorageが消えてしまう問題です。
アプリの設定データをlocalStorageに保存していますが、何らかの理由で消えてしまうと、設定データが初期化されてしまいます。
昨年12月にも「「Google Chrome」「AndroidシステムのWebView」のアップデートで大変なことになりました」で大きな問題になりました。

そこでアプリ起動時にSQLiteからアプリの設定データを読み込もうとしましたが、データベースをオープンする前にSQL文を実行してエラーとなってしまいました。
※cordova-sqlite-storageプラグインを使用します。

GitHub
GitHub - storesafe/cordova-sqlite-storage: A Cordova/PhoneGap plugin to open ...
https://github.com/xpbrew/cordova-sqlite-storage
A Cordova/PhoneGap plugin to open and use sqlite databases on Android, iOS and Windows with HTML5/Web SQL API - GitHub - storesafe/cordova-sqlite-storage: A Cordova/PhoneGap plugin to open and use ...

Continue reading

【Monaca】アフィリエイト広告で収入を得る方法

「ギャンブル収支管理」で採用している方法で、アプリでアフィリエイト広告で収入を得る方法を紹介します。
※iframe使用のため、iOS版はリジェクトされる可能性があります。

play.google.com
https://play.google.com/store/apps/details?id=jp.wpblog.hatopp.gambleprofitma...
https://play.google.com/store/apps/details?id=jp.wpblog.hatopp.gambleprofitmanager&hl=ja

Continue reading

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

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

otak-lab
【Monaca】Onsen UI 自作のテンキーボードを表示する
🕒️2020/04/03
今回は、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=&quot...

Continue reading