20150202 Movable Type Seminar

2015 年 2 月 2 日シックス・アパート株式会社

長内　毅志

アクセシブルなウェブサイト構築とCMS の活用

自己紹介

–2011 年～ Movable Type プロダクトマネージャー

–2014 年～ ディベロッパーリレーションマネージャー

エバンジェリスト

–趣味　 ダンス ( ストリート、ジャズ )　 ジョギング ( サブフォー )

英語の勉強 (TOEIC 875, 英検準 1 級 )家族と過ごすこと

アジェンダ

•アクセシブルなウェブサイトを構

築するにあたって、 CMS ができる

こと

•Movable Type の最新情報

WCGA 2.0

JIS X 8341-3:2010Indie UI

WAI-ARiA

WebVTTHTML5 Recommendation

ノウハウについて語るセッションではありません

ノウハウを

今日の話を一言で表すと

• コンテンツとデザインを分離し、蓄積

したコンテンツを時代に沿った形で提

供する

アクセシブル = 情報へのアクセスが可能であること

アクセシビリティの定義

• そのウェブページが、高齢者や障害者

も含めた、誰もが情報を取得・発信で

きる柔軟性に富んでいて、アクセスし

た誰もが同様に情報を共有できる状態

にあること• Wikipedia

CMS のイメージ

CMS ができること

• 更新が楽になる？

• 自動更新を実現する仕組み？

• たしかにそれもある

CMS の仕組み

• コンテンツはデータベースに存在

• テンプレートでデザインを定義

CMS の重要なメリット

•コンテンツとデザインを分離でき

る

つまり

• コンテンツとデザインを分離すること

で、時代に沿った形で情報を出力する

ことができる

ネットは有用な情報の宝庫

「コンテンツ」が重要

例

総務省発表の「情報通信白書」

• 総務省が情報通信の分野における産業

の現況や政策の動向などを取りまとめ

て年次で刊行している文書

• IT 系の統計データに取って、信頼でき

る貴重な情報の宝庫

例

メトロポリタン美術館

•膨大なコレクションをオンライン

上で検索、閲覧可能

•スマートフォン閲覧にも対応

• 積み重なった情報 = 貴重なコンテンツ

• 年月を経るほど、有用性は高まる

問題点

閲覧環境は変化する

2008/10/3 　日経「スマートフォンは売れるのか」

http://www.nikkei.com/article/DGXZZO10913560S0A710C1000000/

参考 : 閲覧環境の変化

• 出典：株式会社 MM 総研　

http://www.m2ri.jp/newsreleases/main.php?id=010120130328500

未来の予想はむずかしい

•10 年前 (2004 年 )–IE のシェア 90% 以上

–ドコモの i モード絶好調

•5 年前 (2009 年 )–2007 年 iPhone 登場、 2008 年に日本発

売

–「スマホは売れるのか ? 」

「レスポンシブデザイン」というキーワード

•5 年前、 10 年前にスマホの普及を

予想できた人はいますか ?•スマホ向けのウェブ技術の予想が

できた人は？

未来は予測可能か

2018 年 デバイス毎のデータ流量の「増加率」

0%

20%

40%

60%

80%

100%

120%

モバイル データ トラフィックの予測（ 2013 ～ 2018 年の CAGR ）

スマートフォン

タブレットPC

ノートPC

M2M( ウェアラブル )

シスコシステムズ「全世界のモバイル データ トラフィックの予測、 2013 ～ 2018 年アップデート」よりhttp://www.cisco.com/web/JP/solution/isp/ipngn/literature/white_paper_c11-520862.html

ウェアラブルコンピュータ

•5 年後のデバイス、

デザインを予想するのは

非常にむずかしい

•アクセス環境はどのように変化

するか分からない

•アクセシビリティの方法論は変

わる

If 　もしも

•ページ数が数千 -数万に及ぶコ

ンテンツ

•最新のデバイス向けにリニュー

アルを行う必要が出たら？

数万ページを手作業でリニューアル？

• 蓄積された情報が多いほど、リニュー

アルコストは比例的に増加する

コンテンツとデザインが分離していれば

