てけとーぶろぐ。

ソフトウェアの開発と、お絵かきと、雑記と。

Fire HD 10 タブレット(≒Androidタブレット)をPC風に使う(ソフトウェア編)

当初この記事を書こうと考えたときは以下の動画にあるような Linuxをインストールしてあれこれというのを紹介しようと思っていました。

【改造不要】Fireタブレットでデスクトップが使いたい!2/2 Termux編【Amazon Fire HD 10 Plus (2021)】 - YouTube

しかし実際にやってみて自分としてはAndroidへのLinuxのインストールは実用的ではないと感じました。 それで結局、人に勧められると思ったPC風に使う方法としては以下の2つとなりました。

それぞれについて説明します。

PCにリモートデスクトップ接続して使う

タイトルの通りです。接続先のPCはWindows, Mac, Linux どれでも。 Fire HD 10 タブレット にインストールするリモートデスクトップクライアントアプリとしては探した中では以下のいずれかが良さそうです。

使い方のポイントとしては設定で解像度を指定してやることです。 Fire HD 10 タブレット だと 1920x1200 が画面の解像度なので この縦横比になるように、かつ操作しやすい表示になるように、例えばこの75%とかの解像度を指定してやります。

Fire HD 10 タブレットの場合、Google Playがインストールされていないのでアプリがインストールしづらいですね…。 Google Play をインストールしたり、APKダウンロードサイトからダウンロードしてきたりもできそうではありますけど あまり紹介されていないやり方としては aRDP, bVNC についてはオープンソースなので、ソースコードからビルドしてAPKを作ってインストールするという手があります。

以下のサイトの Building に従って、あっさりビルドできました。

github.com

それから出先から接続するのであればPCに何らかの方法でインターネット経由で接続できるようにしなければなりません。 ngrokを使ったり、VPNを経由するのがいいと思います。

ngrok.com

VPN接続にはVPNクライアントが必要ですがOpen SSTP Clientなんかがおすすめです。 こちらもオープンソースで、こちらについては自分でビルドせずともGitHubからAPKがダウンロード可能です。

github.com

PC風にWebブラウザーを使う

Fire HD 10 タブレット に接続したキーボードとマウスを使ってPC風に操作できるWebブラウザーアプリを使ってWebブラウジングします。

タブバーを表示できるなど、PC風なUIになるWebブラウザーアプリを選ぶことになります。 以下をお勧めします。

いずれも公式サイトでAPKを配布しています。

Vivaldi Browser

以下のサイトの「Alternative download stores.」をクリックして表示される「Download the app (apk):」からダウンロードします。

vivaldi.com

Kiwi Browser 以下のサイトの「Download now (.APK)」からダウンロードします。

kiwibrowser.com

Kiwi Browser についてはChrome拡張が使える点も素晴らしいです。

Fire HD 10 タブレット(≒Androidタブレット)をPC風に使う(ハードウェア編)

自分は「タブレットは不要、結局PCが必要になるんだよね。」という意見なのですけど 先日安さと性能に惹かれてFire HD 10 タブレットを買ってしまいました。

せっかくなのでPC風に使えるのか試してみました。

結論を先に言ってしまうと、使うだけならこんなことをせずにLIFEBOOKなどの軽量ノートPCを買った方がいいです。 ただ用途によっては値段の割に使えますし、何よりどうすれば使いやすくなるかなとあれこれ考えて試すことが楽しいです。 そしてその中で気づきなどもあります。

今回気づいたことの中で特に共有しておきたいと思ったことはオープンソースAndroidアプリって結構あるんだなってことです。

Termux, aRDP, bVNC, XServer XSDL と今回主に使ったアプリはいずれもオープンソースでした。

前置きはこの辺にして早速やっていきます。まずはハードウェア編です。

ハードウェアって何のこと?かと思いますので説明しますと、PC風に使うためにFire HD 10に追加で必要なもののことです。キーボード、マウスなどです。

追加で必要なものを選ぶ際には主に重量・携帯性、使いやすさを重視しています。 特に重量・携帯性はタブレットをPC風に使う上でノートPCといい勝負ができる数少ない点だと思います。

それであれこれ考えて以下に落ち着きました。

折りたたみスティック型スタンド

重量、開きやすさ、角度調整の自由さを考えるとこういうスタンドだと思います。

item.rakuten.co.jp

TPUケース

