Shopify のカスタムピクセル機能を使って、購入完了（checkout_completed）時に注文IDと購入額（売上）を Google Tag Manager（GTM）経由で Google アナリティクス 4（GA4）に送信する方法を解説します。

&nbsp;ShopifyからGA4へのデータの流れ

Shopify（カスタムピクセル） →
window.dataLayer → GTM → GA4

管理画面 &gt; 設定 &gt; カスタマーイベント &gt; カスタムピクセル から新規ピクセルを追加します。

① 名前を入力（例: GA4ピクセル） 
② コードエディタに下記サンプルコードを貼り付け ③ 保存して公開

カスタムピクセル サンプルコード

※GTM-XXXXXXXXはご自身のコンテナIDを記載ください。 ※以降記載のある「test_event」は名称例となりますので、任意の名称でご利用ください。

以下 3 つの Data Layer 変数を作成します。

① 「order_id」&nbsp; • 名前: DLV -&nbsp;&nbsp;order_id • 変数タイプ: Data Layer 変数 • Data Layer 変数名: order_id • Data Layer バージョン: 2 • 既定値: 空（任意）

② 「value」 • 名前: DLV -&nbsp;&nbsp;value • 変数タイプ: Data Layer 変数 • Data Layer 変数名: value • Data Layer バージョン: 2 • 既定値: 0

③ 「currency」(任意) • 名前: DLV - currency • 変数タイプ: Data Layer 変数
 • Data Layer 変数名: currency

■ 「test_event」カスタムイベントトリガー&nbsp; • 名前: CE - test_event • トリガータイプ: カスタムイベント
 • イベント名: test_event • このトリガーの発生場所: 　- すべてのカスタムイベントに対して (既定) 　　または条件付きで「order_id が定義されている場合」などフィルタを追加しても可

■ 「test_event」イベントタグ
 • タグタイプ: GA4 イベント • 設定タグ: 既存の GA4 設定タグを選択 • イベント名: test_event • パラメータ設定: 　– order_id = {{DLV - order_id}} 　– totalPrice = {{DLV - value}} 　– currency = {{DLV - currency}} (固定で "JPY" としても可) • 送信時にパラメータを上書き: オフ (既定) • トリガー: CE - test_event

GA4 管理画面 &gt; データの表示 &gt; イベントで「test_event」をイベントとして登録します。
 また カスタムピクセルを利用すると DebugView などを用いたイベントの確認が行えませんので、実際に公開しGA4のリアルタイムで受信されているか確認してください。

カスタムピクセルとGTMを組み合わせることで、Shopifyの制限を回避しながら購入データなどの情報をGA4に安全かつ柔軟に連携できます。 導入に際しては、まずテスト環境で十分に検証したうえで本番環境へ反映することをおすすめします。 ご紹介したshopify標準の値以外でも値を作成することも可能ですので、ご自身でカスタムピクセルの対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ<a href="/contact/">お問い合せ</a>ください。

Shopify カスタムピクセルで注文IDと購入額を GA4 に送信する手順

こんにちは。 Webディレクターの田辺です。

Shopifyには下記のように特殊な操作が可能なURLが存在します。

これらのURLは、ランディングページやメルマガで有用であったり、購入導線におけるお客様の手間を省く役割を果たすことがあります。

今回はそういったURLをご紹介します。

※なお、Shopifyの公式ドキュメントに記載がないURLもあります。そういったURLについては、ご自身で動作を検証の上、自己責任でご利用ください。

まずは、Shopifyの公式なドキュメントにも記載があるので、ご存知の方も多いかもしれませんが、活用できる機会が多そうなカートパーマリンクをご紹介します。

参考: <a href="https://help.shopify.com/ja/manual/products/details/cart-permalink">https://help.shopify.com/ja/manual/products/details/cart-permalink</a>

任意の商品がカートに入った状態でチェックアウトページに遷移させる

ユーザーが、 <code class="inline-code">/cart/{バリエーションID}:{数量}</code> というURLにユーザーにアクセスすると、指定の商品が指定の数量だけカートに入った状態で、チェックアウト画面に遷移します。

複数種類の商品がカートに入った状態でチェックアウトページに遷移させる

上記の応用です。 {バリエーションID}:{数量},{バリエーションID}:{数量}のようにカンマ区切りすることで、複数種類の商品がカートに入った状態で、チェックアウト画面に遷移させることができます。

さらにクーポンコードを適用する

<code class="inline-code">discount={クーポンコード}</code> というクエリパラメータを付与することで、クーポンコードが適用された状態で、チェックアウト画面に遷移させることもできます。

ディスカウントを強制的に適用したり解除したりする

この方法にフォーカスした説明がなされたドキュメントはないのですが、下記のドキュメントに記載があるURLなので、Shopifyに正式にサポートされているものと考えています。

参考:&nbsp;<a href="https://help.shopify.com/ja/manual/discounts/discounts-for-abandoned-checkout-recovery-emails">https://help.shopify.com/ja/manual/discounts/discounts-for-abandoned-checkout-recovery-emails</a>

<code class="inline-code">/discount/{クーポンコード}</code> というURLにアクセスさせることで、指定のディスカウント(クーポンコード)をユーザーに適用することが可能です。

※カートパーマリンクと異なり、商品がカートに入っていなくても予めクーポンコードを適用することができます。

これはShopifyの公式なドキュメントに記載された用法ではありませんが、上述の方法にて「存在しないクーポンコード」を指定することで、適用されているクーポンコードを解除することができます。

ログイン後に指定のページに遷移させる

