“OSC キャラクター大集合”を支える MODX〜スマホ５００台の負荷に耐えるシステム

作り〜

MODX Japan PR ManagerKei Mikage < kmikage@modxcms-jp.com >

にゃんぱすー！よくいらしたのん。

アジェンダ• OSC キャラクター大集合って？• 投票システムって？• 今回の MODX の使い方

• フロントエンドの作り方• バックエンドの作り方• パフォーマンスチューニング

I’m MODX PR Manager.

御影けい / Kei Mikage

• MODX Japan PR Manager / 広報担当• 普段はしがないインフラエンジニア

• 誰か時間ください…

OSC キャラクター大集合

人大杉…

ニコ生…

はじまりは 1/31…

• 渋谷某所にて ミーティング

• 座敷わらしは 居なかった。

• 色々もめた末、「 OSS で投票システム作ろう」と言ってしまい、自分のタスク増えた。　　　　　　　　　OTL…

要件定義• 各キャラクターに投票• 持ち点制• ５００ユーザくらいアクセスしてくるかも。– 会場３００人– ニコ生２００人

一般的な CMS

一般的な CMS をコンポーネント化すると、次スライドのようになると思います。今回、 MODX の各コンポーネントの『使い方』をカスタマイズしています。具体的には、キャッシュエンジンをほぼ無効化しテンプレートエンジンとして使用、リッチテキストエディタの無効化等。

一般的な CMS

コア

管理画面

キャッシュ（テンプレー

ト）エンジン

RTE

CMS

今回の MODX の使い方

コア

管理画面

キャッシュ（テンプレー

ト）エンジン

外部プログラム

自作コード

CMS

要するに

管理画面付きPHP フレームワー

ク

MODX のカスタマイズ1. リッチテキストエディタの無効化2. CSS を動的生成3. キャラクターをデータベース化4. API を使用して独自のコードを実装

1.RTE の無効化

1.RTE の無効化【メリット】• コードがきれい• 軽い• 自由にコーディングできる【デメリット】• プレビューできない

おまけ： TinyMCE を有効化すると

2.CSS の動的生成• MODX の仕組みを上手く使うことで、

CSS を動的に生成する事ができます。• 今回はスマホ対応の為に

動的生成しましたが、他にも使い方はあると思います。

2.CSS の動的生成専用テンプレートの作成　 [*content*] とだけ書かれたテンプレートを作ることで、書いたコンテンツをそのまま出力する事ができます。

2.CSS の動的生成URL の書き換え（ alias ）MODX のエイリアスは、拡張子が指定された場合はそちらが優先されます。

2.CSS の動的生成チャンク・スニペットの挿入チャンク（値の置き換え）、スニペット（ PHP コードの結果の置き換え）を使用して、必要な内容を CSS に挿入します。

2.CSS の動的生成CSS を CMS で管理する副産物として、Dreamweaver や Chrome で修正した CSS を、FTP 等で毎回アップロードしなくても良いメリットがあります。今回、 FTP を使用しない事により、かなり開発効率がアップしました。

3. キャラクターのデータベース化

• MODX は、特定の階層以下のコンテンツをデータベースのレコードとして扱う事ができます。

• これは、 Ditto というスニペットにより実装されています。

カスタムフィールド

3. キャラクターのデータベース化

• カスタムフィールド（テンプレート変数）を使用することで、ページの項目を自由に増やす事ができます。

• Ditto では、これらカスタムフィールドについてもデータベースとして扱う事ができます。

3.1. Ditto とは？• MODX の機能の 1 つで、コンテンツ（リソー

ス）をデータベースとして使用するができる機能です。

• 一般的な SQL文や Access 等の RDB が理解できていれば、それほど難しくはありません。（記述に方言があるので、そこは…）

3. キャラクター情報のデータベース化

• 標準の入力項目をすべて表示すると管理画面が使いづらくなるので、ManagerManager を使ってカスタマイズします。

4. API を使用して独自のコードを実装

