第一段階発表 および その他(自作HPに向けて3～属～)

　いよいよ第一段階を発表しました。

　つきましては、下記のHPをご覧ください。以前書いた通り、このブログの内容は時間を見つけてHPへ移設する予定です。

　「路地を曲がれば」プロジェクトHP

　発表物については、HPからダウンロードしてください。

　また、下記にやまひのTwitterのリンクを貼っておきます。重要な情報はできるだけHPに掲載するつもりですが、雑記のようなものはTwitterで呟くことが多いかと思います。

　やまひのTwitter

　どの程度の反響が得られるか、ドキドキしています。

その他 その2 (自作HPに向けて～宙)

　なんだかけっこううまくいきました。

　ホームページは何の加工もしていないけれど作れましたし、そこにファイルをアップロードすることもできました。発表する第一段階の完成品も（本来想定していたより幾分機能は足りていないが）、ほぼ完成です。

　Twitterで21時に公開すると発表したところ、恐れていたような権利関係の申し立てはなく、このまま発表に至る予定。まあ、発表後に炎上するかもしませんが、もうそれは仕方ないでしょう…。素人が20日足らずで作ったことも書いておいたし、クオリティに期待はされていないと思うので、とりあえずメンタル的に少し落ち着きました。

　あとは、明日の発表までにプロジェクトについての説明をするための環境を整えていくことが必要です。HPも少しはそれらしい装飾を施さないといけないし、そもそも本プロジェクトがどのような意図で始まったもので、どこを目指しているのかも説明しないといけない。

　本当はこのブログでそのあたりを第一段階の発表までに隙間時間を見つけて少しずつ書く予定だったんですが、隙間時間なんてものはなかったので（あったけど娯楽でメンタル回復する時間になってしまった）、全然書けていません。

　実は、内心「北へ。」ファンから変に反応されすぎると困るな、と思っていたのですが、画像付きの予告をしてもだいたい想定通りくらいの反応だったので第一段階の発表が終わったら想定通りに少し落ち着いてプロジェクトの整理ができそう。

　協力者が一人も現れない可能性はけっこうあるんですけど、それも進行が遅れるだけで、今までと同じように自分の足で一歩一歩進めばいいだけの話ですからね。というか、協力者と足並みがそろわないことでプロジェクトに対する私の熱意が失われてしまうというリスクを負わないで済む分堅実っちゃ堅実。

　というわけで、28日21時に本ブログとロジマガ公式サイト、Twitterがリンクされます。そう書いたらこの駄文を多少なりとも読む人がいるかもしれないと思うとまたメンタルがががが。

　全く校正も見直しもせず書いていたのが今になって恥ずかしい！でもこの記事の見直しもしない！

その他 その1 (自作HPに向けて～序)

　いやー、大誤算です。完全に知識不足でした。

　誤算は二つあります。

①自分の作成したHTMLファイルがブラウザで起動するからといって、それをサーバにアップしただけで同じように動くとは限らない。

　最初、ドメイン登録やらレンタルサーバやらを済ませてURLを貼ればそれだけでゲームをプレイできる状態を目指していたんですが、どうやら私の想像をはるかに超えてWebページというのは軽さを求められるようです。

　サーバにゲームをアップしてサイトにアクセスしてみたら、画像が重くて表示されないのです。しかも読み込みに時間がかかる。そこで、Webページってどのくらいの容量ならスイスイ動くのかな、と思って検索したら

「1.6MB以下に抑えるようにするべし」

　とのこと。これがどのくらい軽いか分からない方に申し上げますと、「私がタブレットで撮影した画像を900×1600の大きさでPNGファイルにすると、1枚しか入らない」という容量。私がアップしようとしていたゲームファイルは無駄に画質とかにこだわったせいで30MB近く…そら重いわな。

　というわけで、再考を迫られ、結局「適当に作った自作HPでダウンロードしてもらい、ブラウザで起動してもらう」というクソださい方法を取ることにしました。仕方がない、私には残された時間が少ないのだ。

　というわけで、自作HPを作ると決まった以上、本プロジェクトの軌跡をつづる場所もいずれはこのブログではなく「ロジマガ」のHPに移ると思います。まあ、第一段階が終わって一息ついたらそっちも実現していきましょうかね。

②google maps API では、ストリートビュー状態での動きをリバースジオコーディングできない

　いや、できるっちゃできるんですけど、私の考えていたようにgoogle mapをクリックした時同様にストリートビューでもジオコーディングができていると思っていたから、そこにかける時間を残していなかったんです。

　急遽ストリートビューでのリバースジオコーディングの実現を考えて色々調べておりますが、これまた時間がないので明後日の発表には間に合いません。

　仕方がないので、ストリートビューの操作に反応してのイベントの発生は第一段階では諦めることに…ここがこのプロジェクトの肝だったのに…なんということだ…

　というわけで、第一段階発表前になって突然越えられない山が2つ表れたので、しょうがなく迂回することになりましたとさ。

　いい、挫けるな。「少しでいいから進む」、「今が一番辛い」これを頭の中でリピートさせるんだ。

