SWITCH NEWS

ポップソケッツのカスタマイザをアップデートしました

Naoki Kariya
System Engineer

弊社直接のお仕事ではなく、代理店様からご依頼を頂いての制作だったのですが、「ポップソケッツ」のショップサイトとショップ内にあるカスタマイザの制作を過去に行ないました。
そのカスタマイザの改修作業を今回改めてご依頼頂いたので、ご紹介します。

ポップソケッツとは

ポップソケッツとは、落下防止などの目的でスマートフォンに取り付けて使うグリップのアクセサリーです。
こちらのサイトでは、色々なデザインのポップソケッツ・グリップがネットショップで購入可能です。

ポップソケッツ・カスタマイザについて

このサイトの追加機能として、グリップの画像やパーツをカスタマイズしてオリジナルのポップソケッツを作ることが出来るポップソケッツ・カスタマイザというページがあります。
アメリカに本家のサイトがあるのですが、本家を参考にして作ったプログラムで年数が経過して使い勝手の改良が必要な部分を今回手直ししたものです。

オリジナル版のカスタマイザはRuby on Railsというフレームワークで作られていました。
同じ方法で作れば手間はかからなかったのですが、

1、サーバーの兼ね合いでRuby on Railsの動作する環境を構築するのが難しかったこと
2、ショップサイトをWordPressで動作するWelcartを使用することが決まっていたこと

などの理由からWordPressのプラグインの形式で作成することになりました。

Welcartについて

ショップサイトを構築するプログラムとしては、単独で動作するタイプのプログラムであるEC-CUBEやWordPressプラグインのWooCommerceなどもありましたが、WordPressのプラグインの形式で提供されていて、動作の仕組みも分かり易いWelcartを採用することが前提となりました。
Welcartは日本の会社が制作しているプラグインで、こちらのサイトで利用者向けのフォーラムがあり、日本語での情報交換が容易です。
とりあえず、ネットショップを開設したいという方にご提案することの多いプログラムです。

WordPressのプラグインについて

ポップソケッツのカスタマイザはWelcartとは別に導入するWordPressのプラグインの形式で作成をしています。
WordPressと同様にWelcartでも利用可能なアクションフックという仕組みを利用してWordPressへの機能を追加しています。
WordPressやWelcartを直接改造してしまうとそれぞれがバージョンアップした時に更新することが出来なくなってしまいます。
アクションフックを正しく使用すれば利用しているアクションフックが無くならない限りそれぞれのプログラムのバージョンアップに関係なく動作するプログラムを作ることが出来ます。
これは、WordPressでプラグインを作成する際の基本的な考え方なのですが、この方式で作成することでWordPressでの制作に別の形でメリットが発生します。

ショップサイトの制作の時がまさにそうでした。
WordPress及びショップサイトの制作とカスタマイザの制作担当は別々の人間で行ったのですが、私がカスタマイザの制作を行っているときに同時に別の担当がショップサイトの制作を行いました。
通常の方法で制作した場合、一つのサイトを複数人で作成する場合は何らかの工夫が必要になります。Gitなどの仕組みを使用して、ルール調整をした作業方法などが必要かもしれません。
しかし、プラグイン形式であればそれぞれの担当分野の部分のみに作業を集中できます。どうしても他の部分で操作が必要な場合も関数などを提供して、やり取りをすれば最小限の影響に抑えることが出来ます。
また、作業範囲が明確に分かれているため他人の作業中の内容を上書きしてしまうという事故も起こりにくくなります。

WordPressの基本機能だけで構築できるサイトであれば必要ないのですが、最近ご依頼の多い特殊な機能を組み込んだWordPressサイトの構築には必要な作業方法かもしれません。

 

ポップソケッツカスタマイザの使い方

さて、そんな試行錯誤をしながら作ったポップソケッツのカスタマイザですので、私自身の愛着もあります。
動作チェックも兼ねてオリジナルを作ってみました。

スマートフォンでアクセスして、画像を選んでアップロードします。

最近のスマートフォンの写真は高画質なのでアップロードと処理に時間がかかります。
ショップの方に聞いたのですが、印刷の際は画質を優先するために元の画像を使って印刷しているそうです。プログラムでも元のファイルを保存するような処理をしています。
少しお待ちください。

気に入った写真をアップロードして、くり抜く大きさを指定したらアコーディオン部分(伸び縮みする部分)とベース部分(スマートフォンに張り付ける部分)の色を順番に選んでいきます。

思った通りのデザインを選ぶことが出来たら「カートへ」のボタンをクリックして注文の画面へと進んで下さい。

こんな感じで、出来上がってきます。

裏面についている強力な両面テープでスマホに貼り付けます。

こんな感じで完成です。

 

スイッチではこんな、カスタマイズを施したサイトなども承っております。

作ってみたいサイトなどありましたらご相談だけでもお気軽にお問い合わせください。