Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

OnsenUI

1-3【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel】

1-3【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel】 今回は一つのタブ内での横スクロールでの画面遷移を実現するための方法。 今回のアプリでは、目標貯金金額を貯めるための期間や月々の貯蓄額などを計算するためのページでこの機能を使…

1-2【UI開発】OnsenUIを使ったページ遷移の実装2 【Navigator編】- 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 -

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 1章 UI開発 1-2【UI開発】OnsenUIを使ったページ遷移の実装2【Navigator編】 このページは、過去の記事www.sky-limit-future.comを最新化したもの。 www.sky-…

【ons-modal】ons-modalを使った実装【OnsenUI・Angular】

【ons-modal】ons-modalを使った実装【OnsenUI・Angular】 管理系のアプリを作成した時の話。 初回起動時にパスワード入力画面を表示させるという実装で、 パスワード画面が表示されている時は、tabbarや他のボタンを押させたくないというのがあった。 これ…

【iOS】document.getElementById('hogehoge').click()が正しく動かなかった件【clickイベント】

【iOS】document.getElementById('hogehoge').click()が正しく動かなかった件【clickイベント】 OnsenUI 2.0 AngularJS 1.5現在いるタブのとあるボタンを押下すると、他のタブに遷移するという実装が必要だった。 最初は遷移したいタブにid="hogehoge"を付与…

1-1【UI開発】OnsenUIを使ったページ遷移の実装1 【tabbar編】- 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 -

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 1章 UI開発 1-1【UI開発】OnsenUIを使ったページ遷移の実装1 【tabbar編】 このページは、過去の記事www.sky-limit-future.comを最新化したもの。 はてなブロ…

【OnsenUI・Angular】Chart.jsでグラフ実装 その2【Monaca・ハイブリッドアプリ】

【OnsenUI・Angular】Chart.jsでグラフ実装 その2【Monaca・ハイブリッドアプリ】 it-innovation.hatenablog.com 以前のブログで、実装に触れなかったので今回は実装内容を見ていく。■index.html htmlではcanvasタグにチャート描画を行う。 js側で拾うために…

【OnsenUI・Angular】単一ページで横スクロールを実現する方法【Monaca・ハイブリッドアプリ開発】

【OnsenUI・Angular】単一ページで横スクロールを実現する方法【Monaca・ハイブリッドアプリ開発】 タイトルの内容。 スクロールのようにページ遷移するのではなく、一つのページ内で横スクロールを実現したかった。 やりたいことだけやって、optionなどは試…

【OnsenUI・Angular】ons-dialogの中で、Angularの「this.hogehoge」が認識されなかった【Monaca・ハイブリッドアプリ開発】

【OnsenUI・Angular】ons-dialogの中で、Angularの「this.hogehoge」が認識されなかった【Monaca・ハイブリッドアプリ開発】 タイトル通り。 ons-dialogの中で、this.hogehogeのようにthis.変数名とやっても認識されない(undefinedとなる) ハマったので備考…

【Monacaハイブリッドアプリ】NVD3でグラフ作成。うまくいかないの巻【Angular・OnsenUI】

NVD3でグラフ作成。サンプル使ったけど。。。なんで? monacaでonsenUI,Angularを使用したグラフ作成がしたくて参考になるものを探していた。blog.asial.co.jpこのブログを参考に作成した結果がこれ 表示ちっさ。heightやwidthをいじってみたけど、変わらな…

1-1【UI開発】OnsenUIを使ったページ遷移の実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 1章 UI開発 1-1【UI開発】OnsenUIを使ったページ遷移の実装 【Navigation・tabbar】 2017年8月24日記事の最新化 移行 www.sky-limit-future.com www.sky-limi…

0.5章 アプリの設計 -【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・Angular】 0.5章 アプリの設計 前回の記事ではアプリ開発に関する今後の連載予定についてまとめた。 it-innovation.hatenablog.com 今回は、【連載】ハイブリッドアプリ開…

0章 連載内容まとめ -【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 0章 連載内容まとめ 現在、「AngularJSの基本操作」という内容の記事を何回かに分けてまとめているけど、このブログの主なテーマの一つがハイブリッドアプリ…

【OnsenUI】リストを使って、詳細画面への遷移を行う【AngularJS】

前回の記事にも書いた通り、AngularJSとOnsenUIのリストを使って画面遷移を実装する it-innovation.hatenablog.com 記事の作成から数年が経ち、情報が古くなったので新たに記事をおこした。 OnsenUI vaer2.0を仕様 www.sky-limit-future.com ---------------…

【ハイブリッドアプリ開発】今後の課題【AngularJS・LocalStrage】

昨日の続き <調べること> LocalStrageの容量について OnsenUIのリスト押下時の画面遷移について AngularJSを用いたLocalStrageの使用方法 AngularJSの全般 それぞれについて簡単に説明してから、「OnsenUIのリスト押下時の画面遷移について」を実際に吟味…

【ハイブリッドアプリ開発】Monacaでハイブリッドアプリ開発【OnsenUI・AngularJS】

前回から更新がかなり遅くなった。 今回からMonacaを用いたハイブリッドアプリ開発について書いていく。 Corodvaの開発環境構築についても随時更新していく予定。 今回は今後まとめていく内容について、忘れないようにメモを! ちなみに、Monaca + OnsenUI …