MODX Evolutionとオブジェクトストレージの組み合わせにより、超高速かつシンプルなブログを自作します。

1. MODXで
超キレッキレのブログ
作る秘訣
公開します
Kei Mikage - MODX Japan PR Manager

2. 僕は…
• 怪しいものではございません。
• 餌をあげると懐きます。
• 三食昼寝、ときどき仕事。
MODX Japan PR Manager
Kei Mikage

3. 今日やること

4. 今日やること
オブジェクトストレージを使って、
超高速な静的配信を行います。
Object
Storage
Meny viewers.

5. デモサイト
• MODX Japanのデモサイトで、
実際にブログを触ることができます。
http://mng.demo.modx.jp/

6. オブジェクトストレージ
知ってる人は手を上げて！
＼(^o^)／

7. オブジェクトストレージとは？
• クラウド上でファイル（オブジェクト）を
管理・配信する為のストレージ。
• 例えば、一定のファイルサイズ内であれば、
無限にファイルを管理する事が可能。
• 予測しないトラフィックに対処できる。
（かもしれない）

8. お話は戻って
• ブログシステムを自作する
– 自分で実装すると、自分でメンテできる。
– 自分で実装すると、
自分に必要なブログシステムを使うことができる。
– 政治的に動的コンテンツが配信できなくても（ｒｙ
▲▲▲これ重要▲▲▲

9. 今日は３つのお話をします。
1. MODXでブログを作る
2. オブジェクトストレージに自動デプロイする
3. 静的コンテンツで出来るカスタマイズ

10. About Kei Mikage.
• 御影けい( Kei Mikage )
– MODX Japan PR Manager (広報担当)
– 本職はインフラエンジニア
→最近クラウドエンジニアに転職。
– 4歳のMacBookAirが居ます。

11. MacBookAir 11inch Late2010
Core2Duo 1.4GHz / 4GB DDR2 / 128GB SSD / USKey

12. MODXでブログを作る
MODX知ってる人
＼(^o^)／きょーっしゅ！

13. MODXは汎用CMS
• 割りとフツーのコンテンツを作るのが得意で
す。
• 「某ホームページビルダー」や、
某ブログツールで
「静的ページ」と「パーマリンク」しか
使ってないサイトからの乗り換えにどうぞ。:)

14. OSC発の個人サイト！(おんぷ村さん)
http://onpu-tamago.net/

15. ねりこそ@なび(練馬子育てサイト)
http://nerima-kosodate.net/

16. 管理画面こんなの。

17. 其の一、ブログっぽくする。

18. 其の一、ブログっぽくする。
• サンプルサイトに、ブログっぽいテンプレート
（HTML・CSS）をインストールします。
• 今回は、MODxDESIGN templatesより、
「Aquatic template」を使います。
http://modxd.com/aquatic-template.html

19. 其の弐、もっとブログっぽくする。
• 現在のテンプレートをカスタマイズして、
よりブログに近くします。
– Pages
– Tag
– Archive

20. 其の弐、もっとブログっぽくする。

21. 其の弐、もっとブログっぽくする

22. Dittoとは？
Ditto [ディット]
• MODX標準機能で、
ページの内容を加工・横断検索する機能。
• Wayfinderがページの索引を作るのに対し、
Dittoではページのサマリを作成する。
• 標準機能だけあって、かなり汎用的に使える。

23. Dittoとは？
e.x.)
特定のフォルダ以下の
コンテンツ（青色部分）を
検索・ソートする事が
できます。
Folder
Contents
Contents
Contents

24. Dittoの適用例
• ページタイトルと、一部の本文を出力する。
• テンプレート変数の中から、
特定の内容のものを検索する。

25. 其の参、RSSを出力する。
• RSSフィードを出力する事で、
ブログの更新をPull配信により配信し、
新着記事の更新等をお知らせする事ができ
ます。
• 今回はブログのフォルダに対し、
更新情報を動的に生成します。

26. やっぱりDittoで頑張る。
• Dittoは標準でRSSフィードを出力できる。

27. RSSフィードの設定例

