Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MODXで“超”キレッキレのブログ作る秘訣公開します

4,432 views

Published on

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

Published in: Internet

MODXで“超”キレッキレのブログ作る秘訣公開します

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

×