本文へスキップ
バージョン：v8

最初のIonicアプリ：Vue

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

完成したアプリが3つのプラットフォームすべてで動作している様子です

作成するもの​

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

ハイライト：

  • Ionic Framework UIコンポーネント を使用して、Web、iOS、Androidで動作する1つのVueベースのコードベース。
  • 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@latest native-run
注

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

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

アプリの作成​

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

ionic start photo-gallery tabs --type vue

このスタータープロジェクトには、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.tsを編集して@ionic/pwa-elementsをインポートします。

// Above the createApp() line
import { defineCustomElements } from '@ionic/pwa-elements/loader';
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/views/Tab2.vueを開きます。以下が表示されます。

<template>
  <ion-page>
    <ion-header>
      <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>

      <ExploreContainer name="Tab 2 page" />
    </ion-content>
  </ion-page>
</template>

ion-headerは、上部のナビゲーションとツールバーを表し、「Tab 2」がタイトルです。名前を変更しましょう。

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

アプリの視覚的な側面を<ion-content>に入れます。この場合、デバイスのカメラを開くボタンと、カメラで撮影した画像を表示する場所を追加します。しかし、まずはインポート文から始まるExploreContainerコンポーネントを削除します。

import ExploreContainer from '@/components/ExploreContainer.vue';

次に、template内のHTMLマークアップからExploreContainerノードを削除します。

<ExploreContainer name="Tab 2 page" />

代わりにフローティングアクションボタン(FAB)を使用します。まず、<script setup>タグ内のインポートを更新して、Cameraアイコンと、すぐに使用するIonicコンポーネントの一部を含めます。

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

Vue Single File Componentsが<script setup>構文を使用して生成されるため、これらのアイテムはテンプレートで使用できるようになりました。

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

<ion-content :fullscreen="true">
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button @click="takePhoto()">
      <ion-icon :icon="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

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

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

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

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

<ion-tab-button tab="tab2" href="/tabs/tab2">
  <ion-icon :icon="images" />
  <ion-label>Photos</ion-label>
</ion-tab-button>

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

目次

このページを編集する