目次:
- 実現したいことと、どう実装するか
- 吹き出しコメント実現のための要件
- Shopifyでどう実現させていくか?
- 実現したエディタでの吹き出しコメント設置方法と吹き出しデザインプレビュー
- 斜体テキストを吹き出しコメントへ自動変換させる
- emタグを書き換えるJavaScriptコードを追加
- ブログ記事のセクションでJavaScriptを呼び出す
- 吹き出しコメントのCSSデザイン
- メタフィールドによる担当スタッフの選択
- Shopify管理よりメタフィールド定義を追加
- メタフィールドの値で条件分岐
- Shopifyにおける画像の取り扱い・出力・フィルタ
- 完成したコード全体: word-balloon.liquid
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
実現したいことと、どう実装するか
まず、実現したいことは「Shopifyブログ記事の本文内に吹き出しを挿入できるようにする」ということです。
吹き出しコメント実現のための要件
吹き出し実装の背景として、外部ライターが書いた記事、あるいはAIが生成した記事に対して、専門家スタッフによるコメントを途中に挿入したい、ということがあります。
そのため、以下の要件を満たす必要があります。
- 非エンジニアのスタッフでも可能な一般的なエディタ内操作でコメント欄の挿入を可能とさせる
- 記事の冒頭や末尾などの決まった箇所に挿入するのではなく、スタッフがコメントを挿入する箇所を決めてコメントとして挿入できるようにする
また、可能であれば下記のように実装できると便利と感じました。
- 吹き出しコメントは、テキスト+吹き出し枠+顔写真の形にする
- 「コメントをする担当スタッフが誰か」について、プルダウンリストのような用意されたリストの中から選択できるようにする
- 吹き出しの顔写真は、選択したスタッフによって顔写真が変化するようにする
- コメントをした担当スタッフの自己紹介を記事冒頭または記事末尾に自動的に追加されるようにする
- 構造化マークアップに反映させる
参考: Shopify運用のECサイトで構造化データの追加はSEO上必要なのか?
Shopifyでどう実現させていくか?
使用頻度の低く、独自のHTMLタグをもつ斜体(emタグ: 強調タグ)を潰して、斜体テキストによって挿入されたテキストを吹き出しコメントへ変換されるようにして実現することとしました。力技です…!
具体的な実現手順:
- 「斜体」(emタグ)によって挿入されたテキストを、自動的に吹き出しデザインに変化するようにする
- 記事ごとのコメント担当スタッフの選択は、カスタムデータ(メタフィールド)によって実装する
- 顔写真は、選択された担当スタッフの顔写真になるように切り替わるように
- (選択された担当スタッフの自己紹介を追加: 本記事では未実装)
- (選択された担当スタッフが監修していることを構造化マークアップへ追加: 本記事では未実装)
実現したエディタでの吹き出しコメント設置方法と吹き出しデザインプレビュー
実装した結果として、下記のように誰でもかんたんにエディタ内の任意のエリアに吹き出しコメントが設置可能となりました。
吹き出しコメントとして表示させたいテキストを、エディタの「I」(斜体)マークを選択することによって斜体として装飾します。(実際にはemタグ)
公開する前に、担当スタッフを選択します。
スタッフ選択には、ブログ記事最下部の「メタフィールド」> すべて表示 をクリックします。
担当スタッフの名前がプルダウンリストで表示されるので、スタッフ名を選択後に保存。担当スタッフが記事に割り当てられます。
すると公開画面において、斜体として装飾されたテキストがスタッフ顔写真画像付きの吹き出しコメントとして表示されるようになります。
顔写真は、選択した担当スタッフのものに自動で差し替わります。
また、この吹き出しコメントは1記事内に複数箇所設置することが可能。
ただし複数スタッフによるコメントは想定しておらず、1記事につき1スタッフによるコメントをするものとして実装いたしました。
斜体テキストを吹き出しコメントへ自動変換させる
emタグを書き換えるJavaScriptコードを追加
まず、emタグを書き換えるためのJavaScriptコードを追加します。
emタグ要素で記述したテキストを取得し、生成するpタグのテキストへと移動。 そのpタグと、imgタグを内包するdivタグを生成してemタグの代わりに置き換えます。またdivタグにはword-balloonというクラスを付与します。
通常のJavaScriptコードであればassetsフォルダ内に.jsファイルとして作成すれば良いのですが、後でスタッフ選択の関係でliquidフィルターを用いたいため、.liquidファイルとしてsnippetsフォルダ内に作成します。
snippetsフォルダ内に、下記のようなコードを記述したword-balloon.liquidファイルを作成。
<script>
//// Convert 'em' tag into wordballoon
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");
// Loop through each 'em' element
emElements.forEach((em) => {
// Get the text content of the 'em' element
let textContent = em.textContent;
// Create a new 'div' element with class "word-balloon"
let div = document.createElement("div");
div.className = "word-balloon";
// Create a new 'p' element
let p = document.createElement("p");
p.textContent = textContent;
// Create a new 'img' element
let img = document.createElement("img");
// (staffImgUrlは後から変数宣言を追加)
img.src = staffImgUrl;
img.alt = "スタッフ画像";
img.loading = "lazy";
img.decoding = "async";
// Append the 'p' and 'img' elements to the 'div'
div.appendChild(p);
div.appendChild(img);
// Replace the parent 'p' element that wraps the 'em' with the new 'div'
em.parentNode.replaceWith(div);
});
};
</script>
ブログ記事のセクションでJavaScriptを呼び出す
上記JavaScriptが完成したら、ブログ記事ページでword-balloon.liquidを呼び出します。
ブログ記事ページは sections > main-article.liquid ファイルで規定されているので、本ファイルの最下部に下記のようにスニペット呼び出しを追加します。
Shopifyのファイル全体構造については ざっくりつかむShopify2.0のテーマ構造: Dawnを例に をご参照ください。
....
{% render 'word-balloon' %}
スニペットを呼び出す際、.liquid拡張子を付ける必要はありません。
参考: Tips for Using Snippets in Your Shopify Theme
吹き出しコメントのCSSデザイン
emタグをp, imgを内包するdivタグへ書き換えることができたら、CSSによって吹き出しを描画します。
下記CSSを、word-balloon.liquidの最下部へ追加します。
HTML・CSSでつくるおしゃれな吹き出しデザインジェネレーター【レスポンシブ対応】 でCSSを生成しました。
吹き出し背景色や最大幅などはカスタマイズしています。
....
</script>
{% style %}
.word-balloon {
display: flex;
justify-content: center;
align-items: start;
gap: 0 22px;
}
.word-balloon img {
max-width: 70px;
height: 100%;
border: 3px solid #e6edf3;
border-radius: 50%;
}
.word-balloon p {
position: relative;
max-width: 580px;
margin: 3px 0 0;
padding: .8em 1em;
border-radius: 5px;
background-color: #B2727B;
color: #FFFFFF;
}
.word-balloon p::before {
position: absolute;
right: -15px;
width: 15px;
height: 30px;
background-color: #B2727B;
clip-path: polygon(0 0, 100% 50%, 0 100%);
content: '';
}
{% endstyle %}
メタフィールドによる担当スタッフの選択
Shopify管理よりメタフィールド定義を追加
設定 > カスタムデータ > ブログ記事へ
値のタイプは「単一行のテキスト」とし、「1つの値」を選択。
さらに値は「プリセットの選択肢に制限する」を選択。
選択肢に担当スタッフの名前を入力しておきます。
これで、ブログ記事を投稿する画面のメタフィールドから、担当スタッフを選択して記事に紐付けることができるようになりました。
参考: Shopify Help Center | Metafield lists
メタフィールドの値で条件分岐
メタフィールドで指定したスタッフ名で、コメント画像が変更されるように条件分岐を作成します。
先ほど設定したメタフィールドの値は、 {{ article.metafields.custom.blog_comment_staff }} で取得・出力が可能です。
ブログ記事に設定されているメタフィールドのスタッフ名(値)を取得し、合致する画像を変数staffImgUrlに格納するようにします。
このとき、LIquidからJavaScriptの変数へそのまま値を渡すことが可能です。
下記のコードを、snippets > word-balloon.liquidのコード上部へ追記します。
<script>
// Change person info by seleted staff
let staffImgUrl;
let staffName = '{{ article.metafields.custom.blog_comment_staff }}';
if ( staffName == "スタッフ A") {
staffImgUrl = "{{ 'a_profile_215_sq.JPG' | asset_img_url: '100x' }}";
} else if ( staffName == "スタッフ B" ) {
staffImgUrl = "{{ 'b_profile_465-560.png' | asset_img_url: '100x' }}";
} else {
staffImgUrl = "{{ 'store_logo_300.png' | asset_img_url: '100x' }}";
}
//// Convert 'em' tag into wordballoon
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");
....
Shopifyにおける画像の取り扱い・出力・フィルタ
staffImgUrlへ格納する画像は、assetsフォルダに格納してある画像をフィルターによってCDN上でのURLとして取得しています。また、すべてファイルサイズを100pxとして返すように指定しています。
参考: 【Shopify】LiquidのURL filterを正しく理解しよう|liquid note | 初学者向けShopify情報ブログ
管理画面のファイルへ画像をアップロードして、その画像URLを取得する、という方法ではありません。テーマ内assetsフォルダに格納した画像をCDN上でのURLとして取得する方法です。
asset_img_urlは、その後にサイズを指定しないと自動的にsmallサイズ(100px x 100px)でフィルタされてしまうため、基本的には画像サイズを指定することをおすすめします。 画像がぼやけてしまう(blurがかってしまう)ように感じる場合は、CDNによって出力される画像サイズの関係を疑いましょう。
たとえば、下記のように’1080x80’としてpxサイズを記述します。
<div class="banner">
<img src="{{ 'banner_pc_1080-80.png' | asset_img_url: '1080x80'}}" alt="Footer Banner" style="width: 100%; height: auto;">
</div>
px単位での指定方法以外に、’large’などの指定方法もあるようです。
Shopifyにおける総合的な画像の取り扱い・出力方法については、下記が詳しいです。
メタフィールドにおいてスタッフ名が選択されていないにも関わらず斜体文字によるコメントがなされた場合には、画像はショップのロゴが出力されるように設定しました。
以上で、エディタ上のメタフィールドからスタッフ名を選択することで、斜体テキスト(em)で入力した箇所をスタッフごとの吹き出しコメントへと変化させる処理が完成しました!
(ただし、複数のスタッフを1つの記事で発言させることは想定していません。あくまで1記事1スタッフによるコメントを想定して実装しています。)
完成したコード全体: word-balloon.liquid
<script>
// Change person info by seleted staff
let staffImgUrl;
let staffName = '{{ article.metafields.custom.blog_comment_staff }}';
if ( staffName == "スタッフ A") {
staffImgUrl = "{{ 'a_profile_215_sq.JPG' | asset_img_url: '100x' }}";
} else if ( staffName == "スタッフ B" ) {
staffImgUrl = "{{ 'b_profile_465-560.png' | asset_img_url: '100x' }}";
} else {
staffImgUrl = "{{ 'store_logo_300.png' | asset_img_url: '100x' }}";
}
//// Convert 'em' tag into wordballoon
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");
// Loop through each 'em' element
emElements.forEach((em) => {
// Get the text content of the 'em' element
let textContent = em.textContent;
// Create a new 'div' element with class "word-balloon"
let div = document.createElement("div");
div.className = "word-balloon";
// Create a new 'p' element
let p = document.createElement("p");
p.textContent = textContent;
// Create a new 'img' element
let img = document.createElement("img");
// (staffImgUrlは後から変数宣言を追加)
img.src = staffImgUrl;
img.alt = "スタッフ画像";
img.loading = "lazy";
img.decoding = "async";
// Append the 'p' and 'img' elements to the 'div'
div.appendChild(p);
div.appendChild(img);
// Replace the parent 'p' element that wraps the 'em' with the new 'div'
em.parentNode.replaceWith(div);
});
};
</script>
{% style %}
.word-balloon {
display: flex;
justify-content: center;
align-items: start;
gap: 0 22px;
}
.word-balloon img {
max-width: 70px;
height: 100%;
border: 3px solid #e6edf3;
border-radius: 50%;
}
.word-balloon p {
position: relative;
max-width: 580px;
margin: 3px 0 0;
padding: .8em 1em;
border-radius: 5px;
background-color: #B2727B;
color: #FFFFFF;
}
.word-balloon p::before {
position: absolute;
right: -15px;
width: 15px;
height: 30px;
background-color: #B2727B;
clip-path: polygon(0 0, 100% 50%, 0 100%);
content: '';
}
{% endstyle %}
....
{% render 'word-balloon' %}
本記事ではJavaScriptを利用した応用的なカスタマイズのご紹介となりましたが、Shopifyのフォームにおける姓名の並び順入れ替えなど、基本的な日本向けローカライズとしてのカスタマイズ方法について ShopifyテーマDawnを日本向けにローカライズ(姓名フォーム・抜粋文) の記事でご紹介しています。こちらもぜひお読みください。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になる箇所を読み返す:
- 実現したいことと、どう実装するか
- 吹き出しコメント実現のための要件
- Shopifyでどう実現させていくか?
- 実現したエディタでの吹き出しコメント設置方法と吹き出しデザインプレビュー
- 斜体テキストを吹き出しコメントへ自動変換させる
- emタグを書き換えるJavaScriptコードを追加
- ブログ記事のセクションでJavaScriptを呼び出す
- 吹き出しコメントのCSSデザイン
- メタフィールドによる担当スタッフの選択
- Shopify管理よりメタフィールド定義を追加
- メタフィールドの値で条件分岐
- Shopifyにおける画像の取り扱い・出力・フィルタ
- 完成したコード全体: word-balloon.liquid
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Category:
Tags: Shopify