K4750.NET

Angular Material 7 で Virtual Scrolling を試してみる

Angular6.1で遊んでいたらAngular7がリリースされたので、Virtual Scrollingでちょっと遊んでみる。


1.Angular CLIのアップデート

まずは・・・先日Angular CLIを6.2.5へアップデートしたばかりだが、Angular CLIも7.0.2がリリースされていたのでアップデートする。

$ npm uninstall -g @angular/cli
$ npm cache verify
$ npm install -g @angular/cli@7.0.2

念のためバージョンを確認する。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.2
Node: 8.12.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.2
@angular-devkit/core         7.0.2
@angular-devkit/schematics   7.0.2
@schematics/angular          7.0.2
@schematics/update           0.10.2
rxjs                         6.3.3
typescript                   3.1.3

2.Angular7でプロジェクトを新規作成する

Angular CLI 7.X で ng new を実行すると、routingの使用やスタイルシートのフォーマットについて聞かれる。

$ ng new virtualscrolling
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]
CREATE virtualscrolling/angular.json (3949 bytes)
CREATE virtualscrolling/package.json (1323 bytes)
CREATE virtualscrolling/README.md (1033 bytes)
...

プロジェクトができたところで、Angularのバージョンを確認してみる。

$ cd virtualscrolling
$ ng version
...
Angular CLI: 7.0.2
Node: 8.12.0
OS: win32 x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
...

無事 Angular 7.0.0 がインストールされた。


3.Angular Materialインストール

次は Angular Material 7.X をインストールする。

$ npm install --save @angular/material @angular/cdk @angular/animations
...
+ @angular/animations@7.0.0
+ @angular/material@7.0.0
+ @angular/cdk@7.0.0
...

インストールが終わったら、公式サイトの「Getting started | Angular Material」に従い、

Step 2: Configure animations
Step 4: Include a theme

を作成したプロジェクトに適用しておく(詳細は割愛)。他の手順は必要に応じて後でやる。さて、ここまでで一旦動かしてみる。

$ ng serve --open

問題なく「Welcome to virtualscrolling!」が表示される。


3.データの準備

とりあえず、そこそこの量のデータを・・・ということで、app.component.ts の codes 配列に、Unicode文字を0x0000 ~ 0x9999の1万文字用意する。

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'virtualscrolling';
  codes = [];

  ngOnInit() {
    for (let i = 0x0000; i < 0x9999; i++) {
      this.codes.push({
        code: '0x' + ('0000' + i.toString(16).toLowerCase()).substr(-4),
        char: String.fromCharCode(i)
      });
    }
  }
}

4.Virtual Scrolling

まずは、app.component.html を以下のようにして、1万文字をそのままループで表示してみる。

<div *ngFor="let i of codes">
  {{i.code}} - {{i.char}}
</div>

表示にかかる時間を計測すると、約9秒程度。
次に、Virtual Scrollingを試してみる。app.module.ts へ ScrollDispatchModule を追加して、

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ScrollDispatchModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.scss を(本家のサンプルをそのままに)以下とし、

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

app.component.html を(こちらも本家のサンプルを参考に)以下とする。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let i of codes" class="example-item">{{i.code}} - {{i.char}}</div>
</cdk-virtual-scroll-viewport>

表示されるまでの時間は1秒以下(厳密には計測してないが、そのほとんどはAngularの初期化にかかる時間だろう)。DOMの状態をDevToolsで確認してみると、

<cdk-virtual-scroll-viewport _ngcontent-c0="" class="example-viewport cdk-virtual-scroll-viewport cdk-virtual-scroll-orientation-vertical" itemsize="50" ng-reflect-item-size="50">
  <div class="cdk-virtual-scroll-content-wrapper" style="transform: translateY(896950px);">
    <!--bindings={
      "ng-reflect-cdk-virtual-for-of": "[object Object],[object Object"
    }-->
    <div _ngcontent-c0="" class="example-item">0x4613 - 䘓</div>
    <div _ngcontent-c0="" class="example-item">0x4614 - 䘔</div>
    <div _ngcontent-c0="" class="example-item">0x4615 - 䘕</div>
    <div _ngcontent-c0="" class="example-item">0x4616 - 䘖</div>
    <div _ngcontent-c0="" class="example-item">0x4617 - 䘗</div>
    <div _ngcontent-c0="" class="example-item">0x4618 - 䘘</div>
    <div _ngcontent-c0="" class="example-item">0x4619 - 䘙</div>
    <div _ngcontent-c0="" class="example-item">0x461a - 䘚</div>
    <div _ngcontent-c0="" class="example-item">0x461b - 䘛</div>
    <div _ngcontent-c0="" class="example-item">0x461c - 䘜</div>
    <div _ngcontent-c0="" class="example-item">0x461d - 䘝</div>
  </div>
  <div class="cdk-virtual-scroll-spacer" style="transform: scaleY(1.96605e+06);"></div>
