SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Developers Summit 2022 Summer レポート(AD)

Shopifyアプリの仕組みとは? 開発を支える「Shopify CLI」からエコシステムまで解説!【デブサミ2022夏】

【B-6】技術をお金と貢献に変える、Shopifyテーマとアプリの開発

  • X ポスト
  • このエントリーをはてなブックマークに追加

Shopifyアプリの仕組みと、開発を支える「Shopify CLI」

 Shopifyアプリやテーマの具体的な仕組みについても岡村氏は解説。「アプリ」という名称から、スマートフォンアプリを連想する人も多いかもしれないが、Shopifyアプリの仕組みは大きく異なる。図を見ればわかるように、パートナーが提供するWebシステムとShopifyが連動し、あたかもスマホのアプリのごとく動くという仕組みになっている。マーチャント向けに提供する画面はReactベースのフレームワークが使われShopifyのデータの参照や更新にはGraphQLが使われている。

図2.Shopifyの仕組み
図2.Shopifyの仕組み

 また昨年から、アプリをテーマに挿入する、つまりオンラインストアのフロントに独自UIや処理の挿入を容易にするため、エクステンション(extension)という仕組みを提供。「この仕組みにより、テーマに直接コードを挿入する必要がなくなった」(岡村氏)と言う。内部的にはWebAssemblyを使って実現しているという。

 このような構成で開発されたアプリは次のように動作する。アプリストアから追加ボタンを押すと、まずShopifyのOAuth画面にリダイレクトされ、そこで許諾を得た場合のみ、APIを呼ぶためのアクセストークンを生成する。その後は各アプリのホストするページが表示され、各種設定や操作を行うことができるようになるのだ。

 続いてテーマの仕組みについても岡村氏は解説。テーマの実態はアプリとは異なり、Liquidと呼ばれるRubyベースのテンプレート制御言語で記述されたHTMLファイルと、それらの制御の仕様が書かれたJSONファイル、さらには外出しされたJavaScript、CSS、画像などのアセットファイルで構成されている。これらのファイル群をShopifyの中にアップロードすることでテーマを公開できる。

 Shopifyでは、マーチャントが直接テーマファイルをいじることはない。マーチャントがオンラインストアをカスタマイズする際は、Shopifyが提供するテーマエディターを使う。「ドラッグ&ドロップなどの視覚的な操作で、デザインすることができるようになっている」と岡村氏。それができるよう、開発パートナーはテンプレート、セクション、ブロックなどの仕組みに沿ってテーマを開発する必要があるのだ。

 もちろんアプリやテーマの開発パートナーは、マネタイズができる。アプリであれば、使いたいマーチャントに対して買取、もしくは月額固定のサブスクリプション、従量課金制で提供することもできる。課金や決済の処理についてもShopifyが代行。つまり開発者は顧客であるマーチャントの開拓も決済の仕組みも考えることなく、開発だけに集中できるのである。

 「ここがShopifyで技術をマネタイズする利点」と岡村氏。しかも世界中の数百万の潜在顧客にリーチすることができるのだ。岡村氏の話を聞いて、「自分もShopifyアプリやテーマを開発して、自分の技術をマーチャントのビジネスに役立ててマネタイズしよう」と思ったとしよう。だが、どんなものを作ればよいのか、企画するのは難しい。そのヒントとして使えるのが、「公式オンラインコミュニティ(フォーラム)」と岡村氏は言う。日本語コミュニティのアプリ、テーマ要望の一覧であるウィッシュリストには、マーチャントやパートナー、Shopifyが調査した結果から日本向けの要望がまとめられているからだ。「これを見ながらアプリストアやテーマストアを検索したり、他のパートナーやマーチャントの疑問に答えることで、Shopify開発によってうまくマネタイズする方法が見つかるのではないでしょうか」(岡村氏)

 フォーラムには各種イベントの案内も掲載。そういうイベントに参加すれば、パートナーやマーチャントとのコミュニケーションも図れるという。

 Shopify開発が技術のマネタイズに向いているのは、生産性の高さもある。「生産性はソフトウェアビジネスの収益に直結する。Shopifyはソフトウェアビジネスの成功に真剣に取り組む開発者の皆さんにとって、強力なツールを提供し、生産性の向上に努めています」(岡村氏)

 その主軸となるのが、「Shopify CLI」というコマンドラインツール。ワンストップでReactベースのアプリのひな形が作れる機能からデバッグ機能のほか、最新バージョンではCI/CDに対応したGitHubやCircleCI向けのワークフロー機能を提供している。「このツールは日に日に進化を遂げており、正しいスキルを身につけている開発者ならあっという間にアプリを完成させることができる」と岡村氏。またShopify CLIはオープンソースのため、改善要望やバグの報告、プルリクエストもGitHubのリポジトリで受け付けている。

 またテーマについても、Shopify CLIにはローカルプレビュー機能、GitHubとの連携機能が備わっている。さらにテーマ開発者向けにはVisual Studio Code向けのエクステンションも公開。Liquidのチェックツールまで備わっており、「複雑なオンラインストアのデザインワークがサクサク進められるような改良が日々、加えられている」と岡村氏は説明する。

 そのほかにもShopifyには「App Bridge」というアプリの管理画面向けの機能ライブラリや「Polaris」というUIライブラリなど、開発者の生産性および開発部の品質を高めるためのさまざまなコンポーネント群を提供している。このあたりの情報について、興味のある人は「ぜひ、Shopify.devを参照して欲しい」と岡村氏。

 セッションではShopify CLIを使ったShopifyアプリの作成、およびGitHubワークフローを使ったパイプライン実装のデモを実施。Shopify CLIを使うことで、比較的容易にShopifyアプリが開発できることを紹介した。

 最後に岡村氏は「そのあいた時間、ちょっとだけShopify開発に使ってみませんか。それが未来の大きな成功につながるかもしれません。始まりはここからです。わずか数分で完了するShopifyパートトナープログラムに登録してください」と参加者に呼びかけ、セッションを締めた。

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Developers Summit 2022 Summer レポート連載記事一覧

もっと読む

この記事の著者

中村 仁美(ナカムラ ヒトミ)

 大阪府出身。教育大学卒。大学時代は臨床心理学を専攻。大手化学メーカー、日経BP社、ITに特化したコンテンツサービス&プロモーション会社を経て、2002年、フリーランス編集&ライターとして独立。現在はIT、キャリアというテーマを中心に活動中。IT記者会所属。趣味は読書、ドライブ、城探訪(日本の城)。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16374 2022/09/20 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング