KARTEでWebページの任意の箇所にGoogle Mapを動的表示する

<html><head></head><body>みなさまこんにちは、長谷川です！ 
理想のキーボードを探す旅を長らく続けてまいりましたが、 
KeychronのQ2というキーボードでようやくゴールを迎えそうです。
先日は「ソリューション開発オフサイト」に参加してまいりました。 
当日の開発成果として、前回の記事にてご紹介した<a href="https://solution.plaid.co.jp/202305-instagram">KARTEを使ってInstagramの投稿をWebサイト上に自由に表示する</a>よりさらに一歩踏み込んだ、 
投稿の種別付けと絞り込みという概念と一例をご紹介できればと思います。 
お題目は以下の通りの流れで進めて参ります。
<ul>
<li><a href="#usecase">ユースケースについて</a></li>
<li><a href="#condition_example">種別付けの一例</a></li>
<li><a href="#action_example">埋め込み接客の一例</a></li>
<li><a href="#relational_example">投稿どうしの関連付けの一例</a></li>
<li><a href="#further_development">さらなる展開について</a></li>
<li><a href="#offsite">ソリューション開発オフサイトについて</a></li>
</ul>
<h2 id="usecase">ユースケースについて</h2>
そもそも、投稿に対して"種別付け"ができると何が嬉しいのでしょうか？ 
<a href="https://solution.plaid.co.jp/202305-instagram">前回の記事</a>にて"全ての投稿を取得して、接客としてWebサイト上に自由な形で埋め込む"ところまでは辿り着きましたが、 
自分だったらこの後の展開として、"人、モノ、コトの種別を投稿に付与して、埋め込み先(表示する接客)を変えたい"と考えます。 
つまり、以下のような接客がWebサイト上に埋め込まれるイメージです。
<ul>
<li>人を表示する接客: "スタッフさんの自己紹介"のような投稿だけに絞り込んで表示する接客</li>
<li>モノを表示する接客: 取り扱いのある商品を紹介するような投稿だけに絞り込んで表示する接客</li>
<li>コトを表示する接客: 商品を使って何をするか？コーディネートやユースケースをスタッフさんが紹介する投稿だけに絞り込んで表示する接客</li>
</ul>
下画像の赤枠部分がそれぞれの埋め込み接客イメージとなります。
<div align="center">
 <img src="https://ik.imagekit.io/plaid/4250fa9d-423b-45cd-9139-67666ba1051c/instaAPI-type_example.png" alt="それぞれの接客イメージ" style="width:1000px;">
</div>
種別を判定するための情報さえ付与すれば、 
Instagramに投稿するだけでWebサイト上のコンテンツを更新できると考えると、 
何となく便利に使えそうな予感がしませんでしょうか？ 
さっそく、"人を表示する接客"に表示したい投稿に種別付けする処理の一例を次項にてご紹介いたします。
<h2 id="condition_example">種別付けの一例</h2>
投稿の取得から表示までの基本的な流れは<a href="https://solution.plaid.co.jp/202305-instagram">前回の投稿</a>を踏襲して行いつつ、 
要所として以下のステップを追加する形で実現できそうです。
<ul>
<li><a href="#instagra_create">Instagram側で投稿を作成する際、定型的な文字列をキャプションに含めておく</a></li>
<li><a href="#extract_cond">Craft Functionで投稿中のキャプションから定型部分を抽出し、種別判定をした上でアクションテーブルにinsertする</a></li>
</ul>
<h3 id="instagra_create">Instagram側で投稿を作成する際、定型的な文字列をキャプションに含めておく</h3>
定型的な文字列の形式はいったん無難に<code>${key}: ${value}</code>の形にしてみましょう。 
投稿の種別 を表すkeyは<code>ContentType</code>とし、人 の種別を表すvalueは<code>STAFF</code>とします。 
せっかくなので、接客として埋め込む上で同時に表示したい基本情報も含めてしまいましょう。 
下記Instagram投稿スクリーンショット中の赤枠部分のような感じですね！
<div align="center">
 <img src="https://ik.imagekit.io/plaid/9f9f0b38-eb57-4891-9374-f34065b0f644/instaAPI-ページ1.png" alt="投稿の一例" style="width:400px;">
</div>
余談なのですが、自己紹介文はChatGPTくんが2秒くらいで作ってくれました。 
ざっくりしたお願いの仕方だと、出てくるものも当たり障りない無難な感じになりますね…。
<h3 id="extract_cond">Craft Functionで投稿中のキャプションから定型部分を抽出し、種別判定をした上でアクションテーブルにinsertする</h3>
定型部分に投稿種別付けのキモになる<code>ContentType: STAFF</code>が含まれていると仮定して処理していきます。 
Instagram投稿中のキャプション全文は、 
<a href="https://developers.facebook.com/docs/instagram-api" target="_blank" rel="noreferrer">Instagram Graph API</a> のエッジ"<a href="https://developers.facebook.com/docs/instagram-api/reference/ig-user/media" target="_blank" rel="noreferrer">media</a>"で指定できる caption フィールドで取得できます。 
キャプション中の定型部分を処理するイメージは…
<pre><code class="language-javascript hljs">/* Instagram投稿の配列 */
const instagramContentsArray = await getAllInstagramContents(); // Graph APIを通して自アカウントの全投稿を取得

