Mtddc2013: Movable Type 6 Overview

MOVABLE TYPE 6OVERVIEW

~ PLAY WITH API ~

2013.8.3 (Sat) MTDDC TokyoYuji Takayama

Movable Type Engineer, Six Apart, Ltd.13年8月3日土曜日

ＭＴ６：約４年ぶりのメジャーアップデート13年8月3日土曜日

ＭＴ６：約４年ぶりのメジャーアップデート

拍手する所ですよ

13年8月3日土曜日

TODAY’S AGENDA

•What’s new in MT6

•New Features

• Improvement

•What’s new API

• The point of upgrade

• Plugin Directory Renewal


WHAT’S NEW IN MT6


NEW LOGO


•5 new features

•3 improvement

•1 new application


SCHEDULED UN-PUBLISHING





•記事とページに対して公開終了日を設定可能

•公開終了処理は run_periodic_tasks で実行

•公開終了ステータスになった記事とページを一覧

•公開終了した記事とページは改めてステータスを変えて公開する事もできる



•指定日公開と指定日公開終了を同時に利用する事で、指定された期間だけ公開される記事とページを作れる

•手動で公開終了ステータスに変更はできないです

•公開終了処理時にコールバックあります



YAMLcallbacks:

unpublish_past_entries: $YOUR::CALLBACK::HANDLER

PerlMT->add_callback( ‘unpublish_past_entries’, 5, \&your_handler );



