課題
なでしこのプラグインを開発する際、いちいち貯蔵庫に保存してもいいかもしれないが、もっと気軽に試したい。
そこで、今回は PHP を用いてローカルのファイルをHTTPで取り込めるようにホストすることで、手元で書いているプラグインをWeb簡易エディタで実行できるようにする。
方法
JavaScriptでプラグインを書き、文字コード UTF-8 で保存する。
const plugin = {
'プラグインテスト': { type: 'const', value: 42 }, // @ぷらぐいんてすと
'meta': {
type: 'const',
value: {
pluginName: 'plugin_serve_test',
description: 'プラグインのテスト',
pluginVersion: '1.0.0',
nakoRuntime: ['wnako', 'cnako', 'phpnako'],
nakoVersion: '3.6.0'
}
},
};
if (typeof navigator === 'object') {
navigator.nako3.addPluginObject('plugin_serve_test', plugin);
} else if (typeof module !== 'undefined') {
module.exports = pluginObj;
}
作成したプラグインを、取り込んでもらうためのヘッダを追加して配信するためのPHPのコードを用意する。
readfile()
を用いることで、指定したファイルの内容を出力できる。
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/javascript');
readfile('plugin.js');
Content-Type
の指定は、無くても動くようである。
とはいえ、あったほうが気持ちいいだろう。
上記2個のファイルが置かれたディレクトリで、PHPの簡易サーバーを立てる。
php -S 127.0.0.1:8901
なでしこ3 Web簡易エディタでプラグインを用いるコードを実行する。
!「http://localhost:8901/serve.php#.js」を取り込む
プラグインテストを表示。
以下のように、無事に実行することができた。
https
が用いられている簡易エディタのページから http
のプラグインを取り込んでいるが、問題なく取り込めるようである。
フラグメントなしのURLを用いた
!「http://localhost:8901/serve.php」を取り込む
を用いると、
[エラー]NakoError: [取り込みエラー]main.nako3(1行目): ファイル『http://localhost:8901/serve.php』は拡張子が(.nako3|.js|.js.txt|.mjs|.mjs.txt)以外なので取り込めません。
というエラーが出てしまい、取り込めなかった。
しかし、#.js
というフラグメントをつけることで、書かれている以外の拡張子 (.php
) でも取り込むことに成功した。
https
ではなく http
でホストしているため取り込めないときは、cloudflared を用いて https
でのアクセスを可能にすると取り込める可能性がある。
Cloudflare の ngrok的なサービスがあるらしい ⇒ $ cloudflared tunnel --url localhost:8080 といった使い方 #ArgoTunnel - Qiita