Monthly Archives: 8月 2016

2016-08-30

レコメンドウィジェット「TAXEL by GMO」- ハイブリッドレコメンドについて

logo

こんにちは、CTO室のT.Nです。レコメンドウィジェット「TAXEL by GMO」の開発に携わっています。
今回はTAXEL(タクセル)の裏側の話をちょこっとしたいと思います。

TAXELとは

TAXELとは閲覧ユーザーの興味関心・行動や、コンテンツ特性を解析し、機械学習エンジンにより関連する記事をレコメンド表示するサービスです。
タグを設置するだけでコンテンツを解析し、記事をレコメンド・表示できるものとなっています。

serviceimage

TAXELでのレコメンドの仕組み

TAXELは「ハイブリッドレコメンド」により、レコメンド記事を選定しています。

ここでいう「ハイブリッドレコメンド」とはメディアの特性や記事の状態等によって複数のレコメンド手法を組み合わせ、効果的なレコメンド記事を表示できる機能を指しています。

これはどういった時に有効なのでしょうか?
例として商品をレコメンドする仕組みを考えてみましょう。

商品レコメンドの際によく使われる手法として、「同じ商品を買ったユーザを類似ユーザとみなし、類似ユーザが買った別の商品をレコメンドする」といったものがあります。
一番有名なものだとAmazonのおすすめ商品がありますね。

しかしこの手法だと購入者が少ない商品がレコメンドされない現象、つまり「コールドスタート問題」が生じます。

ふか

ではコールドスタート問題を回避するにはどうすればいいでしょう?

一つ考えられるのは商品名や内容等の静的情報で類似のものを推薦すればよいという考えがあります。
書籍で考えるとあるシリーズの小説をずっと購読している人に対して、そのシリーズの最新刊を推薦するというものです。
このような手法であればたとえその商品の購入者が少なくても有効なレコメンドができそうですね。

nohuka

TAXELでは、このように異なる複数のレコメンド手法を組み合わせ記事の推薦を実施しています。
複数を組み合わせることによってそれぞれのレコメンド手法の弱点を補い、効果を最大化しようとしているわけです。

レコメンド手法紹介

さてこれまではTAXELのサービスの紹介でしたが、ここからはこのようなレコメンドで使える手法のいくつかをサンプルコードを交え紹介します。

例として、上に挙げた「類似ユーザ行動情報を利用したレコメンド」「類似名を利用したレコメンド」を題材にしようかと思います。
※なお以下のコードは全てApache Sparkを利用したものとなっています

レコメンド手法1: 類似ユーザ行動情報を利用したレコメンド

行動情報をもとにしたレコメンド手法は数多く存在します。

有名なものとしてはアソシエーション・ルールという手法があります。
代表的なアルゴリズムとして1994年に提唱されたAprioriアルゴリズムがあります。
アソシエーション分析という形でも色々な場所で利用されており、聞いたことがあるという方もいらっしゃるかと思います。

またこれより新しいものとして協調フィルタリングという手法も存在します。
Apache Sparkでは、このうちALS(ALS-WR)というアルゴリズムが実装されています。
これはNetflix Prizeで利用された手法で、Large-scale Parallel Collaborative Filtering for
the Netflix Prize(2008)
という論文にて提唱されました。
特徴としては従来の協調フィルタリング手法より、処理データ量を減らしたため高速化したところにあります。

ここではアソシエーション・ルールのサンプルコードを紹介します。

レコメンド手法2: 類似名を利用したレコメンド

類似名を探すというのはコンピュータにとっては非常に難しい話です。

例えば「水」と「川」は似ているが、「飛行機」があまり似ていないというのは人間なら誰でも分かることです。
しかしコンピュータにとってこの3つの単語はただの0/1の羅列です。
そこから類似性を発見するのは非常に難しい問題となります。

このような問題に対する手法としてword2vec(word embedding)があります。
この手法を用いると単語はただの文字列から、数十次元から数百次元のベクトル(数値の配列)に変換されます。

ベクトル、つまり数値の配列になると何が嬉しいのでしょう?

その一つとしてベクトルになると類似性が距離で表現できるようになることが挙げられます。
つまりベクトル間の距離が近いものは類似単語となり、遠いものはあまり似ていない単語といったことが表現されます。

これをもっと具体的に考えてみましょう。
ここでは物事を単純にするために2次元のベクトルで表現して、考えたいと思います。

Word2Vecで変換すると、例えば水は(0,1)、川は(1,2)、飛行機は(10000,20000)といったベクトルに変わります。
「水」と「川」は近い数値を持ちますが、飛行機は離れた数字を持っていますね。
これが類似性がベクトルで表現できる、ということです。

