Weakened Not So Fun time

調べもの関係のページ。

[weakened-not-so-fun-time]

Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応）

連載： React/Angular2時代のWeb開発 (3)モバイルUIフレームワークのド本命、Onsen UI 2正式リリース！──React, Angular 2両対応！React/Angular

RTMAPの基本機能はできつつあるものの、UIがイマイチ進まず停滞中だったところ、便利なフレームワークが登場していることを知りました。

Angular2を使って動作し、Angular2の複雑さを隠して便利なUIを提供してくれる便利なフレームワーク「Ionic2」で、RTMAP他を作っていくことにしてみます。

[weakened-not-so-fun-time]

In this post we will see how the Angular 2 Forms API works and how it can be used to build complex forms.

フォームの作り方だけど、地図の表示に使えそうな考え方。

Template Driven = コンポーネントの持つ公開データ(user.nameのような)を、フォームのテキストボックスに双方向バインディングするやりかた。

Model Driven = フォーム側にコントローラの名前を入れておき、コンポーネント側でコントローラ(FormControl)を持つやりかた。自前の挙動を入れやすいらしい。

Angularが提供する双方向データバインディングを無理に使ってTemplate風に作る必要はないみたい。

[weakened-not-so-fun-time]

JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();

気になったら即調べるが吉、ということで。 ちょっと追加！

うっかりすると忘れてしまうこと…1+1 = 11 になるので、数値のリテラルと演算するときは気を付けないと…実際にはまったので、変数x に対して「(+x)」で数値にした。

[weakened-not-so-fun-time]

Angular is a development platform for building mobile and desktop web applications

つまづきポイント: ViewEncupselation(ビューのカプセル化の話) に関連する話。

Angular2では、ビュー(コンポーネントといった方が良いかも?)の独立性を高めるため、外部のビューのCSSの影響を一切受けないようになっているようです。これにより、コンポーネントの利用者のCSSに無関係に、自分のビューのCSSを設定できるというメリットがあります。

これは一見便利な機能ですが、親子ビューを連携させて使う「タブ」のような機能を実現しようとすると、つまづきポイントになります。(これでまた時間が浪費されました)

親子ビュー間の関係でCSSを適用する場合、この記事のリンク先「Special selectors」の「:host」や「:host-context」を参照のこと。

「:host」疑似クラスセレクタ

コンポーネントのホスト(CSS適用対象のコンポーネントを格納している親要素 = 親コンポーネントのテンプレート内の要素)を指す疑似クラスセレクタ。通常のセレクタは自身より下の要素しか対象にできないので、自身より上の要素を指す唯一の手段として用意されている。

:host( セレクタ )　と記述することで、対象を絞ることもできる。例えば、「activeクラス」が指定されたホストを指すなら、「:host(.active)」と記述すればよい。

「:host-context」疑似クラスセレクタ

コンポーネント外の条件(親要素の更に親だったり、Bodyだったり)に基づいてCSSを適用したい場合がある。その場合は「:host-context」疑似クラスセレクタを使用する。

このセレクタは、コンポーネントのホストからDocument Rootまでを辿って、コンポーネントが置かれているコンテキストを知ることができる。

「/deep/」セレクタ

コンポーネントは通常、コンポーネント自身にだけ適用される。

「/deep/」セレクタを使用すると、子孫コンポーネントのビューすべてに適用することができる。「/deep/」の代わりに「>>>」を使用することもできる。

[weakened-not-so-fun-time]

地味に面倒なファイル名置換

コマンドプロンプトで複数ファイルの名前変更をしようとしたところ、うまく動かない現象に見舞われました。

例えば、以下のように「変更前」から始まるファイル名を「変更後」から始まるように文字列置換しようとしたところ、最初のファイルしかできないという症状です。

@echo off for %%i in (変更前*) do ( set src=%%i set dst=%tmp:変更前=変更後% move %src% %dst% )

原因は for文を使うときに、ループ内の変数がループを開始した時点で「展開」されてしまうことにありました。(ループしても最初に決まった値から変わらない)

対策は簡単で、「遅延環境編巣の展開」という、ループごとに評価しなおせるようにすれば良いのだそうです。(参考)

以下のように直すとうまくいきました。引数1で指定したパターンを含む⇒引数2に直します。非常にややこしいけどこれで何とかなります。

@echo off rem 遅延環境変数を有効化 setlocal enabledelayedexpansion set prefix_before=%1 set prefix_after=%2 for %%i in (*%prefix_before%*) do ( set src=%%i set dst=!src:%prefix_before%=%prefix_after%! move !src! !dst! )

[weakened-not-so-fun-time]

Clarify the Firebase connections

