Top Banner
最新情報 シックス・アパート株式会社 金子
84

Movable Type Seminar 2011

Jan 22, 2018

Download

Technology

Six Apart KK
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Movable Type Seminar 2011

最新情報

シックス・アパート株式会社金子 順

Page 2: Movable Type Seminar 2011

自己紹介 : 金子 順2009年より日本および海外での製品開発、リリース、コミュニティーマネジメントを担当twitter: goodpicblog: www.goodpic.com

Page 3: Movable Type Seminar 2011

10歳2001年10月 カルフォルニア生まれ商用版導入は多い月で月1000件以上MTOSは1日数千ダウンロード

Page 4: Movable Type Seminar 2011

東京を中心にグローバルな開発体制6カ国語対応版を世界同時リリース

Page 5: Movable Type Seminar 2011

オープンソースから高機能CMSまで同じシステム、人員、ノウハウでステップアップ

ホスティング

制作提案商用機能

Movable TypeMovable TypeOpen Source Movable Type

Dual License Sub License

オープンソース( GPLライセンス )

商用版 パートナー

ソリューション

Page 6: Movable Type Seminar 2011

ProNet パートナー

340SOHO 60

http://www.sixapart.jp/pronet/

Page 7: Movable Type Seminar 2011

2010-2011年に起きた最大の変化...Web は、もはや一つではない

Page 8: Movable Type Seminar 2011

大量のコンテンツを、素早く、届ける

Page 9: Movable Type Seminar 2011

管理 テンプレート

情報 Webページ

そもそも、CMSとは?情報を管理して、Webに出力する仕組み

Page 10: Movable Type Seminar 2011

MTの標準機能だけでも対応可能

例えば、最近よく見かけるソーシャルボタン

Page 11: Movable Type Seminar 2011

流入経路 : SNS vs Google http://www.briansolis.com/2010/03/optimizing-brands-for-social-search/

(FLURRY 2011年7月予測)

Page 12: Movable Type Seminar 2011

<html xmlns:og="http://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="movie" /><meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />...</head>...

The Open Graph Protocol

Webページからソーシャルグラフにリッチなデータを配信するフォーマット

Page 13: Movable Type Seminar 2011

<$mt:EntryTitle$>

<$mt:EntryBody$><$mt:EntryMore$>

<$mt:EntryBasename$>

<$mt:EntryDate$>

MTタグ = 入力したデータを出力

Page 14: Movable Type Seminar 2011

・・・<meta property="og:title" content="

<$mt:EntryTitle encode_html="1"$>"><meta property="og:url" content="

<$mt:EntryPermalink$>"><meta property="og:description" content="

<$mt:EntryBody words="100"$>">・・・

OGP用のデータをMTタグで指定http://www.movabletype.jp/blog/mtddc2011_special_06.html

Page 15: Movable Type Seminar 2011

OpenGraphLikeプラグインで簡単にhttp://www.goodpic.com/mt/archives2/2011/07/mt-facebook-googleplus-tweet.html

<$mt:LikeButtons$>

Page 16: Movable Type Seminar 2011

サービス http://zenback.jp/プラグイン https://github.com/goodpic/mt-plugin-Zenback

Page 17: Movable Type Seminar 2011

指定日公開

通知プラグイン

更新通知、認証連携プラグインhttp://communities.movabletype.jp/plugins/plugin/web-services/

Page 18: Movable Type Seminar 2011

5.15月25日に正式版公開

Page 19: Movable Type Seminar 2011

数千 記事,ユーザ

大量のコンテンツを

数万 コメント数百 カテゴリ

Page 20: Movable Type Seminar 2011

1人~数人でスピーディーに公開

5.1

Page 21: Movable Type Seminar 2011

Blog A Blog B Blog C

Website 1 Website 2

Blog D Blog F

System

システム+ウェブサイト+ブログの連携強化& テンプレートタグ強化カテゴリ、フォルダ、投稿画面の

並び替え

新しい一覧で、大量のコンテンツをソートやフィルタして操作

Safari, Chrome 対応

Page 22: Movable Type Seminar 2011

大量のコンテンツを一覧でまとめて管理

Page 23: Movable Type Seminar 2011

MT5.0x の一覧画面

Before...

Page 24: Movable Type Seminar 2011

表示オプション

MT5.1 : 様々な情報を表示

Page 25: Movable Type Seminar 2011

クリック毎に昇順/降順でソート

コメントの多いブログ記事は?リストの各カラムで昇順、降順ソートが可能

Page 26: Movable Type Seminar 2011

複数条件を組み合わせてフィルタ

フィルタパネルを開くフィルタ項目を選択

複数フィルタを組み合わせ

Page 27: Movable Type Seminar 2011

ページをまたぐ全件選択とアクション実行

Page 28: Movable Type Seminar 2011

demo

Page 29: Movable Type Seminar 2011

フィルタを保存して再利用

Page 30: Movable Type Seminar 2011

Ajax によるパフォーマンス向上

New in 5.1

Page 31: Movable Type Seminar 2011

新しい一覧の機能は

すべての一覧で利用可能

ウェブサイト、ブログ、ブログ記事、ウェブページ、アイテム、タグ、コメント、トラックバック、ユーザー、コメント、メンバー、フィルター、カスタムフィールド、権限、ロール、禁止IPアドレス、アドレス帳、ログ、グループ(Movable Type Advanced)、グループメンバー(Movable Type Advanced)

Page 32: Movable Type Seminar 2011

カテゴリ(フォルダ)の並び替え

Page 33: Movable Type Seminar 2011

記事数

追加フォーム保存ボタン

編集 | サブカテゴリ追加 | 削除編集画面

カテゴリとフォルダの新しい管理画面

Page 34: Movable Type Seminar 2011

カテゴリをドラッグ&ドロップで並び替え

階層下げる階層上げる

並び替え

別のカテゴリのサブカテゴリに

Page 35: Movable Type Seminar 2011

沢山のカテゴリを一括編集

<$mt:CategoryLabel$>日本語の表示名

<$mt:CategoryBasename$>URLで使う英語名

Page 36: Movable Type Seminar 2011

demo

Page 37: Movable Type Seminar 2011

<mt:SubCategories

sort_by=”label” sort_order=”descend”>

• label• description• basename• created_on• modified_on• user_custom (default)

• ascend• descend

• mt:TopLevelCategories• mt:SubCategories• mt:TopLevelFolders• mt:SubFolders

New in 5.1

Page 38: Movable Type Seminar 2011

<mt:SubCategories sort_by=”label” sort_order=”descend”>

</mt:SubCategories>

<mt:CategoryNext>

<mt:CategoryPrevious>

Page 39: Movable Type Seminar 2011

<mt:Entries> <mt:EntryPrimaryCategory> <$mt:CategoryLabel$> </mt:EntryPrimaryCategory></mt:Entries>

New in 5.1

Page 40: Movable Type Seminar 2011

荒木勇次郎/蒲生トシヒロ/藤本壱/西畑一馬/柳 泰久/伊藤のりゆき/金子順/高橋真弓/天野卓/奥脇知宏[著]  蒲生トシヒロ[編] シックス・アパート株式会社[監修]

! "#$%&'()*&'+,-

発売中 2,940円

Page 41: Movable Type Seminar 2011

EPUB の作成サイト内検索管理画面のカスタマイズ

メールフォーム

CSS3+jQueryでiPhone

CSVデータ

Facebook

FastCGI

バックアップ

Page 43: Movable Type Seminar 2011

4.2924.37 5.06

5.12

MTOSPro

Advanced

6/9 と 6/23 にセキュリティーアップデート

詳しくは:http://www.movabletype.jp/ をご覧下さい

Page 44: Movable Type Seminar 2011

セキュリティ強化期間

現在、MT開発チームは

全ソースコードをレビュー中

Page 45: Movable Type Seminar 2011

セキュリティ強化の原則

✓最も弱い部分を強化✓多層的な防御✓必要最小限の権限

Page 46: Movable Type Seminar 2011

制限エリア

公開エリア

最も弱い部分(管理画面)を防御する

Page 47: Movable Type Seminar 2011

管理画面 コンテンツ

CGIスクリプトの実行禁止

静的ファイルの公開禁止

公開エリアを分離、実行権限を制限

Page 48: Movable Type Seminar 2011

