広報もすなるVibe Codingといふもの /

Transcript

1. 広報もすなるVibe Codingといふもの 株式会社primeNumber 甲斐祐樹 AI x 広報 Meetup 〜明日から使える業務効率化〜
2. 2 自己紹介 甲斐祐樹（かい ゆうき） 株式会社primeNumber 広報 Senior Manager
3. 3 自己紹介
4. 4 自己紹介 ブログ ポッドキャスト
5. 5 会社紹介 クラウド ETL 「TROCCO」 AIデータプラットフォーム 「COMETA」
6. 6 会社紹介 AIがテーマのアドベントカレンダー
7. 7 会社紹介 What does primeNumber mean?
8. 8 会社紹介 素数（そすう、英: prime あるいは prime number）と は、2 以上の自然数で、正の約数が 1 とその数自身のみ であるもののことである。正の約数の個数が 2 である自 然数と言い換えることもできる。 素数 - Wikipedia https://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0 prime number = 素数
9. 9 広報もすなるVibe Codingといふもの
10. 10 Vibe Coding 「Vibe Coding」は、OpenAIの共同創設者でTeslaの自動運転AI責任者としての 経験もあるAndrej Karpathy氏が2月3日のXへの投稿で提唱した。「雰囲気」や 「感覚」を表す「vibe」とコーディングを合わせた造語で、AIモデルに自然言 語で指示してプログラミングすることだ。動作するアプリケーションを構築す るのに「コードの存在を忘れて、ただ要求を出し続けるだけ」「完全にその場 の感覚に身を任せる」と同氏は言う。 【Infostand海外ITトピックス】コーディングレス開発「Vibe Coding」　AIに指示するだけでアプリケーションを構築 - クラウド Watch https://cloud.watch.impress.co.jp/docs/column/infostand/1672187.html チャットで指示するだけでプログラミングしないプログラミング手法
11. 11 Vibe Coding エンジニアじゃなくてもアプリが作れる
12. 12 基本ルール プログラミングのスキルや知識を一切使わずにアプリを作る • チャットだけで作れる • “黒い画面”ことコマンドプロンプトなどは使わない • 環境構築も不要（サーバー不要、データベース不要） 具体的に • HTML/CSS/Javascriptで実装 • ブラウザで動作、データは（基本的に）保持しない
13. 13 材料 • Claude（not Claude Code） • ChatGPT/Geminiでも可能 • ブラウザ
14. 14 資料作成
15. 15 突然ですがクイズです 3,934億8,000万ドルは日本円でいくら？
16. 16 Not ok,Google 桁数が多すぎて読めない
17. 17 ドル円変換を簡単に
18. 18 ドル円変換アプリ Claudeにざっくりお願い
19. 19 ドル円変換アプリ できた、のか……？
20. 20 ドル円変換アプリ 文章をペーストしやすくカスタマイズ
21. 21 ドル円変換アプリ だいたい完成
22. 22 使い方 アプリの右上のプルダウンから 「HTML形式でダウンロード」 を選択
23. 23 使い方 あとはブラウザで開くだけ （保存場所を決めて、ブック マーク登録しても使える）
24. 24 アイスブレイク
25. 25 アイスブレイク 雑談テーマ | 雑談カード https://heart-quake.com/game/zatsudan.php
26. 26 アイスブレイク ビジネスシーンで使うのが難しいテーマがある • 職場の人間関係に関する話題 • 家族や家庭の話題 テーマが6つあると悩む • どれにしようか悩む時間がかかる • １つに決めても他のテーマが気になって気が散る
27. 27 使いやすい アイスブレイクツール
28. 28 お題を作る まずはClaudeでアイディア出し
29. 29 お題を校正 広報（人間）の目でクオリティチェック
30. 30 アプリを作る アプリ開発を依頼
31. 31 完成 できあがり
32. 32 ミーティング
33. 33 ミーティング ミーティングの課題
34. 34 Time is Money 時間守れない問題
35. 35 アジェンダ • ミーティング前に必ずアジェンダ を作る • アジェンダごと担当を必ずつける • 担当が想定時間をあらかじめ記入
36. 36 人間あるある 話始めると時間を忘れがち
37. 37 時間の感覚を視覚化
38. 38 アジェンダの構成 アジェンダタイトル • 担当者名: 【ここに担当者名】 • 想定時間: 【ここに想定時間】分 • 概要はその下に自由に記載
39. 39 アジェンダベースでアプリ開発 • 直下に「担当者名」と入っているテキストをアジェンダタ イトルとする • 「担当者名: 」の後の続くテキストを担当者名にする • 「想定時間: 」に続く時間をアジェンダの想定時間とする ◦ 対象は「0分」以外の整数値のみ （議論しないけど次回以降に残しておく、というアジェ ンダを想定） 上記のルールで記載されたアジェンダをコピー、 ペーストしてタイマーを作るアプリ
40. 40 スーパーグレートタイムキーパー できあがり
41. 41 応用編 イベントのタイムキーパーにも便利
42. 42 Google サイトで限定公開 Google サイト「埋め込みコード」も便利 （キャッシュが効かないなど課題も）
43. 43 イベント
44. 44 受付を楽にしたい
45. 45 イベント受付アプリ仕様 慣れると要望が多くなる ※詳細はデモで
46. 46 受付画面 「連絡済みか未定」「連絡していない」で分類
47. 47 名前検索 ふりがなでインクリメント
48. 48 名前登録 いない人は直接入力
49. 49 編集 一覧画面で直接編集
50. 50 データ保持機能 キャッシュでブラウザ閉じても保持
51. 51 ゲーム
52. 52 ゲーム開発 素数をテーマにしたゲーム
53. 53 ハイスコアボーイ ランキング機能も実装
54. 54 Chrome拡張
55. 55 Chrome拡張 ポッドキャスト「素数ラジオ」
56. 56 ポッドキャスト更新をXへ投稿 ポッドキャストの各プラットフォームへのリンクを Xの投稿に設定する拡張
57. 57 Chrome拡張を作成 Chrome拡張機能も生成AIで作れる
58. 58 Chrome拡張設定方法 Chrome拡張機能の「デベロッパーモード」をオン、 「パッケージ化されていない拡張機能」で読み込む
59. 59 API連携でさらに自動化 APIでSpotify/AppleのURLも自動で取得
60. 60 続きはWebで 広報が3時間でXの投稿を楽にするChrome拡張機能を作成。 Claudeを使ったVibe Codingで、プログラミング知識無しでも業務効率化 https://note.com/natsumim0804/n/n2e33d1738b4f
61. 61 One more thing…
62. 62 Beyond the Browser ユーザーの要望は果てしない • 同じサービスを複数人で使いたい • 別の端末からアクセスしてもデータを保持しておきたい • スマホのアプリと連携したい
63. 63 Beyond the Browser でもプログラミングできない……
64. 64 Beyond the Browser 颯爽登場！ ※画像は生成AIが出力しました
65. 65 Replit Replit – Build apps and sites with AI https://replit.com/
66. 66 Replitの特徴 Vibe Coding（チャット）だけでインターネットに公開できるアプリが作れる • サーバー（Replitドメインでの公開） • データベース • Googleアカウントでのログイン Replitですべてが完結
67. 67 他社比較 アプリを作ってインターネットに公開できるサービスは他にもある
68. 68 Googleログインで機能比較 Google AI Studio Google Cloudの設定が別途必要 Google Cloudで取得した情報を手動で設定する必要がある Firebase Studio Googleアカウントのログインはチャットで実装 Web公開には別途Github Pagesが必要になる Replit チャットで指示するだけでGoogleアカウントログイン機能を実装 全部入りのReplitが圧倒的に楽
69. 69 作例
70. 70 ソーシャルブックマーク 特定のテーマに特化したブクマ
71. 71 英単語学習 調べるより作ったほうが早い
72. 72 ポッドキャストお便りツール 自作自演ばんざい
73. 73 料金 無料もあり、有料は25ドルから
74. 74 Beyond the Browser 颯爽登場！ ※画像は生成AIが出力しました
75. 75 スペシャルオファー 以下のQR/UR登録登録で１０ドル分のクレジット https://replit.com/refer/kai3desu
76. 76 Vibe Codingの課題
77. 77 課題 • 指示がうまく伝わらない ◦ 根気よく対応 • 1つ直すと1つ壊れる ◦ 全部やり直しも辞さない • 思わぬところでバグがある ◦ デバッグ大事 うまくいかないときはそのやりとりをまとめて新しく作り直したほうがいい
78. 78 まとめ
79. 79 課題 プログラミングの経験がなくてもアプリが作れる • 簡単なアプリならエンジニアに頼らず作れる • 自分のアイディアを試せる エンジニアの気持ちがチョットワカル • 指示が悪いとアプリも悪い • ちょっと直すのに全部を直す必要がある プログラミングに興味が湧く • 1から学ぶよりできあがりを修正するほうが楽で楽しい
80. 80 AIの活用方法 広報における「AI活用」は大きく2つ • 自分の業務を効率化 • 自分にできないことを実現 Vibe Codingは「自分ではできなかった」ことができる
81. 81 続きはWebで（2回目） 個人ブログ 会社note 会社個人ブログ ※ハッシュタグつけて流します
82. 82 Vibe Codingたのしいよ
83. Thank you!