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

以下に，自分が悩んだ経過をまとめていますが，完成したテストプログラムはここに置いておきます。

標準の命令

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

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

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

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

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

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

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

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にＰ２を絵読込。
ここまで。

実行結果はこちら。

実行画面
→ボタンを押すと→

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

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

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ファイルをブラウザで開くと，ボタンを押して画像を切り替えたり，画像が増えたりするので，ちょっと面白いです。

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

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

最後に

なでしこv1では，今回のように画像を手軽に扱えたり，「画像ネガポジ」等の命令を使って画像を手軽に加工できたりしたので，面白かったんですよね。それがv3でもできるといいなと思って，今回のプラグインを作ってみた次第です。（ところが，最近の子どもたちは「ネガ」「ポジ」がどういう意味なのか，全く知らない様子で…）。

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

一応，音，画像，動画を扱えるようにした試作バージョンplugin_media.jsを置いておきます。間違っていたらアドバイスをいただけると嬉しいです。

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