/cgi-bin/*

ネットワーク的にアクセスを遮断

管理画面を別サーバにして、IPアドレスやドメイン名でアクセス制限したり、DMZ内に配置する

詳しくは http://httpd.apache.org/docs/2.2/ja/mod/mod_authz_host.html

Page 49: Movable Type Seminar 2011

管理スクリプトを隠蔽

https://example.com/cgi-bin/mt/mt.cgi

ボットや第三者による、管理画面URLの類推を防ぐ

AdminScript XXXX.cgi環境変数 (mt-config.cgi) で指定

どんな名前でもよい

Page 50: Movable Type Seminar 2011

/cgi-bin/mt.cgi

管理画面にBasic認証をかける

コメント(mt-comments.cgi)やコミュニティ(mt-cp.cgi)にはログインOKだが、管理画面(mt.cgi)へのアクセスは制限

Page 51: Movable Type Seminar 2011

詳しくは http://httpd.apache.org/docs/2.2/ja/howto/auth.html

AuthType BasicAuthName "Restricted Files"AuthUserFile /path/to/.htpasswd<Files mt.cgi> Require valid-user</Files>

.htaccess

<Directory "/home/example/www">

</Directory>

etc....

httpd.conf

Page 52: Movable Type Seminar 2011

Basic認証とMTアカウントは必ず別のID・パスワードを設定

基本的にSSL必須。SSLを利用しないと、

平文でIDとパスワードがネットワーク流れるため、むしろ危険性が増す場合も。

Page 53: Movable Type Seminar 2011

制限エリア

多層的な防御

✓ アクセス制限

✓ 暗号化

不正アクセス

盗聴ハイジャック

Page 54: Movable Type Seminar 2011

SSL通信

管理画面とブラウザの通信をSSL暗号化

SSL通信

ID、パスワード、セッションなどの盗み見をブロック

Page 55: Movable Type Seminar 2011

StaticWebPath /mt-static

環境変数 (mt-config.cgi) の設定

必ず相対パスで指定

管理画面内で画像やCSSなどのファイルがSSLと非SSLで混在しないように

Page 56: Movable Type Seminar 2011

AdminCGIPath https://example.com/cgi-bin/mt/

CGIPath http://example.com/cgi-bin/mt/

環境変数 (mt-config.cgi) の設定

管理画面のURL(SSL)

管理画面以外のスクリプトのURL

ただし、この設定だけで『管理画面がSSL必須』になる訳では無い

Page 57: Movable Type Seminar 2011

AuthType BasicAuthName "Restricted Files"AuthUserFile /path/to/passwords<Files mt.cgi> Require valid-user SSLRequireSSL</Files>

.htaccess

<Directory "/home/example/www">

</Directory>

httpd.conf

案1. SSLでない場合はForbidden

etc....

Page 58: Movable Type Seminar 2011

RewriteEngine OnRewriteCond %{SERVER_PORT} ^80$RewriteRule ^(cgi-bin/mt\.cgi)$

https://%{SERVER_NAME}/$1 [R,L]

.htaccess

<Directory "/home/example/www">

</Directory>

httpd.conf

案2. SSLにリダイレクトする

etc....

実際は一行で

Page 59: Movable Type Seminar 2011

でも、SSLって、、、

お高いんでしょう?

Page 60: Movable Type Seminar 2011

ブランド名や、携帯対応を気にしなければ安い海外SSLでも暗号化の強度は同じ

RapidSSL(GeoTrust, Inc)やGo Daddy SSL などは

$20 - 40 / 年 で取得可能

Page 61: Movable Type Seminar 2011

店長ブログ メニュー 会社情報 コメント

ブログ投稿者

Webサイトデザイナ

ウェブサイト管理者

問い合わせ担当者

✓必要最小限の権限

Page 62: Movable Type Seminar 2011

管理者、デザイナ、運営者など役割(ロール)に応じた最小限の権限を設定

ユーザー ブログ

ロール

Page 63: Movable Type Seminar 2011

ファイルアップロードの制限

AssetFileExtensionsDeniedAssetFileExtensions

4.291 / 4.361 / 5.051 / 5.11以降で利用可能

ホワイトリスト、ブラックリストで制限

Page 64: Movable Type Seminar 2011

プログラミング不要安全なテンプレートタグ

だけで、大規模サイトを構築

Page 65: Movable Type Seminar 2011

<mt:Entries include_blogs=”children”>

website

Blog 1 Blog 2 Blog 3

マルチブログ

Page 66: Movable Type Seminar 2011

<mt:Entries include_blogs=”children”exclude_blogs=”2”>

website

Blog 1 Blog 2 Blog 3

New in 5.1

Page 67: Movable Type Seminar 2011

<mt:Entries include_blogs=”children”exclude_blogs=”2” category=”新着情報”>

website

Blog 1 Blog 2 Blog 3

Page 68: Movable Type Seminar 2011

ウェブサイトのテンプレートをインクルード

<$mt:Include module="X" parent="1"$>

Website

Blog A Blog B Blog C

ブログからウェブサイトのテンプレートをインクルード。注) ウェブサイトにテンプレートがない場合でもグローバルは参照しない。

New in 5.1

Page 69: Movable Type Seminar 2011

半日でできるセキュリティ対策

✓ 常に最新版を使う✓ 管理画面のアクセス制限✓ SSLを利用✓ ユーザ権限を正しく設定✓ ファイルアップロード制限

できることは確実に!

Page 70: Movable Type Seminar 2011

現在開発中

スマートフォン対応

Page 71: Movable Type Seminar 2011

2億ユーザー2011/7 Apple 発表

iPhone, iPad, iPod Touch 世界で

http://www.apple.com/pr/library/2011/07/07Apples-App-Store-Downloads-Top-15-Billion.html

http://googleblog.blogspot.com/2011/05/android-momentum-mobile-and-more-at.html

1億台2011/5 Google 発表

Android アクティベーション済み端末

Page 72: Movable Type Seminar 2011

http://www.greenfieldscommunications.com/rel_2011/IMS_110329eReader.pdf

タブレットと電子書籍リーダーの販売数

940万台

510万台

2010年4Qに (IMS Research 2011年5月予測)

Page 73: Movable Type Seminar 2011

iPad 2011 Q2 は800万台出荷見込み

8.7万台1日換算で約

http://www.businessinsider.com/apple-ipad-sales-2011-6

(WWD Keynote 6月発表)

Page 74: Movable Type Seminar 2011

http://www.forbes.com/sites/elizabethwoyke/2011/06/06/forecasting-2011s-tablet-market-leaders-and-losers/2/

2011年間タブレット販売予測 (BMO Capital Markets 6月予測)

7百万台

3-5百万台

3百万台

2百万台 1.8百万台

1.5百万台 2百万台

iPad以外

3200万台 vs 2000万台iPad

Page 75: Movable Type Seminar 2011

iPad が4420万台という予測も (IHS iSuppli 8月予測)

http://www.isuppli.com/Display-Materials-and-Systems/News/Pages/Media-Tablet-Forecast-Increased-as-Apple%E2%80%99s-Dominance-Grows.aspx

74%

その後の、他社タブレットの不調、HPの撤退などを受け2011年市場シェアの

をiPadが独占、ただし2015年には43.6%と予測。

Page 76: Movable Type Seminar 2011

テンプレートを追加してマルチデバイスに対応

Page 77: Movable Type Seminar 2011

例: モバイル用のテンプレートを追加

PC : www.example.com/xx.htmlMobile : www.example.com/m/xx.html

Page 78: Movable Type Seminar 2011

RewriteEngine onRewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)RewriteCond %{REQUEST_URI} !^/m/RewriteRule ^(.*)\.html$ /m/$1.html [L]

.htaccess

<Directory "/home/example/www">

</Directory>

httpd.conf

例1 .htaccessでスマートフォンを判別モバイル用URLからコンテンツを出力

Page 79: Movable Type Seminar 2011

もっと手軽にモバイル対応するには?

Page 80: Movable Type Seminar 2011

スマートフォンオプションfor Movable Type

スマートフォンから管理• 記事投稿 / 編集• コメント管理

スマートフォン用デザイン• Webサイト制作用のテンプレート

Page 81: Movable Type Seminar 2011

スマートフォンオプションfor Movable Type

10月 リリース予定

5万2,500円(税込)/ 個人無償9月30日までキャンペーン実施中

• 期間中にMT商用ライセンスを購入の方に無償提供。

• 抽選で1名にMacBook Air 13 inch

Page 82: Movable Type Seminar 2011

今後のプラン

5.2セキュリティ強化期間の後に

5.2 要件定義フェーズへ

Page 83: Movable Type Seminar 2011

Safari / Firefox 最新版

Internet Explorer 95.13で対応予定

5.1x各リリースで追従

Chrome 最新版バグ報告があれば対応

Page 84: Movable Type Seminar 2011

要望、バグ報告、随時募集中!http://communities.movabletype.jp/

http://bugs.movabletype.org/