JavaScript」カテゴリーアーカイブ

プログラミング言語「JavaScript」に関するカテゴリーです。

JavaScriptでHTML5の<video>を操作する方法

HTML5で追加された<video>タグを使うと簡単に動画を表示することができます。

<video id="video" src="video.mp4"></video>

標準では再生や一時停止などを行う操作パネルが表示されていませんが、controlsを追加することで、操作パネルを表示することもできます。

<video id="video" src="video.mp4" controls></video>

この<video>をJavaScriptから操作したい場合は次のような感じで実装できます。

<video>を再生する

var element = document.getElementsById('video');
element.play();

<video>の一時停止する

var element = document.getElementsById('video');
element.pause();

他、特定の位置にシークしたり、ボリュームを調整したりといった操作もJavaScriptからできるようになっています。詳細はリンク先などを確認してみてください。

リンク

HTMLMediaElement – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

<video>: The Video Embed element – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video

UnityのWebGLゲームを外部からJavaScriptで操作する方法

UnityでビルドしたWebGLのゲームを外部からJavaScriptで操作したい場合、unityInstanceSendMessageを使うと実装できるみたいです。注)

実装の仕方

WebGLでビルドするとindex.htmlというファイルが作られると思いますので、<body>から</body>の間のどこかに

<input type="button" value="ボタン" onclick="…">

のような感じでコードを追加します。

このonclickの部分でunityInstance.SendMessageを実行すればWebGLのゲームにメッセージを送ることができるみたいです。

ExampleオブジェクトのFunctionメソッドを呼び出したい場合

unityInstance.SendMessage('Example', 'Function');

ExampleオブジェクトのFunctionメソッドにvalueを引数として渡して呼び出したい場合

unityInstance.SendMessage('Example', 'Function', value);

※メッセージを送るトリガーとしてボタンを使う必要はありませんので、その辺りは適当に読み替えてください。

リンク

Unity – Manual: WebGL: Interacting with browser scripting
https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html


注) 古いドキュメントではgameInstanceとなっている場合もありますが、Unity 2019.1以降はunityInstanceに変更されたそうです。

jQueryを使わないで要素を取得したりクリックイベントを設定したりする方法

jQueryを使った

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

のような事を、jQueryを使わないJavaScriptで実装したいと思って少し調べてみました。

要素の取得

id属性が設定されている要素(例: <div id="example">example</div>)はgetElementByIdを使って取得できます。

var element = document.getElementById('example');
console.log(element);

特定のclass属性が設定されている要素(例: <div class="example">example</div>)を取得したい場合はgetElementsByClassNameを使います。

var elements = document.getElementsByClassName('example');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

特定のタグが設定されている要素(例: <div>example</div>)を取得したい場合はgetElementsByTagNameを使います。

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

ちなみに、forの部分は

Array.prototype.filter.call(elements, function(element){
  console.log(element);
});

のような感じで書くこともできるみたいです。

要素にイベントを設定

取得した要素にクリックイベントを設定するにはonclickを使って

element.onclick = function(e){
  console.log('clicked');
};

のようにするか、addEventListenerを使って

element.addEventListener('click', function(e){
  console.log('clicked');
});

のような感じで設定できます。

<a>タグとか、クリックイベントが期待通りに設定できない場合は

e.preventDefault();

を試してみてください。

属性値の取得

例えば、<img>の属性値alt(例: <img src="example.jpg" alt="example">example)を取得したい場合はgetAttributeを使って次のようにします。

var text = element.getAttribute('alt');
console.log(text);

まとめ

ということで、最初の

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

をjQueryを使わないで実装してみると、次のような感じになります。

var elements = document.getElementsByTagName('img');
Array.prototype.filter.call(elements, function(element){
  element.addEventListener('click', function(e){
    var text = e.getAttribute('alt');
    console.log(text);
  });
});

リンク

Document.getElementById() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Document.getElementsByClassName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Document.getElementsByTagName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

GlobalEventHandlers.onclick – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

EventTarget.addEventListener() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Event.preventDefault() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Element.getAttribute() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute