Google ColabでJavaScript!
PythonであればGoogle Colabが便利に使えます。(Googleアカウントが必要ですが)このColabですがJavaScriptも実行できるということを最近知り、ちょっと使ってみましたので記録しておきます。
JavaScriptは単独で表示することはできないので、まずは、JavaScriptを使わずにHTMLのみで表示します。
%%html
<h1>Title</h1>
<h2>title</h2>
<p>taro</p>
と書くことでHTMLを表示させることができます。
表示は
となり、h1,h2タグの違いも表示できています。
JavaScriptを試してみます。
%%javascript
console.log('Hello')
と書いて実行すると開発者ツールのコンソールに出力されます。コンソール出力に関してはブラウザそのものでの処理となるようです。
HTMLとの組み合わせで表示させてみます。Pythonでの命令の中でJavaScriptを実行しています。
import IPython
js_code = '''
document.querySelector("#output-area").appendChild(document.createTextNode("hello world!"));
'''
display(IPython.display.Javascript(js_code))
これで"hello world!"と出力されます。
もう少し複雑なもの
import IPython
from google.colab import output
display(IPython.display.HTML('''
The items:
<br><ol id="items"></ol>
<button id='button'>Click to add</button>
<script>
document.querySelector('#button').onclick = () => {
google.colab.kernel.invokeFunction('notebook.AddListItem', [], {});
};
</script>
'''))
def add_list_item():
# Use redirect_to_element to direct the elements which are being written.
with output.redirect_to_element('#items'):
# Use display to add items which will be persisted on notebook reload.
display(IPython.display.HTML('<li> Another item</li>'))
output.register_callback('notebook.AddListItem', add_list_item)
実行すると、
と出力されるので、"Click to add"を押すと"1. Another item"が追加されます。
おまけ。Colabの使い方が紹介されているサイトです。
この記事が気に入ったらサポートをしてみませんか?