2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#はじめに
近所のハードオフで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
メタタグで指定した秒数後、再読み込みができるか確認

コード
<meta http-equiv="refresh" content="10">
他のブラウザと変わらず、任意の指定した秒数後 再読み込みができました。

###FONT
Kindleのフォントは "ゴシック"、"筑紫明朝"、"明朝"があるみたいです。

コード
<font size="3">これがデフォルト</font>
<font size="5" color="blue">フォントサイズ5,文字色を青色へ</font>
<font size="7" face="明朝">フォントサイズ7,フォントを"明朝"へ</font>
![font.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331782/a5dbe334-3cc4-6343-0bc9-62f2da40d2aa.jpeg) サイズは変わりましたが、フォントは変わりませんでした。

###BLINK
点滅。
NN独自の仕様だけど、kindleで動いたら面白いねと思ってやってみました。

コード
<blink>この部分</blink>が点滅するはず
点滅しませんでした...(◞‸◟)

###IMG
画像はどこまで表示できるか(種類、サイズなど)
今回はサンプル画像として、BlobEmojiの絵文字を表示させてみました。
PNG.png

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

###TABLE
テーブルの表示の仕方を見たい

コード
<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>

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

コード
<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>
テーブルや各種フォームも、他のブラウザとあまり変わらない表示です。 ![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

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

###audio
本体にスピーカーがないけど、どういう挙動になるか

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

###video
再生できるかな

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

###ruby
ルビ振り。どういう表示になるか

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

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

#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;
}
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とかが動くか
コード
<script>
    document.open();
    document.white("文字列");
    document.close();
</script>
文字列は表示されず、ほかの物も試してみましたがうまく動作しませんでした。

#WebGL編
WebGL Water (Made by Evan Wallace)
水の波形などをWebGLでレンダリングしシミュレーションできるサイトです。
レイトレをシミュレーションする機能もあります。
water.JPG
「Loading...」がずっと表示されるだけで、動作しませんでした...。

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?