短歌で学ぶAWSサービス

AWS10ふんLT会資料です

Transcript

1. 短歌で覚える AWSサービス 札 に 書 か れ た の は 詩 か エ ラ ー コ ー ド か
2. WHO?? • 所属： SCSK株式会社 • 業務：サイト運営 マーケティング • 出身地：愛知県名古屋市 (生粋の名古屋っこです) • AWS歴６ヶ月 • 好きなもの：飲み会 いとさん 市 )
3. 何がありますか？ 日本の伝統的な遊び あなたの考える
4. 百人一首ですね そうですね
5. 百人一首の歴史 約730年 も昔、鎌倉時代の歌人である藤原定家がまとめたもの 現在でも、お正月遊びや競技かるたとして親しまれてい ます。 貴族や歌人たちの間で詠まれた和歌から、各人の優れた 和歌や代表的な和歌一首を取り上げ、年代を追って、全 部で百人の和歌を取り上げたものです。
6. なぜ？？
7. Builder Cards勉強会 ・構築の勉強になった ・自分があまり使わないサービスの構築を知れた ・他の会社の方と多く交流ができて会話が弾んだ ・ローカルルールが存在した ・知識レベルの差で構築のレベルの差が出てくる ・サービス知識がない初学者には少し難しい
8. そこで私は考えました
9. 百人一首も あってもいいのでは？ Builder Cardsがあるなら
10. 作ってみました ということで 開 発経 験 あ ま りな いけ ど
11. 事前調査 8年前 3年前 3年前
12. 使用したツール・サービス ローカルで遊ぶことができます！
13. Amazon Q CLIとは ターミナルから利用できる開発者向けの 生成 AI アシスタントです。 コードの提案やインフラの構築支援 だけでなく、開発に必要なさまざまな 作業を、ターミナル上で行えます！
14. プロンプト 日本の百人一首をモチーフにした読み札が上 の句、下の句で分かれている本格的な百人一 首ゲームを作成してください 実装する主要機能 動作環境 ブラウザ ゲーム難易度 簡単 動作生成 – • 日本の百人一首をモチーフに •読み札は5・7・5・7・7、日本の短歌の音数 律で作成 • お手つきしたら1回休み ・難易度は簡単、普通、難しいの三種類 敵キャラクター – 敵キャラクターはAWSの画像生成機能で作 成で表現してください。 ?️ 操作方法 マウス: 取り札取得 マウス/タッチ: • 画面のボタンで全操作可能 ? ゲームの特徴 1.完全ランダム生成: 毎回新しい取り札、読み札レイアウ ト 2.成長システム: レベルアップでキャラクター強化 3.戦略性: 手札は暗記で覚えられるがふだが多いので暗記 の難易度が高い 4.視覚的: 絵文字による分かりやすい表現 5.無限プレイ: 高いレベルに進むほど難易度大幅アップ 6.対戦相手のCPUを作成 7.対戦形式ではなく一人で読まれた札を取っていく形式に して 8.相手陣と自陣が分れているような競技カルタの札配置に
15. Ver１・作成ファイル index.html - メインのHTMLファイル style.css - スタイリング game.js - ゲームロジック hyakunin-isshu.js - 百人一首データ 問題点 ・色合いが独特 ・百人一首の札が横長で札の形ではない ・謎のインベントリが存在している ・読み上げのボタンはあるが音声が流れない ・クリックに反応しない、全て読み上げるまで 札を取ることができない
16. 簡単に言えば、サイトの玄関口となるHTMLファイルです。 ユーザーが迷うことなくサイトにアクセスし、目的のページを見つけられるようにするための重要な ファイルです ボタンを押すと画像が変わる、メニューが展開する、入力フォームの検証を行うなどの 動きをつけるためのファイルです ウェブサイトのデザインやレイアウト（色、フォント、サイズ、余白、配置など）を定義するためのス タイルシート言語です。HTMLがウェブページの内容や構造を定義するのに対し、CSSはその構造を持つ コンテンツをどのように表示するかという見た目を Index.html/Js/cssとは Index.html Js(JavaScript) CSS
17. 修正 • Amazon Bedrockを使って全AWSサービスに関する百人一首を作って • 対戦形式ではなく一人で読まれた札を取っていく形式にして • Pollyから音声を作成しロボットが読み上げる形にして • AWS百人一首の頭の雲のアイコンをなくしてAWS百人一首ゲーム選択画面の次にサービスジャンル選択画面、その次に難易度設定画面 が来るようにして • 取り札にサービス名は書かないで • 札置き場の左右の隙間が大きくなりすぎないように札の横幅、縦幅、札の間隔を調節して • 札の位置が上によっています。Y軸中央にして • 裏返の時の花札のアイコンを消して取り札は1回戦ごとに5枚並べるようにして • ページの配色を#0e4833,#d3c7b7,#006741,#b9a47bの4色を使って素敵に仕上げて • 今小さくしたコンテナ、札サイズ、を深緑の四角に合わせるように大きくして • 簡単レベルの時、札を取ったらその札のサービスの解説がポップアップで出てくるようにして • トップに戻るボタンをゲーム中のページに入れてください • ジャンルを、Compute,Database,MachineLearning,Storage,ApplicationIntegration,Networking&ContentDeliveryの6種類にして • 札が表示されません修正してください • AWSのサービスを全て教えて • 今あげたサービス全ての百人一首を作成してくださ • AWSサービス324種すべての札を作りたい • すべての札を手動生成してくださいトップに戻るボタンは獲得した札のブロックの下に配置してください 札は自動生成にしないでくださいいくつか被っています 計57回
18. 動作抜粋
19. 完成版 動かしてみましょう
20. デモ動画
21. まとめ・改善点 • コーディングの知識が少なくても要望を投げるだけで理想のページ が作れた • 細かく修正ができる • ５７５７７の認識が文字ベースになってしまう (口語だと字余り多発) • 札配置のプロンプトが理解できないのか、 手動でコーディングしないといけない
22. Amazon Q CLI最強！
23. 短歌募集してます！ 応募フォーム https://blog.usize-tech.com
24. SNSはこちら X Tech Harmony