この記事はレコチョク Advent Calendar 2024 の14日目の記事になります。

自己紹介

こんにちは、株式会社レコチョク NX開発推進部Androidアプリ開発グループの齋藤です。

自分は趣味がスノーボードなのですが、昨シーズンは冬らしい寒さにならず、スキー場は雪不足でスノーボードに出かける機会が減ってしまいました。 予報では、今シーズンはラニーニャ現象で冬らしい寒さが訪れるそうです！ 積雪も期待して、スノーボードに出かける機会が増えることを楽しみに過ごしています。

背景

レコチョクでは新卒向けのAndroidアプリ開発学習で、グループ配属後のOJTとしてGoogleコードラボに取り組むカリキュラムを用意しています。

Googleコードラボで写経しながら体系的に学べる点は良いですが、中途入社者に対しても同じカリキュラムを実施するか迷いました。 スキルスタックがあるエンジニアでしたので、機能要件を伝えて開発するほうが実践に近い形で学習できると考え、テーマを決めて用意したハンズオンを取り組んでもらうことにしました。

しかし、これを業務と並行して0から用意するにはなかなか大変そうです。。

そこで、最近個人的に気になっていたデザイン系の生成AIであるGalileo AIと、デプロイまでの敷居が低いホスティングサービスであるVercelを利用して、手軽にAndroidアプリ開発のハンズオンを用意できないか試してみることにしました。

ハンズオン作成まで

1. ハンズオンのテーマ決定
   • 端末内のメディア再生&APIを利用したメディアDL機能を備えたプレイヤーアプリ開発
2. アプリ仕様をGalileo AIに入力し、デザインと機能要件をFigmaで作成 ★
3. ハンズオンアプリ開発に利用するAPIをVercelでセットアップ ★
4. 技術要件をreadme.mdにまとめ、ハンズオンカリキュラムを完成
   

おことわり

今回「★」の部分を解決したかったので、1と4についての内容は記事で触れません

Galileo AIとは

GalileoAIはChatGPTのようにプロンプト(AIに対する簡単な指示文)によって、UIを自動で生成することができる生成AIツールです。
英語だけでなく日本語入力にも対応し、PC・SPどちらのデザインも生成できます。

Galileo AIの主な機能

• Text to UI：作りたいサイトについてチャットボットとやり取りして生成
• Image to UI：スクショなどの画像を参照してUIを生成
• Explorer：公開設定されたユーザーの投稿作品を参照
  

Galileo AIの料金

サインアップの過程で案内された料金プランのページです 無料版を利用したい方は、右上のSkip nowをクリック

デザインを作成してみる

1. Galileo AIにプロジェクトの要件を入力

   

   
   
2. 生成されたデザインのスタイルを選択（カラーテーマ、角丸、フォント）

   

   
   
3. 自動生成されたUIを確認し・必要に応じてテキストで指示して調整

   

   
   
4. 大まかなUIが確定できたら、Figmaに貼り付け細かい編集を行います

   

   ※ 階層構造はいい感じでしたが、レイヤー名は自動でつけてくれないので、リネームは適宜自分で行う必要があります。
   
5. 機能要件はFigmaの各画面上に記載してみました。Figmaの既存のコメント機能は1クリックしないと詳細が見られなく不便でしたので、ウィジェットのComment Noteを利用させていただきました。 ※ ハンズオンのアプリ要件を一部を添付

   

   

   
   

デザイン、機能要件の作成は以上です。

以下オレンジ枠の画面はAPIから返却された情報を表示しますので、Vercelについて軽く紹介した後、デプロイまでの手順を紹介します。

Vercelとは

Vercel社が提供するフロントエンド向けのホスティングサービスです。

Vercelの特徴

• CD (継続的デリバリー) のサポート
• グローバルなCDNによる高速な配信
• 簡単なカスタムドメイン設定
• GitHub連携でプッシュするだけで、自動的にビルドとDeployが可能

Vercelの料金プラン

料金プランはHobby・Pro・Enterprise の 3 種類があります。

APIデプロイまで

1. API実装
   • APIはHonoというCloudflare Workers上で動く、軽量なWebフレームワークを使用します。
     • Honoについての詳細は上記リンクを御覧ください、アプリ側で使用するAPIはBasic認証付きで用意したかったので以下のように実装しました

   import { Hono } from 'hono'
   import { basicAuth } from 'hono/basic-auth'
   import { handle } from 'hono/nextjs'
   
   export const config = {
     runtime: 'edge',
   }
   // ルートパス
   const app = new Hono().basePath('/api/media')
   // 全てのパスにBasic認証を適用
   app.use(
     "/*",
     basicAuth({
       username: username,
       password: pass,
     })
   );
   // 楽曲データを返す
   app.get('/songs',(c) => {
     return c.json(songsData)
   })
   

   
   
2. 実装ができたらGitHubへPush

   

   
   
3. Vercelへデプロイ
   1. Vercelアカウントを作成
   2. プロジェクトを作成

      

   3. GitHubリポジトリを選択

      

   4. フレームワーク、環境変数の設定 対応フレームワークはこちら

      

   5. デプロイ実行

      

   6. デプロイ完了

      

      以降、Pushをトリガーにビルド&デプロイが走るようになります。Vercelのdashboardを確認し、ステータスバッジが BuildingからReadyになったらデプロイ完了です

      

      
      ↓
      

      

      
      
4. エンドポイントを確認