オールアバウトTech Blog

株式会社オールアバウトのエンジニアブログです。

citrusのシステム構成

citrus Infinite Scroll クラウド

オールアバウトの@takkyです。

2016年2月でAll Aboutはメディア開設15周年となりました。
これだけ長い期間運営されているWebメディアは日本では少ないと思います。
そんな、All Aboutを支えるシステムの裏側の技術を世に出していきたいと思い Tech Blogを開始することになりました。

今回のテーマは、All Aboutではなく2016年にオープンした新メディアである citrusについてシステム面や使用している技術などについて紹介したいと思います。

citrusのビジネス的な詳しい説明はプレスリリースや弊社の役員ブログをご覧ください

f:id:allabout-techblog:20160518102842p:plain

citrusの特徴的なところ

技術的な面も含めてcitrusというメディアの特徴的なところは以下になります。

  • レスポンシブデザイン
  • 無限スクロール
  • 提携メディアパートナーを含めた独自集計
  • オーサーやメディアパートナーの記事の取り込み・配信
  • フルスクラッチでCMS開発

上記に挙げたこと以外も含め以下では技術面に絞って紹介したいと思います。

使用言語

サーバサイドの言語としてPHPを使っています。また、フレームワークとしてLaravel 5.1を使用しています。
フロントエンドではjs,jQueryを使っている程度で特に特別に何かを使っているということはありません。

インフラ面

最近ではオンプレよりクラウドにサーバを置くことが当たり前の時代になってきています。
citrusでもサーバは全てクラウドサービスを使用しておりWebサーバ、DBサーバ,ファイルストレージ(S3)、ELB等をクラウドに置いて使っています。(基本的にAWSを使っています)
Webサーバもシステム単位で切り分けており、一般ユーザが記事を閲覧するフロントのWebサーバと、記事の入稿作業を行うCMSのサーバ、batchサーバ、PV等を閲覧するInsiteサーバが分かれています。 そのため、各Webサーバがダウンしても他のシステムには影響がないようにしています。

フルスクラッチCMS

メディアを作る際にはCMSが必要です。
手軽に作るのであればWordPress等の汎用CMSを使うのが早く構築できていいのですが、
長くメディアを運用していくことを考えると拡張性やメンテナンス性の観点からフルスクラッチでCMSを作っています。 今回CMSはフレームワークとしてLaravelを使い、デザインはAce - Responsive Admin Templateを使用しています。
このテンプレートを使用することで、デザインにそれほど詳しくないエンジニアでも形になっているCMSを作れるという点から使用しています。 また、フロント側で機能追加があった際にCMS側がすぐ対応できることがフルスクラッチでCMSを作るメリットになっています。

Insite

PV等の集計結果を見る際に一般的なシステムだとGoogle Analyticsなどを使用することが一般的だと思います。　　 今回のcitrusでは、メディアパートナーに記事を配信・記事を取り込みを行うため、メディアパートナーの記事集計を取るために自社集計を行っていました。
その集計結果を閲覧するためのサイトも作成しています。(現行は社内のみ開放)
現在は、集計した数字のみの表示とCSVダウンロード機能しかありませんが、
後々グラフ化など便利に使えるツールにしていきたいですね。

無限スクロール

citrusで一番特徴的なのは無限スクロールです。
リストでのページングや記事間の移動をスクロールのみで行うことができ、レスポンシブデザインのため スマートフォンから見ると、あたかもネイティブアプリを使用しているような動作が可能です。
また、この無限スクロールはGoogleが推奨しているSEOフレンドリーに作成しています。
無限スクロールの実装は、INFINITE AJAX SCROLLというライブラリを使用しています。

INFINITE AJAX SCROLL

INFINITE AJAX SCROLLはSEOフレンドリーな無限スクロールを実装できるライブラリです。
無限スクロールのライブラリは多々ありますが、

  • ページ切り替え時にURLが変更される(スクロールダウン/スクロールアップともに)
  • SEOフレンドリー
  • Documentがそこそこ揃ってる
  • optionやeventsである程度カスタマイズできる

という利点があるためこのライブラリの導入をしています。

無限スクロールを使う上で気をつけること

無限スクロールを使う上でスマートフォンアプリのようなUI,UXが期待できますが使用する際には以下のことに気をつける必要があります。

  • 次のページのリクエストがajaxで行われるためajax非対応なものは使用できません
    例えば広告タグや各種動画プレイヤーなど非対応なものは使用することができなくなるためメディアとしての制限がでてきてしまいます。

  • SNSボタンは無限スクロールで切り替わり時にリセットする必要があります
    特にFaceBookは FB.XFBML.parse()などでリセットする必要があります
    Twitterは昔カウントが取れてた時はcount.jsが対応していなかったため、使用することができませんでした。 現在は問題ありません。 また、はてなブックマークボタンもカウント数のリセットなどが公式では用意されていません。

  • 各種集計周りの調整が難しい INFINITY AJAX SCROLLと集計のjsの発火の順番によってうまく集計が取れない可能性があります。
    また、そもそも対応していない集計タグがある可能性があります

と主にjs周りで使えない要素が出てきたりするので後々のエンハンス等も考えて導入を決定する必要があります。 とはいえ、アプリを使わなくてもアプリのようなUI,UXが得られるが大きなメリットになるので、導入を検討してみるというのはいかがでしょうか。

まとめ

  • citrusはサーバをクラウドに置いたり、Laravelを使ったりとオールアバウトの中では割とモダンな作り方をしています。
  • フルスクラッチでCMSを作ることで編集部の要望に素早く答えやすくなっています。
  • 無限スクロールは使いどころが肝心で、うまく使えばアプリのようなUXが期待できますが、使用可能な広告や動画タグなどの制限が生まれてしまいます。