Harmless Weblog

日替わり通信術

さくらVPSその後(CentOS7のEOL対応)

さくらのVPSは契約後そろそろ2年になる。面倒で何もせずに先送りしているうちにあっという間にCentOS7のEOLの日(2024.6.30)が来てしまった。

結局移行先のOSは何が最適なのかはっきりしない。さくらVPS公式サイトの初心者向け講座が改訂されることを期待していたんだけど、何もなし。検索した感じだとAlmaLinuxとRockyLinuxのどちらかで、AlmaLinux派がやや優勢か？という感じ。

とにかく日替わり通信術練習の日々更新を止めないことが最重要で、あとは自分用のWebアプリ(日記とメモ)はできればすぐに使えるようにしたいけれど、これは最悪自分だけの問題なので、しばらく止まるのは許容できる。

移行の手順は次のような感じだろうか。ここで抜け漏れが無いようにできるだけ考えておくことが大切な気がする。それでも「あ、あの設定が抜けてた」とか必ずありそうだけど。それでもちょっと考えただけでこれだけのステップがあるのかと呆然とする。

  1. レンタルサーバ上の日替わり通信術練習サイトにシステムメンテナンスのアナウンスを載せる
  2. 移行作業中のバックアップ環境であるラズパイを最新状態にする(pythonのライブラリをVPSに合わせる)
  3. 日替わり通信術練習の生成スクリプトの最新バージョンをgithubにプッシュし、上記ラズパイにクローン
  4. pythonのパッケージをラズパイに反映[※1]
  5. Xで更新状況をつぶやくbotも同様にクローン
  6. クローンしたスクリプトの動作をチェックしてちゃんと動くようにする
  7. VPS上のcronで日々更新を止める。
  8. ラズパイ上のcronで日々更新を開始。この時点でうまく動かなければいったん切り戻し。
  9. VPS上のデータやスクリプト、設定などをバックアップ
    • 日記アプリとデータ
    • メモアプリとデータ
    • Webサイト
    • ITマンションアシスタント
    • cron, incron
    • firewalldのblacklist IPファイル
    • クラウドドライブの設定 
    • WAFの設定エクスポート
    • 各種設定ファイルをとりあえずまとめてバックアップ /etc, /var
    • pythonの必要パッケージをバックアップ　pip freeze > requirements.txt
    • pythonのバージョン：3.6.8
    • ラズパイにクラウドドライブをマウント
  10. VPSのOS(AlmaLinux9->AlmaLinux8)を新規インストール
  11. 環境構築
    • ssh設定(rootログイン禁止、ユーザ作成、公開鍵暗号)
    • Apache設定
    • クラウドドライブのマウント[※2、※3]
    • phpの設定[※4]
    • pythonの各種ライブラリインストール(日替わり通信術関係)[※5]
    • ドメイン設定(何もする必要がなかった)
    • 常時SSL化
    • メールサーバ設定(postfix)
    • CGI許可設定(httpd.conf)
    • chrome、WebDriverのインストール、設定
  12. バックアップファイルのリストア[※6]
  13. 新環境の動作確認。問題あれば対策
  14. 動作OKならcronの設定
  15. バックアップ環境のラズパイのcronを停止

【バックアップ環境の構築で困ったこと】

※1 Chrome WebDriverでちょっと苦戦。chrome-driver-binnaryが入らず。コメントアウトして、seleniumのバージョン相違を反映してfind_element_by_idを見直したらOKになった。

【OS移行後に困った・漏れていたこと】

OSの再インストールは、さくらVPSの公式スタートアップスクリプトを適用することである程度のところまでは自動でセットアップしてくれるので、そこは便利。sshの公開鍵方式のログインとかは、管理画面に公開鍵を登録しておくことで最初から使えるので、危険なパスワードログインは使わずに済む

※2 AlmaLinux9を選択して再インストールしたのは良かったんだけど、早速トラブル。いろいろとバックアップデータを置いているクラウドドライブ(InfiniCloud(旧TeraCloud))をマウントするためのdavfs2がインストールできない。検索してもどうやらまだAlumaLinux9(RHEL9系)に対応していないみたい(そもそもネット上に情報がほとんどない)。自分でソースからコンパイルしてやればどうにかなるのかもしれないけれど、こっちはとにかく環境復旧を優先したいので、他のモジュールについても同様のことがあっていちいち詰まるのも困るし、EOLまでの期間は短くなってしまう(2029年まで)けれど、枯れているであろうAlmaLinux8を再度インストール。9系はWebDAVに対応するまではお預けかな。

※3 正確にはクラウドドライブではないけれど、以前はさくらレンタルサーバのストレージ(さくらポケット)を、curlFtpFsというツールでマウントして使っていた。しかし、AlmaLinux8(RHEL8系)ではインストールできないみたい。WebDAVもダメ、curlFtpFsもダメとなると、9系のOSではクラウドドライブのマウントってどうやるのがスタンダードなんだろう？

※4 Apacheの設定もphpのインストールも簡単だったけれど、肝心の自分アプリが動かない問題に遭遇。500エラーだったので、.htaccessがらみかと思っていろいろ試したけれどダメ。最終的にはphp-fpmのログを確認したら、以前は普通に動いていたところがsyntax errorになっていて、これはphpのバージョンが古いせいでは、と思ってphpをアップデートしたら無事に解決。

※5 日替わり通信術練習関係では、やはりMeCabのインストールで一苦労。下記のサイトなどを参考に、サンプルは動くようになったものの、pythonスクリプト中のMeCab.Tagger("-Oyomi")がエラーになる。結局この行を書き換えて、辞書のパスを指定するようにして動くようになった。

m = MeCab.Tagger('-r /etc/mecabrc -d /usr/lib64/mecab/dic/mecab-ipadic-neologd -u /home/ユーザ名/user.dic -Oyomi')

AlmaLinux8上でMeCab+NEologdで辞書を作成してPythonから呼び出す

PythonでMeCabを使う際のメモ2

※6 WAF(SiteGuard Server Edition)は、CentOS7とAlmaLinux8でインストールしたバージョンが違っていて、せっかくエクスポートした設定ファイルが新環境で読み込めなかった。また一からカスタムシグネチャなどを再設定。

≫ 続きを読む

パソコン・インターネット   2024/07/27   gena
タグ：Raspberry_pi , 日替わり通信術 , 日記 , VPS , PHP

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
タグ：JavaScript , 日替わり通信術 , VPS , PHP

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

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

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

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

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

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

≫ 続きを読む

パソコン・インターネット   2024/03/30   gena
タグ：baserCMS , 日替わり通信術 , レンタルサーバ

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

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

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
タグ：総括 , ミステリ , SF , プジョー2008 , ロードスター , 日替わり通信術 , バイク , バネットバン

日替わり通信術練習(和文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
タグ：JavaScript , 日替わり通信術 , Python

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
タグ：CW , JavaScript , 日替わり通信術

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

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

日替わり通信術練習(モールス受信)の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
タグ：JavaScript , 日替わり通信術 , CSS

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

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

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

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

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

【参考サイト】

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

【2022.8.1追記】

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

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

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

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

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

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

アプリの詳しい説明

≫ 続きを読む

アマチュア無線   2022/07/31   gena
タグ：CW , JavaScript , Raspberry_pi , 日替わり通信術

日替わり通信術アップデート(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
タグ：CW , iPhone , JavaScript , Mac , iPad , 日替わり通信術

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

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

漢字かな混じり文を読み仮名に変換する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
タグ：JavaScript , 日替わり通信術