• MODX には、MODX API($modx) という仕組みがあり、PHP のコードから容易に MODX の機能を呼び出す事ができます。

MODX API の例■指定したチャンク (GUI で管理する変数 ) を呼び出す$modx->getChunk('default_comment’)

■指定したページ以下の特定の項目を呼び出す。$modx->getAllChildren ($tpl, 'pub_date', 'ASC', 'id, longtitle, alias');

その他、沢山 API はありますが、ドキュメント整備が追いつかないのが現実です。

その他、使用したライブラリ• TimThumb.phpサムネイル生成。端末ごとに画像サイズを変更する用途で使用。

• MobileDetectスマホ・ PCブラウザ機種判別モジュール。https://code.google.com/p/php-mobile-detect/

全体の構成

MODX

自作コード

timthumb

DataBase

MobileDetect

ブラウザ

MOD API

PDO

Class

次にインフラの話

ツナ缶とか鯖管とか大事。

“なれる！ SE”読もうね !!!

ツナ缶とか室見さんとか とーーーっても大事 !!!

時に…• CMS って色々ありますが、

一般的には車に例えるとわかりやすいです。

じゃあ MODX は？スーパーカブという、とにかく壊れない、とにかく燃費が良い、小回りが効く、そしてとにかく安い、よくわからないバイクです。

THE ・日本のバイク

しかし、カブは小回りが効く代わりに、一回に運べる量には限界があります。

普通これくらいが限度。

では、カブを使って、小回りの効きを残しつつ、

沢山宅配するには？

THE ・新聞配達

これをコンピュータの世界では、これを…

クラスタリング

… といいます。

今回のサーバ構成

DB/NFS Web Web Web

LB

LB – 1 台Web – 8 台

DB/NFS – 1 台管理用 – 1 台

• LB – ロードバランサ– 大量の負荷を複数台のサーバに分散するサー

バ• Web– Webサーバ、 PHP アプリケーションを実行す

る• DB/NFS– データベース (MySQL) 、ファイルサーバ

セッションクラスタリング• 負荷分散した場合、セッション

（ Cookie ）の内容を複数台のサーバで同期する必要があります。

• これをセッションクラスタリングといいます。

• 今回、 PHP のセッションファイルを NFSで共有することで解決しました。

サーバの大量生産• 一部クラウド等では、稼働中のサーバの

ディスクをコピーする事が可能な為、正直問題になりません。

• 一部物理サーバでは、稼働中のディスクを人力でコピーする事により、同等の運用が可能です。

VPS とかどうするのん？

シェル書きました。ConoHa デフォルトの CentOS6.4 に対し、自動で Webサーバのミドルウェアの展開・Config の展開等を行うスクリプトを作成しました。約１００行のスクリプトを作ることにより、

１台あたりの構築時間１０分程度まで短縮。テスト含めサーバ 10 台程作ったため、約 100 分程まで作業時間を短縮。

パフォーマンスチューニングストレステストを行い、パフォーマンスをきちんと計測することで、システムの不調や限界を予め知る事ができます。

今回は、 CAT MEDS さんを使用しました。https://catmdes.com/

当初のパフォーマンス

当初のパフォーマンス

ここから明らかにおかしい !!!

原因： MySQL の maxconnection

• MySQL の標準のコネクション数は 100 。• MAX Connection まで使い切ったところで、

コネクションの取り合いになり、パフォーマンス悪化。

• 最終的に maxconnection=1000 まで拡大。• その他、細かな修正を行う。

最終的なパフォーマンス

同時アクセス数：１００〜１５０くらいエラー率： 0.00%

その他、施したチューニング• MySQL バージョンアップ (5.0→5.6)• MySQL スレッドキャッシュ有効化• NFSサーバの設定デバッグ• WebServer に APC の導入

そんな感じです。

13歳の座敷わらしいいよ。（ OSS 開発に是非！）

おわりに

また OSC来てね !!!

おわり