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の編集画面です。

まず、何ができるのか、が分からないと考察しようがありませんので、下記の確認をしてみました。

公式ドキュメントには「入力」のクエリとして下記のような例が記されています。

このクエリのorderは、どの注文情報を取得するのか調べるために、下図のように、Order CreatedをトリガーとするRun codeの実行結果をLogに出力してみました。

実行結果を確認すると、上記クエリによって取得できる注文情報は、当然のことながら、Order Createdを引き起こした注文の情報でした。

続いて、下記のようなクエリを試してみました。

このクエリが期待通り動作した場合、customer.ordersによって、Order Createdを引き起こした注文者の過去の注文履歴が取得できるはずです。

実行結果はというと、期待した通り、注文者の過去の注文履歴が取得できました。

この過去の注文履歴がどれくらい過去まで取得できるのか、何件取得できるのが気になります。

公式ドキュメントを確認すると、下記のように記されていました。

クエリにおけるページングの処理やedgesおよびnodesの使用は、Flowによって処理されるため、自分で処理する必要はありません。

ページング処理をFlowが良きようにしてくれるようなので、おそらく、注文者の過去の注文履歴を全て取得できるものと思われます。

Run codeの利用方法を考えてみる

本記事内でRun codeについてわかったことをまとめます。

この2つ仕様からだけでも、下記のような利用方法が思いつきます。

利用例: 1人の顧客が、特定の期間内に、特定の商品を、何個購入できるかを規制する

上記を実現するためのShopify Flowの流れは、例えば、下記のようなものになるでしょう。

いずれ、上記の「購入制限」のFlowを実際に組んでご紹介しようと考えています。

また、本記事でのRun codeの利用例はあくまで一例に過ぎません。 Run codeはかなりのポテンシャルを秘めていそうですので、これまで公開アプリに頼っていた処理や、手動オペレーションでなんとかしてきたものも、Shopify Flowで実現できるようになるかもしれません。

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

以前の記事で書いた<a href="/articles/139/">Shopify Flowで出来ること</a>の3つ目の例をご紹介します。

今回のShopify Flow例はShopifyのみならずECサイトを運営する上で、悩みの1つである不正注文の対策として、『不正な注文があった場合、配送状況を保留にする』です。

Shopifyではデフォルトの機能として不正解析が搭載されていて、不正解析を行い不正勧告「低、中、高」で不正のリスクを提示してくれます。 <a href="https://help.shopify.com/ja/manual/orders/fraud-analysis#view-the-fraud-analysis-for-an-order">https://help.shopify.com/ja/manual/orders/fraud-analysis#view-the-fraud-analysis-for-an-order</a>

不正勧告が高だった場合に、対象注文の配送状況を保留にし管理者にメールを送ることで、不正内容をいち早く確認でき注文キャンセルなどの対応が可能となります。

１．トリガーの『Order risk analyzed』を選択

２．条件で『Order Risk Level』を選択しOrderRiskLevel欄に『HIGH』を追加

３．アクションで『Hold fulfillment order』を選択しReason欄で『HIGH_RISK_OF_FRAUD』を選択

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

Shopifyでは不正注文テスト用にメールアドレスが用意されていますので、下記のメールアドレスを利用し注文を作ることで、事前に不正注文のテストをすることが可能です。 <a href="https://help.shopify.com/ja/manual/orders/fraud-analysis#part-2000981baa1ee686">https://help.shopify.com/ja/manual/orders/fraud-analysis#part-2000981baa1ee686</a>

※不正注文のテスト注文を作るには、Shopifyペイメントのゲートウェイサービスをテストモードにしておく必要があります。

今回はShopify Flowで『不正な注文があった場合、配送状況を保留にする』方法をご紹介しました。次回は、『商品の在庫が少ない時に管理者へ通知を送る』をご紹介します。

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

Shopifyの注文の自動ディスカウントは、お客様の購入金額からシンプルに%OFFしたり定額値引きしたりすることができるため、サイト全体でキャンペーンを行う場合に重宝します。

しかし、少し残念な側面もあります。

例えば、「注文金額から2000円OFFキャンペーン」を行ったとします。同時期に、限定商品を発売し、この商品はキャンペーンの対象外としたい、ということはありそうなことです。ですが、Shopify標準の機能では、これができません。

そんな問題を解決してくれるのが今回紹介する、"Regios Automatic Discounts" です。

Regios Automatic Discounts <a href="https://apps.shopify.com/regios-automatic-discounts?locale=ja">https://apps.shopify.com/regios-automatic-discounts?locale=ja</a>

Regios Automatic Discountsでできること

下図のアプリ管理画面をご覧いただけば、できることは一目瞭然です。

上図は、注文の自動ディスカウントの設定画面です。 下記のようなことが可能です。

また、Regios Automatic Discountsでは、下記についても同様の設定が可能です。

特定商品だけ、注文の自動ディスカウントの対象外にしたい

こちらは簡単です。 特定商品だけ除外したコレクションを作成し、それを自動ディスカウントの対象にするだけです。

