【Angular】ngTemplateOutletディレクティブの使い方
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
ngTemplateOutletの使い方について基本を学んだので備忘録として書きます。少し応用(?)も入れました。
あと私事ですが、今回からMarkdownで記事を書いてます。コードが綺麗に書けて感動！
ngTemplateOutletの使い方
ngTemplateOutletとは？
あらかじめ用意したテンプレート(ng-template)を任意の場所に挿入することができるディレクティブです。
構文
<ng-container *ngTemplateOutlet="参照元変数; context: テンプレートに反映させるオブジェクト"> </ng-container>
ng-template側では以下のようにして変数を受け取ります。
<ng-template #参照元変数 let-変数名="テンプレートに反映させるオブジェクトのプロパティ名"> // テンプレート化したいコード </ng-template>
例
ngTemplateOutletディレクティブで呼び出すテンプレートを指定し、contextに指定したオブジェクトはテンプレートに引き渡すことができます。
component.html
<ng-container *ngTemplateOutlet"person; context: persons[0]"> </ng-container> <ng-template #person let-name="name" let-gender="gender" let-hobby="hobby"> <ul> <li>名前: {{name}}</li> <li>性別: {{gender}}</li> <li>趣味: {{hobby}}</li> </ul> </ng-template>
component.ts
persons = [ { name: 'Yamada', gender: 'man', hobby: 'cooking' }, ... ];
応用編
$implicit
$implicitは指定した値を、明示的に値を指定していない"let-変数名"属性に割り当てられます。 具体的に見ていきましょう。
component.html
<ng-container *ngTemplateOutlet"person; context: persons[0]"> </ng-container> <ng-template #person let-message let-name="name" let-gender="gender" let-hobby="hobby"> <ul> <li>名前: {{name}}</li> <li>性別: {{gender}}</li> <li>趣味: {{hobby}}</li> <p>{{message}}<p> </ul> </ng-template>
component.ts
persons = [ { name: 'Yamada', gender: 'man', hobby: 'cooking' $implicit: '今日は良い天気ですね' }, ... ];
$implicitの値"今日は良い天気ですね"はlet-message属性に割り当てられ、template内でローカル変数"message"として使うことができます。
ngTemplateOutletで複数のオブジェクトをテンプレートに渡したい
あまりないケースだと思いますが、複数のデータをngTemplateOutlet内で指定したい場合です。
component.html
<ng-container *ngTemplateOutlet"person; context: {$implicit: '今日は良い天気ですね', name:'Yamada', gender: 'man', hobby: 'cooking'}"> </ng-container> <ng-template #person let-message let-name="name" let-gender="gender" let-hobby="hobby"> <ul> <li>名前: {{name}}</li> <li>性別: {{gender}}</li> <li>趣味: {{hobby}}</li> <p>{{message}}<p> </ul> </ng-template>
これも先程の$implicitを使った例と同じ結果になります。注意点はcontextにはオブジェクト形式で値を渡さないといけないので、{}(波括弧)を使用する必要があります。
今後に向けて
ほぼ参考書に乗っていた内容です。
半年ほどAngularの勉強していますが参考書にこんな内容が載ってるとは知りませんでした。
参考書は熟読しないといけませんね。
Markdown記法いいですね。
もっと早く始めてたら良かった。
参考
素晴らしい記事に感謝致します。
FOX HOUND TECH
はてなで使えるMarkdown記法 - hero-rinのブログ
エンジニア向け作業用BGM集
最近はコロナウイルスの影響でリモートワークになったエンジニアの方も増えたのではないでしょうか？
在宅だと周りの目が気にならないのでのんびり作業をしがちですよね。オンラインミーティングの向こう側では実は...なんてこともありそうですね。
仕事に対するモチベーションは人それぞれだと思いますが、できれば在宅でも集中して仕事をしたいところです。
そこで今回は在宅でも集中して仕事をするための作業用BGMについて考えてみました。
【目次】
そもそも集中して仕事をするには？
はっきり言って人それぞれだと思います←
私の場合は
- 適度な雑音
- 適度な満腹
- 十分な睡眠
- 仕事着
- ディスプレイがある
- 仕事に詰まると何か食べ続ける
です。私は適度な緊張感がある方が集中して仕事ができます。
もう少しざっくりと説明すると、三大欲求が満たされている状態でストレスを五感で調整することで集中力を高めるといった感じでしょうか。
しかし全ての人がこれに該当するとは思えません。環境や時期によっても集中力の上げ方は変わってくると思います。なので集中して仕事をする方法は自分自身で見つけていく必要があります。
適度な雑音＝作業用BGM
私は適度な雑音がある方が集中できます。その適度な雑音の調整を行ってくれるのが作業用BGMです。
では適度な雑音とはどのような感じでしょうか。
- うるさすぎない
- 周りの雑音は消してくれる
- テンションが上がらない(曲にのれない)
- 意味(歌詞)が理解できない(英語も含む)
今回はこれらを基準にYouTubeから作業用BGMを選定しました。
第一位 焚き火
焚き火は圧倒的にオススメです！
音量の調節がしやすいですし、動画時間が1時間単位で用意されているので作業の時間経過を把握するのにも便利です。
第二位 楽器のみ
これは皆さんもよく聴かれているかもしれませんね。
カフェやコワーキングスペースなどでよくかかっているボサノバやジャズヒップホップ、和楽器などです。
第三位 ファンク
海外の昔の曲もオススメです。
英語は理解できないですし(私だけ?)、昔の曲はスロービートが多いです。最近の曲だと思わず体が反応しちゃうこともあると思うので、少し前の時代の曲なんて聴いてみるのはどうですか？
第四位 サカナクション系
「歌詞が理解できる曲がダメなら邦楽もダメなんじゃ...」と思われる方もいらっしゃるかもしれませんが、サカナクションの曲は歌詞がよく分かりません(サカナクションファンの方すみません汗)。ちなみに私自身サカナクションはとても好きなのです！
歌詞は理解できないのですが、落ち着いた曲は多いので作業用BGMとして重宝しております。
番外編 musicforprogramming
エンジニア向けの作業用BGMを探していたらこんなサイトを見つけました。
私は使っていませんが興味のある方はぜひ。
最後に
結局、俺得の記事になってしまいました。すみません。
いつもの曲だと少し集中力が下がってきたなと思われる方は、これらの曲をぜひ試してみてください。
皆さまのオススメの曲なんかも教えてもらえると嬉しいです。
【Ionic/Angular】Android Studioの初期設定で少し躓いたところ
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
【Ionicで作る モバイルアプリ制作入門[Angular版]】を参考にモバイルアプリ開発に手を出しました。Angularでさえまともなレベルじゃないのに手を出して良かったのかな…
最初の開発環境のところで少しだけ躓いたところがあったので備忘録として書いていきます。が、アプリの指示通りにしていたらまず大丈夫だと思いますので、この記事を見てIonic難しいとかは思わないでくださいね笑
Android Studioの初期設定で少し躓いたところ
１ ライセンスが許可されていないため一部のAndroid SDKパッケージのインストールに失敗した
ERROR: Failed to install the following Android SDK packages as some licences have not been accepted.
build-tools;28.0.3 Android SDK Build-Tools 28.0.3
platforms;android-28 Android SDK Platform 28
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html
Using Android SDK: /Users/ryuzan/Library/Android/sdk
Install missing SDK package(s)
解決方法
Install missing SDK package(s)
ここをクリックする。
common.jarをダウンロードしていない
ERROR: Unable to resolve dependency for ':capacitor-android@debug/compileClasspath': Could not download common.jar (android.arch.lifecycle:common:1.1.1)
Show Details
Affected Modules: capacitor-android
解決方法
Android Studioを再起動させる。
USBデバッグが無効になっている
今回はMacとAndroidをUSBで繋げて、アプリ画面をAndroidに表示させようとした時に躓いたところです。
For ADB to recognize your device as a target for deploying debuggable APKs, you must first enable USB debugging in the on-device developer options.
Depending on the version of Android you're using, proceed as follows:
◆On Android 8.0 and higher, go to Settings > System > About phone and tap Build number seven times.
◆On Android 4.2 through 7.1.2, go to Settings > About phone and tap Build number seven times.
Return to the main Settings menu to find Developer options at the bottom. In the Developer options menu, scroll down and enable USB debugging.
解決方法
Android8.0以上で以下の操作を行う。
Settings > System > About phone and tap Build number seven times.
設定>システム>電話情報にある「ビルド番号」を7回押す。
そうすると、どこかに「開発者向けオプション」が表示されます。私の場合は、設計>システムに「開発者向けオプション」が出現しました。
最後に「開発者向けオプション」のUSBデバッグを有効にします。
今後に向けて
まずは本の内容を実践していきたいと思ってます。
【Angular/TypeScript】Spread Operator(...)【ドット3つ】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
Angular After Tutorialに取り組んでいると、見慣れない「...(ドット3つ)」が出てきたので備忘録として記事にまとめます。
Spread Operator(...)
意味
早速ですが、参考資料から。
Spread Operator - TypeScript Deep Dive 日本語版
上記のサイトを参考にすると、【...は演算子で、配列またはオブジェクトの要素(中身)を展開する】ことができるみたいです。
たぶんイマイチ理解できていないと思います。スプレッド演算子を理解するには、例を見るのが最も分かりやすいとのことなので、次の項目で例を挙げていきます。
使い方
配列の代入(Array Assignment)
function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args); // foo.apply(null, args);と同じ結果
applyのthis引数にnullを渡さなくてもすむようになりました。
配列の代入(Array Assignment)
var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]
オブジェクトの展開(Object Spread)
const point2D = {x: 1, y: 2};
const point3D = {...point2D, z: 3}; // {x: 1, y: 2, z: 3}
const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}
Object.assignのような使い方もできるみたいです。これは便利。
今後に向けて
Angular After Tutorialでは、Storeサービスのupdateメソッドから受け取ったstateオブジェクトを展開して、userListオブジェクトに格納するために使っていましたね。
見慣れない構文だったので面倒臭くなりそうだなと思っていましたが、調べてみるととても便利な演算子であることが分かりました。
これからはどんどん使っていきたいと思います。
参考
素晴らしい記事に感謝いたします。
【Angular】Excelやスプレッドシートのような表を作ってみた⑥【テキスト修正時のフォント色変更(クラス付与)編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事のラスト(第6回目)です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第5回 要素(div/input)切り替え(スタイルバインディング)編
・第6回 テキスト修正時のフォント色変更(クラス付与)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
テキスト修正時のフォント色変更(クラス付与)編
テーマ
今回はテキストを修正した時に、フォント色を赤に変更させます。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
left_column: [ "FirstName", "Hobby2"],
right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
details: { 'ユニークキー':"abc1", Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
details: { 'ユニークキー':"abc2", Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
コード
component.html
<div class="person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
<div class="right-person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
component.ts
+ import { DOCUMENT } from '@angular/common';
export class PersonComponent implements OnInit {
・・・・・・・・・・
+ constructor(@Inject(DOCUMENT) private document: any) { }
ngOnInit() {
・・・・・・・・・・
+ addFontRedClass(uniqueKey, column) {
+ const className = uniqueKey + column;
+ const inputClass = 'input[class^="' + className + '"]';
+ const inputEl = this.document.querySelector(inputClass);
+ if (inputEl) {
+ inputEl.classList.add('change-data');
+ }
+ const divClass = 'div[class*="' + className + '"]';
+ const divEl = this.document.querySelector(divClass);
+ if (divEl) {
+ divEl.classList.add('change-data');
+ }
+ }
}
component.scss
.change-data {
color: red;
}
ポイント
物凄く見にくくてすみません。。。
今回は特にポイントはありません。要素を指定してあげて、クラスを付与するだけです。
逆にquerySelectorメソッドを使うのが正解なのか不安・・・
Elementを探さずに、classを付与する方法がありそう。
今後に向けて
この表を作るのに、自分は1ヶ月程かかりました。上司は1週間程で作れるとのこと。
しかし、こうやって冷静にまとめてみると、1日でもできそうな気がします。
無知ゆえの仕事の遅さですね。
日頃から勉強して、いついかなる時でも大体の仕様が頭に思い浮かぶようになりたいものです。できれば、さらにその場でアウトプットできるようになりたいです。
【Angular】Excelやスプレッドシートのような表を作ってみた⑤【要素(div/input)切り替え(スタイルバインディング)編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第5回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
要素(div/input)切り替え(スタイルバインディング)編
テーマ
今回はdiv要素とinput要素の表示をスタイルバインディングを使って切り替えていきたいと思います。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
今回はデータにユニークキーを増やしています。
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
left_column: [ "FirstName", "Hobby2"],
right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
+ details: { "ユニークキー":"abc1", Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
+ info: { info1: "", info2: "" },
details: { "ユニークキー":"abc2", Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
なぜindexを使わない？
同じ列名を表示させるテーブルをいくつも表示させる場合に対応させるためです。列名とindexだけでデータを探しても、一意にはならないため複数のデータが見つかってしまいます。
person毎にユニークキーを設定しておけば、列名とユニークキーでデータを探すことができるので、indexを使いませんでした。
なぜngIfディレクティブを使わない？
今回の備忘録シリーズの中では詳しく触れていないのですが、描画時に前回修正があった場合もテキストを赤字に変更する機能を付けています。
テキストを赤字に変更する流れは、
DBからデータ取得→修正の有無確認→修正があった場合はクラス付与
になります。
しかし、ngIfディレクティブは要素自体を表示させないため、上記のクラス付与において最初は非表示にさせているinput要素を検索することができず、クラス付与ができなくなるので、今回はngIfディレクティブを使用していません。
コード
component.html
<div class="person-table">
・・・・・・
+ <input type='text' [(ngModel)]='person[column]' [style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'" (blur)="toggleVisible(person['ユニークキー'], column)">
+ <div [style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'" (dblclick)="toggleVisible(person['ユニークキー'], column)">
+ {{ person[column] }}
+ </div>
・・・・・・
</div>
<div class="right-person-table">
・・・・・・
+ <input type='text' [(ngModel)]='person[column]' [style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'" (blur)="toggleVisible(person['ユニークキー'], column)">
+ <div [style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'" (dblclick)="toggleVisible(person['ユニークキー'], column)>
+ {{ person[column] }}
+ </div>
・・・・・・
</div>
component.ts
+ import { Component, OnInit } from '@angular/core';
export class PersonComponent implements OnInit {
+ isVisible: {};
・・・・・・・・・・
+ ngOnInit() {
+ const value = this.data.person.map(p => {
+ const uniqueKey = p.details['ユニークキー'];
+ Object.keys(p.details).map(column => {
+ const isVisibleKey = uniqueKey + column;
+ this.isVisible = { [isVisibleKey]: false };
+ })
+ });
+ }
・・・・・・・・・・
+ toggleVisible(uniqueKey, column) {
+ const isVisibleKey = uniqueKey + column;
+ this.isVisible = {
+ [isVisibleKey]: !this.isVisible[isVisibleKey]
+ };
+ }
}
ポイント
ポイントはpersonのユニークキーとカラム名で作ったKeyとtrue/false判定ができるValueを持ったオブジェクト(isVisible)を作ることです。
html側でisVisbleの変更を感知(スタイルバインディング)し、要素(div/input)の表示の切り替えを行ってくれます。
また、今回はデータの修正を同時に複数を行わない仕様です。なので、isVisibleオブジェクトで全てのデータの真偽値判定をするプロパティを持っておく必要はなく、データを上書きしていく仕様で問題ありません。
今後に向けて
次回がラストです。
テキストを修正した時に、クラスを付与してテキストを赤くする機能を実装していきます。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library(mat-table)
Angular Material UI component library(mat-button-toggle)
【Angular】Excelやスプレッドシートのような表を作ってみた④【mat-button-toggle-group編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第4回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第4回 mat-button-toggle-group編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
mat-button-toggle-group編
テーマ
今回はmat-button-toggle-groupを使って、リスト表示の切り替え機能を実装していきます。
コード量が一気に多くなります。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
今回はcolumnの種類を増やしています。
※雑なcolumnの追加と見にくさはお許しくださいmm
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
+ left_column: [ "FirstName", "Hobby2"],
+ right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
+ details: { Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
+ details: { Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
コード
module.ts
+ import { MatButtonToggleModule } from '@angular/material/button-toggle';
・・・・・・・・・
imports: [
+ MatButtonToggleModule
],
・・・・・・・・・
component.html
+ <div class="contents">
+ <mat-button-toggle-group #group="matButtonToggleGroup">
+ <mat-button-toggle value="left_column" checked="true" aria-label="Text align left" class="product-button">
+ <mat-icon class="product-icon">ああ</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="right_column" aria-label="Text align right" class="product-button">
+ <mat-icon class="product-icon">あああ</mat-icon>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
<div class="person-table">
・・・・・・
</div>
+ <div class="right-person-table">
+ <mat-table [dataSource]="getData(data)">
+ <ng-container *ngFor="let column of data[group.value]">
+ <ng-container [matColumnDef]="column">
+ <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
+ <td mat-cell *matCellDef="let person">
+ <input type='text' [(ngModel)]='person[column]'>
+ </td>
+ </ng-container>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="data[group.value]"></tr>
+ <tr mat-row *matRowDef="let row; columns: data[group.value];"></tr>
+ </mat-table>
+ </div>
ポイント
ポイントは以下の3つです。
・mat-button-toggle要素のvalue属性に、表示させるリストの列名が入っている配列オブジェクトのキー(今回はleft_columnとright_column)を指定する
・mat-button-toggle-group要素で定義したローカル変数(group)を利用し、mat-header-row要素とmat-row要素に上記のキーを代入する
・描画時に出しておきたいリストが決まっている場合は、そのリストのキーを定義しているmat-button-toggle要素に「checked="true"」を追加する
今後に向けて
次回は要素(div/input)の切り替えを行います。
通常はindexを使うと思いますが、複数テーブルを作成してindexだけでは切り替える要素の指定ができない場合の要素切り替えを行います。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library(mat-table)
Angular Material UI component library(mat-button-toggle)
