2012年11月17日に、The San Francisco WordPress Meetup WordPress にて行われた「WordPress 3.5: Completely revamped media, and JavaScript trickery」の動画です。登壇しているのはコア開発者の1人Daryl Koopersmith。

Daryl Koopersmithさんはこの人ね。キャプチャは、管理画面左上のWマーク > WordPressについて > [クレジット]タブより。

Daryl Koopersmithさんはこの人ね。キャプチャは、管理画面左上のWマーク > WordPressについて > [クレジット]タブより。

タイトル通り、話している内容はWordPress 3.5の、主にメディア機能を中心とした変更点と、メディア機能に採用されたUnderscore.jsとBackbone.jsをメインとしたJavaScriptです。開発よりの、しかも結構ディープな話が多く、1時間くらいのうち40分をJavaScriptに費やしています。ほぼすべて技術的な話なのですが、彼は今回一新されたメディア機能のメインの開発者でもあり、コア開発者でもあるので、今後、WordPressのコア開発陣が進もうとしているビジョンみたいな事もちらっと語っています。個人的にはこの登壇の一番重要＋興味深い箇所だと思うので、JavaScriptの話は要らないよーって方は、最後のところを読んでもらえればと思います。

下記に動画の僕が要点だと思う点を日本語で書き出して訳しました。結構長くなったので要点じゃないと突っ込まれそうですが（汗）。なお、テキストは完全な翻訳ではなく、直訳でもありません。誤りが含まれている可能性もありますので、英語が分かる方は、動画の方を観てください。

3.5の変更点

  • 新しくなったボタン、UI、そしてかなり良くなったカラーピッカー
  • リンク・マネージャーが無くなった！
    • 新規インストールのみ。すでに使われている場合はDBからは削除されない。
    • 機能を復活させるにはプラグインをインストール。
  • 設定項目をより少なく。管理画面では必要のない項目を取り除いた。
    • たとえばXML-RPCのように、設定画面にあっても意味がない項目。モバイル・アプリを使うために必要な設定。オフにするにはフィルターを使う。
    • プライバシー設定のページは削除して、設定項目は一般設定のページへ移動。
    • 等々、基本的に複雑だったりあまり意味がなさなかったものはコードに。設定ページをよりシンプルに、よりわかりやすく。設定関連のページは十分すぎるほどある。
  • アクセシビリティに愛を
    • タブを使ってリンクをスキップ
    • カスタマイザーのアクセシビリティにも愛を
    • 管理画面のメニュー
    • ラベルやキーボード・ショートカットなどの追加
  • oEmbedに新しく3つを追加
    • Instagram
    • Slideshare
    • Soundcloud
    • 今後はもっとクールに：ビジュアルエディター内で表示されたり、挿入ボタンを設置できたらいいね、とDaryl。（oEmbed関連の挿入ボタンをつけるのは意外と複雑な処理らしい）
  • デベロッパーにフォーカス
    • PHP5.4と仲良く
    • 新しい WP_Post クラス – まだそんなに凝ったものではないが、管理画面内で使うには便利かも。グローバル post 変数の利用を減らした。get_postと->ID。リバレッジ。結構すばらしいので、確認してみることをオススメする。
    • meta queries – よりロバストに。
    • マルチサイト
      • switch_to_blog()がより使えるモノになった。 引きずられる怖いモノではなくなった。
      • サブディレクトリにマルチサイト作成が可能に
    • XML-RPC API

ここまでで約6分弱（！）

メディア機能

  • 新しいアップロード機能
  • 本当の添付ページ（訳注：メディアの編集画面のこと） – 以前はタイトル、ディスクリプション、altテキスト、キャプションの項目のみだった。タグやカテゴリーなどをメディアに追加できるようになった。
  • Imagemagikとの互換 – 画質の向上。ただしサーバー環境が対応していれば。もしもこれが何の話か分からなくても気にしなくてOK。分かっている人は興奮していると思う。