</cdk-virtual-scroll-viewport>

スクロールバーの操作に応じて、div.cdk-virtual-scroll-content-wrapper の内容が一定量を超えないよう動的に変化する動きをしていた。また、スクロールバーを正しく表示させるために、div.cdk-virtual-scroll-content-wrapper の translateY と、div.cdk-virtual-scroll-spacer の scaleY を変化させて表示行の上下に巨大な空白を作り出していた・・・なるほど、そういう仕組みなのね!

Angular6.1でHello World

Angular6もそろそろ安定してきただろう・・・ということで、インストール済みのnode等のバージョンアップとAngular6を軽く動作確認してみる。


1.Node.js バージョンアップ

まずは現状確認。

$ node -v
v6.11.0
$ npm -v
3.10.10

Angularの公式サイトでは「Node.js は 8.x 以上、npm は 5.x 以上」と書かれているのでバージョンアップが必要だ。で、簡単にバージョンアップするためのツール「n」なんてものもあるようだが・・・日々の使用頻度は少なく、そもそもインストールしたことすら忘れそうなのでNode.js本家から最新版(8.12.0 LTS)をダウンロードして普通に手動インストールする。

$ node -v
v8.12.0
$ npm -v
6.4.1

2.Angular CLI バージョンアップ

こちらも現状確認から。

$ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 8.12.0
OS: win32 x64
Angular:
...

Angular CLI 6が出ているようなので、こちらもバージョンアップする。本家のドキュメント どおりに下記のコマンドを実行する。

$ npm uninstall -g @angular/cli
$ npm cache verify
$ npm install -g @angular/cli@latest

バージョンを確認してみると・・・無事バージョン6がインストールされたようだ。

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.5
Node: 8.12.0
OS: win32 x64
Angular:
...

3.Angular6.1でHello World

Hello Worldするだけならコードを書くまでもなく・・・

$ ng new helloworld
$ cd helloworld
$ ng serve --open

デフォルトのブラウザ(例えばChrome)に「Welcome to helloworld!」と(一応「helloworld」と)表示される^^;
ちょっと手抜きすぎるので、本当にAngular6.1になっているのか確認してみる。app.component.tsでtitleにバージョンを埋め込んでみる。

import {Component, VERSION} from '@angular/core';

~略~
export class AppComponent {
  title = `helloworld (${VERSION.full})`;
}

「Welcome to helloworld (6.1.10)!」と表示され、Angular6.1.10であることが分かった。ng -vでも分るようだ。

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.5
Node: 8.12.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

4.JSONデータの表示

以下のJSONデータ(message.json)をHTTP通信で取得して、画面に表示してみる。ファイルは「src/assets/message.json」に格納する。

{ "message": "Hello Angular World!" }

HttpClientModuleを使うので、app.module.tsのimportsに一行追加する。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angularの入門としては適切ではなさそうだが・・・AsyncPipeを使って通信結果をテンプレート(app.component.html)に埋め込んでみる。まずは、app.component.ts に messageApi 変数と、constructor()を追加する。

import {Component, VERSION} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = `helloworld (${VERSION.full})`;
  messageApi = null;

  constructor(private http: HttpClient) {
    this.messageApi = this.http.get('assets/message.json');
  }
}

最後にテンプレートに以下を記述し、「3.Angular6.1でHello World」と同様に「ng serve –open」を実行する(実行済みなら、勝手に画面が更新される)。

{{ (messageApi | async)?.message }}

これで「GET http://localhost:4200/assets/message.json」が実行されてレスポンスのJSONデータがパースされ、JSONデータのmessageプロパティが画面に表示される。

ダイエー横浜西口店の整体処「康復茶友」が閉店

ここ数年、歳のせいもあって定期的なメンテナンスが必須な体になりつつあると感じ、横浜周辺で整体処に通い続けているがなかなか当たり(とにかくツボを押さえていた気持ちよくて即効性のある技術を持った人に当たる率が高い)なお店が存在しない中、ダイエー横浜西口店にある「康復茶友」の中国整体が何度行っても一番上手だと感じてきたのだが、お店の人の話では、ダイエーの閉店に伴い、営業が来年の1月までになるらしい。

