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

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

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

jQuery elementを配列に変換する方法

<a>タグのhrefを調べたい場合

$('a').each(function(){
  console.log($(this).attr('href'));
}

のような感じで使うことが多かったのですが、使いたいプラグインの関係で配列に変換する必要があり、簡単な方法を調べてみました。

ということで、mapmakeArrayを使って次のような感じで配列に変換できるみたいです。

var elems = $('a').map(function(){ return $(this).attr('href'); });
var ar = $.makeArray(elems);

console.log(ar);

実行結果

Array(3) [ "https://example.com/", "https://example.net/", "https://example.org/" ]

リンク

jQuery.makeArray() | jQuery API Documentation
https://api.jquery.com/jquery.makeArray/

.map() | jQuery API Documentation
https://api.jquery.com/map/


jQuery elementをわざわざ配列に変換する機会は多くないと思いますが、必要になったら参考にしてみてください。