またベクトルはただの数値であるため、加減算もクラスタリングもできるようになります。
(e.g. King + Woman = Queen)
加減算ができれば複数単語を持つ名称にも適用できるようになりますね。

ではコードを見てみましょう。
ここではWord2Vecで単語ベクトルを生成した上で「水」の類似単語を表示し、かつK-Meansを用いクラスタリング(グルーピング)した結果です。

まとめ

今回はTAXELでのレコメンド手法の一部を紹介させていただきました。
レコメンド手法やビッグデータに興味のある方、やってみたい!という思いをもった方、俺ならもっとうまく出来る!という方等などいらっしゃれば、こちらから是非ご応募ください!

2016-08-30

YomerumoがAMP対応しました!

こんにちは、
GMOアドマーケティングで主にYomerumoのフロント周りを担当しております、y.aです。

もう2016年の夏が終わるんですね。8月末といえば溜まりに溜まった夏休みの宿題の消化かと思いますが、Yomerumoも溜まりに溜まったタスクを消化してついにAMP対応しました!

AMP-ss

Yomerumoは芸能・エンタメ中心に、有名人の情報やニュースなど様々な情報を豊富に取りそろえているニュースサイトです。

無題
news.merumo.ne.jp

今回はまだAMP未対応の方向けに、
YomerumoがAMP化にあたって行った作業をシェアしたいと思います。

AMPとは

AMPとはGoogleが公表した「Accelerated Mobile Pages(AMP)」というモバイル端末でウェブページを高速で表示するためオープンソースプロジェクトです。

2016年2月末以降、Google検索結果の「トップニュース」の枠にて、カルーセルあるいはテキストリンクの下に「AMP」とラベルがついたリンクを見かけるようになったかと思います。

AMP-ss-2

これがAMPページへのリンクでして、クリックすると分かりますが表示までとても早いです。

AMPページ

これはAMP対応ページがGoogleのクローラーにキャッシュされ、リンクがクリックされた際にはそのキャッシュ済みのコンテンツが表示されるためです。
AMPの情報については他のサイトでも多く見かけると思いますので、ここでは詳細は省いて主にYomerumoでどのようにAMP対応したか流れを説明します。

AMP対応の流れ

基本的にはGoogle Developer Japanにて公表していた「AMP 導入ガイドの日本語版PDF」に沿って進めました。以下大まかな流れです。

1. URLパスの検討
2. AMPのためのテンプレート準備
3. 構造化データ用意
4. アナリティクス埋め込み

1. URLパスの検討

GoogleにAMPページをキャッシュしてもらうには元の記事ページ(正規のバージョン)の<head>タグ内に

が入ってることが必要です。

そのような仕組みのため、導入ガイドにもありますが、URLパスはどのようなものでも大丈夫のようです。

http://www.example.com/myarticle/amp
http://www.example.com/myarticle.amp.html

Yomerumoの場合は新たにAMP用のディレクトリを切る形にしました。

2. AMPのためのテンプレート準備

JavaScriptの削除

基本的には従来の記事ページをベースに進めていきましたが、JavaScriptは使用できないため、使用している箇所(記事本文下にある「Good」「BAD」ボタンなど)は泣く泣くAMPから削除いたしました。

タグの置換

今回最も苦労した点です。
AMPでは<img>タグなど一部のHTMLタグはそのままでは使用できません。通常のHTMLの拡張をしたAMPカスタムタグを使用することになります。
それぞれのタグについてはAMP Projectで公表しているので参照頂ければと思います。

YomerumoではAMP対応した提供元記事はまだ限られるものの、外部フィードから送られてくる記事については様々なHTMLタグがあるため、当初大量のエラーにぶつかってしまいました。
対応としてはAMPタグ置換用のクラスを用意し、ひたすらValidatorとにらめっこしながら正規表現を駆使して作業していったという感じです。

なおAMPのエラーチェックとしてURL末尾に「#development=1」をつけると、ブラウザのConsoleにてエラーログを確認できます。
ただGoogle Chromeを使用されているのであれば、Chromeの拡張機能として「AMP Validator」を入れれば先ほどのハッシュを付けずとも、下の画像のようにエラーログを表示してくれます。

AMP-Validator

3. 構造化データ用意

検索結果の「トップニュース」にAMPリンクを表示させるには、構造化データを正しく実装する必要があります。
Yomerumoの場合は以下のように入れております。

4. Analytics

アナリティクスのタグを埋めることによってどのページにアクセスが来たのか測定できます。
アナリティクスのタグもAMPではカスタムタグに変えないといけません。
ドキュメントにもありますが、新たにプロパティを作成して、既存のレポートと分けるのがよいと思います。
Yomerumoでは現状PV測定に特化して、シンプルにまとめてあります。

