商品データやブログなどをMarkdownで更新出来るようにする

こんにちは。

趣味でマーチャントをやっている ものです。

この記事は Shopify開発を盛り上げる（Liquid, React, Node.js, Graph QL） Advent Calendar 2020 の11日目の記事です。

昨日は benzookapi さんの Shopifyアプリ公開パーフェクトガイド：アプリエコシステムに上手に参加する方法 でした。

12月4日にも社内ブログで書いた記事を載せて頂きました が、枠がまだ空いているようですので、今日はプライベートで作ったShopifyアプリについてお話したいと思っています。

この記事でお話するツール

ショップの商品データやブログ・ページを、手元のMarkdownファイルで編集して、CLIから更新するツールです。

最初に動きを見てもらった方がイメージが付きやすいと思うので、デモを貼っておきます。

ショップの商品情報やブログがCLIで更新されている様子です。

Shopifyでのコンテンツの編集について

さて、皆さんは普段商品情報やページの編集をする時はどうされていますか？

当然ですが、ショップの管理画面で提供されているエディタ(以下リッチエディタ)で更新されていることと思います。

(ちなみにShopifyのデザインシステムPoralisで リッチエディタをComponentとして提供して欲しいという要望 が多く集まっているようですね)

私は元々仕事でShopifyアプリの開発をしていた延長で、自分のショップがあったら楽しかろうと思ってこのサイトを出店しているのですが、マーチャントの立場で改めて管理画面を使ってみると、どうにもこのエディタでは満足できないことに気づいたのです。

と言うのも、普段文書を書くのに最もよく使っているのは公私ともに markdown だからです。

また本業のプログラマーという職業柄、文章を書くには使い慣れたテキストエディタを使いたいという気持ちもあります。

Shopifyではテーマ開発用ツールとして theme-kit が提供されており、 Shopifyで編集したテーマファイルをダウンロードしたり手元のエディタで編集したものをアップロードすることが出来ます。

これに近い体験が、コンテンツの管理でも出来ないものでしょうか？

既存の解決策

コミュニティを 検索してみると、markdownで編集出来るようなアプリをリリースしたというコメントは散見されるものの、デッドリンクとなっているなど、2020年時点でも使える解決策は見つかりませんでした。

幸いShopifyには Admin API を始めとする、多種多様なAPIが公開されています。 また、リッチエディタで保存された文言は、内部的にはHTMLで保存されているようです。

商品情報編集やページ・ブログ記事の更新までAPI経由で操作が可能なので、theme-kitよろしくcontent-kitのようなツールが書けそうです。 (と言うか、この記事は content-kitと名付けたその自作ツール で更新しています)

ツールの構成

開発に際して参考にしたドキュメントやツールは以下の通りです。

• Private App でショップへのアクセス権限を取得
• Admin API
• GraphQL API
  • GraphQLのクエリファイルから以下のツールでAPIクライアントを自動生成
  • https://github.com/Yamashou/gqlgenc
  • https://github.com/99designs/gqlgen
• REST API
  • ページとブログの更新はGraphQL APIでサポートされていないのでREST APIも併用

Shopifyはドキュメントが非常に充実していて、 GraphiQLアプリ によるインタラクティブな試行環境もあるので、 特に詰まることもなく開発出来ました。

ページやブログはREST APIの Goクライアントライブラリ でサポートされていませんでした。 この辺りはShopifyアプリではあまり取り扱われないリソースなのかも知れません。

困ったこと

Shopifyには開発のための環境は揃いきっているので、困ったことはそれほどありませんでした。

唯一困ったのは、テーマファイルや他のツール(テーマや書誌情報の規格化されたデータファイルの取り込みツールなど)を同じレポジトリで管理している都合上、 bazel でビルドをしているのですが、GraphQLクライアントの生成ツールが依存している *.gotpl などのファイルの依存関係が自動生成できなかったことです。

Shopify関係ないですね。

(bazelのgo系ルールには依存解決時にパッチを当てる仕組みがあるようで、 パッチを書くことで 解決出来ました)

まとめ

どうしてもリッチエディタに慣れなくてついカッとなって作ってしまいました。

マーチャントとしてPrivate Appで好きにカスタムしながらショップを運営するのは結構楽しいです。

アプリストアに出品されないような一般化しづらい要望を(自分で)すくえるのがいいですね。 流行りのノーコードとは真逆の使い方ですが。。。

バイナリを Releaseページ に置いておくので、良かったら試してみて下さい。

(HTMLとMarkdownの相互変換で微細な差異が生じることがあります)

---

明日は kskinaba さんの「Ruby：Shopify GraphQL Admin API の使い方」です。 お楽しみに！