この方法が記載されいているShopifyの正式なドキュメントは見つけられなかったのですが、私が実際に検証した限りはうまく動きました。

ログインページのURLに、<code class="inline-code">/account/login?return_url={ルート絶対パス}</code> というように <code class="inline-code">return_url={ルート絶対パス} </code>というクエリを指定することで、指定したパスにログイン成功後に遷移します。

例えば、カート画面にアクセスさせたい場合は下記のようにします。

古くからShopify開発に携わっている方々には、既知の情報だったかもしれませんが、もし、ご存知ない方がいらっしゃたら、こららのShopifyのURL操作を活用することで、今まで諦めていたような施策も可能になるかもしれませんね。

ShopifyのURL豆知識: カート操作、割引適用、ログイン後遷移ページ指定

こんにちは、 ディレクターの小坂です。

先日Shopifyのヘルプセンターをみていたら、Shopifyから公式発表はなかったと記憶していますが、ひっそりと重要な情報が記載されていました。

Shopify Plus以外のプランのアップグレード期限が延長

以前Shopifyから発表されていた「サンキューページ」と「注文状況ページ」のアップグレード期限が、Shopify Plus以外のサブスクリプションプランでは2026年8月26日まで延長されているようです。

Shopifyヘルプセンター <a href="https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations/checkout-upgrade-guide">https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations/checkout-upgrade-guide</a>

メモ 2026年8月26日までに、Shopify Plus以外のサブスクリプションプランをご利用のストアは、現在のサンキューページと注文状況ページを新バージョンにアップグレードする必要があります。 このガイドは、Shopify Plus以外のサブスクリプションプランに加入しているストアを持つマーチャント用です。Shopify Plusプランに加入しているストアは、Shopify Plusカスタマイズガイドに従う必要があります。

Shopify Plusのアップグレード期限は変更なし

一方で、Shopify Plusのアップグレード期限は2025年8月28日のままで、こちらに変更はありませんでした。

Shopifyヘルプセンター <a href="https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations/plus-upgrade-guide">https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations/plus-upgrade-guide</a>

アップグレードと置き換えの影響

Shopifyは、より安全で、安全にアップグレードでき、アプリブロックとピクセルでカスタマイズできるチェックアウトとアカウントの新しい基盤に移行しています。現在、サンキューページや注文状況ページに追加スクリプトやアプリでカスタマイズをしている場合は、カスタマイズを次の方法でアップグレードする必要があります。 ・アプリブロックとウェブピクセルを使用して、サンキューページと注文状況ページに視覚的および機能的なカスタマイズを再作成します。 ・アプリピクセルを使用して、お客様イベントの追跡を継続します。 アップグレードすると、既存のサンキューページと注文状況ページ、およびそれらのページに現在設定されているカスタマイズが新しいバージョンのページに置き換えられます。

ヘルプセンターには上記の記載があり、より安全で柔軟なカスタマイズが可能な新しいチェックアウト基盤へ移行を進められています。これに伴い、以下の点に注意が必要です。

Shopify Plus以外のプランを利用している場合、アップグレードまでの猶予が延長されました。ただし、いずれにしても期限までにアップグレード対応が必要になります。

アップグレードやカスタムピクセルの設定でお困りの際は、お気軽にお問い合わせください。

<a href="https://techlab.q-co.jp/contact/">お問い合わせはこちら</a>

Shopifyのサンキューページ・注文状況ページのアップグレード期限延長とカスタムピクセル対応について

こんにちは。 ディレクターの田辺です。

今回は、<a href="https://techlab.q-co.jp/articles/149/">こちらの記事</a>で予告した、

Shopify FlowのRun codeを利用して、1人の顧客が、特定の期間内に、特定の商品を、何個購入できるかを規制する

を実装してみたので、そのShopify Flowをご紹介します。

なお、本記事で紹介するShopify Flowは十分に検証しておりません。 実際にご利用になったり、参考にされたりする場合は、十分に動作検証することをおすすめします。

1人の顧客が、特定の期間内に、特定の商品を、何個購入できるか、を指定するため、商品にメタフィールドを設定します。今回は下記のように設定しました。

meta objectの利用

期間 (period) に、過去何日間分のデータを集計するかの情報を、 個数 (quantity) に、「期間」中に何個購入できるかの情報を、 登録します。

例えば、過去30日間に3個まで購入可能な商品であれば、 期間 (period) が、30 個数 (quantity) が、3 となります。

メタフィールドとメタオブジェクトの準備ができたら、適当な商品を見繕って、購入制限情報を設定します。

早速ですが、下図のようなShopify Flowになります。

Run codeにて、meta objectを取り出すには、下記のようにします。

referenceを利用するのが肝です。 なお、meta objectの「リスト」をメタフィールドに設定している場合は、おそらく、referenceではなくreferencesを利用します。(検証はしておりません。)

Run codeの返り値のサンプルと説明は下記です。

今回は、 <code class="inline-code">runCode.isHold</code> しか、Shopify Flowでの制御に利用していませんが、ストアオーナーにアラート通知を送るようにした場合に、 <code class="inline-code">runCode.unavailableProducts</code>&nbsp;を利用することで、どの商品が、どれくらいの個数オーバーして発送保留になったかを記載することもできます。

<a href="https://techlab.q-co.jp/articles/149/">こちらの記事</a>で予告してから、本記事を執筆するまで1年もかかってしまいました。 時が経つのは早いものです。

などの制限があります。 1年前の時点では、2024のQ3には外部APIコールができるようになるロードマップだったと思うのですが、今も実装されていないということはロードマップから削除されたのかもしれません。