Maps JavaScript API その8（移動による座標取得）

 　悲報です…。今日もあまり進んでいません。というか、明日仕事が長引く恐れが強いので、今日でかなり進めないといけなかったんですが…。

　とりあえず、ストリートビューの表示はできるようになりました。というか、それを回避したというか。本当は自動でストリートビューに切り替わるようにしたかったんですが、どうも関数の呼び出しの関係で変数の定義と読み込み順がうまくいかず、しかもそれが私の書いたコードとではなくStreetViewのコードとの関係のようで、これは私の手には負えないと判断し、文章の作りを変更することで、手動で切り替えても自然な作りにしました。

　何度も何度も読み込み順の問題だろうと思い、asyncやdeferの書き方を見直しまくってみたんですが、分かりませんでした。ちなみに、作業が進まなかったのは半分以上ここに躓いていたせい。

　今は、ストリートビューの地点に応じてイベントを発生させるコードを書いています。しかし、これが意外と難しい。以前の住所表示の際にはネットにあったコードのコピペで済ませた部分を利用しなくてはいけないので、思うようにいかないことが多々あります。

　特に、event.addListnerに関する知識がほとんど皆無なので、検索しつつ片っ端から思いついた手法を試すという完全手探り状態。

　しかも、第一段階の発表にはこの上ウェブ上に完璧な状態でアップロードするという課題が…。2月中とは言ったものの、どう考えてもやばいですよ。

　まあ、私は遅刻しないように早めに家を出ても、忘れ物取りに戻ったり鍵を閉めたか不安になって戻ったりして結局2,3分前に着くようになる人間なので、期日のあるものでもどうしてもギリギリで完成させることがほとんどなんで、分かってたんですけどね、ええ。

Maps JavaScript API その7（ストリートビューの表示と移動による座標取得）

 　困りました。昨日私がやろうとしていたことは表題のとおりなのですが、案外うまくいきません。後一歩のところまではきているのです。ストリートビューの表示自体はできているのですが、それがcssでz-indexをしてもうまく表示されません。

　というわけで、すぐにプロジェクトに戻ります。発表まではこのブログあんま書けないかもなあ。記録は残しておきたいのだが。

Maps JavaScript API その6（目的地までの距離の表示）

 　今日は休日でしたが、特別新しく仕入れた知識はありません。まあ、全くないということはないのですが、未定義の変数かどうかを判別するにはtypeofで"undefined"という文字列と一致するかどうかを判定するのが一般的なやり方だとかそんなことくらいですかね。

　工程としては、ようやく終わりが見えてたといったところでしょうか。

　取得した位置座標から目的地までの距離を計測する関数も完成し、それによって必要なおおよその移動時間も表示できるようになりました。

　あとは、素材を集めて今までの知識を使って実際にコードを書く時間が多くなると思います。

　まだ仕入れなければいけない知識としては、

・ストリートビューの移動に伴なって位置座標を取得し、その判定によりイベントを発生させる。

・作成したhtmlとcss、javascriptなどを使って作成したファイルをウェブ上に置き、URLにアクセスするだけで利用可能にする。

　の二点くらいでしょうか。つい少し前までは第一段階の完成までにどのくらいの知識量が必要だったのかも見当がつかなかったことを考えれば、ものすごくゴールが近づいてきたと実感しますね！見えなかった第一ピークが見えてきたという感じ。

　前者はおそらく簡単ですが、後者はどのうらい難しいのか見当もつきません。一応昔クラウドサーバを借りてWordPressでホームページをアップしたことはあるので、1日もあればできるんじゃないかと思うのですが、見積もりが甘いかもしれません。テストも込めて何とか金曜の夜までにはコードは書き終えて、土日はその修正にしたいですね。

　しかし、こうやって書いているうちに実装したアイディアがまた一つ頭に浮かんでしまった。いや、多分そんなには難しくないんです。でも、すでに月末の発表までギリギリのスケジュールで動いている段階で思いつくのは嫌な予感しかしない…。どうしようっかなあ、と迷いつつプロジェクトの進行に戻ります。

Maps JavaScript API その5（逆ジオコーディング市区町村まで）

 　えー、昨日からの進捗はどうかというと、条件分岐については最低限に減らすことにしました。ストーリーと同じで、複雑にしだすときりがないんだということで、第一段階の発表というのはかなりの短編なのですから、やっぱりシンプルにした方が良かろう、と。

　というか、今日一日で分岐を複雑にしていったらやはりバグが出るようになって、自分で確認した範囲でもバグがちょこちょこ見つかるということは利用者からしたらとんでもないバグだらけなんだろうなあ、と自覚して条件分岐を大幅に削りました。

　このあたりは、プログラムに慣れてもっと簡明に条件分岐を書けるようになってきたら再挑戦でいいのかな、と思います。まあ、このことを判るまでに今日3時間以上費やしたんですが。

　さて、次は取得した緯度経度から二点間の距離を求め、それに従って条件分岐をする、ということを目指します。

