studioTeaTwoの投稿 - Crieit

A-Frameの日本語フォントを用意する

2020-04-12T23:40:26+09:00

はじめに

現在、A-Frameには標準で日本語フォントがありません。タグのvalueに日本語を記述しても文字化けします。自前でMSDF(multi-channel signed distance fonts)形式のフォントファイルを用意して、タグのfont属性やfont-image属性にセットする必要があります。

MSDFは、ttf(TrueTypeFont)などから作成しますが、日本語フォントは巨大なこともあり、けっこうめんどくさいです。
そこで作成済みのフォントをいくつか用意して公開しました。

aframe-japanese-font

このnpmパッケージを解説します。

アプローチ

MSDFの生成方法

MSDFを生成するオンラインのジェネレーターがありますが、日本語は巨大になります。漢字を一通りカバーしようとすると、エラーになります。

そこで、コマンドラインツール版を使いローカルで実行します。

msdf-bmfont-xml

A-Frame専用に出力するために、msdf-bmfont-xmlのラッパーを用意

msdf-bmfont-xmlをカスタマイズしてnode-msdf-generatorを作りました。
主にやってることです。

pngファイルを1つにする（がマルチパートをサポートしていないため）
日本語種類を定数としてパラメータ化する（平仮名/片仮名/常用漢字/人名漢字）

漢字は、常用漢字（約2100文字）と人名漢字（約860文字）を用意しています。

日本語フォント種類

webフォントから引っ張ってきました。今は3種類です。

すべてライセンスはクリアしている認識ですが、もし万が一不備などありましたらご指摘いただければ幸いです。
NotoSansとふい字のttfで一部の文字が用意できていないっぽくて抜け落ちています。M+フォントは全て作成できています。
抜け落ちた文字はこのログファイルで確認できるようにしています。
フォントのビルドログ

使い方

実ファイルについて

いちおうnpmパッケージ化しているけど、msdfファイルはクソでかいです。なにせ3000文字以上のテクスチャファイルですから。

npm publishした時のログです。

npm notice 435.2kB fonts/hui/hui-msdf.json
npm notice 531.9kB fonts/mplus/mplus-msdf.json
npm notice 432.7kB fonts/noto-sans-cjk-jp/noto-sans-cjk-jp-msdf.json
npm notice 9.3MB   fonts/hui/hui-msdf.png
npm notice 7.2MB   fonts/mplus/mplus-msdf.png
npm notice 6.9MB   fonts/noto-sans-cjk-jp/noto-sans-cjk-jp-msdf.png

組み込み方法

そもそもnpmインストールしたところで、これらはアセットファイルです。jsファイルにrequire/importするようなものではありません。

ですので、基本的には直接ダウンロードして公開フォルダに格納しましょう。必要なファイルは、aframe-japanese-fontのfontsディレクトリ下に各フォント毎に置いている[fontName]-msdf.jsonと[fontName]-msdf.pngの2つです。

その2つのファイルをheadタグなどでインクルードします。A-Frameを通常のjsアプリに組み込んでいる場合は、A-Frameが必要になったところでフォントファイルもダイナミックインポートするといいでしょう。

描画

A-Frameのタグのfont属性とfont-image属性に利用したいフォント種類をセットしてvalue属性にテキストを記載すれば、OKです。

@ionic/angularがWebComponentsでテンプレートチェックを効かせるためにやっていることを調べる

2019-12-22T23:20:13+09:00

AngularでWebComponetsライブラリを使う時の基本

CustomElementsは基本的にはHTMLElementです（正確にはHTMLElementを継承して作ったもの）。customElements.define()することでグローバルに存在するようになるので、なんらかの方法でライブラリをインクルードすれば、あとはtemplateに書いておけば動きます。Angularから見れば、inputタグでもcustom-inputタグでも同じ話なわけです。

ただし、Angularのテンプレートチェックにはわかるけどは知らないやつだなあと怒られるので対策が必要です。

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],  ←templateチェックを無効にする
})
export class SomeModule {}

これで自由にHTML要素を書いてもよくなりますが、テンプレートの事前チェックが無効化されて実行時の存在判定に後送りされるため、他のタイポなども道連れで検出できなくなります。

 ←どこにも定義されてないがビルド時にエラーにならない

このようにAngularでWebComponetsを使うには誓約と制約があります。

@ionic/angularがやっていること

さて、ionicのv4はWebComponentsベースで書き直され、Angularだけでなくreactやvueでもできるようになりましたが、Angularは引き続きテンプレートチェックがビシッと効いています。

不思議なので中身を調べてみましょう。

なんと、同じ名称のAngularComponentが定義されていました❗️

ソースを読むとプロキシという扱いのようなので、これをプロキシコンポーネントと呼びます。
どうやらこいつがビルド時にAngularに差し出されているから、テンプレートの型チェックが効いてるようです。

を例に引っ張ってきました。現バージョンだと@ProxyCmpという新デコレータが作られていて、proxyMethodsやproxyInputsの記述は省力化されていますが、構造がわかりやすいので旧スタイルで掲載しています。

export declare interface IonInput extends StencilComponents<'IonInput'> {}
@Component({
  selector: 'ion-input',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '',
  inputs: [
    'accept',
    'autocapitalize',
    'autocomplete',
    'autocorrect',
    'autofocus',
    'clearInput',
    'clearOnEdit',
    'color',
    'debounce',
    'disabled',
    'inputmode',
    'max',
    'maxlength',
    'min',
    'minlength',
    'mode',
    'multiple',
    'name',
    'pattern',
    'placeholder',
    'readonly',
    'required',
    'size',
    'spellcheck',
    'step',
    'type',
    'value',
  ],
})
export class IonInput {
  ionInput!: EventEmitter;
  ionChange!: EventEmitter;
  ionBlur!: EventEmitter;
  ionFocus!: EventEmitter;
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
  }
}
proxyMethods(IonInput, ['setFocus', 'getInputElement']);
proxyInputs(IonInput, [
  'color',
  'mode',
  'accept',
  'autocapitalize',
  'autocomplete',
  'autocorrect',
  'autofocus',
  'clearInput',
  'clearOnEdit',
  'debounce',
  'disabled',
  'inputmode',
  'max',
  'maxlength',
  'min',
  'minlength',
  'multiple',
  'name',
  'pattern',
  'placeholder',
  'readonly',
  'required',
  'spellcheck',
  'step',
  'size',
  'type',
  'value',
]);

全体構造

通常のAngularComponentに則ったデコレータとclassです。proxyOutputs、proxyMethods、proxyInputsはionicが用意しているユーティリティ関数です。

生のWebComponentsに対してバインドする方法

接続

コンポーネントデコレータのselectorをcustomElementと同じ名称にしています。相当ハックだと思ったのですが、Angularのコンポーネントはカスタム要素としてHTMLにそのまま出力するので、selectorをHTMLに存在している要素名にするとHTMLではHTMLに存在している要素として解釈するわけなんですよね。もちろん_nghost-wke-c2のような属性は付きます。良い子は真似するな案件ですが、customElementに限らず標準HTML要素のinputとかspanとかでも同じことできます。

プロキシ

コンポーネントでは、elementRefから引っ張ったnativeElementの生DOM参照をクラスプロパティに保持しています。
proxyInputsとproxyMethodsは、そのクラスプロパティに保持したnativeElementを通して生のionic-inputに対して、HTML属性のget/setやionic内部に用意されているメソッドを生やしています。

export const proxyInputs = (Cmp: any, inputs: string[]) => {
  const Prototype = Cmp.prototype;
  inputs.forEach(item => {
    Object.defineProperty(Prototype, item, {
      get() {
        return this.el[item];
      },
      set(val: any) {
        this.z.runOutsideAngular(() => (this.el[item] = val));
      }
    });
  });
};

export const proxyMethods = (Cmp: any, methods: string[]) => {
  const Prototype = Cmp.prototype;
  methods.forEach(methodName => {
    Prototype[methodName] = function () {
      const args = arguments;
      return this.z.runOutsideAngular(() =>
        this.el[methodName].apply(this.el, args)
      );
    };
  });
};

proxyOutputsは、rxjsのfromEvent（中でaddEventListenerやremoveEventListenerしながらObservable化するやつ）を、コンポーネントの各EventEmitter型のプロパティにセットしているものです。コンポーネントclassに同名のクラスプロパティが用意されています。

export const proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
}

まとめ

プロキシするコンポーネントを用意することで、グローバルに存在しているWebComponentsライブラリでも、Angularのテンプレートの中でまるでAngularComponentかのように扱えるようになり、テンプレートの型チェックが効くようになっています。

ionicをAngulaCLIで使う

2019-06-09T23:29:17+09:00

ionicは長らくAngularとcordovaを用いたUIフレームワークでしたが、最新バージョンではwebComponentsベースになり、reactでもvueでも生jsでもなんでもいけるようになりました。

素晴らしいんですが、逆に構成パターンがめっちゃ増えて迷うというところもあります。
Angularをベースにする上でもパッと3パターンがありえます。

ionic CLIを用いる（従来通り）
scriptタグで@ionic/coreをインクルードしてピュアWebComponentとして利用する
angularCLIプロジェクトに@ionic/angularをインストールして利用する

本記事では3番を取り上げます。普通にnpmPackageとして組み込むだけで、組み込んだ後はいつものngコマンドで開発します。

インストール

最初にインストールします。angularCLIで作成したプロジェクトの前提です。

$ npm install @ionic/angular

ng add @ionic/angularができそうな記述も見られますが、Anuglar v8ではダメです。さっとコードを見た限りだとangular.jsonのスキーマ変更をキャッチアップすればいけそうな感もありましたが、ionic v4はもはや別ライブラリでは？というくらい内部的には激しい刷新が行われているので焦らず待ちましょうという判断しました。

ionicCLIでは*.page.tsとかの独自レイヤーがあるようですが、このやり方ではそういうのは考えない感じです。

他にも@ionic/angular-toolkitというcordvaやschematicsのプラグインを提供しているパッケージがありますが、現時点では要らなそうです。cordvaはただのwebアプリなら要らないですし、schematicsは上述のようにもう少し待ちましょう判断です。もしかしたらng addだけでなく*.page.tsとかをng generateできるようになるのかな。

コンフィグレーション

普通にNgModuleをimportすればOKです。WebComponentなので、Angularのtemplateコンパイラチェックを外すためにCUSTOM_ELEMENTS_SCHEMAを加えます。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicModule } from '@ionic/angular';

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

ルートのcssファイルにスタイルをインポートします。著者はscssでAngularCLIを起こしていますが、それぞれ置き換えてください。

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
@import "~@ionic/angular/css/display.css";

アイコンは若干トリックが要りました。参照解決してくれなかったのでassetsにコピーして利用しています。
この辺りは、ng add @ionic/angularを実装しているschematicsのコードが大変参考になります。というか、ピックアップして手動でコピペします。

angular.json

{
  "projects": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
          }
        }
      }
  }
}

アイコンタグでは相対URLを記述します。


    
     Home

以上となりますが、基本的にはschematicsのng addのコードを教科書にして構成するとよいです。ng add @ionic/angularコマンドそのものは動きませんが、リファレンスには最適です。