なお、Run codeを利用する上で参考になる「利用例(テンプレート)」が公開されているので、そちらも参考にすると、よりRun codeを有効活用できるかと思います。

利用例(テンプレート): <a href="https://help.shopify.com/ja/manual/shopify-flow/reference/actions/run-code#templates">https://help.shopify.com/ja/manual/shopify-flow/reference/actions/run-code#templates</a>

Shopify FlowのRun codeを使った「購入制限」の実装

Googleが提供しているMaps JavaScript APIのReact Wrapperの使い方をご紹介します。

@googlemaps/react-wrapperで自作マーカーと自作ポリラインを描画する

@googlemaps/react-wrapperでGoogle Map上に五芒星を描画する

こんにちは、エンジニアチームのこむたです。

『[シリーズ連載] @googlemaps/react-wrapperで自作マーカーと自作ポリラインを描画する』の第3弾の記事になります。 前回の記事はこちら→<a href="https://techlab.q-co.jp/articles/88/"></a><a href="https://techlab.q-co.jp/articles/150/">https://techlab.q-co.jp/articles/150/</a>

<a href="https://techlab.q-co.jp/articles/150/"></a>前回は、自作マーカーをGoogle Map上に描画させるところまで進めました。 今回の記事では、Google Mapをクリックした2点の間に線を描画する方法を紹介します。

完成形はこちらになります。 クリックした場所に自作マーカーを描画して、2点の間に黒いラインをGoogle Map上に描画しています。このラインも自作マーカーと同様に、Google Mapのドラッグやズームに連動して動きます。

これを実現するには、ラインを描画する仕組みとクリックしたGoogle Map上の位置を取得する仕組みの2つが必要です。 今回はこれらの実装方法について紹介します。

ラインを描画する関数を宣言する

ラインを描画する仕組みを作成していきます。

Google Map上にポリラインを描くには<a href="https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=ja#Polyline">google.maps.Polylineクラス</a>を使用します。 Polyline（ポリライン）は多角線を意味していて、このクラスを使えば複数のラインを連結させて折線や図形も描画することができます。 今回は1本しか描画させませんが、本シリーズの最終目標である五芒星の描画もこのクラスを使用して行います。

まずはgoogle.maps.Polylineクラスを使用してポリラインを描画するコンポーネント<code class="inline-code">PolyLine</code>を宣言します。 引数には下記の2つを指定します。

今回はReactで作成しているので、ポリラインの状態をStateで管理します。 ポリラインの生成には<code class="inline-code">useEffect()</code>を使用します。マウント時にポリラインをStateに格納して、アンマウント時にはGoogle Mapからポリラインを削除する処理を書きます。

生成したポリラインを描画する処置を書きます。 <code class="inline-code">polyline.setOptions()</code>を呼び出し、描画するGoogle Mapや位置などを指定して、ポリラインの描画設定を行います。ラインの色や太さなどのオプションも設定できます。 <a href="https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=ja#PolylineOptions">PolylineOptionsインターフェース</a>

コンポーネントの戻り値はnullにします。 このコンポーネントはあくまでuseEffectでポリラインの状態を更新してGoogle Map内に描画するためのもので、コンポーネント本体で描画するものはないのでnullとしています。

これでラインを描画する準備は整いました。

今回作成するのはクリックした2点の位置の間にラインを描画するというものです。 そのため、必要な処理は以下の3つと考えられます。

この順番で<code class="inline-code">Map.tsx</code>に直接処理を書いていきます。

クリックでGoogle Mapの座標を取得する

<a href="https://developers.google.com/maps/documentation/javascript?hl=ja">Maps JavaScript API</a>には<a href="https://developers.google.com/maps/documentation/javascript/reference/event?hl=ja#event">Google Map用のeventクラス</a>が用意されているので、それを活用してクリックした位置の座標を取得します。

<code class="inline-code">Map.tsx</code>の<code class="inline-code">&lt;content&gt;</code>に<code class="inline-code">onClick()</code>を追加します。 引数に<code class="inline-code">event: google.maps.MapMouseEvent</code>を取り、処理に<code class="inline-code">console.log(e)</code>を記載しておきます。この時点ではまだGoogle Mapのイベントは取得できていませんのでご注意ください。

Google Map上のeventの取得は<code class="inline-code">map.addListener()</code>を使用します。 Google Map上で指定したイベント（今回の場合はclick）が発生したら、指定した関数を発火させることができます。ウェブページにおける<code class="inline-code">document.addEventListener</code>に相当するものです。 <code class="inline-code">map.addListener()</code>に<code class="inline-code">"click"</code>と<code class="inline-code">onClick()</code>を指定して、<code class="inline-code">useEffect()</code>で制御します。

これでクリックのイベントでGoogle Mapのeventを取得しながら<code class="inline-code">onClick()</code>を実行することができました。 試しにGoogle Mapをクリックしてみると、コンソールにGoogle Mapのeventオブジェクトが表示されていることがわかります。 eventオブジェクトの<code class="inline-code">latLng</code>から経度と緯度の座標を取得することができます。 ※警告ログがコンソールに表示されていますが、動作は問題ないためひとまずスルーをして進めます。

クリックした位置に自作マーカーを描画する

座標の取得に成功したので、次はその座標の位置に自作マーカーを描画してみます。

<code class="inline-code">Map.tsx</code>の<code class="inline-code">&lt;Map&gt;</code>に移ります。 今回は2点のクリックした位置を保存したいので、2つのStateを用意してそこに取得した位置を格納するようにします。

Stateを更新する関数<code class="inline-code">setPlaces()</code>を宣言します。 1回目にクリックした時は<code class="inline-code">centerPlace</code>に、2回目は<code class="inline-code">firstPlace</code>にクリックした位置を保存します。また、2点のクリックした位置を更新できるように、3回目にクリックしたらそれぞれのStateを初期化するようにします。

Google Mapのクリックした座標を取得する関数<code class="inline-code">onClickMapCallback()</code>を宣言します。 <code class="inline-code">&lt;content&gt;</code>の<code class="inline-code">onClick()</code>で取得した座標を<code class="inline-code">setPlaces()</code>に渡してStateを更新します。 <code class="inline-code">onClick()</code>内で<code class="inline-code">onClickMapCallback()</code>を実行する必要があるため、propsとして渡しておきます。

クリックした位置とタイミングで自作マーカーを描画したいので、二項演算子で自作マーカーの描画を制御します。

ここで<code class="inline-code">&lt;Marker&gt;</code>の<code class="inline-code">place</code>に型エラーが発生するかと思います。 前回は自作マーカーの位置を直接数値で指定していたので、<code class="inline-code">place</code>と、propsとして渡していた数値のオブジェクト<code class="inline-code">DEFAULT.CENTER</code>の型を<code class="inline-code">google.maps.LatLngLiteral</code>としていましたが、今回はGoogle Mapのイベントから座標を取得するので型定義を修正する必要があります。 <code class="inline-code">place</code>の型を<code class="inline-code">google.maps.places.PlaceResult</code>に修正します。 <code class="inline-code">place.geometry.location</code>にクリックした位置の座標が格納されていますが、<code class="inline-code">place.geometry</code>と<code class="inline-code">place.geometry.location</code>には<code class="inline-code">undefined</code>が許容されているので、描画する条件式に<code class="inline-code">place.geometry?.location</code>を加えます。これで、座標を取得できた時だけ自作マーカーが描画されます。 この状態で<code class="inline-code">&lt;OverlayView&gt;</code>の<code class="inline-code">position</code>に<code class="inline-code">place.geometry.location</code>を渡すことで型エラーを解消できます。

<code class="inline-code">&lt;content&gt;</code>に戻り、propsで<code class="inline-code">onClickMapCallback()</code>を受け取れるように追記します。 <code class="inline-code">onClick()</code>に<code class="inline-code">onClickMapCallback()</code>を入れて、Google Mapの座標を取得できる<code class="inline-code">event.latLng</code>を<code class="inline-code">onClickMapCallback()</code>の引数に渡します。<code class="inline-code">event.latLng</code>は<code class="inline-code">null</code>の可能性があるので、<code class="inline-code">event.latLng</code>が存在している時のみ<code class="inline-code">onClickMapCallback()</code>を実行するようにします。 useCallbackの依存関係にも<code class="inline-code">onClickMapCallback</code>を忘れずに追加します。

<code class="inline-code">useEffect()</code>の処理も修正します。 <code class="inline-code">onClickMapCallback()</code>の追加により、<code class="inline-code">onClick()</code>の処理の内容がクリック毎に変化するようになりました。 つまり、1回目のクリックでは<code class="inline-code">centerPlace</code>を更新する関数、2回目は<code class="inline-code">firstPlace</code>を更新する関数、3回目ではそれらをリセットする関数に変わります。 そのため、クリック毎に<code class="inline-code">map.addListener("click", onClick)</code>をリセットして入れ直す必要があります。クリックイベントのリセットは<code class="inline-code">google.maps.event.clearListeners(map, "click")</code>で実現できます。

戻り値の修正をします。 前回まではGoogle Mapに描画するオーバーレイは自作マーカー1つでしたが、今回から自作マーカー2つ、ポリライン1つと複数になりました。それぞれのオーバーレイを描画するために<code class="inline-code">Children.map</code>で<code class="inline-code">children</code>を展開します。 <a href="https://ja.react.dev/reference/react/Children">Children</a>を使うと、propsである<code class="inline-code">children</code>&nbsp;から受け取ったJSXを操作、変換することができます。

また、前回は<code class="inline-code">&lt;map&gt;</code>内でオーバーレイ（自作マーカー）の描画を制御していませんでしたが、今回は二項演算子で描画を制御することになったので、<code class="inline-code">&lt;content&gt;</code>側でも<code class="inline-code">children</code>を描画する条件を加えます。 <code class="inline-code">isValidElement()</code>を使用すると、値がReact要素であるかどうかを判定することができるので、これを活用します。 <a href="https://ja.react.dev/reference/react/isValidElement">isValidElement</a>

これでクリックした2点の位置にマーカーが表示されるようになりました。クリックを3回するとマーカーが消えるのも確認できます。

クリックした2点の間にラインを描画する

ここまで来れば、冒頭に作成した<code class="inline-code">&lt;PolyLine&gt;</code>に2点のクリックした位置をpathとして渡すだけです。 <code class="inline-code">&lt;Map&gt;</code>に戻り、クリックした2点の位置を<code class="inline-code">polylinePath</code>としてまとめておきます。後ほど、<code class="inline-code">polylinePath</code>が存在していたら<code class="inline-code">&lt;PolyLine&gt;</code>を描画するように制御したいため、条件式を記載しておきます。

最後に<code class="inline-code">&lt;PolyLine&gt;</code>に<code class="inline-code">polylinePath</code>をpropsとして渡して、二項演算子でレンダーを制御します。

これでクリックした2点の間にラインを描画することができました。

今回はGoogle Map上のクリックした2点の間にラインを描画させました。 次回はいよいよ、今まで作成した処理を使い五芒星を描画する処理を書いていきます。

@googlemaps/react-wrapperでGoogle Map上をクリックした2点の間にラインを描画する

『[シリーズ連載] @googlemaps/react-wrapperで自作マーカーと自作ポリラインを描画する』の第2弾の記事になります。 前回の記事はこちら→<a href="https://techlab.q-co.jp/articles/88/">https://techlab.q-co.jp/articles/88/</a> 前回は、Google Maps Platformが提供している、ReactでGoogle Mapを表示できる@googlemaps/react-wrapperの解説と開発準備について紹介をして、ReactでGoogle Mapを表示するところまで進めました。 今回の記事では、Google Map上に自作マーカーを描画させる方法を紹介します。

完成形はこちらになります。真ん中に赤いxマークを描画しています。 このマークはGoogle Mapをドラッグしたり、ズームして動かしてもマークも連動して動きます。

<code class="inline-code">&lt;div&gt;</code>にスタイルを当てて、自作マーカーを作成します。 今回はわかりやすく赤文字のxをマーカーにします。

google.maps.OverlayViewクラスを宣言する

<a href="https://developers.google.com/maps/documentation/javascript?hl=ja">Maps JavaScript API</a>では<a href="https://developers.google.com/maps/documentation/javascript/reference/overlay-view?hl=ja#OverlayView">google.maps.OverlayViewクラス</a>を使用して、ポイント、ライン、領域のオブジェクト、またはそれらのオブジェクトの集合を指定してGoogle Map上に描画することができます。これらのオブジェクトはオーバーレイと呼んでいます。

今回の場合は、自作マーカーがオーバーレイとなります。 オーバーレイはGoogle Mapの緯度と経度で表される座標に紐付けて描画することができます。座標に紐付けることでGoogle Mapをズームさせたり、ドラッグして動かすと連動してオーバーレイも動くようになります。

google.maps.OverlayViewクラスを使用する際は、<code class="inline-code">onAdd()</code>、<code class="inline-code">draw()</code>、<code class="inline-code">onRemove()</code> の 3 つのメソッドを実装する必要があります。 これらのメソッドは、google.maps.OverlayViewクラスの<code class="inline-code">setMap()</code>の実行をきっかけに自動で実行されます。<code class="inline-code">setMap()</code>は、自作オーバーレイを描画するGoogle Mapを指定するメソッドです。

オーバーレイを描画する処理の流れをまとめると、下記のようになります。

google.maps.OverlayViewクラスを継承した独自のクラスを作りながら、それぞれのメソッドについて解説していきます。

google.maps.OverlayViewクラスの継承

google.maps.OverlayViewクラスを継承したクラスを作成する関数<code class="inline-code">createOverlay()</code>を宣言します。 引数には下記の3つを指定します。

続いて、google.maps.OverlayViewクラスを継承したクラスを関数内で宣言します。 指定した引数をコンストラクタの初期値になるようにパラメータを設定します。コンストラクタ内で親クラスのgoogle.maps.OverlayViewクラスのメソッドを呼び出すために、キーワード<code class="inline-code">super()</code>も記載します。 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/super">super</a>

続いて、google.maps.OverlayViewクラスに必須の3つのメソッドを実装していきます。

<code class="inline-code">onAdd()</code>メソッドは、<code class="inline-code">setMap()</code>が呼び出された後に1回呼び出されます。オーバーレイのDOM 要素を初期化して、新しくオーバーレイを指定したペインの位置に作成・追加をします。 <code class="inline-code">getPanes()</code>でペインを指定して、<code class="inline-code">appendChild()</code>でオーバーレイをDOMに追加します。

<code class="inline-code">draw()</code>メソッドは、<code class="inline-code">onAdd()</code>メソッドで追加したオーバーレイを描画または更新します。このメソッドは<code class="inline-code">onAdd()</code>の後に呼び出され、Google Mapがズームまたは中心が変化すると呼び出されます。 <code class="inline-code">projection.fromLatLngToDivPixel()</code>でGoogle Map上の緯度と経度を取得して、それらの値を<code class="inline-code">container.style.transform</code>の<code class="inline-code">translate</code>に当てることで描画する位置を決定します。

<code class="inline-code">onRemove()</code>メソッドはオーバーレイをDOMから削除します。このメソッドは、Google Mapを無効にする<code class="inline-code">setMap(null)</code>が呼び出された後に1回呼び出されます。Google Mapの更新や非表示の際にオーバーレイも連動して画面から消すために必要です。 container.parentNodeで親ノードを宣言して、親ノードの存在が確認できていれば<code class="inline-code">removeChild()</code>でオーバーレイをDOMから削除します。

インスタンスを戻り値に指定する

google.maps.OverlayViewクラスに必須の3つのメソッドを実装できました。 最後に、インスタンスを戻り値に指定します。

次は、先程作成した関数<code class="inline-code">createOverlay()</code>を使用してインスタンス化したコンポーネントを作成します。

インスタンス化したコンポーネントを作成する

インスタンス化したコンポーネントを作成する<code class="inline-code">OverlayView()</code>を宣言します。 propsには下記4つを指定します。

続いて、<code class="inline-code">createOverlay()</code>に渡す<code class="inline-code">&lt;div&gt;</code>を作成します。この定数は再生成の必要がないので、依存関係なしでメモ化をしておきます。

