開発ノート ⁽⁹¹⁾

Angular2でSPAなシステム開発：serviceのデータを同期するならPromiseよりもEmitter、EmitterよりもObservable誤用ということなのですが、Ionic2（というかAngular2）のserviceのデータを同期させるのは、EventEmitterを使うのがわかりやすいです。コードを読む人もObservableよりわかりやすいのでは無いでしょうか。Lifecycle Hooks – ts最初はこの中のngAfterContentCheckedとかngAfterViewCheckedを使って、serviceのget系メソッドを実行してみたのですが、初期ページを表示させてその後ページが1回遷移するだけで30回以上このイベントが呼ばれていました。そのたびにメソッドを呼んでいるのは余りにも無駄でパフォーマンスの無駄が大きいと思われました。 import {Injectable， EventEmitter} from 'angular2/core';@Injectable()export class SettingsService { public hello:string = 'hello'; helloChange: EventEmitter = new EventEmitter(); constructor() {} getHello(){ return this.hello; } setHello(str:string){ this.hello = str; this.helloChange.emit(this.hello); }} これがemitする側のサービス。 this._helloSubscription = _settingsService.helloChange.subscribe((value) => { this.myhello = value; }); 受ける側のページコンポーネント。これだけで同期できます。参考にしたのはこのディスカッション。最初の方のドットルールでは値を反映させることはできませんでした。javascript –…

Ionicには最初からフラットなデザインのアイコンが多数装備されています。Ionicons: The premium icon font for Ionic FrameworkFontawesomeが定番だと思いますが、Ioniconsでも充分でしょう。７００個もありますから普通に使う分には該当するものが見つかると思います。がこれを使おうとしてちょっとハマりました。上記のサイトでアイコンにマウスオーバーするとアイコンのコードのようなものが現れるのですが、これをタグの中で指定してもアイコンが表示されません。 いろいろ試行錯誤したところ、下記のページの名称で指定すれば表示されることが確認できました。Ionic 2 | Ionicons – Ionic 2 Developer Preview – Ionic Frameworkつまり ではなく、 です。 “””

Ionic2のアプリケーションでスクリプトからスタイルシートの要素を変更したいと思い色々試行錯誤していたのですが、普通のウェブサイト構築の時に使うdocumentオブジェクトからたどる方法では上手くいきませんでした。オブジェクト自体は取得できるのですが、その先の要素指定が上手くいきません。で、Angular2のサイトに戻ってみたらそのまんまなディレクティブがありました。NgStyle – js {{registeredRiders[j].id}}:{{registeredRiders[j].name}} ngStyleにJSのオブジェクト形式でスタイルシートの要素を渡します。シングルクォーテーションを付けずに渡すとクラスのプロパティにバインディングされます。シングルクォーテーションをつけて文字列にするとそのままの内容でスタイルシートの要素として解釈してくれます。ちなみに何をやりたかったかというと、画面上にボタンを配置して動的にボタンのサイズを変更したかったんです。これができるとユーザーやシチュエーションに応じてインターフェースを変更できるのでよいですね。ただ上手くやらないとHTMLにデザイン要素が混入して混乱しそうです。sizeとかを変数で渡すのでは無く、オブジェクトごとスクリプト側で指定して、ngStyleはidやclassを指定するようなスタイルで使用するのがよいかもしれません。”””

かわっちタイマー（バイクジムカーナ用自作タイム計測機の名前です）2号機で現在実装している光電センサとの接続回路のメモです。ノイズによる誤動作を防止するため、光電センサの出力を直接マイコンにつなぐのでは無く、光電センサの出力で一旦フォトカプラのLEDを明滅させ、オン時にフォトトランジスタ側のコレクタをグランドに落としています。直接接続だと、光電センサからマイコンまでの配線が１０ｍを超えてくるとアンテナ効果が大きく、入力が不安定になっていました。２ｍ程度でも室内で蛍光灯の電源を入れただけで誤動作する状態です。これがフォトカプラを介すると入力が安定し、誤動作しなくなりました。電圧変換も一挙に行えるので、電圧変換のために実装していた分圧抵抗が減らせる分、実装もシンプルだと思います。実験に使用したオムロンのE3JK-RN12は回帰反射型で、反射板との間を遮断したときに遮光でダーク、遮断しないときに入光でライトになります。今のところダークオンに設定していますので、遮断時にNPNトランジスタがオンでLEDもオン、遮断しないときにNPN がオフでLEDもオフです。手で光を遮ったときに、オレンジ色の動作確認燈が点灯します。手を離すと確認燈が消灯します。今回の回路では動作の確実性を優先させるため、LEDへの電流量を確保すべく、電流制限抵抗を1KΩにしました。定常状態でオフになる使用法であればこれでもよいですが、オンが多いのであれば消費電流量が多いので、抵抗を増やした方がいいかもしれません。回路図中のＡ点で実測してみると、入光時が11.3V、遮光時が0.7Vでした。出力はマイコンの入力容量が小さいので、大きなプルアップでも十分と考え、10KΩでプルアップしています。本当はマイコンとフォトトランジスタのコレクタの間に100Ωぐらいの抵抗を入れて、マイコンの入力にある電荷を抜くときの電流を制限すべきだと思います。ただ今回の使用方法ではオンオフの頻度が少ないのでフォトトランジスタの内部抵抗と熱容量でも十分と判断したので、抵抗は入れませんでした。回路図中のＢ点で実測すると、オン時（遮光・光電センサとフォトトランジスタ共にオン）で0.1V、オフ時で（入光・光電センサとフォトトランジスタ共にオフ）で3.3Vでした。スレショールド電圧からすると十分すぎますので、もっとLED側の電流が少なくてもよいかもしれません。マイコン側はダウンエッジを割り込みで検出し、ソフトウェアのロジックでチャタリングを除去しています。”””

HTMLアプリなので画像を表示するにはimgタグを使うわけですが、パスの指定が特殊です。appフォルダ以下のhtmlテンプレートがあるフォルダに画像を配置しても、ビルド時にwwwにはコピーされません。そのため最初からwwwのimgに画像を記録しておく必要があります。こうしておくと./img/~でアクセスできます。 - センサーは設置値前に、感度最大、ダークオンに設定してください。2つのダイヤルを最後まで右回転させます。  - センサーは反射板に正対させます。センサーから出た光が反射板で跳ね返って帰ってくれば、オレンジのランプが消えます。  “””