Transcript
00:00:00Shopifyストアの構築はかつてないほど簡単になりました。なぜなら、
00:00:04コーディングに使うAIエージェントと組み合わせるだけで、すべてを任せられるからです。しかし、
00:00:09Claude Codeをストアに繋ぐだけでは不十分です。ありきたりな
00:00:14他のShopifyストアと変わらないものにならないよう、いくつか重要な要素を組み合わせる必要があります。
00:00:19この動画の終わりには、自分自身のShopifyパイプラインを
00:00:23エンドツーエンドで構築し、すぐに販売を開始できるワークフロー全体が分かります。
00:00:28ストア構築の準備には、いくつかの手順が必要です。まず最初に
00:00:32Shopifyパートナーアカウントが必要です。ブラウザからサインアップしてください。
00:00:37パートナーアカウントが重要なのは、プラットフォームを試すための
00:00:41開発ツールにアクセスできるからです。これはストアのサンドボックスであり、普段通りに
00:00:46アプリを構築できるだけでなく、偽の決済やテストユーザーといった開発ツールも使えるため、
00:00:51公開前にアプリをテストできます。その後、販売可能な状態になったら、
00:00:56決済統合を追加するだけで、簡単に開発用アカウントから
00:01:01実際の人々に商品を販売できるマーチャントアカウントへ移行できます。
00:01:05プロジェクトでアプリを作成したら、Shopify CLIをインストールします。
00:01:10CLIドキュメントからインストールコマンドをコピーしてターミナルで実行してください。
00:01:15実行すると、Reactアプリか拡張機能アプリかを選択するプロンプトが表示されます。私たちは
00:01:20普段開発しているReactアプリを選びました。その方がアプリのカスタマイズが容易だからです。
00:01:26次に使用する言語を選びます。型安全性とセキュリティの観点からJavaScriptより
00:01:31TypeScriptを選びました。セットアップを終えると、アプリを動かすための
00:01:37依存関係がインストールされます。インストールが終わればプロジェクトの準備は完了です。
00:01:41実行するとアプリの基本テンプレートが表示され、そこからさらに変更を加えていくことができます。
00:01:46CLIがインストールできたら、次はShopify AIツールキットなど、
00:01:51構築プロセスを補完するものをインストールします。最も重要なのがMCPです。この
00:01:56MCPのインストールコマンドはドキュメントにあります。私たちはClaude Codeを使っているので、
00:02:03Claude用のコマンドをコピーしてMCPをインストールしました。お好みのコーディングツールでも同じことができます。
00:02:08MCPをインストールするとツールがClaudeに公開されますが、MCPだけでは不十分です。
00:02:14含まれているツールは基本的にClaudeの構築を助けるものだからです。MCPにはクラウド上で動作する
00:02:19ストアに変更を反映させる手段はありません。ドキュメントやShopify APIに関する知識、
00:02:25検証機能などが含まれているだけです。そのため、このセットアップだけでは構築は不十分でした。
00:02:30だからこそ、Shopifyアプリとローカル環境を繋ぐ橋渡し役としてCLIが重要になるのです。
00:02:35MCP以外にも、プラグインをインストールする必要があります。プラグインには
00:02:40複数のエージェントとスキルが統合されているからです。インストールコマンドに従って
00:02:44インストールし、プラグインのリロードコマンドを実行すれば、すべて使えるようになります。
00:02:49主要なセットアップは完了です。構築を始める前に、プロジェクト自体の
00:02:53準備が必要です。まずはClaude.mdファイルを設定します。これはエージェントに
00:02:59従わせたいプラクティスをガイドするためのファイルです。追加したClaude.mdには、
00:03:05私たちが常に推奨しているベストプラクティスをすべて含めています。詳細はチャンネルの
00:03:10Claude.mdに関する動画で解説しているのでチェックしてください。他にも必要なものが
00:03:15いくつかあります。デフォルトでは、Claudeは画像のプレースホルダーとしてSVGを生成します。
00:03:21しかし、それではストアの見た目として不十分なので、そのギャップを埋めるスキルを作成しました。
00:03:26Gemini画像生成スキルを作成しました。これをインストールしたエージェントが
00:03:32Gemini CLIを呼び出し、ウェブサイト用の画像を生成するよう指示できます。
00:03:38このスキルにはGemini CLIの呼び出し方と生成画像の保存先が含まれています。Gemini CLIには
00:03:44画像生成が統合されているため、別途APIキーは不要で、認証情報を使って直接使えます。
00:03:50画像生成以外にも、もう一つ便利なスキルを作りました。プロトタイプ
00:03:55スキルは、エージェントにデザイン変更を依頼すると、まずプレビュー可能な
00:04:01HTMLファイルを生成し、確認後にアプリのデザインに適用するというものです。
00:04:05skill.mdファイルには、このワークフローの詳細が2つのフェーズに分けて記載されています。これらのスキルを
00:04:11.claudフォルダ内のsettings.jsonで設定・接続します。
00:04:17これらのフックはClaudeのガードレールとして機能します。例えば、プリツール使用スクリプトを使えば、
00:04:22Claudeが承認なしに直接アプリに変更を反映させるのを防ぐことができます。フックは
00:04:28いくつでも構成可能です。このセットアップで、いよいよアプリの構築準備が整いました。
00:04:33本題に入る前に、スポンサーのWillow Voiceをご紹介します。もし、
00:04:37メール、Slack、ドキュメント、プロンプトの入力に一日の大半を費やしているなら、
00:04:42それは効率的ではありません。Willow Voiceなら、コンピュータ上のどこでも
00:04:47話すだけで即座に入力できます。既存の音声入力のように誤変換ばかりではありません。
00:04:52Willowは精度が3倍で、段落構造なども適切にフォーマットしてくれます。
00:04:57最大の特徴は、用途に応じて適応することです。メールはフォーマル、Slackはカジュアル、
00:05:02コードはテクニカルな表現になります。使い込むほどあなたの書き方に慣れ、ロボットっぽくない文章になります。
00:05:0710万人以上のプロが愛用しており、SOC2準拠・HIPAA対応で、データ保持ゼロのため安心です。
00:05:13ここ一週間使っていますが、もうタイピングには戻れません。
00:05:18概要欄のリンクからWillow Voiceを無料でダウンロードしてください。さて、準備が整ったので、
00:05:23Claudeに構築したい内容を指示します。 landingページの
00:05:27スタイルを含め、要望を詳しく記述します。スキルを設定済みなので、
00:05:31まずプロトタイプスキルが読み込まれます。アプリに直接変更を加えるのではなく、
00:05:36HTMLコードでデザインを確定させ、こちらの承認を待ってくれるのです。
00:05:41デザインを新しいタブで開いてプレビューもできました。最初のバージョンは
00:05:46綺麗で視覚的にも機能的でしたが、本来画像が入るべき場所にプレースホルダーがありました。
00:05:51画像生成スキルをインストール済みなので、それを直接ロードして最初から画像生成を
00:05:55使うべきでした。そこで、画像生成スキルを使ってプレースホルダー用の画像を
00:06:00生成するよう再指示しました。指示後、
00:06:05Bashツールを通じて複数のGemini CLIをYOLOモードで起動し、パーミッションの確認で
00:06:12ブロックされないようにしました。Claudeが複数のターミナルを起動し、すべてで
00:06:17並行して画像生成が始まりました。画像生成には時間がかかるので、完了まで待ちます。
00:06:22画像が準備できたらウェブサイトを確認しましょう。より洗練されたものになっています。
00:06:27画像生成プロンプトもClaudeが制御しているので、UIスタイルに非常にマッチしています。
00:06:33ビジュアルを追加してウェブサイトは完成です。この時点で
00:06:38デザインを繰り返し調整できます。変更点はないので、Claudeにアプリの実装を進めるよう依頼します。
00:06:43ライブストアと同期するかどうかなど、実装に関する質問がいくつかあります。
00:06:48今回は同期させるオプションを選択しました。質問に答えると、
00:06:53HTMLデザインをアプリ自体に変換し始めました。直接メインアプリにではなく、
00:06:58作成しておいた開発用アプリに対してです。デザインを忠実に再現しており、
00:07:03プレビューでデザインが再現されているか確認できます。実際に
00:07:08アプリに実装する前にHTMLプレビューを使ったのは正解でした。実装プロセスは時間がかかりますし、
00:07:13その都度実装していたら、時間とトークンを大量に浪費していたはずです。HTML
00:07:18プロトタイピングの方がずっと高速で調整も簡単です。コンテンツが気に入ったら、
00:07:23ハッシュタグやボタンで応援をお願いします。コンテンツ制作の励みになります。
00:07:28ここまでで、アプリは実際のストアURLと同期されました。今構築したデザインは
00:07:34ローカルサーバでプレビューでき、テーマプレビュー内にもあります。
00:07:39開発用アプリにテーマを出荷したのでライブプレビューが可能ですが、これはまだ最終版ではなく、
00:07:44ドラフトです。そこで「ライブと同期」を指示すると、Shopify CLIとMCPツールを
00:07:50使ってShopifyストアのメインURLへデザインを同期してくれます。
00:07:55これ以降、Claudeがデザインをストア上でライブ更新してくれます。同様に、
00:08:00他の全てのページ更新も依頼できます。同じプロセスで、まずセクションのプロトタイプを作り、
00:08:05実際のアプリで更新し、公開されているストアと同期します。ただし、
00:08:10ストアを完成させるためにまだやるべきことがあります。現時点では
00:08:14商品を追加することはできません。それにはShopify Admin APIが必要だからです。
00:08:20これなしでは、Aboutページや商品管理機能など、ストアの主要な部分に
00:08:25アクセスできないからです。ここまでは、
00:08:30テーマに変更を加え、ストアに適用して見た目を整えていただけでした。Admin APIを接続するには、
00:08:35Shopify CLIを使ってストアと認証する必要があります。認証コマンドとURLを入力し、
00:08:41ブラウザで認証します。そうすれば
00:08:46ストア関連のページを作成できるようになり、Shopify MCPとCLIツールが
00:08:52連携してページ内の他のセクションも更新してくれます。これで、Claudeに
00:08:56商品を追加するよう指示できます。ただし商品追加には、Shopifyストアの
00:09:01Admin API経由でツールにアクセスするためのパーミッション設定が必要です。以前の
00:09:06権限では不十分です。コンテンツ編集の権限だけでしたが、商品を
00:09:11追加するには、「商品の作成」や「公開の読み書き」といった追加権限が必要です。
00:09:16そのため、追加のパーミッションを指定して再度認証コマンドを実行する必要があります。
00:09:20それができたら、Claudeに商品追加を依頼します。完了後、ストアを
00:09:25見ると商品が一覧表示され、詳細情報やカート機能が使えるようになります。
00:09:30管理パネルでも商品を確認できます。しかし、まだ訪問者は
00:09:35購入できません。実際に販売するには決済
00:09:40情報を追加する必要があります。また、料金プランを選択しないと、
00:09:45訪問者はストア閲覧にパスワード入力が必要となり、現実的ではありません。プランを
00:09:51選択すれば販売開始です。今回のセットアップ
00:09:55ガイドや作成したスキルはすべてAI Labs Proで公開されており、これまでの
00:10:02動画の素材もダウンロードして自分のプロジェクトに使えます。私たちの活動に
00:10:07価値を感じて応援したい方は、それが一番の近道です。リンクは概要欄にあります。
00:10:11動画は以上です。チャンネルを応援して
00:10:16制作をサポートしていただける場合は、下の「Super Thanks」ボタンをご利用ください。いつも
00:10:20ご視聴ありがとうございます。また次回お会いしましょう。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video