てけとーぶろぐ。

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

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ゲームパッドで操作可能です。

ゲームパッドで操作可能

つづく。

インディーズソフト向きなゲーム機

インディーズソフト向きなゲーム機があったらなぁと思うことがある。

多くの人が所有していて、誰でも簡単に自作ゲームを公開できる。 そんなゲーム機。

もっと言えば以下の条件を満たすゲーム機ということになる。

  1. 多くの人が所有している(あるいは安価に入手できる)
  2. ゲームパッドのような入力装置がある
  3. だれでも自由に簡単にそのゲーム機用の本格的な自作ゲームが作れて公開できる
  4. 使い方が簡単でファミコンばりにすぐ起動する

これがありそうでないように思う。

Nitendo Switchはどうかというと 3.を満たさない。ゲームを作るのに開発者登録が必要だし、公開も自由でも簡単でもないだろう。

パソコンはどうかというと 3.は満たすけど、2.は別売りだし、1.と4.は少し怪しい。

スマホはどうだろう? 1.はいまや文句なしだろう。 2.は残念ながら別売りだし、成熟していない。 3.については、個人的にはApp StoreGoogle Playは自由とは言えないんだが、Webアプリが突破口だろうか? 4.については常時電源ONだから気にならないという変わり種。

スマホが2.を満たせばなぁ…で、最近ちょっと調べてみると、本格的な製品も出ていそう。 これとか。しっかし、高い…。

かといって安いやつはどうも品質が怪しい。

さらに見ていくと面白い製品を見つけた。 これは安いし、コントローラーの品質は文句無しだし、いいかもしれない。 これとPWAのWebアプリのゲームでいい感じ?

Webアプリ側は何がいいかな…これとか、良さそうだな…ゲームパッド対応しているのかなー? 暇を見て調べてみよう。

github.com

2023-07-26 追記:

Pyxel、試したらブラウザーでもゲームパッド対応していました。

完成度高すぎると思ってソースコード見たら、コアはRustで書かれていて、SDL2を使って入力を受けていて、Web版はPyodideを使っているわで。 かっこいいなぁ〜。

Reader CaptureでBOOK☆WALKERの電子書籍をPDFにする

Windows用アプリReader CaptureKindle電子書籍をPDFにするアプリですが 電子書籍リーダーのスクリーンショットを撮ってPDFをつくるという その汎用的な仕組みから他の電子書籍リーダーでも使えたりします。

今回は例としてBOOK☆WALKER電子書籍をPDFにしてみます。

まずReader Captureを起動し、BOOK☆WALKER用に以下の様に設定します。

Reader Capture 設定

ポイントとなるのは以下です。

ページ送りキー: マウス垂直ホイール-
「→(Right)」「←(Left)」「マウス左クリック」でもページ送りできるのですが、 それらだとBOOK☆WALKERの場合書籍の最後のページでループしてしまってキャプチャーが終わらないので「マウス垂直ホイール-」を選択します。 あるいはページ数を「手動」にして指定してもいいです。

間隔(秒): 3
ページのダウンロード時間を考えて少し長めにします。ネット環境などに応じてうまくいかなければ更に長くします。

自動トリミング: チェックを外す
BOOK☆WALKERは背景が白なので自動トリミングは使えません。

分割方法: 分割しない
単ページ表示でキャプチャーするのでページ分割は不要です。

次にReader Captureを起動したままWebブラウザーでBOOK☆WALKERのサイトを開き、PDFにしたい書籍を開きます。

BOOK☆WALKER

Webブラウザーをフルスクリーン表示にします。 例えばChromeであればF11キーを押せばOKです。 (フルスクリーンから戻すときは再度F11キーを押します。) あるいはページをクリックして画面上部に表示されるバーのフルスクリーンボタンをクリックします。

BOOK☆WALKER(フルスクリーン)

ページをクリックして画面上部に表示されるバーの設定をクリックし、 「見開き表示」で単ページをクリックして単ページ表示にします。

設定の見開き表示

ページの領域が分かりやすいよう、ページの縁が白でないページを開きます。

縁が白でないページを開く

Ctrl+F11キーを押してキャプチャーするページの範囲を選択します。 範囲の左上、右下とクリックしていきます。

範囲の始点をクリック
範囲の始点をクリック

範囲の右下をクリック
範囲の右下をクリック

書籍の最初のページに戻ってから、Ctrl+F12キーを押してキャプチャーを開始します。しばらくするとPDFが出来上がります。

Reader Captureでebookjapanの電子書籍をPDFにする

Windows用アプリReader CaptureKindle電子書籍をPDFにするアプリですが 電子書籍リーダーのスクリーンショットを撮ってPDFをつくるという その汎用的な仕組みから他の電子書籍リーダーでも使えたりします。

今回は例としてebookjapan電子書籍をPDFにしてみます。

まずReader Captureを起動し、ebookjapan用に以下の様に設定します。

Reader Capture 設定

ポイントとなるのは以下です。

ページ送りキー: ←(Left)
右開きの書籍なら「←(Left)」を 左開きの書籍なら「→(Right)」を選択します。

