Harmless Weblog

日替わり通信術

Webアプリ日替わり通信術(公開後3年)

Webアプリ日替わり通信術練習(モールス受信)を公開して3年になる。

公開後2年半のタイミングで実施された2023年9月期の一総通試験では、過去最多5名のアプリ利用者の方より合格(通信術の科目合格含む)のご報告を頂くことができた。

2024年の3月期はお一人から合格のご報告とともにドネーションを頂いた(ありがとうございます!)。X(旧Twitter)上の検索では合格のポストはヒットせず。すべての受験者がネットで情報を取得・発信しているわけではないし、ネット利用者でもXを使っていない方も多いとは思うけれど、それにしても今期は少ない気がする。利用者自体はアクセスログベースの集計だと昨年度よりも増えていて、1日あたり60〜80名ほど。

higawari2024.jpg

この1年で新たな機能追加としては、和文pdfファイルの表示とダウンロード機能くらいかな。ほとんどの利用者には不要な機能と思うので使っているユーザは少ないと思う。また、この機能はVPSのChromeに依存しているので、アップデートしたりすると不具合が出てけっこう面倒。

機能追加ではないけれど、2024年3月期の試験後にアプリを置いているさくらレンタルサーバを新ハードに移行した。グローバルIPが変わるということで多少混乱があるかな、と思ったけれど、意外となんともない感じ。レスポンスも向上していると思うけれど、元々軽いページなのでそれほど変化は感じないかも。課題としては古いphpバージョンをそのままにしているので、これをアップデートしたいけれど、事前検証をしないと怖いので躊躇している。

あとは何度も同じ問題が出て飽きないように、本文プールの拡充は少しずつ進めている。和文は青空文庫を使うことが多かったけれど、最近は生成AI(Chat-GPT)を使うことも増えた。プロンプトがなかなか難しいし、無加工ではやっぱり問題には使えないので、一手間かかる感じ。

ブログなどで逐次書いてきた開発の経緯から実装の技術的内容、および公開後の反響までをまとめた記事をplus TK2sさんの同人誌に寄稿。興味のある方は通販や電子版の販売もありますのでどうぞ。

無償公開とはいえ(ポジティブな)反響があるとそれなりにモチベーションにはつながるわけで、あまりにも反響が薄いと「あまり役に立っていないのかな?」と不安になる。ありがたいことに数年分のサーバ維持費に相当するドネーションを頂いているので、このまま公開を続けていこうと思う。

現状でもすでに2年半分の過去の日替わり問題の蓄積があるので、日替わり更新をやめたとしてもあまり問題ないとは思うけれど。逆にその日の問題はタイトル通り日替わりの一期一会だった当時の仕様と比べて、「いつでも練習できるから今日やらなくてもいいや」という甘えが合格者数の減少につながっているとしたら...。

≫ 続きを読む

アマチュア無線   2024/04/29   gena

さくらレンタルサーバその後(新ハードに移行完了)

さくらのレンタルサーバを借りたのは2005年で、当時契約していたインターネットプロバイダ廃業に伴ってホームページの引っ越しを迫られたことがきっかけだった。当時のライトプランは年額1500円で300MBの容量、CGI利用可、メールアドレス生成無制限など、当時からお得感があった。ありがたいことにその後19年間、安定してサービスを継続してくれているだけでなく、料金据え置きで容量は100GB(300倍)にアップしていて大変感謝している。鳴り物入りで登場してユーザを集めどんどん値上げした上にサービスが劣化した挙句10年も経たずにサービス終了する幾多のクラウドサービスは猛省してほしい。

さすがに古参ユーザの収容サーバも老朽化してきたようで、しばらく前から新ハード(SSD化、OSアップデート)移行の提案が来ていた。以前のように単なる個人のホームページやブログ、メールサーバだけであれば迷わずとっとと移行すれば良いんだけれど、今はWebアプリ「日替わり通信術練習」をレンタルサーバで動かしていて、最低でも毎日最低数十人のユーザがアクセスして試験対策に使ってくれている状態であり、簡単にサービス中断するというわけにもいかない。

ただ、このまま旧環境を使い続けているとそのうちさくら側の都合とタイミングで勝手に移行されてしまいそうだったので、総通試験直後の週末、かつ日替わり問題の更新に影響がない夕方を狙って、2週間のアプリ上での告知期間を経て移行を実施。

