なでしこv3ブラウザ版で画像を扱う

[前回](https://qiita.com/oza-jv/items/2552bee6774e325b2889)作ったプラグイン試作バージョン[plugin_media.js](https://oza-jv.github.io/plugin_media.js)には，画像を扱う命令も作ってあるので，今回はそれのまとめを書きたいと思います。

この記事は、なでしこのv3ブラウザ版で実行できるようにしています。

# v3ブラウザ版で画像ファイルを表示したい

以下に，自分が悩んだ経過をまとめていますが，[完成したテストプログラムはここ](https://oza-jv.github.io/sample-pic.html)に置いておきます。

## 標準の命令

なでしこv3ブラウザ版では，キャンバスの中に画像を読み込む`画像描画`という命令が用意されています。

```
[dx,dy]に「(ファイルのURL)」を画像描画。
```

この命令は音声の時と同様，ローカルで画像ファイルを用意して表示したい時に，`file:///d:/xxx.jpg`のようにローカルパスを指定できませんでした。

どうしてもローカルのファイルを表示したかったので，音声の時と同様に，HTMLファイル内になでしこのプログラムを組み込んで，プラグインで命令を追加して表示する方法を試みました。

# ローカルで音声ファイルを再生する

## フォルダとファイルの準備

まず，自分のPC上（WindwosでもChromebookでも同じです）に，プログラムを保存するためのフォルダを作ります。
その中に，HTMLファイル，画像ファイル，プラグインファイル(試作バージョン[plugin_media.js](https://oza-jv.github.io/plugin_media.js))を入れておきます。
詳細は[前回](https://qiita.com/oza-jv/items/2552bee6774e325b2889)と同じです。

## plugin_media(試作)の画像関連部分

今回作った命令は`絵追加`，`絵読込`の2つです。

```plugin_media.js
// 今回のサンプルに関係する部分のみ抜き出しています。

const PluginMedia = {
  // --- 画像関係 ---
  '絵追加': { // @img要素を追加して，aPicファイルを読み込む。 //@エツイカ
    // pIDを指定するとそれを親要素とする。省略するとdefault親要素の子要素として追加。
    // 生成されたid名を返す。
    type: 'func',
    josi: [['を'],['へ', 'に']],
    isVariableJosi: true,
    return_none: true,
    fn: function (aPic, ...pID) {
      try {
	      const sys = pID.pop();
	      var parent = sys.__v0['DOM親要素'];
	      if ( pID.length > 0 ) {
	        parent = document.querySelector("#" + pID[0]);
	      };
	      const img = document.createElement('img');
	      img.src = aPic;
	      img.id = 'nadesi-dom-' + sys.__v0['DOM生成個数'];
	      parent.appendChild(img);
	      sys.__v0['DOM生成個数']++;
	      return img.id;
	  } catch(e) {
		// エラーを表示
	    window.alert('絵追加 ' + e.message);
	    return -1;
	  }
    }
  },

  '絵読込': { // @id=aIDの画像をaPicに差し替える // @エヨミコミ
    type: 'func',
    josi: [['に'],['を']],
    fn: function (aID, aPic, sys) {
      try {
        const parent = document.querySelector("#" + aID);
        parent.src = aPic;
      } catch(e) {
		// エラーを表示
	    window.alert('絵読込 ' + e.message);
	    return -1;
      }
    }
  }
}

// モジュールのエクスポート(必ず必要)
if (typeof module !== 'undefined' && module.exports) {
  module.exports = PluginMedia
}
//プラグインの自動登録
if (typeof (navigator) === 'object') {
  navigator.nako3.addPluginObject('PluginMedia', PluginMedia)
}
```
`「(ID名)」に「(ファイル名)」に絵読込`とすると，すでに存在するimg(指定したID名のもの)の画像ファイルを読み込みます。

`ID=「(ファイル名)」を絵追加`とすると，img要素を新たに追加して，ファイル名にある画像を表示します。その時，img要素に付けたIDの文字列を戻り値として返します。これを，変数に保存しておくと，その位置の画像を後で別ファイルに切り換えることができます。

## 画像を扱うプログラム例(HTML+なでしこ)

次のサンプルは，ボタンを押すと画像が切り替わります。

```
Ｐ１＝「kujira.png」。
Ｐ２＝「lion.gif」。

ID＝Ｐ１を絵追加。
ボタン１＝「絵を切り換え」のボタン作成。
ボタン１をクリックした時には
　　IDにＰ２を絵読込。
ここまで。
```

実行結果は[こちら](https://oza-jv.github.io/pic1.html)。

> 実行画面
![pic1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942750/69164821-bea2-8936-f77e-0975feb718e2.gif) →ボタンを押すと→ ![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942750/9bdbbeb7-e525-8c75-6b18-fdf5ea7574f7.png)

## もうちょっと作り込んだサンプル

ということで，なんだか面白くなってきたので，もうちょっと作り込んでみました。

```sample-pic.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>なでしこ　画像読込のテスト</title>
</head>

<body>
<h1>なでしこ３ブラウザ版で画像を扱うテスト</h1>

<div>↓★あらかじめ埋め込んだimg要素 id=img1</div>
<img id="img1" src="test1.png" width="160"></img>
<hr />
<div>↓プラグインで定義した命令で追加していくエリア id=div1</div>
<div id="div1"></div>
<hr />
<div>※画像素材は，なでしこv1に同梱のもの を使用。</div>

<!-- なでしこ3のエンジンを取り込み -->
<script type="text/javascript" src="https://nadesi.com/v3/cdn.php?v=3.1.8&f=release/wnako3.js&run"></script>
<!-- プラグインを取り込み -->
<script type="text/javascript" src="plugin_media.js"></script>

<!-- なでしこのプログラム -->
<script type="なでしこ">
// 初期設定 -- HTML内でなでしこを使うときは必ず実行する
結果領域＝「#div1」。
結果領域へDOM親要素設定。結果領域に「」をHTML設定。

// 定数の定義と初期設定
埋込絵ID＝「img1」。  // あらかじめ埋め込んだimg要素のID
Ｐ１＝「kujira.png」。
Ｐ２＝「lion.gif」。
Ｐ３＝「penguin.gif」。
Ｐ４＝「file:///d:/test.png」。

// あらかじめ埋め込んだimg要素に画像を読み込む
埋込絵IDにＰ１を絵読込。    //  #1
ＦＮ＝１。

// コントロールボタンの設置
ボタン１＝「★上の絵を切り換え」のボタン作成。
ボタン１をクリックした時には
　　もし、ＦＮ＝１ならば
　　　　埋込絵IDにＰ２を絵読込。
　　　　ＦＮ＝２。
　　違えば
　　　　埋込絵IDにＰ１を絵読込。
　　　　ＦＮ＝１。
　　ここまで。
ここまで。
改行作成。

// img要素を動的に追加する
動的絵ID＝Ｐ２を絵追加。  // 「絵追加」の戻り値は，生成したelementのID
改行作成。
「▲この絵のID={動的絵ID}」を書く。
ＦＮＮ＝２。

ボタン２＝「▲この絵を切り換え」のボタン作成。
ボタン２をクリックした時には
　　もし、ＦＮＮ＝２ならば
　　　　動的絵IDにＰ３を絵読込。
　　　　ＦＮＮ＝３。
　　違えば
　　　　動的絵IDにＰ２を絵読込。
　　　　ＦＮＮ＝２。
　　ここまで。
ここまで。
改行作成。

ボタン３＝「↓絵を追加」のボタン作成。
ボタン３をクリックした時には
　　もし、ＦＮＮ＝２ならば
　　　　Ｐ３を絵追加。  // #2
　　　　ＦＮＮ＝３。
　　違えば
　　　　Ｐ２を絵追加。
　　　　ＦＮＮ＝２。
　　ここまで。
ここまで。
改行作成。

</script>
</body></html>
```

ここまで作って，[HTMLファイルをブラウザで開く](https://oza-jv.github.io/sample-pic.html)と，ボタンを押して画像を切り替えたり，画像が増えたりするので，ちょっと面白いです。

**#1**では，`<id名>に<ファイル名>を絵読込`と書いています。あらかじめ組み込んでいる`id=img1`のimg要素に，ファイル名を設定しています。ローカルで作っている場合，ファイル名には`file:///d:/xxx.jpg`形式も使えます（やったね！）。

**#2**のように，`<ファイル名>を音追加`と書いた場合は，なでしこ側で「DOM親要素設定」しているidの子要素としてimg要素を追加します。`<親id>へ<ファイル名>を絵追加`とすると，親IDの子要素としてimg要素を追加し，指定したファイルを読み込みます。

## 最後に

なでしこv1では，今回のように画像を手軽に扱えたり，「[画像ネガポジ](http://nadesi.com/man/index.php?%e7%94%bb%e5%83%8f%e3%83%8d%e3%82%ac%e3%83%9d%e3%82%b8)」等の命令を使って画像を手軽に加工できたりしたので，面白かったんですよね。それがv3でもできるといいなと思って，今回のプラグインを作ってみた次第です。（ところが，最近の子どもたちは「ネガ」「ポジ」がどういう意味なのか，全く知らない様子で…）。

ということで，さらに調子に乗って動画も表示できるようにしたので，それは別の記事にします。

一応，音，画像，動画を扱えるようにした試作バージョン[plugin_media.js](https://oza-jv.github.io/plugin_media.js)を置いておきます。間違っていたらアドバイスをいただけると嬉しいです。

## 参考

- v3マニュアル [画像描画](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E7%94%BB%E5%83%8F%E6%8F%8F%E7%94%BB&show)
- なでしこv3 [ユーザープラグイン](https://nadesi.com/v3/doc/index.php?%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3&show)
- [プラグインAPIの仕様](https://github.com/kujirahand/nadesiko3/blob/master/doc/plugins.md)
- v1マニュアル [画像処理関連](http://nadesi.com/doc/cmd-func.htm#k62)