にこスマを取り巻くテクノロジー
tty です。
最新の iPhone 13 の状況もあってか、最近にこスマがテレビでも話題になる機会が増えています (WBS、 めざましテレビ)。
本記事ではにこスマの紹介と、にこスマの安定稼働を支える要素について解説します。
にこスマとは何か
にこスマは 中古デバイスの EC サイトで、 2021 年 9 月現在 iPhone や iPad、Android を取り扱っています。中古デバイスのエコシステムの構築に挑戦している Belong の主力サービスの 1 つです。
にこスマは EC サイトプラットフォームの Shopify 上で構築されており、フロントエンドエンジニアや Shopify スペシャリストを自社で抱え日々開発を行っています。現在では見た目もオシャレなにこスマですが、ここに至るまで何度も試行錯誤を重ねてようやく今の形に辿り着きました。
にこスマの歴史
Belong 起ち上げ期
Belong が立ち上がった当初、私たちの EC サイトはとある EC サイト構築専門の CMS を用いて立ち上げられました。この頃はサービスの認知もまったくないため、販売量も今に比べるとかなり少なかったようです。
Shopify 移行
初期に構築されたサービスの稼働自体には問題はなかったですが、変更履歴の管理等で難しさを感じていました。
そこで、既存のサービスの稼働を続ける一方で、より良いものを求めて弊社 CEO 井上と COO 清水が試しに Shopify でサイトを立ち上げてみたところとても気に入り、Shopify 一本でサイトを運営していこうという転換がありました。
にこスマのリブランディング
Shopify 利用開始後はシンプルながらもスケーラビリティはあり十分稼働に耐えうるサイトでした。しかしながら、ユーザーフィードバックや競合他者との立ち位置を考えるなかで、にこスマならではの価値が必要です。そこでにこスマのプロダクトメンバーが打ち出したのが「三つ星スマホ」です。
三つ星スマホとは以下の 3 要素を満たすスマホです。
- 制限なし
- 外観キレイ
- 検査項目クリア
詳細はサービスページから確認できますが、元々これらにこだわりを持ち高い品質のデバイスを扱っていたにこスマでしたが、三つ星スマホにより一層力を入れ、サービス全体の UI デザインも一新し現在のにこスマとなりました。
にこスマの特徴と技術的な課題
にこスマの最大の特徴は中古デバイスを扱っていることであり、これは Shopify を利用する上でのサービスデザインに大きな影響を与えました。
新品の場合、iPhone 8 は色やストレージサイズ等の属性が同一であれば在庫の中からどの iPhone 8 を手にとっても問題ありません。一方で中古の場合は同一モデル同一属性のデバイスでもそれぞれ状態が異なるため、在庫の時点で個別管理する必要があります。
Shopify では商品を Product と呼び、Product ごとに商品ページが作られます。また、Product 中の色やサイズの違い等の属性を Variant として表現します。この仕様上、新品の場合は iPhone 8 のモデルに対して Product を 1 つ作りその他の属性を Variant で表現する形になります。
では、中古の場合はどうでしょうか？中古でも新品と同様のアプローチは技術的には可能です。しかし、デバイスをモデル等でまとめてしまう場合、個々のデバイスの詳細の掲載が難しくなります。
例えば、現在のにこスマの特徴である 360 度写真のデバイス毎の共有は Shopify の仕様上できなくなります。また、中古の場合はバッテリー状況がデバイス毎に異なり、にこスマではプロダクト一覧ページでバッテリー量ごとの並び替えも可能ですが、こちらも難しくなります。
にこスマは個々のデバイスの細部まで確認しお客さんに納得してもらった上で商品を買ってほしいという思いを持っており、それを実現するには個別のデバイスの 360 度写真が見える事やバッテリー状況が確認できることは必須でした。そこで、私達はデバイスごとに新しい Product を作り詳細を共有できる形を取りました。
実はこのアプローチは Shopify の管理上はとても大変になります。新品のような Product でまとめるアプローチの場合、在庫数が変わると数字の増減だけを行えばいいですが、デバイスごとに Product を作ると在庫数が変わる毎に新しくプロダクトページを作成・削除する必要があります。
この課題は(にこスマを支える技術で後述する)私達の構築した在庫管理システムにおいて、 Shopify の API を用いて商品管理の自動連携を行うことで解決しました。
にこスマを支える技術
Shopify での工夫
Shopify はアドミン画面が扱いやすくノーコードでも EC サイトの構築が可能なプロダクトです。Shopify のテンプレート言語である Liquid の編集もアドミン画面から変更しそのままデプロイ可能であり、油断すると全てがアドミン画面の中で完結してしまいます。
しかし、以前ブログ にも書いたように、Belong は SDLC を大切にしています。また、Shopify も十分な技術的知識・スキルを持っていれば私達が大切にしているプロセスも表現可能ということがわかりました。
そのため Belong では以下に挙げるようなことを行い、Shopify においてもミスが出づらく、異常検知を行いやすい変更管理を行っています。
変更の git 管理
Shopify のテンプレートやリソースは基本的にアドミン画面上で管理されます。しかし、変更履歴の確認や複数メンバーでの開発は少し難しくなります。そこで、Shopify Theme Kit を用いて Shopify のリソースをローカル環境で扱えるようにし、自社の git リポジトリで管理をしています
開発・検証・本番環境の構築
Shopify でにこスマ が始まった当初は本番環境しかなく、変更は全て本番環境で行われていました。私にとって本番環境での突然の変更はとても恐ろしいものであるため、にこスマでも開発環境と検証環境を用意しました。
Shopify では Shopify Plus というプログラムに入っていると、複数の Shop を構築することができ、プロダクトなどの情報もサポートにお願いして同期が可能なので、そちらの手続きに則り構築しました。
使い方としては一般的なもので、開発中の機能は開発環境、開発が完了しリリース前のテストを行いたい場合は検証環境にデプロイしテスト、検証が完了したものは本番環境にデプロイされユーザーの皆さんから閲覧可能になります。
CircleCI を用いた CI/CD
Shopify の変更は git で管理され、デプロイ環境も複数あるのであれば、欲しくなるのが CI/CD です。Belong では CircleCI を主に利用しており、Shopify 関連もそちらで構築しました。
git push があった場合はビルドが走り、JavaScript 等でテストできるものがあればテストを行います。特定ブランチへのマージが行われたり、tag が作られた場合には Shopify Theme Kit を CircleCI 上から利用して変更を Shopify の実環境へデプロイを行います。
在庫管理
先述の通り、Belong では Shopify での中古デバイス管理に最適化した在庫管理システムを構築しています。このシステムは調達から在庫状況、販売後の配送までを一元管理しており、GCP で GAE や Run 等の PaaS プロダクトを用いています。プログラミング言語は Go です。
Shopify との連携は、在庫管理システムでの操作を起点にする場合は Shopify の Admin API を呼び出して行い、注文情報などにこスマ上のエンドユーザー起点のイベントは Shopify からの Webhook を Pub/Sub を通して受け取ります。
私達は日々取引量の増えるにこスマの在庫を切らさないよう運用する必要がありますが、この在庫管理システムの存在により、リアルタイムな情報管理や外部の検品ツールとの API 自動連携、Shopify との自動連携を行うことが可能にり、業務効率化が図れています。(本ブログでは技術的な部分を主に触れますが、調達チームやシステムを利用するオペレーションチームの貢献も大いにあります。)
これからのにこスマ
にこスマはこれまでの成長によりデザインが改善され使い勝手も良くなっていますが、これからもユーザー体験の向上およびサービスの存在感を増していくための進化を続けます。
現状、 URL の設計は Shopify 規定のものに縛られたり、他のサイトとの連携の部分に制限があります (にこスマはにこスマ通信というメディアサイトやモデルごとの価格比較のサイトも持っています)。また、検索機能や表示速度に関しても改善の余地があります。
そこでヘッドレス化を行うことで UI/UX や SEO の改善を行い、加えて開発者視点でも Shopify スタックへの依存を減らし、一般的なフロントエンドの技術スタックを用いた開発を継続的に行いたいと考えています。
おわりに
本ブログではにこスマについて紹介をし、取り巻く技術的な要素についても解説しました。
Belong ではフロントエンドエンジニアや、Shopify スペシャリストはもちろん、Go エンジニアや GCP スペシャリスト、SRE にも活躍の機会が多くあります。
Belong に少しでも興味を持たれた方は弊社 HP も確認していただけたら幸いです。