16時に移行開始してから完了のメール受信が来たのが18時過ぎ。ただIPアドレス変更の影響か、18時頃にはまだWebサイトはメンテナンス表示で、普通に閲覧できるようになったのは20時頃だった。特にトラブルや表示の異常などもなく、すんなり移行できて良かった。

さくらレンタルサーバはずっと不可とされてきたプラン変更がついに解禁されたので、スタンダードプランに移行するかどうか迷っている。WordPressを使うなら迷わず移行なんだけど...。

≫ 続きを読む

パソコン・インターネット   2024/03/30   gena

2023年総括

2023年はプライベートでかなり激動の1年となった。受動的に何かに対応したというよりは、自分で決めて新しいことにチャレンジしたという意味で良かったと思っているけれど、いろいろと今後に向けて不安なこともある。楽に過ごそうと思ったら日々のルーチンを淡々とこなして「できることだけをやる」のが間違いない。新しいことを始めるというのはとにかくエネルギーも使うし悩みも増える(お金もかかる)。でも、50代を前にして「やらずに後悔するよりは、やって後悔した方が良い」と思ってチャレンジした感じ。

具体的には7月に30年ぶりに教習所に通ってバイク免許(普通自動二輪)を取得した。その勢いで原付2種(125cc)のバイクを買って、置き場所がないからとトランポの増車に踏み切った。

Apple Watchの購入をきっかけに始めたジム通いも2年目。行くのは週末や長期休暇の早朝のみだけど、一応続けている。体重を減らすというよりは維持しつつ体力と筋力を付けるイメージで。

かんなさん(奥様)も今年は大きな変化があり、資格を活かした仕事を始めて日々忙しく過ごしている。高齢のにゃんこたちが留守番する時間が増えてその点は心配なんだけど、幸いどうにか無事に過ごしてくれている。

コロナ禍以降体調には常に気を付けていたのに、よりによって結婚20周年のミラコスタで体調を崩してしまったのが痛恨だった。

アマチュア無線活動

昨年同様に、個人コールでは430MHzのコンテストで移動運用、HFは専ら社団局のCWオペレーターとして活動。社団局は地域クラブCW専門クラブで、今年はCW専門クラブの活動がメインだった。本部行事などを意識する必要のあるJARL登録の地域クラブと比べて、CW専門クラブは好きな人だけが集まって作ったので楽しい。

若手不足とのことでJARL県支部のお手伝いもするようになって、今年は初めてかんなさんと一緒にハムフェアの出展者(県支部ブース)として参加。

CWのデコードに関しては実験的なものはかなりの精度になってきていると思うけれど、一般の人がコンテストの受信などで気軽に使えるようなアプリはまだ登場していないようだ。

車とバイクの項で書いているけれど、トランポ用にバネットバンを増車したので、来年の移動運用はこの車でやろうと計画中。

資格取得活動

かんなさんに付き合って、2月に電気通信主任技術者(伝送交換)、5月に工事担任者(総合通信)を取得。工事担任者は高校生の時に記念受験して落ちて以来のリベンジだったのでけっこう嬉しい。

一応勉強の習慣を維持するために次の資格勉強は始めているけれど、いまいちモチベーションが上がらない。単純に難易度が高い(過去問暗記では歯が立たない)というのもある。

プログラミング

Webアプリ「日替わり通信術練習」は2021年4月に公開して、2年半経った。今年の9月期の総通試験では、5名のアプリユーザの方から合格(通信術の科目合格)のご報告を頂いた。受験者のツールとして定着してきた手ごたえを感じている。今年のアップデートとしては、和文答え合わせページと、同ページのpdfダウンロード機能を実装した。

主要な機能は公開以来変更せずに、いずれも小変更に留まっている。時間が経つほどいろいろ変えたくなってくる心情もわかるけれど、このアプリに関してはとにかく「シンプルイズベスト」と思って今後も大きな変更はしないつもり。

plusTK2Sさんの同人誌「通信受験人C103号」でWebアプリ「日替わり通信術練習の開発」の記事を掲載頂きました。サイトで開発状況はアップしているものの、開発経緯から技術的な内容まで通して整理して書く機会が今までなかったので感謝。

あとはかんなさんの仕事のサポートでInstagramのアカウントを作ってAPIを使えるようにしてみたり。いろいろつまみ食いをして、結局身に付いたのはサーチャーとしてのスキルくらいだけど、コピペコーディングで求める機能をいかに素早く実装するか、というスキルはけっこう有用だと思っている。

アコースティックギター弾き語り

ギタークラブは先生が体調不良のためお休み中。フォーク全盛世代の先生なのでそろそろ年齢的なこともあって、再開できるかどうかは微妙かもしれない。

一応ギターは壁にかけてあって、いつも手に取ることはできる状態にあるんだけど、ギタークラブで課題曲がないとどうしてもサボってしまう。まあこういうのはまたやりたいと思ったときに再開すれば良いのかなと思っている。一応基本的なコードや弾き方は忘れない程度には身に付いたかな。

ピート18歳デルタ16歳の高齢猫たちと過ごす日々。ピートは基本的には元気なんだけど、たまに股間に痛みがあるようでウーウー唸りながら舐めて治している。「絶対に病院には行かないぞ」という強い決意で自力でなんとかしてしまうのがピートのすごいところ。ただ、最近はさすがに気持ちに身体がついていかないときがあって、洗面台から落ちてみたりソファに登るのに失敗することもある。

デルタは2年前の尿路結石からの回復以降、少しずつ老化も進んでいるようで、歩くときもひょこひょことゆっくりで、高いところに登るのもしんどそう。あと週1~2回の頻度で血餅を頑張って出している。血餅を出せばすっきりするみたいでしばらくは落ち着いているけれど、また数日すると踏ん張って血餅を出す感じ。病院はデルタのストレスも大きいので今のところ自宅で様子を見ている。食欲はピートよりも旺盛で体重もある。何より甘えっこぶりに拍車がかかって、留守番させて出かけるのが忍びない。

猫たちにはできるだけストレスなく苦しい思いをしなくて済むように過ごさせてあげたいけれど、人間にできることには限度もあるし、どうなるか。

IMG_1670_w560.JPG

IMG_1674_w560.JPG

バイク

今年からの新カテゴリー。普通二輪免許の取得後、CWクラブのメンバー(師匠)がバイク好きでもあった縁で、お試しで何台かバイクに乗せてもらった。それまでは漠然と価格や維持費が安く公道で持て余さない(かつ取り回しに苦労しない)125ccクラスで、昔ながらのデザインのバイクが良いなと思っていて、具体的な車種としてはキャドウェル125とか、YB125SPなどが気になっていた。

それが、師匠のバイク(ドリーム、GB250, CBR250RR)に乗るうちに微妙に洗脳されてしまって、125クラスというのは変わらずだけど、高回転まで回して楽しめるバイクが良いのでは、と思うようになって、やはり師匠のツテで中古のGSX-R125を購入。冬前に少し走らせて楽しむことができた。

自宅がマンションということで安全な駐輪場もなく、しばらくは師匠のガレージに置かせてもらっていたけれど、思い切ってトランポのバネットバンを増車。トランポとしては充分なサイズで、買った時はなかなか良いんじゃない?と思った。しかし問題は自分の技量で、ほとんどバイクの取り回しもしたことのない初心者が、ラダーレールを使ってトランポにバイクを載せ下ろしするのは大変難しいということを思い知らされた。

とりあえず冬の間はこのままトランポに積みっぱなしにするつもりだけど、春になったら置き場所をもうちょっと考えたいところ。トランポはトランポでいざという時にバイクを積めるし、無線に使っても良いので。

IMG_4283_w560.jpg

バイクのところで書いたように、バネットバンを増車して、プジョー2008、ロードスター、バネットバンの3台体制となった。3台目は保険の等級が初期値からになるので、なかなか痛い。

プジョー2008(2014年式)は中古で購入後4年目の車検を通した。たまたま私が運転しているときにフロント足回りからの異音に気付いて、フロントショック一式を交換してもらった。それ以外にも細かい不調はあるけれど、まあフランス車だしね、ということで安全な走行に支障がないものについては放置している(たまにウィンカーの音が鳴らない...とか)。かんなさんは2ペダルMT(ETG5)をパドルシフトで乗るのに慣れてしまって、逆に普通のAT車の方が違和感があるそうで、気に入っているみたい。まだ当分は乗り続ける感じ。

ロードスターNC1(2006年式)は中古で購入後6年でこちらも車検を通した。ドレン詰まりによる重篤な雨漏りはドレンパイプの清掃で落ち着いているけれど、大雨のときは幌と窓の接触部からポタポタと漏るようになってしまい、大雨予報が出ると前日にハーフカバーをかけたりしていた。ただ通勤に使っているとそうそういつもハーフカバーをかけるわけにもいかず、これはいよいよ幌張替えか、と思っていたタイミングでバネットバンを買うことになってしまったので、通勤など足車はバネットバンにして、ロードスターは屋根のある車庫をお借りしてそこに置かせてもらうことにした。

バネットバン(2006年式)は今年秋から仲間入り。走行13万キロのポンコツくんだけど、バイクを積んだまま通勤・足車として今はこればかり乗っている。運転は楽だけどハッキリ言ってつまらない。なので燃費が悪いのが余計に気になる。運転が楽しければ燃費なんて気にならないのになぁ。今後買い替える機会があったらどんな車種であろうともMTを買おうと心に誓った。

IMG_4301_w560.jpg

読書

今年も気になる(けれど即買うほどでもないと思った)本はとりあえず欲しいものリストに入れておいて、Kindle本のセール時にまとめ買い。半額になったりするのでバカにならない。

再読も含めれば永劫が一番だけど、新刊だと三体0、次点がオーラリメイカーかな。オメガ城の惨劇はもちろん最高だったけど、個人的に思い入れが強すぎるので単品としての評価は難しい。

【SF】

【ミステリ】

ご参考 過去の総括記事

2022年, 2021年2020年2019年2018年2017年2016年2015年2014年2013年2012年2011年2010年2009年2008年2007年2006年2005年

≫ 続きを読む

ブログ   2023/12/31   gena

日替わり通信術練習(和文pdfファイルの表示とダウンロード機能)

2023年9月期の一総通試験が終わり、メールやX(Twitter)で頂いた合格(通信術の科目合格)の報告が5件と過去最高を記録。2023年3月期は1件だったので、通年だと最低でもアプリ利用者の合格者は6名ということになる。2022年度の合格者数が10名だそうなので、今年度はアプリの効果でもう少し合格者数が増えていたりしないだろうか、と期待。

頂いたメールの中で、古いパソコンのブラウザだと和文ページのマスがずれて表示されるというコメントがあった。この問題は把握していて、古いブラウザだとCSSの解釈が不完全だったりフォントが入っていないなどの原因がある。

基本的にはできるだけ最新のブラウザやスマートフォンを使ってほしい、ということなんだけど、試しにサーバ側で和文ページのpdfを生成して、ブラウザから表示・ダウンロードできるように検討を開始。

和文ページはJavaScriptで動的に生成しているので、サーバ(VPS)でChromeをヘッドレスモードで起動し、PythonのSeleniumで和文ページをクリックして表示させてから、pdfで保存するというのが一連の流れ。以下のページが参考になった(というかそのまま)。

[Qiita]SeleniumとHeadless ChromeでページをPDFに保存する

Seleniumのスクリプトを工夫して、過去の問題をどんどん掘っていってpdf化することも可能だけど、とりあえずは機能実装後のpdfを毎日保存していくようにしてみた。

このヘッドレスChromeとSeleniumは優秀で、たいていのWeb情報はクローリング・スクレイピングできそうだけど、なるほどそういうのを避けるために「私はロボットではありません」みたいなチェックをさせる仕掛けがあるんだな、と納得。

既知の不具合としては、スマホのPWAでアプリとして起動したときに、pdf表示から元の画面に戻る方法がないこと。pdfに元ページへのハイパーリンクを仕込めばいいのかな。

getpdf.png

≫ 続きを読む

パソコン・インターネット   2023/11/25   gena

Webアプリ日替わり通信術(公開後2年)

Webアプリ日替わり通信術練習(モールス受信)を公開して2年になる。

Twitterやメールでアプリを使っていますとのレスポンスは継続して頂いており、2023年3月期の試験でアプリ利用者の方2名が一総通合格との報告を頂いた。アプリ作者として嬉しく感じるものの、肝心の「合格者倍増」とまではいかず、焦りのようなものはある。もしアプリを使っておられる方で合格された方はTwitterやjarl.comのメール宛にお知らせ頂ければありがたいです。

推定利用ユーザ数も昨年から2倍くらいに増えていて、受験者数から考えると必要な方にはだいたい行き渡った感じかと思う。

higawari2022.jpg

アプリの改良も今のところ考えつくものは実装できたかな。この1年で以下のようなアップデートをしている。

この中では特に過去の日替わり問題の練習機能が重要だったかと思う。2023年3月の時点で約8か月分、500回分以上の問題を選択できるようになっている。「試験直前に1日2回分の更新では足りない」という言い訳(?)はもう通用しないはず。

技術的にはけっこう苦労した和文答え合わせページが見た目もインパクトがあるんじゃないかと思っているけれど、それほど反響はなかった。

あとは機能的な部分とは無関係だけど、毎日更新というタスクの信頼性を考えて、電報文生成のスクリプトを自宅のラズパイからさくらのVPSに切り替えた。VPSはドメインも取ったので、アプリのURLも引っ越せばいいんだけど、今まで使ってくれている人が混乱するといけないので、レンタルサーバのままにしてある。

アプリとしてサポートできる部分はこれくらいなので、あとはひたすら書き取り練習を頑張って頂いて、多くの方が合格されることを願っています。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

公開後1年の記事

≫ 続きを読む

アマチュア無線   2023/04/02   gena

日替わり通信術練習(和文答え合わせページの実装)

かんなさんと一緒に取り組んでいた資格試験の勉強が一段落したので、二週間ほど集中して取り組んでどうにかリリース。

日替わり通信術練習(モールス受信)のWebアプリを開く

当初から日替わり通信術練習を送信の練習にも使いたい、とか、和文受信用紙に書き取ったときの答え合わせがしたい、ということで、受信用紙のフォーマットで表示したいという漠然とした考えはあった。

ただ、それを実現するためには受信用紙の変態的な縦書き帳票・原稿用紙スタイルをCSSで再現しなくてはならず、少しずつ「css 帳票」や「css 縦書き 原稿用紙」などのキーワードでググって調査は進めていた。

参考にしたサイト

ちなみに上記はすべてqiitaのサイト。最近プログラミングやHTML関係でググるときはかならず"qiita"を検索ワードに追加している。そうしないと、「〜の方法をご紹介します!」から始まって「〜いかがでしたでしょうか?」という冗長なサイトばかりが引っかかって、読んでも結局そんなことは調べてないとか、最初から知っていることだけで有用な情報が得られないため。一般的なことを調べているビギナー向けには役に立つサイトなんだろうけど、こっちが求めているのはもっとニッチでマニアックな内容なんだよなぁ。

和文受信(送信)用紙のフォーマットは、縦書きの帳票+原稿用紙という変則的なもので、もちろん作り方はググってもどこにも出てこない。上記の帳票のCSSに、縦書きのCSSを組み合わせる方法で手探りで作っていった。

基本はCSSでボックスを各項目(発信局とか字数とか)ごとに並べて、各ボックスのフォントを縦書き・当幅フォントで指定してあげて、位置とフォントサイズを細かく調整する地道な作業。

原稿用紙のフォーマットが課題だったけれど、原稿用紙の罫線部分を画像として保存して、白背景部分を透過にしたpngをサイズ指定で貼ることでなんとかそれっぽくなった。どうしても微妙にマスがズレるんだけど、この程度は許容範囲ということで。

パソコンからそのままA4に印刷すると、受信用紙と同じサイズで出力されるので、送信練習をリアルにやりたい方は使えると思う。

IMG_3276_w560.jpg

構想時にはもっと苦戦するかと思ったけれど、やってみたら(力技っぽいところがあるとはいえ)意外とうまく作れたな、という感じ。

実装したかった機能は今のところこれでだいたい完了かな。そもそものHTMLとCSSがけっこう原始的で、JI1JDIさんのモダンなDitDah Appsには憧れるけれど、今のままでも総通の通信術の練習という目的には充分使えるのではないかと考えている。

≫ 続きを読む

パソコン・インターネット   2023/02/25   gena

日替わり通信術アップデート(過去の日替わり問題の練習機能)

ユーザーの方から、「何日の問題がちょっとおかしかったです」的なご指摘を何度か頂いた。日替わり通信術の電報文は、毎日上書きしていて過去のデータは残していないためにバグの確認もできない。

一応バックアップを残すようにするか、と考え始めたところ、どうせならサーバ上にバックアップをとって、それを参照すれば過去の日替わり問題を練習できるのでは、と思い立って実装を開始。

バックアップはシェルスクリプトで比較的簡単にできたけれど、過去問題の参照はそこそこ苦戦。元々そういう構造にしておらず、日々の問題を同じ場所に上書きして、index.htmlで静的に読み込んでいた。過去問は日々「年/月/日」のフォルダを作って保存されるため、これを動的に読み込む必要がある。

参考になりそうなサイトをググって試してみるものの、こちらの方法はいずれもうまくいかなかった。読み込むタイミングとかの問題だと思うんだけどよくわからず。こちらの方法はうまく動いた。どうやらappendChildメソッドで、headの要素として追加するか、bodyの要素として追加するかで挙動が違うような感じ。

【参考サイト】

これでとりあえず動くようにはなったと思う。ただ、練習問題がたくさんある状態というのが、実力アップに効果があるかどうかは正直わからない。一期一会の日替わり問題だからこそ、毎日真剣勝負で練習できるという面はあると思うし、そのつもりで日替わり形式にした経緯がある。一方で追い込みの時期には毎日2回分の問題では物足りない、というコメントも確かにある。選択肢は用意したので、あとはご自身のスタイルに合わせて使っていただければと思う。

【2022.8.1追記】

1日分の過去データがある状態でデバッグしてリリースしたものの、2日分以上のデータがあると、前日以外のデータが選べないバグがあることがわかった。やはりテストデータも作らず拙速にリリースするとこういうことになる。

過去問題のデータを動的に読み込むと言っても、一度ページを読み込み終わってしまうと、書き換えるためにはページを再読み込みする必要がある。そして再読み込みすると日付選択のカレンダーが前日の日付にリセットされてしまい、毎回前日のデータが読み込まれてしまうというわけ。

そこでCookieに選択した日付を覚えさせてからページをリロードするようにしたら、思ったような動作になった。

日付選択のUIは端末によって動作が異なるし、Cookieとリロードに頼るのもあまり美しくはないけれど、まずは動くことが重要ということで。もっとモダンなコードが書けるようになれたら良いな。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

≫ 続きを読む

アマチュア無線   2022/07/31   gena

日替わり通信術アップデート(PWA対応)

2021年10月頃に新しいブランチを切って、ちょっと試してはうまく動かず棚上げして、思い出してはまたちょっと試して、というのを繰り返していたPWAへの対応。ようやくだいたい思い通りの挙動になったので、試験的にリリースしている。

PWAというのは「プログレッシブ ウェブ アプリ」のことで、Webアプリケーションをネイティブアプリのように使えるようにする技術。

日替わり通信術は単純なWebアプリのままでも特に不便はないと思うんだけど、主に技術的興味で対応を進めてみた。強いてPWAに対応させるメリットを挙げるとすると、

  1. スマホやタブレットで「インストール」すると、ホーム画面からネイティブアプリのようにワンタップで起動できる(Webブラウザを開いてブックマークから起動するのに比べて手間がかからない)。
  2. ネットにつながない状態でも(ネイティブアプリのように)起動できて、聞き取り練習できる。ただし最新の問題に更新するためにはネットにつなぐ必要がある。

という感じかな。パソコンからWebブラウザ経由で使って頂いている方には特に何が変わったのかはわからない変化かと思う。

最初にいろいろ調べて試してみたところ、オフライン対応するためのキャッシュが強力すぎて、日替わりの問題更新ができなくなってしまい、この解消に何ヶ月も(週末だけたまに)悩んだ。また、PWAは元々Googleが提唱してChromeブラウザから対応が始まっているという経緯があり、2022年時点でもiOS+Safariの環境だと対応が不完全で、Android+Chromeの場合と挙動が異なるのも苦労した点。

まあiOSで対応が進まないのは仕方がない面もあるとは思う。PWAに完全対応すると、Apple Developer ProgramとApp Storeを経由せずに好きなアプリを開発・インストールできるようになってしまうので。所詮Webアプリでしょ、と思うかもしれないけれど、日替わり通信術の一連の開発を通じて、HTML+Javascriptで相当いろいろなことができることがわかったし、Webアプリならプラットフォームに依存せず開発できるという大きな強みがある。