<code class="inline-code">container</code>と引数に指定した<code class="inline-code">pane</code>と<code class="inline-code">position</code>を、<code class="inline-code">createOverlay()</code>に渡してオーバーレイを作成します。オーバーレイは一度作成したら削除されるまでは再生成の必要がないので、メモ化しておきます。

次に、<code class="inline-code">useEffect()</code>を使って<code class="inline-code">setMap()</code>を発火します。 マウント時には、<code class="inline-code">setMap(map)</code>を呼び出してオーバーレイを描画するGoogle Mapを指定します。<code class="inline-code">setMap(map)</code>が呼び出されると<code class="inline-code">onAdd()</code>が呼び出され、オーバーレイが作成されます。 アンマウント時には<code class="inline-code">setMap(null)</code>を呼び出してmapを削除します。同時に<code class="inline-code">onRemove()</code>が呼び出され、オーバーレイも削除されます。

オーバーレイをGoogle Mapの中にレンダーさせるために<a href="https://ja.react.dev/reference/react-dom/createPortal">createPortal(children, domNode, key?)</a>を使用します。 <code class="inline-code">createPortal()</code>を使うとDOM上の別の場所に子要素をレンダーすることができます。第2引数でレンダーする場所を指定できるので、Google Mapと同じ場所の<code class="inline-code">container</code>を指定します。 Google Mapと同じ場所にレンダーすることで、Google Map内でReactコンポーネントを独立させながら、座標などのGoogle Mapの情報と連動させることができます。

画面上のGoogle Mapに自作マーカーを描画させる

上記で宣言した<code class="inline-code">&lt;OverlayView&gt;</code>に自作マーカーを<code class="inline-code">children</code>として渡して、Google Map上に描画できるオーバーレイにします。 propsには、自作マーカーを描画する場所を示す<code class="inline-code">place: google.maps.LatLngLiteral</code>と描画するGoogle Mapを指定する<code class="inline-code">map?: google.maps.Map</code>を追加します。後ほど説明しますが、<code class="inline-code">map</code>は<code class="inline-code">cloneElement()</code>を使い間接的に渡すため<code class="inline-code">undefined</code>を許容しておきます。 自作マーカーはGoogle Mapを指定している時だけ描画するので、二項演算子<code class="inline-code">{map &amp;&amp; ~}</code>で記載します。

<code class="inline-code">Map.tsx</code>の<code class="inline-code">&lt;content&gt;</code>に<code class="inline-code">children</code>を渡せるように調整して、Google Mapと自作マーカーの両方を描画できるようにします。<code class="inline-code">cloneElement()</code>を使用して、<code class="inline-code">children</code>に<code class="inline-code">map</code>をpropsとして渡します。

<code class="inline-code">&lt;Map&gt;</code>の中の<code class="inline-code">&lt;content&gt;</code>に、<code class="inline-code">children</code>として<code class="inline-code">&lt;Marker&gt;</code>を渡します。自作マーカーの描画場所は、今回はお試しで描画しているGoogle Mapと同じにしておきます。propsの<code class="inline-code">place</code>には<code class="inline-code">DEFAULT.CENTER</code>を渡します。

無事にGoogle Mapに自作マーカーが描画されていれば成功です。

今回は自作マーカーをGoogle Map上に描画しました。 次回はラインを描画するAPIの<code class="inline-code">Polyline</code>を使用して、2点の自作マーカー間にラインを描画します。

@googlemaps/react-wrapperでGoogle Map上に自作マーカーを描画する

はじめまして。webデザイナーの浅野です。

アニメーション制作ソフトAdobe Animate CC（以下Adobe Animate）と、JavaScriptのアニメーションライブラリの”PixiJS”を連携するプラグイン、”<a href="https://qiita.com/tawatawa/items/5879de953b2bfa6ea174">pixi-animate-container</a>”について、実際のプロジェクトで使用する機会がありました。そのため、この記事では、その使用方法と注意点をまとめてみました。

pixi-animate-containerを使用した経緯

弊社の案件において、複雑なアニメーションを要するページ制作のご依頼をいただきました。通常はCSSやJavaScript（以下、JS）だけで十分実装できますが、今回の要件は実装が困難でした。そのため、弊社のデザイナーにAdobe Animateというソフトでアニメーションを作成してもらい、それをブラウザ上で再生可能な形にすることにしました。

また、CSSとJSだけで実装するアニメーションの量も多く、ページのパフォーマンスがかなり厳しくなると予想されており、可能な限りアニメーションライブラリを通して動かすことで、パフォーマンス向上を図る必要もありました。ライブラリは要件を考慮し、二次元のアニメーションに特化したPixiJSが候補に上がります。

しかしここで問題が発生します。Adobe Animateで作成したアニメーションはPixiJSでは動かせず、CreateJSというライブラリでしか動作しません。もちろんAdobe AnimateだけCreateJSで実装し、他のアニメーションはPixiJSで実装するという方法も取れますが、これではPixiJSとCreateJSが混在して管理が大変になります。できればPixiJSのみで管理したい。

この問題を解決するため、<a href="https://qiita.com/tawatawa">tawatawa</a>様が作成された"<a href="https://qiita.com/tawatawa/items/5879de953b2bfa6ea174">pixi-animate-container</a>"というプラグインを利用することにしました。このプラグインにより、Adobe Animateで作成したアニメーションもPixiJS上で動かすことができ、アニメーションはPixiJSのみで統一することが可能になりました。

