読者です 読者をやめる 読者になる 読者になる

てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

PIXTAにおけるCloudSearchを活用した地域別スコアリング

検索

こんにちは、ピクスタ開発部の星直史です id:watasihasitujidesu です。 idがwatasihasitujidesuですけど、執事ではありません。エンジニアです。

PIXTAはプロ・アマ問わず、国内外のクリエイターから投稿された1,900万点以上の素材を販売しており、1点540円~の低価格と高品質・幅広い品揃えで、広告代理店・デザイン制作会社をはじめさまざまな業種のカスタマーにご利用されています。

1,900万点以上の素材は、1点ずつ複数のタグ情報を保持しており、そのデータはCloudSearchに格納し、高速な検索を実現しています。
また、今年の2月にはタイ語サイトをリリースしました。

今回はこれまで海外展開をしていく中で、CloudSearchを活用した各地域のローカライズに関して、PIXTAではどのようにシステムを対応しているかを書きます。

目次

  • 日本ロケールと欧米ロケールの検索結果比較
  • 地域別のスコアリング
  • まとめ

日本ロケールと欧米ロケールの検索結果比較

PIXTAは海外ローカライズのために、居住地にあった素材の表示の仕方をしています。

f:id:watasihasitujidesu:20160824175929p:plain

上記の画像は人物カテゴリの検索結果です。

  • 左が日本ロケールの人物カテゴリ検索結果
  • 右が欧米向けロケールでの人物カテゴリの検索結果

同じ人物カテゴリでも、その地域に合わせた画像を表示するようにしています。

地域別のスコアリング

基本的な仕組みの概要を説明します。 例えば、東京で検索した場合の素材表示に使うスコアリングは、日本向け素材のものを中心に高めのスコアリングで表示させ、日本から遠い国の表示は加点具合を抑えているようにしている。

スコアリング結果は下記のようなイメージです。 日本素材: 200点 欧米素材: 20点

これを実現するために、素材に対してどこの地域の素材か?というデータを緯度経度で持たせています。

そして、検索したユーザーのIPを元に緯度経度を特定し、2点間の距離を求めます。

素材の地域 検索したユーザーからの距離
素材A 日本 0km
素材B 中国 3,000km
素材C ヨーロッパ 20,000km

上記のような素材が存在する場合、 仮に東京から検索した際のスコアリングはA > B > Cの順に高いスコアリングになります。

具体的には、 CloudSearchのhaversin関数を使用しています。 カラムタイプをlatlonを指定し、そこに緯度経度情報を格納しhaversin関数で2点間の距離を導くクエリを作成、実現しています。

また、距離に応じて線形にスコアリングするのではなく、指数で累乗した数値を活用することで、中心地域周辺の素材がバリエーション豊富に集まるような工夫をしています。

これらのスコアリングは、方法はAWSドキュメント内の、Amazon CloudSearch での式の設定の項で、使用できる関数が記載されているので、 これらを参考にスコアリング式を定義することができます。

また最近繁体字サイトでは、この仕組みを利用して、ユーザーがどの地域の素材を優先して表示させるかを選択できるようにしています。これは、繁体字サイトでは、台湾の素材だけでなく、日本人素材、アジアの素材、欧米素材など、多彩なユーザーの要望に応えるためです。スコアの調整など継続して改善していく必要がありますが、今後、効果を測定して他言語でも提供していきたいと思っています。

まとめ

検索結果のスコアリングは非常に頭を悩ます問題だと思います。 ユーザーの行動やコンテンツの質をうまく数値化し、最適な検索結果を求めるのは終わりのない道だと思います。 今回の記事は海外対応時のスコアリングという、一部分の紹介ではありますが、少しでもみなさんの役にたてれば幸いです。

全社的にES2015のコーディングルールを導入するための工夫

標準化

英語沼から抜け出せる気がしない id:necojackarc です。

現在ピクスタでは、

  • CoffeeScript の開発自体が停滞している
  • CoffeeScript の主要機能は既に ES2015 で採用されている
  • ES2015 or later で導入されていく新しい仕様を活用したい

などを理由とし、CoffeeScript から JavaScript (ES2015 or later) への移行を進めています。

しかし、これまで ES2015 を利用してこなかったので、ES2015 に関するコーディングルールがありませんでした。

それに伴い、ES2015 におけるコーディングルールの策定と適用を行いました。

そこで、今回は ES2015 のコーディングルールを全社的に導入する際に工夫したことについて紹介します。

なんだか似たようなタイトルの記事を3ヶ月くらい前にも書いていますので、気になる方はそちらもご覧ください。

テーマについては前回とほぼ同じく、

  • どのようにしてコーディングルールを順守してもらうか
  • どのようにしてコーディングルールを一斉に適用 / 更新するか

です。

特に複数リポジトリへの設定の一斉適用に関する取り組みについて説明します。

コーディングルールの策定

ピクスタでは Ruby においては、Ruby Style Guide をベースとしたルールを適用しています。

ES2015 においては、

をベースルールとし、必要に応じて変更や追加を行っていくことにしました。

ESLint の導入

コーディングルールを遵守してもらうには、以下の記事でも言及しているように、チェックの自動化が望ましいです。

texta.pixta.jp

先ほど挙げたベースルールは ESLint で簡単に設定可能という理由もあり、ESLint を導入することにしました。

ESLint を利用することで、コーディングルールに準拠しているかを自動でチェックできます。

全社的に導入するための工夫

ピクスタではリポジトリが各サービスごとに分離しており、各リポジトリで設定ファイルを個別に管理するのは煩雑です。

ESLint には、設定をライブラリとして切り出せる機能 (Extensible Shared Config) があります。今回はこれを利用し、ES2015 のコーディングルールを中央管理する npm ライブラリを作成しました。

github.com

こちらのライブラリを利用するには、以下のような ESLint の設定ファイル (.eslintrc) を配置する必要があります。

{
  "env": {
    "browser": true
  },
  "extends": [
    "pixta"
  ],
  "globals": {
    "gon": true,
    "I18n": true
  }
}

ルールの追加や変更を行いたい場合、各リポジトリの .eslintrc は特に変更する必要はありません。eslint-config-pixta の更新のみで済むようになります。

まとめ

ピクスタでは ES2015 のコーディングルールのベースとして、

を採用しました。

コーディングルールに準拠しているかのチェックについては ESLint を導入し、複数リポジトリへの設定の一斉適用に関しては Extensible Shared Config を利用しました。

これにより、

  • コーディングルールに準拠しているかどうかのチェックの自動化
  • Extensible Shared Config による全リポジトリへの一斉適用

が達成できました。