　二点間の距離の求め方は、簡単です。三角関数と三平方の定理を使うだけです。中学生でもできますね。地球はほぼ球形なので、本当は球の表面の曲線分だけ距離は伸びるのですが、日本国内程度なら微々たるものなので無視して大丈夫です。

　ここでは具体的な式は書きません。検索すればたくさん出てきますので気になる方はぜひ。

　しかし、その前にやはり拘りたくなる点が。それが逆ジオコーディングによって表示する住所です。今までは、都道府県名から始めて9文字を切り取る、という妥協案でやっていたんですが、やはり「東京都港区海岸1丁」みたいに区切りの悪いのが気になるので、きちんと市区町村名まできれいに表示できるようにしようと決意。

　一度は諦めたことなので簡単にできるわけがないんですが、知識も以前よりついてきたせいか、なんかいけそうな予感がしたのでチャレンジしております。

　公表する前にテストプレイとかアップロードのテストとかもしなきゃだけど、大丈夫ですかねえ。まあ、前回も言ったように失敗だっていいんです。少しずつ改善して進めればヨシ！そう考えないと、メンタルが持ちません。すでに公表時のこと考えて内心ドキドキだってのに。

Javascriptその5(選択肢による分岐)

 　…甘かったです。

　以前、ここからが脂っこい、と書いた選択による条件分岐の部分ですが、想像以上の脂っこさでした。最初に想定して方法ではダメだということが分かり、別の手段に迫られています。

　C.B.S.システムという無理に導入しなくてもいいようなシステムを取り入れようとしたからこうなっているんですが…。やらなくていいことやりたくなって時間を大量にもっていかれる…この展開ばっかりですね笑

　具体的に書きますと、当初は選択肢を選ぶことによってイベントの進行に関わる「イベント番号」を変化させることでイベントを分岐させようと思ったのですが、それだけでは「選択肢を表示させる」を選ぶべき場面で(自動で選択肢を表示させないのがC.B.S.システムなのです)次のイベント番号に移動するスキップボタンを押してしまうと、存在しないファイルを参照してしまうことにより、ブラウザが止まってしまうのです。正確に言えばちょっと違うんですが、だいたいこんな感じの状態。

　しかし、本当に間に合うんでしょうかねえ…まあ、間に合わなくても発表はするんですけど。

　でも大丈夫、最初の発表で私の構想を伝えられなければ、第二段第三段で搭載していけばいいのです。

「最初に失敗すると取り返しがつかないよ」という発想は世間的にあるようですが、私はそれはあえて無視します。発想は逆です。「失敗してもいいからまずやってみる」なのです。どうせ大きなお金をかけているわけじゃないんですから。

　だから、恐れることはありません。そう、自分に言い聞かせます。

Javascriptその4(条件分岐、スコープ問題)

 　音楽ファイルは無事流せるようになりました。また、スタート画面とイントロダクションの操作説明ページも作成し、流れに沿って自然に始められるようになりました。

　しかし、やはりことはそう順調にはいきません。当初は簡単に思えた条件分岐を使った背景や登場人物の切り替えが案外うまくいかず苦戦中。原因はだいたいわかっています。条件分岐に使っているイベント番号が、スコープの範囲外でうまく動かないのです。JavaScriptだけの話だったら一番最初に変数の宣言と代入をしてしまえばファイル全体がスコープになるのですが、HTMLの操作が関わってくると、変数を書いたはずなのに「is not defined」問題に頭を悩ませることになります。

　いや、本当にこれで問題が起きているのか分からないけど…

　と、書きながらあらためで自分の書いたコードをちらっと見たら、違いました笑。超単純に、イベント進行ボタンの中でイベント番号を使った条件分岐を書いていなかった。なんという当たり前なことが…。まあ、プログラムの問題ってこんなもんだったりします。

　といわけで、問題が解決したから次へさっさと取り掛かります。プロジェクト第一段階の発表の今月末に向けて、予定よりかなり遅れているので、ちょっとでも取り返せるように頑張ります。

　

Javascriptその3(音楽ファイル再生)

 　ああ…こうしたらもっと面白いというアイディアはいくらでも思いついていくのに、それを実現する技術がないために思わぬ部分で時間を取られていく…

　今日はノベルゲー風の文章送りがほとんどできるようになりました。昨日からの課題で、昼間仕事しながら足りない頭でうんうんうなっていた一度表示したスクリプトを削除して新しいスクリプトを流すというコードが、帰ってきて仮眠をとったら一瞬で書けました。いやあ、睡眠って偉大ですね。

　本当は次にやることは「C.B.S(コミュニケーション・ブレイク・システム)」の実装のための設定なのですが(これができれば付随してプレイヤーの選択による条件分岐のための下地も整う)、私はここで少し手順を変更します。

　それが表題の音楽ファイルの再生です。最初は第一段階の発表時点では音楽がなくても許されるかな、などと考えていたのですが、実際に形が出来始めて自分で操作をし始めると、音楽がないと圧倒的に物足りない！なので、第一段階で何とか頑張って音楽を流せるようになろうと決意しました。…そう、今日の最初に書いた「思わぬ部分で時間を取られていく」現象に現在どっぷりとハマっているわけです。