プラグインの作者であるtawatawa様が、すでにご自身の<a href="https://qiita.com/tawatawa/items/5879de953b2bfa6ea174">Qiita</a>や<a href="https://tawaship.github.io/pixi-animate-container/docs/">GitHub</a>で解説を行っていますが、実際に使用してみて補足したい点もありましたので、本稿でも改めて解説いたします。tawatawa様の記事と併せて読むことで、より深い理解が得られるかと思います。

今回は以下の順にお伝えしていきます。

1.プラグインを使用してブラウザ上にアニメーションを表示させる

まず、Adobe Animateからパブリッシュしたファイルを用意し、必要なファイルをHTMLの&lt;head&gt;タグ内で読み込みます。 読み込み順序を誤ると、正常に動作しない可能性があるため、注意してください。

Adobe Animateのパブリッシュ方法については本稿では解説しませんが、正しくパブリッシュした場合、HTMLとimageフォルダ、そしてJSファイルが同梱されたフォルダが生成されるはずです。また、Adobe Animateからアニメーションをパブリッシュした際に生成されるHTMLファイルは不要なので、削除しても問題ありません。pixi-animate-container.min.jsはtawatawa様の<a href="https://github.com/tawaship/pixi-animate-container/tree/master/dist">GitHub</a>からダウンロードしてください。

次にPixiアプリケーションの作成です。この部分も通常通り進めます。

次にアニメーションの初期化です。ここまでやればアニメーションはブラウザ上で動作するはずです。

以下の箇所については適宜書き換えてください。

<code class="inline-code">id</code>： パブリッシュしたアニメーションのjs内に記述されている、32文字程度の文字列（library properties: と検索し、その下に書かれているはずです）。 <code class="inline-code">basepath</code>： PixjJSの処理が書かれているjsファイルから見て、パブリッシュしたアニメーションのjsファイルまでの相対パス。または絶対パス。 <code class="inline-code">this.addCreatejs(new lib.flask())</code>： lib.の後のメソッド名はAdobe Animateのファイル名になります。今回はflask.flaから書き出したため、lib.flaskとなっています。

※複数のアニメーションを読み込む場合 複数のアニメーションを読み込むには、loadAssetAsyncメソッドの引数にオブジェクトの配列を追加します。この操作により、thenメソッドで受け取るlibが配列形式になります。libの中身をthis.addCreatejs()するとアニメーションを動作させることができます。

2.ブラウザでアニメーション自体の大きさや座標を変更する

この時点で、ブラウザにアニメーションが表示されているはずです。しかし、画面のサイズを変更しても、アニメーションの大きさや位置は自動で調整されません。画面の幅に合わせてアニメーションの大きさや位置を調整したい場合は、resizeイベントが発生するたびに、<code class="inline-code">this.addCreatejs(new lib.flask())._pixiData.instance</code>オブジェクト内のx、y、width、heightプロパティを更新する必要があります。

例えばアニメーションの大きさを常に画面幅の横幅の半分にする場合は以下のように記述することになります。

3.ブラウザでアニメーションを一時停止、再生する

<code class="inline-code">this.addCreatejs(new lib.flask())</code>を使用してCreateJSのアニメーションを操作することができます。例えば、以下の方法を用いることで、アニメーションを任意のフレームで停止または再生することが可能です。

注意すべき点として、アニメーションスピードはブラウザの状態により変化することがあるということです。これは、requestAnimationFrame()を使用するのと同様で、アニメーションはブラウザが実行を許可するタイミングでのみ進行します。例えば通常、ブラウザは60fpsで動作しますが、iPhoneが低電力モードに入ると、iOS Safariはフレームレートを下げます。これにより、アニメーションは通常時に比べて遅く再生されてしまいます。

この問題を解決する方法はいくつかありますが、PixiJSを使用している場合は、app.ticker.addメソッドの引数で受け取るdeltaを利用するのが便利です。アニメーションの総フレーム数は、

を用いて取得できます。したがって、以下の方法でアニメーションを実行することで、再生速度を維持しながらアニメーションをループさせることが可能です。

ここまでアニメーションを最低限自由に扱える方法を説明しました。ですが実際に使用してみるとわかりますが、プラグインを使用する上で注意すべき点がいくつかあります。この章では、私がプロジェクトで遭遇した問題点と、可能な場合の解決策を一緒に紹介します。

■adobe animateにレイヤーマスクが使用されていると、ブラウザに表示したときに上手く表示されないことが多い。 原因は不明ですが、レイヤーマスクを使用したコンテンツが表示されないという不具合がありました。 一部の場合では正常に表示されることもあり、これに基づいて改善策が存在する可能性はあるものの、具体的な解決方法はまだ見つかっていません。 私の場合、デザイナーにレイヤーマスクを使用しないように依頼し直したところ、問題が解決しました。

■画面幅に合わせてアニメーションを拡大縮小するようにしても、アニメーションが正しい大きさにならない。 ブラウザのサイズに応じてアニメーションを拡大縮小しても、予想以上に大きくなってしまうことがあります。 この問題の具体的な原因はまだ明らかにされていませんが、効果的な解決策があります。 その方法は、リサイズ時にアニメーションを一時的に0フレーム目にリセットすることです。この手法を使用すると、アニメーションがリセットされて正しいサイズになります。 ただし、このアプローチではリサイズのたびにアニメーションが最初から再生されてしまうため、リサイズ前のフレームに戻す必要があります。以前に述べた時間依存のアニメーション手法を適用することで、この問題の解決策をコードに反映させることができます。

■pivotを設定しても、基準点がずれる pivotを設定しても基準点が設定通りの位置になりません。そのため、思い通りにアニメーションを回転させることができない状態になっています。原因と対応策はまだ判明していません。 私が制作したサイトにも回転する要素がありましたが、そちらはCSSで実装しました。