過去にも「横浜随一の整体処「康復茶友」」という投稿を書いたくらいにお気に入りのお店なだけに、是非ともダイエー閉店後も近場で営業再開してほしい。なお、姉妹店が東横線の妙蓮寺駅近くにあるので、そちらは引き続き営業してくれるのだとは思うが・・・。

シンプルなJSON整形サイトをAngular5で作ってみた

シンプルなJSON整形サイトをAngular5(5.2.0)で作ってみた。


Simplest JSON Formatter

Simplest JSON Formatter


概要

  • Angular CLI (1.7.4) + Angular5 (5.2.0) + Angular Material (5.2.4)
  • 左の入力エリアにJSONを入力してTabキーを押すと、右側にハイライト&整形されたJSONが表示される。
  • 入力されたデータの整形はJavaScript(JSON.parse/JSON.stringfy)のみで完結していて、サーバ送受信はしない。

REALFORCE R2 まとめ(2018/03)

高級メカニカルキーボードREALFORCEシリーズが刷新され「REALFORCE R2」となって昨年から販売されているが、昨年末のフルサイズ(108キー)キーボードに加え、今月にはテンキーレス(91キー)が発売されたので、再度表形式でまとめてみた(2017年10月のまとめはこちら ⇒ 「REALFORCE R2 まとめ(2017/10)」)。


1.REALFORCE R2

型式 キー配列
(※1)
キースイッチ APC
(※2)
価格
(税抜)(※3)
R2-JPV-IV 日本語108 30/45/55g 変荷重 非対応 アイボリー ¥17,820
R2-JP4-BK 日本語108 45g 固定荷重 非対応 ブラック ¥17,820
R2S-JPV-IV 日本語108 30/45/55g 変荷重(静音) 非対応 アイボリー ¥22,950
R2S-JP4-BK 日本語108 45g 固定荷重(静音) 非対応 ブラック ¥22,950
R2A-JPV-IV 日本語108+4 30/45/55g 変荷重 対応 アイボリー ¥23,850
R2A-JP4-BK 日本語108+4 45g 固定荷重 対応 ブラック ¥23,850
R2SA-JP3-IV 日本語108+4 30g 固定荷重(静音) 対応 アイボリー ¥25,020
R2SA-JP3-BK 日本語108+4 30g 固定荷重(静音) 対応 ブラック ¥25,020
R2TL-JPV-IV 日本語91 30/45/55g 変荷重 非対応 アイボリー ¥17,820
R2TL-JP4-BK 日本語91 30g 固定荷重 非対応 ブラック ¥17,820
R2TLS-JPV-IV 日本語91 30/45/55g 変荷重(静音) 非対応 アイボリー ¥22,950
R2TLS-JP4-BK 日本語91 45g 固定荷重(静音) 非対応 ブラック ¥22,950
R2TLA-JPV-IV 日本語91 30/45/55g 変荷重 対応 アイボリー ¥23,850
R2TLA-JP4-BK 日本語91 45g 固定荷重 対応 ブラック ¥23,850
R2TLSA-JP3-IV 日本語91 30g 固定荷重(静音) 対応 アイボリー ¥25,020
R2TLSA-JP3-BK 日本語91 30g 固定荷重(静音) 対応 ブラック ¥25,020

※1 日本語108のAPC対応版は、+4キー(消音/音量小/音量大/APC位置調整)構成。
※2 キースイッチの反応位置を1.5mm/2.2m/3mに調整する機能。APCモデルは2mm/3mm厚のキースペーサー付属(キーストロークの調整および静音化が可能)。
※3 オープン価格であるため、参考までに秋葉原のTSUKUMO eXでの3月17日時点の販売価格を記載した。


2.新モデル雑感

テンキーレスモデルの販売が始まった週末に、秋葉原のTSUKUMO eXにて試し打ちをしてきたが、当然ながらキーの打ち心地はこれまでのモデルと違いは感じられない。キー重量はテンキーレスモデルでも1.1kgあり、激しい打鍵でキーボードがずれることもないだろう^^;今回発売されたモデルは、昨年末に発売された日本語108キーモデルをテンキーレス化したものであり、以前から言われている英語版やワイヤレス版は含まれなかった。うーん、45g 固定荷重(静音)&英語87キー配列&ワイヤレス&トラックポイント付きのモデルが出てほしいなぁ^^;