modxで“超”キレッキレのブログ作る秘訣公開します
DESCRIPTION
MODX Evolutionとオブジェクトストレージの組み合わせにより、超高速かつシンプルなブログを自作します。TRANSCRIPT
MODXで
超キレッキレのブログ作る秘訣
公開しますKei Mikage - MODX Japan PR Manager
僕は…
• 怪しいものではございません。
• 餌をあげると懐きます。
• 三食昼寝、ときどき仕事。
MODX Japan PR ManagerKei Mikage
今日やること
今日やること
オブジェクトストレージを使って、超高速な静的配信を行います。
ObjectStorage
Meny viewers.
デモサイト
• MODX Japanのデモサイトで、実際にブログを触ることができます。
http://mng.demo.modx.jp/
オブジェクトストレージ
知ってる人は手を上げて！
＼(^o^)／
オブジェクトストレージとは？
• クラウド上でファイル（オブジェクト）を管理・配信する為のストレージ。
• 例えば、一定のファイルサイズ内であれば、無限にファイルを管理する事が可能。
• 予測しないトラフィックに対処できる。（かもしれない）
お話は戻って
• ブログシステムを自作する
–自分で実装すると、自分でメンテできる。
–自分で実装すると、自分に必要なブログシステムを使うことができる。
–政治的に動的コンテンツが配信できなくても（ｒｙ▲▲▲これ重要▲▲▲
今日は３つのお話をします。
1. MODXでブログを作る
2. オブジェクトストレージに自動デプロイする
3. 静的コンテンツで出来るカスタマイズ
About Kei Mikage.
• 御影けい ( Kei Mikage )
– MODX Japan PR Manager (広報担当)
–本職はインフラエンジニア→最近クラウドエンジニアに転職。
– 4歳のMacBookAirが居ます。
MacBookAir 11inch Late2010
Core2Duo 1.4GHz / 4GB DDR2 / 128GB SSD / USKey
MODXでブログを作る
MODX知ってる人
＼(^o^)／きょーっしゅ！
MODXは汎用CMS
• 割りとフツーのコンテンツを作るのが得意です。
• 「某ホームページビルダー」や、某ブログツールで「静的ページ」と「パーマリンク」しか使ってないサイトからの乗り換えにどうぞ。:)
OSC発の個人サイト！(おんぷ村さん)
http://onpu-tamago.net/
ねりこそ@なび(練馬子育てサイト)
http://nerima-kosodate.net/
管理画面こんなの。
其の一、ブログっぽくする。
其の一、ブログっぽくする。
• サンプルサイトに、ブログっぽいテンプレート（HTML・CSS）をインストールします。
• 今回は、MODxDESIGN templatesより、「Aquatic template」を使います。http://modxd.com/aquatic-template.html
其の弐、もっとブログっぽくする。
• 現在のテンプレートをカスタマイズして、よりブログに近くします。
– Pages
– Tag
– Archive
其の弐、もっとブログっぽくする。
其の弐、もっとブログっぽくする
Dittoとは？
Ditto [ディット]
• MODX標準機能で、ページの内容を加工・横断検索する機能。
• Wayfinderがページの索引を作るのに対し、Dittoではページのサマリを作成する。
• 標準機能だけあって、かなり汎用的に使える。
Dittoとは？
e.x.)
特定のフォルダ以下のコンテンツ（青色部分）を検索・ソートする事ができます。
Contents
Contents
Contents
Folder
Dittoの適用例
• ページタイトルと、一部の本文を出力する。
• テンプレート変数の中から、特定の内容のものを検索する。
其の参、RSSを出力する。
• RSSフィードを出力する事で、ブログの更新をPull配信により配信し、
新着記事の更新等をお知らせする事ができます。
• 今回はブログのフォルダに対し、更新情報を動的に生成します。
やっぱりDittoで頑張る。
• Dittoは標準でRSSフィードを出力できる。
RSSフィードの設定例
RSSを出力するスニペットコール
• [[Ditto〜 - スニペット（PHPコード）を呼び出して、キャッシュする。
• &parents=`16` -ツリーの親になるフォルダのID
• &depth=`2` - 2階層までクロールする
• &hideFolders=`1` -フォルダを無視する
• &format=`rss` -出力形式をrssにする
• &summarize=`20` -本文を20文字で要約する
• &total=`20` -出力する件数を指定する
ここまで頑張った結果
• HTMLコーダーでもブログを自作できる。
• HTMLコーダーでもブログを自作できる。
• HTMLコーダーでもブログを自作できる。
• その他小技
–チャンク・スニペット
• チャンク –文字列のタグ化
• スニペット – PHPコードのタグ化
–チャンクのネスト
• チャンクを入れ子にすることで、更新を楽に！
–テンプレートの親子関係
今回やってるコト
BLOG on MODX（コンテンツ生成）
オブジェクトストレージ（超高速配信）
あれ、
実はMODXって
コンテンツジェネレータ？
ぴんぽーん！
正解！
MODXの３つの顔
• 半動的コンテンツ・マネジメント・システム
• コンテンツジェネレータ
• コンテンツ・マネジメント・フレームワーク（PHPフレームワーク＋管理画面）
MODXが『半動的』な理由
1. DBにアクセスしページを生成し、静的キャッシュします。この際、動的部分はキャッシュしません。
2. 静的キャッシュから動的部分を呼び出す為、DBへのトランザクションやリソースを消耗しません。
最強のキャッシュ 『バイパスモード』
• MODXのサンプルページで、メモリ消費50KB!!!
• 動的コンテンツも強制的に静的キャッシュ。
• 但し、PUTリクエストの際は標準の処理。
MODXの静的書き出し
• 実は、MODXには静的書き出し機能が存在します。
• 強引な独自実装ではなく、標準機能としてコアに実装されています。
MODXの静的書き出し
MODXの静的書き出し
• 書き出しの歳、文字列の置換を１組だけ設定する事が可能です。
• ここでは、生成サーバのURLと公開サーバのURLを置換します。
• もし出来る事であれば、あらかじめ相対パスでサイトを生成する事をお勧めします。（ファイル管理,TinyMCE, Wayfinder, Dittoの設定）
MODXの静的書き出し
• 出力されたHTMLは、/[DocumentRoot]/temp/export以下に出力されます。
• /assets以下・/contents以下はコピーされない
ので、シェルスクリプトなどで適宜マージします。（アップロードスクリプト Ver.2参照）
MODXの思想a Website
プログラミング
コンテンツ投稿
HTMLコーディング
MODXの思想
HTML
動的コンテンツ（スニペット）
静的コンテンツ（チャンク）
（テンプレート・リソース）
MODXの基本は『タグの置換』
[[snippet]]
{{Chunk}}
突然の姪浜梢さん登場！
オブジェクトストレージ入門
• 一言で言うと、『ソフトウェアで作られたフラットなストレージ』
オブジェクトストレージ入門
• 通常、階層（フォルダ・ディレクトリ）を用いて、ファイルを管理します。
• これを『ファイルシステム』と言います。よく言う、「FAT32」「NTFS」といったものです。
• そして、物理的なハードディスクないしSSDを、「ブロックデバイス」と呼びます。
オブジェクトストレージ入門
• オブジェクトストレージでは、Key=Valueの形で、Valueがファイルになります。
• 例えば…「/path/too/filename.ext」がKeyになり、
ファイルの中身（バイナリ）はオブジェクトとして管理されます。
オブジェクト（実体）
もふもふしたい!!!
キー/nekocafe/mike
オブジェクトストレージ入門
REST API
オブジェクトストレージを使うと
• サイトを生成するサーバを止めておく事が出来る。（XAMMP等で構築してもOK！）
• TV露出やTw炎上でも耐えられる。（クレジットカードの課金を除く）
• 高い可用性のストレージを安価に使うことができる。
今回の環境
• 主なサービスとして
– AmazonS3(AmazonWebServices)
– blob Storage(MicrosoftAzure)
–オブジェクトストレージ(ConoHa)
– さくらのBASE Storage(さくらインターネット・S3互換)
• 今回は例として、AmazonS3を使用します。
AWS CLIをインストールする。(1/2)
• CentOS6.xの黒い画面で、以下をタイプします。
– % sudo rpm -ivhhttp://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
– % sudo yum install python-pip -y
– % sudo pip install awscli• ※他OSの場合は適宜読み替えてください。
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]:
ね、カンタンでしょ？
アップロードスクリプトVer.1
• /var/www/html/temp/export/以下のファイルを、S3上に無条件に展開
• #!/bin/shaws s3 sync /var/www/html/temp/export/*
s3://buket/
アップロードスクリプトVer.2
#!/bin/sh
TMP="/tmp/sync.tmp"
mkdir -p /var/www/html/temp/export/assets/templatesmkdir -p /var/www/html/temp/export/contentmkdir -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
最近のMODX事情
MODX、ついに9歳
2005.10.28 MODX 0.9.0 Release
2015.10.28(水)
何かやっちゃう？
元々、MODXは「Etomite」だった。
Etomiteの経緯
• 最初は「SimpleCMS」という名前だった。
• SimpleCMS → Phese → Etomite
• Dreameaverの代替としての、シンプルなCMS。（当時は十徳ナイフのようなCMSが多かった）
• 2004.04.29 GPL化、公開開始。
• Version0.6の頃には、日本語ファイルもつくられる。
EtomiteからMODXの経緯
• 2005年、Etomiteを開発していたアレックスは、コミュニティの動向やビジネス化の提案などがあり、モチベーションを失う。
• 丁度その頃、DocVar(今でいうテンプレート変数)がリリースされる。
• EtomiteへのコアハックはMODと呼ばれ、開発者が勝手に公開していた。
• これらバラバラに公開されていたMODを集約するよう、Ryanが動きかける。
2004.11.26Etomite MOD-x1(勝手版)リリース
Ryanってこういうひと
• MODX LLC代表
• テキサス州ダラス在住のふつーのお父さん。
日本のMODXは？
日本のMODXは？
• 主に5人の活動により、日本のコミュニティは支えられています。
–グローバルコミッター – １名
–デザイナー – １名
–サーバ管理者 – 2名
–アンバサダー – 3名
–広報・雑務担当 – 1匹
日本のMODXは？
• 主に5人の活動により、日本のコミュニティは支えられています。
–システムインテグレータ – 1名
–ウェブ製作 – 2名
– クラウドエンジニア – 1名
–銭湯の番台 – 1名
おわりに
みんなMODXをもっと使ってね！
使ったら事例報告してくれると嬉しいな！^^v
おわり
スーパー
質問タイム
超スーパー
質問タイム
ご清聴ありがとうございました。