　その自覚がありながらなぜ音楽に着手しているかというと、「自分の作ったコードのテストをするたびに大好きな音楽が流れたら絶対モチベーション上がる」というだけの理由です。仕事と睡眠以外の時間のほぼすべてを本プロジェクトに費やしている現在からどうやってさらにモチベーションが上がるんだ、というのは置いといてください…

　とりあえず、音源から必要なmp3ファイルを作成することはできるようになりました。後はこれをJavaScriptで再生させるだけです。まあ、案の定その「だけ」で躓いているのですが。てか、いまだにmp3ファイルが良いんですかね。私がネットに触れ始めた十数年前からずっとこれ使ってますが。まあ、そのへんも後で詳しい人の協力をいただけたら改善しようっと。

　なんだかプロジェクトが進むにつれてやらなくてはいけないことが増えていっているような…自分を追い込むために〆切設定のつもりで今月中には必ず第一段階の発表をしますと言ってしまっているけれど、大丈夫か？

　とりあえず思いつく第一段階での課題

・C.B.Sシステムの導入とそれに伴う条件分岐

・google mapから取得した緯度経度の数値を元にセリフを変更

・音楽ファイルの実装

・作成したファイルを正しくアップロード

・テキストシナリオの作成

・必要な画像や音楽など素材となるファイルの作成

　　これらは必須かな。二日で一つできたとしても今月中の発表に間に合わねえ…

　でもいい、確認する。「止まらなければ、いつかは辿り着く」。「今が、一番辛い」。

JavaScriptその2（ノベルゲーム構造作り)

 　前回、「google先生によると、ノベルゲームの基本プログラムは初心者でも書ける」という適当な情報を書きましたが、もうちょっと調べてみると、どうもjQueryとかで実装すれば自然とできるようになるというレベルのものではないみたいです。

　でも、実は頭の中では何となく仕組みは作れていたので、今まで学んできたJavaScriptやHTML&CSSの基本的な知識を組み合わせて作成に挑んでおります。

　ただ、やはりコピペしてくるのと自分で知識を動員して作り上げるのとでは進行スピードが違います。上手くいかないことばかりで、中～上級者なら一瞬で書けるんだろうなと思う内容に何度も何度も検索をかけて試しちゃ失敗し、たまに成功して喜び、また検索し…きっと、プログラミングを独学している者なら誰でも通る道なんでしょうね。

　とりあえず今のところ、ブラウザの操作に応じて参照するファイルの名称をJavaScriptで出力するところまでできるようになりました。何言ってるか分からねーよ、という方のために、私の頭の中に描いてることを含めてちょっと詳しく説明します。

　超簡単なゲームで例えましょう。

　キャラクターが朝の風景をバックに「おはよう」というセリフを表示→プレイヤーが「次に進む」ボタンを押す→バックが昼の風景になり、セリフも「こんにちは」にかわる→プレイヤーが「次に進む」ボタンを押す→バックが夜の風景になり、セリフが「こんばんは」にかわる。「前に戻る」ボタンを押すと逆の変化が起きる。

　これだけのゲームです。これを実現します。

　変更する必要があるのは、背景とセリフだけです。ですから、朝の場面に0番、昼の場面に1番、夜の場面に2番という番号を振り、プレイヤーが「次に進む」ボタンを押したら場面の番号を+1し、「前に戻る」を押したら場面の番号を-1し、それに合わせて読み込む背景とセリフのファイルを変えればいいというわけです。

　では、現在どこまで来たかというと、ボタン選択に合わせて場面の番号を変更し、それをJavaScriptで出力するところまでできました。また、それに合わせて読むこむファイルのパス（どこから読み込めばいいのか）を正しく表示させることまでできています。

　後は、表示された通りの名称のファイルを読み込めればOKです。まあ、文字で書くと簡単なんですが、実際書くとなると苦労しているのですが。

　でも、ここが最後の関門。これが終わればノベルゲーの部分についはテキストをもりもり書いていくこと、先ほど作った場面番号に合わせてキャラクターや背景も変更させていくこと、で終わりです。もう1日あればさすがにできそう。

　次にするべきことは、進行に合わせて選択肢を表示し、選択によってその後の進行を分岐させることです。実は、これも頭の中で仕組みは出来ています。後は、それをプログラムで表現できるかどうか。

　さあ、今日も最後に確認しておきましょう。毎日進むこと、今が一番辛いこと。実際、本プロジェクトは進めば進むほど楽しくなっている気がします。

JavaScriptその1(typist)

 　なんということでしょう…第一段階の発表時点では実装しなくていい機能に今日一日を費やしてしまいました。その機能は表題のとおり。jQueryになれてらっしゃる方はなぜこれを実装するだけで一日かかるんだと思われるかもしれませんが、jQueryを触るのは今日が初なので(本当はProgateで学習したはずだが、その当時は全然意味が分からなく、「jQueryってC言語なんかよりずっと難しい」と思っていました。)、数々の苦難があったのです。

　思い出せる範囲で列挙を…jQuery関係ない部分も多いですが。

・まずそもそも正しいjQueryをダウンロードできていなかった。どういうことかと思うかもしれないが、ダウンロードしたファイルが怪しいと思って別のサイトからダウンロードし直したらうまくいった。

・Typistを導入したらページのレイアウトが崩れてしまったので、その部分のCSSコーディングを見直した。

・Typistのデフォルトがテキストカーソルを点滅で表示させるようになっており、その部分を変更するためにTypistのコードを読み、書き換えた。なお、その際JavaScriptの足りていない知識(アロー関数やthisなど)を調べまくって、できるだけ関係ない部分も読むように努力した。それでも自分で書いてないから、知識の定着具合は20%程度だろうが。

・アップロードした背景画像のURLが403になってしまったので、対策を色々調べた。cssのbackground-imageをurlでなくフォルダ内のパスで指定できればいいのだが、調べてもその方法は出てこなかった。

　確か他にもいろいろあったけど忘れました。

　とりあえずこれで、今度こそトップページは完成しました。次の予定は「ノベールゲームみたいに選択肢を選んだりして分岐させつつテキストを次々に表示させるようにする」です。かなり脂っこいところきましたね。今思うと、素人が数日でできるようになるレベルだったら、ノベルゲームってプロが集まったら数日でプログラムなんて完成するはずだよな、という思いなのですが、google先生によると素人でもHTMLとJavaScriptでノベルゲームのようなものを作ることはできるようなので、頑張ります。

　あと、ちょっと将来を想定して必要になってくると思われる知識として、「データベース」があります。なにせこの私Accessですらほとんど使ったことがないレベルなんですが。仕事はデータをあまり扱わない仕事をしてるので、私の業務用PCにはExcelすら入れてもらえないほどです。個人情報などの機密を含まないデータはこっそりスプレッドシートを使っているほど。でも、JavaScriptだって一週間でここまできたし、きっといけるでしょう。

　最後に、またいつものことを確認します。「止まらなければ、いつかは辿り着く」、「今が、一番辛い」。そのうちモチベーションを高めるためにプロジェクト中の座右の銘が増えていくかもしれませんね。会社における社訓みたいだと考えたら、なんか途端に良い印象が消えますが。

本ブログの注意点2

 　ある程度記事を書いていて感じましたが、本ブログは常体と敬体が記事によって入り混じっています。この記事は敬体で書いていますが、常体の記事も多いです。

　それもそのはず、本ブログは基本的に推敲や校正といったものを一切していないためです。それもこれも、プロジェクトの進行を優先するため自分に課したルール。推敲とか校正ってやりだすと本当に無限に近い時間を吸い取られていきますから。

　なので、おかしな文章や誤字脱字等もたくさんあると思います。お見苦しいかと思いますが、本プロジェクトを応援するためだと思って多めに見てやってください。

　なお、どうしても事実に合わないもの、絶対に修正が必要なものについてはご一報いただければ、検討の上積極的に対応したいと思っていますので、右側のフォームからご連絡ください。

　ああ、こうして書いている間に日付を5分ほど跨いでしまった。プロジェクトに戻らねば。

HTML&CSSその1（背景画像等)

 　昨日ブログを書き終わってから、すぐに問題が発覚します。Jtrimの使用方法を学んでいたら、すぐに「複雑な形の切り抜きは'Photo Filtre'を使ったほうが良いです」と書いてあった。え～、と思わないでもなかったが、詳しい人に逆らっても仕方ないので大人しくPhoto Filtre7をダウンロードしました。

　しかし、もっと便利かと思いましたがやはりそこは無料ツール。画像の切り取りも非常にアナログにマウスでクリックしていくしかないようです。ペンタブもなく画像の切り抜きなどしたことのない私がマウスで上手に枠に沿って切り抜きができるはずもなく、案の定切り取り線はくしゃくしゃに…。やっぱり第一段階の発表をしたら早めに画像編集の技術がある人の協力を募ったほうが良さそうですね。

　今後の画像編集はほとんどPhoto Filtreを使っていくことになるでしょうが、ラベルをいちいち変えるのは面倒なので、画像編集の回は「Jtrim」というラベルでやっていきますのでご了承ください。

　さて、ようやく今日の内容に。今日は実際に第一段階の発表をするページのコーディングを行っていきました。HTML&CSSは基本的なことはだいたい分かっているし難しいところもないので、検索しながらスイスイと進んでいきました。こうやって自分のできることばかりやっていると前進がないのでここはあっさり終わらせなくてはと分かっているのですが、ついつい楽しくて凝ってしまいます。ウインドウボックスの色とか、文字のフォントや影のつけ方、背景画像など…。

　まあ、こうやってブログを書くことでいったん熱が引けたので、後は画像のポジショニングがうまくいかない部分とボタンの設置くらいだけして、またJavaScriptなどの知らない知識を身に着けていかなくては、ですね。

