バージョンアップで解消できた問題
- トラックパッドが使えるようになった。Boot Camp コントロールパネルにトラックパッドのメニューが表示されるようになった。
- Magic Mouse の中央ホイールが使えるようになった。
これらの問題は、【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子 | oki2a24 で確認しておりました。
この度、解決できましたので手順を残しておきます♪
【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】 | oki2a24 の続編となります
今まで、Monaca に Onsen UI を組み込んで AngularJS を駆使して次の 2 つのデータ共有方法を学習してまいりました♪
- レベル1. 同じページに複数のコントローラー
- レベル2. 異なるページに複数のコントローラー
そして、次の点を学びました。
- ファクトリーオブジェクトは 1 つのみ存在する。
- $scope はファクトリーの参照である。
- ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
- ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される
実際のアプリでは、一覧画面でひとつを選択して詳細画面へ行き、編集や削除を行い、一覧画面へ戻る、そのとき詳細画面の変更内容は一覧画面へ反映済み、という動きが普通と存じます。
今回は、そのようなケースを想定して次のような仕様のサンプルを作ります。
- 一覧画面: 一覧データはサーバから取得してメモリに保存（ただしサンプルなのでダミーの JSON ファイルを作って使う）
- 一覧画面 → 詳細画面の移動時: サーバから詳細データを取得してメモリに保存（ただしサンプルなのでダミーの JSON ファイルを作って使う）
- 詳細画面: 内容を変更して「変更」ボタンをタップしたら、サーバへ内容を送信し、詳細メモリ・一覧メモリの内容も更新する。（ただしサンプルなのでサーバへ変更内容は送信しない）
ネットワーク通信は実際には行いません。一覧から詳細への移動時は毎回ダミーの JSON ファイルからデータを取得いたします。したがいまして、詳細画面が表示される時は毎回同じデータです。
レベル3. 異なるページに複数のコントローラーでデータはオブジェクトの配列
やりたい事
- true、false を HTML では任意のフォーマットに変換して表示したい。
- たとえば、true ⇒ ○、false ⇒ ×
- AngularJS を使いたい。
調べてみますと、フィルタという機能を使えば、たとえば「1」を「$1」と表示形式を指定できるようです。
さらに、自作のフィルタも作ることができるそうですので、やってみました♪
カスタムフィルタのサンプルコード
ポイント
- Datepickerプラグイン – Monacaドキュメント には「こちらのプラグインはiPhoneでのみ動作し、iPadでは正常に動作しません。」とある。
- しかし、iOS 8 の iPad で確かめたところ、Datepickerプラグインを使ってネイティブ側の DatePicker コントロール ( 日付設定 ) にアクセスできた。
- ただし、タップした場所ではなく常に左上に表示され、デザイン性には欠けた。
ポイント
- 国際化、i18n、多言語対応用 JavaScript ファイルを読み込む。
- date フィルターの使い方は同じ。
i18n ファイルの導入・入手手順
ポイント
- Material Design Lite には、サーバにファイルをアップロードする <input type=”file”> タグに対応するパーツは無い。
- <input type=”file”> を実現するには、アイコンやラベルを使用して対応すること。
この悲しい結論に至るまで。
Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。
初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。
JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。
前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。
今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪
【まとめ】AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入したときのふるまい・ポイント
- ファクトリーオブジェクトは 1 つのみ存在する。
- $scope はファクトリーの参照である。
- ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
- ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される
はじめに
- Monaca で iOS アプリを作っている
- 一覧ページと詳細ページがあり、それぞれ別の AngularJS のコントローラーが紐付いている
- 一覧ページで選択したデータは、移動先の詳細ページで値を更新できる
- 詳細ページで更新した値は一覧ページの値へも反映されていてほしい
こんなことを実現したいのですけれども、コントローラー間でデータの共有ってできるのかしら？
パッと作りたいもの
- ヘッダーとそこにメニュー
- フッター
- レスポンシブ
- パスを指定するページを作りたい。
- リストデータをテーブル表示するページを作りたい。
- コードを書くというよりも、パーツをペーストすることでウェブページを組み立てたい
- インターネットとの通信はしない。
パッと作るのに使えそうなフレームワーク
Windows10 へアップグレードする前の環境
- MacBook Pro
- Boot Camp
- Windows8.1
アップグレードした時の様子
ゆっくりとメモや写真などを撮りながら進めました。
- かかった時間: 約 65 分