こんにちは!Tsun Inc. でCTOをしている小笠原です。
最近Shopifyのアプリやテーマ開発はよくしています。
Shopify DevのリファレンスやShopifyのGitHubリポジトリを見て思うのは、情報量が多すぎる!ですよね。
(Shopify公式のGitHubリポジトリだけでも840以上あります)
この記事では毎週リリースされた開発ツールの中から厳選して、これは使える!やこの機能は今までなかった!といったものをご紹介しています♪
ぜひあなたの開発にお役立てください!
最新情報をチェックしたい方はぜひInstagramのアカウントをフォローして「Shopify Dev Weekly」をみてください!
→ https://www.instagram.com/tsun.ec/?hl=ja
2022年7月号 vol.1 - いまからキャッチアップ!Shopify Editionsで発表された開発者向け機能を一挙ご紹介!
Shopify Functions
- バックエンドロジックをカスタマイズ可能
- まだ開発中の機能、全プランで利用可能
- 最初はチェックアウト機能のカスタマイズが開放され、以降その他の部分にカスタマイズ可能になる予定
Checkout Extensibility
- チェックアウトの拡張アプリが開発可能
- 9月末以降から利用可能になる予定
- チェックアウトUIやShop Payとのシームレスな連携が提供される
予約販売と後払い決済
- Selling Plans APIに予約販売と後払い決済が追加
- 予約注文や「購入前のお試し」など新しい販売プランにも対応できるように
ShopifyQL
- ストアデータを分析するためのShopifyQL APIが登場
- 従来のGraphQL Admin APIからShopifyQLを使って売上などを詳細に分析できる
Embedded Appの改良
- 自分のアプリのメニューをShopifyのサブメニューとして挿入できる
- App Bridgeモバイル機能を使用するとモバイルデバイスでの読み込み速度が倍増
データ保護
- APIからデータ取得する際にデフォルトで個人情報を伏せ字に
- アプリ内の個人情報の取り扱いがより安全になる
Hydrogen + Oxygen
- ShopifyがShopifyのために開発したReactベースのフレームワーク
- 高速かつヘッドレスなストアフロント開発
- Oxygenは高速なホスティングサービス
Pixels
- 行動データを収集するためのピクセル発行
- まだベータ版。Checkout Extensibilityのを有効にすると利用可能
Liquidのリファレンス更新
- Liquidのリファレンスが大幅に更新
- ドキュメント内でプロトタイピング可能
- https://shopify.dev/api/liquid
App-Owned Metafields
- 当該アプリだけがアクセス可能なデータの保存領域を作成可能に
2022年6月30日 - いま知っておくべきShopify Editionsで発表された注目機能をまとめてご紹介!
今週のトピックは
「いま知っておくべきShopify Editionsで発表された注目機能をまとめてご紹介!」
です。
Hydrogen + Oxygen
- Shopifyによる、ShopifyのためのReactベースのフレームワーク
- ストアの表示速度を高速化
Dovetale by Shopify
- オールインワンのクリエイター管理ツール
- インフルエンサーマーケティングをしたいストア向け
- 日本語のサポート等はまだ
Shopify Markets
- 海外販売 (越境EC) のための機能
- 通貨の換算、言語対応、ドメイン最適化、関税の徴収など利用可能
Shop Payの機能強化
「今すぐ購入、あとで支払う」(BNPL)と不正注文防止機能が追加!
※Shop Payとは
Shopifyストアの決済方法として2017年に導入され、その後4,000万人以上のユーザーに利用されている決済方式
カスタマーエンゲージメントツール
- Shopifyメール: ブランドを反映したメールの作成、メールの自動化
- Shopify Inbox: チャット機能
Metafields
- 顧客や注文データなどにメタフィールドを追加できるように
- メタフィールドのコンテンツをPOSの商品説明に表示することも可能に
Shopify Adminの機能強化
- アプリの操作メニューが一新
- 50件以上のレコードを一度に変更可能に
- スタッフやパートナーの権限管理がより柔軟に
Shopify Audiences
- Shopifyの分析力とマーチャントネットワークを活用した将来の優良顧客の発掘
- 日本は未対応
- Shopify Plus限定
Linkpop
- SNSやストアのリンクを1つにまとめて紹介できる
- https://linkpop.com/tsun をチェック!
Twitter Shopping
- Twitterのプロフィール上で商品を直接販売が可能!
- 日本は未対応
2022年6月23日 - Shopify Hydrogen遂に正式リリース!Oxygenの詳細も明らかに
今週のトピックは
「Shopify Hydrogen遂に正式リリース!Oxygenの詳細も明らかに」
です。
Hydrogenとは?
ShopifyがShopifyのために開発したReactベースのフレームワークで、高速かつヘッドレスなストアフロントを構築できます。
Shopify Unite 2021で発表された時点では開発者プレビューでしたが、2022年6月21日に遂に正式リリースとなりました!
正式リリースQ&A
Q. 正式リリースということは本番用に使っても大丈夫?
A. 大丈夫だと思います。アメリカの靴ショップAllbirdsではすでに一部をHydrogenに対応しているようです。
Q. すべてのストアで使えるの?
A. 使えます!(ただし実装は必要)
Oxygenとは?
ShopifyがHydrogenのために開発したホスティングサービスで、Hydrogenで構築したストアフロントをワンクリックでデプロイできます。
Hydrogenの説明の中でたびたび存在が匂わされてましたが、2022年6月21日に遂にリリースされました!
Oxygen Q&A
Q. どういうケースで利用すべき?
A. Hydrogenを使ったサイトは基本的にOxygenを利用すべきかなと思います。
Q. すべてのストアで使えるの?
A. 現在はShopify Plusのみ利用可能ですが、今後はすべてのプランで利用可能になるようです。
今週のまとめ
今週はHydrogenの正式リリースに関する情報と、遂に明らかになったOxygenについてご紹介しました!
HydrogenとOxygenについてもっと知りたいよ!という方は次回以降もっと詳しく解説をしていきますので、ぜひフォローお願いします!
https://www.instagram.com/tsun.ec/?hl=ja
2022年6月16日 - Shopifyが爆速に!公式フレームワークのHydrogenとは?
今週のトピックは
「Shopifyが爆速に!公式フレームワークのHydrogenとは?」
です。
Hydrogenとは?
Shopifyが開発を進めている次世代のストアフロント用フレームワーク
ポイント
- React製のフレームワーク (v18の機能をガシガシ使ってる)
- とにかく爆速 🚀 (ストアも開発セットアップも)
- 正式リリースはまだ (7月?)
Hydrogenのメリット
- コマンド1つでモダンな開発構成をローカルに構築できる
- ページを高速で表示するための仕組みが簡単に使える (Streaming SSR、キャッシュコントロールなど)
- ストア構築に必要なコンポーネントなどが組み込まれている
Hydrogenのデメリット
- モダンなフロントエンド開発の経験があるエンジニアでなければストア構築が難しい
- 枯れてない技術をガンガン使っているため知識のアップデートが常に必要になる
どんなストアにおすすめ?
すでにカスタムストアフロントに対応していて、ストアの表示速度に不満がある場合は、Hydrogenに置き換える価値は十分にあります。
また、これからカスタムストアフロントで構築する際にはHydrogenは第一の選択肢として検討すべきでしょう。
(それだけの価値がすでにあります)
Hydrogen触ってみたい!
と、思った方はぜひ https://hydrogen.new/ にアクセスしてみてください!
ローカルに開発環境を構築しなくてもブラウザでHydrogenによる開発を体験することができます。
今週のまとめ
今週はHydrogenの概要をざっくりご紹介しました。
次回以降はHydrogenに関連する押さえておくべきキーワードやなぜ爆速でページを表示できるのかといった解説をしていきたいと思います。
気になった方はぜひフォローお願いします!
https://www.instagram.com/tsun.ec/?hl=ja
2022年6月9日 - Shopify公式テーマdawnのv6.0.0がリリース!
今週のトピックは
- Shopify公式テーマdawnのv6.0.0がリリース!
- その他のアップデート情報
の2つです。
v5.0.0が4月リリースされたdawnですが、早くもv6.0.0がリリースです!
主な変更点は下記です。
- カートドロワー機能が追加
- リッチセクションテキストの カスタマイズオプションが追加
- ヘッダーセクションに上下のパディング設定オプションが追加
カートドロワー機能とは?
カートに商品を入れたときに、
- ・カートの引き出しを表示する(ページの右側からカート一覧が出てくる)
- ・ポップアップで通知する(ヘッダーのカートボタン下部にポップアップを表示)
- ・カートのページに直接リンクする
を選択できる新しいカート動作の設定です。
カートドロワー機能の設定方法
テーマエディタから テーマ設定 > カートを選択 をします。
カートタイプの選択欄が追加されているので、 希望の動作を選択するだけでOKです!
その他のアップデート
polaris
v9.12.0、v9.12.1、v9.12.2
すべての CSS アニメーションが動作しなくなっているので、アップデート非推奨
shopify-cli
v2.18.1
マイナーアップデート
hydrogen
v0.23.0
マイナーアップデートですがBreaking changeもあるのでアップデートには注意
2022年6月2日 - Shopify公式のLiquidフォーマッターが今週リリース!
今週のトピックは
- Shopify公式のLiquidフォーマッターが今週リリース!
- その他のアップデート情報
の2つです。
VS Codeユーザー歓喜!Shopify LiquidプラグインでLiquidがフォーマットできるよ!
ポイント
- Shopify公式のプラグインにLiquidをフォーマットする機能が追加
- ただし、まだDeveloper Previewなので不具合などはあるかも
- 別のLiquidプラグインよりもいい感じ!
フォーマット機能の使い方
- Shopify Liquid プラグインを更新(現時点の最新バージョンはv1.4.3)
- settings.jsonに下記を追加
たったこれだけです!簡単ですよね 😄
あとはお好みでformatOnSaveなどを付けてフォーマットを実行するだけです!
フォーマットを使ってみた感想
今までは別のLiquidプラグインを使ってフォーマットをしていました。
そちらではliquidタグを使った複数行のタグのフォーマットに不具合がありましたが、 今回のShopify Liquid プラグインでは綺麗にフォーマットができました!
まだ正式リリースではありませんが、使ってみる価値アリです!
その他のアップデート
polaris
v9.9.0、v9.10.0、v9.11.0
マイナーチェンジが中心
shopify-cli
v2.18.0
M1 MacでHerokuデプロイが失敗する不具合の修正など
stylelint-polaris
v0.0.0 (プレリリース)