2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

なでしこv3ブラウザ版用 HTMLテンプレートとplugin_mediaプラグイン

Posted at

日本語プログラミング言語「なでしこ」のv3ブラウザ版で,音声,静止画,動画を扱うためのプラグイン。ローカルにあるファイルも扱える。ChromeBookでも使える。
そのためには,簡易エディタではなく,下のHTMLテンプレート内に「なでしこ」のプログラムを記述する必要がある。

テンプレ

次のリンクを右クリックして「リンク先を保存」する。
テンプレート内の「プラグインを読み込む」辺りを修正すれば,他のプラグインを利用することももちろん可能。

使い方

###(1)同一フォルダに全てのファイルを入れる。
自分のPC上(WindwosでもChromebookでも同じ)に,プログラムを保存するためのフォルダを作り,その中に,次のファイルを入れておく。

  • なでしこのプログラムを実行するためのHTMLファイル(テンプレを修正したもの。ファイル名は適宜修正しておく。)
  • 利用したい音声ファイル,画像ファイル,動画ファイル。 ※ファイルサイズが小さい方がスムーズに動作する。
  • plugin_media.jsをダウンロードして同じフォルダへ入れておけば,ネットワーク環境が無くても実行可能。

フォルダの例
pic1.PNG

###(2)テンプレHTMLを修正して,自分のプログラムファイルを作る。

  • テンプレ内の<body>要素の前半で,画面レイアウトをあらかじめhtmlで作っておく。
  • <body>要素の後半では,なでしこ3のエンジンを読み込む処理と,今回作ったプラグインplugin_mediaを読み込む処理がある。
  • //初期設定にある2行は,必ず実行する。その続きから,なでしこのプログラムを書いていく。

###(3)プログラムを実行したいときは,作成したHTMLファイルをブラウザで開く。

  • プログラムに誤りがあると,画面上に何も表示されない(consoleにエラーが出ている)ので,HTML内の「なでしこ」プログラムを見直す。
  • よくある間違いとして,「、(読点)」を「,(カンマ)」で入力しているとエラーになる。

###(4)学校の授業などでプログラムを提出するときは

  • 上記(1)で作成したフォルダ内のファイルを全て提出する。作成したHTMLファイルだけを提出しても,音や画像等が表示されない。

plugin_mediaを使ったサンプル

参考

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?