　今日がスイスイ進んだせいか、ずいぶんプロジェクトも発表の形が見えてきて楽しくなってきます。しかし、これからが正念場です。これからは、変数や条件分岐などをふんだんに使って、閲覧者(プレイヤー？)の操作に従ってプログラムが動くようにしていかなくてはなりません。

　しかし、あまり構えすぎないようにしましょう。一時期はリバースジオコーディングなどで完全に手詰まりに思えましたがそれでも粘り強く取り組むことで乗り越えられたのです(以前言っていたAPIのパスがなぜか通らないことは、v2からv3へとヴァージョンアップがあって、参照していたサイトの情報が古いことが原因でした)。きっとこれからもたくさんの困難をゆっくり越えていけるはず！

　あと、最近もう一つ自分を奮い立たせる言葉を考えつきました。

「今が、一番辛い」

　というものです。

　何かを新しく始める時、仲間がいればいいですが、そうでない場合、孤独です。一人では進まないから、成果の実感も少ないし、モチベーションも保ちにくい。

　でも、少しずつ進んでいけば、知識も経験も雪だるま式に増えて進行具合も加速していきますし、仲間ができればさらに加速します。それに、仲間ができれば成果だけでなく過程にも楽しみを見出すことができるはずです。

　だから、辛くなった時は、「今が、一番辛い」と言い聞かせてもう一歩だけ頑張ってみようと思います。

Jtrimその1(ソフトのダウンロード)

 　今日のプロジェクトの進行はかつてないほど不十分だった。仕事がいつもより長引いたためである。

　しかし、何度も言うように僅かでも毎日進むことが大切だ。いつかは辿り着く。

　そこで、今日したことは画像編集ソフトのダウンロード。何が良いのか迷った。画像編集と言えばPhotoShopというのが定番だが、今回のプロジェクトでは切り抜きくらいで高度な操作は必要なく、そのために有料のソフトを購入するのはやりすぎだろう、ということで無料のJtrimというソフトをダウンロードした。これを使っていって、物足りなければ将来的に有料ソフトも検討しようと思う。

　今は加工に必要な素材を集めている。といっても最低3つほどあれば第一段階の公開には足りるので、すぐに終わるのだが。

　画像編集もやはり知識と技術のある仲間を募ったほうが良さそうだ。まあ、これ言い出すと何の専門的な知識も技術もない自分がプロジェクトに不要になりそうだが、実はそれも目指している遠いゴールに設定されている。そう、本プロジェクトは最終的には私の手から飛び立ってほしいのだ。宇宙を目指して打ち上げたロケットが、やがては地球の引力を振り切っていくように。

Maps JavaScript API その5（マーカー操作、リバースジオコーディング）

　 一昨日からの課題だったマーカーを消す操作はなんとかできました。原因としては、やはり自分で課題に感じていた関数の知識の問題だった。具体的に言えば、マーカーを消す関数に使用していた変数の中にスコープ外で宣言してしまっていた変数があったのだ。それくらいコンソールを出してみればすぐに分かるだろうと思われるかもしれないが、まあ私のプログラミングに関するレベルはその程度と思ってもらっていい。基本が足りないのは認めるが、応用で躓いた経験のない基本知識は脆いので、これによって基本の知識が補強されたと見るべきだろう。

　緯度経度から住所を表示することもできるようになった。これは「逆ジオコーディング」、あるいは「リバースジオコーディング」と呼ばれるものなようで、ジオコーディングのAPIを有効にしている必要があった。これも後になってみるとなぜそんな簡単なことが分からなかったんだと思うが、人間そんなものである。

　なお、学習しているサイトのコードを実行してみたところgoogle mapが正しく表示されない現象がおき、それはいくら検索しても英語のウェブページを見ても解決しないので、ついに「teratail」で質問してみた。まだ回答はきていないが、ネット上にいるたくさんの猛者の中の一人くらいは見てくれるだろうと期待している。

　細かい部分で言うともっと学習したいポイントはあるのだが、Maps JavaScript APIに関する知識はここまで取得したもので本プロジェクトには最低限足りそうだ。

　今後必要になると思われるのは、

・画像処理ソフトの使い方

具体的には画像から必要な部分を切り抜くだけなので、これは上手くいけば数時間で身に付きそう。

・自分のブラウザで表示している操作を他人のブラウザでもできるかの確認

カスタマーにはChromeの使用を推奨する予定なので、他のブラウザへの対応の確認は無理にやる必要はないが、APIの操作を他人のブラウザでもできるようにすることは必要と思う。

・ブラウザで行っている処理をアプリ化する

これができれば、前述のブラウザ問題は解決する。将来的には必須の作業となるが、第一段階の発表時点ではブラウザで表示してもらって、プログラミングに強い仲間が加わってからやったほうが良いと思っている。

　「自分が思いついた時には世の中に同じことを考えているやつが100人はいるから、その100人の中から1人になるのは実行力とスピードだ」というのをもっと自覚しなければいけない。自分で一つ一つゆっくり作り上げるのは楽しいし、形になったものを突然発表して周囲に衝撃を与えるのはさぞ気持ち良いことだろうが、やはり素人一人での作業は遅々としている。予想よりも早い段階で第一段階を切り上げてプロジェクトを発表し、仲間を見つけていく方向に頭の中で軌道修正している。