/* 種別と種別に応じた基本情報のkey */
const contentKey = {
 ContentType: "ContentType: ",
 STAFF: ["名前: ", "性別: ", "年齢: ", "店舗: "]
};

/* キャプション中からkeyを指定してvalueを抽出する */
const extractValueByKey = (caption, key) =&gt; { /* 抽出するための文字列処理 */ }

/* キャプション中から定型部分の値を抽出する */
const contentExtractor = (caption) =&gt; {
 const retObj = {
 /* "STAFF"が入ってくる */
 contentType: extractValueByKey(caption, contentKey.ContentType),
 contentValues: []
 };

 contentKey[retObj.contentType].forEach(nKey =&gt; {
 retObj.contentValues.push(extractValueByKey(caption, nKey));
 });

 return retObj;
};

/* 定型部分より抽出された情報を持つInstagram投稿情報の配列 */
const shapedInstagramContents = instagramContentsArray
 .filter(nInstagramContent =&gt;
 /* caption中に"ContentType: "を含む投稿を抽出 */
 nInstagramContent.caption.includes(contentKey.ContentType)
 )
 .map(nInstagramContent =&gt; {
 const extracted = contentExtractor(nInstagramContent.caption);

 /* "STAFF" */
 nInstagramContent.contentType = extracted.contentType;

 /* ["APPAREL STAFF A", "女", "25", "ONLINE SHOP A"] */
 nInstagramContent.contentValues = extracted.contentValues;

 return nInstagramContent;
});
</code></pre>
このような形となるでしょうか。 
基本情報配列部分をアクションテーブルにupsertする際は、カンマ区切りの文字列に変換した方が良さそうです。 
キャプション中の特定部分以降をJSON文字列として扱ってしまう形の方が楽だったような気もします…。
<h2 id="action_example">埋め込み接客の一例</h2>
上記のような処理を施した情報を使って、 
実際に"人を表示する接客"を作ってサイトに埋め込んでみると以下のようなイメージとなります。
<div align="center">
 <img src="https://ik.imagekit.io/plaid/d0387dda-846f-43e3-8830-a47d9301eea9/instaAPI-type_embedded.png" alt="埋め込み接客" style="width:650px;">
</div>
実際のInstagramの投稿キャプション中にある定型文字列と、 
"人を表示する接客"つまり"ContentType: STAFF"の投稿のみを表示する接客上の情報の紐付き方は以下のようなイメージです。
<div align="center">
 <img src="https://ik.imagekit.io/plaid/80e9f96c-3c49-46b3-98a7-1787fa7e6aeb/instaAPI-type_relation_1.png" alt="情報の紐付きイメージ" style="width:850px;">
</div>
定型文字列から抽出された情報はただ配列に入った状態で接客に渡ってきますので、 
<code>例: ["APPAREL STAFF A", "女", "25", "ONLINE SHOP A"]</code> 
見せたい形に整えて表示することができますね。 
他にも<a href="https://solution.plaid.co.jp/202305-instagram#:~:text=%E4%BD%95%E3%82%82%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF%E6%8A%95%E7%A8%BF%E3%81%AE%E3%83%A6%E3%83%8B%E3%83%BC%E3%82%AFID%E3%81%97%E3%81%8B%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%AE%E3%81%A7%E3%80%81IG%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%92%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89">Instagram Graph APIを通して取得できる投稿の情報</a>と併せて表示することももちろん可能です！ 
敢えて文字的な情報は見せないという選択肢も良いですね！
<h2 id="relational_example">投稿どうしの関連付けの一例</h2>
上記のような投稿に対する種別付けと出し分けができたら、 
今度は投稿どうしの関連付けをして表示する接客が欲しくなります。 
要約すると「特定スタッフさんと、そのスタッフさんが投稿したレビューとコーディネートを表示する接客」となるでしょうか。
今回のソリューション開発オフサイトにおいては、残念ながら"人を表示する接客"を作成した段階で時間切れとなってしまいました…。 
以下はあくまで実現可能と思われる範囲でのアイデアとなりますが、みなさまとシェアできればと思います！ 
例えば"人、モノ、コト"をそれぞれ"スタッフ紹介、商品紹介、コーディネート紹介"と置き換え、 
それぞれに属する概念のInstagram投稿を以下のように用意したとします。
<div align="center">
 <img src="https://ik.imagekit.io/plaid/ef5dfd93-e61b-439e-9a0b-808de9d276bf/instaAPI-type_content_1.png" alt="情報の紐付きイメージ" style="width:1200px;">
