【CES出展】Ionicでつくる博物館アプリ

こんにちは、先進PJ部の柳浦です。

ラスベガス開催のITイベントCES出展についてブログでお伝えしていますが、
私もこのプロジェクトチームの一員として、CESアプリの開発を担当しています。
UI/UXチームのサブリーダーとして画面レイアウトを整理したり、実際のアプリ開発を行ったりしています。

今回のブログでは私から、出展予定のアプリ「musubiii」開発の様子をご紹介します。

今回は特に、Web画面の開発までの道のりをお伝えしたいと思います。
アプリ開発にチャレンジしてみたい方や、エンジニアの皆さんの技術習得の参考に、苦労した点や解決策も書いていきたいと思います。

---

開発チームの紹介

アプリ開発チームは主に若手エンジニアで構成されています。
本格的なアプリ開発は初めてというメンバーが多いです。
日々初めての経験ばかりですが、試行錯誤しながらも和気あいあいと開発を進めています。

---

開発プロセスについて

開発は次のように進めています。ステップごとに紹介していきたいと思います。

1. アプリ機能の案出し
2. フレームワークの選定
3. 画面のレイアウトの作成
4. Web画面の開発

１．アプリ機能の案出し

アプリに「こんな機能があったらいいな」「こんな使い方があるといいな」というアイデアを考えました。
オンラインキャンバスツールのMuralを活用して、ユーザー目線でアイデアを出し合いました。

最終的にメインとなる機能を以下に決定しました。

• 作品の解説を多言語で表示する機能
• 作品のコメントをユーザー間で共有する機能
• 施設の巡回コースを提案する機能
• ユーザーに合わせて施設をおすすめする機能
• ユーザーの疑問に生成AIが答える機能

２．フレームワークの選定

博物館や美術館の中でアプリを使う想定でスマートフォンにも対応できるフレームワークを探し、IonicフレームワークをWeb開発で使うことを決定しました。

Ionicには次の主な特徴があります。

• クロスプラットフォーム対応（iOS、Android、Webの開発に対応）
• 豊富なUIコンポーネント

３．画面のレイアウトの作成

スマートフォンの画面を想定してアプリ画面のレイアウトを作図しました。
ユーザー視点でボタンの位置や検索欄のレイアウトについてアイデアを出し合い、下図のようなレイアウトが完成しました。
作図には作図ツールのdraw.ioを活用しています。

４．Web画面の開発

Ionicを使うと下図のような画面を開発することができます。
※開発中の画面です。

作品の画像を横にスワイプして表示したり、解説を音声で聴いたり、選択肢から言語を選んだりすることができます。
また、下部のタブメニューから画面を切り替えることもできます。
これらの部品は全てIonicのコンポーネントのみで実装しています。

今回のアプリ開発では、経験者が少ない中で知識不足を補うために生成AIのNICMA※をフル活用しました。
例えば、検索窓のレイアウトをNICMAに見せて「Ionicフレームワークの○○○というコンポーネントを利用して、検索窓をコーディングしてください。」と指示をすると、ベースとなるコードを書いてくれました。
さらに、開発中の画面キャプチャを見せながら、ボタンの位置や文字の位置を揃えるように指示を出すと、適切なデザインを提案してくれました。
ここで工夫した点は、画面全体を一度に作成するのではなく、部分的に作成していくという点です。
限られた時間の中で開発する必要があるため、NICMAが大活躍してくれています。

※NICMAは弊社が開発したGPT活用の生成AIクライアントです。
NICMAの詳細はこちらをご覧ください。

開発で苦労した点とその解決策

これからIonicを使うエンジニアの皆さんのために、初めてのIonicでの開発で苦労した話をご紹介します。
Ionicには多くのコンポーネントが揃っており、ほぼ画面レイアウト案に近い画面を作成することができました。
一方でどのコンポーネントを使えば良いか迷うこともありました。

例えば、パスワードの表示/非表示の実装に関して
ion-password-toggleというInputと連携するコンポーネントが用意されています。
ログイン画面のパスワード入力欄には、こちらのコンポーネントを使うと簡単に表示/非表示を切り替える機能を実装することができます。

・パスワード非表示

・パスワード表示

必要なコードはこれだけです。

<template>
  <ion-input
    type="password"
    label="Password"
    :placeholder="パスワードを入力してください"
    class="input-field"
    v-model="password"
  >
    <ion-input-password-toggle
      slot="end"
      class="password-toggle"
    ></ion-input-password-toggle>
  </ion-input>
</template>

<script setup lang="ts">
  import { IonInput, IonInputPasswordToggle } from '@ionic/vue';
</script>

ただし、ion-password-toggleは入力補助のコンポーネントであるため、パスワードをテキスト形式で表示することには向いておらず、別の方法で実装する必要がありました。
この場合には、ion-buttonとion-iconというコンポーネントを使い、表示アイコン/非表示マアイコンのクリックに合わせてパスワードの表示/非表示を切り替えるように工夫しました。
・パスワード非表示

・パスワード表示

実装したコードはこちらです。

<template>
  <ion-label position="stacked">
    <h1>パスワード</h1>
  </ion-label>
  <ion-input
    :value="password"
    :type="isPasswordVisible ? 'text' : 'password'"
    :readonly="true"
  >
    <ion-buttons slot="end">
      <ion-button fill="clear" @click="togglePasswordVisibility">
        <ion-icon
          :icon="isPasswordVisible ? eyeOff : eye"
          class="password-toggle-icon"
        >
        </ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-input>
</template>


<script setup lang="ts">
  import { IonLabel, IonInput, IonButton, IonButtons } from '@ionic/vue';
  import { eye, eyeOff } from "ionicons/icons";
  const isPasswordVisible = ref(false);
  const togglePasswordVisibility = () => {
    isPasswordVisible.value = !isPasswordVisible.value;
  };
</script>

今後について

アプリ開発もいよいよ終盤に差し掛かり、チーム一丸となって最後の仕上げに取り組んでいます！
このプロジェクトの進捗や準備の様子については、今後もブログやSNSで随時お伝えしていきます。

CES 2025への道のりを、ぜひ一緒に歩んでいただければうれしいです。
これからのNI+Cの挑戦に、どうぞご期待ください！