また、Beta機能の、Advanced Settingsで、条件分岐を作ってもいいかもしれません。 商品が1,2商品であれば、わざわざコレクションを作成せず、手動選択した方が早そうです。

なお、Advanced Settingsの使用感はこちらから確認可能です。 <a href="https://regiostech.crisp.help/en/article/about-the-advanced-settings-page-1xxaj2u/">https://regiostech.crisp.help/en/article/about-the-advanced-settings-page-1xxaj2u/</a>

特定顧客だけ、注文の自動ディスカウントの対象外にしたい

こちらも簡単です。 対象にしたい顧客にだけ特定の顧客タグを付与し、その顧客タグをディスカウントの対象にするだけです。

なお、この機能は、会員ランクを導入しているストアでは特に有用で、会員ランクをタグで管理していれば、会員ランクに応じた%OFF施策も実施できます。

欲を言えば、クーポンコードの設定もこのアプリでできると、キャンペーン施策の幅がより広がりますが、自動ディスカウントの設定だけでも、十分に有用なアプリです。

お値段も比較的リーズナブルですし、自動ディスカウントで対象の顧客や商品を設定したい、というお悩みをお持ちのストアオーナーにはおすすめです。

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

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

今回のShopify Flow例は『ユーザーの購入総額によってユーザーにランクタグをつける』です。

ユーザーの購入総額によってランク付けすることで、ランクごとの限定商品の表示、ランクごとのマーケティング、ランクアップすることで付与される特典へのモチベーションなど、ユーザーエンゲージメントの向上や売上の増加に寄与することが期待できます。

購入総額が30,000円以上49,999以下の時シルバーランク、50,000円以上の時ゴールドランクのタグをつける

１．トリガーの『Order created』を選択

２．条件でOrder &gt; customer &gt; amountSpent内の『amount』を選択 equal to部分を『Greater than or equal to』に変更しAmount欄に30000を追加 下部の基準を追加をクリックし、Order &gt; customer &gt; amountSpent内の『amount』を選択equal to部分を『Less than or equal to』に変更しAmount欄に49999を追加

３．Thenからアクションの『Add customer tags』を選択しTags欄の「入力を開始する」部分に下記内容を入力しタグを追加<code class="inline-code">シルバーランク</code>

４．Otherwiseから条件でOrder &gt; customer &gt; amountSpent内の『amount』を選択 equal to部分を『Greater than or equal to』に変更しAmount欄に50000を追加

５．Thenからアクションの『Add customer tags』を選択しTags欄の「入力を開始する」部分に下記内容を入力しタグを追加<code class="inline-code">ゴールドランク</code>

６．ランクアップ後、前ランクのタグを削除するため、Thenからアクションの『Remove customer tags』を選択しTags欄の「入力を開始する」部分に下記内容を入力しタグを追加<code class="inline-code">シルバーランク</code>

購入総額が30,000円以上49,999以下の表示例

『シルバーランク』のタグが追加されます。

購入総額が50,000円以上の表示例

『ゴールドランク』のタグが追加され『シルバーランク』のタグが削除されます。

今回はShopify Flowで『ユーザーの購入総額によってユーザーにランクタグをつける』方法をシルバーランクとゴールドランクの2つでご紹介しましたが、同様の処理を増やしていただくとこで、複数ランクを増やすことが可能です。をご紹介しました。 次回は、『不正な注文があった場合、配送状況を保留にする』をご紹介します。

Shopify Flowでユーザーの購入総額によってユーザーにランクタグをつける方法

ECサイトで使用できる支払い方法は日に日に、その種類を増しています。 そんな中、代金引換の利用率は年々低下していますが、それでもまだまだ代引きを無くせないというECサイトは多いかと思います。

しかし、Shopifyでは、他の日本のカートサービスが提供するような代引きの仕組みを提供してくれません。

具体的にいうと、下記2点は、Shopify標準では実装されていません。

このうち、2については、株式会社refactoryが提供する<a href="https://apps.shopify.com/mr-daibiki?locale=ja">MR. DAIBIKI</a>で解決されているShopifyストアが多いのではないでしょうか？

では、1については、どうでしょうか？

本記事では、Shopifyアプリ HidePayを利用して、1を実現する方法をご紹介します。

正式名称は、HidePay: Hide Payment Methodsです。 <a href="https://apps.shopify.com/hidepay?locale=ja">https://apps.shopify.com/hidepay?locale=ja</a>

Shopify Functionsを利用したアプリとなっており、条件に応じて、支払方法を非表示にしたり、支払方法名をリネームしたりすることが可能です。

支払方法名をリネームし、合計金額に応じて代引き手数料を表示する

例として下記のように設定します。

シリーズ連載

@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

Shopify Flowでユーザーの購入総額によってユーザーにランクタグをつける方法

Shopifyアプリ HidePayを利用して、合計金額に応じた代引き手数料を表示する

Shopify Web Pixelのチュートリアルの補足

Shopify Flowで顧客の購入回数をタグに登録するする方法

シリーズ連載

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

SpeedCurve 利用例