【shopify】ブログ機能に目次を付ける
shopifyはECサイト用のカートASPですが、CMS（WordPress等のホームページ管理ツール的な物です）としての役割も担っています。
その中にサイト運営上欠かせない要素として「ブログ」の機能もあるんですが、ブログ機能の初期からついている物は非常にシンプルな投稿機能だけを有している為、例えば冒頭で表示する「目次」の項目が設定出来なかったりします。
ただ、この下を見るとわかる通り、このブログには目次が付いていますよね？
こう言った機能は後からつけ足すことが可能です。さて、どうやってつけ足していくのでしょうか？と言うのが今回の記事の趣旨になります。
shopifyで制作する上では、結構痒い所だったりもするので、こう言うのはカスタマイズしてやっつけます！
目次
いくつかある選択肢
まず前提として、ブログって何かと言うと、その記事内の上の方にあって「各見出しへリンクされている一覧項目」とでも言えばいいでしょうか？上にもあるので、この下にも少し画像で貼ってみるとこんなパーツです。
大きな見出しと、その下の階層にある小さな見出しがリンクされているのがわかるかと思います。
これの作り方は大きく分けると３通りに分ける事が出来ますので、その３つの要素を解説していきます。
頑張って作る方式
頑張って作る方式はやれば誰でも出来る方式です。目次の仕組み自体は非常に簡単で、単純に「アンカー」と呼ばれるリンクを付けているだけですから、手動で目次的な要素をブログ投稿機能から作成する事で可能です。
shopify初期機能のブログ投稿で「目次っぽい物」を作ってそこに「リンクを挿入」でリンクを作成して行けばいいのですが、この方法だとリンク先の見出しにもいちいちIDを振って行く必要があります。
こんな感じでブログ本文を作ったとしても、どうやってリンク先を判定するのでしょうか？その判定方式として活用されるのがhtml（ソースコード）内に書く必要がある「id」と言う存在ですが、このままの機能ではidが触れないので右上の「< >」こんなマークを押してソースコードを表示します。
するとこうなります。
赤線を引いてある所がidを追加する必要がある場所で、h2と言う大見出しの方には既にidを振ってみてますが、下のh3と言う小見出し要素にはまだidを付けていない状態です。
ご覧の通りhtmlなどの編集を普段しない方にはこの時点でまぁまぁ難易度が高いので、やれば出来ると言われても若干ハードルが高いかと思います。
それにブログを書く毎にidを振って行くのはとても手間に感じてしまうかと思います。
そこで、何とか自動化出来ない物だろうか？と考えた場合に出てくるのが２番目と３番目の方式です。
アプリを使う方法
２つ目に考えられる方法としては、shopifyに数多あるアプリの中に「目次制作機能」ぐらいあるのではないか？と言う考えが出てきます。
そこで目次用のアプリを探してみると
あれ？ないのかな？？と焦りますが、こういう時shopifyの場合は日本語アプリだけで諦めてはいけません。英語も検索してみましょう。
英語で目次はなんて言うのかgoogleで検索してみると「table of contents」と言う事なのでそのままその単語で検索してみます。
すると２つほど、それっぽい物が見つかるので片方を押してみたところ、出来る事は間違いなく目次の制作が作れそうですが・・・唯一の欠点として「有料」であると言う事が発覚します。
月額$2だけとは言え、目次の為に年間3,000円ぐらい払うのが果たしていいのかどうか・・・ましてアプリは英語の管理画面ですから、ちょっと面倒そうではあります。
１番目と違って自動化はされるので、手間代を考えれば全然払ってもいいラインかもしれませんが、ちょっと迷ってしまいますよね。そこで当ブログで３つ目の選択肢を採用しています。
プログラムを作る（ここが本命の内容）
①の自力は 「手間」 と言う要素が問題で
②のアプリは 「費用」「英語」 と言う要素が問題になります。
そこで当ブログでは③つ目の方法として自作の目次生成プログラムを埋め込むことにしました。
shopifyはブログ投稿機能として、h2やh3の見出しを投稿で使う事が出来るので、そのタグを自動で拾い上げて、自動でidを振り分けた上に、自動で目次部分を生成してくれればラクチンなわけです。
標準の投稿機能だけで作ったブログなら割とシンプルなプログラムを実装すれば簡単に作り上げる事が出来てしまいますので、弊社のお客様には必要とあれば無償で対応させて頂いております。
どうしても技術的な事が知りたい！！と言う方は弊社の運営しているリキッドマスターズ公式LINEで見る事が出来ますので「コチラ」からリキッドマスターズ公式ページに進んでLINE登録後、ご確認ください。
またこのブログのように投稿機能を標準ではないBlog Studioと言うアプリで投稿している場合もあります。この記事自体はアプリいらないぐらいシンプルに書いてますが、他のブログ等で、デザイン的にもう少し要素が欲しい時には大活躍してくれるshopifyアプリなのでこちらも、ブログにこだわりたい方には広くおススメさせて頂いているアプリです。
Blog Studioを使うと単純にh2やh3と言われる見出しようのhtmlタグが自分の予期しない場所にも設置されてしまう事があります。この辺は便利なツールの宿命的な問題ではあります。
そこで予期しない場所のタグにはリンクしない様にもしてあげないといけないので、少し面倒ではありますが、見出しを付けるタグ専用に「クラス名」と言う物を付ければ自動で見出しを付ける仕組ぐらいのプログラムも作ってしまいました。
こうすれば投稿時に少しだけ工夫すれば大丈夫で。
アプリでのブログ投稿時に、上記画像の用にあらかじめ決めておいたクラス名さえ付与すれば自動で見出し用の設定をしてくれるプログラムを作成しました。
作ったプルグラムはshopifyのテーマ編集で取り付ける事が可能なので比較的汎用的に使う事が出来るので、プログラムのコードその物は公開しておりませんが、簡単に取り付けられてしまいます。
まとめ
①手動目次
②アプリ目次
③自動プログラム
この３つの方法がある中で、プログラムが作れない場合は②の選択肢になる事が多いと思います。③に関してはプログラムその物の作り方は元より、shopifyのブログを何でどうやって投稿するか？によっても若干修正が必要だったりもするので、それなりの専門知識が必要な部分ではあります。
とは言え汎用的に使いたい物だと思うので弊社の場合は「③」をオススメさせて頂いておりますし、基本的には弊社で制作して頂いたお客様に関してはご気軽にご相談頂ければと思います。