Skip to main content
Version: v8

はじめてのIonicアプリ: Angular

Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。現実的なアプリを段階的に作成しながら、Ionic アプリ開発の基礎を学びましょう。

3 つのプラットフォームすべてで実行されている完成したアプリは次のとおりです：

note

Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？Ionic 4 および Cordova ガイドを参照してください。

構築するもの​

デバイスのカメラで写真を撮影し、グリッドに表示し、デバイスに永続的に保存する機能を提供する Photo Gallery アプリを作成します。

ハイライトには以下が含まれます：

  • Ionic Framework のUI コンポーネントを使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。
  • Ionic の公式ネイティブアプリランタイムであるCapacitorを使用して、ネイティブ iOS および Android モバイルアプリとしてデプロイ。
  • Capacitor のCamera、Filesystem、Preferences API によって提供される Photo Gallery 機能。

このガイドで参照されている完全なアプリコードを GitHub で見つけてください。

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

最適な Ionic 開発体験を確保するために、以下をすぐにダウンロードしてインストールしてください：

  • Ionic エコシステムとやり取りするための Node.js。LTS 版をダウンロード。
  • コードを書くためのコードエディタ！私たちは Visual Studio Code のファンです。
  • コマンドラインインターフェイス/ターミナル (CLI)：
    • Windows ユーザー：最高の Ionic 体験のために、組み込みのコマンドライン (cmd) または管理者モードで実行する Powershell CLI を推奨します。
    • Mac/Linux ユーザー：ほぼすべてのターミナルで動作します。

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

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

note

Visual Studio Code でターミナルを開くには、Terminal -> New Terminal に移動します。

npm install -g @ionic/cli native-run cordova-res
note

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

npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は 権限エラーの解決 を参照してください。 :::

アプリの作成​

次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。

ionic start photo-gallery tabs --type=angular
note

NgModules と Standalone のどちらかを選択するプロンプトが表示されたら、このチュートリアルは NgModules のアプローチに従っているので、NgModules を選択する。

このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！

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

cd photo-gallery

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

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

PWA Elements​

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

これは別の依存関係なので、次にインストールします：

npm install @ionic/pwa-elements

Next, import @ionic/pwa-elements by editing src/main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
// CHANGE: Add the following import
import { defineCustomElements } from '@ionic/pwa-elements/loader';

// CHANGE: Call the element loader before the `bootstrapModule` call
defineCustomElements(window);

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.log(err));

それで終わりです！さあ、楽しい部分です - アプリを実行してみましょう。

アプリを起動​

次のコマンドを実行してください:

ionic serve

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

3 つのタブがあります。「Tab2」タブをクリックしてください。これは空白のキャンバス、つまり Photo Gallery に変換するのに最適な場所です。Ionic CLI には Live Reload 機能があるため、変更を加えて保存すると、アプリがすぐに更新されます！

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

/src/app/tab2/tab2.page.htmlを開きます。それには以下が含まれています:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Tab 2 </ion-title>
  </ion-toolbar>
</ion-header>

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

  <app-explore-container name="Tab 2 page"></app-explore-container>
</ion-content>

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

<ion-header [translucent]="true">
  <ion-toolbar>
    <!-- CHANGE: Update title -->
    <ion-title> Photo Gallery </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <!-- CHANGE: Update title -->
      <ion-title size="large">Photo Gallery</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 2 page"></app-explore-container>
</ion-content>

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

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Photo Gallery</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Photo Gallery</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- CHANGE: Add the floating action button -->
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- CHANGE: Remove or comment out `app-explore-container` -->
  <!-- <app-explore-container name="Tab 2 page"></app-explore-container> -->
</ion-content>

次に、src/app/tabs/tabs.page.htmlを開きます。中央のタブボタンのラベルを「Photos」に変更し、ellipseアイコンをimagesに変更します。

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" href="/tabs/tab1">
      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" href="/tabs/tab2">
      <!-- CHANGE: Update icon -->
      <ion-icon aria-hidden="true" name="images"></ion-icon>
      <!-- CHANGE: Update label -->
      <ion-label>Photos</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" href="/tabs/tab3">
      <ion-icon aria-hidden="true" name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

これは、Ionic でできるすべての素晴らしいことの始まりに過ぎません。次に、Web でカメラ撮影機能を実装し、その後 iOS と Android 用にビルドします。

Contents

Edit this page