Download - MTDDC Meetup FUKUSHIM 2010プレゼン資料

僕が Movable Type を使うようになった理由

MTDDC Meetup FUKUSHIMA 2010 2010 年 11 月 6 日土曜日

蒲生トシヒロ

2

本日の Agenda1. 自己紹介

2. すべてはユーザーのために

3. インターネットの進化と共に歩む、Movable Type

4. Movable Type 5.0 VS WordPress 3.0

5. その他お勧め CMS

6. HTML5 への対応

7. 僕が Movable Type を使う理由

8. 明日の主役はあなた

3

自己紹介蒲生トシヒロ（ Dakiny ）岐阜県岐阜市生まれ職種： Web プロデューサー、プランナー 15 年間広告代理店に勤務、でディレクター、プランナーを

行い、 1995 年マルチメディア事業部を立ち上げインターネットの世界に入る。 1999 年独立。 2001 年より有限会社IT プロフェッショナルを設立、主に Web 制作を営み今日に至る。最近は書籍の企画編集に力を入れてます。

MT 歴は 3.15 から。以来 Movable Type の布教活動になることを公私を問わずやってます。

4

関わった書籍 Movable Type 5

実践テクニック（共著）監修：シックス・アパート株式会社ソフトバンククリエイティブ2010 年 3 月 26 日発売

インターネット &Web の必須常識 100 （共著）ワークスコーポレーション2009 年 10 月 20 日発売

Movable Type プロフェッショナル・スタイルMT4.1 対応（共著）毎日コミュニケーションズ2008 年 4 月 8 日発売

5

ブログ＆ SNS 世界中の 1% の人々へ

http://www.dakiny.com

Twitterhttp://twitter.com/Dakiny※ DM か @Dakiny でリプライいただけでばもれなくフォローします。

Facebookhttp://www.facebook.com/toshihiro.gamo

[email protected]

6

最近関わったサイト（公開可のサイトのみ）

Lifebloghttp://lifeblog.hippos.jp/

SBC 株式会社http://sbc.hippos.jp/

YOKOSUKA FOODShttp://food.hippos.jp/

パパママハウス株式会社http://www.papamamahouse.com/

パパママハウス東京オフィスhttp://tokyo.papamamahouse.com/

7

情報社会はみんなで作るもの情報社会は一部のエキスパートだけで作られるものであってはならず、すべて人々が力を合わせて作るものだと信じます。Web の仕事を通じて、決してコンピュータは得意ではないが、優れた学ぶべき情報を持つ多くの存在を知りました。多くの人々が、もっと簡単に情報が発信できないものか。多くの人々が、もっと簡単に情報の恩恵を受けられないものか。それが僕の Web に対する考え方の原点です。

8

1997 年 Dremwever 登場。 1997 年 12 月、マクロメディア（現 Adobe ）から、

高機能 HTML エディター、 Dremaweaver 販売開始。それ以前は、テキストエディタで手打ちするしかな

かった、 Valid な HTML なサイトが制作可能になる。使い物になったのは 1998 年 12 月に出た、 Ver2 か

ら、 GoLive とならんで Web 制作のスタンダードツールに。

それでも、 Web の更新作業は HTML エディタが使えない人々にはできる作業ではなく、更新は Web制作会社に頼むしかなかった。

9

オリジナル更新システムで更新作業は誰でも可能に！ 1997 年頃、掲示板の機能を利用して更新システムが

できないかと思いつき、当時遊びに来ていた理工系の大学生に作らせたのが CMS との関わり。

はじめは、任意の行を書き換える程度の簡単なものであったが、やがて MySQL等の DB連携により高機能化していった。

ワープロが扱える人なら誰でも更新作業が可能なことにより評判がよく、岐阜県下の地方自治体から随契がずいぶんとれた。岐阜県下 90 市町村中 7 市町村の Web を制作。

10

でも、開発コストが高く利益率は低かったシステムは外注に依存したので、外注費がかかりすぎ

て利益率が低かった。※ただし、外注さんはシステムの使い回しで儲かった。

制作コストが高いので、地方では顧客が限定され、営業もしにくい。

最大の顧客である岐阜県で知事が交代し、ベンチャーに声がかからなくなった。→仕事がなくなる。

これはなんとかしなくては！と危機感を感じた。

