最近ベースにハマってます。もともとギターは持っていましたが、ベースを買ったのは初めてです。初心にかえって教則本を買って1から練習しています。教則本の譜面を見ながらベースを弾きたいので、本を開いたまま固定できる「うかんむりクリップ」を買いました。結構前に話題になっていた気がします。
ただ１つ問題が。教則本はB5判サイズと比較的大きく、開いたままにしやすいのですが、それでもうかんむりクリップで挟むと跡がついてしまいました。
なんとなく気になるので、跡がつかないようフェルトっぽいものがあればいいなと思い、家の中を探して見つけたのがこれ。以前買った家具についていた滑り止めのあまりです。都合よく裏面がシールになっています。
小さくカットしてシールで張ったのがこちら。うかんむりクリップは挟むところが少し出っ張っていて、シールが貼りにくかったですが、一応貼れています。
跡がつかなくなった上に、滑りにくくなりました。
普段から家で仕事することが多く、テレビ会議をよくしてます。その際に使っているのがネックスピーカーです。首にかけるだけなので、イヤホンやヘッドフォンよりも使いやすく、長時間つけても疲れません。
ただネックスピーカーって結構大きいので、デスクの上にそのまま置くとスペースを取るんですよね。ヘッドフォンスタンドを買って掛けておくこともできますが、デスクの上にスタンドを置くとその分もスペースを使ってしまいます。なので、できればデスクの端にかけたい。使っているデスクは脚の間に棒があり、そこにS字フックなどをかけられるようになっています。普通のS字フックを棒に掛けるとゆらゆら揺れてしまうし、フックが細くてネックスピーカーが掛けにくいので、代わりになる商品を100均で探しました。
見つけたのは、キャンドゥの「ソフトマルチタイ くね〜る」という商品（公式サイトのリンク）です。中に針金が入っているようで、グネグネと柔軟に曲がります。外側が樹脂で柔らかいため、ネックスピーカーを置いても傷がつかなそうです。
作ったネックスピーカー掛けはこちら↓
なるべく左右対称になるように、かつネックスピーカーを掛けるスペースが広くなるように意識して、少しずつ曲げたところうまくいきました。実際にネックスピーカーを掛けても安定しています。手で簡単に曲がりましたが、掛けたネックスピーカーの重さで曲がることもなく、棒に引っ掛けて曲げた部分がゆらゆら揺れることもないです。
しばらく使いましたが、だいぶ満足です。ネックスピーカーを掛ける部分が重さで曲がってしまうかもと思い、2本で支えられるように「U」の形にしましたが、十分強度があるので「∩」の形にしてもいいと思います。その方が、「∩」の下の部分からネックスピーカーを取ったり掛けたりしやすくなるかもしれません。
前回の記事で、セガが提供している「ぷよぷよプログラミング」を紹介しました。
公式のソースコードでは、左回転はできますが右回転ができません。右回転できるようソースコードを改変します。
右回転できるようにするためには、すでに実装されている左回転のコードをコピーして修正すれば実現できるはずです。まずは、ソースコードを読んで左回転の処理を理解します。
前の記事でも説明していますが、game.js の loop() の中で、mode が”playing”のとき（プレイヤーの操作を判定している箇所）と、 “rotating”のとき（ぷよを回転している箇所）のコードを調べます。Player.playing() が “rotating” を返した場合に、Player.rotating() で回転していることがわかります。Player.playing() と Player.rotating() の中を見てみましょう。
function loop() {
switch (mode) {
...中略...
case "playing":
// プレイヤーが操作する
const action = Player.playing(frame);
mode = action; // 'playing' 'moving' 'rotating' 'fix' のどれかが帰ってくる
break;
...中略...
case "rotating":
if (!Player.rotating(frame)) {
// 回転が終わったので操作可能にする
mode = "playing";
}
break;Player.playing() の中を見てみると、左回転を行う↑キーの入力判定があります。そして、操作するぷよの現在の回転角度に応じて cx, cy, canRotate をセットしています。cx は回転後の横移動の量を、cy は縦移動の量を表します。例えば、操作するぷよが左端にあるときに左回転を行うと、操作するぷよ全体を右に1つずらす必要があり、このときに cx が 1 になります。操作するぷよの左右が壁や別のぷよで囲まれている場合は、回転できないと判断し、canRotate を false にしています。canRotate が true の場合のみ、”rotating” を呼び出し元に返しています。
static playing(frame) {
...中略...
} else if (this.keyStatus.up) {
...中略...
const rotation = this.puyoStatus.rotation;
let canRotate = true;
let cx = 0;
let cy = 0;
if (rotation === 0) {
...中略...
}
if (canRotate) {
...中略...
return "rotating";
}
}Player.rotating() の中を見ると、ぷよの現在の回転角度である this.puyoStatus.rotation に 90° を足していることがわかります。ratio が 1 になるまでは回転の途中のため false を返しており、ratio が 1 になり 90° 回転し終わったときに true を返しています。
static rotating(frame) {
// 回転中も自然落下はさせる
this.falling();
const ratio = Math.min(1, (frame - this.actionStartFrame) / Config.playerRotateFrame);
this.puyoStatus.left = (this.rotateAfterLeft - this.rotateBeforeLeft) * ratio + this.rotateBeforeLeft;
this.puyoStatus.rotation = this.rotateFromRotation + ratio * 90;
this.setPuyoPosition();
if (ratio === 1) {
this.puyoStatus.rotation = (this.rotateFromRotation + 90) % 360;
return false;
}
return true;
}ここまでで、左回転を行っている処理をざっくり理解できました。ここからは、右回転の処理を実装していきます。必要な処理を一度に実装するとミスに気づきにくいため、以下の手順で段階的に実装していきます。
元のソースコードでは、↑キーを押すとぷよが左回転します。これをzキーで左回転、xキーで右回転するよう実装します。まずは↑キーの入力判定しているところを、zキーに置き換えます。zキーのキーコードは仕様によると 90 です。keyStatusオブジェクトのキーであるupをrotateLeftに名称変更し、e.keyCodeの条件を 38 から 90 に変更します。下記のソースコード以外の箇所もすべて変更します。
static initialize() {
// キーボードの入力を確認する
this.keyStatus = {
right: false,
left: false,
rotateLeft: false,
down: false,
};
// ブラウザのキーボードの入力を取得するイベントリスナを登録する
document.addEventListener("keydown", (e) => {
// キーボードが押された場合
switch (e.keyCode) {
...中略...
case 90: // zキー
this.keyStatus.rotateLeft = true;
e.preventDefault();
return false;
...中略...変更したソースコードを動かしてみましょう。↑キーは反応しなくなり、zキーで左回転できれば成功です。
左回転の既存の処理をそのまま利用して、xキーでも左回転できるようにします。this.keyStatus.rotateLeft に関するコードをコピーして、その直後に貼り付けます。xキーのキーコードは 88 です。下記のソースコード以外の箇所もすべて変更します。
static initialize() {
// キーボードの入力を確認する
this.keyStatus = {
right: false,
left: false,
rotateLeft: false,
rotateRight: false,
down: false,
};
// ブラウザのキーボードの入力を取得するイベントリスナを登録する
document.addEventListener("keydown", (e) => {
// キーボードが押された場合
switch (e.keyCode) {
...中略...
case 90: // zキー
this.keyStatus.rotateLeft = true;
e.preventDefault();
return false;
case 88: // xキー
this.keyStatus.rotateRight = true;
e.preventDefault();
return false;
case 39: // 右向きキー
...中略...以下の this.keyStatus.rotateLeft で条件分岐している箇所も、まずはコピーして貼り付け、rotateRight に書き換えます。
static playing(frame) {
...中略...
} else if (this.keyStatus.rotateLeft) {
...中略...
} else if (this.keyStatus.rotateRight) {
...中略...
}
...中略...変更したソースコードを動かしてみましょう。xキーを入力しても、zキーと同じように左回転すれば成功です。
左回転は 90° ですが、右回転は -90° です。回転する角度を変えられるよう、Player.rotating() で 90° と記載されている箇所を変数 this.rotateAngle に置き換えます。以下のコードで this.puyoStatus.rotation に360の余りを代入していることから、this.puyoStatus.rotation は 0 ~ 360° である必要があるようです。this.rotateAngle が -90°のときに this.puyoStatus.rotation がマイナスにならないように、360を足す処理を加えています。
static playing(frame) {
...中略...
} else if (this.keyStatus.rotateLeft) {
...中略...
this.puyoStatus.x += cx;
this.rotateAngle = 90;
const distRotation = (this.puyoStatus.rotation + this.rotateAngle) % 360;
// 変更前：const distRotation = (this.puyoStatus.rotation + 90) % 360;
...中略...
}
static rotating(frame) {
...中略...
this.puyoStatus.rotation = this.rotateFromRotation + ratio * this.rotateAngle;
// 変更前：this.puyoStatus.rotation = this.rotateFromRotation + ratio * 90;
this.setPuyoPosition();
if (ratio === 1) {
this.puyoStatus.rotation = (this.rotateFromRotation + this.rotateAngle + 360) % 360;
// 変更前：this.puyoStatus.rotation = (this.rotateFromRotation + 90) % 360;
return false;
}
return true;
}変更したソースコードを動かしてみましょう。zキーで左回転、xキーで右回転すれば成功です。
これで完成かと思いきや、この状態だと問題があります。ぷよを一番右に動かしてから、xキーを教えてみましょう。なんと、右回転したぷよが隠れてしまいます。期待する動きとしては、右回転時にぷよ全体が左に動くべきです。他にも、ぷよが一番左にあるときに右回転すると、ぷよ全体が右に移動してしまうといった問題もあります。次はこれらの問題を修正します。
xキー入力
→
ぷよの現在の回転角度に応じて、ぷよを左右や上下にずらす処理が必要です。以下のように、もともと左回転の処理であるコードを変更します。右回転の処理は、左回転の処理を左右反対にすればいいので、角度は左右反対に（0°→180°、180°→0°）、x軸はプラスマイナス反対に（x-1→x+1、x+1→x-1、cx=1→cx=-1）変更します。
static playing(frame) {
...中略...
} else if (this.keyStatus.rotateRight) {
...中略...
if (rotation === 180) {
// 右から上には100% 確実に回せる。何もしない
} else if (rotation === 90) {
// 上から右に回すときに、右にブロックがあれば左に移動する必要があるのでまず確認する
if (y + 1 < 0 || x + 1 < 0 || x + 1 >= Config.stageCols || Stage.board[y + 1][x + 1]) {
if (y + 1 >= 0) {
// ブロックがある。右に1個ずれる
cx = -1;
}
}
// 左にずれる必要がある時、左にもブロックがあれば回転出来ないので確認する
if (cx === -1) {
if (y + 1 < 0 || x - 1 < 0 || y + 1 >= Config.stageRows || x - 1 >= Config.stageCols || Stage.board[y + 1][x - 1]) {
if (y + 1 >= 0) {
// ブロックがある。回転出来なかった
canRotate = false;
}
}
}
} else if (rotation === 0) {
// 右から下に回す時には、自分の下か右下にブロックがあれば1個上に引き上げる。まず下を確認する
if (y + 2 < 0 || y + 2 >= Config.stageRows || Stage.board[y + 2][x]) {
if (y + 2 >= 0) {
// ブロックがある。上に引き上げる
cy = -1;
}
}
// 右下も確認する
if (y + 2 < 0 || y + 2 >= Config.stageRows || x + 1 < 0 || Stage.board[y + 2][x + 1]) {
if (y + 2 >= 0) {
// ブロックがある。上に引き上げる
cy = -1;
}
}
} else if (rotation === 270) {
// 下から左に回すときは、左にブロックがあれば右に移動する必要があるのでまず確認する
if (y + 1 < 0 || x - 1 < 0 || x - 1 >= Config.stageCols || Stage.board[y + 1][x - 1]) {
if (y + 1 >= 0) {
// ブロックがある。左に1個ずれる
cx = 1;
}
}
// 右にずれる必要がある時、右にもブロックがあれば回転出来ないので確認する
if (cx === 1) {
if (y + 1 < 0 || x + 1 < 0 || x + 1 >= Config.stageCols || Stage.board[y + 1][x + 1]) {
if (y + 1 >= 0) {
// ブロックがある。回転出来なかった
canRotate = false;
}
}
}
}
if (canRotate) {
...中略...これで右回転に必要な処理はすべて実装できました。ぷよが縦の状態で一番右にあるとき、一番左にある時、ぷよが下に回転する状態で別のぷよが右下にある時、などおかしな挙動にならないか確認しましょう。
実装済みの左回転を参考にすれば、右回転も簡単に実装できるかと思っていましたが、意外と必要な処理が多く、理解することや変更する箇所が多くて大変でした。今回の変更内容は以下のGitHubのコミット履歴で確認できます。
https://github.com/shoarai/puyopuyo-programing/commit/1a1484d7f56bdaa1ad2c917320817d84a92436df
公式の開発環境ではMonacaが利用できます。自分は使い慣れたVSCodeを使いたかったため、右回転の処理を追加する前に以下の設定を行いました。
以下のVSCodeのワークスペースファイルを、ルートフォルダに作成します。ファイル保存時に自動フォーマットできるよう、フォーマッタであるPrettierを使用します。このファイルをVSCodeで開いて実装します。
{
"folders": [
{
"path": "."
}
],
"settings": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"extensions": {
"recommendations": ["esbenp.prettier-vscode"]
}
}以下のPrettierの設定ファイルもルートフォルダに作成します。自分のPCのディスプレイ幅に合わせて一行の文字数上限を設定し、元のソースコードと同じタブ幅を設定します。
printWidth: 150
tabWidth: 4アプリの起動のために、簡易的なWebサーバであるhttp-serverを使います。以下のファイルに”start”コマンドとして追加します。
{
...中略...
"scripts": {
"monaca:preview": "npm run dev",
"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081",
"start": "npx http-server www"
},
...中略...
}ターミナルで以下のコマンドを実行すると、アプリが起動します。
npm start作りたい落ちゲーがあり、落ちゲーの作り方を調べていました。自分にとっての落ちゲーといえば、ぷよぷよ。そこで見つけたのが、公式のセガが提供している「ぷよぷよプログラミング」です。落ちゲーの作り方を学ぶため、ぷよぷよプログラミング」のソースコードを理解したいと思います。
ソースコードは以下の公式サイトからダウンロードできます。
https://puyo.sega.jp/program_2020
以下は実際のアプリ画面です。←/→キーで左/右に移動でき、↑キーで左回転できます。右回転はできないようです。アプリを起動すると思わずやってしまいますね。やっぱりぷよぷよは楽しい。
www/src/game.jsで、Webページの読み込みが完了したときに initialize() と loop() を実行しています。initialize() はデータの初期化であったり、キーボード入力時の処理の登録を行っているようです。loop() でゲームを開始しています。
// 起動されたときに呼ばれる関数を登録する
window.addEventListener("load", () => {
// まずステージを整える
initialize();
// ゲームを開始する
loop();
});loop() の最後の行で、requestAnimationFrame() を実行しています。これにより、loop() が繰り返し実行されます。1/60秒後に呼び出すとコメントがありますが、仕様によると、多くのブラウザではディスプレイのリフレッシュレートに合わせて呼び出されるようです。
loop() の繰り返しの中で行う処理を、modeの値に応じて切り替えています。
function loop() {
switch (mode) {
case "start":
// 最初は、もしかしたら空中にあるかもしれないぷよを自由落下させるところからスタート
mode = "checkFall";
break;
case "checkFall":
// 落ちるかどうか判定する
if (Stage.checkFall()) {
mode = "fall";
} else {
...中略...
}
frame++;
requestAnimationFrame(loop); // 1/60秒後にもう一度呼び出す
}modeの値がどのように変化するのかわかりやすくするため、状態遷移図に起こしてみました。
アプリ実行時には、ぷよはステージ上に一つもありません。よって、start → checkFall → checkErase → newPuyoへと特に何も処理をせずに遷移します。newPuyo で新しいぷよを作成し、playing でプレイヤーの操作を受け付ける状態になります。操作がなければ playing のままですが、移動や回転操作があれば moving か rotating に変わります。操作するぷよがステージの床に着いたら fix になり、checkFall に戻ります。
checkFall では、自由落下するぷよがあるかを判定し、fall で自由落下の描画を行います。自由落下とは、下段のぷよを消して上段のぷよが降ってくるなどの状態のことです。checkErase では、削除するぷよがあるかを判定し、erasing でぷよの削除を行います。
newPuyo で新しいぷよが作成できないと gameOver になり、batankyu となってばたんきゅーという文字を画面に描画します。
mode の状態遷移がわかったことで、全体としてどんな処理を行っているのかが理解できました。今回久しぶりにぷよぷよをやったのですが、またハマりそうです。せっかくソースコードを理解したので、機能を追加していくのも楽しいかなと思っています。
Microsoft TeamsでWeb会議をよくするのですが、マイクのミュートの切り替えが面倒に感じていました。会議中にTeamsとは別のウィンドウを開いていることが多く、Teamsのウィンドウをアクティブに戻してからミュートを切り替えるのが非常に手間でした。
今回は、Teamsのウィンドウがアクティブでなくても、ワンクリックでマイクのミュートを切り替える方法を紹介します。実施環境のOSはWindowsです。
まずAutoHotKeyのv2.0をインストールします。以下のURLを開いてDowloadボタンからインストーラをダウンロードして、インストールします。
ToggleMuteTeams.ahk という名前のファイルを任意の場所に作成し、以下のスクリプトを記載します。.ahkファイルはAutoHotKeyのスクリプトファイルです。
| F1::toggle_mute_teams() | |
| toggle_mute_teams() { | |
| winList := WinGetlist("ahk_exe Teams.exe",,,) | |
| for window in winList { | |
| if (WinGetTitle(window) != "Microsoft Teams Notification" and WinGetTitle(window) != "") { | |
| WinActivate(WinGetTitle(window)) | |
| Send("^+M") | |
| sleep 20 ; sometimes it activates the new window before the sendkeys finishes, delay fixes it | |
| break ; mute shortcut works in both windows, so break after first send | |
| } | |
| } | |
| } |
作成した ToggleMuteTeams.ahk をダブルクリックして起動します。これで、会議中に「F1」キーを押してTeamsのマイクミュートを切り替えられるようになりました。Teamsのウィンドウがアクティブでない状態で「F1」キーを押すと、Teamsのウィンドウがアクティブになってからマイクミュートが切り替わります。
PCを起動し直した場合は、このスクリプトを再度実行する必要があります。ToggleMuteTeams.ahk のショートカットを以下のフォルダに配置することで、PC起動時に実行されるようになります。
C:\Users\＜ユーザー名＞\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
「F1」キーを押すことでマイクのミュートを切り替えられるようになりましたが、もっと簡単に、トラックボールのボタンで切り替えられるようにしました。
自分はLogicoolのトラックボールを使っていて、Logi Options+というPCアプリでボタンの動作をカスタマイズできます。トラックボールのミドルクリック（スクロールホイールを押す動作）に「F1」キーボタンを割り当てました。これにより、トラックボールから手を離さずにミドルクリックを押すことで、マイクのミュートが切り替えられるようになりました。
「F1」キーを押すには両手を使う必要があり、間違って押す可能性が低いため「F1」キーを設定しました。上記スクリプトの1行目を書き換えることで、別のキーを割り当てることもできます。AutoHotKeyのキーリストから設定できるキー名が確認できます。例えば、Insertキーに割り当てたい場合は、以下のように記載します。スクリプトを変更した場合は、変更を反映するために ToggleMuteTeams.ahk を再実行してください。
Insert::toggle_mute_teams()Teamsはチャットのウィンドウと会議のウィンドウが別に開きます。どちらのウィンドウがアクティブになっているのかAutoHotKeyは判定できないため、上記のスクリプトでは両方のウィンドウをアクティブにしてマイクミュート切り替えのボタン「Ctrl + Shift + M」を入力しています。現状では、チャットのウィンドウではこのボタンを押しても何も起こらないため問題ないですが、今後意図しない動作になる可能性があるため注意が必要です。
AutoHotKeyのスクリプトは以下のスクリプトを参考にしました。
https://github.com/randyklein/muteteams/blob/main/TeamsMute-ahkv2.ahk
麻雀の点数計算をするための、最低限の情報をまとめる。
ロンの点数
| 1翻 | 2翻 | 3翻 | 4翻 | |
|---|---|---|---|---|
| 30符 | 1,000 1,500 | 2,000 2,900 | 3,900 5,800 | 7,700 11,600 |
| 40符 | 1,300 2,000 | 2,600 3,900 | 5,200 7,700 | 満貫 |
| 50符 | 1,600 2,400 | 3,200 4,800 | 6,400 9,600 | 満貫 |
| 5翻 | 6, 7翻 | 8, 9, 10翻 | 11, 12翻 | 13翻 |
|---|---|---|---|---|
| 満貫 | 跳満 | 倍満 | 3倍満 | 数え役満 |
| 8,000 | 12,000 | 16,000 | 24,000 | 32,000 |
| 12,000 | 18,000 | 24,000 | 36,000 | 48,000 |
ツモの点数
子のツモ：
・親が支払う点数：ロンの点数 ÷ 2
・子が支払う点数：親が支払う点数 ÷ 2
※十の位が0にならないときは、十の位を切り上げる。
親のツモ：
・子が支払う点数：ロンの点数 ÷ 3
※3で割り切れないときは、+100や+200して割り切れるようにする。
| 符 | |
|---|---|
| 基本符 | 20 |
| アガり方 | 10：面前ロン or 0：鳴きロン or 2：ツモ |
| 面子の種類 | 4：2 ～ 8牌の暗刻、1・9・字牌の明刻 槓子なら×2、鳴きなら÷2 |
| アタマ | 2：自風牌、場風牌、白發中 |
| 待ちの種類 | 2：両面待ち・シャボ待ち以外 |
| 役 | 面前 | 鳴き | 補足 |
|---|---|---|---|
| 立直（リーチ） | 1 | ✕ | |
| 一発（イッパツ） | 1 | ✕ | |
| 門前清自摸和（メンゼンツモ） | 1 | ✕ | |
| 平和（ピンフ） | 1 | ✕ | 符は必ず20符 雀頭は役牌以外 両面待ちのみ |
| 一盃口（イーペーコー） | 1 | ✕ | |
| 役牌（ヤクハイ） | 1 | 1 | |
| 断么九（タンヤオ） | 1 | 1 | |
| 海底撈月（ハイテイ） | 1 | 1 | |
| 河底撈魚（ホウテイ） | 1 | 1 | |
| 嶺上開花（リンシャンカイホウ） | 1 | 1 | |
| 槍槓（チャンカン） | 1 | 1 | |
| 両立直（ダブルリーチ） | 2 | ✕ | |
| 七対子（チートイツ） | 2 | ✕ | 符は必ず25符 |
| 一気通貫 | 2 | 1 | |
| 三色同順 | 2 | 1 | |
| 混全帯幺九（チャンタ） | 2 | 1 | |
| 三色同刻（サンショクドーコー） | 2 | 2 | |
| 三暗刻 | 2 | 2 | |
| 対々和（トイトイ） | 2 | 2 | |
| 三槓子（サンカンツ） | 2 | 2 | |
| 小三元 （ショウサンゲン） | 2 | 2 | |
| 混老頭（ホンロウトウ） | 2 | 2 | 么九牌（数牌の1、9と字牌）のみ使う |
| 二盃口（リャンペーコー） | 3 | ✕ | 一盃口を2組揃える |
| 純全帯公九（ジュンチャン） | 3 | 2 | 老頭牌（1・9牌）をすべての面子と雀頭に使う |
| 混一色（ホンイツ） | 3 | 2 | |
| 清一色（チンイツ） | 6 | 5 |
役満
| 役満 | 補足 |
|---|---|
| 四暗刻（スーアンコウ） | |
| 大三元（ダイサンゲン） | |
| 国士無双（コクシムソウ） | |
| 小四喜（ショースーシー） | 東南西北のうち、3種類を刻子または槓子、残り1種を雀頭に使う |
| 大四喜（ダイスーシー） | 東南西北のすべてを刻子で揃える |
| 緑一色（リューイーソウ） | 索子の23468と發のみを使う |
| 字一色（ツウイーソウ） | 字牌だけで雀頭も面子も揃える |
| 清老頭（チンロウトウ） | 老頭牌（1・9牌）だけで雀頭も面子も揃える |
| 四槓子（スーカンツ） | |
| 九蓮宝燈（チューレンポウトウ） | 1112345678999+同種の数牌1枚 |
| 地和（チーホウ） | 子が第一ツモでアガる |
| 天和（テンホウ） | 親が第一ツモでアガる |
先日、風邪ログというWebアプリをリリースしました。自分の体調を記録して振り返り、自分がどんなときに体調が悪くなるかを理解できるアプリです。Webアプリですが、Google Playストアでもアプリを見つけてもらえるように、Androidアプリ化できるか試してみました。Androidアプリ化の方法はいくつかありますが、今回は一番さくっとできそうなWebViewを使った方法を試しました。
WebViewを使ってWebアプリを動かす方法を、Android公式の記事を参考に試しました。
https://developer.android.com/guide/webapps/webview?hl=ja
まずはAndroid Studioで新規プロジェクトを作成し、Empty ActivityをTemplateとして選びます。この初期状態でアプリを実行すると、空の画面が表示されます。
まずはactivity_main.xmlにWebViewを記載します。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 以下のブロックを記載 -->
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>次に、インターネット上で動くWebアプリにアクセスできるよう、AndroidManifest.xmlに許可設定を記載します。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.isolity.kazelog">
<!-- 以下のブロックを記載 -->
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
...最後に、MainActivity.ktにWebViewの設定を記載します。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 以降の行を記載
val myWebView: WebView = findViewById(R.id.webview)
// Webアプリ内のリンクをWebView内で開くようにする
myWebView.webViewClient = WebViewClient()
// JavaScriptの有効化
myWebView.settings.javaScriptEnabled = true
// Web Storageの有効化
myWebView.settings.domStorageEnabled = true
// Webアプリの読み込みのため、風邪ログのURLを指定
myWebView.loadUrl("https://kazelog.shoarai.com")
}
}上記のコードでアプリを実行すると、風邪ログのトップページが表示されました。
ここでやっかいなのが、以下の処理です。
// Webアプリ内のリンクをWebView内で開くようにする
myWebView.webViewClient = WebViewClient()
風邪ログは、EmailによるログインやGoogleアカウントによるログインをサポートしています。ログインをボタンを押したときに、Googleのログイン画面に遷移することになるんですが、上記の設定を行わないとGoogle ChromeなどのAndroid規定のブラウザでログイン画面が開いてしまいます。上記の設定をするとこで、ログイン画面がWebView内で開くようになります。
さてここで本題なのですが、GoogleはWebView内でのログインをサポートしていません。たとえWebView内でGoogleにログインしようとしても、以下のエラー画面が表示されます。
この件に関する公式のドキュメントを探したところ、以下の記事が見つかりました。やはりWebViewからGoogleログインに必要なOAuthリクエストが許可されなくなるとのことです。
「ウェブビュー」と言われる埋め込みブラウザから Google への OAuth リクエストは許可されなくなります。
https://developers-jp.googleblog.com/2016/09/modernizing-oauth-interactions-in-native-apps.html
ということでWebアプリである風邪ログを、Androidアプリとしてリリースすることはできませんでした。Googleログインを行わないWebアプリであれば、リリースできるかもしれませんね。
❶は、勤務先から受け取る給与や賞与の1年間の合計金額です。
給与を渡す会社側の視点なので”支払”金額となってますが、受け取る側から見ると”収入”金額になります。1年間の収入なので、いわゆる「年収」はこれのことです。
❷は、収入のうち税金を計算する前の金額です。
「❶の金額」と「以下の表」を使って求められます。
画像の例でいうと、❶は 400万円 なので、以下の表の5行目にあたります。これを計算すると、「400万円 ✕ 20% ＋ 44万円 ＝ 124万円」です。❶からこの金額を引くと、❷になります。
440万円（❶）ー 124万円 ＝ 216万円（❷）
| 収入金額 | 給与取得控除額 |
| 〜 162.5万円 | 55万円 |
| 162.5万円 〜 180万円 | 収入金額 ✕ 40% ー 10万円 |
| 180万円 〜 360万円 | 収入金額 ✕ 30% ＋ 8万円 |
| 360万円 〜 660万円 | 収入金額 ✕ 20% ＋44万円 |
| 660万円 〜 850万円 | 収入金額 ✕ 10% ＋ 110万円 |
| 850万円 〜 | 195万円 |
❸は、安くなる税金の金額です。
保険料を払っていたり、子供がいる場合に税金が安くなることがあります。
画像の例でいうと、「Ⓐの金額」と48万円を足すと❸になります。
90万円（Ⓐ）＋ 48万円 ＝ 138万円（❸）
※この48万円は年によって金額が違います。2020年から48万円ですが、それ以前は38万円です。
❹は、払う税金の金額です。
この金額は、ベースとなる税金（所得税）と、東日本大震災からの復興のための税金（復興特別所得税）の合計です。
※復興特別所得税は、2013年から2037年までかかります。
まずはこれまでの金額を使って、税金の対象となる金額を計算します。画像の例でいうと、「216万円（❷）ー 138万円（❸）＝ 78万円」です。次に、以下の表を使って所得税を計算します。
78万円 ✕ 5% ＝ 3万9,000円（所得税）
| 課税所得金額 | 税率 | 控除額 |
| 〜 195万円 | 5% | なし |
| 195万円 〜 330万円 | 10% | 9万7,000円 |
| 330万円 〜 695万円 | 20% | 42万7,000円 |
| 695万円 〜 900万円 | 23% | 63万6,000円 |
そして、所得税から復興特別所得税を計算します。
3万9,000円（所得税） ✕ 2.1% ＝ 819円（復興特別所得税）
所得税と復興特別所得税を足すと、❹になります。
3万9,000円（所得税） ＋ 819円（復興特別所得税）＝ 3万9,819円
→ 3万9,800円（❹）
（100円未満は切り捨て）
※本記事は、2021年11月1日時点の情報です。税金の金額や計算式は、今後変わる可能性があります。
先日、M5StickC Plusを使ってCO2を測りました。この記事ではその続きとして、温度、湿度、気圧も測りました。
完成形はこちらです。M5EnvMonitorと名付けました。
ソースコードはGitHubで公開しています。
https://github.com/shoarai/M5EnvMonitor
CO2の計測までは、以下の記事で紹介しています。
以前は開発環境としてArduino IDEを使っていたのですが、今回からPlatformIOとVisual Studio Code（VSCode）を使うことにしました。フォーマットの自動化やGitとの連携をしたかったのが理由です。
1. VSCodeと、PlatformIOというVSCode拡張機能をインストールする。
2. PlatformIOを開き、Home画面のNew Projectボタンから新規プロジェクトを作成する。
これでプロジェクトが作成できました。この時点でGitを初期化、コミットしておきます。
Libraries画面で必要なプラグインを検索し、プロジェクトにインストールする。
ライブラリのインストールは、platform.ioファイルのlib_depsに直接記載することも可能です。また、Arduinoライブラリとして公開されていなくても、GitHubで公開されているライブラリをインストールすることもできます。以下の最後の行のように、GitHubのURLを記載すればOKです。
[env:m5stick-c]
platform = espressif32
board = m5stick-c
framework = arduino
lib_deps =
m5stack/M5StickCPlus@^0.0.2
adafruit/Adafruit Unified Sensor@^1.1.4
adafruit/Adafruit BMP280 Library@^2.4.2
ambientdatainc/Ambient ESP32 ESP8266 lib@^1.0.1
https://github.com/nara256/mhz19_uartENV IIのサンプルコードを使って、ENV IIの測定値を表示します。Adafruit_Sensor.hはAdafruit Unified Sensorライブラリに含まれていたので、ライブラリをインストールしました。ENVII.inoの内容をsrc/main.cppコピーしてビルド、アップロードします。
計測値の表示レイアウトを調整したり、M5StickC Plusの情報表示を追加しました。
※CO2センサーが壊れているので、繋いでいない状態です；なのでCO2は-1になってます。
画面仕様は以下の通り。
使っていくうちにまたいろいろ変えるかもしれません。
このサイトはWordPressを使って作成していますが、表示速度の向上やSEO対策のためにAMP化しました。
AMP化は、以下のWordPress公式プラグインを使って簡単に実現できました。
またGoogle Analyticsの設定は、「AMP → 設定 → アナリティクス」の「種類：」に「googleanalytics」と入力します。すると「JSON構成：」が自動入力されるので、「UA-」で始まるトラッキングIDを設定すればOKです。
しかし、AMP化によって一つ問題が発生しました。AMP化したことにより、Gistの埋め込みコードが表示されなくなってしまったのです。
Gistの埋め込みコードを、AMP化したWordPressに表示する方法として、ショートコードを使う方法を紹介します。そのために、JetpackというこれまたWordPress公式プラグインを使います。
Jetpackの「設定 → 執筆」にある「ショートコードを使って作成し、人気サイトからメディアを埋め込む」にチェックを入れます。これにより、ショートコードの機能が使えるようになります。
AMP化前は、カスタムHTMLで以下のコードを記載すればGistを埋め込めました。
<script src="https://gist.github.com/shoarai/a98cf027914d43139f4dbe579f726b8b.js"></script>AMP化後は、ショートコードで以下のテキストを記載すればGistを埋め込めます。
[gist]a98cf027914d43139f4dbe579f726b8b[/gist]ちなみに、ショートコードはGist以外にも、Facebookの投稿やTwitterのツイートなども埋め込めます。利用可能なショートコードは以下で確認できます。
https://jetpack.com/support/shortcode-embeds/