Shopify Edition Summer ’24「Hydrogen ストアをノーコードで構築できる Utopia を試してみた」

Editions で発表があった Utopia で Hydrogen ストアをノーコードで構築できるとのことで試してみました。

そもそも Utopia とは、以下の機能を提供するサービスです。

  • オープンソースで開発され、無料で利用可能
  • React で書かれたコードをリアルタイムにプレビュー
  • Figma のように他のメンバーとのリアルタイムコラボレーション

 

早速試してみます。

https://utopia.app/ にアクセスし、右上の “Play with Utopia” からサインアップが出来ます。

 

 

サインアップが完了するとテンプレートの一覧が表示されます。

 

 

テンプレート一覧から “Hydrogen Project” を選択すると、Hydrogen で作成されたストアのページが作成されます。

 

 

これでコードを直接変更することなく、ストアのページが変更することが可能となりました!

試しに “Add Cart” を “カートに追加” に変更。

 

 

しかし、このままだと変更が Utopia 内で保持される状態なので、自分の GitHub アカウントに保存出来るよう設定してみます。

 

Utopia が提供しているテンプレートのリポジトリをフォークします。

フォーク後 Utopia 左カラム上部の “github” をクリック、repository にフォークしたリポジトリ名を入力し、push to branch を実行すると、変更が GitHub に保存されました!

 

 

 

GitHub と連携してリポジトリに同期するのは git の知識が必要ですが、Utopia を始めるのもストアページの変更も簡単に出来ました。


普段エディターを使わないメンバーが簡単に変更ができるようになるのは良いですね!Utopia 社内で試してみようと思います。