ごく普通のTPUケースです。いろいろなところで似たようなものが売られていると思います。 TPUケースをつけて、TPUケースに上記のスタンドを貼り付けています。 傷を気にしない人はTPUケースは使わずタブレットに直接スタンドを貼ってしまうと更に軽くなるかと思います。

ガラスフィルム

これまたごく普通のガラスフィルムです。傷を気にしない人は不要かと…。

Bluetoothキーボード

キーボードの接続方法はつなぎやすさや持ち運びの妨げにならないことを考えるとBluetoothではないでしょうか。 そして、重量、英語配列、Ctrlキーの位置、それなりのうちやすさといったところでこれに落ち着きました。 いまのところ問題なしですけど耐久性があるのか不明です。

Bluetoothマウス

薄さ、重量、使いやすさでこれに落ち着きました。鉄板のロジクール

Reader CaptureでKindle for PCの電子書籍をPDFにする手順の変更

電子書籍をPDFファイル/ZIPファイルに変換できるWindows用アプリReader CaptureKindle for PCの電子書籍をPDFにする手順に変更があったのでお知らせします。

どうも最近Kindle for PCは、書籍によって、フルスクリーンにしても画面の上辺・下辺に細い枠線が表示されるようになったようです。

この場合にReader Captureでうまくキャプチャーするには、固定トリミングを今までの左右に加えて、上下に 上: 1、下: 1 と設定する必要あります。

最新の Reader Capture 1.15.0.0 ではこれをデフォルトの設定としました。

Reader CaptureでKindle for PCの電子書籍をPDFにする手順の全体は Reader Capture - 電子書籍をPDFファイル/ZIPファイルに変換! をご参照ください。

細かいことを言うと、上辺・下辺に細い枠線が表示されない場合は、固定トリミング 上: 1、下: 1 となっていると1ピクセル切れてしまうことになるんですよね。 気になる方は「範囲選択機能」で細い枠線があるのかチェックするといいかもしれません。

格安HDMIキャプチャーボードでスマホをラズパイのディスプレイにする

ラズパイ(Raspberry Pi 2 Model B)にUbuntuをインストールして家庭内サーバーにしようとしました。

以下の記事の手順に従えばラズパイにディスプレイもキーボードもつなぐことなくSSHログインしてセットアップができるはずなのですが、なんだかんだ、はじめだけちょっとディスプレイをつないで確認しながらやりたくなりました。

zenn.dev

かといってこれのために5千円以上かけてディスプレイを買うのも…となっていたところに使えそうなものを見つけました。 それがこの格安のHDMIキャプチャーボードです。

これにUSB 変換アダプタとHDMIケーブルをつないで、Androidスマホとラズパイをつなぎます。

スマホで以下のアプリを起動しておけばスマホが簡易ディスプレイになります。

play.google.com

ただし画面の表示の様子はこんなですので長時間の作業には向きません。

スクリーンショット

このHDMIキャプチャーボード、えらい安いですし、大丈夫なのかと疑ってしまいますが 多少遅延もあったり、Motion JPEGでのノイズがあったりなので値段相応なのかもしれません。

多くのHDMIキャプチャーボードの使い方には耐えないように思いますけど、今回の使い方はちょうどではないでしょうか。

スマホでなくタブレットだったら画面の大きさにも満足ですかねー。

Reader Capture 機能紹介: 中断時の保存機能

電子書籍をPDFファイル/ZIPファイルに変換できるWindows用アプリReader Captureに追加した機能を紹介します。 今回はキャプチャー中断時の保存機能です。

Reader Capture は自動で電子書籍のページを進めながら

  • ページが進められなくなるか(ページ数「自動」の場合)
  • 指定のページ数になるか(ページ数「手動」の場合)

するまでキャプチャーしていくのですが、キャプチャー中にCtrl+F12を押したり、Reader Captureのウィンドウの停止ボタンをクリックしたりすることでキャプチャーを中断できます。

そしてこれまでは、キャプチャーを中断したとき、そこまでキャプチャーした内容は破棄されていました。

それがこの度の機能追加で、そこまでキャプチャーした内容を保存することもできるようになりました。

やり方は簡単。キャプチャーを中断すると保存するか聞かれるので保存したければ「はい」を選ぶだけです。

