こんにちは。Tsunの小笠原です。
ブログ記事を読みやすくするShopifyアプリ「RuffRuff 目次作成」アプリのプレスリリースを本日配信しました！

プレスリリースはこちら
ブログ記事を読みやすくするShopifyアプリをリリース｜先着30ストアに有料プランを無償提供

TsunでShopifyアプリ開発をはじめて4ヶ月ほど経ち、現在進行中のものを含めると5つのアプリを開発してきました。
最初のShopifyアプリを作成したとき、作り始めてから審査に通り、リリースするまでに1ヶ月以上かかりました。(最小限の機能で、アプリ自体はとても簡単なものだったにもかかわらずです)
当時のことを振り返ってみて、リリースまでの道のりを書いてみます。
このnoteが今後Shopifyアプリを開発したい＆提供したいと考えている方々の参考になれば嬉しいです。

Shopifyアプリとは

「RuffRuff 目次作成」とは

「なぜ目次作成アプリを作ろうと思ったのか」は弊社吉谷のnoteに書きましたのでぜひご覧ください！

Shopifyアプリの開発とは

Shopifyアプリは、Shopifyのストアや管理画面の機能を拡張するものです。
ほとんどのShopifyアプリはShopifyではなく、私たちのような世界中のサードパーティのデベロッパーによって作られています。
iPhoneでいうApp Storeのように、Shopify アプリストアというShopifyが運営しているアプリストア経由で各マーチャントのストアにインストールされて使われます。

上記のようにサードパーティの開発によって支えられているため、Shopifyもアプリ開発に必要な多くのライブラリやAPIを提供しています。
公式に提供されているテンプレートはフロントエンドはReact、バックエンドはNode、Ruby、PHPから選ぶことができます。

Shopifyアプリは下記の2種類に大別されますが、今回はアプリストアに公開するアプリについて話します。

1. アプリストアに公開されるアプリ (審査が必要)

2. 特定のストアのみに利用されるカスタムアプリ (審査は不要)

Shopify開発に必要なスキル

React
フロントエンドの実装に利用。
ShopifyのPolarisコンポーネントもReactで実装されているし、CLIもRubyからNodeベースに移行されたので今後はNode優勢か？

GraphQL
REST APIもあるが、今後リリースされる新機能は基本GraphQLになるはず。

英語のリーディング・ライティング
開発のドキュメントは充実しているがすべて英語です。
世界のストアをターゲットに入れるなら英語対応が必須。問い合わせももちろん英語。
うちはDeepLでなんとかやりくりしていますが、世界のストアをターゲットにするならそれなりの覚悟が必要です笑

変化(と少しのカオス)に対応できる
Shopify自体にどんどん新しい機能も追加されますし、ライブラリを含めた開発環境の変化も激しいです。

Shopifyアプリ開発の流れ

Shopifyアプリ開発は下記の流れで行われます。

1. ローカル環境でアプリを開発する

2. Shopifyにレビュー依頼を出し、審査してもらう

3. 審査に通ればアプリストアに公開される

レビュー依頼を出してから1週間前後で初回の返答が来ることが多いです。
1回目で審査を通ればそのままリリースですが、指摘事項があった場合、修正と再レビューを繰り返すことになります。
また、リリースしたアプリのアップデートは自由にでき、再審査のフローはありません。定期的にセキュリティチェックのボットがくるのでクリティカルな問題がある場合は再審査などがあるのかもしれません。

ひとまず審査に出せるレベルのアプリを作る

公式ドキュメントを参考にまずはアプリを作っていきます。
もともとReact、Nodeの知識があったので、もちろんNodeベースのテンプレートを選択。
ローカルで動くアプリは簡単に作れました。

公式にはReact、Nodeを押してきていますが、アプリ自体は自サーバーでホスティングしたものをiFrame経由で表示される仕様のため、基本的に何で作っても問題はないです。

序盤で困ったポイントは下記の3つです。