デモを交えながら

  • ウェルカムスクリーンの更新。
  • TwentyTwelve
  • Tiny MCE の見た目の改善。より理解しやすく。
  • メディア・アップロード画面がinfinite scroll.
  • 1つの投稿に複数のギャラリー。
  • これまで、アップロードしたメディアは1つの投稿に”紐づけられる”という奇妙な仕様だった。これを特定の投稿に”アップロードした”というコードに書き換えた。これで、アップロードしたメディアファイルは、どこ（の投稿やページ）でも使えるようになった。
  • ドラッグ＆ドロップによるオーダーの変更
  • ギャラリーのショートコードはメディアのIDを表示するようになった。たとえば：
  • 会場からの質問：作成したギャラリーは再利用できるか？　A：現在はできない。個人的にはこのようなことを行う、iPhotoやApertureのようなメディア管理系のプラグインが出てきてほしい。
  • 質問：画像はマルチサイト間でシェアできうるのか？　A：できなくはないが、デフォルト機能としてはノー。このような機能は非常に特別な場合にのみ必要なので、現状では個別にプラグイン対応するのが良いと思う。
  • 質問：画像編集周りに変更はあったか？　A：無かった。が、Imagemagickは良い。速い。
  • 質問：アップロードされたデータはどうなるのか？　A：投稿に埋め込まれた画像を編集すると、それはHTMLなので、そのポスト内のみでの変更になる。ギャラリーやメディア編集画面で変更された箇所はDBに保存。

ここまででたったの20分ｗ

JavaScript

ここから長々とJavaScriptの話です。主にUnderscore.jsとBackbone.jsのドキュメントを読み進めながら解説されていて、このへんはすでに日本語の情報などもあるようなので、細かいところは割愛しています。

※僕自身はJavaScriptな人ではないので、正直、一部ちんぷんかんぷんでしたw 間違いがあれば教えてください。

  • DarylからのQ：会場にjQueryだけとかでなく、JavaScriptを読める人は？　反応：半分くらいの人たちが、半分くらい（w）手を挙げている
  • 2つの新しいライブラリを追加 – Underscore.js と Backbones.js. この2つは組み合わさって働く。
    • Underscore.js – ユーティリティ・ライブラリ。リスト・ヘルパー、オブジェクト・ヘルパーなど。実はJavaScriptの新しいver.に含まれている機能だが、Underscore.jsはそれのフォールバックにあたる。プログラミングを楽しくしてくれる。使ってみることをオススメする。とても良いドキュメンテーションがそろっている。
    • Backbone.js – Underscoreの上で動く。アプリケーションにもうちょっとStructure（骨組み）を加えることができる。データとUIを分離したい。そういう時に使える。
  • 新しいメディア機能は、Backboneを使う好例だ。たくさんのデータ。複数のインスタンスが行き交い、様々なviewsで、すべてsyncしていなければいけない。だから解決策としてこれ（注：Underscore.js+Backbone.js）を選択した。
  • たくさんあるので4つだけ紹介する。
  • Underscore.jsにあるannotated source codeが読みやすくてすばらしい。（WordPressの）コアコードでもできないか考えている。

    underscore.jsのannotated source code。コメントアウトされた文章が左カラムに。ソースが右カラムに表示されている。

    underscore.jsのannotated source code。コメントアウトされた文章が左カラムに。ソースが右カラムに表示されている。

  • これらがすべて新しいメディア機能を動かしている。そして何がクールかと言うと、これらすべてがexposedされていること。
  • メディア機能の何かをオーバーライドしたければ、可能だ。
  • 新しいタブ（注：メディアアップロード画面左から選択できる）を追加したかったら、それも可能。
  • ワークフローを別々にするなどの理由で、代替versionを作りたければ、それも可能。たとえば、アイキャッチ画像の画像選択画面は同じ仕組みを利用しているが、メディアアップロードは複数選択ができるのに対して、アイキャッチ選択画面では1つしか画像を選択できない。
  • カスタムヘッダー画像とカスタムバックグラウンドにも活用されている。
  • 管理画面内では非常に便利だ。今のところフロントエンドで使うのは実験的だが、これも将来的には・・・
  • つまり、非常にパワフル！
  • 2つのファイル。
    • /wp-include/js/media-models.js
      • UIの部分をカスタマイズしたいのであれば、これ。すべてのベースがここにある。
      • 重要なmodelとか
        • wp.media.model.Attachment
          • たとえば wp.media.Attachment.get( id )
        • wp.media.query
    • /wp-include/js/media-views.js

      • modelsよりも複雑。より厳密。
      • アップロード画面のすべての箇所をカスタマイズすることができる。