I am a little confused about the Firebase pricing model, special concern is the connections or more precisely concurrent connections. Let's have an example of a mobile app for iOS called FanZONE:...

同時接続数に関する解説。

無料で使用できるFirebaseは同時接続数が限られているので、無駄に接続数を消費しないよう工夫が必要。

goOffline を使えば、接続を切ることができるそうなので、リアルタイムDBの特性を活かす場面でなければ止めておくとか、そもそもStorageを使うなどした方が良さそう。

ブラウザを複数立ち上げるとその分接続数は増えるものの、実使用上はそんなに大きな数にはならないらしいので、過敏になりすぎなくても良いという話もあるけどどうなんだろう?

[weakened-not-so-fun-time]

Cannot find module ‘leaflet’

このエラーが出たら、package.jsonに以下が含まれているか確認。

  "leaflet": "latest",    "@types/leaflet": "latest"

(JavascriptのライブラリをTypescriptで使うときは同様に types が必要)

Leafletを「import * as Leaflet from ‘leaflet’;」と読み込もうとしたら、このエラーが出て何もできなくなってしまいました。Typescriptに対する知識不足から 貴重な休日の5時間がつぶれたので、再発防止のためにメモを残します。

原因はJavascriptで書かれたライブラリ(Leaflet)は、そのままではTypescriptでモジュールとして読み込めないということにありました。

今までお試しプロジェクトでうまく使えていたのは、開発途中で試しにインストールした「Angular2.leaflet.component」に「@types/leaflet」への依存関係があり、Typescriptに対してLeafletの型情報が追加されていたためでした。

その後 「Angular2.leaflet.component」 をpackage.jsonから削除したために、新しく作ったプロジェクトではLeafletの型情報「@types/leaflet」がインストールされず、エラーに至ってしまうのでした…

しょぼい。

[weakened-not-so-fun-time]

Let's learn a ton of hidden ngFor features that are not often mentioned, but mot of all we are going to learn how ngFor is not meant only for Arrays

Angular2でngForを使うと、配列のような構造をもとに、記入欄やメッセージ欄のような定型的な要素を繰り返し生成できるようになっていますが、気になるのがその処理速度。何度もDOMを生成・削除しないか心配でした。

しかしAngularはしっかり者で、無駄な処理はしないよう工夫されていました。その工夫を生かすのが「TrackBy」という機能。

オブジェクトの持つIDのような要素でオブジェクトを識別できるようにしてあげると、オブジェクトの内容が変わったのか否かを効率よく判断できるようになるそうです。

なので、ngForを使ってLeafletのマーカを作ろうとした場合、無駄な生成・削除が行われることはないので安心して使えそうです。

[weakened-not-so-fun-time]

Leaflet をAngular2に組み込み、更にFirebaseと連携させてマーカの位置を共有できるようにしました。まだまだ先は長いですが、大事な一歩です。

ソースコードはこちら

[weakened-not-so-fun-time]

AngularFireを使って、配列を読み書きするテストです。

チャット的なものが簡単に作れてしまいました。変更があるたびに全データを読んでいるのであまりよろしくない構造ですが、最近のPCは性能が良いのでさほど支障がありません。

[weakened-not-so-fun-time]

Firebaseを読み書きしてみる

Firebaseのリアルタイムデータベースのテストをしてみました。

サンプルプログラムはこちら

概要

操作画面のLocalTextにはname(左)とmessage(右)の入力と、入力した内容を送信するためのsubmitボタンがある。submitボタンを押すと、入力した内容がFirebase上の「test」というデータに書き込まれる。

操作画面のServerTextには、Firebase上の「test」というデータが表示される。

動画の説明

最背面に表示されている「Firebase Console」は、Firebase上のデータを表示している。データの変化はリアルタイムに反映されるようになっている。(さすがGoogle)

前面にある3つの操作画面の1つでname, messageを入力しsubmitボタンを押すと、Firebase Consoleのデータが更新されるだけでなく、すべての操作画面のServerTextが更新されることが分かる。

これで、Firebase上のデータの読み書きができることが確認できた。

今後やっていくこと

地図アプリを作るにはまだ以下の操作ができるようにならないといけないので、順番にやっていく。

配列の読み書き

地図の表示

認証機能の実現

Census APIとの連携(オフライン時は表示させない = スパイ防止)

[weakened-not-so-fun-time]

Firebaseを動かしてみる

準備が大変なので何回かに分けます。

サンプルプログラムはこちら

1. Firebaseの追加

テンプレートの状態では、まだfirebaseを使う準備ができていないので、必要なモジュールを[package.json] に追加し、インストールを行う。詳しい使い方についてはGitHubのガイドを参照のこと(例えばここ)。

rxjs (もともと入っているが、バージョンが低い場合は上げておく)

firebase

