先日の7/20(木)にムームードメインで「ショッピングカート機能」の提供を開始しました。ムームードメインとは2004年1月にローンチされ今年で14年目になるドメイン統合サービスです。ドメインの販売や更新、移管、DNS、メールサービスなどの提供など行っており、今ではドメインお申し込み数362万件を突破しています。Railsでの開発が進められています。Railsで開発しました。StorageやJavaScriptフレームワークのVue.jsを使用して開発しましたのでその一部をご紹介いたします。Storageにデータを保持しています。検討したものとしては以下がありました。Storageに決めた理由カートに入れたときに通信が発生しないSessionやデータベースに保持だとカートへの追加、削除のたびに通信が必要なので、レスポンスやネットワークが不安定な場合を考慮し通信が発生しない方法を取りました。Storageは約5MB〜と非常に大きいです。Cookieはサーバ通信時に毎回HTTPヘッダに付与されて送信されます。Storageを選択しました。Storageはブラウザのウィンドウやタブを閉じるまでしか保持できず、一度画面を離脱して再度訪れたときにデータが消えているのでショッピングカートという機能の性質上使えませんでした。Storageは永続的に保持できるため選択しました。Storageを選択しましたが、永続的にデータを保持できJavaScriptから簡単にアクセスできるという性質上、セキュリティ的に危険のある認証情報や個人情報は絶対に置かないようにしています。Storageに保持したショッピングカート情報ですが、実際に申し込む時にはサーバー側に送信してデータベースに永続化する必要があります。タイミングとしてはログイン後にカート内の情報表示し契約年数など決定したあとに行なっています。Storageに保持している情報を画面に展開してPOSTで送信するでもよいのですがそれだと工夫がないので、JSONのWebAPIを用意して送信する方式を取っています。Token)を使用しています(詳細はこちら)。詳しくは以下のような流れで永続化しています。gemがありましたのでこちらを採用して導入しています。こちらのgemはJWTのトークンの認証はHTTPヘッダのAuthorizationでの認証しか対応していないため、独自にjwt_tokenという名前のCookieで認証できるように拡張しています。拡張しているコードはこのような感じです。request.cookies['jwt_token']endVue.jsの導入トップページのモーダルやショッピングカートの詳細設定ページでJavaScriptフレームワークのVue.jsを使用しました。Applicationのための使用ではなく、jQueryで書くと複雑になりそうな部分にVue.jsを使用しました。Vue.jsを採用した理由としては以下です。社内にドキュメント翻訳者がいる弊社から2名、@inouetakuya、@hypermktがVue.jsの日本語ドキュメントの翻訳を行なっています。わからなかったことはすぐに質問できるという環境は願ってもない環境であり、導入の大きな要因となりました。社内での導入実績が増えてきた先日発表された、ロリポップ!マネージドクラウドのフロントエンド部分はVue.jsのサーバーサイドレンダリングで実装されています。グーペやロリポップ!の一部機能で使用されたりと導入実績が増えてきています。RailsのViewテンプレートに直接Vue.jsのディレクティブ(v-onなどv-で始まるVue.jsで処理することを宣言する属性)を書けるのが非常に導入しやすい部分でありました。「そのidとclass、JavaScriptで使用しているから消さないでください!」などの無駄なコミュニケーションが発生しませんでした。日本語ドキュメントも大変見やすく、今回デザイナー向けにVue.jsの共有は都合上できなかったのですがドキュメントを読んでいただき理解できたようで、デザイナーからVue.jsの動作に関するプルリクエストもでてきたほどでした。build)でwebpackするように準備しています。Sprocketsからは完全に切り離さずwebpackにてビルド済みのjsファイルをassets:precompile対象のディレクトリに置いて動作させるようにしました。buildしてwebpackするタスクを追加しています。前章にてデザイナーとの協業について少し触れましたが、デザイナーの方でも今回ムームードメインを作り変えていくにあたり、Fractalを使用したスタイルガイドを構築して開発を進めました。デザイナーがスタイルガイド上で実装している間にエンジニアはRails側の実装をしたりと、作業のコンフリクトを最小限に抑えて開発することができました。詳しくはデザイナーの方より詳しい記事が出ると思います。今後のやっていき今回のショッピングカート対応ですが、ドメイン契約にあたって必要な選択項目をできるだけ減らしたりお支払い方法を自動で選択し契約までのステップを減らしたりと、ユーザーエクスペリエンス向上も考えられたものになっています。一度に購入できるドメイン数やお支払い方法などにまだ制限があったりと機能として完全でないので現在も鋭意開発継続中です!今後もチームとしてより良い技術を取り入れ、お客様に最高のサービスを提供していきます。エンジニア新卒採用に関する情報をまとめたページも公開中!ツイート書いた人kimromiムームードメインのエンジニア。最近は深みを目指している。