「ionic」の記事 - Crieit

モバイルアプリ開発フレームワーク

2021-04-13T16:45:08+09:00

現在、40億人を超えるモバイルユーザーがいるため、モバイルでオーディエンスとつながることができなければ、あなたは存在しません。人々はスマートフォンの使用をとても楽しんでいるので、技術のない日を過ごすために自分自身に挑戦する必要があります。スマートフォンは、電話、テキストメッセージ、メールのチェック、さらには娯楽まで、必要なものをすべて提供できます。そのため、モバイルアプリフレームワークが実現します。
このような陰謀的なアプリケーションの舞台裏には、何千ものモバイルアプリ開発フレームワークがあります。ただし、モバイルアプリをうまく作るには、適切なモバイルアプリ開発フレームワーク、関連技術、プラットフォーム、データベースが不可欠です。とはいうものの、あまりにも多くの選択肢があり、どれかひとつに絞るのはこれまで以上に難しい状況です。そこでこの記事では、iOSとAndroid両方のプラットフォームで最も人気の高いモバイルアプリ開発フレームワークについて説明します。その前に、効率的なモバイルアプリ開発フレームワークとはどのようなものかを簡単に見ていきましょう。

1. React Native
React Nativeは、AndroidアプリとiOSアプリの両方向けに構築された非常に人気のあるフレームワークです。特に、モバイルアプリの開発者は、より短いビルドサイクルでより高速なデプロイ時間で高性能アプリをビルドでき、予算にやさしいオプションです。さらに、React Nativeは、ビュー、テキスト、画像など、プラットフォームに依存しないネイティブコンポーネントのコアセットを提供し、すべてプラットフォームのネイティブUIビルディングブロックにマップされます。また、フルスタックに必須のJavaScriptもサポートしています。

2. Flutter
FlutterはGoogle が作ったオープンソースのネイティブアプリケーション開発フレームワークです。Dart という共通言語で開発を行います。詳しいデバッグができるので React Native で感じる「隔靴掻痒」感は少ないです。
Flutterを使うことで同一のコードベースからAndroidやiOSアプリを構築でき、その見た目もネイティブアプリです。FlutterはGoogleによる導入が2015年でしたが、2018年12月の公式リリースまではベータ段階にとどまっていました。
Flutterのユーザーは、携帯電話、テレビ、タブレット、ウェアラブルデバイス、スマートディスプレイ用のアプリを作成できます。
ちなみに Flutter Studio は Flutter の UI 作成のために使えるサイトです。ビルドのためのものではありません。Flutter を採用するなら使うことになるのではないかと思われます。Flutter ではそれぞれの Native パートをプロジェクト含めることができる。

3. Ionic
Ionicは、クロスプラットフォームアプリケーションとともにインタラクティブハイブリッドおよびPWAを構築するのに役立ちます。このオープンソースフレームワークは、アプリケーションを作成するためのプレミアムサービスを提供します。さらに、Ionicは、Web、Android、およびiOS用のアプリケーションの構築をカバーしています。さらに、Ionicで作業している間は、常にアプリケーションを作成して、展開可能な場所に出荷できます。すぐに使用できる機能を備えているため、アプリケーション開発に最適です。

まとめ
以上挙げた３つのフレームワーク以外、他にもモバイルアプリ開発フレームワークがあります。どのフレームワークを選択するかは、要件、予算、技術的要件、そして短期的または長期的な成功の可能性に応じて、最も適したものを選ぶと良いでしょう。

@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コマンドそのものは動きませんが、リファレンスには最適です。