Angularfire2

インストールは、[Terminal+]と書かれたところで、$マークが表示されているところに[npm install]と入力すればあとは勝手にやってくれるようになっている。

Angular CLIが動作中だとこの操作は行えないので、一旦停止すること。

2.NgModuleにFirebase(AngularFire)を組み込む

この辺は仕組みがややこしいく、まだ勉強中なので、インストール・設定ガイドをそのまま使う。[4. Setup @NgModule]に載っている変更で、ルートモジュールでFirebaseのインスタンスを作る。

インスタンスは一個作ればOKで、別のコンポーネントやサービスで import AngularFire とすると、作成したインスタンスにアクセスできる仕組みらしい。

3.コンポーネントを作る

Firebaseからのデータを試しに表示するために、ビュー(Angular2ではコンポーネントと呼ばれているそう)を作成する。

Angular CLIでは命名ルールが決まっていて、ハイフンで区切って[my-text]と入力するとソースコード上は[MyTextComponent]となる。

4. コンポーネントにFirebaseを組み込む

事前にNgModuleで作成したAngularFireのインスタンスを、コンポーネントで使えるようにする「Dependency Injection」を行う。これも インストール・設定ガイド をそのままやれば済むので割愛。

...と、これだとあまりに不親切だし、例がないとわからないので作成した。GitHubよりダウンロードし、以下のようにすれば動作を確認できる。

npm install

/src/app/basic/firebase_config.ts に「ウェブアプリにFirebaseを追加」から得られるキーなどの情報を張り付ける

Angular CLIを実行し、ブラウザ上で動作させる

Firebaseのブラウザコンソールで、データを操作すると、それに追従してブラウザの文字列も変化する

[weakened-not-so-fun-time]

Eclipseでプロジェクトを作る

EclipseでAngular2を用いたクライアントを作成する手順をまとめます。もし同じように挑戦したい方は、まず同じようにやってみてください。事前にEclipseをインストールし、Angular IDEを追加していることが前提となります。

まずEclipse上でプロジェクトを作成する。[New Project]を選択すると、事前にEclipseにAngular IDEをインストールできていれば下のようにAngularプロジェクトが選べる。(選べない場合はインストールできているか確認する)

Angularプロジェクトを選択し、必要な設定をすると、裏でAngular CLIというツールが動いて、テンプレートが生成される。なお、Angular CLIのバージョンはbeta.24以降が好ましい。古いと、「'listLazyRoutes' of undefined」という不可解なエラーが発生する場合があり、対処法が良く分からない。ドツボにはまる前に設定をしておくこと。

Finishを押してプロジェクトを作ると、以下のような画面が出てくる。ソフトのダウンロードに時間がかかるので3分位待つ必要があるので注意。

これでプロジェクトのテンプレートは完成。試しに以下のように虫を押すか、Start Server in Development Mode(Productionでも可)を押すと、ブラウザが立ち上がり、「app works!」と表示されるはずである。

今度は、完成したテンプレートをGitHubに登録するため、プロジェクト共有の設定を行う。まずは、プロジェクトを右クリックして[Share]>[Share Project..]を選択する。

出てきたダイアログの[Use or create repository in parent folder of project]を選択する。はじめは以下のように[Finish]が選択できない状態だが、[Create Repository]を押すと…

以下のように[Repository]の列に[.git]が出てきて、[Finish]が押せるようになる。

上記の作業が完了した時点でローカルのリポジトリは生成されるが、中身はまだ空である。ローカルのリポジトリに、ファイルを保存するためにはコミットを実行する。対象ファイルは、リストに表示されたファイル全てでOK(不要なものは事前に取り除かれているので)

コミットまでできたら、ローカルのリポジトリにファイルが保存された状態になる。

今度は、ローカルのリポジトリをGitHubにPushする。(これにより他の人が閲覧したり編集したりできるようになる)。

そのためにはまず、ローカルのリポジトリの設定画面で、Remoteの設定をする必要がある。(ローカルのリポジトリは、GitHubにあるオリジナルを持ってきたクローンであると教えてあげることで、ローカルのリポジトリの内容をGitHubに反映する=Pushできるようになる)。設定画面のURLにはGitHubで表示されるリポジトリのURLを入力する。

今回はGitHubに事前に登録してあるSSH公開鍵を使った認証をしたいので、↑のURLはSSHのものを選択している。↓の設定画面のPutty Key(秘密鍵)には、GitHubに登録してある公開鍵に対応したPuttyの秘密鍵のファイル(.ppkファイル)を設定している。

これで[Add New/Save]をすれば、 ローカルの編集をGitHub上にPushできるようになる。

とりあえずこれで開発の準備はOKになります。…あまりに説明のない手順でした。