キャッシュをなかなか手放してくれない問題は、まずはService Worker(SW)を適切に書いてあげて、日替わり問題の更新タイミングでSWのキャッシュ名を変更(日付)してサーバにアップロードする。そうするとアプリが次にService Workerを読みに行った時点で更新があることを認識できる。ただ、それだけだとSWを更新した直後の読み込みでは、更新を検出はするものの、そのときはキャッシュを読んで、次回アプリの起動時に初めて古いキャッシュを捨てて置き換わるという動作になる。

SWの動作の理解は進んだものの、iPhoneとかiPadで試していると、やっぱりなかなかキャッシュを手放してくれない。最終的には、SWのインストール時にskipWaiting()の処理を入れてすぐに新しいSWを反映させて、さらに不要なキャッシュを削除するタイミングで、clients.claim()の処理を入れてすぐに新しいデータを反映させるようにする。

//インストール時処理
self.addEventListener('install', function(event) {
    event.waitUntil(self.skipWaiting()); // 新しいService Workerをすぐ反映
});

// 不要なキャッシュを削除
self.addEventListener('activate', event => {
    event.waitUntil(clients.claim()); // すぐに新しいデータを反映
});

そして日替わり通信術アプリだと、いずれにしても問題が更新された際にアプリの再読込が必要になる。Androidや普通のブラウザの場合はリロードしてもらえば良いんだけど、iOSの場合は今のところPWAのウィンドウをリロードする手段がなく、一度アプリを終了させて再起動してもらわないといけない。これは面倒なので、キャッシュファイルの日付から24時間以上経過している場合は、window.location.reload()を叩くリンクを表示させるようにしてみた。これを叩いて更新すれば新しい問題が読み込まれるし、古い問題をそのまま練習することもできる。オフラインの場合もキャッシュがそのまますべて使えるので、読み込んだ時点の問題は何度でも練習できる。

IMG_2399_w560.jpg

このような感じで、ようやくだいたい意図した動作にはなったかな。日替わり問題が更新されるタイミングでアプリを開きっぱなしにしているとどうしようもないけれど、それはブラウザの場合も同じなので。これに関してはプッシュ通知とか、さらに一段階難解な処理に取り組まないといけないかも。

Service Workerの記述についてはいろいろなサイトを参考にしたけれど、最終的に思い通りに動いたのは以下のサイトの例だった。

【参考サイト】Progressive Web Apps (PWA) 学習者のメモ その1  (Service Worker)

PWA対応によって以前と変わった点を画像で説明しておく。

まずはPWA本家AndroidのChromeの場合、最初にページを開くと、インストールを促す表示が出る。これに従ってインストールすると、ホーム画面にアイコンが追加されて、起動時にスプラッシュ画面が出るようになる。アンインストールは設定のアプリ情報から、他のネイティブアプリと同様に行う。

IMG_1068_w560.jpg

iOS、iPad OSの場合は、表向きはPWAに対応していることがわからない。インストールという表現はなく、共有ボタン[↑]から、「ホーム画面に追加」を選ぶことで、Androidのインストールと同様の動作となる。普通のWebサイトをホーム画面に追加した場合と比べると、URL欄が表示されず、下スワイプでリロードできないなど、ネイティブアプリっぽい動作となる。アンインストールは、アイコンを長押ししてブックマークを削除。

IMG_2398_w560.jpg

パソコンの場合は、ブラウザのURL欄の右にあるボタンからインストールができる(Edge, Chrome)。MacOSのSafariの場合は今のところインストールはできない模様。MacでChromeを使えば普通にインストールできるし、Launchpadにも自動的に登録されるので、特に不便はなさそう。

higawari_chrome_w560.pnghigawari_edge_w560.png

これで安定稼働してくれれば、考えていたアップデートはクローズかな。あとは長く使ってくれている方向けに、和文・欧文の本文プールの拡充とか、名あての住所データベースの拡充などはやりたいけれど、これは時間をかければできる話。

次のプロジェクトは何が良いだろう。モールス受信関係はJI1JDIさんのDitDah Appsでだいたい網羅されているので、何か別なものがないか考え中。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

≫ 続きを読む

アマチュア無線   2022/05/24   gena

ルビで置換するブックマークレット

日替わり通信術の和文プールには青空文庫を使わせて頂いている。できるだけ新字新仮名の「新しめ」の文章を選んでいるけれど、それでも古い言い回しでルビが振ってあることが多い。

