Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門

第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門

iret.kumoben

November 30, 2023
Tweet

More Decks by iret.kumoben

Other Decks in Technology

Transcript

  1. 第120回 雲勉【オンライン】
    Skeet を使って Google Cloud で
    開発し放題⽣活⼊⾨

    View full-size slide

  2. 0.⾃⼰紹介
    2
    ■ ⼩林千紘
    • クラウドインテグレーション事業部開発第⼆セクション
    • アイレット歴は、1年ちょっと
    • ⻑所は、寝たら忘れること。(だと思ってます)
    • よなべして、Skeetさわってます。たのしい。

    View full-size slide

  3. アジェンダ
    3
    1. Skeetとは︖
    2. さらにSkeetを覗いてみようのコーナー
    3. 実際に使ってみよう
    4. さいごに

    View full-size slide

  4. 本⽇のゴール
    4
    本⽇のゴールは...
    Skeetを使ってGoogleCloudに開発放題になること
    です
    はじめまして!

    View full-size slide

  5. 1. Skeetとは︖
    5

    View full-size slide

  6. 1. Skeetとは︖
    6
    みなさん、Skeetをご存知でしょうか︖
    私の偏⾒ですが...、まだきっと多分ご存知でないと思います。(願望・偏⾒)
    なぜなら、今年の6⽉にリリースほやほやだからです。
    そんな、ほやほやSkeetをぜひ触っていただくべくお話しさせていただきます。 \偏⾒/




    View full-size slide

  7. 1. Skeetとは︖
    7
    Skeetを⼀⾔でいうと...
    なんかすごい開発もデプロイもよしなにしてくれる系
    フレームワーク
    です
    一言じゃなくね?

    View full-size slide

  8. 1. Skeetとは︖
    8
    (ごめんなさい...)公式が説明しているのは以下
    GCP (Google Cloud) と Firebase上にフルスタックアプリを構築できるオ
    ープンソースのサーバーレスフレームワーク
    Skeet公式サイトより引⽤ https://skeet.dev/ja/
    です

    View full-size slide

  9. 1. Skeetとは︖
    9
    ● 使⽤⾔語は、TypeScrpit
    ● コマンドを数回ぽちぽちするだけで、デプロイまでしてくれる
    ● 開発環境も⾄れり尽くせりで、王様気分
    ● モジュール式なので⼀部だけ使いたい、というわがままも叶えてくれる
    ● AIモードがあり、問いかけると、よしなに⾊々作成してくれる
    ● アプリのテンプレートが4種類あり
    web、マルチプラットフォーム(iOS・Android)、Web3など...、選びたい放題
    基本情報はこんな感じ
    などなど...

    View full-size slide

  10. 1. Skeetとは︖
    10
    Skeet公式サイトより引⽤ https://skeet.dev/ja/
    アーキテクチャ図はこんな感じ

    View full-size slide

  11. 1. Skeetとは︖
    11
    Skeet公式サイトより引⽤ https://skeet.dev/ja/
    ⼀番ベーシックなwebテンプレート(Next.js (React) + Firestore)はこんな感じ
    他に必要な場合は、
    GCコンソールをぽちぽち
    して他のサービスを追加も
    できます

    View full-size slide

  12. 1. Skeetとは︖
    12
    要するに...
    Skeetを使うことで、開発し放題・コード書き放題
    ってわけです
    やったね

    View full-size slide

  13. 2. さらにSkeetを覗いてみようのコーナー
    13

    View full-size slide

  14. 2-0. 覗きこむ、その前に
    14
    覗き⾒お品書き
    1. そもそもアプリテンプレートがやばい
    2. 開発環境がいたれりつくせり
    3. デプロイが簡単ですごい
    4. AIモードがつよい
    5. 覗き⾒要点ふりかえり
    のぞく
    深淵をのぞく時深淵も
    また...

    View full-size slide

  15. 2-0. 覗きこむ、その前に
    15
    と、その前に...
    Skeet(CLI)の根幹コマンドについて説明します。
    このコマンドを知ってればなんやかんやデプロイはできます。
    1. $ skeet create
    2. $ skeet init
    3. $ skeet s
    4. $ skeet deploy

    View full-size slide

  16. 2-0. 覗きこむ、その前に
    16
    まずは、なんといっても基本のコマンド。
    Skeetアプリを作成します。
    ここで、4種類のアプリテンプレートから選択します。
    これをしないと何も始まりません。実家。マサラタウン。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-create/
    $ skeet create

    View full-size slide

  17. 2-0. 覗きこむ、その前に
    17
    GoogleCloudプロジェクトたちの初期設定、フロント構築、LB作成、Functionsデプロ
    イ...とアプリ、インフラの初回デプロイを⾏います。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-init/
    $ skeet init

    View full-size slide

  18. 2-0. 覗きこむ、その前に
    18
    先ほどのinitコマンドに--loginオプションをつけると、
    GoogleCloudのAIのIAM・API有効などのセットアップだけ⾏ってくれます。
    具体的には、以下
    ● サービスアカウントの作成
    ● AIに関するサービスのAPIを有効にする
    ○ Vertex AI API
    ○ Cloud Translation API
    ○ Secret Manager API
    $ skeet init --login
    次のページに続く...

    View full-size slide

  19. 2-0. 覗きこむ、その前に
    19
    ● AIに関するロールをサービスアカウントに追加
    ○ Vertex AI Administrator
    ■ https://cloud.google.com/vertex-ai/docs/general/access-control?hl=ja#aiplatform.admin
    ○ Cloud Translation API 管理者
    ■ https://cloud.google.com/translate/docs/intro-to-v3?hl=ja#iam
    ○ サービス アカウント ユーザーのロール
    ■ https://cloud.google.com/iam/docs/service-account-permissions?hl=ja#user-role
    と、主にプロジェクトのセットアップと、AI系のあれこれをよしなにやってくれる。
    似たコマンドに、skeet iam aiがありますが、先にskeet init系コマンドが必要です。
    (⾃動でGoogleCloudプロジェクトのセットアップに移⾏はしません)

    View full-size slide

  20. 2-0. 覗きこむ、その前に
    20
    読んで字のコマンド、ロードバランサー周りのバックエンド設定などしてくれる。
    具体的には以下。
    ● GitHubリポジトリ作成
    ● ロードバランサーの設定
    (使⽤するドメインについて聞いてくる)
    ● VPCネットワークを作成
    ● GitHub Actionsの設定(CI/CD)
    ● Functionsをデプロイ
    ● Cloud Armorの設定
    $ skeet init --lb
    最低限、先に以下を行っておく必要がありま
    す。
    skeet init --login
    skeet yarn build(skeet選択)

    View full-size slide

  21. 2-0. 覗きこむ、その前に
    21
    ローカル開発環境をまとめて起動してくれるコマンド。
    詳しくは、後ほど紹介します。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-server/
    $ skeet s
    あれこれ開発したものをデプロイしてくれるコマンド。
    これも読んで字のコマンド。後ほど紹介します。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-deploy/
    $ skeet deploy

    View full-size slide

  22. 2-0. 覗きこむ、その前に
    22
    要するに...
    豊かなコマンドを駆使して開発を便利に進めていく
    ってわけです
    モジュール式万歳

    View full-size slide

  23. 2-0. 覗きこむ、その前に
    23
    initコマンドの中⾝を解体するとこんな感じ
    $ skeet init --login
    $ skeet yarn build
    $ skeet init
    モジュール式を
    垣間見た
    $ skeet sync routings
    $ skeet deploy
    $ skeet init --lb
    buildのうち、
    skeetのみ選択
    deployのうち、
    wepappのみ選択

    View full-size slide

  24. 2-1. そもそもアプリテンプレートがやばい
    24

    View full-size slide

  25. 2-1. そもそもアプリテンプレートがやばい
    25
    以下の導⼊にある程度時間かかるものが、⼊ってます。
    これにより⼤幅な時間短縮と、最初から夢中でコードが書けます。
    ● 認証(Firebase Authentication)
    ● フォーム(React Hook Form&Zod)
    ● ライドモード・ダークモード実装
    ● ⽇本語・英語の⾔語切替実装(next-i18next)
    また、backend側もSchedulerや、Pub/Subのサンプルも⼊っています。
    他にも、Httpのプライベート/パブリックのオプションも事前に定義してあるので、
    こんな感じに作ればいいのだな。で作れます。お⼿軽。

    View full-size slide

  26. 2-1. そもそもアプリテンプレートがやばい
    26
    アプリのテンプレートが4種類もあります。よりどりみどり。
    ● Next.js (React) + GraphQL テンプレート
    ● Next.js (React) + Firestore テンプレート
    ● Expo (React Native) + Firestore テンプレート
    ● Solana Mobile Stack (Expo) + Web (Next.js) - Firestore テンプレート
    後ほど、Next.js (React) + Firestore テンプレートを実際に動かしてみます。

    View full-size slide

  27. 2-1. そもそもアプリテンプレートがやばい
    27
    使ってみた感想
    Next.js (React) + GraphQL テンプレート
    ● DBは、PostgreSQL、バージョン指定が可能
    (初期値のv15だとエラーがこんにちはする)
    ● DBのseed, migrateなどのコマンドがSkeet CLIにある。便利
    ● Next.jsが14に上がった影響︖か、まだ少し不安定
    (tsエラーがこんばんはする)
    ● 結果、あれこれ弄ればデプロイできる
    ● とはいえ、GraphQL搭載の環境を簡単に作れて感動
    ● GraphQL触りたい⼈エンジニア向け、とてもたのしい

    View full-size slide

  28. 2-1. そもそもアプリテンプレートがやばい
    28
    使ってみた感想
    Next.js (React) + Firestore テンプレート
    ● 流⽯Firebaseとても安定している
    ● なんとなくデプロイしたい気分になったら⼀番おすすめ
    ● 美しいNext.js、シンプルイズザベスト、というやつ
    ● バックエンド(Functions)は、Node.js
    ● 後ほどたくさん出てきます

    View full-size slide

  29. 2-1. そもそもアプリテンプレートがやばい
    29
    使ってみた感想
    Expo (React Native) + Firestore テンプレート
    ● こちらも流⽯Firebaseとても安定している
    ● 実機の開発環境もらくらくパラダイス(Expo Go使⽤)
    ● エミュレータの設定(iOS, Android)は、skeet yarn iosなどで起動可能
    ● デプロイも簡単
    ただしiOS, Androidは、ビルドして⾃分で申請する必要がありそう
    (EASコマンドも打てる模様)

    View full-size slide

  30. 2-1. そもそもアプリテンプレートがやばい
    30
    使ってみ...た感想
    Solana Mobile Stack (Expo) + Web (Next.js) - Firestore テンプレート
    なんかすごい、便利そう...。()
    (ごめんなさい...、まだ触ってないなんて⾔えない)
    (圧)

    View full-size slide

  31. 2-2. 開発環境がいたれりつくせり
    31

    View full-size slide

  32. 2-2. 開発環境がいたれりつくせり
    32
    あれこれ設定せずとも、勝⼿にFirebase Emulatorが使えます。
    ワンコマンドで、フルセット起動。24時間戦えます。
    $ skeet s
    オプション指定で、
    webや、backendのみの起動もできます。

    View full-size slide

  33. 2-2. 開発環境がいたれりつくせり
    33
    Firebase Emulatorの素敵ポイントは、みやすい&わかりやすい。
    また、ログもFirebase Emulator Suiteでみれます。
    他にもプロジェクトルートに、***-debug.logのようなログファイルも書き出されます。
    すごく...、ログ命。
    Firebase Emulatorの設定ファイルは、
    プロジェクトルートのfirebase.json

    View full-size slide

  34. 2-2. 開発環境がいたれりつくせり
    34
    便利コマンド紹介のコーナー
    $ skeet curl
    開発環境のfunctionsをワンコマンドで叩けて便利。⾮常に便利。
    環境変数のACCESS_TOKENが必要なので、skeet loginで先に発⾏してください。
    ただし、ドキュメントにあるproductionはうまく使えませんでした。かなしい。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-curl/

    View full-size slide

  35. 2-2. 開発環境がいたれりつくせり
    35
    便利コマンド紹介のコーナー
    $ skeet sync models
    なんと、バックエンドのモデルをフロントエンドのモデル(型定義)に同期します。
    全世界が待ち望んでいましたね。
    実際の開発でよくある、バックエンドとフロントエンドの定義のずれを
    少しは...緩和できそうですね。
    他にもroutings、armorsなどあるので何かとsyncにお世話になります。
    https://skeet.dev/ja/doc/skeet-cli/skeet-cli-sync/

    View full-size slide

  36. 2-2. 開発環境がいたれりつくせり
    36
    他にも、Skeet Utilsたちも使い勝⼿がいいので、ぜひ使ってみてください。
    どのプロジェクトでも⼤体⾃分たちでutils化してるようなものがあります。
    (特に、sendGet, sendPostあたり)
    https://skeet.dev/ja/doc/plugins/skeet-utils/

    View full-size slide

  37. 2-3. デプロイが簡単ですごい
    37

    View full-size slide

  38. 2-3. デプロイが簡単ですごい
    38
    初期デプロイは先ほど説明した、以下のskeet initでフルセットデプロイできます。
    $ skeet init
    じゃあ、initでデプロイした後は︖どうするんだい︖
    そう、そんな時は、これ。
    みんな⼤好き、わくわくデプロイコマンド。ワンコマンド、ぽちするだけ。
    $ skeet deploy

    View full-size slide

  39. 2-3. デプロイが簡単ですごい
    39
    先ほども少しでてきましたが、以下のようにweb、skeetなど⼀部のみも選べます。
    すると...、茶でもしばいている間にhostingのurlをくれます
    自ドメインなしでもデプロイはできますが...
    安全性など考慮し、ドメイン取得し設定は行ってくだ
    さい。
    ※ただしネームサーバーの設定など自力で必要です。

    View full-size slide

  40. 2-3. デプロイが簡単ですごい
    40
    Skeetの設定ファイルは、skeet-cloud.config.json
    このファイルにプロジェクトIDやらドメイン名やら書き出されていきます。
    ただし、使いたいサービス部分(例えばCloud Run)に無理やり設定を書いてもうまく
    いかない...もよう。たぶん。きっと。
    オートスケーリングなどの設定もよしなにしてくれてます。
    Functionsの設定は、routings/options配下に作成されていますが、
    もちろん、⾃分で作成・修正できます。
    「3. 実際に使ってみよう」で、実際にデプロイを⾏います。

    View full-size slide

  41. 2-4. AIモードがつよい
    41

    View full-size slide

  42. 2-4. AIモードがつよい
    42
    以下のコマンドで、どんな時でも答えてくれます。あったけえ。
    ただしAPIキーなどのセットアップは必要です。
    $ skeet ai
    OpenAI、VertexAI、どちらも使⽤できます。(デフォルトは、VertexAI)
    また、⾃分⾃⾝でファインチューニングして微調整できる様です。
    ⽇本語設定なども、skeet-cloud.config.jsonから。
    https://skeet.dev/ja/doc/skeet-ai/basic/
    https://github.com/elsoul/skeet-ai

    View full-size slide

  43. 2-4. AIモードがつよい
    43
    使⽤する際は、以下の⼿順でセットアップが必要です。(VertexAIの場合)
    1. $ skeet iam ai
    2. 必要な環境変数を設定
    a. GCLOUD_PROJECT
    b. REGION
    c. GOOGLE_APPLICATION_CREDENTIALS
    3. (任意)skeet-cloud.config.jsonの⾔語設定を⽇本語に変更
    「3. 実際に使ってみよう」で、詳しい流れを説明しています。

    View full-size slide

  44. 2-4. AIモードがつよい
    44
    Skeet AIには、以下の6モードがあります。
    ● Prisma スキーマ⾃動⽣成
    ● 関数⾃動⽣成
    ● TypeDoc ⾃動⽣成
    ● Firestore モデル⾃動⽣成
    ● AI 翻訳
    ● Firebase Function ⾃動⽣成

    View full-size slide

  45. 2-4. AIモードがつよい
    45
    個⼈的には、以下のコンボが最強かよって思って暮らしてます。
    だいたい通常の開発と同じ流れですね。それをよしなにできるなんて...。
    Firestore
    モデル⾃動⽣成
    Firebase Function
    ⾃動⽣成
    $ skeet sync

    View full-size slide

  46. 2-5. 覗き⾒要点ふりかえり
    46

    View full-size slide

  47. 2-5. 覗き⾒要点ふりかえり
    47
    2-1. そもそもアプリテンプレートがやばい
    ● 認証、フォームなど初期で導⼊されているので、普通にcreate-react-app(古)を
    する場合に⽐べて初期構築がとても楽
    ● テンプレートは4種類あり
    web、マルチプラットフォーム(iOS・Android)、Web3と⽤途によって選べる
    個⼈的には、Firestore テンプレートがおすすめ

    View full-size slide

  48. 2-2. 開発環境がいたれりつくせり
    ● 勝⼿にFirebase Emulatorの設定がしてある。お世話になってます
    ● Skeet CLIのcurlコマンド、syncコマンドなど便利。痒い所に⼿が届く
    ● Skeet Utilsは、各プロジェクトでutils化しているような関数で、⾃作せずとも良い
    ので便利
    2-5. 覗き⾒要点ふりかえり
    48

    View full-size slide

  49. 2-3. デプロイが簡単ですごい
    ● initコマンド1つで初期デプロイ
    ● ⼀部変更を加えた場合でも、部分的にデプロイできる
    ● そもそも、LBやIAMの設定などが本当にありがたい(インフラややこしい)
    2-5. 覗き⾒要点ふりかえり
    49

    View full-size slide

  50. 2-4. AIモードがつよい
    ● OpenAI、VertexAI、どちらも使⽤できる
    ファインチューニングもできるので、モデルの微調整もできる
    ● AIモードには6種類のモードがあり、それぞれ場⾯に合わせて使⽤できる
    ● 個⼈的には、以下のコンボが便利で、うれしおどろきさんしょの⽊でした
    Firestoreモデル⾃動⽣成→Firebase Function⾃動⽣成→$skeet sync
    2-5. 覗き⾒要点ふりかえり
    50

    View full-size slide

  51. 3. 実際に使ってみよう
    51

    View full-size slide

  52. 3-0. 今回の全体像
    52
    今回は、以下の流れで進めます。
    1. アプリ作成
    2. 開発環境起動してみる
    3. ⼀旦デプロイ
    4. AIモードでfunctionを作成してもらう
    5. 再デプロイ
    Next.js (React) + Firestore テンプレートであれば、
    基本的に以下の公式セットアップを⾒れば構築できます。
    ※環境構築はご⾃⾝でお願いいたします。
    https://skeet.dev/ja/doc/skeet-firestore/setup/

    View full-size slide

  53. 3-0. 今回の全体像
    53
    使⽤Skeetテンプレート︓
    Next.js (React) + Firestore テンプレート
    バージョン情報など︓
    ● Skeet CLI v1.11.26
    ● TypeScript v5.2.2
    ● Node.js v18.18.0
    ● Yarn v1.22.19
    ● Google Cloud SDK v454.0.0
    ● Firebase CLI v12.9.1
    ● GitHub CLI v2.38.0
    ● Java v21.0.1

    View full-size slide

  54. 3-0. 今回の全体像
    54
    Skeet公式サイトより引⽤ https://skeet.dev/ja/
    いま、再びのアーキテクチャ図
    インフラの中⾝
    ● Firestore
    ● Firebase
    Authentication
    ● Cloud Functions for
    Firebase (第2世代)
    ● Cloud Load Balancer
    ● Cloud DNS
    ● Cloud Armor

    View full-size slide

  55. 3-1. アプリ作成
    55

    View full-size slide

  56. 3-1. アプリ作成
    56
    まず、GoogleCloudプロジェクトと、Firebaseプロジェクトを作成します。
    先ほど作成した、GCプロジェクトをクリック
    ※入力の場合、クリックしないと追加されません

    View full-size slide

  57. 3-1. アプリ作成
    57
    参考︓
    元のテンプレートの内部関数などを使⽤したい場合、Firebaseプロジェクトのセットア
    ップが必要です。
    具体的には、以下3つ使⽤開始します。
    ● Authentication
    ● Cloud Firestore
    ● Storage

    View full-size slide

  58. 3-1. アプリ作成
    58
    参考︓Authentication

    View full-size slide

  59. 3-1. アプリ作成
    59
    参考︓Cloud Firestore
    リージョンは、お好きなところで大丈夫です

    View full-size slide

  60. 3-1. アプリ作成
    60
    参考︓Storage
    本番環境モードで良いかと思います。
    (限定公開)

    View full-size slide

  61. 3-1. アプリ作成
    61
    まずは、本⽇の主役、Skeetをインストールします。
    $ npm i -g @skeet-framework/cli
    $ npm install -g firebase-tools
    そして、firebase-toolsもインストール。

    View full-size slide

  62. 3-1. アプリ作成
    62
    続いて、アプリの作成
    $ skeet create
    上記を押すと4テンプレートから選べます。
    かこいいアスキーアートと
    ともに、アプリ作成完了
    あまりにも長い短い名前(6文字以上30文字以下)や、
    スネークケースにすると
    GoogleCloudの構築をするときに不具合が多発します。
    ご留意ください。

    View full-size slide

  63. 3-2. 開発環境起動してみる
    63

    View full-size slide

  64. 3-2. 開発環境起動してみる
    64
    開発環境を起動してみます。
    作成からすぐフルセット起動できるってすごいですよね。冷静に。
    $ skeet s
    オプションなしなので、フル起動します。
    それぞれ以下のポートで起動します。
    ● Next.js
    ○ http://localhost:4200
    ● Firebase Emulator
    ○ http://localhost:4000

    View full-size slide

  65. 3-2. 開発環境起動してみる
    65
    以下のように、まんま公式サイトが⽴ち上がります。

    View full-size slide

  66. 3-3. ⼀旦デプロイ
    66

    View full-size slide

  67. 3-3. ⼀旦デプロイ
    67
    $ skeet init
    というわけで、デプロイします。init(オプションなし)
    GoogleCloudプロジェクトとFirebaseプロジェクトのID、リージョンを聞かれます。
    先ほどのID・リージョンを答えましょう。

    View full-size slide

  68. 3-3. ⼀旦デプロイ
    68
    次にFirebase CLIのログイン画⾯に遷移します。
    ログインしましょう。
    無事、Woohoo!
    成功です。

    View full-size slide

  69. 3-3. ⼀旦デプロイ
    69
    少し待つと、今度は⼩難しいことを聞かれます。
    「もう設定したの︖しっかりチェックした︖やったね︕」という意味らしいです。
    (by AI翻訳)
    やったね。こちらも元気にyesを選択しましょう。

    View full-size slide

  70. 3-3. ⼀旦デプロイ
    70
    すると、怒涛の質問攻めが始まります。
    GitHubのリポジトリの名前と、各種ドメイン名を聞かれます。
    ちなみに、GitHubのリポジトリは、事前に作成しないでください。怒られます。
    また、「Username/希望のリポジトリ名」の形式で⼊⼒してください。

    View full-size slide

  71. 3-3. ⼀旦デプロイ
    71
    各種ドメイン名は、書いてある通りですが、こんな感じ。
    ● your domain address for App
    ○ 主にSEO関係に使⽤されていて、
    Googleサイトマップインデックス、XMLサイトマップの作成、などを⾏って
    います。
    次のページに続く...

    View full-size slide

  72. 3-3. ⼀旦デプロイ
    72
    ● your domain address for Domain Name Server
    ○ Cloud DNSの設定を⾏ってくれています。メインドメイン。
    ● your subdomain address for Load Balancer
    ○ こちらも、Cloud DNSの設定を⾏ってくれています。
    そのままですが、ロードバランサー⽤のサブドメインです。

    View full-size slide

  73. 3-3. ⼀旦デプロイ
    73
    再びしばらくすると、ホスティングの情報と。

    View full-size slide

  74. 3-3. ⼀旦デプロイ
    74
    DNSの情報をくれます。
    この情報を元にDNS設定をすると、⾃ドメインのhostingができます。
    調べるといっぱい出てくるので、設定してみてください。

    View full-size slide

  75. 3-3. ⼀旦デプロイ
    75
    わくわく、どきどきのデプロイ確認タイム。
    先ほどのhosting url(https://XXXXXXXXX.web.app)を開いてみると...
    無事デプロイされてます。

    View full-size slide

  76. 3-4. AIモードでfunctionを作成してもらう
    76

    View full-size slide

  77. 3-4. AIモードでfunctionを作成してもらう
    77
    はい。デプロイ祝いも束の間。
    AIモードでfunctionを作ってもらいましょう。
    ちなみに今回は、デフォルトのVertex AIを使⽤します。
    OpenAIの⽅を使⽤する場合APIキーの設定など変わります。
    $ skeet iam ai
    まず、AIモードを使⽤するための初期設定。

    View full-size slide

  78. 3-4. AIモードでfunctionを作成してもらう
    78
    と、ちょっと待ったぁ。もうひとつ。
    以下もコピペしちまってください。(これに⼩⼀時間悩みました。唐突な⾃分語り)
    $ export
    GOOGLE_APPLICATION_CREDENTIALS="keyfile.json"
    すると必要な環境変数を書き出してくれます。
    これをそのまま、ターミナルにコピペ。

    View full-size slide

  79. 3-4. AIモードでfunctionを作成してもらう
    79
    最後に、⾔語設定を⽇本語に変えます。
    デフォルトは、英語なのでそのままでもOK、Goodです。私はニホンゴにします。
    プロジェクトルートのskeet-cloud.config.jsonの
    AIセクション部分の"lang": "ja"としてください。

    View full-size slide

  80. 3-4. AIモードでfunctionを作成してもらう
    80
    これで動きます。aiコマンドすると...
    $ skeet ai
    お⼿伝い(謙遜)してくれます。

    View full-size slide

  81. 3-4. AIモードでfunctionを作成してもらう
    81
    問いかけに答えてくれます。うれしい。やさしいせかい。

    View full-size slide

  82. 3-4. AIモードでfunctionを作成してもらう
    82
    もう⼀踏ん張り。
    Functionモードにして、作ってもらいます。
    AIモードのまま、以下を⼊⼒すると切り替わります。
    $ function

    View full-size slide

  83. 3-4. AIモードでfunctionを作成してもらう
    83
    作って欲しいものを問いかけると...
    即座に作ってくれます。

    View full-size slide

  84. 3-4. AIモードでfunctionを作成してもらう
    84
    中⾝はこんな感じ
    個⼈的に…中⾝も書いてくれるとうれしい気持ち。
    (あくまで妄想ですが、methodモードで中⾝を別ファイルで書き出してimportする。
    という使い⽅を想定してるのかなと思ってます。)

    View full-size slide

  85. 3-4. AIモードでfunctionを作成してもらう
    85
    参考︓methodモードはこんな感じ

    View full-size slide

  86. 3-5. 再デプロイ
    86

    View full-size slide

  87. 3-5. 再デプロイ
    87
    中⾝を調整して...、フロントに適当なボタンを置いて...デプロイしてみます。
    $ skeet deploy
    hello worldボタンをクリックする
    と、裏のFunctionが呼ばれます

    View full-size slide

  88. 3-5. 再デプロイ
    88
    Functionも無事デプロイされてますね。
    Functionの中⾝はこんな感じ

    View full-size slide

  89. 3-5. 再デプロイ
    89
    はい。hello world。デプロイ完了です。

    View full-size slide

  90. 3-5. 再デプロイ
    90
    注意事項︓
    今回のデモの裏側では、Firebase Functionsのエンドポイントを直接叩く⽅法にしてい
    ます。(とても⾮推奨です)
    セキュリティ的にも安全なので、DNSの設定を⾏ってください。
    また、DNS設定を⾏うと、fetchSkeetFunctionsでmethodNameを使⽤して叩けるよう
    になったりなど恩恵は盛りだくさんです。

    View full-size slide

  91. 4. さいごに
    91

    View full-size slide

  92. 4. さいごに
    92
    いかがだったでしょうか。
    Skeet、インフラ周りも、アプリ周りも、あれこれやってくれて、
    本当に爆速すぎてサービスを乱⽴しすぎないか⼼配です。
    ただ、まだ出来⽴てフレームワークなので、すこし...伸びしろだなと思うところもあり
    ます。
    が、伸びしろは、あるほどいい、ということで。成⻑期。私も伸びしろ。
    すこしでもSkeetいいな。使ってみたいな。と思っていただけたら幸甚の極みです。

    View full-size slide

  93. 4. さいごに
    93
    公式サイトまとめ
    ● Skeet公式
    ○ https://skeet.dev/ja/
    ● Skeet Framework Plugin - AI
    ○ https://github.com/elsoul/skeet-ai
    ● Google Cloud
    ○ https://cloud.google.com/?hl=ja
    ● Next.js
    ○ https://nextjs.org/
    ● Firebase
    ○ https://firebase.google.com/?hl=ja

    View full-size slide

  94. 4. さいごに
    94
    最後に⼀⾔
    やっぱりエンジニアリングはおもしろい
    です
    万歳!

    View full-size slide

  95. 4. さいごに
    95
    ご視聴いただきありがとうございました
    ですます
    ありがとう
    ございました!

    View full-size slide