なでしこ３は、なでしこ3のスクリプトファイルを取り込むことにより、JavaScriptの代わりに利用することができるようになっています。
また、なでしこ3貯蔵庫(nako3storage)を使うとより手軽にプログラムを配布できます。
HTMLに以下のJavaScriptのコードを記述します。HTMLに以下の一行を付け加えるだけです。
<script src="https://nadesi.com/v3/cdn.php?v=3.3.71&f=release/wnako3.js&run"> </script>
そして、『<script type="なでしこ">...</script>』と記述すると、なでしこのプログラムを実行できます。
以下、利用例です。
<html><body> <!-- なでしこのプログラム --> <script type="なでしこ"> 「こんにちは」と言う。 </script> <!-- なでしこの実行エンジンを取り込む --> <script src="https://nadesi.com/v3/cdn.php?v=3.3.71&f=release/wnako3.js&run"></script> </body></html>
ちなみに「wnako3.js」を取り込むだけでは、最低限のシステム命令とブラウザ命令が使えるだけです。それで、タートルグラフィックスを利用したい場合は、タートルグラフィックスのプラグインをscriptタグで取り込みます。
<script src="https://nadesi.com/v3/cdn.php?v=3.3.71&f=release/plugin_turtle.js" ></script>
プラグインの一覧がこちらにあります。
なお、なでしこ3簡易エディタでは、以下のようにプラグインを読み込んでいます。
<!-- なでしこエンジン --> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/wnako3.js&run'></script> <!-- 関連プラグイン --> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/plugin_csv.js'></script> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/plugin_datetime.js'></script> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/plugin_markup.js'></script> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/plugin_kansuji.js'></script> <script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/plugin_turtle.js'></script> <!-- chart.js を使う時 --> <script defer src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>
以下にintegrity 属性をつけたscript要素一覧があります
URLには、バージョン番号が入ります。xxxの部分には、なでしこ3の最新版のバージョンを入れてください。oooの部分にはファイル名を入れます。
【なでしこのプログラムの自動実行モードを使う】 https://nadesi.com/v3/cdn.php?v=xxx&f=ooooo&run
【任意のタイミングでなでしこを実行する】 https://nadesi.com/v3/cdn.php?v=xxx&f=ooooo
最新版のなでしこを使うことをオススメしています。
上記のように「なでしこ」のエンジンを取り込むと、navigator.nako3 というオブジェクトが使えるようになります。そのsetFuncを使ってJavaScriptの関数を取り込めます。
<html><body>
<!-- なでしこのプログラムを記述 -->
<script type="なでしこ">
3と5をテスト加算。
</script>
<!-- なでしこエンジンの取り込み ---(*1) -->
<script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/wnako3.js'></script>
<script>
// JavaScriptで関数を作る
function testAdd(a, b) {
const c = a + b
alert(c)
}
// なでしこエンジンのロード完了時にカスタム関数を追加 --- (*2)
window.addEventListener('DOMContentLoaded', (e) => {
// なでしこに関数を追加
navigator.nako3.setFunc("テスト加算", [['と'], ['を']], testAdd)
// なでしこのプログラムを実行
navigator.nako3.runNakoScript()
})
</script>
</body><html>
ポイントとしては、(*1)でなでしこエンジンを取り込むときに、自動実行しないようにURL末尾のオプションrunをつけないようにします。
そして、(*2)でなでしこエンジンのロード完了時のイベントを指定します。ここでは、setFuncでカスタムJS関数を追加して、runNakoScriptで<script type="なでしこ">のスクリプトを実行します。
[書式] カスタム関数の登録方法
navigator.nako3.setFunc("関数名", 引数, JS関数オブジェクト, 戻り値がない関数か)
とは言え、JavaScriptが分かれば、カスタムなでしこプラグインを作ることもできます。