間隔(秒): 3
ページのダウンロード時間を考えて少し長めにします。ネット環境などに応じてうまくいかなければ更に長くします。

固定トリミング: チェックを外す
フルスクリーン時は自動トリミングでトリミングできないような表示もないので固定トリミングをしないようにします。

ページ分割: 左右に分割(横長のページのみ)
ebookjapanは見開き表示が基本で、ページによって単ページ表示になるため「左右に分割(横長のページのみ)」を選択します。

分割したページの順序: 右→左
右開きの書籍なら「右→左」を 左開きの書籍なら「左→右」を選択します。

次にReader Captureを起動したままWebブラウザーでebookjapanのサイトを開き、PDFにしたい書籍を開きます。

ebookjapan

Webブラウザーをフルスクリーン表示にします。 例えばChromeであればF11キーを押せばOKです。 (フルスクリーンから戻すときは再度F11キーを押します。)

ebookjapan(フルスクリーン)

Ctrl+F12キーを押してキャプチャーを開始します。しばらくするとPDFが出来上がります。

Webの電子書籍はどこもおおよそ同じ感じでいけますねー。

Ubuntuで左右のAltキーを使ってIMEをON/OFFする

日本語キーボードで無変換キーにIMEのOFF、変換キーにIMEのONを割り当てることに慣れた人が英語キーボードに移行すると、 無変換キー、変換キーの代わりに左右のAltキーにIMEのON/OFFを割り当てたくなるわけです。

Windowsではalt-ime-ahk等のアプリで実現できます。ではUbuntuだとどうするのか?という話です。

自分が他のサイトで見かけたのはFcitxの設定でできるというものでした。

確かにFcitxでは設定で左右のAltキーにIMEのON/OFFを割り当てることができます。 しかし、これを試したところ、例えばすでにIMEがOFFになっている状態で再度左Altキーを押すと、ただ左Altキーを押したのと同じことになって、多くのアプリではメニューにフォーカスが移ってしまうようでした。 試した環境は Ubuntu 22.10 + Fcitx 4 です。 Fcitx 5 も試しましたがこちらはIMEの状態に関わらずAltキーを押したのと同じことになるようでした。

それが仕様でもおかしくない動きですけど、 こちらとしては、例えばIMEがOFFのときに再度余計にIME OFFのキーを押してしまっても問題ない、という動きを期待しているので都合がわるいです。

そこで必要となるのはAltキーは空打ちの場合IMEのON/OFFのみ行い、Altキーとして働かなくすることです。 alt-ime-ahkもそんな作りですね。

ということで自分が見つけた実現方法を説明します。 Input Remapperというアプリを使います。

まずFcitxの設定で「無変換」キーにIMEのOFF、「変換」キーにIMEのONを割り当てます。
Fcitx 4 であれば Configure → Global Configタブ → Show Advanced Optionsにチェック
Activate input method に 変換キーを設定(Henkanmode と表示される)
Inactivate input method に 無変換キーを設定(Muhenkan と表示される)
変換キー、無変換キーを設定するために一時的に日本語キーボードをつなぐ必要がありますね。

次にInput Remapperをインストールします。

$ sudo apt install input-remapper

インストールしたらInput Remapperを起動します。 Deviceを設定したいキーボードにしてから

「Change Key」ボタンをクリックしたら、左Altキーを押します。 「Change Key」ボタン下の入力欄にフォーカスが移るのでそこに

if_single(key(KEY_MUHENKAN), hold(KEY_LEFTALT))

と入力します。

「Change Key」ボタンをクリックしたら、右Altキーを押します。 「Change Key」ボタン下の入力欄にフォーカスが移るのでそこに

if_single(key(KEY_HENKAN), hold(KEY_RIGHTALT))

と入力します。

そして「Apply」をクリックします。 次回のOS起動時にもこの設定を有効にしたい場合は「Autoload」をONにします。

「if_single…」の書き方は以下を参考にしました。

https://github.com/sezanzeb/input-remapper/issues/287

これで気兼ねなく左右のAltキーを叩いてIMEをON/OFFできます。

Windows使いでもしっくりくるLinuxアプリ5選

WindowsからUbuntuに乗り換えて1ヶ月。だいぶWindowsの出番も減ってきました。

そもそもなぜ乗り換えたのかというと、Windowsが段々と不自由、不透明、おせっかいになって来ていると感じていたからです。

  • やたらと天気予報やニュースを表示しようとしてきたり
  • やたらとedgeを勧めてきたり
  • MicrosoftアカウントがないとOSのセットアップができなくなりそうだったり
  • 役に立つか分からな色々な処理をバックグラウンドで走らせたり

WSL2だとか、エクスプローラーのタブ対応だとか素晴らしい機能追加もあるのですが…。

Windows好きゆえの愚痴は置いておいて本題です。

おすすめのLinuxアプリです。 これだけだとどこにでもありますが、Windows使いでもしっくりくるであろうLinuxアプリということで紹介します。

Chrome

Webブラウザー。説明不要でしょう。Windowsと変わらずに使えます。

Visual Studio Code

コードエディター。説明不要ですよね。Windowsと変わらずに使えます。

