Kindleの「ブラウザ(体験版)」で遊んでみた

#はじめに
近所のハードオフでKindle PaperWhiteのジャンク品が4,400円で売られていたので、
前から欲しかったし検証用にと購入。
本体と純正カバー、保護フィルム(貼られていた)がついてきました。

#検証した内容
- HTMLの各種タグが動作するか
- CSSでの修飾ができるか
- JavaScriptは動くか
- WebGLは動くか

なお画像は貼りたいところですが、一つ一つ貼ってると大変なことになるので、面白い挙動をしたところのみを掲載し、そのほかは省略させていただきます。

気になったらお手持ちのKindleで試してみるか、ハードオフへGO!!

#ブラウザ(体験版)の基本情報
###HTTP_USER_AGENT

```
Mozilla/5.0 (X11; U; Linux armv7l like Android; en-us) AppleWebKit/531.2+ (KHTML, like Gecko) Version/5.0 Safari/533.2+ Kindle/3.0+
```
よくあるブラウザ判定サイトでは"Safari"として判定されました。

#HTML編

###META
 メタタグで指定した秒数後、再読み込みができるか確認
 <details><summary>コード</summary><div>

 ```html
 <meta http-equiv="refresh" content="10">
 ```

 </div></details>
他のブラウザと変わらず、任意の指定した秒数後 再読み込みができました。

###FONT
Kindleのフォントは "ゴシック"、"筑紫明朝"、"明朝"があるみたいです。
<details><summary>コード</summary><div>

```html
<font size="3">これがデフォルト</font>
<font size="5" color="blue">フォントサイズ5,文字色を青色へ</font>
<font size="7" face="明朝">フォントサイズ7,フォントを"明朝"へ</font>
```

</div></details>
![font.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/a5dbe334-3cc4-6343-0bc9-62f2da40d2aa.jpeg)
サイズは変わりましたが、フォントは変わりませんでした。

###BLINK
点滅。
NN独自の仕様だけど、kindleで動いたら面白いねと思ってやってみました。
<details><summary>コード</summary><div>

```html
<blink>この部分</blink>が点滅するはず
```

</div></details>
点滅しませんでした...(◞‸◟)

###IMG
画像はどこまで表示できるか(種類、サイズなど)
今回はサンプル画像として、[BlobEmoji](https://blobs.gg/)の絵文字を表示させてみました。
![PNG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/b99fd335-1fb3-bf3c-2fc7-f2ded35b4fdd.png)

<details><summary>コード</summary><div>

```html
<img border="0" src="./GIF.gif" width="128" height="128" alt="gif" title="gif画像">
<img border="0" src="./PNG.png" width="128" height="128" alt="png" title="png画像">
<img border="0" src="./JPEG.jpg" width="128" height="128" alt="jpeg" title="jpeg画像">
```

</div></details>
![gazoupass.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/3b159427-7737-c21e-d4a3-773cd707ece6.jpeg)
.gif、.jpg、.png共に白黒で表示されました。(๑˃́ꇴ˂̀๑)

###TABLE
テーブルの表示の仕方を見たい
<details><summary>コード</summary><div>

```html
<table border="1">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
    </tr>
    <tr>
        <td>項目1</td>
        <td>項目2</td>
    </tr>
    <tr>
        <td>項目3</td>
        <td>項目4</td>
    </tr>
</table>
```

</div></details>

###FORM・INPUT
どんな感じで表示されるか・各種機能が使えるか・キーボードはどんな感じ
<details><summary>コード</summary><div>

```html
<form>
    <p>
        button<input type="button" value="ボタン">
    </p>
    <p>
        text<input type="text" size="50">
    </p>
    <p>
        password<input type="password" size="6" maxlength="10">
    </p>
    <p>
        radio<input type="radio" name="radio">1
        <input type="radio" name="radio">2
    </p>
    <p>
        select<select name="select">
            <option>項目1</option>
            <option>項目2</option>
        </select>
    </p>
    <p>
        textarea<textarea cols="30" rows="10"></textarea>
    </p>
    <p>
        file<input type="file">
    </p>
</form>
```

</div></details>
テーブルや各種フォームも、他のブラウザとあまり変わらない表示です。
![keyboard.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/42ee9ef0-a429-47fe-4831-30096843e20f.jpeg)
キーボードはこんな感じです。

```<input type="file">```は、ファイルを選択...のボタンは表示されるもの、
タップするとサポートされていないとのダイアログが表示され、使えませんでした。
![file.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/6fbfe1e3-098e-3caf-769b-ce2ad6d7d475.jpeg)


#HTML5編
HTML5で追加された要素について検証してみます。

###audio
本体にスピーカーがないけど、どういう挙動になるか
<details><summary>コード</summary><div>

```html
<audio src="audio.ogg" controls>
    <p>音声を再生できない場合の解説の文字列</p>
</audio>
```

</div></details>

###video
再生できるかな
<details><summary>コード</summary><div>

```html
<video src="video.mp4">
    <p>動画を再生できない場合の解説の文字列</p>
</video>
```

</div></details>

###ruby
ルビ振り。どういう表示になるか
<details><summary>コード</summary><div>

```html
<ruby>
    漢<rt>かん</rt>
    字<rt>じ</rt>
</ruby>
```

</div></details>
![audioruby.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/d2a6ef20-4958-f892-77e0-88dfaa5fbb0f.jpeg)
mp4の動画・.oggの音声 共に再生できず、代替の文字列が表示されました。

ルビふり(読み仮名)はちゃんと表示されてます！

#CSS編


<details><summary>コード</summary><div>

```css
h1 {
    text-align: center;
                margin: 0;
                padding: 0.6em 2em 0.4em;
                background-color: #294172;
                color: #fff;
                font-weight: normal;
                font-size: 1.75em;
                border-bottom: 2px solid #000;
}
```

</div></details>
HTML側では、h1で簡単なタイトルバー的なものを表示するように記述してあります。
![h1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/1e9e2068-7a2d-49dd-98b5-98d2b389f32f.jpeg)
ちゃんとCSSが適用されているようです！
#JavaScript編
document.whiteとかが動くか
<details><summary>コード</summary><div>

```javascript
<script>
    document.open();
    document.white("文字列");
    document.close();
</script>
```

</div></details>
文字列は表示されず、ほかの物も試してみましたがうまく動作しませんでした。

#WebGL編
[WebGL Water](http://madebyevan.com/webgl-water/) (Made by Evan Wallace)
水の波形などをWebGLでレンダリングしシミュレーションできるサイトです。
レイトレをシミュレーションする機能もあります。
![water.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/4b64eae7-5e1e-c8b4-548c-a43771f71f0f.jpeg)
「Loading...」がずっと表示されるだけで、動作しませんでした...。

#まとめ
筆者初Kindle端末だったので、いろいろとやってみましたが、これが一番おもしろかったと思います。
ほかの企画も考えて書いてみたいと思います！

みなさんもお手持ちのKindleでいろいろ試してみてくださいね！