20260417_第7回【未経験者向け】AI時代の生存戦略！未経験から「創れる人」になるアプリ開発体験

Transcript

2. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング ※本イベントの発言はすべて個人の見解であり、所属組織を代表するものではありません 2
3. スケジュール 3 時間 内容 19:15 - 19:20（5分） オープニング 19:20 - 19:30（10分） 利用ツールの紹介とウォームアップ 19:30 - 20:40（70分） 環境構築・制作 20:40 - 20:55（15分） 休憩 20:55 - 21:15（20分） 成果発表 & 感想共有 21:15 - 21:30（15分） クロージング ※急遽変更の可能性あり
4. 資料について 4 スクリーンに投影しているスライドは、 connpassイベントページに資料としてアップロードしておりますので、 そちらからご確認ください。 https://codebase.connpass.com/event/389824/
5. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング 5
7. 駐車場について
9. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング 9
12. Antigravityで作成したアプリの紹介 12
15. では私達も体験しましょう！ 15
16. インストール案内 16
17. 環境準備・制作物決め このアイコンが目印！ ①「Antigravity」で検索し、下記のようなサイトへ遷移 ②「Download for 〇〇」→環境に合わせてダウンロード・インストーラ起動し進める 17
18. 環境準備・制作物決め ③初期セットアップ 18 ＜既存設定の読込＞ VS Code等の既存エディタ設 定を読み込ませない場合は、 設定を変更せず「Next」 ＜画面の配色＞ お好みで！
21. Antigravityを日本語表示にするための拡張機能 拡張機能の選択から、「Japanese Language Pack…」というパッケージを選択してください。
22. Antigravityを日本語表示にするための拡張機能 「Install」から拡張機能をインストールし、左下の「Change Language and Restart」を押して再起動してください。
23. Antigravityを日本語表示にするための拡張機能 拡張機能追加後、エディタに「日本語を使用する」という指示を出す設定が必要です。 日本語表示に切り替える手順 1. コマンドパレットを開く キーボードで Ctrl + Shift + P （Macの場合は Cmd + Shift + P）を同時に押します。 2. 設定コマンドを入力する 画面中央上部に出てきた入力欄に display と入力します。 3. 言語設定を選択する 候補に出てくる 「Configure Display Language」（または「表示言語を構成する」）を クリックします。 4. 「日本語」を選択する 言語の一覧が表示されるので、**「日本語 (ja)」**を選択してください。 5. 再起動する 「Restart Antigravity to switch to 日本語?」といった確認が出るので、**「Restart（再起動）」** ボタンを押します。 Windows環境での対処法
24. Antigravityを日本語表示にするための拡張機能 コマンドパレットを開く キーボードで Ctrl + Shift + P （Macの場合は Cmd + Shift + P）を同時に押すと以下のような画面が開きます。
25. Antigravityを日本語表示にするための拡張機能 設定コマンドを入力する 画面中央上部に出てきた入力欄に display と入力します。 言語設定を選択する 候補に出てくる 「Configure Display Language」（または「表示言語を構成する」）をクリックします。
26. Antigravityを日本語表示にするための拡張機能 「日本語」を選択する 言語の一覧から「日本語 (ja)」を選択する。
27. Antigravityを日本語表示にするための拡張機能 再起動する 「Restart Antigravity to switch to 日本語?」といった確認が出るので、「Restart（再起動）」ボタンを押します。
28. エージェントの返答を日本語表示にするための設定 ③ruleの名前を決める ④エディタが開かれるので、下記プロンプトを貼り付ける # 言語設定（Language Policy） あなたは日本語を母国語とするエンジニアとして振る舞ってください。 ## 基本原則 - ユーザーとのすべての対話（チャットの回答、解説、提案）は、常に日本語で行ってください。 - 丁寧な日本語（敬語・ですます調）を使用してください。 ## アーティファクトの日本語化 エージェントが生成する以下のすべての成果物（Artifacts）は、必ず日本語で記述してください： - **Task Lists**（タスクリスト）: ステップごとの作業内容 - **Implementation Plans**（実装計画書）: 修正のロジックやアーキテクチャの解説 - **Walkthrough**（ウォークスルー）: 変更の概要とテスト方法の要約 - **Test Reports / Screenshotsの説明**: 検証結果の解説 ## 技術用語の扱い - プログラミング言語のコード、変数名、関数名、および特定のAPI名などは英語のまま維持してく ださい。 - 専門用語については、必要に応じて英語を併記（例：推論（Inference））しても構いませんが、 主文は日本語にしてください。 ⑤Antigravity再起動 ①右サイドバー「・・・」→「Customization」を選択 ②「Rules」→「＋Global」を選択
29. 環境準備・制作物決め ⑥Googleでログイン ⑦Antigravityが開かれるので、「Open Folder」から任意の作業用フォルダを開く 29 ココにAntigravityがコー ドや設定ファイル等を作 っていく！
30. 環境準備・制作物決め ⑧Agentに指示を出してみる 何を作るか、どう伝えるか迷ったら… →AIにプロンプトを書いてもらいましょう！ どんなプロンプト にすればいい？ 何を作ろう？ 30
31. Antigravityのブラウザ操作 Antigravityがブラウザ操作するには一度、ブラウザが開けるか確認して下さい。 Antigravity右上 マークをクリックし、 ブラウザが開かれればOK 31
33. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング 33
36. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング 36
37. 成果発表 代表して数名の方に成果発表をお願いしています • 作成したアプリの紹介 ◦ どんなアプリか？ ◦ どのような機能？ • 感想・学び・工夫した点 ◦ プロンプトで工夫したこと ◦ 難しかった／面白かったこと ◦ Antigravityの印象 など 37
38. イベント内容 • オープニング • 施設紹介と注意事項 • Antigravityの紹介とインストール案内 • 制作 • 成果発表 & 感想共有 • クロージング 38
39. 【お知らせ】一緒に働く仲間を大募集🫣 スマホアプリ インフラ構築・保守 グーシリーズのアプリや、キングスアプリな どの開発 ーーーーーーーーーーー Flutter（Dart） Java、Swift、Kotlin、Ionic 等 各種サーバー／ネットワークの構築・運用保 守、セキュリティ対策、クラウドエンジニア リング、資産管理など。 ーーーーーーーーーーー Linux、ORACLE、Apache、nginx, AWS 新規プロダクト開発 AI研究開発 SaaS開発。 企画・開発・保守 ーーーーーーーーーーー HTML、JavaScript、Flutter、AWS 既存プロダクト向け AI開発 ーーーーーーーーーーー Python、PyTorch、TensorFlow、Pandas、 OpenCV、NumPy、AWS 🫣🫣 プロトソリューション ソリューション開発部 沖縄では事業拡大に向けてチームを引っ張ってい ける【システムエンジニア】を募集してます。 🫣🫣 プロトグループで生成AIを活用したサービス 開発・保守にあなたも参加してみませんか？ ※発言はすべて個人の見解であり、所属組織を代表するものではありません 39
41. 約3ヶ月、全18回の授業を通してHtml、css、rubyを中心にwebアプリケーションをつくるために必要な 言語を学ぶことができる講座（これまで実施してきた講座となります）。入社前研修や、オンボーディン グ研修などに活用可能です。 AIが台頭する時代において、技術的な知識（システム設計や運用に関するものも含む）だけでなく、プロ ジェクト管理や、情報セキュリティなど幅広い知識を持つことが重要になっています。またプロジェクト リーダーとしてチームを管理する上で重要な知識も学ぶ必要があります。これらを網羅した講座として開 講。入社前研修や、オンボーディング研修、リーダー育成の研修などに活用可能です。 既に作りたいものがあるが、プログラミングを一から学ぶというよりはAIを活用して形にしていきたい方 向けの月額型プログラミング講座。AIを活用する上で、必要な技術支援をエンジニアに補助してもらいな がらサービス等の完成まで導く内容となっている。 自社が顧客から選ばれる価値、そしてその価値を最大化するために業務上負担が大きくなっている課題点 を抽出し、実際にエンジニアの方々とマンツーマン形式で業務改善フローを構築する講座。実際にAIを活 用して業務フローの改善策を試験的に実装するところまで実施します。 SNS運用やリール動画の制作についてを教える講座。SNS広報を強化したい企業や広報担当者の方にご参 加いただきたいコンテンツ
42. アンケート ⬇️アンケートのご協力よろしくお願いします 42