アークウェブのブログ: スマートフォンアーカイブ

スマートフォン

2014年6月17日

Movable Type導入事例：シックスアパート様サイトで「COACH UNITED」をご紹介いただきました

投稿者 ARK-Web

こんにちは、ディレクターの八木です。
連日のFIFA ワールドカップ観戦で寝不足になっていませんか？

先日、MovableTypeの開発元であるシックスアパートさんのサイトで、「COACH UNITED が Movable Type for AWS を使う理由」というタイトルで、弊社がマークアップとMT実装をお手伝いさせていただいたCOACH UNITED（運営:e-3様）のサイトを事例として紹介していただきました。

COACH UNITED が Movable Type for AWS を使う理由
http://www.sixapart.jp/business/coach_united.html

すべてのフットボールコーチのためのWEBメディア「COACH UNITED」
http://coachunited.jp/

上記記事とかぶる内容もありますが、技術面のポイントを改めてご説明します。

Movable Type for AWSを採用

Movable Type 6 for AWS は、Movable Type 6 がインストールされた、OS込みの Amazon Machine Image（AMI）です。

Movable Type for AWS
http://www.sixapart.jp/movabletype/aws/

サーバーが nginx + PSGI で、環境構築もAMIベースで手早くできる点に魅力を感じました。

さらに、将来アクセスが集中した場合でも、Amazon S3やCloudFrontの利用などサーバ構成の柔軟な拡張と共に、MTのスタティックパブリッシングの強みを生かして快適な閲覧を担保できると考え、このプランを提案しました。

工夫した点：2種類のタグ

各記事には、一つまたは複数の"キーワード"がふられ、ユーザはキーワードつながりで関連記事を読み進められるようになっています。

実はこのキーワード、見た目ではわからないのですが内部的にはメインとサブの2種類あります。メインキーワードはサイト横断で使われ、ジェネラルな概念を扱うキーワードです。つけられる記事数も多いです。それに対して、もう少し記事固有の内容に即したサブキーワードが存在します。

メインキーワードと、サブではアクセス頻度が違うと予想されたので、キーワード一覧ページの出し方を変えています。

メインキーワードの一覧ページ: カテゴリアーカイブを使ってスタティックに生成しています。メインキーワードは、表向きは"キーワード"ですが、内部的にはカテゴリとしてデータを持たせているのです。

無限スクロールの2ページ目以降も, スタティックに吐いたjsonを処理しているので表示が速いです。

例: http://coachunited.jp/keywords/communication.html

サブキーワードの一覧ページ: サブキーワードはいわゆる「タグ」でデータを持っており、一覧ページは「タグ検索」結果ページとして動的に出力しています。

例: http://coachunited.jp/search.html?tag=ＧＫ

工夫した点: 無限スクロール

TOPページ、ジャンル別の一覧、キーワード一覧系のページは無限スクロールで次々と記事を見られるようにしています。"続きを見る"以降は jsonを処理して表示しています。このjsonの生成についても、アクセス頻度その他の条件から、スタティック生成, DATA API(動的）, MT Searchと3種類を使い分けています。

実を言うと、開発当初は全てDATA APIで処理することを考えていました。しかし現段階ではDATA APIは複数ブログを横断した結果を返せない制約があったため、結果的に3種類使い分けの形で落ち着きました。

以上が主な工夫点です。

アークウェブにとってもMT6 for AWSやDATA APIの初めての案件でしたが、デザインを頂戴してから1ヶ月という短期間で構築することができ、貴重な経験を積むことができたと思っています。

アークウェブでは、サイトの目的や運用要件に最適化したCMS構築をご提案しています。本記事を読んでご興味お持ちになりましたら、どうぞお気軽にご相談ください。

投稿者 ARK-Web : 11:30