Dropbox

ファイルホスティングサービスと専用のファイル同期アプリとでもいうのでしょうか?ご存知ですよね。 Windowsではパソコン版Googleドライブを使っていましたがLinuxにはないのでDropboxを使います。 google-drive-ocamlfuse も試したんですがオフラインで閲覧編集ができずですし、読み書きの速度も満足行きませんでした。

micro

テキストエディター。ターミナルで使えるWindowsキーバインドテキストエディターです。 Linuxでは何かとターミナルでの操作が避けられず、それとあわせてテキストファイルを編集することも多々。 つまりターミナルで使えるテキストエディターが必要になるわけですけどWindows使いにはWindowsキーバインドでないとつらいですよね。 なのでこれです。

Kate

テキストエディター。Visual Studio Code でもいいのですが、1ファイルだけさっと開くのに使うテキストエディターとして使っています。 Ubuntu 22.10 にプリインストールされているテキストエディターとgeditも試しましたが現状Kateに落ち着いています。

テキストエディターで困ったこと:

  • Fcitx 4 の変換ウィンドウ位置が狂う
  • Fcitx 4, 5 で変換候補をカーソルキーで選択したした後の文字入力の一文字目が確定に使われてか入力に反映されない
  • 選択状態でのエンターキーの挙動が独特

geditで困ったこと:

  • タブ切り替えのショートカットキーがWindows風ではない

ド定番ばかりじゃないかと言われそうですが、特定の観点で選んだものなので意味があるはずー。

USBメモリーにUbuntuをインストールしてUbuntuを使っていく

要は以下の記事に従ってUSBメモリーにUbuntuをインストールしてUbuntuを使い始め、 あわよくばメインで使うOSをWindowsからUbuntuに変えていこうとしているという話です。

qiita.com

この方法、Windowsをメインで使っているけどUbuntu等のLinuxを積極的に使っていこうとしている方におすすめできると思ったので紹介する次第です。

2024/01/10 追記: 自分は試していませんけど以下の記事の方法の方がややシンプルですね。次インストールするときはこちらを試したいです。

pc.watch.impress.co.jp

この方法は何がいいのか? それはメインのPCのWindows環境はそのままに、メインのPCでUbuntuを使えるようになることです。 大抵メインのPCが一番の性能でしょうから、好ましいことですよね。

これに近いものでよく見かけるのはWindowsがインストールされているストレージにUbuntuもインストールするデュアルブートです。 しかしこれには次のような問題があります。

  • Windowsで使えるストレージ容量が減ってしまう。かと言ってUbuntuに割り当てる容量をケチると中途半端なUbuntu環境になってしまう。
  • Windowsの更新でUbuntuが起動しなくなったりすることがある。(最近起きるのかは知りませんが…)

USBメモリーへのインストールであればこのような問題はありません。

さて、手順自体は最初に紹介した記事の通りですが1つポイントがあります。 それは十分な容量と転送速度を持ったUSBメモリーを使うことです。

ここを誤るとメインをはれる環境は手に入りません。 逆に言えば手頃な価格の十分な性能の製品が出てきたからこそ、このUSBメモリーへのインストールが実用的になったとも言えます。 自分はトランセンドのTS512GJF920という製品を選びました。

あと手順では Ubuntu 20.04 LTS を使っていますが 自分のPCでは Ubuntu 20.04 LTS のライブUSBが起動せず Ubuntu 22.10 のライブUSBだと起動したので Ubuntu 22.10 を使っています。 →後日Ubuntu 22.04.3 LTSに変更しました。サポート期間を考えると乗り換え組にはLTSがおすすめです。

これでUSBメモリーがささっていればUbuntuマシンとなるわけですが USBメモリーが出っ張って持ち運びに不便ですよね。

出っ張ったUSBメモリ

ということでオーム電機USB3.0 L字変換コネクターL&R 各1個入 PC-SU3LLRという製品を使っています。

これを使うとこんな感じになります。

出っ張らなくなったUSBメモリ

加えてこれだけだとUSBポートの位置が低くてUSBメモリーがノートPC本体から下にはみ出して机にあたってしまうため

底上げしないとUSBメモリーが机にあたる

こちらの製品をノートPCの裏に貼って底上げもしています。

そのうち、こんなことをせずとも済むような、極小サイズで十分な性能を持ったUSBメモリーもでてくるんでしょうねー。

最後に、デュアルブートの問題点について触れたので、おまけとして自分がUbuntu乗り換えに失敗した他の方法についても書いておきます。

余っているPCにUbuntuをインストール

余っているマシンは大体性能がいまいちなのでそこになれないOSを入れても…使わなくなりますね…。

WindowsUbuntuで上書きインストール

Windowsの方がやりやすいことや、Windowsでないとできないことはいくらかあり、仕事がらみだと致命的だったりするわけで…今やるのは厳しいですね…。

実のところ、まだWindowsUbuntuで半々ぐらいの利用なのですが、このまま乗り換えていけそうな気がしています。

その他、USBメモリーを買っただけなのに新しいマシンを調達したかのような気分になれてお得感があります。そこもおすすめしたい点です。