ColabにUIをつける小技集

#ColabにUIをつける

Google Colabratory NoteBook で **UIを表示できます。**
入力フォームやボタンなど、他の人に使ってもらうときに便利です。
**フォームの値は、セルの値に反映されます。**
[**実際のColabNoteBookサンプル**](https://colab.research.google.com/drive/1mTkZQ0daeGyvVtHYoprznAP_tnYl2rJD?usp=sharing)
![スクリーンショット 2020-12-20 2.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/a0ad1a9d-10b6-8407-7f88-08f8121a2505.png)
![スクリーンショット 2020-12-20 1.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/bfa6389e-e45f-c5e2-b147-85a93f16cecf.png)



###セルタイトル

```python

#@title セルのタイトル
```
![スクリーンショット 2020-12-20 0.58.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/01e4c501-147c-f099-f6ba-b598fd24ec52.png)

###入力フォーム

フォームの内容をセル内の変数に反映できます。

```python
variable = "フォームが変数に反映されます"#@param {type:"string"}
# 数値の場合は　#@param {type:"number"}
```
![スクリーンショット 2020-12-20 1.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/1cff2a91-0af4-ddf3-4895-647355c4c648.png)

###セレクトボックス

```python

dropdown = 'value' #@param ["1st option", "2nd option", "3rd option"] {allow-input: true}
```
![スクリーンショット 2020-12-20 1.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/ad7afe55-954e-bdb4-fad1-1c956556e20e.png)

###日付入力

```python

date_input = '2018-03-22' #@param {type:"date"}
```

![スクリーンショット 2020-12-20 1.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/1c0ad24d-9f90-cde0-403f-01d06e23a823.png)

###スライダー

```python

number_slider = 0.1 #@param {type:"slider", min:-1, max:1, step:0.1}
```
![スクリーンショット 2020-12-20 1.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/567dd16d-f1d1-045f-e908-b7abd540713c.png)

###チェックボックス

```python

boolean_checkbox = True #@param {type:"boolean"}
```
![スクリーンショット 2020-12-20 1.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/8904d77a-fbfd-bcac-973f-e0527929c84b.png)

###マークダウン

```python

#@markdown ---
#@markdown #Big
#@markdown ###Middle
#@markdown #####Little
#@markdown ---

```
![スクリーンショット 2020-12-20 2.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/97c327f9-f437-f1a9-6f3f-0eb5f02d0970.png)

###DOMでボタン表示

```python

from IPython.display import display, Javascript
from google.colab import output
from google.colab.output import eval_js


js = Javascript('''
            async function load_image() {
                const div = document.createElement('div');
                var button = document.createElement('button');
                var log = document.createElement('div');

                button.textContent = "button";
                button.onclick = function(){
                    log.innerHTML = "Button Clicked.";
                }
                div.appendChild(button)
                div.appendChild(log)

                document.querySelector("#output-area").appendChild(div);
                return
                } ''')

display(js)
eval_js('load_image()')
```
![スクリーンショット 2020-12-20 1.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/810e3696-027f-5aab-d8a4-b6a389514fe6.png)

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)