11

2004 年 XOOPS を知る XOOPS は誰もが無償で利用できる OpenSource なので、

制作コストは一気に下がったが… デザインされた HTML をそのまま出力するのが困難 SEO は考慮されてない肝心の必要な機能がとぼしく、その部分は PHP で

制作するしかなく、外部に依存更新管理がわかりづらくマニュアルを製作するも、担当者が交代するごとに質問が来る

結局、外注コストが若干下がっただけで機能的には、まったく満足できるものではなかった

12

2005 年 3 月Movable Type と出会う最初にさわった Movable Type は 3.15

デザインが自由。 HTML にタグを入れるだけでシステムが完成

価格は約 3万円と妥当なものシステムを知らない僕にも出来た！更新が簡単（ブログが使える人なら誰でも）これは Dreamweaver のように、 Web クリエイター

のスタイルを変えると確信した※もっとも、当時は誰にも信じてもらえなかった ^^;;

13

リッチテキストエディタTinyMCE for MT の開発以後、 Movable Type を使うようになったが、

リッチテキストエディタがなかったので、ブログ記事の更新は HTML がわかる人にはできない。

そこで、まずは Movable Type で利用できるリッチテキストエディタを探した。

TinyMCE を Movable Type で利用するプラグインが見つかったが日本語環境での利用はうまくいかず、改造して公開。オリジナルコードによる TinyMCE for Movable Typeへと発展する。

14

リッチテキストエディタは、 CKEdditor へと続く TinyMCE for Movable Type は、大ヒットとなり、 2

5000 本のダウンロードを記録したが、Movable Type 4.0 で大きく構造が変わったため、自社ではスキル不足で開発を断念。

MT4.1時に、米シックス・アパートの中の人がFCKeditor のプラグインをリリースしたので、日本語ローカライズして公開。

MT5 では、 ToI 企画の天野さんの協力でFCKeditor の後継である CKEditor を利用してCKeditor for Movable Type を公開。今日に至る。

15

Movable Type お勧め理由1. プログラム言語を知らなくても、カタログサイト等の高機能

な Web サイトが作れる。

2. HTML とシステムの分離によりデザインが自由。

3. 更新が簡単。ブログ感覚で更新ができる。

4. ファイルの静的生成と動的生成 2 種類が選べる。

5. 出力ファイル形式が豊富。

6. 仕事に役立つプラグインが多い。

7. たいていのサーバーが対応している。

8. Web や書籍等の情報が豊富。

9. コミュニティが充実している。

10. 管理は簡単なので納品後のサポートが楽。

16

Internet の進化と共に歩むMovable Type

Movable Type に限らず、

CMS の進化は、

インターネットの進化と共に歩んでいます。

この 10 年の歴史を振り返りつつ、

来年以降を予測してみましょう。

17

2000 年 XHTML1.0 はこの年に勧告が発表されたが、理解が難しく一部の人以外は使う人はいなかった。

1 月 26 日　 XHTML1.0正式勧告

18

2001 年 Movable Type はアメリカで 2001 年 10 月にトロッ

