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

最初の Ionic アプリ：React

Ionic の素晴らしい点は、1 つのコードベースで、HTML、CSS、JavaScript のみを使用してあらゆるプラットフォーム向けにビルドできることです。このガイドでは、現実的なアプリを段階的に作成することで、Ionic アプリ開発の基礎を学びます。

完成したアプリは、3 つのプラットフォームすべてで実行されます

作成するもの​

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

主な機能

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

このガイドで参照されている完全なアプリコードは、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 をインストールします。

注記

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

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

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

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

アプリの作成​

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

ionic start photo-gallery tabs --type=react --capacitor

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

次に、アプリフォルダーに変更します。

cd photo-gallery

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

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

PWA 要素​

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

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

npm install @ionic/pwa-elements

インストール後、選択したコードエディターでプロジェクトを開きます。

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

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

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

これで完了です！楽しい部分はこれからです - アプリを実際に見てみましょう。

アプリの実行​

シェルでこのコマンドを実行します。

ionic serve

そして voilà！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.

/src/pages/Tab2.tsx を開きます。表示されます

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Tab 2</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
  <!-- some filler -->
  </IonContent>
</IonPage>

IonHeader はトップナビゲーションとツールバーを表し、「Tab 2」がタイトルです。名前を変更しましょう。

<IonTitle>Photo Gallery</IonTitle>

アプリの視覚的な側面を<IonContent> に配置します。この場合、デバイスのカメラを開くボタンと、カメラでキャプチャされた画像を表示する場所を追加します。フローティングアクションボタン (FAB) を追加することから始めます。まず、ページの先頭にあるインポートを更新して、すぐに使用する Ionic コンポーネントに加えて、Camera アイコンを含めます。

import { camera, trash, close } from 'ionicons/icons';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonFab,
  IonFabButton,
  IonIcon,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
  IonActionSheet,
} from '@ionic/react';

次に、FAB をページの下部に追加します。カメラ画像をアイコンとして使用し、このボタンをクリックしたときに takePhoto() 関数を呼び出します（すぐに実装します）。

<IonContent>
  <IonFab vertical="bottom" horizontal="center" slot="fixed">
    <IonFabButton onClick={() => takePhoto()}>
      <IonIcon icon={camera}></IonIcon>
    </IonFabButton>
  </IonFab>
</IonContent>

takePhoto メソッドと、Camera とその他のネイティブ機能を使用するロジックは、すぐに作成します。

次に、src/App.tsx を開き、インポートから ellipse アイコンを削除し、代わりに images アイコンをインポートします。

import { images, square, triangle } from 'ionicons/icons';

タブバー (<IonTabBar>) 内で、ラベルを「写真」に変更し、中央のタブボタンの ellipse アイコンを images に変更します。

<IonTabButton tab="tab2" href="/tab2">
  <IonIcon icon={images} />
  <IonLabel>Photos</IonLabel>
</IonTabButton>
注記

Ionic React では、アイコンは ionicons/icons から個別にインポートされ、icon プロパティに設定されます。

これは、Ionic でできるクールな機能のほんの一部です。次は、Web でカメラ撮影機能を実装し、iOS と Android 用にビルドします。

目次

このページを編集する