SHOEISHA iD

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

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

Developers Summit 2022 Summer レポート(AD)

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

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

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

 クラウドベースでオムニチャネルを実現したマルチチャネルコマースプラットフォームShopify。サービスの開始は2006年。現在は175カ国以上、数百万以上の事業者に利用されている。多くの事業者に支持される背景にあるのが、毎年、未来のコマースに向けて製品が進化していること。このShopifyの進化を支えているのが、Shopifyパートナーである。日本でもこのShopifyのパートナーエコシステムが急速に成長しているとはいえ、まだまだ日本のパートナーが開発した日本の商習慣に合ったShopifyのテーマやアプリは少ないという。Shopifyパートナー開発者として成功するヒントをShopify Japan シニアテクニカルパートナーマネージャーの岡村純一氏が明かした。

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

Shopify Japan株式会社 シニアテクニカルパートナーマネージャー 岡村純一氏

Shopify Japan株式会社 シニアテクニカルパートナーマネージャー 岡村純一氏

日本発のShopifyアプリは増えたものの、利用率はまだまだ27%

 個人から大企業まで、数百万以上のマーチャントに利用されているShopify。現在は175カ国以上でサービスを展開している。Shopifyの特徴は「One Platform, Every Channel, Any Device」。「あらゆる販売タッチポイントで動作するコマースに特化したOS的な振る舞いをするサービス」と岡村氏は説明する。

 一般的にShopifyはECカートに分類されており、多くの人もそのイメージが強いと思われるが、「ECカート機能は一部分でしかない」と岡村氏は言い切る。実店舗で使うPOS機能の提供をはじめ、他のマーケットプレイスやソーシャルメディア、スマートフォンアプリ、外部サイトなどの多種多様なチャネルに対応し、さまざまなカスタマイズができるマルチプラットフォームだからだ。

 そのような柔軟かつ多彩な機能を実現しているのが、豊富で使いやすいAPIやテンプレートなどの仕組み。どんなAPIやテンプレートが提供されているか、Shopifyにかかわる技術情報はすべてShopify.devに記載されているという。

図1.Shopifyにかかわる技術情報が網羅されているShopify.dev
図1.Shopifyにかかわる技術情報が網羅されているShopify.dev

 Shopifyが多くのマーチャントに利用されている理由はそれだけではない。毎年、多くの製品アップデートを行っていることも理由の一つだろう。「今年からはShopify Editionsというランディングページを公開し、100に及ぶ機能追加の発表を行いました。最新のコマース体験を見たい方は、ぜひShopify Editionsにアクセスしてください。開発者の皆さんがワクワクするようなアップデートが確認できます」(岡村氏)

 このようなShopifyの進化、および提供する価値は、Shopify単独で成し遂げられるものではなく、「Shopifyパートナーの存在があって初めて実現できること」と岡村氏。Shopifyに拡張を与えるアプリの数は8000超、またマーチャントのためにストア構築を代行する開発制作会社は4万社を超えているという。

 では日本におけるパートナーエコシステムはどのような状況なのか。

 「ありがたいことにここ数年で、グローバルの成長に引けを取らない勢いで成長している」と岡村氏は語る。日本のパートナーが開発して公開したアプリも2021年末と比べて3倍以上増加するなど、ここ最近、一気に増えているという。「日本のマーチャントの固有なニーズを叶え、Shopifyの利用に役立っている」(岡村氏)

 とはいえ、22年の日本のマーチャントが利用しているアプリの内、日本のパートナーが開発したアプリの割合は27%とまだまだ低い。「伸び代はまだ十分ある」と岡村氏は言う。

 では具体的にどんなアプリが開発されているのか。それを確認できるのが、「Shopifyアプリストア」である。例えば日本向けのアプリを検索したいのなら、検索窓に「日本」と入力する。すると、日本のパートナーが作ったものだけではなく、海外のパートナーが作ったものでも日本語対応した日本向けのアプリが検索できるという。「興味のある人はぜひ、検索して欲しい」(岡村氏)

 パートナーエコシステムの力が発揮されるのはアプリだけではない。Shopifyではテーマと呼ばれるオンラインストアのデザインテンプレートがShopifyテーマストアで公開されている。もちろんShopifyが提供する無料のテーマもあるが、Shopifyパートナーが開発した有料テーマも公開されている。だが、「まだ日本のパートナーが公開した実績はない」と岡村氏。もちろんShopifyもその状況を放置しているわけではない。昨年末には、日本の開発者向けに行っている日本のパートナーにテーマを公開してもらうべく、日本の開発者向けに行っているTwitch配信のスペシャルバージョンとして、グローバルのテーマ開発者開発者チームを交えたオンラインワークショップを開催したという。「この配信はShopify Japanの公式YouTubeチャンネルに残っておりますので、ぜひ見てみてください」(岡村氏)

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 ポスト
  • このエントリーをはてなブックマークに追加

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

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

この記事をシェア

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

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング