メインコンテンツにスキップ
バージョン: v8

初めてのIonicアプリ: Angular

Ionicの素晴らしい点は、1つのコードベースで、HTML、CSS、JavaScriptだけを使用して、あらゆるプラットフォーム向けにビルドできることです。 実際のアプリをステップバイステップで作成しながら、Ionicアプリ開発の基本を学びましょう。

3つのプラットフォームすべてで実行されている完成したアプリを紹介します

（SVGアイコンは省略）注記

Ionic 4とCordovaを扱ったこのガイドの以前のバージョンをお探しですか？ こちらをご覧ください。

作成するもの​

デバイスのカメラで写真を撮ってグリッドに表示し、デバイスに永続的に保存できるフォトギャラリーアプリを作成します。

ハイライト

  • Ionic Framework UIコンポーネントを使用して、Web、iOS、Androidで実行される1つのAngularベースのコードベース。
  • Ionicの公式ネイティブアプリランタイムであるCapacitorを使用して、ネイティブのiOSおよびAndroidモバイルアプリとしてデプロイされます。
  • Capacitor カメラ、ファイルシステム、およびプリファレンス APIを搭載したフォトギャラリー機能。

このガイドで参照されている完全なアプリコードは、GitHubにあります。

必要なツールのダウンロード​

最適なIonic開発エクスペリエンスを確保するために、すぐにダウンロードしてインストールしてください

  • Node.js：Ionicエコシステムとの対話に使用します。 LTSバージョンはこちらからダウンロードしてください。
  • コードエディタ：コードを書くために使用します！ Visual Studio Codeがお勧めです。
  • コマンドラインインターフェース/ターミナル（CLI）:
    • Windowsユーザー：Ionicを最適な環境で使用するには、ビルトインのコマンドライン（cmd）またはPowershell CLIを管理者モードで実行することをお勧めします。
    • Mac/Linuxユーザー：事実上すべてのターミナルで動作します。

Ionicツールのインストール​

コマンドラインターミナルで以下を実行して、Ionic CLI（`ionic`）、デバイスおよびシミュレータ/エミュレータでネイティブバイナリを実行するために使用される`native-run`、ネイティブアプリのアイコンとスプラッシュスクリーンを生成するために使用される`cordova-res`をインストールします

（SVGアイコンは省略）注記

Visual Studio Codeでターミナルを開くには、[ターミナル] -> [新しいターミナル]に移動します。

npm install -g @ionic/cli native-run cordova-res
（SVGアイコンは省略）注記

`-g`オプションは*グローバルにインストール*を意味します。 パッケージをグローバルにインストールすると、`EACCES`権限エラーが発生する可能性があります。

npmを昇格された権限なしでグローバルに動作するように設定することを検討してください。 詳細については、権限エラーの解決を参照してください。

アプリの作成​

次に、「タブ」スターターテンプレートを使用し、ネイティブ機能のためにCapacitorを追加するIonic Angularアプリを作成します

ionic start photo-gallery tabs --type=angular --capacitor
（SVGアイコンは省略）注記

`NgModules`と`Standalone`のどちらかを選択するように求められたら、このチュートリアルは`NgModules`のアプローチに従っているため、`NgModules`を選択してください。

このスタータープロジェクトには、3つの事前に構築されたページと、Ionic開発のベストプラクティスが付属しています。 共通のビルディングブロックがすでに配置されているため、簡単に機能を追加できます！

次に、アプリフォルダに移動します

cd photo-gallery

次に、アプリのネイティブ機能を動作させるために必要なCapacitorプラグインをインストールする必要があります

npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem

PWA要素​

カメラAPIを含む一部のCapacitorプラグインは、Ionic PWA Elementsライブラリを介してWebベースの機能とUIを提供します。

これは個別の依存関係であるため、次にインストールします

npm install @ionic/pwa-elements

次に、`src/main.ts`を編集して`@ionic/pwa-elements`をインポートします。

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader before the bootstrapModule/bootstrapApplication call
defineCustomElements(window);

以上です！楽しい部分、アプリの動作を見てみましょう。

アプリの実行​

次に、このコマンドを実行します

ionic serve

そして、IonicアプリがWebブラウザで実行されています。 アプリの大部分はブラウザでビルドおよびテストできるため、開発とテストの速度が大幅に向上します。

3つのタブがあります。「Tab2」タブをクリックします。 これは空白のキャンバス、つまりフォトギャラリーに変換するのに最適な場所です。 Ionic CLIはライブリロード機能を備えているため、変更を加えて保存すると、アプリがすぐに更新されます！

Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.

選択したコードエディタでphoto-galleryアプリフォルダを開き、`/src/app/tab2/tab2.page.html`に移動します。 次のように表示されます

<ion-header>
  <ion-toolbar>
    <ion-title>Tab 2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 2</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

`ion-header`は、タイトルが「Tab 2」の上部ナビゲーションとツールバーを表します（iOS 折りたたみ可能なラージタイトルのサポートにより、2つあります）。 両方の`ion-title`要素の名前を次のように変更します

<ion-title>Photo Gallery</ion-title>

アプリの視覚的側面を`<ion-content>`に配置します。 この場合、デバイスのカメラを開くボタンと、カメラでキャプチャされた画像を表示する場所を追加します。 まず、フローティングアクションボタン（FAB）をページの下部に追加し、カメラの画像をアイコンとして設定します。

<ion-content>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

次に、`src/app/tabs/tabs.page.html`を開きます。 ラベルを「写真」に、アイコン名を「images」に変更します

<ion-tab-button tab="tab2">
  <ion-icon name="images"></ion-icon>
  <ion-label>Photos</ion-label>
</ion-tab-button>

すべての変更を保存して、ブラウザに自動的に適用されることを確認します。 これは、Ionicでできるクールなことのほんの始まりに過ぎません。 次に、Webでカメラ撮影機能を実装し、iOSとAndroid向けにビルドします。

目次

このページを編集