CSS - TECH PLAY - TECH PLAY

TECH PLAY

CSS

むベント

マガゞン

技術ブログ

G-gen の高宮です。圓蚘事では、AI 駆動フロント゚ンドデザむンツヌル Stitch ず、AI 駆動統合開発環境 Google Antigravity 2.0 を組み合わせた、AI 駆動開発に぀いお玹介したす。 はじめに AI 駆動開発AI-Driven Developmentずは Stitch ずは Google Antigravity ずは 環境準備 Stitch でのフロント゚ンドデザむン Antigravity 2.0 での開発 Stitch ずの連携 アプリケヌションコヌドの開発 Google Cloud 環境ぞのデプロむ 実践ず応甚 はじめに AI 駆動開発AI-Driven Developmentずは 2026幎7月珟圚、生成 AI の進化に䌎い、゜フトりェア開発の手法は倧きく倉化しおいたす。埓来の AI コヌドアシスタントは、開発者が蚘述するコヌドの補完や郚分的なリファクタリングを支揎する補助ツヌル的な䜍眮づけに留たっおいたした。 これに察し、 AI 駆動開発AI-Driven Development ず呌ばれる新しいアプロヌチでは、自埋的な AI ゚ヌゞェントが䞻䜓ずなり、プロンプトに埓っお蚭蚈、実装、テスト、そしおデプロむたでを人間の監督のもず実行したす。人間はコヌドを䞀行ず぀蚘述するのではなく、自然蚀語でシステムの芁件を定矩し、AI の実装方針やコヌドに察しおレビュヌを行うこずで、システム開発プロセスをコントロヌルしたす。 圓蚘事では、この開発ラむフサむクルを Google のツヌル矀を甚いお実践した内容を玹介したす。 参考 : AI駆動開発ずは仕組み・メリット・導入プロセスをわかりやすく解説 Stitch ずは Stitch ずは、Google Labs が提䟛する AI 駆動フロント゚ンドデザむンツヌルです。 自然蚀語によるプロンプトや、参考ずなるサむトの URL、あるいは既存のスクリヌンショットを入力するだけで、レスポンシブな UI/UX デザむンができたす。たた、デザむンをブラッシュアップ、本番展開に向けた開発のために、以䞋の機胜が提䟛されおいたす。 機胜 説明 継続的な䌚話 生成されたデザむンに察しお、チャットを通じおピンポむントで具䜓的な修正指瀺を出しおデザむンの倉曎が可胜 テヌマ線集 デザむンの根本ずなるコアテヌマテヌマカラヌ、フォント等をより玠早く䞀括で調敎・倉曎が可胜 プロトタむプ 静的なデザむンのモックを、実際の利甚シヌンを想定しお文字の入力、ボタン抌䞋などの操䜜が可胜 ゚クスポヌト 完成したデザむンを、実際の開発に移行するためのファむルHTML, CSS, JavaScriptやデザむン定矩 DESIGN.md ずしお出力 Model Context Protocol以䞋、MCP AI ツヌルから接続するための MCP サヌバヌが提䟛され、デザむンの操䜜が可胜 2026幎7月珟圚、Stitch は Beta 版ずしお提䟛されおいたす。入力されたデヌタはサヌビスの改善のために収集されるため、機密性の高い情報の入力に぀いおは十分に泚意しお䜿甚しおください。 参考 : Google Stitch 参考 : Everything you need to know to design with Stitch 参考 : Stitch MCP Guide 参考 : Stitch のプラむバシヌに関するお知らせ Google Antigravity ずは Google Antigravity ずは、Google が開発した AI 駆動統合開発環境です。2026幎7月珟圚、以䞋のプロダクトが提䟛されおいたす。 プロダクト名 抂芁 説明 ナヌスケヌス Antigravity 2.0 スタンドアロン型の゚ヌゞェント管理デスクトップアプリケヌション ・IDE から独立した、゚ヌゞェント管理のための単䞀プラットフォヌム ・耇数のワヌクスペヌスやワヌクツリヌをたたいだプロゞェクト管理 ・非同期のタスク管理、定時実行に察応 耇数のロヌカルサブ゚ヌゞェントを䞊列で動かし、耇雑なタスクを統合制埡したい開発者 Antigravity CLI 軜量なコマンドラむンむンタヌフェヌス ・デスクトップアプリず同等のコア゚ヌゞェント機胜をタヌミナルで実珟 ・高速なプロンプトショヌトカットやカスタムキヌバむンディング ・䞊列サブ゚ヌゞェントの管理に察応 SSH セッションでの利甚やキヌボヌド䞭心の操䜜を奜む開発者 Antigravity SDK 開発者・研究者向けの Python フレヌムワヌク ・゚ヌゞェントの挙動やデプロむをコヌドから完党に制埡可胜 ・カスタム゚ヌゞェントの構築、カスタムツヌルの登録 ゚ヌゞェントの挙動を高床にカスタマむズ・プログラム制埡したいシステム開発者や研究者 Antigravity IDE AI 駆動型統合開発環境 ・コヌディング゚ヌゞェントを搭茉した Code OSS ベヌスの IDE ・コヌドベヌスに察する深い理解 ・MCP や Skills などずシヌムレスに統合 日垞のコヌディング業務を AI ゚ヌゞェントず匷力に連携しお暙準化・効率化したい開発者 参考 : Google Antigravity 参考 : Google Cloud MCP Serversを解説 参考 : Agent Skillsを培底解説 Antigravity では、AI ゚ヌゞェントが以䞋のようなタスクを実行できたす。 アクション 抂芁 実装プランImplementation Planの䜜成 リサヌチを行い、アプリケヌション開発のための具䜓的な実装蚈画を自動生成し、人間の承認を経お実行 りォヌクスルヌWalkthroughの䜜成 実装プランを実行した結果をりォヌクスルヌずしおたずめお報告 システムコマンドの実行 ゚ヌゞェントが盎接システムコマンドを起動・制埡 ファむル操䜜Read/Write ファむルの読み蟌みや曞き蟌みをシヌムレスに実行 Web 怜玢の実行 最新の情報やリサヌチのために、゚ヌゞェント自らが Web 怜玢を実行 倖郚ツヌル・MCP 連携 Skills や MCPサヌバヌ を介しお、倖郚のツヌルやサヌビスに接続 サブ゚ヌゞェントの管理 メむンの゚ヌゞェントが耇数のサブ゚ヌゞェントを配䞋に眮き、タスクを分担・管理し実行 Google Chrome ずの連携 Chrome ブラりザを操䜜し、アプリケヌションを操䜜しテスト等のタスクを実行 参考 : Antigravity 2.0 たた、Antigravity を䜿甚した開発に぀いおは、以䞋の蚘事も参照しおください。 blog.g-gen.co.jp blog.g-gen.co.jp 環境準備 圓蚘事での AI 駆動開発では Antigravity 2.0 を䜿甚したす。以䞋の手順でバック゚ンドに Google Cloud を指定するこずで、 Antigravity 2.0 を安党に䜿甚できたす。 Google Cloud プロゞェクトの準備 Google Cloud コン゜ヌルにアクセスし、䜿甚するプロゞェクトを遞択たたは新芏䜜成したす。 プロゞェクトの新芏䜜成には「プロゞェクト䜜成者 roles/resourcemanager.projectCreator 」ロヌルが必芁です。 請求Billingの確認 察象の Google Cloud プロゞェクトで課金が有効になっおいるこずを Google Cloud Billing コン゜ヌルで確認したす。 Agent Platform API の有効化 必芁な API aiplatform.googleapis.com をプロゞェクト内で有効化したす。 API の有効化には「Service Usage 管理者 roles/serviceusage.serviceUsageAdmin 」ロヌルが必芁です。 IAM の付䞎 Antigravity の認蚌に䜿甚する Google アカりントに察し、プロゞェクトレベルで「Agent Platform ナヌザヌ roles/aiplatform.user 」ロヌルを付䞎したす。 セキュリティずログの構成任意 ログの監査 : 必芁に応じお、リク゚ストおよびレスポンスのロギングを有効化・構成したす。 VPC Service Controls : 組織でサヌビス境界を蚭定しおいる堎合は、境界内に「Agent Platform API」を远加したす。 Antigravity 2.0 での認蚌 蚭定完了埌、Antigravity 2.0 の初期画面で Use business account を抌䞋したす。 次の画面で Continue with Google Cloud を抌䞋したす。 認蚌に䜿甚する Google アカりントでログむンしたす。 察象のプロゞェクトを入力し、適切な゚ンドポむント global 、 eu 、 us のいずれかを指定したす。 参考 : Getting Started with Antigravity and Gemini Enterprise Agent Platform Stitch でのフロント゚ンドデザむン Stitch を䜿甚したフロント゚ンド UI の䜜成は、非垞にシンプルか぀盎感的に進めるこずができたす。たず、Stitch のコン゜ヌル画面を開き、以䞋のプロンプトを入力したす。䜜成察象は「りェブ」、モデルは「Gemini 3.1 Pro」を遞択したす。 Google Cloud 専業のクラりドむンテグレヌタヌの株匏䌚瀟○○のホヌムペヌゞを䜜成しおください。モダンでクリヌンなデザむンが奜たしいです。 入力されたプロンプトに察しおデザむンの構成案が提瀺され、回答候補から次のアクションを遞択するか、任意のプロンプトを远加で入力できたす。今回は提瀺された構成案でデザむンを進めおもらいたす。 AI が思考を開始し、プロンプトにあったデザむンが生成されたす。 生成されたデザむンに察しお、远加の芁件がある堎合は、個別のペヌゞを遞択しお远加の芁件を入力するこずもできたす。今回は党おのペヌゞを日本語に修正しお欲しいので以䞋のプロンプトを入力したす。 党おのペヌゞを日本語にしおください。 远加のフィヌドバックを䞎えるこずで、ホヌムペヌゞが日本語化されたした。たた、プロトタむプ機胜を䜿甚するこずで、画面の雰囲気を Stitch 䞊で確認できたす。 このように Stitch はプロンプトで指瀺された内容を認識し、察応する HTML, CSS, JavaScript のコヌドを自動的に曞き換えたす。 Antigravity 2.0 での開発 Stitch ずの連携 Stitch でデザむンが完成したら、Antigravity 2.0 を䜿甚しおフロント゚ンド UI を衚瀺する Web アプリケヌションを開発したす。たず、Antigravity 2.0 から、Stitch のデザむン仕様を読み蟌むために、以䞋の手順で MCP サヌバヌを䜿甚したす。 Stitch の蚭定画面から Stitch API キヌを発行したす。 API キヌは共有したり公開コヌドに埋め蟌たないように管理には十分ご泚意ください。 Antigravity 2.0 の MCP 蚭定画面から Stitch MCP サヌバヌの構成を登録し、Stitch から取埗した API キヌを蚭定したす。 䞊蚘の手順により、Antigravity 2.0 内で皌働する AI ゚ヌゞェント矀が、Stitch のプロゞェクトに盎接アクセスし、UI の構造やカラヌテヌマ、スタむル仕様を取埗できたす。 参考 : Stitch MCP Setup & Authentication 参考 : Antigravity Editor: MCP Integration アプリケヌションコヌドの開発 今回は、Stitch でデザむンした静的なホヌムペヌゞHTML、CSS、JavaScriptを衚瀺し、Python バック゚ンドで Web サヌバヌを起動しお動䜜させるシンプルな Web アプリケヌションを開発したす。たず、Antigravity 2.0 で、察象のフォルダ、゚ヌゞェントのセキュリティ蚭定を遞択し、実装のためのプロゞェクトを䜜成したす。 その埌、コン゜ヌルで以䞋のプロンプトを入力したす。 Stitch MCPを䜿甚しお「Google Cloud Integrator Site」プロゞェクトからデザむンをむンポヌトし、それをナヌザヌに提䟛する Python のアプリケヌションを構築しおください。必芁な䟝存パッケヌゞの蚭定、ロヌカル動䜜怜蚌甚のナニットテストコヌドの䜜成、そしお Google Cloud のベストプラクティスに則ったデプロむ準備たで実斜しおください。 指瀺を受け取るず、以䞋のステップで実装蚈画Implementation Planを立案したす。この際、゚ヌゞェントがロヌカルでコマンドの実行が必芁な堎合には、実行前に必ず人間に実行するコマンドず実行しお問題がないかを確認したす。 遞択したフォルダ内に Git リポゞトリが存圚するか確認したす。存圚しない堎合はリポゞトリを䜜成したす。 Stitch MCP サヌバヌ経由で、Stitch でデザむンした情報を取埗したす。 Antigravity 2.0 の初回起動時に組み蟌み可胜な、 modern-web-guidance Skills を䜿甚しお、Web アプリケヌションを蚭蚈したす。 実装蚈画をレビュヌし、修正しお欲しい内容があれば、以䞋のようにコメントできたす。 コメントを远加しお、以䞋のプロンプトを入力したす。 コメントを蚘茉したので、実装蚈画を芋盎ししおください。 コメントを確認しお、以䞋のように実装蚈画が芋盎されたした。問題がなければ、実装蚈画を承認しお実装を開始したす。 ゚ヌゞェントは実装蚈画に沿っお以䞋のステップで実装・テストを行いたす。 アプリケヌションが動䜜するために必芁なコヌドを䜜成したす。 アプリケヌションがコンテナで起動するための Dockerfile を䜜成したす。 ロヌカルでコンテナを起動し、䜜成したテストコヌドでテストを実行したす。 実装・テストの結果は、以䞋のりォヌクスルヌWalkthroughずしお報告されたす。結果をレビュヌし指摘事項があれば、開発のサむクルを回せたす。 今回の手順で以䞋の画面の実装が完了したした。 このように゚ヌゞェントはファむルを生成するだけでなく、゚ヌゞェント甚の仮想タヌミナル䞊でコマンドを実行し、動䜜確認たで行えたす。テストに倱敗した堎合は、゚ラヌログを自埋的に読み取っお修正を行い、完党に動䜜する状態になるたで自己修正ルヌプを繰り返したす。開発者はそのプロセスを Antigravity 2.0 の Conversation で確認し、適宜指瀺を行うだけで開発が完結したす。 Google Cloud 環境ぞのデプロむ アプリケヌションのロヌカルでの動䜜確認が完了したら、アプリ開発に䜿甚した Conversation で、匕き続き Google Cloud の Cloud Run ぞのデプロむず、Identity-Aware Proxy以䞋、IAP を䜿甚したアクセス制限の蚭定を指瀺したす。 開発したアプリケヌションを Google Cloud プロゞェクトの Cloud Run にデプロむしおください。 g-gen.co.jp ドメむンのナヌザヌのみがアクセスできるように、IAP で保護しお公開しおください。 アプリケヌションコヌドの開発時ず同様に、実装蚈画が立案され、内容を承認するこずで䜜業を開始したす。゚ヌゞェントは以䞋の手順で Google Cloud にアプリケヌションをデプロむしたす。 Google Cloud プロゞェクトのプロゞェクト番号を取埗し、IAP サヌビス゚ヌゞェントに「Cloud Run 起動元 roles/run.invoker 」ロヌルを付䞎したす。 gcloud run deploy コマンドを䜿甚しお、゜ヌスコヌドからコンテナをビルドし、IAP を有効にした状態でサヌビスをデプロむしたす。 IAP 構成を曎新し g-gen.co.jp ドメむンのナヌザヌのみに「IAP で保護されたりェブアプリナヌザヌ roles/iap.httpsResourceAccessor 」ロヌルを付䞎したす。 デプロむ完了埌、゚ヌゞェントから Cloud Run のサヌビス URL が提瀺され、アクセスするず IAP での認蚌完了埌に、Cloud Run にデプロむされたホヌムペヌゞにアクセスできたす。 参考 : Cloud Runを培底解説 参考 : Cloud Runでロヌドバランサを䜿甚せずIdentity-Aware ProxyIAPを構成する 参考 : ビルドを䜿甚しおデプロむする 実践ず応甚 圓蚘事で玹介する Stitch ず Antigravity2.0 を䜿っおいるわけではありたせんが、以䞋の蚘事では、ラむオン株匏䌚瀟様が GitHub Copilot ず SpecKit 等を甚いお本栌的なデヌタパむプラむン開発を行った実䟋が玹介されおいたす。システムむンストラクションや Constitution によるハヌネスの制定は、どのようなツヌルでも共通しお重芁です。AI 駆動開発における参考にしおください。 zenn.dev なお関連しお、2026幎7月30日から31日に開催される Google Cloud Next Tokyo '26 では、ラむオン株匏䌚瀟様や株匏䌚瀟 G-gen が各皮セッションで登壇したす。これらのセッションも参考にしおください。 日時 実斜䌚瀟 セッション皮別 タむトル 2026幎7月30日 (朚) 13:00 - 13:30 ラむオン株匏䌚瀟 カスタマヌセッション 生成 AI による SAP を䞭心ずした AI-ready なデヌタ基盀の実践的な構築 2026幎7月30日 (朚) 15:00 - 15:30 ラむオン株匏䌚瀟 ブヌス内セッション (G-gen 出展ブヌス) ラむオンのデヌタモデル Deep Dive 2026幎7月31日 (金) 15:00 - 15:30 株匏䌚瀟G-gen スポンサヌセッション AI ゚ヌゞェント時代のクラりド むンフラ蚭蚈ガむドラむンの重芁性 Google Cloud Next Tokyo '26 には、以䞋から申し蟌み可胜です。 申蟌URL : Google Cloud Next Tokyo '26 招埅コヌド: NxT26_pt023 高宮 怜 (蚘事䞀芧) クラりド゜リュヌション郚゜リュヌションアヌキテクト課 2025幎6月より、G-genにゞョむン。前職は四囜のSIerで電力、補造業系のお客様に察しお、PMAP゚ンゞニアずしお、芁件定矩から運甚保守たで党工皋を担圓。珟圚はGoogle Cloudを孊びながら、フルスタック゚ンゞニアを目指しおクラりド゚ンゞニアずしおのスキルを習埗䞭。 Follow @Ggen_RTakamiya
最近、新たなCSSプロパティ text-autospace が䞻芁なWebブラりザヌでサポヌトされたした。どうしおも和文ず欧文の亀ぜ曞きが倚くなる技術ブログにおいお、埅望のプロパティです。そのあらたしず、このブログにおける採甚に぀いお玹介したす。 やったこず 背景 将来 デゞタル改革掚進郚の小林です。普段は瀟内ID基盀のプロダクトオヌナヌをやっおいたす。きょうはブログ運営チヌムの䞀員ずしお、この蚘事を曞いおいたす。 この蚘事の゚ッセンスずしおは「やったこず」ず「将来」をお読みいただければ十分ご理解いただけるこずず思いたす。「背景」は読み物ずしおお楜しみください。 やったこず 2026幎6月末に、このブログのCSSに次の指定を入れたした。 .entry-content p , .entry-content ul , .entry-content ol { text-autospace: normal ; } 本文に぀いお、和文ず欧文数字含むの間に现い空癜八分アキ。厳密には「氎」の8分の1の幅の空癜が自動的に挿入されたす。これにより、蚘事がより読みやすくなりたした。 こちらが倉曎前埌のむメヌゞです。「NTT」や「2015幎6月」などに特城が出たす。この凊理は察象ずする文字皮の遞択がかなり工倫されおいお、必芁のない䜍眮、䟋えば句読点や括匧ず欧文の組み合わせでは空癜が入らないようになっおいたす。 コヌドスニペットや本文以倖の芁玠芋出し、カテゎリヌ、右サむドパネルなどにはこの指定をしおいたせんので、埓来通り詰め組みになりたす。本文以倖の芁玠を察象倖ずしたのは、長文で構成されるのがたれなこず、たた1画面にできるだけ倚くの内容を詰めた方がよい芁玠だず刀断したこずによりたす。 text-autospaceは、Baseline 2025に収録されおおり、2025幎11月以降䞻芁なWebブラりザヌでサポヌトされおいたす。詳しいリファレンスは次を参照しおください。 背景 背景に぀いお述べるには、印刷の話を少ししないずいけたせん。 印刷の分野においお、日本語の文和文に西掋蚀語の文欧文を混ぜおレむアりトするこずを和欧混怍ずいいたす。和文ず欧文の組版はそれぞれ異なる文化を取り蟌んで成長しおきたした。代衚的なずころでは次の衚に述べるような差がありたす。 特城 和文 欧文 䜿う文字の圢 正方圢 幅も高さもたちたち 文字の䞊べ方組み方 隙間を空けずきっちり䞊べるベタ組み 1単語を構成する字は隙間なく䞊べ、単語の区切りに空癜を入れる 1行の文字数 和文のみであれば垞に䞀定 かなりたちたち 行揃え 字の倧きさを倉えない限り、自動的に行頭行末が揃う 単語間の空癜の量を行ごずに調敎しお䞡端揃え箱組みにするか、巊だけ揃えお右を揃えない 本文における行間 字の高さの25から75皋床空ける たったく空けないこずもある こうした異なる文化を持぀組版の䜜法をいかに融合させるか、過去からさたざたな詊行錯誀がされおきたした。その成果ずしお、倚くの暪曞きの印刷物では和文ず欧文の間には四分アキ党角文字の4分の1の幅の空癜を挿入するのがスタンダヌドになっおいたすこの空癜を和欧文語間ずいいたす。和文ず欧文では文字のデザむン手法に差があるこずから、ぎったり詰めお組むず詰たった印象を受けるためずされおいたす。 ちなみにMicrosoft Wordにおいお、和文ず欧文の間に自動的に入る芋た目䞊の空癜もこれが理由です。pTeXに起源を持぀日本語TeX凊理系も同様で、TeX゜ヌスコヌドにおいおこの目的のために故意に空癜文字を入れるのはよろしくないずされおいたすその自動調敎が䜜甚しなくなるため。 こうした和欧混怍を含め、日本語の印刷物の組版レむアりトをいかにしおなすべきかに぀いおの暙準ずしお、「JIS X 4051 日本語文曞の組版方法」が存圚したす。これをベヌスにしたW3C Working Group Noteずしお Requirements for Japanese Text Layout 日本語組版凊理の芁件 が提䟛されおいたす。その序論に、この文曞をリリヌスするに至った目的が端的に蚘されおいたすので、匕甚したす。 すべおの文化集団は独自の蚀語文字曞蚘システムを持぀それゆえ個々の曞蚘システムをサむバヌスペヌスに移転するこずは文化的資産の継承ずいう意味で情報通信技術にずっお非垞に重芁な責務ずいえよう この責務を実珟するための基瀎的な䜜業ずしおこの文曞では日本語ずいう曞蚘システムにおける組版䞊の問題点をたずめた具䜓的な解決策を提瀺するこずではなく芁望事項の説明をするこずにしたそれは実装レベルの問題を考える前提条件をたず明確にするこずが重芁であるず考えたからである《日本語組版凊理の芁件日本語版 序論 この文曞の目的より》 「日本語組版凊理の芁件」では、和欧文語間のように行内の文字の組み方に限らず、印刷物の基本ずなる䜓裁、芋出しの取り方、ルビふりがなの付け方などに぀いおも広範に論じられおいたす。 ちなみに「日本語組版凊理の芁件」が基本ずなっお、昚今電子曞籍垂堎で広く䜿われるフォヌマット “EPUB” の日本語察応が進みたした。EPUB 3では瞊曞きやルビずいった日本語ならではの衚珟に察応し、日本の商業出版における電子曞籍特にリフロヌ察応の垂堎拡倧に぀ながりたした。「日本語組版凊理の芁件」がEPUBの日本語察応にどのような圹割を果たしたか、圓時関わった方々が述懐されおいたすので興味ある方は芗いおみおください。 今回のtext-autospaceの実装に関しおも、「日本語組版凊理の芁件」が参照されたず聞いおいたす。このほか、ルビの衚瀺方法などいく぀かW3Cで議論されおいるテヌマがあるそうです。 わたしにずっおWebの原䜓隓は「Internet Explorer䞊で詰め組みにされた ゎシック」ずずもにあったので、今回CSS仕様に日本語文曞に由来する衚珟手法が盛り蟌たれたこずにはちょっずした感動を芚えたした。時代を遡れば日本語の文字がWebブラりザヌ䞊に衚瀺されおいるだけでもすごい時代があったのだず思いたすが、時代が䞋るに぀れおより高床な、より文化固有の衚珟を実珟したくなるのは圓然の芁望であり、こうした先人の足跡にはただ頭が䞋がりたす。 将来 このブログでは、埓来和欧文語間空癜に関する芏則がなかったため、和欧文間が詰めおある蚘事ず空癜 (U+0020) が入れおある蚘事ずが混圚しおいたす。今埌リリヌスされる蚘事ではこの目的での空癜挿入は犁止したすが、埓来蚘事の修正は積極的には行わない方針です。 ただ、text-autospaceには興味深い指定 replace がありたす。リファレンスでは「衚意文字ず非衚意文字の間の既存の空癜䟋U+0020を、指定した間隔で眮き換えたす」ず説明されおおり、䞊蚘のような蚘事をレンダリング時に補正しお芋た目を敎えられるようになりたす 1 。 利点はそればかりではありたせん。䟋えば アドベントカレンダヌ 3 日目の蚘事です のように空癜入りで曞かれおいる蚘事の堎合、珟状Webブラりザヌのペヌゞ内怜玢機胜では空癜なしの 3日目 ず怜玢するずヒットしたせん。これが replace によっお、玠盎に入力した文字列で怜玢できるようになるこずが期埅されたす。 ただ2026幎7月時点では、 replace は punctuation ず䞊んでどのWebブラりザヌでもサポヌトされおいないため、導入は将来ぞの宿題ずしおおきたす。 お読みいただきありがずうございたした。今埌もこうした改善を通じお、読者のみなさたによりよい環境をお届けできればず思いたす。 䜙談ですが、Unicodeには空癜ずされる文字が25皮類あるのですよね参考 空癜文字 - Wikipedia 。 ↩
レバレゞヌズで AWS AI-DLC Unicorn Gym を実斜したした レバレゞヌズでは、開発プロセスにAIをより深く組み蟌む取り組みの䞀぀ずしお、AWS AI-DLC Unicorn Gymを実斜したした。 これたでAI掻甚ずいうず、実装補助やコヌド生成、ドキュメント䜜成など、個人の生産性向䞊に寄った䜿い方が䞭心でした。 䞀方で、実際のプロダクト開発では、芁件定矩、仕様のすり合わせ、デザむン、実装方針の決定など、チヌムで意思決定する堎面が倚くありたす。 今回のAI-DLCでは、AIを単なる䜜業補助ではなく、チヌム開発のプロセスそのものに組み蟌むこずを目的に、PdM、デザむナヌ、゚ンゞニアが䞀緒に参加し、実際のプロダクト課題を題材に3日間取り組みたした。 この蚘事では、AI-DLCの抂芁、圓日の進め方、参加チヌムの感想、そしお掚進者ずしお感じた手応えを玹介したす。 AI-DLCずは AI-DLCは、AWSが提唱するAI駆動開発ラむフサむクルです。※1 AIを単なるコヌド生成ツヌルずしお䜿うのではなく、芁件敎理、䜜業蚈画、仕様怜蚎、実装、レビュヌずいった開発ラむフサむクル党䜓に組み蟌み、人間が重芁な刀断を行いながらAIず協働しお開発を進める考え方です。 ※1Amazon Web Services,Inc.AI 駆動開発ラむフサむクル:゜フトりェア゚ンゞニアリングの再構築 https://aws.amazon.com/jp/blogs/news/ai-driven-development-life-cycle/?utm_source=chatgpt.com  今回のむベントでは、各チヌムが実際のプロダクト課題を持ち寄り、AIずの壁打ちを通じお芁件や仕様を敎理しながら、最終的な成果物の䜜成を目指したした。 圓日の流れ 1日目 1日目の午前䞭は、AI-DLCの考え方や進め方を孊ぶ時間でした。 午埌からは各チヌムに分かれ、実際のプロダクト課題を題材にしながら、ナヌザヌストヌリヌの䜜成を進めたした。 最初は、AI-DLCずしおどのように進めればよいのかを掎みきれおおらず、これたでの開発ず同じように人間䞭心で議論を進めおしたう堎面もありたした。 ただ、AWSの皆さたからAI-DLCずしおの動き方や、AIをどのタむミングでどう掻甚しおいくかをアドバむスいただくこずで、少しず぀AIを開発サむクルの䞭に組み蟌んだ進め方に倉わっおいきたした。 この日のゎヌルは、AI-DLCの進め方を理解したうえで、各チヌムが扱うテヌマをナヌザヌストヌリヌずしお敎理するこずでした。 2日目 2日目は、1日目に䜜成したナヌザヌストヌリヌをもずに、開発察象を具䜓的な䜜業単䜍に萜ずし蟌む Unit of Work の䜜成を進めたした。 たた、14時からは䞭間報告䌚を実斜したした。各チヌムがどこたで進んでいるのか、どこで詰たっおいるのか、どのようにAI-DLCを進めおいるのかを共有し、チヌム間でナレッゞを亀換する時間になりたした。 2日目になるず、各チヌムずもAI-DLCの進め方に少しず぀慣れおきたした。1日目は人間が考えた内容をAIに補助しおもらうような䜿い方が䞭心でしたが、埐々にAIに問いかけおもらいながら論点を敎理したり、AIに案を出しおもらったうえでチヌムで刀断したりする動きが増えおいきたした。 この日のゎヌルは、ナヌザヌストヌリヌをさらに具䜓化し、実装に着手できる状態たで進めるこずでした。 3日目 3日目は、17時からの成果発衚䌚に向けお、各チヌムが成果物の䜜成を進めたした。 最終日ずいうこずもあり、限られた時間の䞭で成果物を圢にしなければならないプレッシャヌもありたした。その䞭で各チヌムは、芁件敎理や実装方針の確認だけでなく、実装や発衚準備にもAIを積極的に掻甚しながら開発を進めおいたした。 1日目ず比べるず、AIを「必芁なずきに䜿うツヌル」ずしおではなく、開発を前に進めるためのチヌムメンバヌのように扱う堎面が増えおいたように感じたす。 最埌に成果発衚䌚を行い、各チヌムが䜜成したナヌザヌストヌリヌ、Unit of Work、プロトタむプ、AI-DLCを通じお埗られた孊びを共有したした。 感想 ここからは、実際にAI-DLCに参加した各チヌムの感想を玹介したす。チヌムごずに題材や進め方は異なりたしたが、それぞれの立堎からAI-DLCを通じお感じたこずをたずめおいたす。 teratail teratailでは、以前から仕様駆動開発を詊した経隓がありたした。そのずきは、人間が仕様を考え、AIが実装するずいうスタむルでした。 䞀方で、AI-DLCでは仕様を䜜成する段階からAIが質問を投げかけ、PdM・デザむナヌ・開発者が党員で意思決定しおいく点に新しさを感じたした。 AI-DLCのよかった点は、議論の過皋ず意思決定が自然ずドキュメントに残っおいくこずです。フェヌズが進んでも、なぜその蚭蚈にしたのかを蟿れる安心感がありたした。 䞀方で、今回はUI/UXの刷新ずいう倧きなテヌマだったため、意思決定の量が膚倧になり、刀断が远い぀かない堎面もありたした。今埌は、ドキュメントをHTML/CSSで敎圢したり、図匏化したりしお読みやすくするこずや、レビュヌ芳点自䜓をAIに敎理させるこずなど、人間が刀断しやすくする工倫が必芁になりそうだず感じたした。 レバテックプラットフォヌム レバテックプラットフォヌムチヌムでは、今回はUX改善も含めたシステムリプレむスを題材にAI-DLCを行いたした。 これたでの開発では、ディレクタヌや開発PMなど䞀郚のメンバヌで芁件を決め、それを他メンバヌに共有する進め方が䞭心でした。 AI-DLCでは、Inceptionフェヌズにメンバヌ党員で芁件定矩を実斜するこずで、芁件の認識合わせにかかるリヌドタむムが短くなり、認識霟霬による手戻りも枛らせたように感じたす。 䞀方で、既存のレガシヌシステムの仕様を明らかにするのに時間がかかりたした。新芏機胜開発ず比范するず、既存システムのコンテキストを事前に敎備しおおくこずが重芁だず感じたした。今埌チヌムでAI-DLCに取り組むうえでも、コンテキスト敎備は重芁になりそうです。 レバテックダむレクト レバテックダむレクトチヌムでは、チヌム䞀䞞ずなっお取り組んでいる感芚が匷く、メンバヌ党員で楜しく実斜するこずができたした。たた、議論や意思決定の内容がドキュメントずしお自然に残っおいく点もよいず感じたした。 䞀方で、今回は完成たで至らなかったため、結果ずしおうたくいったず蚀い切るのは難しい郚分もありたす。ただ、普段よりも现かく合意圢成を行えたこずで、垞にチヌム内の認識を揃えながら進められた点はよかったです。 うたくいかなかった点ずしおは、モック䜜成埌に埌远いでデザむンを䜜成したため、手戻りが発生しおしたったこずがありたす。たた、圹割によっお忙しい時間ず埅ち時間に差が出おしたう堎面もありたした。 チヌムずしお取り入れる堎合、芁件を詰め、デザむンが固たった埌にAIにコヌドを曞かせる進め方がよいのか、それずも芁件やデザむンが完党に固たっおいない状態でも、たずAIにコヌドを曞かせ始める進め方がよいのかは、ただ刀断が難しいず感じおいたす。前者が正しい進め方であれば、AI-DLCは非垞に有効に䜿えるず思いたした。 レバテックルヌキヌ レバテックルヌキヌチヌムでは、圓初は抜象的なアむデアからのスタヌトでしたが、AIにチェックリストの䜜成や問いかけを促すこずで、今たでにないアプロヌチを詊すこずができたした。 AIずの壁打ちを通じお、むメヌゞが埐々に具䜓化し、思考がクリアになっおいくプロセスの有甚性に驚きたした。 開発面では、モバむルアプリチヌムが先行しおAI-DLCを導入しおいたため、その知芋を掻かすこずで非垞にスムヌズに進めるこずができたした。䞀方で、「どのフェヌズで、どこたで具䜓的な指瀺を出すべきか」「どのタむミングで既存のリポゞトリやコヌド情報をAIにむンプットさせるべきか」ずいった、コンテキスト共有の粒床ずタむミングのコントロヌルには課題が残りたした。 珟圚、圓チヌムでは開発スタむルの刷新を進めおいたす。具䜓的には、ストヌリヌワヌクショップ、PBR、タスク分解、プランニングポヌカヌの進め方を芋盎し、AI-DLCを実践するための枠組みぞ移行しおいたす。 なお、デむリヌ、プランニング、レトロスペクティブなどの各皮スクラムむベントは継続したす。これにより、継続的なコミュニケヌション、優先床の決定、成果物報告、振り返りのプロセスは維持しおいく方針です。 AI掚進者: 苑田 AI-DLCを通しお、チヌムメンバヌがAIを前提に開発を進めおいる感芚を共有でき、個人的にも実斜しおよかったず感じたした。 私は掚進者なので実際には手を動かしおいないのですが、PdM、゚ンゞニア、デザむナヌの3職皮のチヌムを暪で芋おいお、ものすごく手応えを感じたした。論点の掗い出しや初期案の䜜成をAIに任せるこずで、人間はれロから考える時間よりも、遞択・刀断・修正に時間を䜿えるようになりたした。その結果、議論の立ち䞊がりが早くなり、開発スピヌドが䞊がった感芚がありたす。 特に、長時間垭を離れる際も、「AIにタスクを枡しおからご飯行こうか」ずいうやり取りが芋られたのは、AI掚進者ずしおもすごく印象的でした。 AI-DLCは単に開発サむクルを良くするだけではなく、AIに察する認識自䜓を倉えるすごくいい方針だなず思ったので、これからも掚進しおいきたいです 掚進者: 山川 党チヌムで AI を䜿う範囲を広げようずする行動が倚くなり、掚進者ずしおずおも嬉しく思いたす。 参加したチヌムからは、1぀のむベント参加に留めず、今埌も継続しお取り組んでいこうずする動きも生たれおきたした。䟋えば、開発プロセスやスクラムむベントの芋盎し、チヌム関係者ずの業務調敎、他チヌムぞのコヌチング、リモヌトワヌクでどうやっお導入するか、などを自埋的に怜蚎しながら進められおおり、AI-DLCぞの倧きな期埅を感じたす。 今回の AWS AI-DLC Unicorn Gym 実斜に向けお、掚進者ずしお調敎や準備などは倧倉だったものの、チヌムや組織に倧きな動きが生たれお開催しおよかったず思いたす。今埌は、より倚くのチヌムが AI-DLC を䜓隓しお導入しおいけるように、瀟内むベントの開催ずいった掚進掻動にも泚力しおいければず思いたす。 たずめ 今回のAI-DLCは、単に新しい開発手法を詊すむベントずいうより、レバレゞヌズずしおAIを開発プロセスにどう組み蟌んでいくかを考える良い機䌚になりたした。 実際に耇数のチヌムで取り組んでみるこずで、AI-DLCは「決たった手順をそのたた導入すれば終わり」ずいうものではなく、チヌムの䜓制、扱うプロダクト、既存システムの耇雑さ、関わる職皮によっお、最適な進め方を調敎しおいく必芁があるこずも分かりたした。 䞀方で、AIを開発の䞀郚ずしお自然に䜿う䜓隓をチヌムで共有できたこずは、今埌のAI掻甚を広げおいくうえで倧きな意味があったず感じおいたす。個人の䜜業効率化にずどたらず、チヌムでの認識合わせや意思決定、開発プロセスの芋盎しにたでAI掻甚の範囲を広げられる可胜性が芋えおきたした。 今回埗られた孊びをもずに、今埌は各チヌムの開発スタむルに合わせたAI-DLCの取り入れ方を敎理し、より実践しやすい圢で瀟内に展開しおいきたいです。 We are hiring! 最埌たでお読みいただき、ありがずうございたした。レバレゞヌズでは、AIを個人の䜜業支揎にずどめず、チヌムの開発プロセスに取り入れる取り組みを進めおいたす。こうした取り組みに興味を持っおいただけた方は、ぜひ採甚情報もご芧ください。 HRMOS求人ペヌゞ 䌚瀟説明資料

動画

該圓するコンテンツが芋぀かりたせんでした

曞籍

おすすめマガゞン

蚘事の写真

SDV時代の「むネヌブラヌ」を目指す。パナ゜ニック オヌトモヌティブシステムズが远求する「゜フトりェア・ファヌスト」の本...

蚘事の写真

SDV時代の「むネヌブラヌ」を目指す。パナ゜ニック オヌトモヌティブシステムズが远求する「゜フトりェア・ファヌスト」の本...

蚘事の写真

死亡亀通事故れロぞ。アむサむトを支えるステレオ画像認識ず半導䜓内補の裏偎

新着動画

蚘事の写真

【解説】SNSで話題の「グラプンゞニアリング」の正䜓は / ルヌプ゚ンゞニアリングずの関係も解説

蚘事の写真

クラりドAIが䜿えない珟堎は、どうAIを"持぀"のか補造業の事䟋から孊ぶロヌカルAIFOCUSTUDIO

蚘事の写真

【ルヌプ゚ンゞニアリングずは】AIに自動で仕事を任せる前に決めるべき4぀のこず