【カラーミー】多階層のグループが第一階層までしか取得できない時の対処法を考案した #PHP

はじめに

カラーミーショップの案件を初めて扱ったのでその記録
カラーミーとのやりとりもあり結構ごちゃごちゃした話になってしまったので経緯と今後についてのまとめ
結論からいうと現状多階層を共通の$groupを使って取得するのは不可能なのでは？となっているので、その回避策
- ショッププロのテンプレート改修のお話で、APIとかその辺りは対象外
なのでこの辺り詳しい方いたら教えてください。。

仕様決定から案件着手まで

ショップのサイドバーにグループごとの商品一覧を設置
- カテゴリではなくてグループを階層表示したい
- 扱う商品の都合上三階層目以降があるのでグループを使おうという話になった
サンプルとか調べたらそれっぽい記事は出てくるし、2012年に要望を受けて実装済みってあるからまあいけるだろうと着手
- グループ機能についてカラーミーショップ
- 独自タグカラーミーショップ

見事にはまったこと

次のソースじゃ第一階層しか取れない

<{section name=num loop=$group}>
  <{$group[num].name}>
<{/section}>

前提となる登録情報

以下の階層をもつ4つのグループを作成

・グループ1(ID:000001)
  ・グループ1-1(ID:000002)
    ・グループ1-1-1(ID:000003)
・グループ2(ID:000004)

以下のコードをカラーミーショップの共通ページへ組み込み動作確認

https://admin.shop-pro.jp/?mode=design_tmpl_edt&smode=HTCS&tmpl_uid=5&tmpl_type=0
グループ1、グループ２が取得
- ・・・え、1-1と1-1-1は？？

非公式ぽいけどデバッグ用ソース入れて確認

<{section name=num loop=$loop}>
    <{$group[num]|@debug_print_var}>
<{/section}>

結果

やはり第1階層のグループが表示。。だんだんテンションが下がってくる

Array (5)
id => "000001"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ1"
level => "1"
Array (5)
id => "000004"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ2"
level => "1"

でもlevel取得できてる

levelっていうからには階層だよなぁ、2とか3とかあるよな
- 独自タグ一覧（PC、スマートフォン）
  - ないじゃん
- 独自タグ一覧(携帯)
  - 待ってこっちにはある

ポケベル完全廃止の時代に携帯のみサポート。そんなわけない。検証する実機もないしやる気もない。

ネットでも近い情報はあるがどれも微妙に違ったり未確認とか

聞くのが一番

そろそろんー？となっていたのでカラーミーへ問い合わせ
実は少し前に問い合わせはしていて、HTML/CSSカスタマイズ(≒独自タグ)でいけるはずとの連絡はもらってたので結構混乱
- よく見返すと商品一覧では取れるとの記載があり、ハッとなる。最初に聞いたのは確かに共通ページのはず
カスタマイズ自体はサポートしてないと添えてあり少し悩んだけど聞くことに
コーディングまでサポートしてたらいくら時間あっても足りないのはわかるけどこれはシステム自体のお話だと思う

問い合わせ内容：仕様書的にはこうでは？

Array (5)
id => "000001"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ1"
level => "1"
Array (5)
id => "000002"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ1-1"
level => "2"
Array (5)
id => "000003"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ1-1-1"
level => "3"
Array (5)
id => "000004"
link_url => "https://xxxx.shop-pro.jp/?mode=grp&..."
img_url => ""
name => "グループ2"
level => "1"

回答はこれを書いている今でも待っている

時間かかりそうという一次回答あり（そろそろ１週間たつ）
- もしくはテンプレート作成時に機能制限できるの？とも一応聞いたがそれは無いとのこと。
確認いただける一方でプロジェクト止めるのは無理なので打開策を考えねば

打開策は固定で実装した時のようなソースを自動生成する

色々考えたけどこれが一番な気がした

前提条件

ドキュメントでは取れるとあるのだからそのうち取れるのだろうというあるようで無いような根拠
クライアントはFTPでファイル配置とかのHTMLとかサーバ運用の基礎知識はあるが、プログラミングまでは範囲外
- 階層が表現できるjsonなら自分の実装が楽かなと思った（運用的にはjson変更してもらう）けど、この手の仕事をしているならHTMLとCSV、若い人ならGoogleがイメージしやすいはず！と予想
グループ数は約1000件、階層は最大４まで
- 手打ちは無理。現代のビジネス的にもいちいちこっちで対応してたら全然スピードが出ない
よく見たらカラーミー管理画面で登録済みのグループ一覧をCSV出力する機能なし
- CSV読み込んでとかよくあるやつができそうになかったので、この時点で若干発狂しそう

仕様や運用フローは次のように勝手に決定(もう半ばヤケクソ)

カラーミーショップ管理画面のグループ一覧ページをスクレイピングし情報入手
- これもダメとか言われたらもうどうしようも無いので一旦許してもらえると仮定
スプレッドシートへ反映
シートをGoogle Apps Scriptが読み込んでサイドバー出力のjavascriptファイルを生成

※当初はループ一発＋CSS調整でちょっと面白みに欠ける案件かな？と思ったけどそんなことなかった！

色々あったけど無事完成

カラーミー管理画面のスクレイピング
- Chromeのアドオン Scraper
- 対象URL：https://admin.shop-pro.jp/?mode=group_lst
- 設定値
  - 必要なのはグループ名称とID、そして階層レベル
  - 階層レベルのみ画面に表示されてない（ツリー表示で表現されてる）ので@data-levelと指定して取得
スプレッドシートへ反映
- A列：グループ名称
- B列：グループID
- C列：階層
Google Apps Script
- めちゃくちゃハードコーディングだけどjavascriptファイルを生成できるように実装
  - https://github.com/t-o-z/color-me/blob/master/menu/create_side_menu.gs
- 階層表示にはjquery flexnavを使用
  - シンプルでめっちゃ使いやすい

使い方としては

小規模な修正であれば生成されたjavascriptの中にあるHTMLタグをそのまま変更すればOK
大規模なグループ変更が生じて手作業でファイルぶっ壊しそうな時はGAS実行して作っちゃえば良い

最後に

手間はかけてしまったけどなんとか納品できて使い方わかってもらったみたいなので一安心
しかし長く使うプログラムじゃ無いのでカラーミーショップの回答や対応がどう転ぶかはまだ不安。。
でもまあまあ楽しいことができた気がするので久しぶりにQiita書いてみた！

【カラーミー】 多階層のグループが第一階層までしか取得できない時の対処法を考案した