この機能がどんなときに嬉しいのか? 例えば以下のような用途が考えられます。

  • 今の設定でどんな感じにキャプチャーされるか試しに数ページキャプチャーする

  • キャプチャー開始から気が変わって、とりあえず今のページまでキャプチャーできていればいいやとなった

  • 最後のページまでキャプチャーされたが画面に表示が変わり続ける部分があってページ数「自動」がきかずキャプチャーが終わらない

1つ目は今まではページ数「手動」で数ページを設定する方法を紹介していましたけど中断→保存の方が楽ですね。

Pyxel製ゲームをPWAとして公開する(2)

前回を受けて早速Pyxel製ゲームをPWAとして公開する具体的な手順を紹介していきます。

流れとしてはPWAのWebアプリを作り、それをホスティングサービスを使って公開、となります。

まずWebアプリの作成から行きましょう。

プロジェクトフォルダーの作成

Webアプリのファイル一式を含むフォルダーを作成します。 アプリの名前にするのがいいでしょう。 「pyxel-pwa-sample」として進めます。

ファイルの作成

Webアプリを構成するファイル群を作成して配置します。 ファイルの配置としては以下のようになります。 各ファイルについて説明します。

pyxel-pwa-sample
└── public
    ├── app.pyxapp
    ├── assets
    │   └── icons
    │       ├── icon-128x128.png
    │       ├── icon-144x144.png
    │       ├── icon-152x152.png
    │       ├── icon-192x192.png
    │       ├── icon-384x384.png
    │       ├── icon-512x512.png
    │       ├── icon-72x72.png
    │       └── icon-96x96.png
    ├── index.html
    ├── manifest.webmanifest
    └── serviceworker.js
app.pyxapp

Pyxelで作成したPyxelアプリケーションファイルです。

index.html

以下の内容で作成します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>My Game</title>

    <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link rel="manifest" href="manifest.webmanifest">
    <meta name="theme-color" content="#000000">

    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
</head>

<body>
    <pyxel-play name="app.pyxapp"></pyxel-play>

    <script type="application/javascript">
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('./serviceworker.js');
        }
    </script>
</body>

</html>

How To Use Pyxel Web (日本語) · kitao/pyxel Wiki · GitHub の「Pyxel カスタムタグで HTML ファイルを記述する」にある方法を基本に PWAとして必要なWeb Application ManifestへのリンクやService Workerの登録を追加しています。 titleなどはアプリにあわせて変更しましょう。

manifest.webmanifest

PWAとして必要なWebアプリの情報を持つWeb Application Manifestと言われるファイルです。 以下の内容で作成します。