漢字かな混じり文を読み仮名に変換するMeCabは万能ではないので、難しい読みは間違える。不自然な読みになっても受信練習には影響ないんだけど、できれば正しく変換させてあげたい。ということで、読み込ませる前の文章を、ルビを振ってある難しい読みのところは、ルビに置換してしまうブックマークレットを作った。「ルビを削除」するブックマークレットは検索すると出てくるけれど、元の文章をルビで置換するものは見当たらなかったので。

コードは「ルビを削除」するブックマークレットで、正規表現の置換元を、<rb>から<rt>に変えたたけ。

javascript:(function(){o=document.getElementsByTagName('body')[0];s=o.innerHTML;s=s.replace(/<ruby>.*?<rt>(.*?)<\/rt>.*?<\/ruby>/gi,'$1');o.innerHTML=s;})()

≫ 続きを読む

パソコン・インターネット   2022/04/25   gena

日替わり通信術アップデート(反響音効果)

公開後1年の記事に書いたのをきっかけに、改めて反響音(リバーブ処理)の追加に取り組んだ。

しかし、元々のWeb Audio APIを使ったコードが「コピペコーディング」で、どうにか動くようにしたものなので、リバーブの処理をやはり参考のサイトからコピペしても、うまく動かず。

参考サイト:

どうやら非同期処理の影響らしい、ということはなんとなくわかる。インパルス応答のwavファイルをAudioBufferとして読み込んで、Conbolverノードを原音とミックスして出力する、というときに、wavファイルをAudioBufferに読み込む処理が時間がかかるので飛ばされて、先に他の処理が走ってしまう。

このように時間のかかる処理の終了を待ってから次に進む、というのがJavascriptで言うところのコールバック、Promise、Async/Awaitなどで、関数が結果を返すまで実行を待機する。

と、教科書的なことはなんとなくわかるんだけど、実装するとうまく動かない。参考にしたコードでは、AudioBufferの読み込みにAsync/Awaitを使っているので、コピペしてみたところ、確かにエラーは出ないけれど、iPhone/iPad環境で、1回目の再生で音が鳴らない。パソコン環境だと動く、という微妙な状況。

結局3週間ほど週末に集中的にデバッグとリファクタリングに取り組んで、ようやくテストしたすべてのデバイスでエラーなく1回目で音が出るようになった。テストした環境は下記。

  • Windows10 Chrome
  • Windows10 Edge
  • MacOS Monterey Chrome
  • MacOS Monterey Safari
  • Android Chrome
  • Kindle Silk
  • iPad Safari
  • iPad Chrome
  • iPhone Safari

一番のキーポイントは、window: loadイベントをasyncにしてAudio Context関係の処理をすべて囲んで、loadイベントの最初にawaitでインパルス応答の読み込み処理を済ませてしまうことだった。これはつまり参考サイトの構成そのまま。やっぱり独自にヘンなことをするのではなくて、基本に忠実にするのが結局一番確実ということだった。

処理はできるようになったんだけど、インパルス応答(IR)のwavファイルをどうするかが問題。理想的には総合通信士の試験会場でインパルス応答を測定できれば良いけれどそれは無理だし、似たような会場で測定しようにも機材がない。ネットでフリーで使える素材も限られている、というのが今回わかった。幸い、非商用に限りフリー、というコンサートホールのIRがあったので、これを使わせていただいた。

higawari_reberb_wave_w560.jpg

重い腰を上げてリファクタリングに取り組んだので、ついでに気になっていたCSSも全面的に修正。pure.cssというフレームワークを使わせていただいているけれど、その親要素で縛られているところがなかなかわからず、cssの指定が効かないと思ってデバッグに時間がかかった。Chromeのデベロッパーツールの要素タブを睨みながらなんとか親要素を部分的にオーバーライドして、所望の動作をするようになった。

これまでの一時停止機能、反響音機能を通してまだまだ汚いながらもリファクタリングはできたと思うし、自分自身のJavascript、CSSの勉強になった。

あとはPWA対応が残っているけれど、日替わりでデータを読み込む必要性があるので、ネイティブアプリっぽくしてもあまりメリットはないかも、と思って優先度は下げている。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

≫ 続きを読む

アマチュア無線   2022/04/22   gena