■アニメーションが高負荷 実際に実装してみると、デバイスへの負荷が大きいことが明らかになりました。 ただし、極端に性能の低いマシンでない限り、アニメーションが完全に動作しないわけではありません。 私の場合、ブラウザのタブがアクティブでない時やフォーカスが外れている時にはアニメーションを停止することで、デバイスへの負担を軽減しました。 このアプローチは、アニメーションが裏で動いていると他の作業に影響を及ぼすためです。

ここまでpixi-animate-containerの使い方と注意点について解説しました。このプラグインは私が知る中で唯一Adobe AnimateとPixiJSを連結させることができるもので、もし今後似たような案件があった場合、また利用させていただきたいと思います。 また、私以外にも使用した方がいれば、ぜひとも情報を発信していただけると大変助かります。

Adobe Animate CCとPixiJSを連携するプラグインの紹介【pixi-animate-container】

こんにちは ディレクターの小坂です。

以前の記事で書いた<a href="https://techlab.q-co.jp/articles/139/">Shopify Flowで出来ること</a>の4つ目の例をご紹介します。

ECサイトと店舗で在庫を別々に管理している場合、ECサイトでの売上がよく品切れになる前に、店舗の在庫を一部ECサイトに移すこともあるかと思いますが、Shopify Flowを使用しない場合は、ECサイトの在庫がどのぐらい減っているか逐一確認する必要があります。 そこで今回は、『商品の在庫が少ない時に管理者へ通知を送る方法』をご紹介します。

１．トリガーの『Product variant inventory quantity changed』を選択

２．条件で『Product』&gt;『Variants』『InventoryQuantity』を選択し『Equal to』を『Less than』に変更し、InventoryQuantity欄に『10』を追加 ※在庫数が10個を下回る際の設定となりますので、InventoryQuantityの数値は任意の数値に変更ください。

３．アクションで『Send internal email』を選択し、Email address欄に送りたい菅理者のメールアドレス、Subject欄にメールのタイトル、Message欄に実際のメール本文を記載

今回はShopify Flowで『商品の在庫が少ない時に管理者へ通知を送る方法』方法をご紹介しました。次回は、『商品が在庫切れになった場合、商品を非表示にする』をご紹介します。

ご紹介したShopify Flow以外にもFlowの活用方法はありますので、ご自身で対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ下記からお問い合せください。

<a href="/contact/">お問い合わせはこちら</a>

Shopifyで商品の在庫が少ない時に管理者へ通知を送る方法

2024年1月31日(日本時間では、2月1日)にShopify Winter '24 Editionが開催されました。 <a href="https://www.shopify.com/jp/editions/winter2024">https://www.shopify.com/jp/editions/winter2024</a>

今回のShopify Editionでも様々な新機能のアナウンスがなされました。

その中でも個人的に注目しているのが、Shopify Flowの新機能「Run code」です。 <a href="https://www.shopify.com/jp/editions/winter2024#shopify-flow-updates">https://www.shopify.com/jp/editions/winter2024#shopify-flow-updates</a> <a href="https://help.shopify.com/ja/manual/shopify-flow/reference/actions/run-code">https://help.shopify.com/ja/manual/shopify-flow/reference/actions/run-code</a>

"Run code"は、まだ「早期アクセス(Early Access)」であるため、ストアによっては使用できない場合もありますが、下図のように2024年2月にはバグ修正が終わりそうですので、近い将来、正式にリリースされるのではないかと思います。

Run codeで今までできなかった何かができるようになる予感はするのですが、具体的なイメージが湧いてこないのが正直なところです。

そこで、本記事では、Run codeの利用方法を考えてみました。

Shopify Flowの新アクション"Run code"とは

詳細は<a href="https://help.shopify.com/ja/manual/shopify-flow/reference/actions/run-code">公式ドキュメント</a>をご確認いただくのがおすすめです。 Run codeは、簡単に言うと、Shopify Flowの中で、

ということになります。 下図は、実際のRun codeの編集画面です。

Shopify カスタムピクセルで注文IDと購入額を GA4 に送信する手順

ShopifyのURL豆知識: カート操作、割引適用、ログイン後遷移ページ指定

Shopifyのサンキューページ・注文状況ページのアップグレード期限延長とカスタムピクセル対応について

Shopify FlowのRun codeを使った「購入制限」の実装

シリーズ連載

@googlemaps/react-wrapperでGoogle Map上に五芒星を描画する

@googlemaps/react-wrapperでGoogle Map上に五芒星を描画する

シリーズ連載

@googlemaps/react-wrapperでGoogle Map上をクリックした2点の間にラインを描画する

@googlemaps/react-wrapperでGoogle Map上をクリックした2点の間にラインを描画する

シリーズ連載

@googlemaps/react-wrapperでGoogle Map上に自作マーカーを描画する

@googlemaps/react-wrapperでGoogle Map上に自作マーカーを描画する

Adobe Animate CCとPixiJSを連携するプラグインの紹介【pixi-animate-container】

Shopifyで商品の在庫が少ない時に管理者へ通知を送る方法

Shopify Flowの新機能 Run codeの利用方法を考えてみる

Shopifyで不正な注文があった場合、配送状況を保留にする方法

Shopifyの注文の自動ディスカウントを簡単にパワーアップできるアプリ Regios Automatic Discounts

シリーズ連載

@googlemaps/react-wrapperで自作マーカーと自作ポリラインを描画する

SpeedCurve 利用例