sub my_callback_handler { my ( $cb, $mt, $entry) = @_; # Do Something}

Arguments$mt: Instance of Movable Type (Not MT::App, MT object)$entry: Unpublished entry(or page) object


GOOGLE ANALYTICS







<MT:StatsSnippet>

•アクセス解析サービスの提供する JavaScript を出力

• StatsProvider 側で実装する

• Google Analytics Providerは、Google AnalyticsのJavaScriptコードの中に自動的にアカウントIDを埋め込んで出力


EXTENDS STATS PROVIDER

YAML

stats_providers:

OtherService:

provider : OtherService::Provider ←パッケージ名を指定



package OtherService::Provider ;

sub is_ready { # should return true value if this provider is configured # and usable}sub snipet { #should return tracking code (JS or something?)}



sub pageviews_for_path {#Do something }sub visits_for_path {#Do something }sub pageviews_for_date {#Do something }sub visits_for_date {#Do something }

Parameters:startDateendDateoffsetlimitpath


EXAMPLE

/MT_HOME/plugins/GoogleAnalytics/lib/GoogleAnalytics/Provider.pm


NOTIFICATION CENTER





NOTIFICATION CENTER

YAMLcallbacks: set_notification_dashboard: $YOUR::CALLBACK::HANDLER

PerlMT->add_callback( ‘set_notification_dashboard’, 5, \&your_handler );


NOTIFICATION CENTER

sub my_handler { my ( $cb, $messages ) = @_; my @notifications = ({ level => 'error', text => MT->translate('Error'), detail => MT->translate('You have an error.'), }); push @{ $messages }, @notifications;}

Level: error, success, warning


NOTIFICATION CENTER

•Dashboardにアクセスする時にコールバックが実行されるので、あまり重い処理を記述するのはお奨めしません・・・。

• textに指定した内容は、管理者以外のユーザーにも表示されるのた、セキュリティ関係は表示しない方がいいです・・・。


WEBSITE MANAGEMENT



WEBSITE MANAGEMENT

•ウェブサイト上に記事を書くことができるように•カテゴリーの作成ももちろんできます• ”ブログ”テーマを適用することができるように• <MT:Blog....>系のタグを<MT:Website...>に書き換える

必要はありません•基本コンセプトは小規模（ウェブサイト1,2個）から、

大規模（ウェブサイト複数個、子ブログ複数個）まで


WEBSITE MANAGEMENT

•MT4以前のバージョンからのアップグレード時に、ブログをウェブサイトに分解しません •全て”ウェブサイト”にする事でアップグレード前の

構造を維持します•MT5以降のバージョンからのアップグレード時は、特

に変更をしません（既存の構造をそのままにします）


WEBSITE MANAGEMENT

•テンプレートの中で、ウェブサイトのコンテクストを自動判別するようになりました


WEBSITE MANAGEMENT

これまで<mt:IfBlog> <mt:BlogParentWebsite> <mt:WebsiteName> </mt:BlogParentWebsite><mt:Else> <mt:WebsiteName></mt:IfBlog>


WEBSITE MANAGEMENT

これから<mt:WebsiteName>


DASHBOARD




DASHBOARD

•すっきりと生まれ変わりました

• This is You widget がサイドに移動

• Flash ベースの Blog Stats widget を廃止して、Movable Type Chart API ベースの widget になりました

•後方互換性の為に Blog Stats widget を表示する事もできます (EnableBlogStats)


SITE STATS WIDGET

•ウェブサイト、ブログの10日分の記事数をグラフに

• Google Analytics を設定すれば、PageViews もグラフに反映されます

•実は、Pluggable なので、プラグインからグラフデータを追加する事もできる


EXTENDS SITE STATS

YAMLapplications: cms: site_stats_lines: key_for_graph: hlabel: ‘Label for the line’ handler : $YOUR::HANDLER condition: $YOUR::CONDITION::HANDLER


EXTENDS SITE STATS

hlabel: グラフのポイントに表示されるラベル名

handler : グラフデータを返すハンドラーcondition: handlerに指定されたコードを実行するかどうか　　　　指定が無ければ毎回実行


EXTENDS SITE STATS

sub my_handler { my ( $app, $ten_days_ago_tl, $param ) = @_; # Do something return \%results; # Key: YYYY-MM-DD / Value: Count}Arguments

$app: MT::App::CMS object$ten_days_ago_tl: gmtime array of date of 10 days ago $param: Optional parameter hash


EXAMPLE

/MT_HOME/lib/MT/CMS/Dashboard.pm


CATEGORY ARCHIVE




CATEGORY ARCHIVE

• 全般設定 - アーカイブ設定で設定を有効にすると、記事がないカテゴリーアーカイブを出力されます

•デフォルトでは、設定は無効になってます


LOUPE



LOUPE

• JavaScript + Movable Type Data API + Chart API を用いたリファレンスアプリケーション

•スマートフォン向けの Web アプリケーション

•ただのサンプルではなく普段使いができる

•MITライセンスで公開

https://github.com/movabletype/mt-plugin-Loupe13年8月3日土曜日

LOUPE

•実はPluggable

• Card と呼ばれるウィジェットを自分で開発することができる

•近日中に Card の作成方法のドキュメントを公開予定


MOVABLE TYPE DATA API


MOVABLE TYPE DATA API

• REST API

•MT Authentication

• JavaScript Library

• Pluggable

• CGI based API


http://pages.apigee.com/web-api-design-ebook.html


REST APICreate Read Update Delete

Entry

Comment

Trackback

User

Site(Blog, Website)

Category

Site Statistics

Asset

ex) http(s)://<your-server>/<your-mt>/mt-data-api.cgi/v1/sites/2/entries


https://github.com/movabletype/Documentation/wiki/Quick-reference13年8月3日土曜日

curl -i http://localhost/cgi-bin/mt/mt-data-api.cgi/v1/sites/1

HTTP/1.1 200 OKDate: Fri, 02 Aug 2013 13:12:10 GMTServer: Apache/2.2.22 (Unix) DAV/2 PHP/5.3.15X-content-type: nosniffCache-control: no-cacheTransfer-Encoding: chunkedContent-Type: application/json; charset=UTF-8

{"name":"First Website","archiveUrl":"http://localhost/blogs/20130731-1/","url":"http://localhost/blogs/20130731-1/","id":"1","class":"website","description":null}


MT AUTHENTICATION

•公開されていない記事や、コメントなどの更新・削除には、認証が必要

•認証は、CMS と同じ MT 認証＋ Role ベース

•既存の権限ルールをそのまま適用できる

•もちろん、公開済みの記事の内容などは認証なしで取得できる


curl -i http://localhost/cgi-bin/mt/mt-data-api.cgi/v1/users/me

HTTP/1.1 401 Authorization RequiredDate: Fri, 02 Aug 2013 13:14:54 GMTServer: Apache/2.2.22 (Unix) DAV/2 PHP/5.3.15X-content-type: nosniffCache-control: no-cacheTransfer-Encoding: chunkedContent-Type: application/json; charset=UTF-8

{"error":{"code":401,"message":"Unauthorized"}}


curl -i -d clientId=test -d username=takayama -d password=password http://localhost/cgi-bin/mt/mt-data-api.cgi/v1/authentication


{"accessToken":"MAQgv0HhhN82CQm88aP6r0QjtYpvRtMm8cS0av7E","sessionId":"Z9STct7OztObi6Bd4aDMH8qcZBbPh6mlxpkh5yQo","expiresIn":3600,"remember":false}


curl -H "X-MT-Authorization: MTAuth accessToken=MAQgv0HhhN82CQm88aP6r0QjtYpvRtMm8cS0av7E" -i http://localhost/cgi-bin/mt/mt-data-api.cgi/v1/users/me


{"email":"[email protected]","userpicUrl":null,"language":"ja","url":null,"name":"takayama","updatable":true,"id":"1","displayName":"Yuji Takayama"}


curl -i http://localhost/cgi-bin/mt/mt-data-api.cgi/v1/users/1


{"email":"[email protected]","userpicUrl":null,"language":"ja","url":null,"updatable":false,"displayName":"Yuji Takayama"}


JAVASCRIPT LIBRARY

• REST API の呼び出しをラッピングした、JavaScript ライブラリを提供

•他の言語についても（需要次第で）順次サポート予定（時期未定）

• MIT で提供中


var api = new MT.DataAPI({ baseUrl: "https://your-host/mt/mt-data-api.cgi", clientId: "your-client-id"});

api.listEntries(siteId, function(response) { if (response.error) { // Handle error return; }

for (var i = 0; i < response.items.length; i++) { var entry = response.items[i]; // Render an entry }});



api.getToken(function(response) { if (response.error) { if (response.error.code === 401) { // You have not been authenticated yet. location.href = api.getAuthorizationUrl(location.href); } else { /* Handle error */ } } else { // You have been authenticated. api.listEntries(siteId, {status: 'Draft'}, function(response) { if (response.error) { /* Handle error */ return; } // Fetched a list of drafts. for (var i = 0; i < response.items.length; i++) { var entry = response.items[i]; // Render an entry } }); }});



var params = { search: "foo", searchFields: "title,body", fields: "assets,author,title,permalink,body,categories"};

api.listEntries(siteId, params, function(response) { if (response.error) { // Handle error return; }

for (var i = 0; i < response.items.length; i++) { var entry = response.items[i]; // Render an entry }});


https://github.com/movabletype/mt-data-api-sdk-js


PLUGGABLE

• REST API のエンドポイントは、MT のレジストリで管理

•プラグインから、エンドポイントの追加が可能

•出力形式を追加する事が可能

•MT6.0 では、JSON 形式をサポート

•プラグインによる実装方法のドキュメントを近日公開


YAML applications: data_api: endpoints: - id: list_foobar route: /sites/:site_id/foobars verb: GET version: 1 handler: $Core::MT::API::Endpoint::FooBar::list requires_login: 0 default_params: limit: 10 offset: 0 sort_by: authored_on sort_order: descend search_fields: title,text,text_more,keywords error_codes: 403:blah blah blah


CGI BASED API

•データ構造だけを返すので、ページ生成を伴うCGIよりは軽量ではある

•とはいえ、CGI であるので、起動時のオーバーヘッドはやはりある

• PSGI などの永続化環境で実行することを推奨

•フロントサーバーでキャッシュするのも効果的


DATA API - USE CASES

•MT の管理画面をカスタマイズせずに、ユーザー専用の管理画面を作る

•公開されているサイト側で・・・• Pagination•mt-search.cgi に変わる検索エンジン•コミュニティサイトは Community.Pack より作りやす

い気がする


MOVABLE TYPE CHART API


CHART API

• Flash ベースの Blog Stats を何とかしたくて開発

• Loupe でも使いたいと思ってスマフォ対応

•MT 無しでも使えると、公開サイト側でも使えていいかも？と思って、独立した JavaScript で開発

•MITで公開

https://github.com/movabletype/mt-chart-api-sdk-js13年8月3日土曜日


CHART API

•Morris.JS / Easel をグラフ描画エンジンとして採用

•グラフの種類によって、それぞれのエンジンを利用

•一部のブラウザでは Canvas が使えなかったりするので、環境に応じて別エンジンで描画を続行


CHART API

Internet Explorer

Google Chrome

Safari

FireFox

Android


<html> <head> <link rel="stylesheet" href="/mt-static/chart-api/mtchart.css"> <script src="/mt-static/jquery/jquery.min.js"></script> <script src="/mt-static/chart-api/mtchart.min.js"></script> <script> $(function(){ var config = { data: [ { x: '2013-04', y: '123' }, { x: '2013-05', y: '235' }, { x: '2013-06', y: '76' } ]} var range = { dataType: 'general', length: 3 } new MT.ChartAPI.Graph(config, range) .trigger('APPEND_TO', $('#graph')); }) </script> </head> <body> <div id="graph" style="width: 500px;"></div> </body></html>






$(function(){ var data = [ { x: '2013-04', y: '123', y1: '90' }, { x: '2013-05', y: '235', y1: '128' }, { x: '2013-06', y: '76', y1: '283' } ]; var config = { data: data, type: 'morris.donut', autoResize: true, yLength: 2 } var range = { dataType: 'general', length: 3 } new MT.ChartAPI.Graph(config, range) .trigger('APPEND_TO', $('#graph'));})


https://github.com/movabletype/Documentation/wiki/Movable-type-chart-api


THE POINT OF UPGRADE



• Transformer をご利用の皆様

• User Dashboard の This is You を移動した

•記事/ページ編集画面に公開終了日の項目を追加した

• Blog Stats が無くなって、Site Stats になった

•Notification Centerのメッセージバーが出る領域



• Plugin 開発者の皆様

• Callback や API レベルで変更した点はほとんどない

•レジストリの変更はない

•ウェブサイトで記事が作れることにより、ブログのみ対応していた記事・カテゴリ系のプラグインは対応が必要になると想定されます



• Theme 開発者の皆様

•ウェブサイトでブログのテーマが利用可能になるので、”class: Blog” と指定していても、ウェブサイトで適用されます

• “class:Website”と指定されているテーマは、旧バージョン同様にウェブサイトでのみ利用可能です


PLUGIN DIRECTORY RENEWAL


PLUGIN AND THEME DIRECTORY

•現在提供しているプラグイン＆テーマディレクトリを日米ともに完全リニューアル

•本日よりベータオープン

• http://beta.plugins.movabletype.jp

• http://beta.plugins.movabletype.org




•現行サイトに登録されている方も改めてユーザー登録、プラグイン・テーマの登録をお願いします



• github と連動することで、バージョンアップ時の情報更新を自動化

• github レポジトリの Service Hooks に更新通知を設定するだけ



•一度の登録で日本語サイト、英語サイトの両方に登録される

•説明分の翻訳は運営サイドで実施



•最新の Movable Type 開発コードで構築

•フリーワード検索には Data API による検索を搭載

•プラグインの互換性レポート、github のスター数表示などの機能も追加していく予定

•ベータなので問題あったらレポートください・・・



•正式オープンは Movable Type 6 のリリースと同時期を予定

•ベータ中に登録していただいた内容は、そのまま正式オープンするサイトにも残ります


ANY QUESTIONS?


MOVABLE TYPEHACK-A-THON


久しぶりにやります


お題Movable Type 6 に対応したプラグイン、アプリケーション、

テーマなどをワイワイと作る。アイディアを口にすると誰かが作ってくれるかもしれない

日時 2013.8.4 (Sun)10:00 開場 ~ 18:00 発表会

場所シックス・アパート本社（赤坂）

持ち物 PCとハッカー魂、デザイナー魂

参加費 ¥0 無料

その他昼食、スナック、飲み物など用意あります。Movable Type エンジニアに直接質問したり要望を伝えるチャンス



ビールもあるよ


THANK YOU FOR LISTENING


Technology

Mtddc2013: Movable Type 6 Overview