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

[Riot.js Advent Calendar 2016](http://qiita.com/advent-calendar/2016/riotjs) の6日目です。

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

![スクリーンショット 2016-12-06 15.50.57.png](https://qiita-image-store.s3.amazonaws.com/0/62232/710cbe7a-f404-fa58-1eb6-006b323f630f.png)

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

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

WordPress は何と言ってもたくさんのサイトで使われています。
今日の時点で W3Techs の統計を見たら[世界の27.2% の Web サイトが WordPress で出来て](https://w3techs.com/technologies/details/cm-wordpress/all/all)いて、かつ [CMS を利用している日本語サイトに絞ると80.3%](https://w3techs.com/technologies/segmentation/cl-ja-/content_management)ということでした。

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

![スクリーンショット 2016-12-06 15.50.54.png](https://qiita-image-store.s3.amazonaws.com/0/62232/13df6d76-271d-5de4-bbf0-0e85b0714b90.png)


# Riot + WordPress

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

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

- [「WordPress ユーザーのための Riot.js 入門」で知る、Riot.js を始めるべき理由](http://blog.mayuko.me/post-02626/riot-js-is-friendly-with-wordpress-users/)
- [「WordPress ユーザーのための Riot.js 入門」デモの使い方](http://blog.mayuko.me/post-02518/wordbench-tokyo-october-riotjs/)

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

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


## 今回はこまかい話です。

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

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

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

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

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

```HTML
<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`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) 関数では、どうやら **MIME Type 属性を変更するオプションがない**ようなのです！

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

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

## ふだんの wp_enqueue_script の書き方

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

```php: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 さんが[コメント欄](#comments)にて、いますぐできる MIME Type のうまい置換方法を教えてくれました！ぜひ参考にしてみてください

# 理想の wp_enqueue_script の書き方

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

```php: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](http://qiita.com/79yuuki) さんの「仕事で使った riot.js 周りの構成とか」です、お楽しみに！