今回の記事は、ここ20日間ほどのプログラミングで悩んだことを中心に書いています。技術的な事項が多く、プログラミング経験のない方は、何のこっちゃ？と思われるでしょう。
私は現役サラリーマン時代、制御機器メーカで製品開発をしていて、仕事でプログラミングをすることはしばしばありました。ただし、プログラミングそのものを生業にしていた訳ではありませんし、今回のようなイベント駆動型のプログラミングをしたこともありませんでした。
定年退職から5年経って高齢者の仲間入りをしたこの時期に、イベント駆動型のプログラミングを事実上初めてしたので、その体験を自分自身の記録として残そうと書いたものです。
25.1.18(土)
この日の記事「オリジナル白黒地図をネットで表示」に、ウォーキングや街道歩き用に自作したモノクロ地図を、ウェブで表示したことを書いた。
Mapbox GL JS という地図プラットフォームを利用して作り、自宅 PC ローカルで表示していたものを、ウェブでも表示できるようにしたものである。この時は GoogleSite のウェブサービスで実現できたが、いろいろと問題があった。
GoogleSite での問題
GoogleSite では外部スクリプトを使用できないように制限されているので、自作地図データと他の部分を一つのファイルにまとめざるを得なかった。
自作地図データ自体は当然ながら、表示しようとする地図の位置や内容ごとに異なる。だが他の部分、自作地図データを読み込んで表示したり、ボタンが押された時の処理は共通である。機能追加や不具合修正など、メンテナンスでの手間を減らすには、共通部分は一つだけにしておき、自作地図データを選択して差し替えるだけで、表示される位置や内容を変えられるようにしたい。
また、GoogleSite では自作地図の表示はできたものの、印刷イメージがＮＧだった。A4縦の印刷イメージはローカルの時と同じようにできたのだが、A4横の印刷イメージでは右側が欠落してしまう。これでは A4横での印刷ができない。これも解決したい。
25.2.02(日)～
この日から3週間近く南米旅行に出かけたので、旅行とその前後はいったん作業を中断。帰国後は確定申告やスマホの機種交換などもした。
25.2.28(金)～
作業を再開。まず、外部スクリプトを使えるホームページサービス探し。fc2 のホームページサービスでは使えるとわかり、fc2 で試すことにした。さっそくアカウントを開設し、トップページを作った後、サブページを作成。サブページに自作地図を置く作業に取りかかった。
ファイルの分割
GoogleSite の時に工夫を加えて、ウェブでの使い勝手を改良、メニュー追加していたが、自作地図データとそれ以外の共通部分を一体化して一つのファイルにせざるを得なかったので、まずこれを分割。共通部分は複数ファイルになるが共通に使い、共通部分から読み込む自作地図データを入れ替えて使うためである。
地図データの指定方法
次に自作地図データの指定方法を考えた。URL の後ろに？や＆を使って付けるパラメータで指定するのが簡単だろう。ネットで検索して試し、少し手こずったが実現できた。
指定したデータの取り込み方法
自作地図データも javascript 形式なので、スクリプトとして取り込むのが簡単だろう。これまたネットで検索していろいろ試し、少し手こずったが実現できた。
動作確認と不具合修正
案の定、これに手こずって試行錯誤の連続となった。自宅 PC ローカルでは正常に表示できていたものを、ウェブで表示しようとして、いろいろ不具合が生じた。
開いた時に表示される中心位置がおかしい、ラインやポイントが表示されないことがある、修正しようとしたらエラーが出る・・・ すべて詳細に書いたらとりとめもなく長くなるし、あまりにも技術的な内容なのでやめておくが、根本はイベント駆動型のプログラミングに慣れていない故の問題だったと思う。
イベント駆動型とはいえ、自宅 PC ローカルでは、ウェブに参照に行かずにローカルのファイルを参照するのであれば、書いた順に処理されることが多かったのかな。ローカルでは正常に動いて表示できていたものが、ウェブに上げた途端、非同期での処理終了の順序が一定しなくなって、不具合が顕在化した。ということだろうか。
システムエンジニアにとっては当たり前のことなのだろうが、イベント駆動型のプログラミングを事実上初めてした私にとっては、新鮮で苦悩の連続だった。
25.3.19(水)
fc2 にアカウントを開設して20日目のこの日、不具合をすべて解消できた。当初目標達成。表示しようとする自作地図データを指定すると、指定されたデータを読み込んで、所定のモノクロ地図をウェブ上で表示する機能を実現できた。
↑こんな感じのモノクロ地図です。クリックすると開きます。
開いた時の地図中心位置，ラインやポイントの表示は正常で、その後の拡大,縮小,回転,俯瞰,地図スタイル変更,印刷サイズ変更なども正常に動作した。A4縦,A4横の印刷イメージもＯＫ。
普段使っているグーグルクロームだけでなく、マイクロソフトエッジで試してみても正常に表示できた。ファイアフォックスなど、他のブラウザでどうなるかはわからないけど、この２つ以外のブラウザはインストールしていないし、自分用だからクロームとエッジだけでかまわない。
アンドロイドスマホで見たら、ボタンやボックスなどの位置はやはりずれてしまうことがあるが、拡大,縮小,回転,地図スタイル変更は正常に動作した。俯瞰はスマホではどう操作すればできるのかな。印刷サイズ変更も機能しているようだが、今まで自分のスマホからプリンタを使ったことはないし、自宅のパソコンからA4版の紙に印刷する目的で作ったので、これはあまり気にしなくていいだろう。
今後の自作地図データ追加や、細かい修正で失敗することはあるだろうが、基本形は完成できたので、すぐに復旧できるだろう。
今のところはウェブ上で正常に表示できているが、過去の経験では、前提としていたアプリやサービスが突然終了となったり、ウィンドウズのグレードアップやネット環境の変化で、それまで動作していたものが動作しなくなったりということがあった。fc2 のホームページサービスや Mapbox GL JS が無くならないという保証だってない。
浮かれていて、思わぬ落とし穴にはまったことは、これまでの人生でもよくあった。不測の事態は覚悟しておこう。
今回作った自作モノクロ地図の上部には、ボタンやチェックボックスを何個も置いてしまった。表示中はかまわないが、A4の紙に印刷するとやはり邪魔で目障りだな。これらをまとめて、地図とは別のダイアログボックスとかに移動できないかな。
次なるチャレンジとしてやってみようか。4月～6月頃には街道歩きや他の旅行を計画しているので、この夏7～8月頃かな。やるとしたら、またイベント駆動型プログラミングや javascript と格闘することになるのは間違いない。どこまで付いて行けるかな。