Galileo AIとVercelでAndroidハンズオンをサクッと用意した話

Android, GalileoAI, Vercel, 教育, 生成AI

この記事はレコチョク 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 種類があります。

機能 Hobby Pro Enterprise
価格 無料 $20/月 カスタム価格
デプロイメント 無制限 無制限 無制限
帯域幅 100GB/月 1TB/月 カスタム
Serverless Function実行 100時間/月 1000時間/月 カスタム
チームメンバー – 無制限 無制限
同時ビルド 1 1(追加ごとに+$50) カスタム
プレビューデプロイメント ✓ ✓ ✓
カスタムドメイン ✓ ✓ ✓
HTTPS ✓ ✓ ✓
継続的デプロイメント ✓ ✓ ✓
Deployしたコンテンツのパスワード保護 – ✓ ✓
チーム管理機能 – ✓ ✓
優先サポート – – ✓
SLA – – ✓
SSO – – ✓
セキュリティレビュー – – ✓

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
    vercel_github.png
  3. Vercelへデプロイ
    1. Vercelアカウントを作成
    2. プロジェクトを作成
    3. GitHubリポジトリを選択
    4. フレームワーク、環境変数の設定
      対応フレームワークはこちら
    5. デプロイ実行
    6. デプロイ完了

      以降、Pushをトリガーにビルド&デプロイが走るようになります。Vercelのdashboardを確認し、ステータスバッジが Buildingから Readyになったらデプロイ完了です
      vercel_building.png
      ↓
      vercel_ready.png
  4. エンドポイントを確認
❯ https://<vercelエンドポイント>/api/media/songs -u 'username:password' | jq
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:-100   750    0   750    0     0   4310      0 --:--:-- --:--:-- --:--:--  4335
[
  {
    "title": "hoge_1",
    "artist": "fuga_1",
    "duration": 164000,
    "cover": "https://hogefuga.demo.com/media/covers/hoge_1.jpg",
    "url": "https://hogefuga.demo.com/media/tracks/hoge_1.mp3"
  },
  {
    "title": "hoge_2",
    "artist": "fuga_2",
    "duration": 164000,
    "cover": "https://hogefuga.demo.com/media/covers/hoge_2.jpg",
    "url": "https://hogefuga.demo.com/media/tracks/hoge_2.mp3"
  },
  {
    "title": "hoge_3",
    "artist": "fuga_3",
    "duration": 753000,
    "cover": "https://hogefuga.demo.com/media/covers/hoge_3.jpg",
    "url": "https://hogefuga.demo.com/media/tracks/hoge_3.mp3"
  }
]

無事レスポンスが返ってきました🎉
ここまでの準備はざっくり2日程度です

使用してみた感想

  • Galileo AIとVercelを活用することで、専門知識が浅くてもFigmaを使ってデザイン要件を作成し、API環境を用意することができました
  • Galileo AIで出力されたデザインは、細かい調整、コンポーネント化などはFigma上で編集を行う必要がありますが、デザインの大枠を作成するのには十分活用できそう
  • Vercelはデプロイまでが容易でコストも掛からないので、手軽にAPI環境を構築するには便利そうでした
  • ビルド&デプロイまで10秒ちょい
    • 早い！コードが少なかったからかも

おわりに

ここまでお読みくださりありがとうございました！
明日の レコチョク Advent Calendar 2024 は15日目「大量のアクセスが来た時にサーバーで何が起きているのか」となります。お楽しみに！

この記事を書いた人

齋藤匠
齋藤匠

Android, GalileoAI, Vercel, 教育, 生成AI