“OSCキャラクター大集合”を支えるMODX〜 スマホ５００台の負荷に耐えるシステム作り〜 オープンソースカンファレンス2014 Tokyo/Spring Days1

1. “OSCキャラクター大集合”を支えるMODX
〜スマホ５００台の負荷に耐えるシステム作り〜
MODX Japan PR Manager
Kei Mikage < kmikage@modxcms-jp.com >

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

3. アジェンダ
• OSCキャラクター大集合って？
• 投票システムって？
• 今回のMODXの使い方
• フロントエンドの作り方
• バックエンドの作り方
• パフォーマンスチューニング

4. I’m MODX PR Manager.
御影けい / Kei Mikage
• MODX Japan PR Manager / 広報担当
• 普段はしがないインフラエンジニア
• 誰か時間ください…

5. OSCキャラクター大集合

6. 人大杉…

7. ニコ生…

8. はじまりは1/31…
• 渋谷某所にて
ミーティング
• 座敷わらしは
居なかった。
• 色々もめた末、
「OSSで
投票システム作ろう」
と言ってしまい、
自分のタスク増えた。
OTL…

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

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

11. 一般的なCMS
コア
管理画面
キャッシュ
（テンプレート）
エンジン
RTE
CMS

12. 今回のMODXの使い方
コア
管理画面
キャッシュ
（テンプレート）
エンジン
外部プログラ
ム
自作コード
CMS

13. 要するに
管理画面付き
PHPフレームワーク

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

15. 1.RTEの無効化

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

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

18. 2.CSSの動的生成
• MODXの仕組みを上手く使うことで、
CSSを動的に生成する事ができます。
• 今回はスマホ対応の為に
動的生成しましたが、
他にも使い方はあると思います。

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

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

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

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

23. 3.キャラクターのデータベース化
• MODXは、特定の階層以
下のコンテンツをデータ
ベースのレコードとして
扱う事ができます。
• これは、Dittoというスニ
ペットにより実装されてい
ます。

24. カスタムフィールド

25. 3.キャラクターのデータベース化
• カスタムフィールド（テンプレート変数）を使用するこ
とで、ページの項目を自由に増やす事がで
きます。
• Dittoでは、これらカスタムフィールドについ
てもデータベースとして扱う事ができます。

26. 3.1. Dittoとは？
• MODXの機能の1つで、コンテンツ（リソース）を
データベースとして使用するができる機能で
す。
• 一般的なSQL文やAccess等のRDBが理解でき
ていれば、それほど難しくはありません。
（記述に方言があるので、そこは…）

27. 3.キャラクター情報のデータベース化
• 標準の入力項目をすべ
て表示すると管理画面
が使いづらくなるので、
ManagerManagerを使っ
てカスタマイズします。

28. 4. APIを使用して独自のコードを実装
• MODXには、
MODX API($modx)という仕組みがあり、
PHPのコードから容易にMODXの機能を
呼び出す事ができます。

29. MODX APIの例
■指定したチャンク(GUIで管理する変数)を呼び出す
$modx->getChunk('default_comment’)
■指定したページ以下の特定の項目を呼び出す。
$modx->getAllChildren
($tpl, 'pub_date', 'ASC', 'id, longtitle, alias');
その他、沢山APIはありますが、
ドキュメント整備が追いつかないのが
現実です。

30. その他、使用したライブラリ
• TimThumb.php
サムネイル生成。
端末ごとに画像サイズを変更する用途で使用。
• MobileDetect
スマホ・PCブラウザ機種判別モジュール。
https://code.google.com/p/php-mobile-detect/

31. 全体の構成
MODX
自作コード
timthumb
DataBase
MobileDetect
ブラウザ
MOD API
PDO
Class

32. 次に
インフラの話

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

34. “なれる！SE”読もうね!!!
ツナ缶とか室見さんとか
とーーーっても大事!!!

35. 時に…
• CMSって色々ありますが、
一般的には車に例えるとわかりやすいです。

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

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

38. 普通これくらいが限度。

39. では、カブを使って、
小回りの効きを残しつつ、
沢山宅配するには？

40. THE・新聞配達

41. これをコンピュータの世界では、これを…
クラスタリング
…といいます。

42. 今回のサーバ構成
DB/NFS Web Web Web
LB
LB – 1台
Web – 8台
DB/NFS – 1台
管理用 – 1台

43. • LB – ロードバランサ
– 大量の負荷を複数台のサーバに分散するサー
バ
• Web
– Webサーバ、PHPアプリケーションを実行する
• DB/NFS
– データベース(MySQL)、ファイルサーバ

44. セッションクラスタリング
• 負荷分散した場合、セッション（Cookie）の内
容を複数台のサーバで同期する必要があり
ます。
• これをセッションクラスタリングといいます。
• 今回、PHPのセッションファイルをNFSで共有
することで解決しました。

45. サーバの大量生産
• 一部クラウド等では、稼働中のサーバのディ
スクをコピーする事が可能な為、正直問題に
なりません。
• 一部物理サーバでは、稼働中のディスクを人
力でコピーする事により、同等の運用が可能
です。

46. VPSとか
どうするのん？

47. シェル書きました。
ConoHaデフォルトのCentOS6.4に対し、
自動でWebサーバのミドルウェアの展開・Config
の展開等を行うスクリプトを作成しました。
約１００行のスクリプトを作ることにより、
１台あたりの構築時間１０分程度まで短縮。
テスト含めサーバ10台程作ったため、
約100分程まで作業時間を短縮。

48. パフォーマンスチューニング
ストレステストを行い、パフォーマンスをきちんと
計測することで、システムの不調や限界を予め
知る事ができます。
今回は、CAT MEDSさんを使用しました。
https://catmdes.com/

49. 当初のパフォーマンス

50. 当初のパフォーマンス
ここから明らかにおかしい!!!

51. 原因：MySQLのmaxconnection
• MySQLの標準のコネクション数は100。
• MAX Connection まで使い切ったところで、
コネクションの取り合いになり、パフォーマン
ス悪化。
• 最終的にmaxconnection=1000まで拡大。
• その他、細かな修正を行う。

52. 最終的なパフォーマンス
同時アクセス数：１００〜１５０くらい
エラー率：0.00%

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

54. そんな感じです。

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

56. おわりに
またOSC
来てね!!!

57. おわり