{
  "name": "My Game",
  "short_name": "My Game",
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

name, short_name などの値はアプリにあわせて変更しましょう。

serviceworker.js

PWAとして必要な、PWAならではの機能を記述するService Workerと言われるファイルです。 今回は特に機能の記述は必要ないので空のファイルです。

icon-*.png

アプリのアイコン画像です。 manifest.webmanifest での定義通り各サイズのファイルが必要です。 以下のサイトを使うと512 x 512 の1枚のPNGファイルから各サイズのファイルを簡単に作成できます。

tools.crawlink.com

すべてのファイルを作成したらWebアプリは完成です。 続けてPC上での動作確認、ホスティングサービスを使っての公開を行います。

Node.js のインストール

このあとのPC上での動作確認やホスティングサービスを使った公開に必要なNode.jsをインストールします。

例えばWindowsであれば ダウンロード | Node.js から Windows Installer (.msi) をダウンロードしてインストールします。

http-server のインストール

http-server を使ってPC上でWebアプリの動作確認をしてみましょう。

PowerShellなどのターミナルを起動し、プロジェクトフォルダーをカレントディレクトリーにします。

以下のコマンドを実行してプロジェクトでnpmコマンドによるパッケージのインストールができるようにします。

> npm init

コマンドを実行するとパッケージ名をどうするかなど複数の事柄について尋ねられますが、すべてデフォルトで、つまりひたすらエンターキーを押していけば大丈夫です。

そして以下のコマンドでhttp-serverパッケージをインストールします。

> npm i http-server --save-dev

インストールできたら以下のコマンドでhttp-serverを実行します。

> npx http-server public -p 8888

実行したら、ターミナルに表示されているようにWebブラウザーで「http://127.0.0.1:8888」にアクセスしてみます。 Webブラウザー上でPyxelで作成したアプリが遊べればOKです。

ターミナルに戻ってCtrl+Cを押してhttp-serverを終了します。

Firebaseのプロジェクト作成

最後にホスティングサービスを使ってWebアプリを公開します。 今回はGoogleのモバイル・Webアプリ開発プラットフォームFirebaseの1機能であるFirebase Hostingというホスティングサービスを利用します。 制限もありますが無料で使うことができます。

まず以下からアカウントを登録します。

firebase.google.com

アカウントを登録したら「プロジェクトを追加」からFirebaseのプロジェクトを作成します。 プロジェクト名は、これもまたアプリ名にするといいかと思います。

プロジェクトを作成したら、プロジェクトの管理画面が開くので、画面左のメニューの「構築」の中にある「Hosting」をクリックします。 Hostingの画面が表示されるので「使ってみる」をクリックします。

firebase-tools のインストール

ターミナルから Firebase Hosting へのホスティングを行うために firebase-tools をインストールします。

PowerShellなどのターミナルを起動し、プロジェクトフォルダーをカレントディレクトリーにします。 そして以下のコマンドを実行します。

> npm install firebase-tools --save-dev

続けて以下のコマンドを実行してFirebaseにログインします。

> npx firebase login

そして以下のコマンドを実行してプロジェクトフォルダーに対してFirebaseを設定します。

> npx firebase init

このプロジェクトフォルダーについてどの機能を有効にするかと聞かれるので カーソルキーの↑↓で 「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」 を選択し、スペースキーを押してチェックを入れ、エンターキーを押して決定します。

続けて複数の事柄について尋ねられますが、エンターキーを押していけば大丈夫です。 強いて言えば「What do you want to use as your public directory?」の質問に対する回答が プロジェクトフォルダー内に作成しているindex.htmlを配置しているフォルダーのフォルダー名と一致しているかは見ておきましょう。 おそらくデフォルト値は「public」なので一致しているはずです。

ホスティング

設定ができたら以下のコマンドを実行してホスティングします。

> npx firebase deploy

ターミナルに表示されるメッセージの最後の方に「Hosting URL:」としてホスティング先のURLが表示されます。 これでホスティング完了です。 そのURLにPCのWebブラウザーや、スマホWebブラウザーなどでアクセスしてみましょう。

前回紹介した通りスマホであれば「アプリをインストール」もできるはずです。

これで出来上がりですけど、最低限のPWAなので、さらにオフライン対応などもできたらなぁなどとも思っています。

Pyxel製ゲームをPWAとして公開する(1)

前回の記事ではインディーズソフト向きなゲーム機と題して 「ゲームコントローラー」と「PWAのWebアプリゲーム」でスマホがインディーズソフト向きなゲーム機になるんじゃないかという話をし、 「ゲームコントローラー」の候補を紹介しました。

今回は「PWAのWebアプリゲーム」の方の話をします。

「PWAのWebアプリゲーム」と聞いてWebアプリは分かるがPWAって?という人が多いのではないでしょうか?

スマホに関してPWAとは、簡単に言えば、スマホアプリのようにもなるWebアプリです。

画面を見てもらった方が早いかと思います。

まずスマホで、WebブラウザーであるChromeでPWAのWebアプリのURLを開きます。 このままブラウザー上で遊ぶこともできます。 ここまではただのWebアプリと同じです。

Chromeで開く

ちなみに画面のゲームはPyxelを使ってAdam氏が作られたMegaballというゲームです。 github.com

ここで右上の「…」から「アプリをインストール」をタップすると

「アプリをインストール」をタップ

通常のスマホアプリをインストールしたときと同様にホーム画面などにアプリのアイコンがあらわれます。

ホーム画面のアイコン

アイコンをタップすると通常のアプリと同様に遊べます。

アプリを起動

PWAのWebアプリはWebアプリに少し手を加えることで作れます。

さて、前回レトロな感じのゲームがPythonで組める人気のゲームエンジン「Pyxel」を紹介しました。

github.com

このPyxel、作ったゲームを簡単にWebアプリにすることもできます。

そこで、それを一歩進めてPWAのWebアプリにする方法、つまりPyxel製ゲームをPWAとして公開する方法を紹介したいと思います。

完成イメージはまさにはじめにPWAの説明で出した通りです。

しかもPyxelはゲームパッド対応なので以下のような製品や

あるいはこんなふうにPC用USBゲームパッドで操作可能です。

ゲームパッドで操作可能

つづく。