28. RSSを出力するスニペットコール
• [[Ditto〜- スニペット（PHPコード）を呼び出して、キャッシュする。
• &parents=`16` - ツリーの親になるフォルダのID
• &depth=`2` - 2階層までクロールする
• &hideFolders=`1` - フォルダを無視する
• &format=`rss` - 出力形式をrssにする
• &summarize=`20` - 本文を20文字で要約する
• &total=`20` - 出力する件数を指定する

29. ここまで頑張った結果
• HTMLコーダーでもブログを自作できる。
• HTMLコーダーでもブログを自作できる。
• HTMLコーダーでもブログを自作できる。

30. • その他小技
– チャンク・スニペット
• チャンク– 文字列のタグ化
• スニペット– PHPコードのタグ化
– チャンクのネスト
• チャンクを入れ子にすることで、更新を楽に！
– テンプレートの親子関係

31. 今回やってるコト
BLOG on MODX
（コンテンツ生成）
オブジェクトストレージ
（超高速配信）

32. あれ、

33. 実は
MODXって

34. コンテンツ
ジェネレータ？

35. ぴんぽーん！
正解！

36. MODXの３つの顔
• 半動的コンテンツ・マネジメント・システム
• コンテンツジェネレータ
• コンテンツ・マネジメント・フレームワーク
（PHPフレームワーク＋管理画面）

37. MODXが『半動的』な理由
1. DBにアクセスしページを生成し、静的キャッシュします。
この際、動的部分はキャッシュしません。
2. 静的キャッシュから動的部分を呼び出す為、
DBへのトランザクションやリソースを消耗しません。

38. 最強のキャッシュ『バイパスモード』
• MODXのサンプルページで、
メモリ消費50KB!!!
• 動的コンテンツも強制的に静的キャッシュ。
• 但し、PUTリクエストの際は標準の処理。

39. MODXの静的書き出し
• 実は、MODXには
静的書き出し機能が存在します。
• 強引な独自実装ではなく、
標準機能としてコアに実装されています。

40. MODXの静的書き出し

41. MODXの静的書き出し
• 書き出しの歳、文字列の置換を
１組だけ設定する事が可能です。
• ここでは、
生成サーバのURLと公開サーバのURLを
置換します。
• もし出来る事であれば、あらかじめ相対パス
でサイトを生成する事をお勧めします。
（ファイル管理,TinyMCE, Wayfinder, Dittoの設定）

42. MODXの静的書き出し
• 出力されたHTMLは、
/[DocumentRoot]/temp/export以下に
出力されます。
• /assets以下・/contents以下はコピーされない
ので、シェルスクリプトなどで適宜マージしま
す。
（アップロードスクリプトVer.2参照）

43. MODXの思想
a Website
プログラミング
HTMLコーディング
コンテンツ投稿

44. MODXの思想
HTML
動的コンテンツ（スニペット）
静的コンテンツ（チャンク）
[[snippet]]
{{Chunk}}
（テンプレート・リソース）
MODXの基本は『タグの置換』

45. 突然の姪浜梢さん登場！

46. オブジェクトストレージ入門
• 一言で言うと、
『ソフトウェアで作られたフラットなストレージ』

47. オブジェクトストレージ入門
• 通常、階層（フォルダ・ディレクトリ）を用いて、
ファイルを管理します。
• これを『ファイルシステム』と言います。
よく言う、「FAT32」「NTFS」といったものです。
• そして、物理的なハードディスクないしSSDを、
「ブロックデバイス」と呼びます。

48. オブジェクトストレージ入門
• オブジェクトストレージでは、
Key=Valueの形で、Valueがファイルになります。
• 例えば…
「/path/too/filename.ext」がKeyになり、
ファイルの中身（バイナリ）はオブジェクトとし
て管理されます。

49. オブジェクトストレージ入門
REST API
オブジェクト（実体）
もふもふ
したい!!!
キー
/nekocafe/mike

50. オブジェクトストレージを使うと
• サイトを生成するサーバを止めておく事が出
来る。
（XAMMP等で構築してもOK！）
• TV露出やTw炎上でも耐えられる。
（クレジットカードの課金を除く）
• 高い可用性のストレージを
安価に使うことができる。

51. 今回の環境
• 主なサービスとして
– AmazonS3(AmazonWebServices)
– blob Storage(MicrosoftAzure)
– オブジェクトストレージ(ConoHa)
– さくらのBASE Storage(さくらインターネット・S3互換)
• 今回は例として、AmazonS3を使用します。

52. AWS CLIをインストールする。(1/2)
• CentOS6.xの黒い画面で、以下をタイプします。
– % sudo rpm -ivh
http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/ep
el-release-6-8.noarch.rpm
– % sudo yum install python-pip -y
– % sudo pip install awscli
• ※他OSの場合は適宜読み替えてください。

53. AWS CLIをインストールする。(2/2)
$ sudo aws configure
AWS Access Key ID [None]: xxxxxxxxxxxxxxxxxxxx
AWS Secret Access Key [None]:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Default region name [None]: ap-northeast-1
Default output format [None]:

54. ね、カンタンでしょ？

55. アップロードスクリプトVer.1
• /var/www/html/temp/export/以下のファイル
を、S3上に無条件に展開
• #!/bin/sh
aws s3 sync /var/www/html/temp/export/*
s3://buket/

56. アップロードスクリプトVer.2
#!/bin/sh
TMP="/tmp/sync.tmp"
mkdir -p /var/www/html/temp/export/assets/templates
mkdir -p /var/www/html/temp/export/content
mkdir -p /var/www/html/temp/export/assets/plugins/sh/
/usr/bin/rsync -avq /var/www/html/assets/templates/* /var/www/html/temp/export/assets/templates/
/usr/bin/rsync -avq /var/www/html/content/* /var/www/html/temp/export/content/
/usr/bin/rsync -avq /var/www/html/assets/plugins/sh/* /var/www/html/temp/export/assets/plugins/sh/
cd /var/www/html/temp/export
NEW_HASH=`tar cf - ./* | sha1sum | awk -F" " '{print $1}'`
OLD_HASH=`cat $TMP`
if [ "$OLD_HASH" != "$NEW_HASH" ]; then
/usr/bin/aws s3 sync /var/www/html/temp/export/ s3://mikalab.info echo $NEW_HASH > $TMP
fi

57. 最近のMODX事情

58. MODX、ついに9歳
2005.10.28 MODX 0.9.0 Release

59. 2015.10.28(水)
何かやっちゃう？

60. 元々、MODXは「Etomite」だった。

61. Etomiteの経緯
• 最初は「SimpleCMS」という名前だった。
• SimpleCMS → Phese → Etomite
• Dreameaverの代替としての、シンプルなCMS。
（当時は十徳ナイフのようなCMSが多かった）
• 2004.04.29 GPL化、公開開始。
• Version0.6の頃には、
日本語ファイルもつくられる。

62. EtomiteからMODXの経緯
• 2005年、Etomiteを開発していたアレックスは、
コミュニティの動向やビジネス化の提案などがあり、
モチベーションを失う。
• 丁度その頃、DocVar(今でいうテンプレート変数)がリリースされ
る。
• EtomiteへのコアハックはMODと呼ばれ、
開発者が勝手に公開していた。
• これらバラバラに公開されていたMODを
集約するよう、Ryanが動きかける。

63. 2004.11.26
Etomite MOD-x1(勝手版) リリース

64. Ryanってこういうひと
• MODX LLC代表
• テキサス州ダラス在住のふつーのお父さん。

65. 日本のMODXは？

66. 日本のMODXは？
• 主に5人の活動により、
日本のコミュニティは支えられています。
– グローバルコミッター– １名
– デザイナー– １名
– サーバ管理者– 2名
– アンバサダー– 3名
– 広報・雑務担当– 1匹

67. 日本のMODXは？
• 主に5人の活動により、
日本のコミュニティは支えられています。
– システムインテグレータ– 1名
– ウェブ製作– 2名
– クラウドエンジニア– 1名
– 銭湯の番台– 1名

68. おわりに
みんなMODXをもっと使ってね！
使ったら事例報告してくれると
嬉しいな！^^v

69. おわり

70. スーパー
質問タイム

71. 超スーパー
質問タイム

72. ご清聴ありがとうございました。