WordPress と、Riot カスタムタグの MIME Type について

Riot.js Advent Calendar 2016 の6日目です。

狙ったわけではないのですが、今日は WordPress 4.7 のリリース予定日！

(追記: タイムゾーンの都合で、日本時間では翌朝にリリースされました。)

今回のリリースで、ついに REST API のコンテンツエンドポイントが WordPress コアの機能になりました！

WordPress は何と言ってもたくさんのサイトで使われています。
今日の時点で W3Techs の統計を見たら世界の27.2% の Web サイトが WordPress で出来ていて、かつ CMS を利用している日本語サイトに絞ると80.3%ということでした。

今回のアップデートで、世界中のたくさんの Web サイトから記事の API が出ることになるでしょう。
わくわくしますね。

Riot + WordPress

というわけで、Riot + WordPress をテーマに何か書こうと思ったのですが、実はすでに記事を2本書いています。

はじめての人にオススメの記事

• 「WordPress ユーザーのための Riot.js 入門」で知る、Riot.js を始めるべき理由
• 「WordPress ユーザーのための Riot.js 入門」デモの使い方

記事中のサンプルコードも、なかなかわかりやすくできたんじゃないかと思っております。

「WordPress の API を Riot でさわってみたい！」「とりあえず動かしたい！」という方にとてもオススメの記事となっておりますので、ぜひお読みください。

今回はこまかい話です。

というわけで、今回はちょっと突っ込みまして Riot カスタムタグの type="riot/tag" の部分を wp_enqueue_script で扱えないよ〜、 という話を取り上げます。

Riot タグの読み込みは 「type="riot/tag"」

ふつう JavaScript 読み込むときって、 type 属性にこんなふうに指定しますよね。

<script src="riot+compiler.js" type="text/javascript"></script>

それが、Riot のドキュメンテーションに従うと、カスタムタグを読み込むときはこう変更することになっています。

<script src="todo.js" type="riot/tag"></script>

「type="riot/tag"」とは「MIME Type」である

この type って属性が何なのか、恥ずかしながら知らなかったんですが「MIME Type」と呼ぶそうで、読み込むファイル形式を指定します。なんだか昔 Outlook Express で見たたことある気がします。

おそらく、これを指定すればブラウザが間違って普通の JavaScript として読み込まなそうですし、Riot さんがただしくカスタムタグを認識できるのだと思われます。

「タグの書式がすっきりわかりやすい」が売りの Riot にとって、重要な属性と言えそうです。

「wp_enqueue_script」では MIME Type を変更できない

そこで問題なのですが、WordPress の wp_enqueue_script 関数では、どうやら MIME Type 属性を変更するオプションがないようなのです！

「wp_enqueue_script」 とは何か

wp_enqueue_script とは何かというと、WordPress に対し、利用する JavaScript を知らせる関数です。

WordPress を利用していると、コア・テーマ・各種プラグインがそれぞれ JavaScript を使用するわけですが、それらの依存関係などを管理してくれる便利な機能です。
WordPress テーマを作る人には必須。
ヘッダに直接書くのは非推奨です。

ふだんの wp_enqueue_script の書き方

この wp_enqueue_script を、普段通り書いたらこうなるはずです。
以下は Riot と、ｊQuery 入りのカスタムタグを定義する（雰囲気の）例。

functions.php

function my_theme_name_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'riot', get_template_directory_uri() . '/js/riot+compiler.min.js', array(), false, true);
    wp_enqueue_script( 'my-theme-custom-tag', get_template_directory_uri() . '/js/main.tag', array('jquery','riot'), false, true);
    wp_add_inline_script( 'my-theme-custom-tag', 'riot.mount("*")' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_name_scripts' );

が、これだと main.tag も type="text/javascript" で出力されてしまい動かないのでした。。。

現状では footer.php とかに直接記述するしか無さそうです。
@kouichi_hoshi さんがコメント欄にて、いますぐできる MIME Type のうまい置換方法を教えてくれました！ぜひ参考にしてみてください

理想の wp_enqueue_script の書き方

さきほどのコードの中、最後の引数をこんなふうにできたらうれしいですよね。

functions.php

    wp_enqueue_script( 'my-theme-custom-tag', get_template_directory_uri() . '/js/main.tag', array('jquery','riot'), false, true, 'riot/tag');

Script の MIME type ってどれくらいあるのだろう

さて、そうとなったら次は、WordPress のコア開発者たちを説得する方法を考えます。

ただし Riot のためだけの対応は、やってくれない可能性が高いでしょう。
他にも MIME type の変更が必要な形式が、世の中に存在するかどうかを調べます。

(๑•﹏•)

(๑•﹏•)

(๑•﹏•)

** ECMAScript も MIME type 指定をするようです!!!!！**

いや、でも ECMAScript が MIME type の指定する必要あるのかはわからないのですが。。。
ダメ元で WordPress の Core Trac に突撃しようと思うのですが、それをやっていたら今日がおわってアドベントカレンダーにならなくなってしまうので、今日はここまでですー。

はやく WordPress で Riot が enqueue できるようになるといいですね！

明日は 79yuuki さんの「仕事で使った riot.js 周りの構成とか」です、お楽しみに！