• デバイスに応じたテンプレート設定

CMS ができること

•コンテンツとデザインを「分離」

•コンテンツを時代にそった方法で

アクセシブルな形で「提供」する

決して新しい発想ではない

ここまでのまとめ

• コンテンツとデザインを分離すること

で、閲覧環境の変化に備え、情報をア

クセシブルに提供することができる

• そのために、 CMS は有用である

Movable Type の Data API

CMS の基本構造

DB

管理画面からデータ入力テンプレートに従ってデータ出力

API の利用

DB

管理画面、テンプレートを使わずデータの入出力できる

API API

拡張性に富む

•開発言語を問わずデータ出力

•管理画面をつかわずデータ登録

Data API

•REST 形式で MT のデータを入出力–GET https://your-host/your-mt-api.cgi/　　　　　　 v1/sites/{blog_id}/entries

•MT の認証をつかうため、新たに認

証システムをつくる必要がない

•コンテンツの可搬性

ウェブに限らず、あらゆるコンテンツを管理

ウェブサイト

スマホアプリ

Web サービス

Data API の活用例

http://makanai.sixapart.jp

Data API の活用例

Data API の活用例

•COACH UNITED

Movable Type 最新情報

最新バージョン

Movable Type 6.0.6

パフォーマンス改善

5 つの新機能

•Data API•Chart API•非公開日指定

•Google Analytics との連携

•メッセージセンター

Google Analytics の連携

• Google Analytics と連携してアクセスデータを

ダッシュボード上に表示

JSON データで取得可能

•JSON 形式でデータを取得可能•PHP 、 JavaScript などで任意の形で加工、利用

プラグイン

•more-analytics https://github.com/miyanaga/

mt-more-analytics/

• MIT ライセンス

•近日商用版リリース予定

レスポンシブウェブデザインテーマ

•Rainier–ブログ向けテーマ

•Eiger–企業サイト向けテーマ

Apex

•追加テーマ「 Apex 」http://plugins.movabletype.jp/movable_type/apex.html

Rainier と Eiger 、 Apex のライセンス

•MIT ライセンス ( オープンソース )–自由にカスタマイズ、再頒布可能

–ビジネス利用も可能、オープンソース頒布も

カスタマイズ例

http://plugins.movabletype.jp/drk7jp/seo-tuning-eiger.html

5.X の機能も引き継いでいます

• スマホ対応の管理画面

• 定型文機能

• PSGI 対応

• セキュリティ強化機能

–連続した不正アクセスユーザーの ID をロックアウトする

–パスワードポリシーの設定変更

• リスティングフレームワーク

Movable Type のラインアップ

•Movable Type•Movable Type クラウド

•MovableType.net

Movable Type クラウド版

• クラウド環境で MT を提供

• サーバー保守、メンテナンスはシックス・アパートが担当

• 月額 5000円～

サーバー配信機能

•外部サーバーへ html送信

•ステージング構成が簡単

バックアップ機能

•1 日に 1度データをバックアップ

• いつでも復旧可能

2 つの新機能

• IP制限–管理画面、公開サイトへのアクセス制限が可能

• マルチドメイン対応

–S4i 、 S4g 以上、 10 ドメインまで利用可能

MovableType.net

•Web サービス型 CMS•カスタムフィールドが利用可能

•GitHub 上のテーマと連携可能

•低価格 (2500円 / 月～ )

パブリックベータ絶賛公開中

自由度低( ウェブサービス型 )

高(ソフトウェア型 )

手軽さ複雑

容易

MT on AWS

•AWS marketplace で提供

•micro インスタンスは無料 (AWS使用料別 )

MT コミュニティとイベント

•MT蝦夷•MT東北•MT東京•MT なごや

•MT関西•MT広島•MT福岡•MT 長野

MTDDC Meetup TOKYO 2014

MT Live

• 今日明日、 TAM Coworking で開催！

まとめ

• アクセシブルな情報の提供のため、コン

テンツとデザインを分離する

• コンテンツの可搬性を重視し、ネット環

境の変化に対応する

• Movable Type は上記をカバーした、 10年以上の実績があるパブリッシングプ

ラットフォーム