Shopifyのブログ記事内に自動で目次を生成する

2022年12月に目次を自動生成できるShopifyアプリをリリースしました。
無料でブログ記事をもっと読みやすく拡張します。

ぜひ一度お試しください。

2022年12月にリリースしたばかりの最新Shopifyアプリです。

無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。

文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

引用元: RuffRuff 目次作成

なぜ、作ろうと思ったのか？

• ブログ記事の読みやすさを考えると目次は必須である
• Shopifyの純正CMSでは目次を生成することが出来ない
• 目次を生成できたとして、1記事ずつ手動で目次を挿入するのは手間がかかる

下記の記事ではShopifyに目次を生成するアプリをご紹介していますので、ご参考にしてみてください。

目次を生成できるShopifyアプリを紹介

まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。
Shopifyのブログ機能をフル活用しよう｜機能や拡張アプリを紹介

作成したもの

Shopifyブログ記事内のh2とh3タグを抽出して、目次を自動生成するスクリプトを作成しました。
このような目次が生成できます。

主な機能は下記のとおりです。

• ブログ記事内のh2とh3タグを元に目次を自動で生成
• テーマ内でスクリプトを実行するため、すべてのブログ記事に反映
• 目次部分のクリックで該当箇所までスクロール

コード全体はTsun Inc.のリポジトリをご覧ください。

以下で実装方法を詳しく解説していきます！

実装に入る前に（アプリとソースコードの比較）

実装に入る前に「RuffRuff 目次作成」という無料で利用できる目次作成アプリをリリースしています。実装に入る前に一度アプリを導入し、無料で実装時間を節約しませんか？

アプリとソースコードの機能比較

前提条件

対象読者

• Shopifyのテーマ変更ができる
• HTML、CSS、JavaScriptに関する簡単な知識がある

準備するもの

• Dawnテーマ (v5.0.0で動作確認しましたが、以前のバージョンでも問題ないはずです)
• ブログ記事 

実装

※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。

今回の実装では

• 目次を自動生成するJavaScriptファイルを追加する
• 上記JavaScriptが実行されるようにする

の2つの工程を行います。

どちらの工程もコード編集画面から行いますので、

1. Shopifyの管理画面から オンラインストア > テーマ を選択
2. アクション > コードを編集 を選択

を行い、コード編集画面を表示しておいてください。

JavaScriptファイルを追加する

1. Assets > 新しいassetを追加を選択
2. 空のファイルを作成する
3. 名前: table-of-contents、ファイルタイプ: .js を入力し、アセットを追加する
4. Assets一覧に作成されたtable-of-contents.jsを選択
5. コードを貼り付けて、保存するを選択

JavaScriptが実行されるようにする

1. Sections一覧からmain-article.liquidを選択
2. ブログ記事のコンテンツ部分が挿入される箇所を下記のように変更

開発環境でのテスト

KOMARIさんの Shopifyテーマのローカル開発環境 -Shopify CLI- の記事がとても参考になるので、テスト方法が気になる方はぜひチェックしてみてください！

まとめ

上記のように、JavaScriptのコードをテーマに追加することで目次を自動で生成することができました。

目次部分のデザインや抽出するタグ、生成するタグのIDなど適宜修正して、お好みに合わせた形でご利用ください。

目次の自動生成する無料のShopifyアプリ「RuffRuff 目次作成」を作りました。

オリジナルデザインの目次を簡単にブログ記事に追加したい場合は一度お試しください。

【無料】RuffRuff 目次作成

2022年12月にリリースしたばかりの最新Shopifyアプリです。

無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。

文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

引用元: RuffRuff 目次作成

料金

$0 / 月〜

機能

•  目次の自動生成
•  目次に利用する見出しの選択（h1からh6の中から）
•  タイトルの文言変更
•  区切り線の有無を変更
•  カラー変更（背景、枠、区切り線、タイトル、リンク）
•  章番号の表記の変更（なし、点、数字の３種類から選択可能）
•  字下げ（インデント）の有無を変更
•  スクロールの有無を変更
•  スクロールオフセットの調整
•  ライブプレビュー