質疑応答とか

  • このメディア画面はブラウザをリフレッシュすることなく行われる。なので、非常にダイナミック、かつ速く、パワフル。だがリフレッシュされないということは、メモリー使用料に注意しなければいけない。
  • 画像や音声ファイルはこれ（メディア機能）で呼び出せるが、投稿やページも呼び出すのは可能か？
    • ノー。画像や音声ファイルはpost_type=attachmentであり、media-models.jsのほとんどはattachment関連する。将来的にはあるかもしれないが、UnderscoreとBackboneを導入したのかこのバージョンからであり、まだまだ実験段階。コミュニティがこれをどう活用し、何を作るのかによってAPI等々を整備していきたい。
  • 動画のハンドリングのされかたに何か変更はありますか？
    • 今のところ無し。しかし個人的には（特に3.6で）何かできれば。たぶんまずプラグインで投稿における動画と音声ファイルのハンドリングのされかたを変えることができれば。メディアファイルリストの表の中で、動画ファイルのキャプチャを表示したり、動画や音声ファイルを再生できるとクールだねぇ。
  • Tiny MCEにoEmbedのコードを入れることはできるか？
    • 是非やりたい。3.5でもやりかけたが、安定性を優先して最終的には止めた。できれば、「YouTubeを貼り付ける」などのボタンがあればと思う。
  • 新しいメディア機能を導入するにあたり、ブラウザのサポートを切ったか？
    • ノー。だがIE7はまだ少し調整が必要。プログレッシブ・エンハンスメント・エクスペリエンス。IE7はたぶんもうすぐ対象外にすると思う。WinXPの終わりが2014なので、IE8はまだ先だろう。
  • プレゼンに使ってるソフトは何ですか？
    • deck.jsを、ビジュアルエディター部分はCodeMirror、いくつかのカスタムCSS、等々と組み合わせて作っている。CodeMirrorはすばらしいインブラウザ・エディター。オススメ。
  • オススメのリソースは？
    • Underscore.jsのドキュメンテーション
    • Backbone.jsのドキュメンテーション
    • WordPressのソース
    • 最終的にはこれら3つが一番有益。

一番重要だと思ったところ

media-models.jsについて解説していた箇所の最後（55:00くらい）だけ下記に抜き出しました。このプレゼンで彼が一番熱く語っていた部分だと思うので。

  • …このようなAPIをさらにもっと作っていき、フロントエンド側では皆さんがダイナミックなアプリケーションを作っていくことができたらと思う。なぜならばそれがゴールであり、JavaScriptが持つ力だから。
  • 僕たちは前進しようとしている。シンプルなテーマを超えるアプリケーションを可能にしたい。既に存在はしているが、ほとんどの場合数多くの、たとえばPHPを良く理解していなければいけないなど、すべての事と格闘しなければいけない。現在のところ、WordPressは実際はプラットフォームだ。そしてこの様なレベルのアプリケーションをサポートできる。メディア・マネージャーはただの「アプリケーション」だ。プラグインで実装することもできたし、完全なカスタムメイドの何かでも実装できた。僕たち（訳注：コア開発者）はこれらのことをより良く実装できるツールを提供すること。それがこの本質だ。
  • この機能の生成過程で僕はもう1人のコア開発者Andrew Nacinと、New York Timesを訪問した。New York TimesのブログチームはWordPressを使っていて、彼らがどのようにメディア・ソリューションの構成をしているか見に行くためだ。しかし、ほかの様々なCMSなどと紐づけられていて、結局はWordPressのコードは使ってないことが分かった・・・（省略）・・・基本的に、僕たちが作るものは最もベーシックな状況、最もベーシックなブロガーが使えるモノでなければいけない。僕たちが作ったモノを、皆が簡単にレバレッジでき、その上に別の素晴らしいモノを作れるよう、もっと容易にしなければいけない。さらに、僕たちにお返ししてくれれば、自分だけのモノを作るより、より良いモノ（注：WordPress）を作れるし、あなたが作ったモノもより良くできるし、みんなの時間も節約できる。
  • これが僕のゴールだ。もし何かクレイジーなメディア・アプリケーションとか作りたければ、これ（注：今回の新機能）がサポートできるはず。サポートできないようであれば教えてください。

WordPressがプラットフォームとしてブログやCMSに加えて、アプリケーションとして使われ始めています。WordPressが目指しているゴール「最高のパブリッシング・プラットフォームを作る」を踏まえた上で、この変化にコアがどう応えるのか。コア開発陣の考えているところが垣間見えると思います。（Darylの考えに賛同するかどうかは別として）もちろん、彼らが常に、必ず、正しいと言うわけではなく、むしろそこに割って入ってそのプロセスに参加できるのがオープンソース・プロジェクトだと思うのですが、どうでしょう。

追記：