Techvenience

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

AngularJS

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や他のボタンを押させたくないというのがあった。 これ…

その3 Cordovaプラグインの追加【Admob】と動作確認(広告表示確認) - 試行錯誤編2 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART3

その3 Cordovaプラグインの追加【Admob】と動作確認(広告表示確認) - 試行錯誤編2 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART3 その3 Cordovaプラグインの追加【Admob】と動作…

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-2【UI開発】画面内スクロールの実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】 1章 UI開発 1-2【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel】 前回はページ遷移の方法に関してまとめた。 it-innovation.hatenablog.com…

【ng-if】空文字、空配列、nullの表示・非表示について -【付録】AngularJSの基本操作

【付録】AngularJSの基本操作 【ng-if】空文字、空配列、nullの表示・非表示について 前回の記事が少し物足りなかったので、付録と言う形で追記。 it-innovation.hatenablog.com ng-ifがどのような条件かで表示を行うのかを、もうちょっと細かくまとめてみた…

3-1.【ng-if】条件に応じて表示を変化させる① - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作 3-1.【ng-if】条件に応じて表示を変化させる① 前回は「ng-Repeat」を使って、配列の中身をループさせて表示させる方法についてまとめた。 it-innovation.hatenablog.com 今回は「ng-if」を使って条件に応じた表示変化についてま…

2.【ng-Repeat】データをループさせて表示する - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作 2.【ng-Repeat】データをループさせて表示する 前回はデータモデルをビューへ表示する方法をまとめた。今回はデータが配列などの場合に、それをループさせて表示させる方法をまとめる。 使うのは「ng-Repeat」 <前回までの記事>…

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の基本操作」という内容の記事を何回かに分けてまとめているけど、このブログの主なテーマの一つがハイブリッドアプリ…

1-2.【AngularJS】データモデルをビューへ表示する② - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作 1-2.【AngularJS】データモデルをビューへ表示する② 前回の記事では、用意したデータモデルをビューへ表示させる方法をまとめた。 it-innovation.hatenablog.com 今回は、inputなどへ入力した値をビューに反映する方法について…

1-1.【AngularJS】データモデルをビューへ表示する① - 【連載】AngularJSの基本操作

AngularJSの基本操作 1-1.【AngularJS】データモデルをビューへ表示する① 今回からAngularJSの実装メモをまとめていく。勉強しながらなので、ベストアンサーではないかもしれないので、そこはご理解いただけたらと・・・ ネット接続とブラウザがあればできる…

【AngularJS】今後の課題、調べること【備忘録】

ただの羅列 ・AngularJSの、コントローラでfunctionを分離したことによる利点は? ・AngularJSのmoduleがもつメソッド?について詳しく ・AngularJSのコントローラ、ディレクティブ、フィルタとは? ・AngularJSの情報をまとめたWikiの作成 ・AngularJS以外…

【AngularJS】$scopeを使う場合と使わない場合の比較【スコープ】

今回はAngularJSの$scopeについて調べた。 $scopeとは?? it-innovation.hatenablog.com 上記の記事でも書いたが、 AngularJS 2系では$scopeが廃止される $scopeを使わないでも実装が可能 ということもあって、基本的には$scopeを使わない方針。 $scopeを使…

【AngularJS】$scopeとは何か【スコープ】

今回はAngularJSの$scopeについて調べた。 $scopeとは?? リファレンスで調べてみたけど、分かりにくかったので簡単に言うと、 ビューとコントローラの橋渡し 具体的には、 モデルをビューにバインディングするためのオブジェクト ビューでのイベントを受け…

【AngularJS】factoryとは【Service】

今回はAngularJSのfactoryについて調べた。 factoryとは?? リファレンスで調べてみた! サービス・インスタンスを返すために呼び出されるservice factoryを実装するためのもの。 これは、factoryに与えられているgetプロパティのみで構成されるproviderの…

【AngularJS】moduleとはなにか【モジュール】

AngularJSのmoduleについて <本日のメニュー> moduleとは? moduleの作成 moduleの取得 moduleの依存関係 moduleの推奨セットアップ moduleのメソッド ----------------------------------------------------- moduleとは? 公式リファレンスによると Angula…

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