</div>
それぞれの投稿どうし関連付けを持たせて、 
それを一つの接客で表現するためにデータをどう持たせるかを考えてみます。 
例えば以下のような最低限のデータ構造をアクションテーブルに持たせておけば、
<style>
 tr > th { text-align: center; }
 td > pre { color: #fff!important; }
</style>
<div class="TableScroll"><table>
 <thead>
 <tr>
 <th>media_id</th>
 <th>content_type</th>
 <th>relational_id</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>00000001</td>
 <td>STAFF</td>
 <td>
 <pre>{
 "PRODUCT": ["00000002", "00000003"],
 "COORDINATE": ["00000004"]
}
 </pre>
 </td>
 </tr>
 <tr>
 <td>00000002</td>
 <td>PRODUCT</td>
 <td>
 <pre>{
 "STAFF": ["00000001"],
 "COORDINATE": ["00000004"]
}
 </pre>
 </td>
 </tr>
 <tr>
 <td>00000003</td>
 <td>PRODUCT</td>
 <td>
 <pre>{
 "STAFF": ["00000001"],
 "COORDINATE": ["00000004"]
}
 </pre>
 </td>
 </tr>
 <tr>
 <td>00000004</td>
 <td>COORDINATE</td>
 <td>
 <pre>{
 "STAFF": ["00000001"],
 "PRODUCT": ["00000002", "00000003"]
}
 </pre>
 </td>
 </tr>
 </tbody>
</table></div>
ひとつの"media_id(Instagram投稿のUID)"に対する、別種別に属する別投稿の関連付けは実現できそうです。 
"media_id"とJAN_CODEなど、別サービスの概念を関連づけるにはもう少し工夫が必要ですが、 
それも上記テーブルに含めてしまうのもアリかな？という感じです。 
実際に接客を埋め込むと、以下画像の赤枠部分のようになるイメージです。
<div align="center">
 <img src="https://ik.imagekit.io/plaid/3a46d5a2-a98e-4c9b-bf84-60b7f256206f/instaAPI-type_relation_action_1.png" alt="特定スタッフさんに関連する投稿を表示する接客イメージ" style="width:450px;">
</div>
検証環境サイトがアパレル系を模したものだったため、 
今回は"人、モノ、コト"を上記のような形でご紹介いたしました。
<h2 id="further_development">更なる展開について</h2>
本ソリューションの根幹となるのは"Instagramの投稿に定型的な文字列が入っている"という部分ですが、 
それを投稿の作成時に人間が担保するのは正直めんどくさいし、間違えそうだよなぁというのが正直なところです。 
…では、その定型的な部分を含めて投稿作成をサポートする埋め込み接客をKARTEで作ってしまうのはどうでしょう? 
Instagram Graph APIの方には<a href="https://developers.facebook.com/docs/instagram-api/guides/content-publishing?locale=ja_JP" target="_blank" rel="noreferrer">コンテンツ公開API</a>がございます。 
そのAPIを利用した"Instagram投稿を定型的に作成し、コンテンツ公開APIを通して投稿を公開する埋め込み接客"を作成のうえで、 
お手持ちのドメイン上に何らかの認証をかけた空白ページをご用意いただき埋め込んでしまう、というのもひとつのソリューションですね。 
投稿の種別や定型部分に含めていた情報を、その投稿の作成時点でKARTE側で管理してしまえば 投稿中に定型的な文字列を含める必要すらない のです！
もはや実現可能な部分が膨大すぎで、できることベースから実現したいことベースでの進め方に切り替えていきたいタイミングとなってまいりました。 
つきましては「InstagramとKARTEでこんなことしてみたい」というアイデアをお持ちの共創パートナーさまを募集しております！！
<h2 id="offsite">ソリューション開発オフサイトについて</h2>
ソリューション開発オフサイトでの成果ご報告ブログのはずが、だいぶ長くなってしまいました…。
今回の会場となった<a href="https://zen-building.com/" target="_blank" rel="noreferrer">Akasaka Zen Spaceさん</a>にお邪魔して思ったこととして、 
じつは畳って開発体験の良さに繋がったりするのでは…というのがあります。 
やはり座りっぱなしは辛いものがあり、 
座椅子なんかと組み合わせて(極論寝そべっていても)ラップトップで開発を進められる環境は助かりますね。 
それを許容する風土なんかも重要にはなってきそうですが…！
わたし個人は完全リモート主体でお仕事しており、 
リアルタイムでの何気ないコミュニケーションをする機会がめっきり減っているのですが、 
誰かの何気ない発言から物事が進んでいく対面ならではの瞬間が久しぶりで、とても楽しかったです！ 
この輪の中で開発させてもらえるってありがたいな、いいなぁとしみじみ感じました。
今回はこれにて失礼いたします！
</body></html>

KARTE Craftを使って定期取得した自社Instagramアカウントの投稿に種別を付与し、KARTEがWebに配信するアクションで種別ごとに出し分ける方法をご提案します。

KARTEを使って自社Instagramの投稿を種別で絞り込んでWebサイト上に表示する