• セッションの実装 (自前でやる必要があるけど、どうしよう？)

• GDPR対応の必須Webhookの実装 (どうやるのが正解なんだ？)

• デザインどうしよう (デザイナーいない)

実装に関しては本番環境で動かしているような例を探してみましたが、なかなかベストプラクティスは見つけられませんでした。
そんな中、このリポジトリを見つけました。MongoDBでしたがかなり本番に近い状態のサンプルを見つけられたので、早速参考にして実装をしました。

デザインに関してはShopifyが公式で出しているPolarisコンポーネントを使うことに決めました。Shopifyの管理画面と同じ使用感になるのでマーチャントにとっても使いやすいのと、Figmaファイルもあるので、社内で簡単にモックを作ってデザインの共通認識が作れるためです。

アプリができたので審査に出してみる

まずはレビューに関するドキュメントを読みました。

• https://shopify.dev/apps/store/requirements

• https://shopify.dev/apps/store/review

レビューの流れの具体例わからないので参考記事を探します。
初めてのShopifyアプリ開発：気を付けるべき4つの間違い がとても参考になりました。

リスティングの項目を埋めて、いざ審査に出してみます。
すると、1週間ほどでレビュワーからメールが来ました。
参考にしたテンプレートのおかげもあり、アプリ自体にクリティカルな問題はありませんでした。
リスティング文章やアプリの使い方を動画で説明すると見事に審査に通りリリースすることができました。

アプリのリリースをしたあとの改善

アプリは無事リリースできても、リリースして終わりではありません。
継続的に機能をアップデートしたり、不具合が見つかれば修正する必要があります。
そのためにまずはCI/CD体制を整えます。うちはGCPのサービスを使いましたが、使い慣れたものがあればどれでも問題ないです。
さらに、いきなり本番アプリを変更するのは怖いのでStagingアプリを作成しました。非公開のアプリを作り、そちらにまずは変更を反映し、問題がなければ本番アプリにも反映するというフローになりました。

また並行していくつかアプリを開発していて、今後もアプリをリリースする予定なので、ベースとなる部分をテンプレート化しました。

アプリ開発当初に利用したテンプレートがTypeScriptを採用していなかったため、一旦TypeScriptは使っていなかったのですが、最初から使っておけばよかったと後悔しています笑

最後に

このnoteでは技術系の話を深ぼっていませんが、Tsun Tech Blogでは技術系の記事を公開していますので、興味のある方はぜひ見てみてください！

また、弊社の運営しているオウンドメディアでは、Shopifyに関する記事をいくつか執筆しています。

実際に「Shopify 目次」だけでなく、「Shopify サブスク」「Shopify 予約販売」「Shopify セット販売」「Shopify おすすめ アプリ」「Shopify 再入荷通知」など多くのShopifyキーワードでGoogle検索の上位を獲得するまでに成長できました。

最近では、アプリベンダー様のアプリ紹介記事の執筆および掲載の実績も増えています。

弊社ではアプリ紹介の記事執筆・掲載の案件を募集中です！（一緒にShopifyアプリを盛り上げてい行きましょう！）
ご興味ある方は、弊社のお問い合わせフォームよりご連絡ください。
無料掲載のプランもご用意していますので、気軽にお問い合わせください。
Tsun お問い合わせフォーム

RuffRuff 目次作成 関連リンク

Shopifyアプリストア
RuffRuff 目次作成（RuffRuff Table Of Contents）
Tsun Inc.のShopifyアプリ一覧

Tsun Inc.
【日本初】Shopifyに目次を自動生成するアプリ「RuffRuff 目次作成」とは？RuffRuff 目次作成 サポートページ | 初期設定や機能について
RuffRuff 目次作成 変更履歴（Change Log）
Shopifyに目次を入れるメリット｜目次を作成できるShopifyアプリも紹介
Shopifyのブログ記事内に自動で目次を生成する