Maps JavaScript API その4（情報ウインドウ操作）

　相変わらずマーカーの削除で止まってしまったままです。とりあえずの対策を考えるために、ボタンを配置してそれを押したら地図上からマーカーを消すようにという基本的なことをしてみたのですが、これも反応なし。どうもよろしくない。

　まあそれでも知識の方はつけていかなくてはいけないわけで、今日は情報ウインドウの操作を学習しました。これはプロジェクトでも有効に使う箇所がありそうななさそうな。

　あと、基本の学習のほうではもう一度文字列のことを詳しく学習しています。もっとぱっぱといけるかと思っていましたが、辞書的なサイトを見るとProgateとは比較にならないくらい文字列に関してだけでも情報があり、ついつい楽しくてこんなことができるのかと読んでしまい、なかなか条件分岐や関数のところまで進まないですね。まあ、何度も言いますが歩みさえ止めなければいいわけですので。

　今日はちょっと短いですが、深夜に地震があった関係でブログを書く時間をあまりとれなかったのでこのくらいで。

本ブログの注意点

 　今さらとなりますが、本ブログの作成上意識していることを書きます。

　最初に書けよと思われるかもしれませんが、ブログにかまけてプロジェクトの進行を遅らせるのは避けたいので、ブログにかける時間は1日30分を上限にしているため、記事の作成に余裕がある時にしかこういったプロジェクトの進行外のことは書かないようにしています。

　そのため、この記事を筆頭に本来であれば序盤に記述すべきことが後になって投稿されることが多々あるかと思います。しかし、それは了解していただきたい。いずれ30分の中で余裕があれば、記事全体をツリー構造にして本来のあるべき形に整理することもできればと思っています。

　あくまで、このブログはプロジェクトの進行を後から振り返るための足跡でしかないのです。足跡を美しくすることに時間をかけて、前を向けなくなってはいけません。

　なので、このブログを最初から読んだだけでは私の目指しているプロジェクトがどんなものなのか分からないのも仕方のないことなのです。恐らく、このブログにそこそこに読者がお度ずれるとすれば、プロジェクトが段階的に発表され、その足跡に人々が注意を集めるようになってからと思われます。ですから、この記事を読んでいる方の多くも、きっとプロジェクトのことはすでに理解した状況で読まれていることでしょう。

　ああ、北の精霊よ、このプロジェクトが目的地へと辿り着けるよう、私の心身に守護を与えたまえ！

Maps JavaScript API その3（マップタイプ操作）

 　残念ながら、今日は昨日の目標だった古いマーカーの削除やクリックした一度の住所を取得すという目標には至れませんでした。また1時間以上失敗を繰り返しました。どうも、マーカーを削除するスクリプトを記入するとマーカーの生成自体ができないようになってしまっているようです。

　足掻くだけ足掻きつつも、同時並行で標題のAPIの学習を進めております。今日は表題の通りマップタイプの操作ができるようになりました。おそらく、プロジェクトにおいては「衛星」モード（世間で言うgoogle earthにあたると思われる）しか使わないと思いますが、コードを自分でいじることでJavaScriptの基礎知識の習熟度も上がったような気がしています。

　実はナビゲーションコントロールを使ったズームやフェードの操作も学習したのですが、どうもナビゲーションコントロールをFalseにしても表示が消えないのが悩みです。しかし、ここはプロジェクトには利用しないと思われる部分なので、分からずとも先に進むことにしました。こういう機能があるのだと知っておけば、後で再び参照することはできますからね。

　本当はもう少しJavaScriptの基本の勉強をしておきたかったので、これから寝るまでの時間でそちらも進めたいと思います。他の言語の知識が多少あるおかげで、基本の学習はスムーズにコードが書けますが、それゆえにそちらの時間に比重を置いてしまいそうなので、今後の学習の優先度は"応用＞基礎"とします。基本ができてから応用に手を付けるべきだという信仰の方は、私が応用と基礎を同時並行する理由をこちらで書いていますのでご了承ください。特に、関数の引数と戻り値のことについてまだ間違った記述をすることがあるようなので、そのあたりを中心に確認していきたいところです。

　プロジェクトの第一歩の形ができたらtwitterで公表の上、ここのブログともリンクをさせていこうかと思いますが、想像通り道は遠いですね。最初は1週間くらいでなんとかそこまでと思っていましたが、今のペースを考えると何とか今月中にはといったところでしょうか。これが何とか3月まで中には、そして何とか夏までにはとならないことを祈ります。しかし、歩みが遅いのは重々自覚していますが、それを歩みを止める理由にしないよう、再三再四自分に言い聞かせていきます。

Maps JavaScript API その2（緯度経度を取得）

 　今回はブラウザ上でgoogle mapを表示し、クリックした地点にマーカーをつけると同時にその地点の緯度経度の数値を取得することができるようになった。また、現在の位置情報を取得してその緯度経度を表示できるようになった（GPSを利用した精度の高い環境で実行していないのでまだ問題はありそうだが）。