その他にもイベント設定も可能ですので詳しくはドキュメントを参照ください。

インデックスされているか確認

AMPはGoogle Search Consoleでページのインデックス状況を確認できます。
反映には少し時間がかかるようでして、Yomerumoの場合AMPページが検索結果「トップニュース」内に表示されるようになっても、Search Consoleに反映するまでには2日ほどかかりました。
(なお「トップニュース」には公開してから3時間足らずで表示確認できました。)

反映されるとインデックスされたページと、エラーが起きているページを表示してくれます。

GS

ちなみにエラーについても同様に、修正してもすぐには反映しませんので、これもまた気長に待ちましょう。

公開してから今のところ

当初AMPについてはJavaScript使用の禁止を始めとして多くの制限があることを知ってたので、デザイン、広告、本サイトの流入減少など様々不安がありました。

ただ公開してからまだ数日ですが、AMPが表示されてから特に本サイトのPVが減少したということはなく、むしろそこからの経由流入もあったりでプラスの面の方を感じています。
おそらくうまくAMPページから本サイトへの導線を作ることが出来れば、AMPも本サイトPV増に貢献してくれるのではないかと思います。

またAMPは<amp-ad>というタグを利用すれば、AMP対応したアドネットワークの広告も入れることが可能です。これによってAMP単体でも収益をもたらせるので、大きくマイナス影響をもたらすことはないのでしょう。

AMP化は一人でもできる?

結論、AMP化は一人でできると思います。
使用タグの制限などルールも多々ありますが、やること自体の難易度は高くありませんでした。
また間違っていたら「ちゃんと」Consoleにエラーが出るので、開発も詰まることはありませんでした。

強いて言えば、私は普段は主にフロント対応なので、その分バックエンド側のコントローラ、タグ置換に時間取ってしまったかもしれません。

ただそれでも一般的なフロントエンジニアであれば問題なく対応できると思います。
何かしらバックエンドを触ることになると思うので、個人的にはコーダーなり、フロントエンジニアが「少し一歩先」に踏み出しくなったときの、ちょうど良い教材になるのではないかなと思います。
(もちろん最後はコードレビュー受けることが大事です!)

以上ざっとですがAMP導入についてでした。

なおYomerumoはAMPに負けず劣らず、高速で記事をサクサク閲覧できるアプリもあります!
iOS
https://itunes.apple.com/jp/app/yomerumo-news-yomerumonyusu/id371083834?mt=8
Android
https://play.google.com/store/apps/details?id=jp.ne.merumo&hl=ja

こちらも何卒よろしくお願いいたします!

2016-08-09

2016/08/04 [社内勉強会]16新卒エンジニア研修の成果発表会

こんにちは。
GMOアドマーケティング、16新卒エンジニアのT.Iです。
先日、約二ヶ月間の新卒エンジニア研修の総括として社内勉強会にて成果発表会を行いました。
本記事では、成果発表会で共有しました社内でのエンジニア研修や、GMOインターネットグループの新卒エンジニア・クリエイター向けの研修「GMOテクノロジーブートキャンプ」について紹介いたします。

Continue reading

2016-08-01

まるちゃん、本配属おめでとう!

世の中はポケモンGOで賑やかになっていますが、皆さんはどう過ごしていますか?
GMOアドマーケティングのクリスです。

以前紹介した、アドパートナーズグループ2016年新卒エンジニアのまるちゃんですが、
2ヶ月のエンジニア研修とOJTを経て無事にGMOアドマーケティングのエンジニアとして本配属ができました。

本配属
おめでとうございます!

本配属のお祝いで、エンジニアの先輩達がいっぱいきてくれました。

今回は、APグループのエンジニア研修に加えGMOグループのテクノロジーブートキャンプ(以下GTB)もあったので、2ヶ月で結構ハードな内容でした。
最初はまるちゃんがちゃんと耐えられるか、途中で折れないか、
ちょっと心配しましたが、ちゃんと乗り越えてくれて本当に良かったです。

しかも、GTB合宿の成果物発表会では、見事にチーム優勝を獲得できて、本当に誇らしいです!

作ったのは「VR HOME」という360°VR ソーシャル閲覧サービスでです。

VR HOME BY A-FLAME
ブラウザ用のバーチャルリアリティフレームワークのA-FRAMEを使用して開発をしました。

本人の頑張りはもちろん、
そして、今回のエンジニア研修、OJTに関わった皆さんの努力の結晶にも言えるとおもいます。
本当にありがとうございました。

本配属後も、バディーとメンターの2人体制で
まるちゃんをサポートしていきます。
バディーとメンター
Dockerモンスターのあだちんさん、RubyのY先生よろしく!

これからもまるちゃんはどんどん成長していきます。

待望の新人 まるちゃん 頑張れ!