ト夫妻 ( ミナ＆ベン・トロット）によって作られた。

それまでのブログシステムに満足できなかった二人は自分達で満足のいくブログシステムを作ろうとしたのが Movable Type の歴史の始まり。この年、 PHP-Nuke を元に日本人により開発したXOOPS も発表された。

8 月 27 日　 Internet Explorer 6 リリース 10 月 8 日　Movable Type 1.0 リリース

19

2002 年

Movable Type2.5 で日本語版を含め国際化対応しブロガーや先進的なユーザーが利用し出す。MySQL や PostgresSQL を利用したオリジナル CMSによる Web が増えてくる。

3 月 20 日　Movable Type 2.0 リリース 8 月 1 日　W3C より XHML1.0Second Edition 勧告

発表 10 月 8 日　Movable Type 2.5 リリース

20

2003 年　シックス・アパート日本法人誕生。

livedoor Blog がスタートした年でもある。 12 月 2 日　株式会社シックス・アパート設立

代表取締役関さん曰く「当時はブログで何ができると、さんざん言われた」そうだ。

12 月 18 日　 livedoor Blog スタート

21

2004 年 Web JIS が発表され、

アクセシビリティが話題となった年。 3 月 3 日　mixi オープン 5 月 13 日　Movable Type 3.0 発表 6 月 21 日　Web アクセシビリティを規定した日本工業規格 (JIS) が交付

9 月 15 日　アメーバーブログ、サービス開始 11 月 9 日　Mozilla Firefox 公開

22

2005 年 Web JIS が発表され、アクセシビリティが話題と

なった年。首都圏では XOOPS 人気が高まる。 7 月 4 日『Web標準の教科書（益子貴寛著）』発売 10 月 20 日　 CSS Nite誕生 12 月 3 日　アドビシステムズが約 34億ドルでマク

ロメディアを買収完了 12 月 5 日　韓国最大の SNS 、 Cyworld 日本語サービ

ス開始※日本中を制覇すると勢いはよかった

23

2006 年 mixi ブレイク！利用者が 700万人に増える。

Web標準の高まりにつれて XOOPS 人気下降、W3C準拠のテンプレートを持つ Movable Type のコンテンツが一気に増えた年でもある。

7 月　 Twitter スタート 7 月 26 日　『Web担当者フォーラム』スタート 9 月 25 日　 TinyMCE for Movable Type 公開

※ OpenSource で公開したため、 Movabele Type で利用できるリッチテキストエディタのスタンダードになった。

11 月 2 日　 Internet Explorer 7 リリース

24

2007 年 7 月まで Movable Type 4.0 が誕生した年。

知識人の間にマイクロ・ブログブームが起こり「ブログの時代は終わった」という言葉が流行る。※発言が間違いであることはその後の歴史が証明する。

3 月 1 日　米国 Davidville.inc により Tumblr （タンブラー）スタート

5 月 20 日　mixi利用者 1000万人 6 月 22 日　 Adobe Creative Suite 3 発売

25

2007 年 8 月以降 7 月 28 日　第 14回WebSig24/7 会議開催（特集

Movable Type ） 8 月 8 日　Movable Type 4.0 公開 9 月 29 日　第 16回WebSig 会議開催（大阪） 10 月 1 日　mixi リニューアルし CSS に対応

IE5.5 以前のブラウザに見切りをつける 11 月　 Power CMS for MT 発売開始 12 月 12 日　Movable Type Open Source 公開

26

2008 年 4 月まで Movable Type 4.1 リリース。商用 CMS としてブレイクした年！国内の開発者が一気に増え、主要プラグインも出そろった。

1 月 22 日　W3C より HTML5 の草案発表 1 月 24 日　Movable Type 4.1 公開 4 月 5 日　 CSS Nite MT4LP5 開催ベルサール原宿に 400名の人間を集めて開催された大イベント

4 月 8 日マイコミより『Movable Type プロフェッショナル・スタイル MT4.1 対応』発売

27

2008 年 5 月以降 5 月 30 日　Movable Type 4.2 公開※大幅にテンプレート構成が変わり現在に継承される

6 月 29 日　Movable Type のリッチテキストエディタ、 TinyMCE-MTPlugin 0.1.9 公開※ ToI 企画の天野さんの手によるものhttp://tec.toi-planning.net/mt/tinymce/

7 月 11 日　 iPhone 3G 発売 12 月 12 日　 Google Chrome正規版リリース 12 月 19 日　 Adobe Creative Suite 4 日本語版発売

28

2009 年 6 月まで　シックス・アパート日本法人がイニシアチブを持ち

開発した Movable Type 5.0 発表。日本中に Twitter がブレイク。

3 月 18 日　Movable Type 4.25 リリース※ Motion テンプレートが登場

3 月 20 日　 Internet Explorer 8 リリース 4 月 29 日　 Twitter 日本語版サービス開始 6 月 19 日　 iPhone 3GS 発売 6 月 27 日　 CSS Nite LP, Disk 6「 CMS リベンジ

編」開催

29

2009 年 7 月以降 8 月 21 日　 Twitter ブームの中、韓国最大の

SNS 、 Cyworldひっそりと撤退 11 月 9 日　 CKEditor for MT 公開 11 月 26 日　Movable Type 5.0 公開

ブログ系 CMS から汎用 CMS へ大きく進化高機能から誰でもできるがコンセプトに。

11 月　MTQ （ Movable Type 5 ユーザーコミュニティ）公開

12 月 12 日　MTDDC Osaka 開催MTDDC （ Movable Type Developers & Designers Conference ）のはじまり。

30

20010 年 6 月まで　クラウド、 ePub 、 jQuery 、 HTML5＋ CSS3 、

WordPress 、 Facebook が話題になった。 2 月 5 日　MTDDC Tokyo 開催 3 月 29 日　雑誌としての『 web creators』休刊 4 月 14 日　mixi利用者 2000万人 5 月 8 日　日本で iPad 発売 5 月 28 日　 Adobe Creative Suite 5 発売 5 月 29 日　WordCamp Yokohama 2010 開催※ 400

人を集め話題になる

31

20010 年 6 月以降 6 月 9 日　MT コンテスト 2010 開催 6 月 9 日　スマートフォンの所有率、全国平均の 12.

7％に対し首都圏では 33.9％ 6 月 15 日　WordPress テーマコンテスト開催 6 月 22 日　WordPress 3.0 発表 6 月 24 日　 iPhone 4 発売 7 月 31 日　MTDDC TOKYO テーマ編開催 8 月 20 日　『 JIS規格ウェブコンテンツ（ JIS X

8341-3:2010 ）』改正

32

20010 年 10 月以降 10 月 25 日　 SOY CMS2ベータ公開 10 月 30 日　WordCamp Nagoya 2010 開催 11 月 6 日　福島件郡山市にて『MTDDC Meetup

FUKUSHIMA 2010』開催※ユーザー主体初の MTDDC として、ビッグパレットふくしまに約 80名の参加者を集め、成功に終わる。

33

さて 20011 年は？　あくまでも予測ですが、 XHTML に代わり

HTML5＋ CSS3＋ jQuery が Web のトレンドになる。CMS はさらに混戦が進み、勝ち組負け組が明確に。消える CMS も多いが Movable Type は安泰。

3 月（推測）　Movable Type 5.1 公開 3 月（推測）　『Movable Type 5.1 プロの現場の仕

事術 (仮題 ) 』毎日コミュニケーションズ発売 5 月 22 日　 HTML5 ラストコール草案から勧告候補へ。正式勧告は 2012 年 3 月の予定。

34

Movable Type 5. ０ VS WordPress 3.0 いずれもブログから進化した CMS であるいずれも大きなシェアを持つ出来ることはほぼ同様使いやすさもほぼ同じどちらが優れているかという判断はしない以下では客観的に比較をしてみます

35

WordPress との比較 1Movable Type WordPress

ライセンス商用ライセンス OpenSourceGPL

価格 63,000円無料

システムの管理団体シックス・アパート株式会社

WordPress Foundation※ Automatic 社が中心に設立

日本語化対応 ◎ ◎

36


データベース MySQLPostgreSQL

MySQLSQLite※プラグイン導入による

HTML とシステム分離

◎100% ○一部未対応

ブログ機能 △※ウェブサイトではブログ制作不可

○

複数ブログ機能 ○比較的簡単 △やや面倒

37


SEO ○標準機能 ○標準機能

カテゴリー機能 ○ ○

フォルダ機能 ○ ○

タグ ○カテゴリ、フォルダと同一名称が利用できる。 URL はシステムによる自動生成

◎カテゴリ名、フォルダ名と同一名称は利用できない。 URL は /tag/ で表示される

ファイル名の自由度 ○英数字のみ ◎日本語ファイル名対応

38


テーマの数 ×数十種類 ◎約 2万種類公式サイトには約 1000 種類

テーマの作り方 ◎ △やや困難

プラグインの数 ○ ◎約 2万 5千公式サイトには約 1400 種類

プラグインの作り方 ○Movable Type はオブジェクト指向

◎WordPress は非オブジェクト指向※セキュリティはプラグインに異存する

39


静的生成と動的生成 ○いずれも対応 △動的生成のみ出力形式 ◎

HTML 、 PHP 、 XML 、RSS 以外にも、 SVG 、 EPS 、 ePub等多種対応

×基本は PHP （ PHP の機能で XML 、 RSS等を出力）

40


セキュリティ ◎セキュリティパッチはシックス・アパート社から随時提供

△プラグインにより大きく異なる

SSL 対応 ◎標準機能 ○プラグインによる

41


対応サーバー ◎ほとんどのサーバーが対応

◎ほとんどのサーバーが対応

サーバー負荷 ○静的出力の場合

△

表示速度 ◎静的出力の場合

△他の PHP系 CMS に比べても遅い

再構築有無

42


公式ドキュメント ◎日本語によりもっとも充実したドキュメントがある

○日本語化は進んでいるが、完全ではなく英語力を必要とする

フォーラム ◎MTQ （公式）、 mixi

◎WordPress.org （公式）WordBench

Web 情報 ◎日本が世界一 ○海外が充実

書籍 ◎初心者向から上級者向まで揃っている

○本当の意味で制作現場向けの本がない

43

Movable Type 5. ０ VS WordPress 3.0結論！どちらでもいい！指定がない限り、どちらを使うかは人次第。 PHP に慣れてる人は

WordPress が使いやすいと思うだろう。 Movable Type はオブジェクト指向、 WordPress は非オブジェクト指向なので、小さなサイトは作りやすいが、大きなサイトを作る時には苦労する。

WordPress は PHP を知らない人でもそこそこはできるが、カテゴリーサイト等の中規模（予算規模 100万円）以上のサイトを作る場合はかなりの PHP スキルを必要とする。※ MT はプラグインで対応できる。

Movable Type はプログラム言語を知らない人でも中規模サイトまでは構築可能。ということでプログラム言語を知らない僕は Movable Type を使ってます。

44

その他お勧め CMS　海外での評価が圧倒的に高い Drupal等、

CMS はいろいろあるが、日本語情報が少ないとか、高度なプログラミング知識が必要であるとか、一般的にお勧めできるものは少ない。Movable Type や WordPress 以外でお勧めでき、 Web 業界で SOHO に評価が高いのは純国産下記 2 点。

SOY CMS

a-blog cms

45

SOY CMS オープンソース（ GPL ）開発者：株式会社日本情報化農業研究所 Movable Type同様、オブジェクト指向で作

られ HTML とシステムが完全分離されており、 HTML のバージョンは問わない。HTML がわかる人なら、もっとも簡単にスタートできる CMS 。URL ： http://www.soycms.net/

46

a-blog cms 商用ライセンス　 52,500円開発者：株式会社アップルプルプログラミング知識不要で、中規模サイト作成を対象にしている。管理画面の出来が素晴らしい。セミナーを定期的に開催している。URL ： http://www.a-blogcms.jp/

47

予算がないと言われたら…　予算がないのでオープンソースを利用するという

考え方には危ない落とし穴がある。たとえば、オープンソースのセキュリティ対策は、それなりの知識が必要。予算に見合わない仕事を請けると、結局は自分の首が絞まるので、「アメブロ」等のブログサービスや、廉価な SaaS型 CMS を顧客に紹介するのも一考。

ホームペーじん Jimdo

48

ホームペーじん商用ライセンス　月額 525円～ SaaS型高機能 CMS として RCMS の廉価版

　廉価版とはいえ 150 種類以上の機能がある。携帯版、 iPhone版標準対応

http://www.homepagine.com/

49

Jimdo 商用ライセンス　月間 945円～機能は「ホームペーじん」ほどではないが、

テンプレートの種類は多少豊富。http://jp.jimdo.com/

50

HTML5 対応について HTML5 が話題です。

Movable Type は、HTML とシステムの完全分離により、より簡単に HTML5 に対応できる数少ない CMS のひとつです。※解説した（ WordPress 、 SOY CMS 、 a-blog cms ）も対応可。

51

HTML5 とは？ XHTML1.0 の規格に不満をもっ

た、 WHATWG （ Google 、 Apple 、 Mozilla 、 Opera の中の人達が集まって作られた）によって提案された、 HTML4.01 の発展系である、より現実的な HTML の規格。 WHATWG より W3C に提案があり、 W3C より 2008 年 1月 22 日にドラフト（草案）が発表された。来年にも準勧告になる。 ※ WHATWG と W3C は連携して勧告に向けて動いています。

認識してほしいのは、下位互換であること。つまり古いブラウザでも誤動作ません。 IE6 でも新しいタグは認識しませんが誤動作はしません。

52

HTML5 のメリット1. セマンテック！

SEO とアクセシビリティに効果が高くなる。

2. マルチブラウズ！HTML5 は Microsoft や Adobe も巻き込み、新たな Web標準の規格となります。ブラウザを問いません。

3. スタイリッシュ！CSS3 により Web はスタイリッシュに。

4. インタラクティブ！Canvas 、 API等、 JavaScript でよりインタラクティブに。

5. マネタイズ！ HTML5 は現在買い手市場。クリエイターに利益を生みます。

53

HTML5 現在のステータス Apple 、 Google 、 Twitter等、

HTML5 で作られたサイトは日々増えています。 HTML5 Gallery

http://html5gallery.com/

Internet Explorer 9 は現在断トツの対応率 http://samples.msdn.microsoft.com/ietestcenter/

Dremweaver CS5 は HTML5 に対応HTML5/CSS3 特設サイト- AdobeR DreamweaverR CS5http://adobe-html5.jp/

54

HTML5 は簡単HTML5 は基本はたったこれだけ。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Example document</title></head><body><p>Example document</p></body></html>

55

セマンテックな要素は、こう使えば IE6 でも大丈夫

Section等のセマンテックな要素（ブロックレベル要素）は、本来HTMLの見通しをよくするものなので、レイアウトを指定するdivとして使わず、コメント代わりに利用すれば目的も果たせて問題もなし。

<section><div id="section"><h2>Example document</h2><p>Example document</p></div></section>

56

JavaScript が IE6 をHTML5 対応ブラウザにする

HTML5.jsを利用すれば新しい要素も有効になる http://remysharp.com/2009/01/07/html5-enabling-script/

57

Movable Type でHTML5 に対応するためにテンプレートを HTML5 で作る。

たったこれだけで HTML5 サイトになります。但し、リッチテストエディタはその限りではない。そのために来年早々にでも

CKEditor for Movable Type はHTML5 対応とします。

MT5.1 公開にほぼ合わせて発売される書籍『Movable Type 5.1 プロの現場の仕事術 (仮題 )』にも HTML5 について書きます。

ご期待ください。

58

HTML5参考サイト W3C HTML5

http://www.w3.org/TR/html5/

WHATWGhttp://www.whatwg.org/

Web標準 Blog | メソッド | ミツエーリンクス http://standards.mitsue.co.jp/

HTML5.JP http://www.html5.jp/

html5-developers-jp http://groups.google.com/group/html5-developers-jp

59

Movable Type が僕にもたらしたもの

1. 知名度2. 仲間3. 可能性

得られるモノは人それぞれです。僕の場合は Movable Type の勉強会の開催を通じて、多くの頼れる仲間に出会いました。本を出すことにより、 Web 業界とのつながりだけでなく、出版社とのつながりもできて、次のステップが得られました。

Movable Type を真剣に取り組んでよかったと思います。

60

技術は逆転勝利をもたらす ! Web標準や CMS の普及は Web 制作の現場に大き

な改革をもたらしました。 Web を作る上でプロデュースやディレクション、設計に関わる上流の人々ですら技術への理解が必要となってきました。

技術が重視されることにより、現在の Web 業界は、企業規模や学歴に関係なく努力した人が成功しやすい世界になってきました。新たに登場した人々の多くは技術者上がりです。

技術は仕事の上で逆転勝利をもたらします。技術を大事にしてください。

61

技術があれば地域は関係ないインターネットの発達により、住む場所に関係な

く仕事ができる時代になってきました。世界一のインフラは、膨大な印刷物のデータさえも距離を問いません。

新しい技術、高度な技術の出来る人を首都圏の企業は欲しがっています。

福島から東京は朝一の会議に参加できる距離です。地域に縛られることなく活躍してください。

62

明日の主役はあなた！CMS なんて所詮道具なんです。どんな CMS を使おうが、よい Web が作れるかどうかは、使い手次第。でも、使う使わないで大きな差が出る。上手く Movable Type を使いこなして明日の主役になってください。

63

最後に、みなさんへ。僕は Movable Type が大好きです。

1 人でも多くの MT ユーザーが増えるといいなと思ってます。

これからも Movable Type の宣教活動を続けていきたいと思ってますよ。

出来れば、一緒に仕事したり、勉強会やイベントをやったり、本を出しましょう。

ご静聴ありがとうございました。

Download - MTDDC Meetup FUKUSHIM 2010プレゼン資料

Top Related