　しかし、一見簡単そうな場所で躓く。現在躓いている地点は以下の二箇所。

・取得した緯度経度から、日本語の住所を表示させる

・一度ある地点をクリックした後に別の地点をクリックした場合、前の地点につけたマーカーは削除する

　始める前は、非常に簡単だと思っていた。しかし、これがなぜだか上手くいかない。処理したと思うと、なぜかgoogle map自体が表示されなくなったり、新しくクリックした地点にマーカーが置かれなかったりといった不具合が発生してしまい、あれこれ改善を試みながらもうまくいかないまま1時間以上経過してしまった。

　基本を無視して検索エンジンを使って見つけたコードのコピー＆ペーストで突き進んできたために私の基本的なJavaScriptおよびAPIへの知識が足りないためにしている苦労だというのは分かっているのだが、だからといって歩みを止めることはできない。多分ここで立ち止まって基本の勉強だけに逃げてしまったら、このプロジェクトはおそらく頓挫するであろうという確信があるからだ。

　とりあえず直近の目標はこれらの課題をクリアすること。そして、それができたら次は取得した緯度経度のデータから条件分岐を行い、それに従って何種類かのテクストを表示させることに挑戦するつもりだ。

Maps JavaScript API その1（ブラウザに地図を表示）

 　本プロジェクトにはいくらかのプログラミングの知識が必要である。

　私は基礎知識として、Progateという入門サイトでプログラミングについて齧ったことがある。また、仕事でVBAのコードを書いたり、HPの記事を編集するのにHTMLやCSSを用いたことがある。

　しかし、逆に言えばその程度のプログラミング知識しかないと言える。まだプロジェクトに必要なプログラミングの知識の量が分からないのでなんとも言えないが、予想としては必要なプログラミングの知識が高校卒業レベルだとしたら、おそらく現在地は小学校3年生くらいのものではないかと思う。

　このような知識なので、言語は何を使うのか迷った。本当はProgateで学習した後に専ら触ったことがあるのがPythonだけだったのでPythonを使おうかと思った。環境構築も済んでいるし。しかし、調べてみるとWeb系の操作をするのならJavaScriptの知識はあって損はないという情報を得たため、ここは思い切って自分の知識を広める意味でもJavaScriptを利用していこうと思った。Pythonが売りにしている機械学習は今のところ使う予定はないし。

　ということで、今後はJavaScriptの基本を勉強していくと同時に、プロジェクトに必要な応用的知識を学んでいくことにする。基本を終えてから応用にすべきではないかと思われる方もいるかもしれないが、基本と応用というのはインタラクティヴというか、インプットとアウトプットのように相互に補完し合うことで知識を確かにしていく効果があると思うので、基本と応用を同時並行で進めていくのが良いだろうと判断したのだ。

　基本については特段記述することもないと思う。書いたところで、世の中に無数にあるJavaScriptの学習ブログと同じようなものができあがるのがせいぜいではないかと思うためだ。まあ、気が変わればそちらも後から書くかもしれないが。

　応用については、間違いなく本プロジェクトではGoogle Mapを利用することになるので、それをプログラムで活用するための知識を学んだ。

　まず、Maps JavaScript API を取得（実はこれは昨日の時点で終わっていた）。そして今日は、JavaScriptでChrome上に特定地点のGoogle Mapを表示することができるようになった。参考にしたサイトが、取得したAPIパスを記入すべき欄をAPI_PASSとコード上に表示しているだけだったので、その部分を自分のAPIパスに書き換えなくてはいけないということに気づくまで30分ほどかかった。だが、そこさえ気づいてしまえば後は緯度経度と縮尺を変更するだけで目標の地図を表示できるので非常に便利だと感じた。コードを読む限り、目標地点を地図の中心以外にして表示することもできそうだが、それは今のところ利用する予定はないので気にしないでおく。

　今後は、自分の位置情報を取得して特定地点に到達したかどうかを判定する技術を習得することが目標となる。将来的には、変数を利用することで特定地点への到達だけでなく、接近や離反の判定もできるようになることが求められる。

　道はまだまだ長い。仲間も必要になるだろう。焦る必要はない。目的地に辿り着ける者の多くは、道程を楽しめる者なのだと自分に言い聞かせる。

踏み出す

 私の生涯をかけることになるかもしれないプロジェクトが始まった。

昨日始まったばかりなので、このブログ同様に何もない。何の工夫もこらしてない。真っ白だ。もし後日になってこのブログを読み始めた方は、すでにこのブログがそれなりに見れるものになっているかもしれないが、これを書いている2021年2月10日時点では、レイアウトも何もいじっていない真っ新な状況でこのブログを含めたすべてのプロジェクトが始まったことのだと理解していただきたい。

道のりはどこまで続いているか分からない。いや、道すらないのかもしれない。それでも、私は牛歩で行く。

さあ、まずは一歩。