Live2Dを動かし始めました。今までも依頼してモデリングを作ってもらってはいたのですが、自分でも多少は動かせた方が色々と意思疎通が楽だろうと感じて始めました。
けっこう楽しいですね。全然思い通りに動かせなくてちょっとイライラもしますが。なんせ最初はキャンバスの中心の移動すらできず(spaceキーを押しながらドラックでできるんですが)、しばらく困ってたくらいですから。でもまあ、とにかく自分で描けないまでも基本的な作り方くらいは知っておいた方がいいかな、と。実際に指示する時も言葉だけでああしてこうしてとお願いするより自分で簡単に編集してこーいうイメージなんだけど上手くできないからお願いしますって言うほうがいいでしょうし。
とりあえず今週中にはチュートリアルを一通り見て実際にゲーム画面に落とし込んでみるところまでいけたらなと思います。
イベント発生ポイントを作成し、いくつかのステータスを付与することで第二段階の発表物よりも高度な挙動ができるようにしました。まあまだ改良の余地はあるのだけれど。
しかし配列と繰り返し処理、そしてclassオブジェクトでコードは本当に短くスッキリまとまるようになりました。すでに第1段階と第2段階の合計以上の機能は実装しているのですが、コードの長さはそれぞれと大して変わっていません。
問題になってくるのは画像や音楽といった各種ファイルの容量ですかねえ。やっぱりサクサク動くことはプレイヤーのストレスに直結してきますからね。
まあまだまだやりたいことはいっぱいあるので頑張っていきましょう。
とりあえずBGMはなんとかなったのですが、気になるのはメッセージ送りのスピードが調整できないかということで一週間ほど悪戦苦闘しました。
とりあえずなんとか対応。
あと、メッセージ送りが行き過ぎた際に少し前までログを遡ってみることができるようもしていく予定です。
いやー、予想以上に長いWebAudioAPIさんとのお付き合いもこれで一単距離を置けそうです。具体的に私が勘違いしていたのは、
・WebAudioAPI自体がclassで作られたものなので、classを使ってオブジェクト指向で作ろうと思っていたがその必要性が薄かった。
・音量の浮動小数点の扱いを軽視していた。
といったところでしょうか。まあ、今後もちょくちょくお付き合いする機能ですので仲良くしていけるといいですね。次はいよいよ作品の肝となる選択分岐や自動スクロールなどの部分の作り込みです。イメージはある程度できていますが、当然想定通りにはいかないはずです。
でもいいんです、毎日ちょっとずつでいずれは辿り着くんです。
とりあえずブラウザ側の設定を変えるとともに、webaudioAPIでfetchではなくXMLHttpを使うと言う手法によりとりあえず通常のブラウザ環境でもWebAudioAPIでBGMを操作できるようになりました。
たぶんこれがElectronで.exeファイルにするとまた問題が出てきたりするのでしょうが、今のところはOKです。しかしこんなに意味が判らない状態でコードをいじってなんかわからんが良し状態になってるのってgooglemapsAPI使い出した時以来じゃないか？でもまあ、ヨシ！！
いやあ、ようやく自然なループに成功しました。しかし数時間キャッシュの問題で悩んでいたというね…
色々コードを書き変えつつ上手く動くなーと思っていたら、ある時機能面でも変更を加えても全然反映されなくて違うファイル読み込んでるのかなーとか調べてたら、ふと開発コマンドでソースコードを見たら全然変わってないと分かってキャッシュをクリアしたら当然のように動きましたとさ…
プログラミングってどこまでいっても初歩的なミスが発生してしまうんだけど私の性格のせいでしょうかね？
とりあえず再生に成功しました。とは言っても疑似サーバー環境で実行しただけなので、相変わらずCORS問題は残っているのですが。とりあえずまずはこれでループ処理をしてみて、自然なループになるかを検証してみますか。
うーん、うまくいったはいったんですが、やっぱりCORSの問題は残りますね。提供するものがJavaScriptのAPIを使用するので基本的にはブラウザの挙動になるんですが、そうするとやっぱりWebAudioAPIもHowler.jsもCORSが解消しきれない。
とりあえずこの問題は無視してしばらく先に進みますかー。他にもやれるポイントはまだまだあるわけですしねえ。
webAudioAPIはレファレンスが少なくてちょっとキツイです。とりあえずシンプルに再生させるためのコードを書いてみたが、ローカルファイルの参照の関係でうまくいかない。xamppをつかえばいい話ではあるのだが、それにしてもコードの長さの割に私が使おうとしている感じがして考えていた。まさに帯に長いわけだ。
そこでhowler.jsというライブラリを使ってみようと思う。ただボリューム的にはどうなんだろう。ちょっと気にはなる。
完全にブログ放置してしまった。書くことないんだもん。文章は書けたので、あとはそれをひたすらにゲームのコードに落としていく作業。10万文字オーバーだからコピペだけで1日が終わっていく。
その中ではところどころゲームに必要な知識が足りていない部分はもちろんあって、その一つが音に対する処理。javascriptのaudioだとループ処理が自然にできない。そこでwebaudioapiが必要になった。
まずは今日存在を知っただけなので、続きは明日以降。
とりあえずアップロードした画像をファイルに保存する作業ができるようにと思い、どうやらmulterを使うのが良いらしいと起動してみたがうまくいかない。expressの段階で設定が間違っているという可能性はあるのだけれど、何度見直しても問題があるように思えない。
うーむ、どうしたもんですかねえ。
あんまり進みませんねえ。やっぱり仕事がある日はなかなか進行がきついです。そんなこと言ってられないんですが。
とりあえずhtmlファイルの中身をjsファイルの変数から変更することに成功しました。実は逆のこともしたいんですが、可能なのかな？HTMLの特性を考えたらきつそうか？
とりあえず昨日の続きとして、今度はHTMLで書いたコードをNodeを使ってローカルサーバーに表示できるようになりました。
しかし、またしてもファイル選択で選んだ画像のプレビューが表示されなくなるという問題が起こってしまった。.jsファイルを読み込む形じゃなく直接HTMLにscriptで書き込むと表示されるんだけれど。非同期の関係かと思い読み込む部分のコードを場所を変えたりasyncやdeferを変更してみたりするんだけれど解決せず。
今日数時間もそこで詰まっといてこう言うのもなんだけれど、ここはやろうとしていることの根幹には関わらないから、きっと大丈夫でしょう！とりあえず先進みます！
2度書いていた通り、やはり他のローカルファイルを編集するにはJavaScriptではNodeの力が必要なようです。本当はできるのかもしれないけど、どうせNodeはやる予定だったからという理由でとっつき始めました。
とりあえずローカルサーバーを立ち上げて.jsファイルを使ってHello Worldを表示させることができました。あんまり進んでませんが、今日は連休中唯一の外出日だったので帰りが23時過ぎだったのでしょうがないですね。外出したことでモチベーションを上げつつリフレッシュしたので、明日から頑張ります。
できるようになりました。結局原因はよく分からず、いくつかのサイトを巡った末にきちんと画像が表示されるソースコードの元を探すことができました。
しかもシンプルで良コード。
次は外部ファイルを編集できるようにするというところが目標でしょうか。FileAPIを使うことになるんでしょうかね。
ゆっくりだけど進んでいきますよっていうこの感じ懐かしいなあ。
超絶簡単なところなんですが詰まりましたね。
タイトルの内容をやろうとしてコードを書いたんですが、なぜかブラウザで画像が表示されません。ブラウザのバージョンが違うのか？HTML5だからHTML側の問題ということはないはずだし。
しかしChromeもEdgeもFirefoxも全滅。うーん、原因がわからんなあ。
いやあ、数か月ぶりにJavaScriptをまともにさわりました。googlemapのAPIが切れていて今までの作品も使えなくなっていました。いないと思いますがご不便を被った方には大変申し訳ありません。
とりあえず当面の目標はプログラミングができない人でもgooglemapを使ったサービスを自作できるようにしていくことです。まずは地図上でスタート地点を自分で設定できるくらいからゆるりと始めて行きましょうか。
プログラミングに少し詳しい方はお気づきかと思いますが、この作業は本来のJavaScriptでは向かないバックエンドの作業になってきます。なので、Node.jsにお世話になることになります。さあ、また新しい山を登り始めるわけです。ワクワクしますね。
いやー、完全にブログをさぼってしまっていた。書かなきゃ書かなきゃと思いながらも、毎日書き上がるのが午前3時とかだったから書く余力がなかった。
自分は相当な遅筆なので、1日あたりは3,000字書ければいいほうなんです。しかも、それを後日書き直すから質が悪い。それでも、現在の執筆量でだいたい8万文字。まだ少し書き足す余地があるから合計で10万字くらいになりそうですかね。ゲームとしてのプレイ時間は3時間弱くらいかなあ。作ってみないと分からないけどたぶんそれくらい。
さて、今後はシナリオはちょこちょこ書き進めつつプロジェクトの本筋に戻っていく予定です。とりあえず、ユーザー登録機能を作ったけどユーザーが利用できるサービスがないというアホな状態なので、とりあえず簡単なの作ってリリースしてみるか。目標1週間以内かな？つまり7/27くらいには出したい。
久しぶりに本格的なコードを触ると思うとワクワク半分不安が半分かな。仕事でVBA久しぶりに書いてもなかなか勘を取り戻すのに時間かかったからなあ。コードは多分JavaScriptだけど、Node.jsを使うことになりそうかな。Electronは使ってたからそっち方面から攻めていくのが順調そうですか。
全然ブログ書かずに申し訳ない。読んでる人はいないだろうけど自分に申し訳ない。
とりあえずストーリーの起承転結は書きました。後は細かいギミックとなる部分を煮詰めたりですかね。それによって大筋に影響して書き直すこともでてくるでしょうから、これでも全体の工程の半分くらいだと思いますが。
とりあえず、書くことがない。あんまり調子乗って書くとネタバレっぽくなるし。
本筋のプログラムも書かないとな～。ずっと思ってるのにずっと書いてない。よろしくないですね。
いやあ、すっかりこちらのブログをサボる癖がついてしまった。
とはいっても、シナリオライティングだとこれといって書きやすい新しい学びがないので（本当はいっぱいあるのだが書いても有益には思えない）、ついつい書かずに寝てしまう。
まあ、ちょっと反省して明日からまた頑張ります。
今日は歩きました。だいたい6～7kmくらいですかね。前も書いた気がしますが、ストーリーに関しては歩いている時の方がアイディアが浮かびます。
できるだけ違うルートを歩くことが重要になるのですが、車が近くを通過するルートはあんまり良くないですね。危ないというより、車が通過するたびに意識がそっちにもっていかれるのでアイディアの浮かび方が悪い。
そうなるともちろん遊歩道が整備されているようなところがいいんですが、遊歩道で歩ける場所ってだいたい決まってるし、河川敷のように視野が広い場所が多いから、歩いていて景色の変化に乏しくて気づきが少ないというのが問題。地図で歩く場所の候補を探すのも楽しみだったり面倒だったり。あー、こんなことしなくても机に向かって唸ってればアイディアが出てくるようにならないかなあ。
とりあえず序章にあたる部分は終わり、明日からは本編にあたる部分を書いていきます。
まあ、大体の場合書き直すことになるんですが。
とりあえず頭でイメージしている作品の雰囲気に沿って序章を書き出す
→そのままの流れに沿って一通り書く
→書き終わって再度序章を見ると温度感がちょっとズレてたりするので修正して書き直す
という流れは私の場合約8割の確率で起こります。そして、さらにそこから細かな矛盾点などを書き直していくとだいたいストーリーを2.5回分くらい書き直しています。
このペースで6月中に終わるのか？それはちょっと怪しい。ペース上げてかなくちゃなあ。
ようやくやらなきゃやらなきゃと言っていたストーリー作成を始めました。今月中には骨子を完成させると宣言しているので、頑張らないといけません。
しかし、今まで小説なんかのストーリーはよく書いてきましたが、今回はゲームのシナリオ。始めての取組です。
シナリオならそんな変わらんでしょと思われるかもしれませんが、けっこう違います。私は小説の他に映画のシナリオなんかも書いているのですが(プロじゃないので作品化されたことはありません。あくまで趣味で書いているだけです)、ゲームのシナリオは小説よりは映画の脚本に近いですね。
どのへんがっていうのは真面目に書き出すととんでもなく長くなるので避けますが、手法から言うと私の場合は順番が変わってきます。小説は全体的な文章の流れのようなものを重視するので、最初から書いていきます。
ストーリー全体には波があるというのはよく言われることですが、文章にも波の高低とか温度の違いのようなものがあって、最初から書かないと後で呼んだ時に違和感が残ります(読んだ人の感想でそう指摘されたことはありませんが自分で読むと感じます)。これがストーリーの波とか構成の波になるとけっこう順番が変わっても平気です。多分、文章が割とその場のノリとか手触りで作っていくものとストーリーなどは最初に全体の骨格をきちんと考え込んでそれをなぞっていくだけという違いからきているのだと思います。
もちろん、これは私の場合です。結局はいいものができればそれに越したことはないので、人によっては小説だってクライマックスから書いていく人もいるでしょうね。
さて、あんまこっちに力入れも仕方ないから、このへんで終わりますね。
とりあえずできました！ログインログアウトの処理まで終わって、これでユーザー管理の基本構造が全て出来上がりました。長い戦いだったが、それゆえの達成感が…あんまない。
私はどうも困ったことにあんまり達成感を感じるタイプじゃなかったんですよね。若いころには苦労が足りないから達成感が薄いんじゃないかと思っていましたが、ある程度努力というものを重ねていくことで、どうやら自分はそういう感覚が弱いということが分かりました。
学生時代に部活で「過去に俺が指揮した中で最弱」と新チーム結成時に顧問に言われたチームで地区大会準優勝を成し遂げた時も、大学受験で合格した時も、大学時に5000人を超える同時視聴者が出る大会の運営責任者を終えた後も、社会人になって職場のその年最大のプロジェクトの担当者としての仕事を終えた時も、終わった後に残った感情は、「これで自分の好きなことができる時間的余裕がでるな」というのが最大の喜びでした。
この感覚というのは長所でもあり短所でもあるわけですが、こういうどうでもいい私の自分語りはおいておきましょう。
とりあえず、次はユーザーが利用できるサービスを作らなくてはいけません。ユーザー登録できるようにはしたものの、今はまだユーザー登録しても何もいいことない状態ですので。
とりあえずgooglemapと連動した簡単なゲームをユーザーが作れるようにしてみましょうかね。多分これまた結構大変だと思うけれど、これもまた一歩一歩着実に進んでいこうと思います。
でも次のフェーズに進むというワクワク感はそこそこあるかな。思えば、受験も合格した時より、引っ越したりして新しい生活が始まるという実感を得た時のほうが心の高揚はずっと高かった気がします。こんなプロジェクトを始めたところといい、私は思っているより新しいものが好きなのかもしれません。
予想してたよりは難しいけど、恐れていたほどは難しくない、といった感じでしょうか。
ちなみにユーザー登録フォームでは使わなかったpdoコマンドを今回はふんだんにつかった。あんまりよく理解してない部分がコードにはあるけれど、問題なく動いているようなのでヨシ！
実は、ユーザー登録フォームの方はコードがめっちゃ汚かったりします。最初はオブジェクト指向の書き方がうまくいかずに手続き型で書いていたのが途中で問題点が分かってそっからオブジェクト指向型で書くようにしたから、両者が混在しています。言うまでもなくオブジェクト指向型のほうがすっきりしたコードになっているので、余裕があればこのへんもきれいにしたいものですね。
さて、明日でログインも可能にしたいところですね。まあログイン可能にしたところで、ログインによってできる作業を作らないと意味がないんですが、そこはまだまだ先のことになりますね。
ようやくユーザー登録に終わりが見えてきましたが、一つ問題が発生して詰まりました。
本登録を終えた時点で仮登録した情報をデーターベースから削除したいのですが、それが上手くいきません。ただ、少し前にそのうまくいかない理論的な原因は判明したので、あとはその改善方法を講じるだけです。直感的にさほど難しくないことも判る。具体的なコードに関しては後々のセキュリティの問題があるから書きませんが。
ああ、なにはともあれシナリオを書き進めなくては。にしてもアイディアがあんまり浮かんでこないなあ。私の場合は歩きながらストーリーを練る→書く→歩きながらストーリーを練り直す→書くの繰り返しで作っていくのですが、今回は歩いていてもあんまりストーリーが浮かばない。だいたい10kmくらいは歩いてるんですが。
タイトルのとおりなので、今日はコードをほとんど書いておりません。というか、コードを書くよりもシナリオ書かないといけない時期がやってきました。うーん、本当なら今頃ログインシステムもだいたいできて一区切りついてる予定だったのですが。
まあ、あせらずゆっくりでも進んでいることを喜んだほうがいいんでしょうね。個人的には最近忙しくてちょっと無理しているので、ここでさらにアクセルを踏んだら心身の弱い私は大きく休みを取らざるを得なくなりそうな予感がしており、ちょっと焦らず休養をとったほうがいいような気がします。
しばらくはコードを書くのは休みにして、今までの知識の復習をしつつシナリオライティングのほうに比重を置いていこうかと思っています。
とりあえず昨日の問題は解決しました。foreachの返り値をデータの値ではなく判定用の代入式にすることでクリア。…思ってた形とだいぶ違いますが。このへんのコードの書き方もそのうち磨いていく必要がありますね。
次は、仮登録用のデータベースと本登録用のデータベースを連携していく必要があります。仮登録用のデータベースから引っ張ったメールアドレスを本登録が済んだ時点で本登録用のデータベースに格納したりとかそういうことです。
うーん、仕事が忙しくなってきてプロジェクトの進行が遅いのが気がかりですなあ。
すっげー簡単なところで詰まりました。
とりあえず、認証のシステムでユーザーがポストした値がデータベース上に存在するかどうかを検索するようにできるようになりました。しかし、そこでデータが存在した場合にTRUEを返すPHPの記述方法が分からない。foreachを使って検索しているのですが、foreachをTRUEorFALSEで返す方法が分からない。
直感的に超簡単だということは分かるんだけどなあ。なんか浮かばなくてモヤモヤする。検索しても私が思い描いてるようなシンプルなコードが出てこない。
とりあえず寝て時間をおけばあっさり思いつく気がするので寝ます。
最近は時間がなくてこのブログを書いている暇もないです。毎日書くと言ったのに3日もサボるというのは…猛省。
作業自体はちょっとずつですが進めていました。とりあえず一通りユーザー登録システムは完成したのですが、ちょっと考えてみたら、メールアドレスを登録してそこから本登録を済ませるようにするとか、パスワードはハッシュで暗号化して管理するとか、仮登録情報は一定時間でデータベースから削除するとか、そういうセキュリティ周りでやることがいっぱいあることに気づきそっちの処理をやってました。
今はアドレスからパスワードを入力して本登録をするというところまで完成しています。次はパスワードのハッシュ化けるですが、password_hashとpassword_verifyを使えばいいのは知っているので、多分そこは割と簡単。問題は照合まわりでちょっとうまくいくか不安なところくらいですかね。
でも考えてみるとログインしてから様々な管理が可能なシステム作る方がずっと大変ですよね。まだまだ先は長い。
とりあえず今日で入力内容にエラーがあった場合の処理は完成。正規表現の一覧は載ってるサイトが多くあるけれど、実際の使い方を勘違いしていて少し手間取った。
また、仮登録状態から本登録にもっていくための本人確認メールの設定もある程度終わりました。しかし、リンクを開けば本登録が完了するという仕組みまではできていないのでそれは明日以降。
あとは、セキュリティの面もなんとかしないといけない。でもまあ、ここは今のところ利用者もいないだろうし、最低限でいいかな、利用者もいない、ましてや金銭決済は一切ない独自のセキュリティシステムのページをわざわざ攻撃する暇人もいないでしょうし。でもいずれは避けては通れない道…。
いやー、めちゃくちゃ簡単なところで苦戦しました。
苦戦したポイントと原因は以下の通り。
①MySQLにPOSTしたデータを登録できない
→SQLでINSERTを使う際、リテラルでないデータはシングルクオーテーションで囲む必要があるのだが、POSTは文字列でないので囲う必要がないと思っていた。しかし、PHPで扱う際は文字列でないだけで、SQLで扱う際には文字列になっているので、シングルクオーテーションで囲む必要があった（説明超絶下手）。
②PHP記述範囲をうまく<?php ～ ?>で囲えていなかった。
→原因不明。たぶんどっかで勘違いがあった。1時間ほど悪戦苦闘した後に少し休憩してやり直したらあっさりうまくいった。
さて、次はPOST内容によってはクエリを送ることなくエラーを返すように設定しますか。その次は本人確認メールを送ってそのURLを開けば本登録が済むように設定していく。
うーん、ユーザー登録ってよく考えると思ったよりやること多いなあ。
今日は通院があり、思った以上に疲れてしまったようで、夕食後にがっつり寝てしまい、あまり作業が進みませんでした。
とはいえ、進行0はやめておこうという自分の近い通り、少々の進展はありました。サイト側の操作でMySQLにデータを追加することができるようになったのです。
次は、サイト側からMySQLを固定の操作ではなく入力した内容に合わせて操作できるようにすればOKです。もちろんクエリを直接打ち込んでもらうのが一番楽なのですが、それではあまりにユーザーに優しくないので、最低限の機能は持たせないといけませんね。
また、ユーザー登録ですから、登録申請があったらメールアドレスに自動で登録用URLを送り、それを開いて再度パスワードを入力したら正式にデータベースに登録されるようにしないといけませんね。うーんけっこう大変そう。なんとか今月中の完成が目標かな。
とりあえず昨日の問題だったMySQLへの接続はできるようになり、実際にロジマガのHPに埋め込む形でコードを書き始めました。とりあえずログインページと新規登録ページの体裁とリンクを整備したので、明日からはそれぞれのサーバーとのやりとりを書いていくことになります。
実は、まだ登録フォームの作り方に必要な知識は十分ではありません。とりあえずgithubなどにのってたコードなどを使って簡易なシステムを作ってみましたが、どうもPHP8ではすでに古くなってしまった文法などが含まれているようで、うまく動作しない部分があったためです。でも、そういうところは自分のサイトの形にカスタイマイズしつつ一歩一歩調べながら作っていけばなんとかなるということを過去の経験から知っていますから、まずはやってみましょう。まずやってみて、ダメだったらその時に考える。それでいいんです。
ユーザー登録のフォームのコードを読んでいて、どうやら私はclassについて知識が不十分らしいということを自覚し、再度勉強し直しました。オブジェクト指向についてはだいたい学習していたのですが、やはり自分で使わないと身に着かないですね。
そして一通り勉強してみて再度コードに向き合ってみると…
SQLSTATE[HY000] [2002]が起きてしまった。MySQLに接続できない。うーん？MySQL側の設定が間違えたか？
多分ローカルホストのMySQLとレンタルサーバーのMySQLの二つを使っているので、それらの設定が頭の中でごっちゃになってしまって間違いが発生しているような気がする。やっぱり不便かなあ。こういう問題って一般的にはどのように解決しているんだろう？やっぱりクラウドサーバーのような仮想環境でやったほうが楽なのかなあ。
とりあえずSQLコマンドを直接入力した場合とphpmyadminを使った場合の両方で基本的なデータベースやテーブルを作成し、データをいじれるようになりました。これでしばらくはデータベースに関する知識の基本はOKでしょう。
次に、PHPを使ってのMySQLの操作をしていくのですが、これが思ったよりも面倒くさい。設定がいくつか必要なのと、なぜかxamppでインストールできているはずのファイルが入っていなかったりしてけっこう手間取りました。
そして、当たり前なんですが以前さらっと読んだだけではPHPの文法に関しての理解力が足りていないですね。特にクラスやインスタンスの関係についてJSの時には自己流でやっていたのもあって、間違って理解してしまっていた部分が大きかったようで、度々エラーを出しては再学習を繰り返しています。でも楽しいですね。まだ雪が積もっていた時期の手探りでコードを書き始めたころの感覚が蘇ります。
さあ、また一歩一歩行きましょう、「いつかは辿り着く」「今が一番辛い」久しぶりに確認しておきます。
とりあえず、今後MySQLとは長いお付き合いになりそうなので、本腰をすえて学習することにしました。もちろん応用であるプロジェクトの進行と平行させつつという当初の方針は変えず。
まず今回はユーザー登録に必要なテーブルを作成しました、パスワードとかユーザー名とかそういうのを格納する奴ですね。また、プライマリーキーやユニークキーなどの存在も知りました。実際にまだ使ってはいませんが、こういうのがあるのかと知っておけば、後々自分の中の選択肢になりますし、何ができるか分かっていてその用語をなんとなくでも覚えていれば実際に使おうと思った時の検索が楽ですからね。
とにかく私は学習の際は教科書的な教材は素早くサラッと読むようにしています。たぶんそこに書いてあるコードをそのまんまなぞっても、書いてある意味の2割くらいしか理解できないからです。それよりは、ふんふんこういう機能があるのか、と知識としてぼんやり入れておいて、いざ必要になったらその知識をもう一度調べなおして実際に自分のコードの中で使ってみることができることが重要だと思います。
とりあえず次はユーザー登録をできる仕組みを作らなくちゃなーということで、そうなると当然できなきゃ始まらないのがデータベースの基本的なところです。
データベースは色々種類は多いみたいですが、もっともベーシックなMySQLにしておきます。というか私の借りてるサーバだとMySQLを基本的に想定しているみたいなので実質一択。
操作するにはphpMyAdminというのでやるといいという情報を得て、さっそくインストールし環境を作っていきます。しかし、ここで課題にぶち当たる。
phpMyAdminにログインするのにMySQLのユーザ名とパスワードを入力しろと要求されたんですが、はて、そんなの設定したっけ？全然やった記憶がない。
というところで現状詰まっております。レンタルサーバーの側でMySQLの設定やったせいでこうなってるんですかねえ？うーん。
とりあえずAWSの問題は置いておいて、まずはいったん今まで通りのレンタルサーバーで運用してphpファイルを書きました。そして、メールフォームを完成させました。
数日で終わると思ったこの地点まで来るのになんと40日もかかったんですから自分でも驚き。でも、PHPの勉強はちょこちょこやっていたおかげで、コードは割とすんなりと書くことが出来ました。
とりあえず、サーバーの移動はもうちょっと先でもいいかな。レンタルサーバーの容量が300GBあるので、しばらくはそれがいっぱいになることはないでしょうから。
まずは、そろそろゲーム制作の方も再開しないとなあ。キャラデザの方をだいぶ待たせてしまっているし、まずはしっかりとしたストーリーを完成させないといけない。とりあえず今月中に細かいストーリーを完成させることを次の目標にしましょうか。
あとは、Webのほうでもページの切り替え方とかの操作が分かってきたので、階層構造的にサイトを作成していこうかなとも思っています。まあ、階層構造的にするだけの内容をまずは充実させないといけないわけなのですが。
いやー、ひさっしぶりにエディタでコードを書いております。楽しいですね。コーダーのほうが性格的には向いているのかもしれません。でも、きっとサーバー操作も慣れれば楽しいと思うんですよねえ。何よりできることが増えるっていうのは喜びですから、コーディングだけでできることなんて限られてますからね。
とりあえず、既存のサイトにメールフォームの形式を設置し、PHPでPOSTを送信するように設定しました。
問題は、POSTを受けた際の操作がうまくできていないこと。なんかたまたま見つけたサイトでは、「action属性は空白にして処理することが望ましい」と書いてあるので素直にそれにしたがってやったのですが、POSTを送信してもうまく条件分岐せずにトップページも戻ってしまっています。
これ素直にaction属性で他のファイルを指定すれば迷う必要のない部分なんですけど、本当に大事なことなのかなあ？前も書いたけどどうせ見られて困るような内容なんてないんだし、今は素直に属性を書いてしまおうかなあ、というところまでが今日の作業内容です。
いや、でもほんと環境構築で詰まってた時と比べたらクッソ楽しいです。
やりました！きちんとEC2インスタンスにSSH接続でCloud9をつなげ、PHPのコードをサーバにアップロードすることが出来るようになりました。きちんとWebブラウザで起動を確認できました。
主にこちらのページを参考にしました。
ここからはPHPのコードを書きつつサーバの操作も磨いていく必要がありますね。
全然進まないと思っていたAWSの環境構築ですが、終わってみるとやっぱり達成感あります。モチベーションも上がってきましたね！
いやー、さっぱり分かりません。こんだけ勉強して分からないってことある？ってくらい分からない。
さっぱり作業が進んでいないんですが大丈夫ですかねえ。ま、気長にいきましょ。
ようやくできました。どうやらMySQLがバージョンが5から8に上がったためにコマンドが変わっていたのが原因だったようで、バージョン8のコマンドを打ち込んだらきちんと接続できました。
これで環境構築は終わったので、次は今の環境に合わせてコードを書いたり必要なファイルを格納したりと言ったことをしていくことになります。AWSの知識と同時にPHPの知識ももう一度しっかり勉強していく必要があると思います。
あと、ロジマガのゲームの方も製作進めなくちゃな。まずは私がしっかりとしたシナリオを作ることが求められます。函館取材を終わったし。ただ、こういう製作ってかなり苦しい作業なんですよねー。小説や脚本を書いてた時の経験を思い出すとですけどね。
まあ、ゆっくりやっていきましょう。
とりあえず環境は作り終わったのですが、そこから作った環境でWebサイトを作っていこうと思うのですがうまくいきません。
Cloud9で作ったコードを表示するようにしてみたいのですが、やはり静的なページにとどまっており、動的なサイトになっていきません。
こりゃあしょうがねえなとAWSの基礎から勉強しなおしています。ブラックベルトというガイドを見て分からない部分を詳しく調べるという学校のお勉強のような作業。あんまり楽しくはない。
まあ、頑張りましょう。
今日もあんまり進まなかったなあ。キャラデザ関係のやりとりに時間をとられたというのもあるけれど、もうちょっと集中して取り組む必要がある気がする。時間が有限である以上、何かを捨てなくては時間は捻出できないわけなんだけれど、函館取材以降合同誌関係を含めてtwitterの活動が活発化してしまったことで本プロジェクトに割く時間が減ってしまっている。他の趣味的な活動を減らすことを検討しなくてはいけない。
取材旅行前に作ったVPCの環境は管理者のみ操作する環境がなかったので、それを新たに作った。将来的にはユーザー操作の環境も作らなくてはいけないが、まずはここから。
あと、セキュリティ方面もそれなりのものにしなくてはいけない。これまた求めだすと泥沼にハマる分野ではあるので見極めが重要になってくる。今までの製作物なんかに関しては、ぶっちゃけ秘密にしたい場所なんてほとんどないし、私のアイディアをパクる人がいたとしても、「私のアイディアを無償で実現して、しかも普及させてくれた」としか思わないのだが、ユーザーが関わってくるとそうはいかなくなる。ユーザーの人たちはきっと自分たちのアイディアや自分たちが作ったものを守りたいからだ。
まあ、ボチボチがんばっていきますか。
いよいよ明日から北の大地へと旅立つ。
案の定今日はそのことを告げたら「えーっ！」という反応をされた。まあそういう人もいるよなと思ったら、言った本人も明日から県外にいる息子のところに行くという情報を聞いて俺にあんなリアクションしていい立場じゃないだろとちょっと怒りが湧いた。
とりあえず簡単に準備をしてみたが、驚くほど荷物が少ないことに気づく。以前北海道に行った時もこんなに荷物少なかったかなあ。
個人的に一番心配しているのが、新幹線に乗るシステムですね。なんかSuicaの情報を入力したらえきねっとでクレジットカード払いで予約ができたけど、当日の切符に代わる手続きをどうすればいいのかよくわかってないんですよね。仙台駅で7分の乗り換えがあるから、下手に手間取ってしまったらアウト。
…まあ、心配しても仕方ないか。とりあえず早めに駅についてみどりの窓口ででも聞いてみますかね。でもそうなると明日はよけい朝早くなる…もう寝よ。
ふうー、ひと段落つきました。途中かなりエラーを吐きましたが、今月いっぱいを使って得た知識でなんとか乗り切りました。
途中でした作業の意味がいまだによく分かっておりませんが、大丈夫でしょうかね。しかしAWSを使ってなお環境構築がこれほど面倒だとは夢にも思っておりませんでした。PHPの知識も全然足りていないし、まだまだやること山積みです。
しかし、明後日からは取材旅行で函館へと5日間旅立つことになります。その間はプロジェクトのメイン進行はストップです。まあ、取材もプロジェクトの内だからストップってことではないんですが。
とりあえずこのブログでも取材旅行のことはアップする予定ですが、写真を含めたリアルタイム旅行記的なのはtwitterが中心になるかと思いますので、リアルタイムでご覧になる方いらっしゃいましたらぜひフォローお願いします。
取材旅行に必要な物品はある程度購入しました（自転車移動用のバッグやタブレットの充電バッテリーなど）が、多分まだ必要になる物があるでしょう。しかし、函館くらいのそこそこ大きい都市ならば必要になれば大抵現地で手に入りますのであんまり気にしなくてOKでしょう。
…一番の問題は私の体調ですかね。運動不足のこの体は果たしてまともに動いてくれるのか？朝にメンタルが超絶落ち込む私は早朝から活動を開始できるのか？ちなみに過去の北海道旅行ではどちらも失敗しております。
とりあえず今日はssh接続の部分をやっていたのですが、自分の無知さを改めて確認しました。
まず、sudoコマンドがwindowsでは使えないと知らなかった。2か月もプログラミングやってきてこんなやついますかって話です。…いたんです。
じゃあどうするのって話で、しばらく困ってからaws linux上でやればいいと理解。やります。すると、次に時間設定を合わせましょうと出てくる。何も知らないままで
sudo vim <ファイル名>
と実行すると、コマンドプロンプトが見慣れない形に。なんか操作がうまくいかない。
そう、vimを開いているのです。私が読んでいたサイトはそこは前提知識になっているようで何も書いていなかったので悪戦苦闘。しかしようやくそれがvimというエディタだと知り、操作方法を検索して慣れない手つきでちょこちょこと操作。
ようやく今日ここまできました。
あー、やっぱり仕事で疲れると進まなくなっちゃうな。
まずはサーバ側の設定をきちんとしようということで、今回はAWSでやっていくつもりで勉強を再開しました。今日の時間のほとんどはIPアドレスについての知識の勉強でしたね。2時間くらいかけてじっくりと理解を深めました。
大学の出身は文系ですが、元々数学は苦手というほどではないので割とあっさりと理解できたほうだと思います。2進数の処理は慣れていないので遅いですが、それは仕方がないでしょう。それにそんなに暗算の速さは重要にはならなさそう。
とりあえず今日は改めてEC2インスタンスを改めて1から作成しつつ、今後構築していくVPC環境のイメージを頭の中で固めていきました。この辺はRailsの勉強の時にMVCのイメージを身に着けていたのが生きています。
今月はほとんど遠回りだけでこれといった成果が生み出せていませんが、「道に詳しい人は遠回りをしたり道草を食ったりした人だ」というありがたいお言葉もtwitterで発見したので、それを自分に言い聞かせます。
とりあえずphpファイルが再びAWSのrunで動くようになりました。
原因は不明。分かんないから一から環境を作り直しました。また明日になったら動かなくなってたらやだなあ。
とりあえず今日は某サイトから引っ張ったコピペコードの内容を理解するために色々と検索していきました。やっぱりサーバ側の操作の部分の理解が大変ですねえ。メールフォームなんてそんなに難しい操作してないっしょと思っていたけれど、ちょっと甘かったですかね。
まあ、焦らずいきましょう。
今日もめっちゃつまりました。というか後退しました。
Railsチュートリアルの続きをやっていたのですが、エラーを吐きまくり。相当やっきになって調べた結果、どうやら最新版でないために書いてあるソースコードをそのまま利用してもバージョンの指定があちこちで違っていてエラーを吐く模様。
しかしバージョンをむやみにアップデートするとその後のコードも続々と変わっていくのでそのたびにエラーを吐いてしまう。こりゃあやっぱり最新版買わないとダメですかねえ。
しかし、サーバサイドに勉強を移してからこれといった成果を何一つ生み出してないのはまずいですなあ。うーん。おかげでこのブログに書くこともあんまりない。
どうもhtmlファイルに<%= %>でRubyのコードを書いてもRubyとして認識してくれませんね。ちょっとRubyかRailsの基本的な知識が足りていない模様。
あー、仕事がもうちょっと早く終わればなあ。って言ってても仕方ないから、なんとか時間見つけてやるしかないんだよなあ。
とりあえずレンタルサーバでアップしている現状のホームページの内容をAWSで表示することができる状況まできました。明日からいよいよメールフォームの作成にかかります。
しかしこれほど手こずるとは思わなかった。数日で終わると思ってた作業に10日以上要している。
しかし、朗報もあります。Railsチュートリアルの続きが実は無料で見ることができました。どうやら最新版じゃなければ読めるらしい。公式HPだから違法ではないでしょう。
しかし、レンタルサーバからクラウドサーバにいつ移行するかは悩ましいところですね。レンタルサーバの期限が1年間だから、それまではとりあえずレンタルサーバでいって、もし途中で容量が足りなくなったらその時点からクラウドサーバに変更しますか。
とりあえず今までの知識を使ってRuby on Railsでホームページを作成していきます。今日は仕事終わりが遅かったのであまりできませんでしたが、とりあえず最低限の形はできました。
明日から牛歩でも毎日進んでいきます。個人的に難所になりそうなのは、AWSサーバーに現在のホームページの内容を正しくうつしつつ機能を追加していくという部分でしょうか。私と全く同じ設定という人はいないでしょうから、ググってでてきたのをそのまま実行するだけというコピペ戦略は使えません。
まあ、なにはともあれ今日は眠いから寝ます。
とりあえずRailsチュートリアルの無料分が終わりました。明日からは有料分をやっていくことになります。
と言いたいところですが、ここでいったん間をおきたいと思います。過去に書いたかは覚えていませんが、実は私は「プログラミングの教材はすべて無料のものでやっていく」という方針できていたのです。ここまでやってみてRailsチュートリアルが良い教材だということは分かったので1000円程度なら安いよなあと思ってはいるのですが、「完全独学」かつ「無料の教材だけ」でやってきたので、なんか縛りプレイを諦めるみたいな感じでちょっと気が引けますね。
まあ、とりあえずAWSで簡単なものを作れるところまではきましたので、あとはこれをベースにまずは今月末の発表までに何かしら形になるものを作れればと思っています。
今日は体調が悪くてあんまり進みませんでした。はあ、なんか最近イマイチだなあ。
でもいいんです。ゆっくりでも毎日進めるのが大切です。
とりあえず今日RubyonRailsで超簡単なHPを製作したので、これからここに様々な動的な機能をつけていきます。
作ってて思ったんですが、今までレンタルサーバーでロジマガ公式HPを運用してたんですが、クラウドサーバーに切り替えた方が将来的には何かとやりやすそうかなあという感じがしています。レンタルサーバー自体が昨今どんどん利用されることが減ってきているようで、最悪の場合そのうち使えなくなるという可能性がありますし、クラウドサーバーであれば必要に応じての拡張なども断然楽だというのもあります。また、将来的に共同で作業をする人がでてくればそのための環境の共有も楽ですし。
うーん、いつかはやることリストに追加ですかねえ。
…昨日はブログの更新を忘れていました。布団に入って眠る直前に気づいたのですが、そこからもう一度書く気力は湧きませんでした。うーん、反省。
とりあえずscaffoldで超シンプルなアプリをデブロイするところまで頑張りました。いやーさすが便利ですね。RailsあってこそのRubyというのは本当にその通りですね。
…しかし、今日になって超絶当たり前のことに気づきました。Railsの便利さって大量の製作物を作る人やチーム向きなんですよね。それこそ、個人でサービスを顧客に合わせてカスタマイズして一つ数万円くらいで売るような場合でならば、Railsで最小限の内容で納品して量産を可能にすれば生産性爆上がりですよね。その一方で、自分で提供したサービスを作る場合ってだいたい頑張って自分でコードを作っていくんですよね。思い入れが違うから。
私の場合は量産する予定などないので、Railsの恩恵はそこまで受けるかというと…
むしろ将来的にサービスを拡張したい場合、自分で書いたコードでないがために理解度が足りないという展開になる可能性が高い…。
はい、こんな当たり前の事実に気づくのに10日以上かかったわけです。アホス。まあ、いいのよ。知識は入れて無駄ってことないからね。要はどうやって生かすかって話ですよ。
という強がりを言って今日は閉じます。
Railsチュートリアルで学習を進めているのですが、マジで分からん単語が飛び交って全然意味が分からないまま進んでおります。
とりあえず指示どおりにやってみる→どっかでエラーを吐く→エラーコードを検索する→数時間調べた末にそれっぽい解決策を発見する→再度別種のエラーコードを吐く
この繰り返しです。多少知識がついてきているのが救いですが、この週末がうまくいけば数時間で終わりそうな作業に費やされているのが辛いところ。躓いた分だけ成長していると信じていくしかないですね。以前書いた気もしますが、人間は自分で思考したことしか理解できない生き物ですので、今の遠回りも能力的な面で見ると問題ないと思うしかないですね。
GitHubも流れで使い出しましたが全然わかっておりません。サーバサイドになった瞬間に必要な知識が増えすぎじゃね？という当たり前の疑問。まあ、私が必要としているというのもでかいですが。GitHub、Ruby、Rails、home brew、クラウドサーバー、etc…。
ちょっとメンタル的に辛いのでもう一回確認しておきます。「今が一番辛い」「いつかは辿り着く」。さあ、明日からまた仕事で時間を持っていかれるけど頑張ろう。
AWSを使うことで環境構築問題の多くはクリアできました。しかし、そこでRubyonRailsを使ってみたら、そのあまりの使い勝手に、「これはもうRubyonRailsやるしかないわ」となり、以前躓いた環境構築に再度取り組んでいます。
問題点は全然解消されていませんが、知識は少しずつついてきているようです。とりあえず現在の問題点は、sqlite3でデータベースが見つかっていないために起こっているようです。しかし、エラーのソースコードで検索してみてもほとんど出てこない。
奮闘中です。
はい、完全にやることがコロコロ変わって私の迷走っぷりが分かりますね。
PHPでも環境構築でMySQLとかXAMPPとか色々やることが多いし突然うまくいかなくなったりといったことが起きすぎるので、AWS（Amazon Web Service）を使うのが一番早いのでは？と思ったためにさっそく使ってみました。
いずれ共同で誰かと製作したりする可能性もあると考えたら、こっちでやっておくことが大きなメリットになるという狙いもあります。
とりあえず色々環境を作っていったのですが、MySQLの環境を作っている途中で10GBという容量が足りなくなりました。利用1日目ですが。
とりあえず容量を拡張しますが、こんなにすぐいっぱいになるものなんですかね。無料サイズでももっといけるんじゃないかと思っていたのですが。もし詳しい人が見ていたとすれば、「それはちょっとおかしい」と思った場合教えていただけると超絶嬉しいです。
今後容量問題は常に起き続けると思うので。
やはり.phpのファイルをブラウザで開けないというポイントで止まってしまっています。あー、なんでなんだろうなあ。teratailでも質問してみたんですが、「もちろん、phpのモジュールは組み込まれていますよね？」という回答がついたのみ。
モジュールの設定はしたはずなんだがなあ、と思いつつももう一回見直してみたが問題なし。「問題ありませんでした」と書こうかと思ったが、なんか書き込み方からして自分の回答で解決しないとイライラしてくるタイプっぽいので面倒を避けてそれとなくスルーすることにした。ユーザーの他の回答みても高圧的な感じだし。
うーん、しかし何はともあれサーバ側での操作ができないと次に進めないんだよなあ。もう環境構築で躓いて10日目くらいになる。ここまで躓くとは思わんかった。
…ついにRubyonRailsに見切りをつけました。
だってだって、環境構築全然うまくいかないんだもん！もう5日くらい粘ってるけど、さすがにこれ以上粘るのは益ないことだと判断しました。
いいんだ、最初からPHPとRubyどっちもやるって決めてたから、遅かれ早かれPHPもやるんだから。
というわけで、こちらも環境構築で躓いたらどうしようと思いながらさっそく必要なものをPCに落としていく。なんか色々落としてるとPCが重くなっちゃいそうで不安だけど、まあ仕方ない。どうせ自分がそんなにPCを本格的に使うことはないだろうと思って、2年前に適当なラップトップを買ったのが今になって悔やまれる。もうちょっとスペック良いの買っとくべきだったなあ。
まあ、気分を一新して新しく頑張っていきましょう。
えー、アプリを作成していたらエラーを吐いたので、また環境構築からやり直しています。
Ruby自体に問題があるような気がしたので再インストールしたりもしたのですが(アンチウイルスソフトに邪魔されながら)、どうもそれでは解決しない。そこからsudoの問題かとなり、そのためにはHomebrewの問題を、そしてそのためにはWSLの問題を、そしてそのためには…とどんどんやらなくちゃいけないことが連鎖していきます。というか、本当にそれをやればいいのかすら分からない。「最初は環境構築が楽な言語からやれ」という意味が分かった気がします。もしこれが最初にきたら絶対プログラミングにまた挫折したんだろうなあ。
あ、朗報が一つだけ。ロジマガ専用キャラクターが今月中には誕生しそうです。今デザインを頼んでいるところですが、かわいい系ときれい系の2名ができそうです。完全に私の好みに合わせてるんですけど、素晴らしい子たちが誕生するという一種の確信に近いものがあります。
むしろ、デザインより息を吹き込む私の方が上手くできるか心配…
ようやく環境構築の基本が終わりました。
どうやら、Rubyのバージョンが新しいとsqlite3が正しく動かないのは半年ほど前までのことだったようで、私に起きている問題はrailsでファイルを作成する段階ではbundlerをスキップし、Gemファイルのsqliteのバージョンを変えてからbundleのインストールを実行することでどうやら解決した模様です。なんとこれが分かるのに3日もかかってしまった。何言ってるか分からねーよと思いますが、こちらを参考にしてください。
というか、ここは学習サイトではないので、分からないままで問題ありません。
さて、明日からいよいよRuby on Railsを使って実際にポートフォリオの作成に取りかかりましょう。以前書いたとおり、まずはメール送信フォームからです。楽しみ。
本格的に本プロジェクトの構想などを説明しました。文字にするとめっちゃ大変ですが、これを書くことができればHPや本ブログでも皆様にプロジェクトの全体像を説明することができるようになります。
でも、自分の説明文で伝わるかなあ。このブログは今まで相手が読んで理解するということへの配慮をガン無視で書いてきたからなあ。まあ、ダメならダメで後で書き直しましょ。
またしてもその他その4の記事を消してしまいました。
確かキャラデザ相手を絞り込むために応募のあった方全員に結果とその理由、いただいたイラストへの感想などを送っていたら午前3時くらいになって明日月曜で仕事なのにヤバイ的な内容でした。
今後はやらかさないように気をつけます。
どうでもいいけど、今日仕事でも作製したExcelファイルを誤った変更をしたうえで上書きしちゃって30分ほど無駄にしてへこんだっけ。
第二段階の発表時に、「かけた時間のわりにクオリティが上がっていない気がする」と書きましたが、原因が思いつきました。短くて分かりやすいコードの書き方にめちゃくちゃ時間をかけたというものです。
これ、発表物をアプリ化したからここの努力は私しか分からないんですよねー。つまり自己満。しかし、コードを整理したことは今後の発表物を作っていく時に大きな武器になると思います。いわば、今回はジャンプのためにしゃがんだ状態といったところでしょうか。
いつ跳べるのかはちょっと分からないですけどね。
とりあえず、次の発表は4月末の予定です。
どうにかこうにか、月内に発表をすることができました。もちろんホームページからダウンロードできるようにしましたので、ぜひ試してみてください。
案の定Electronｗの使い方をこの20日できれいさっぱり忘れてしまったので、予定よりアップが2時間ほど遅れました。こちらのサイトが今日現在では最高に参考になると思います。
しかし、15日で製作したはずの第一段階からあんまりクオリティが上がっていない気がするのはどういうことだろう。確かに第一段階の発表前ほどの猛烈な追い込みをかけなかったというのは事実なのだが、ちょっと今回は発表することが手段ではなく目的化してしまいすぎた感じがあって少し反省せねばと感じている。
私特有の「デッドラインに遅れはしないが超絶ギリギリになる」という特性が発揮されてしまい、テストプレイもダウンロードのテストもほとんどしないまま発表してしまった。
目標を達成できたことで自分を褒めるのが半分、目標を形の上だけで達成したにすぎないということで自分を責めるのが半分ということにしておきましょうか。
※本記事作成中に日付をまたぎましたが、発表はきちんと3月中にしましたよ。
今日はゲーム制作の方は全く進まず…相変わらずsqlite3のインストールがうまくいかずに躓いています。
しかし、今日はキャラデザの依頼先が決まったというのがでかいです。
実は、最後の3名から誰を選ぶのか決定の直前までずっと迷っていました。というか、直前になって依頼相手を変更しました。しかし、残りの2名の方には別の方面でお仕事を依頼してみることにしました。ダメかもしれないけど、魅力的なキャラクターを描いている方のイラストを少しでも使ってみたいなと思ったのです、
もちろん、それによってお金は余計にかかってしまうけれど、本プロジェクトに関しては予算はケチらないと決めているので気にしない。
さて、明日は髪を切ったり日用品を買ったりして夜にまたプロジェクトの続きに取りかかります。
私の手違いで、3/27(日付が変わっていたので3/28表示)の内容を削除してしまいました。
本ブログ以外にバックアップは一切取っていなかったので、復旧は難しい状況です。
また、3/29は更新を忘れて寝てしまっていました。
どちらも本プロジェクトには大きなダメージではありませんが、今まで毎日続けられていたというのは自分なりの小さな自信だったので、ショックはあります。
でも、プロジェクトをやめる理由にはなりません。
今こそ最近言うことの減っていた二つのフレーズを思い返そう、牛歩でも進み続ければいつかは着く、そして今がいつだって今が一番苦しい。
明日からまた頑張ります。
…発表物の製作にとりかかると言いましたが、沼にはまりました。何沼かっていうと、配列とループの組み合わせ沼です。何これ超絶楽しい。書いても書いてもどんどん短くて楽しい書き方が思い浮かんで何度でも書き直しちゃう。
でも、製作が進んでいないかというとそうでもありません。昨日登録地点を地図に表示しタはいいけど、地点が何十か所とあるので、これら全部にイベント登録は無理だな、と思いました。しかし、今日になってその配列とループをうまくすればわずかなコードで数十か所のイベント発生をまとめて記述できてしまうことに気がついたのです。すごくない？
まあ、まだまだ実現は出来ていないのですが、実現すれば発表物の3割くらいは完成したと言えるかもしれません。ああ、素晴らしきかな配列とループ！
これからもいっぱいこういう面白さに出会えるといいなあ。
あと、職場ではタイミングを見てさぼりながらRubyの勉強をしています。JavaScriptとPythonで基本的なプログラミングの仕組みは分かっているので、コードを書けなくてもテキストを読んで各種定義を覚えていくだけで基本的なことは分かりますね。
でも、今でもPHPの方がいいんじゃないかという思いは頭の片隅にあります。最終的には両方勉強するから、sassの実行のために環境構築を済ませてあるRubyを先にしたわけなのですが。はやくon railsの便利さを実感したいものです。
全開オブジェクト指向うんたらと書きましたが、今日になって冷静な頭で考えてみるとオブジェクト指向を使うほどのことでもなく、地図上の状況の特定要素を関数の引数にしてその関数を使いまわせばいい、という至極当たり前な行為でわたしのオブジェクト指向デビューは元の木阿弥になりました。ちなみにもう一つ北海道に点在する聖地に北海道開拓のシンボルの五稜星を表示させたんですが、こちらは配列の組み合わせでシンプルな（といってもそれぞれの聖地の位置座標で50行くらいあるんだけど）コードに繰り返し処理も組み合わせることで落ち着かせることができました。本当はオブジェクトを使う予定だったんだけど、たまたま作りがオブジェクトよりも配列に向いたというだけです。
数日前から月末の発表物に向けてーと言っていますが、じつはこれも月末の発表物の作成の初期段階となっております。何を作るかはもう決まっているので、あとはそこに向けて着実に歩を進めていきます。あと一週間切っているけど、最低限のものは出来挙げりそうです。
それでは今日は激ネムなのでこのあたりで。
ようやくある程度納得のいく段階にまできました。
なんだかすごく停滞したような気もしますが、いずれPHPかRubyは学習しておかねばと思っていたので、ここ数日でRubyのことを少しでも知れたのは良かったと思います。
次は、GoogleMap上で選択した地点にStreetViewPanoramaを切り替えるボタンを作成したいと思います。多分難しいです。構造自体は今までに比べると非常にシンプルだけれど、書き方が検索してもあんまり出てくる気がしないので。逆に言えば検索して見つかればそれであっさり実現できそう。開けてみてのお楽しみってやつですね。
昨日うだうだどーでもいいこと書いたので、今日は短めに終わらせます。
いやあ、予想以上に一筋縄ではいかない。sassを使うためにはrubyをインストールする必要があり、インストールした上でcssにコンパイルをしなくてはいけない。この分かるには超絶当たり前で、分からない人には全く意味の分からない作業は昨日の段階で終わったのですが、今日に入って実際にsassをきっちり書くのがやはり難しい。
具体的には、円形の図形をカウントダウン形式にして消していきたいので（多分この時点では読んでいる人にはやりことが伝わらないと思うので、月末の発表物をお楽しみに）、svg図形を記述する必要があります。そして、現在それに必要な要素をJavaScriptで作り出すところまでは成功しました。
じゃあ何が足りないのかというと、内部のcircle要素に必要な情報をJavaScriptから記述できない状況なのです。
まあこれも読んで意味がわかるわけがないので、ちょっと絵にたとえると、背景は書けてるけど人物がそれに合うように描けないとか、体は描けたけどどうも顔の表情がうまく描けないとかそんな感じでしょうか。自分が出来ていないことなので全然違うかもですが。
あと、キャラデザの選考は質問も落ち着いて、来週の候補者の絞り込みまではひと段落したように思います。
しかし、やっぱりデザインやイラストの業界も供給過多状態なんだろうなあ、というのをひしひしと感じます。私は本業の仕事で多少広告代理店や印刷会社なんかと付き合いがあるのですが、やはり田舎のデザイン系の会社は先細っていくのが見えちゃいますねえ…。地元密着で理解がありますと言って外部の業者との差別化を図る会社が多いけれど、それを売りにしていくと今度は地元の個人事業主との取り合いになっていくわけで。ただでさえフリーランスの人が増えている状態ですから、地元にも個人で請け負ってくれる人はきちんと探せばいるのです。まあ、現状では実績がないから行政や歴史ある企業は個人には頼みにくい面はあって、お堅いところは地元中小企業、社会の変化に合わせて生まれたところは個人と住み分けができているとも言えますが、長期的に見てその均衡がどうなっていくかは、新聞社とWebメディアの関係と同じようなものです。なくなることはないでしょうが、パイは小さくなり現存の企業と人員数は保てないのは間違いありません。
ちなみに、広告代理店と印刷会社って同じくくりにするのは暴論じゃないか、という疑問を抱かれる方もいるかとは思いますが、私の住んでいるような田舎の場合は本来の広告代理店に必要なマーケティングとかの統計的処理をきちんとできる場所がないので、結局印刷会社のやってるデザインと印刷という領域に侵入していくしかなく、競合することになります。まあ、大手の広告代理店がきちんとできているかというと…このへんでやめておきますか。
とりあえず今作っているものが完成したら月末の第二段階の発表物の作成に取りかかります。構想はできているので、あと1週間あれば多分間に合う…はず！
ちょっとタイトルが衝撃的ですかね？ｗ
でも、私にとっても衝撃的だったので。昨日、「CSSだから簡単ってわけじゃない」などと、CSSとそれを主に扱うWebデザイン系に理解のある人間というスタンスをとってましたが、やっぱりダメですね。理解のある人間アピールしているうちは理解していないんですよ。あれですよあれ、男性の中にも「女性に理解のある俺」アピールをそこはかとなくしている人がしますが、そういう人ほど本当は理解とは遠い位置にいるっていう現象。あれと同じですよ。
そして、自分がそんな野郎だったことを痛感したのが、標題の出会いです。SASSの特徴について某Webサイトから引っ張て来たものを並べますと、
・入れ子の使用が可能
・変数を利用できる
・四則演算が可能
・関数を使用できる など
…え？これってもはや正真正銘プログラミング言語じゃないの？違うの？演算処理ができるとかもうこれをプログラミング言語と呼ばなかったら何をプログラミング言語と呼ぶの？
という衝撃だったわけです。 そしてSASSのことについて調べていたら、今日が終わっていました。
いや、やったんですよ。ロジマガの進行も。絵師の募集に詳細な依頼内容を追記しましたし、たまってた質問にもいっぱい答えましたし、そのために必要なLive2Dへの知識もうっすらと入れましたし。
でも、今日やった内容として挙げられる成果物は0。いやー、まずい。これはまずい。大反省。明日仕事ですが、ちょっと夜更かしして少しでも今日の成果を形に残します。そしてこんなことは今日っきりにします。
昨日だったか一昨日だったかからオリジナルキャラクターを書いてくれる絵師さんを募集し始めました。予算は最大30万円で、予算よりもスキルと熱意重視で決めていく予定ですので、腕に自信のある方はご連絡ください。素晴らしいキャラデザが出来れば1人のデザインとLive2Dで動かすために必要なモーションを描けば30万円というのはけっこう破格だと思うので、ダメもとでもいいから興味を持った方はぜひご連絡ください。
とりあえず今回は、椎名薫さんみたいに20代の大人なスラリとして女性のキャラデザをお願いしようかと思っています。詳しく聞きたい方は、ご連絡ください。本当に素晴らしいキャラデザが出来そうだと私が思えば、マジで30万円出します。そこまでの人はいなさそうだなーと思ったら（偉そうですが）、最も私の好みに合ったデザインをしてくれそうな方と値段交渉をして決めたいと思います。
ただまあ、大槍先生の絵やキャラデザと比較されるのは必至なので、気軽にってのはどうなのってのも事実なんですがｗ
今日は標記の内容を実現しました。詳しくは、twitterの方に短い動画を2本挙げていますのでご覧ください。
しかし、作業の大半は今まで書いたコードの見直しに費やしたのも事実です。以前も書いた気がしますが、一度書いたコードも後から見ると「なんて非効率な」という書き方がいっぱい出てきます。
以前は、こういうのに時間を割いてはいけない、と書きましたが、コードを効率的にすることは後々のシステムの運用を楽にするという側面があるので、将来的なことも考えて今のコストと将来のコストを天秤にかけて判断していくようにしました。まあ、まともなプログラミング経験は一ヵ月程度なので、まとも判断が出来ていないことも多いんですが、判断を繰り返すことでその精度が上がるというのは間違いないだろうと思いますので、重要でしょう。
明日は、選択肢を選ぶタイムリミットを視覚的に判るようにアニメーションを作成する予定です。CSSでできそうかなー、とは思っていますが、CSSだから簡単ということではないので、慎重に挑みます。
あと、将来を見越してPHPあたりで利用者からデータの登録を受け付けるシステムの構築の準備も始めていかねばなりません。最初の方に書いたとおり、ロジマガはいつか私の手を離れても自動で飛んでいくようにしたいので。
すっかり今日の記事を書くのを忘れておりました。危うく寝るところだった。
今日はイベント発生に伴ってイベントボタンを消去したり、それまで出ていたメッセージを削除したりといった処理を記述していました。
しかし、予想以上にJavaScriptの非同期処理の問題は大きいみたいで、まっさかここの処理の順番で問題になることはないだろう、と思っていた部分が案外許されなかったりします。私の頭では、もうすでにコード内でのasyncとdeferの関係性がめちゃくちゃになっており、完全に「何か分からんが動いてるからヨシ！」状態になっております。
まあ、進んでいるのでヨシ！
明日はイベントの自動進行処理の実装に取り掛かりたいと思います。
まだしばらくイベント発生システムの構築に時間がかかりそうです。
トリガーとして使用しなくてはならないのは、
1) 場所
2) 時間
3) イベント進行度
というイメージです。こうやって書くと簡単ですが、分岐は相当複雑にならざるを得ません。まあ、でもこの辺は手間がかかるだけで、システムの根幹さえできてしまえば割と楽ちんなわけですよ。…多分。
しかし、問題はやはりあって…プレイヤーをあっと言わせるような部分が今のところ存在しないんです。もちろん、そればっかりがゲームの良さかと言われれば違うんですが、グラフィックやシステムできちんとしたゲームのようなクオリティを出すのは無理なので、そうなるとやっぱりストーリーやちょっとしたポイントでプレイヤーの心を揺さぶる部分がほしいですよねえ。まあ、それがホイホイできたらゲームクリエイターとしての才能に溢れすぎでしょと言われればそうなんですけど。
あと、最近twitterで情報を載せられていないから、そろそろなんか載せたいかなー。これから作ってみよっと。
今さらですが、JavaScriptとjQueryの記事を分ける必要ないですよね。結局は同じものなんだから。時間がある時にやりたいと思っています。
そして、前回宣言していたように、ついにイベント進行システムのために面倒なコードを書き出してしまいました。Dateオブジェクトを使ってイベント進行の処理をし始めたのです。結果、今まで5行くらいで書けていたコードが20行くらいにまでなってしまいました。想像通りに色々と苦戦しましたし、これからも苦しめられていく予感しかしないので、本当は前のコードをベースにしたかったんですが…。
しかし、前向きな見方もできます。Dateオブジェクトを使用したことによって、今まではゲーム開始の瞬間を基準にした処理しかできなかったのが、コンピュータで設定された時間を基準にした処理ができるようになります。これのおかげで、将来的には季節や時間によってイベントを変えたりすることが出来ます。まあ、本当にずっと将来の話ですが。
そして、最近色々と気になる知識を学習していたら、今まで書いてきたコードのダサダサな部分が一杯見えてきて、書き直したくなります。でも、書き直しません。それやり出したらまたしても前に進めなくなってしまう泥沼だと理解しているからです。だって今だって将来だって完璧なコードなんて書けないんですから。
あれですよ、「完璧なコードなど存在しない、完璧な絶望が存在しないように」ってやつです。村上春樹についてそんなに詳しくないから間違った使い方かもしれないけど。
結局今日もイベントタイマーは納得のいくものはできませんでした。仕事中にNewインスタンスを使う発想を練っていて帰ってきてから早速書いてみたんですが、ダメでした。
そして次はプリミティブ値をオブジェクト型にしてしまえば格納場所が変わるからうまくいくんじゃないかと思ってかなり調べたのですが、良い案には至らず。まあでも、このおかげでけっこういろんなことを学びました。かつてtoStringで呼び出した文字列から数字を切り取った際に、このままではプリミティブにならないから演算子で計算はできないんだろうなあと思ったら普通に動いてラッキーと思ったことがあったのですが、あれはいくつかあるJavaScriptが勝手にプリミティブ型に変換するパターンの一つだったのだと理解しました。
そして、超絶今さらですがオブジェクトの勉強を始めました。恐ろしいでしょう？JavaScriptを学び始めて一ヵ月もの間、配列もオブジェクトもほとんど勉強してこなかったのですよ？配列は非常に便利と聞きながらも、私の頭の中では配列をうまく使った仕組みを考えられなかったためにこのような状況になっているのですがね。
まあ、いつまでもここで足止めされているのもアレだから、もうそろそろクソダサコードでもいいから書き終えて次に進まないとかなあ。芸術的センスがないのに変に芸術肌みたいな拘り出てきたのは良くない傾向だ。
結局、便利なjQueryは見つからないから、setIntervalを使って自分で作ることにしました。あーもうきっと非同期じゃない言語だったらちょちょいのちょいなのになあ。多分。
前回書いた通り複雑なシステムにすると後の運用が大変になるので、できるだけシンプルにしました。するとけっこう簡単に10行未満でシステムの幹ができました。
ただ、思わぬところで躓きます。経過時間のカウントの途中でスプリットを保存して後の処理に活用したいのですがうまくいきません。具体的に言うと、目的地到達後に10秒が経過したらイベント発生という風にしたいのですが、それが難しいのです。
なんだ、そんなの楽勝じゃんと思うかもしれませんが、将来的に搭載しようとしている様々なシステムとの組み合わせを考えると、こちらを立てるとこちらが立たず的な状況になってしまうのです。最初はカウントしている数値をconstを使って別の定数で宣言してやれば良いと思っていたのですが、constが再宣言や再代入を許さないと言えども代入する値を変数にしてしまうとその変数が変わるたびにconstで宣言した値も変わってしまうようです。
うーん、これはなんとか良い解決策がほしい。それこそ前使ったPromiseを使うとか解決策は思いつくのだけれど、やっぱり今後のシステムの幹になる以上できるだけ簡素で運用しやすい形で書いておきたい。
今週末はあんまり進まなかったなあ。反省しつつも、進行0の日を作らなかったことは良かったと締めくくりましょう。
以前JavaScriptが非同期であるということを書きましたので、この言語がpauseという動作に対して相性が悪いことは知っていましたが、想像以上に厄介だと感じています。Promiseを以前導入しましたが、どうもそれだけではイベント進行の一時停止は手強いと感じて前回別のjQueryを探したのですが、昨日良さそうだと思ったjQuery.pauseはアニメーションに対しての処理だということが分かり、これではイカンとなりました。
そして今日粘り強くpauseボタンの仕組みを検索していたのですが、これは検索してもなかなか出てこない。setTimeoutあるいはsetIntervalが「停止」の機能は備えていても、「一時停止」の機能を備えていないのがそもそもの問題となっているのです。
となると、現状考えられるのはイベントの自動進行にsetTimeoutやsetIntervalを使わずに実現させるという解決策が一つとして考えられます。具体例としては、Dateオブジェクトを使って秒単位で判定をさせ、基準の時間から指定の秒数が経過した時点で関数を読み込むように仕組めばと思います。
しかし、この仕組み、言葉で書くと簡単ですが実際に書くとなると私の想像の段階でもそれなりに大掛かりになることが分かっています。プログラムを含めてシステムというものは大掛かりになるほど予期せぬことが起こるし運用も大変になるということは人生経験から知っているので、大掛かりな仕組みを作るというのは極力避けるべき選択なのです。
以上pauseの困難さについて書きましたが、さすがにここは避けて通るわけにはいかない部分です。踏ん張りどころかなあ、という勘がはたらいております。
今日からイベント進行の停止、つまりゲーム中におけるpauseボタンの作成に取り掛かりました。しかし、けっこう需要がありそうなのに検索するとしっくりくる機能が見つかりません。
なんとなくjQuery.pauseというプラグインが良さそうだと思って使ってみたのですが、なんかエラーがでます。うーん、別の手段を探したほうが早そうかな？エラーとしてはどうやらpauseとresumeがプラグインの中で定義されていないようで、コードのダウンロードが間違えているのかと思われますが、コードを読んでも原因がよく分かりません。プラグインがもう10年以上前のだからそのへんも関係しているんですかね？
まあ、でもこのへんはよっぽどいいんですよね。問題は第二段階の発表の構想が白紙に戻ったこと。というか、構想が大きくなりすぎて、これ実現したら割としっかりとしたノベルゲームになっちゃうんじゃないかという感じなので、第二段階ではそこまではいけないだろうという感覚を抱いているのであります。
きちんとしたゲームの序盤だけを作成し、セーブデータを第三段階以降に持ち越せるようにするというのが理想なのですが、一本のゲームとして作り上げる以上はシステムやストーリー設計は最初からかなりの一貫性を持っていなければいけません。今の私の技量でそこまでいくのは絶対に無理です、ええ。
さあ、どうしよっかなあ。とにかく、PCの前にいてアイディアが浮かんだことはほぼ皆無なので、明日明後日の休みでゆっくりPCもタブレットも使わない環境で考えてみたいと思います。
いやー、二日がかりでようやくできました。記事に出てきた初心者でも30分でというのは完全に私には当てはまりませんでしたね。
Electronのことは本当に初心者も初心者、「プロジェクトディレクトリって何？」という状態だったので、本当に色んなサイトにお世話になりました。本当はここにお世話になったサイトを並べたいくらいですが、多すぎるし忘れてしまったサイトもあるのでやめておきます。代わりに、ElectronおよびElectron Builderについて書いた全ての方に感謝させていただきます。
というわけで、ロジマガHPからダウンロードできるようになっておりますのでよかったらぜひ試してみてください。本当のことを言うと、実はテストがそこまで念入りではないので不具合が起きてる可能性めちゃくちゃ高いです、すいません。明日以降テストを重ねていきます。
というわけで、一区切りですね。次はプロジェクトの本筋に戻って、JavaScriptを使ってゲームのPauseシステムを作っていきたいと思います。あと、イベントタイマー機能もまだ改善したいんだよなあ…。
プロジェクトの本筋からは反れるかもしれませんが、今まではzipファイルをダウンロードしてそれでブラウザからhtmlファイルを開いてもらうことでプレイしてもらっていたのですが、世の中のゲームって確かexeファイルだったような、と思った調べたら、案の定でした。
「別に今のままでもプレイはできるんだからいいじゃん無理にデスクトップアプリにしなくたって」という意見がもっともなようにも思えたのですが、プロジェクトの次の発表を明記していない今だからこそこういう本筋から反れた部分にも手を出せるかと思って始めました。「なんか検索したら『30分で.exeに変換』ってあるし難しくないだろ～」、と気軽に。
しかし、案の定このポンコツは躓きます。マニュアル通りにやろうとしても全然できない！パスは通らないわ、「コマンドウインドウをここで開く」は出てこないわで、なんと今日はElectronをインストールしたところまでしか出来ておりません！
しかも、インストールしてパスも通したはずなのにいまだにコマンドプロンプトでelectron ～.js と打っても実行してくれません。環境変数も設定したし、nodeは推奨されたバージョンを落としてjsonファイルもできてmainのファイル設定もしてるのになあ、なんでじゃろ。
まあ、こういう時こそ久しぶりにプロジェクトの座右の銘を繰り返しておきますか。「いつかはできる」、「今が一番辛い」。
あれ、前回とサブタイトルが同じじゃね？と思った方、鋭いです。
どういうことかと申しますと、第一段階の製作の時点でシステム的にけっこう後になっていじる必要がある部分だという感覚を得ておりましたので、もっと良いコードの書き方はないものかと色々と調べておりました。
当初はsetTimeoutを入れ子にして使っていたのですが、これには大きな弱点があって、「人間の直感的に理解しにくい作りになっている」というものです。まあ、プログラミング自体が人間が理解しやすいかどうかよりもコンピュータが理解しやすいかどうかを基準に書くべきだというのはごもっともなんですが、様々な言語はコンピュータが理解できるものでかつ人間にもできるだけ理解しやすいもの、という思考で数々の種類が生み出されてきたという歴史を考えると、やはり直感的に分かりやすいかどうかは重要でしょう。
そこで、書き方を色々調べていたところ、Promiseというものを使えば非同期なJavaScriptもその処理順を非常にコントロールしやすくなるようです。JavaScriptでできるということは、jQueryでもその処理は可能なわけで、これによって相当直感的に分かりやすいコードになりそうです。まあ、私もまだまだ理解不足なところはあるのですが。
とはいえ、Promiseの使い方を少し知っただけの現状では実際に自分のコードに落とし込むには少し時間がかかります。しかし、原理的にできるということは分かっているので、じっくりと取り組みたいと思います。
また、今後のプロジェクトで使用するアイディアも少しずつ増えてきました。けっこうインパクトを狙ったものなので実現にはけっこう時間がかかりそうですが、遠くても目標が決まるとそこに至るための近い目標も逆算して見えてくるわけで、やっぱりモチベーションが上がります。
なんだか最近23:30～24:00というブログを書く時間が守られていないと自分で気づく。イカンイカン。
今日は専ら公式HPのデザインを整えていました。すごくオシャレなデザインにしてもいいんだけど、そっちはプロジェクトの本筋ではないし、あんまり機能増やすと重くなるというところもあるからしばらくは今回のデザインでいきます。
やっぱり軽さは正義だと思うんですよね。某俳優さんのHPはそれでネットでも有名になりましたし。
今日はjQueryを使った表題の操作を実装しました。これによって、会話が自動で進むためにプレイヤーは緊張感を持って登場人物の会話を聞くことになるし、C.B.S.システムも生きてくることになります。
第一段階の時点でも実装しようかと思ってたんですが、当時の私には難しかったので断念したのです。
まあ、今回簡単に実装できたのは、私の技術の向上というよりはjQueryという便利ツールによって非常に簡明なコードを書けるようになったからというのが要因として大きいのですが、そのことを知っただけでも私の技術は向上していると言えるでしょう。
今後は、これに対応する形でC.B.S.を整えていく必要があります。以前にも書いた通り、「北へ。」のドリームキャスト版では賛否両論（というか否定的な意見の方が多かった）システムであるので、改良の余地は多いように思います。やっぱりPS2版のシステムをベースにしたほうがいいかな。
あと、いつまでも違法に「北へ。」の画像と音声を拝借しているのも胸にチクリと棘が刺さり続けているので、まずは絵のほうからでもクラウドソーシングで誰かに書いてもらおうかしら。本当は誰かプロジェクト協力者で絵が描ける人が加わるといいんだけどなー、なんて。
とりあえずできるようになったことが3つ。
①StreetViewPanoramaでの現在地をgooglemapに表示させる
②StreetViewPanoramaとgooglemapの境目をドラッグで移動可能に
③StreetViewPanoramaの現在地に応じてイベントを発生させる
なんのこっちゃと思う方はtwitterのほうにgifファイルを挙げてあるのでそちらを見ていただけると理解できるかと思います。
長距離移動に備えて、googlemapの操作でStreetViewPanoramaの表示地点を変更するというのも出来たほうが良いのかもしれませんが、それをやると移動の途中でイベントをプレイヤーの予期せぬタイミングで発生させるという本企画の重要コンセプトが上手くいかなくなる未来が見えまくるので見送り。
駅や空港に着いたらイベントが発生し、目的の駅や空港のStreetViewPanoramaに切り替わるというシステムで行く予定です。
さて、そろそろHPの方も少しずつ充実させなくては…。ただ、HPって凝り出すと重くなるという弱点もあって、私は割と軽さ重視でいきたいこともあって難しいところです。
まずはブログの内容を移設するところから始めるか。
とりあえず、昨日書いていたうちの、「現在地」ボタンでStreetViewPanoramaの現在地をgooglemap上で表示する、ということはクリアしました。
実は、プログラミングの部分よりも、ボタンのデザインをCSSでどう表現するかのほうが時間がかかっていたりします。まあ、このへんは開発段階が進むにつれて少しずつ手を抜かないようにしていきたいところですね。
今は、地図とストリートビューの境界線をドラッグすることで移動させられるようにしているところです。単純にドラッグで大きさを変えるだけならばCSSで簡単に実装できるのですが、一度の操作で二つの区域の大きさを両方同時に変更するにはCSSだけでは無理だと思われます。jQueryで似たようなものはあるのですが、なかなか私のイメージとピッタリとはこない。
まあ、少し前にじっくり検索して探すことの重要性を痛感したところですし、もう少し良いjQueryでいいのを探してみようと思います。
あと、第二段階の発表の形をどうするかも相変わらず課題です。面白そうなアイディアは出てきたのですが、さすがにそれを実現するとなると第二段階の発表がかなり遅くなってしまいそうだったので、もう少し熟慮が必要ですかね。
今日（昨日）も仕事が長引いたため、この時間になってもまだ前回宣言した基礎学習も同時並行で進めていくということが実現できていません。
これ書き終わったら30分でいいからやるか…
今日はStreetViewPanoramaの操作に合わせて隣に表示させたGoogleMapを動かすというのを実現しました。ただ、実際にやってみたらいちいち連動して動かすとGoogleMapの切り替えがなんかうざったらしかったので、「現在地」ボタンを設定し、StreetViewPanoramaの現在地を知りたい場合はそれを押したらGoogleMapでその地点を中心としてマーカーを表示する、という形にしようかなと思っています。
あとは、第二段階で実装したいものに「会話の緊張感」というものを考えています。「北へ。」でC.B.S.ボタンがタイミングを逃していると押せなくて好感度が下がってしまうように、スキップボタンで会話を進めるのではなく時間の経過である程度会話を自動で進行させ、質問や声をかけるべきタイミングでC.B.S.ボタンを押さないといけないようにしてみたいですかねえ。ただ、これはWIの時に不評でDDで改変された部分だし、私は好きだけどユーザーからの評判はあまり良さそうにないのでちょっと実際に着手するにはもう少しシステム面をしっかりと親切なものになるような考慮してからじゃないといけなさそうですね。
第一段階の発表後進行ペースは落ちていますが、ずっとあのテンションを維持しろというのは無理な話なので、毎日少しでも進んでいるということで自分を納得させてまた明日以降も進めていきたいと思います。
ようやく成功しました。考えていたよりもずいぶんかかったなあ。
労力のほとんどはこちらのサイトを見つけるまでにかかりました。やっぱり検索は根気強くやらないとダメだね。
でもおかげで、addListenerメソッドの使い方を詳しく知ることが出来ました。でもやっぱアレですねー。第一段階の発表前に切羽詰まってからサボってましたけど、基本的な知識の学習をさぼっちゃダメですねー。学習を始めて3週間を過ぎたというのに、いまだに無名関数とアロー関数におけるthisの用法の違いすら知らなかったくらいですからね。
最初に基礎と応用は両方同時にやるのが大事だから基礎に流されないって宣言したのに、気づいたら応用に流されていたというのですから不思議なもんです。
まあとりあえず今回の内容が達成出来たら応用的な知識で必要なものはひと段落するので、とりあえず第二段階の発表物の形をイメージとして具体化しないといけませんよね。
それをなんとか今週中に作り上げるのを目標にしつつ、それが出来上がるまでは基礎の学習＋HPの充実を図っていくとしましょうかね。
今日帰ってきてからダメもとでもう一度StreetViewPanoramaのコードを書いた.jsファイルを開いて見たら…表示されました。
昨日表示されなかった原因は全くの不明。
しかし、表示できた以上はこれを元に再びプロジェクトを進めます。とりあえず、次の目標は、スポットに到着することでイベントを発生させていくことですね。そのためには、第一段階の発表時にできなかった、StreetViewでの移動に合わせて位置座標を取得するようにしていく必要があります。
最初はaddListnerを使って割とあっさり行くんじゃないかと思ったんですが、けっこう苦戦しております。'click'をイベントとして登録しても、普通に移動するとメソッドを実行してくれません。以前はこういう時にググれば色々とサイトが出てきて、書いてあることの意味が分からずに苦労することはあってもなんとかそれを読み解く努力をしていけばよかったのですが、この知識はけっこうマイナーなのか、英語のサイトでもなかなかしっくりくる情報が見つからず今に至ります。まあ、とにかく色々試していきましょう。
…前回素晴らしいことを学んだと意気揚々としていた後ですが、事件が起こります。
突然すべてのStreetViewPanoramaが表示されなくなりました。コンソールによると、InvalidAPIkeyとあるのでAPIキーの問題だと言うのですが、昨日まできちんと表示されていたコードをブラウザで開くとこれもエラーで表示されず…どうやら私のせいではないみたいです。
これができないといろいろと進まないので今日一日かけて原因を探ったのですが結局分からなかったです。…ええ、一日無駄にしたに等しいです。
というわけで、明日の仕事中にでもStreetViewPanoramaを使わなくてもいけそうなところから手をつけていこうかなと思います。
えー、昨日ついに第一段階の発表を終え、一息ついたところで今日は月曜日で仕事…。
というわけで帰ってきてから21時すぎまで死んでいたので、正直今日はあまり新しいことを学んでいないし、大した進行を見せていません。
というか、考えてみたら第二段階の発表の構想を全然練っていなかったので、やりたいことは大量にあるけど何から手をつけたらいいのか、どんなゴールを設定すればいいのか分からない状態。オープンワールドのRPGでチュートリアルを終えたという感じに近いでしょうか。私は本格的オープンワールドRPGやったことないから分からないけれど。
しかし、そんな状態でも以前自分に約束した、「少しでもいいから毎日進む」という公約を果たすべく表題のStreetViewPanorama（google map street viewだと思ってもらってけっこう）の学習へ。実は、第一段階でも本当は取り入れたかった技術なんですよね。琴梨ちゃんの「じゃん！」の瞬間に自動で切り替えたかったのです。しかし、以前書いたとおり定義の関係かどうしてもエラーを吐くので断念。
そして今日改めて学習を始めました。このへんまでくると多少ニッチなところも入ってきたのか、テックアカデミーみたいな有名どころの教材がなくなってきて、日本語のHPより英語のHPのほうが良い教材だったりします。幸いにして私は英語を読む能力は多少あるので（えっへん）、そこは大して問題ではなく普通に活用させてもらっています。
そして、一つの超便利なものを見つけたました。それがpanoIDによるマップ指定です。今まで見てきたサイトでは、StreetVIewPanoramaの表示位置を「緯度」、「経度」、「方角う」、「見る角度」などで指定していたのですが、これがなかなか上手くいきませんでした。何度札幌駅前の交差点を指定して南口広場のビアフェスに連れていかれたことか…
しかし、PanoIDはそんなことがない！希望していた通りのマップが一発で出せる！
というわけで、テンションが上がっているのでまたプロジェクトの進行に戻ります。なんとか今週中には第二段階の発表の構想を描いておきたいですね。やっぱり目標に向かって製作しつつ必要な知識を学ぶのと、役に立つのか分からないけれど後々のためにと思って学習するのとではモチベーションが違いますね。
モチベが上がっていれば、いつもの自分への励ましもいりません。では！
いよいよ第一段階を発表しました。
つきましては、下記のHPをご覧ください。以前書いた通り、このブログの内容は時間を見つけてHPへ移設する予定です。
発表物については、HPからダウンロードしてください。
また、下記にやまひのTwitterのリンクを貼っておきます。重要な情報はできるだけHPに掲載するつもりですが、雑記のようなものはTwitterで呟くことが多いかと思います。
どの程度の反響が得られるか、ドキドキしています。
なんだかけっこううまくいきました。
ホームページは何の加工もしていないけれど作れましたし、そこにファイルをアップロードすることもできました。発表する第一段階の完成品も（本来想定していたより幾分機能は足りていないが）、ほぼ完成です。
Twitterで21時に公開すると発表したところ、恐れていたような権利関係の申し立てはなく、このまま発表に至る予定。まあ、発表後に炎上するかもしませんが、もうそれは仕方ないでしょう…。素人が20日足らずで作ったことも書いておいたし、クオリティに期待はされていないと思うので、とりあえずメンタル的に少し落ち着きました。
あとは、明日の発表までにプロジェクトについての説明をするための環境を整えていくことが必要です。HPも少しはそれらしい装飾を施さないといけないし、そもそも本プロジェクトがどのような意図で始まったもので、どこを目指しているのかも説明しないといけない。
本当はこのブログでそのあたりを第一段階の発表までに隙間時間を見つけて少しずつ書く予定だったんですが、隙間時間なんてものはなかったので（あったけど娯楽でメンタル回復する時間になってしまった）、全然書けていません。
実は、内心「北へ。」ファンから変に反応されすぎると困るな、と思っていたのですが、画像付きの予告をしてもだいたい想定通りくらいの反応だったので第一段階の発表が終わったら想定通りに少し落ち着いてプロジェクトの整理ができそう。
協力者が一人も現れない可能性はけっこうあるんですけど、それも進行が遅れるだけで、今までと同じように自分の足で一歩一歩進めばいいだけの話ですからね。というか、協力者と足並みがそろわないことでプロジェクトに対する私の熱意が失われてしまうというリスクを負わないで済む分堅実っちゃ堅実。
というわけで、28日21時に本ブログとロジマガ公式サイト、Twitterがリンクされます。そう書いたらこの駄文を多少なりとも読む人がいるかもしれないと思うとまたメンタルがががが。
全く校正も見直しもせず書いていたのが今になって恥ずかしい！でもこの記事の見直しもしない！
いやー、大誤算です。完全に知識不足でした。
誤算は二つあります。
①自分の作成したHTMLファイルがブラウザで起動するからといって、それをサーバにアップしただけで同じように動くとは限らない。
最初、ドメイン登録やらレンタルサーバやらを済ませてURLを貼ればそれだけでゲームをプレイできる状態を目指していたんですが、どうやら私の想像をはるかに超えてWebページというのは軽さを求められるようです。
サーバにゲームをアップしてサイトにアクセスしてみたら、画像が重くて表示されないのです。しかも読み込みに時間がかかる。そこで、Webページってどのくらいの容量ならスイスイ動くのかな、と思って検索したら
「1.6MB以下に抑えるようにするべし」
とのこと。これがどのくらい軽いか分からない方に申し上げますと、「私がタブレットで撮影した画像を900×1600の大きさでPNGファイルにすると、1枚しか入らない」という容量。私がアップしようとしていたゲームファイルは無駄に画質とかにこだわったせいで30MB近く…そら重いわな。
というわけで、再考を迫られ、結局「適当に作った自作HPでダウンロードしてもらい、ブラウザで起動してもらう」というクソださい方法を取ることにしました。仕方がない、私には残された時間が少ないのだ。
というわけで、自作HPを作ると決まった以上、本プロジェクトの軌跡をつづる場所もいずれはこのブログではなく「ロジマガ」のHPに移ると思います。まあ、第一段階が終わって一息ついたらそっちも実現していきましょうかね。
②google maps API では、ストリートビュー状態での動きをリバースジオコーディングできない
いや、できるっちゃできるんですけど、私の考えていたようにgoogle mapをクリックした時同様にストリートビューでもジオコーディングができていると思っていたから、そこにかける時間を残していなかったんです。
急遽ストリートビューでのリバースジオコーディングの実現を考えて色々調べておりますが、これまた時間がないので明後日の発表には間に合いません。
仕方がないので、ストリートビューの操作に反応してのイベントの発生は第一段階では諦めることに…ここがこのプロジェクトの肝だったのに…なんということだ…
というわけで、第一段階発表前になって突然越えられない山が2つ表れたので、しょうがなく迂回することになりましたとさ。
いい、挫けるな。「少しでいいから進む」、「今が一番辛い」これを頭の中でリピートさせるんだ。
悲報です…。今日もあまり進んでいません。というか、明日仕事が長引く恐れが強いので、今日でかなり進めないといけなかったんですが…。
とりあえず、ストリートビューの表示はできるようになりました。というか、それを回避したというか。本当は自動でストリートビューに切り替わるようにしたかったんですが、どうも関数の呼び出しの関係で変数の定義と読み込み順がうまくいかず、しかもそれが私の書いたコードとではなくStreetViewのコードとの関係のようで、これは私の手には負えないと判断し、文章の作りを変更することで、手動で切り替えても自然な作りにしました。
何度も何度も読み込み順の問題だろうと思い、asyncやdeferの書き方を見直しまくってみたんですが、分かりませんでした。ちなみに、作業が進まなかったのは半分以上ここに躓いていたせい。
今は、ストリートビューの地点に応じてイベントを発生させるコードを書いています。しかし、これが意外と難しい。以前の住所表示の際にはネットにあったコードのコピペで済ませた部分を利用しなくてはいけないので、思うようにいかないことが多々あります。
特に、event.addListnerに関する知識がほとんど皆無なので、検索しつつ片っ端から思いついた手法を試すという完全手探り状態。
しかも、第一段階の発表にはこの上ウェブ上に完璧な状態でアップロードするという課題が…。2月中とは言ったものの、どう考えてもやばいですよ。
まあ、私は遅刻しないように早めに家を出ても、忘れ物取りに戻ったり鍵を閉めたか不安になって戻ったりして結局2,3分前に着くようになる人間なので、期日のあるものでもどうしてもギリギリで完成させることがほとんどなんで、分かってたんですけどね、ええ。
困りました。昨日私がやろうとしていたことは表題のとおりなのですが、案外うまくいきません。後一歩のところまではきているのです。ストリートビューの表示自体はできているのですが、それがcssでz-indexをしてもうまく表示されません。
というわけで、すぐにプロジェクトに戻ります。発表まではこのブログあんま書けないかもなあ。記録は残しておきたいのだが。
今日は休日でしたが、特別新しく仕入れた知識はありません。まあ、全くないということはないのですが、未定義の変数かどうかを判別するにはtypeofで"undefined"という文字列と一致するかどうかを判定するのが一般的なやり方だとかそんなことくらいですかね。
工程としては、ようやく終わりが見えてたといったところでしょうか。
取得した位置座標から目的地までの距離を計測する関数も完成し、それによって必要なおおよその移動時間も表示できるようになりました。
あとは、素材を集めて今までの知識を使って実際にコードを書く時間が多くなると思います。
まだ仕入れなければいけない知識としては、
・ストリートビューの移動に伴なって位置座標を取得し、その判定によりイベントを発生させる。
・作成したhtmlとcss、javascriptなどを使って作成したファイルをウェブ上に置き、URLにアクセスするだけで利用可能にする。
の二点くらいでしょうか。つい少し前までは第一段階の完成までにどのくらいの知識量が必要だったのかも見当がつかなかったことを考えれば、ものすごくゴールが近づいてきたと実感しますね！見えなかった第一ピークが見えてきたという感じ。
前者はおそらく簡単ですが、後者はどのうらい難しいのか見当もつきません。一応昔クラウドサーバを借りてWordPressでホームページをアップしたことはあるので、1日もあればできるんじゃないかと思うのですが、見積もりが甘いかもしれません。テストも込めて何とか金曜の夜までにはコードは書き終えて、土日はその修正にしたいですね。
しかし、こうやって書いているうちに実装したアイディアがまた一つ頭に浮かんでしまった。いや、多分そんなには難しくないんです。でも、すでに月末の発表までギリギリのスケジュールで動いている段階で思いつくのは嫌な予感しかしない…。どうしようっかなあ、と迷いつつプロジェクトの進行に戻ります。
えー、昨日からの進捗はどうかというと、条件分岐については最低限に減らすことにしました。ストーリーと同じで、複雑にしだすときりがないんだということで、第一段階の発表というのはかなりの短編なのですから、やっぱりシンプルにした方が良かろう、と。
というか、今日一日で分岐を複雑にしていったらやはりバグが出るようになって、自分で確認した範囲でもバグがちょこちょこ見つかるということは利用者からしたらとんでもないバグだらけなんだろうなあ、と自覚して条件分岐を大幅に削りました。
このあたりは、プログラムに慣れてもっと簡明に条件分岐を書けるようになってきたら再挑戦でいいのかな、と思います。まあ、このことを判るまでに今日3時間以上費やしたんですが。
さて、次は取得した緯度経度から二点間の距離を求め、それに従って条件分岐をする、ということを目指します。
二点間の距離の求め方は、簡単です。三角関数と三平方の定理を使うだけです。中学生でもできますね。地球はほぼ球形なので、本当は球の表面の曲線分だけ距離は伸びるのですが、日本国内程度なら微々たるものなので無視して大丈夫です。
ここでは具体的な式は書きません。検索すればたくさん出てきますので気になる方はぜひ。
しかし、その前にやはり拘りたくなる点が。それが逆ジオコーディングによって表示する住所です。今までは、都道府県名から始めて9文字を切り取る、という妥協案でやっていたんですが、やはり「東京都港区海岸1丁」みたいに区切りの悪いのが気になるので、きちんと市区町村名まできれいに表示できるようにしようと決意。
一度は諦めたことなので簡単にできるわけがないんですが、知識も以前よりついてきたせいか、なんかいけそうな予感がしたのでチャレンジしております。
公表する前にテストプレイとかアップロードのテストとかもしなきゃだけど、大丈夫ですかねえ。まあ、前回も言ったように失敗だっていいんです。少しずつ改善して進めればヨシ！そう考えないと、メンタルが持ちません。すでに公表時のこと考えて内心ドキドキだってのに。
…甘かったです。
以前、ここからが脂っこい、と書いた選択による条件分岐の部分ですが、想像以上の脂っこさでした。最初に想定して方法ではダメだということが分かり、別の手段に迫られています。
C.B.S.システムという無理に導入しなくてもいいようなシステムを取り入れようとしたからこうなっているんですが…。やらなくていいことやりたくなって時間を大量にもっていかれる…この展開ばっかりですね笑
具体的に書きますと、当初は選択肢を選ぶことによってイベントの進行に関わる「イベント番号」を変化させることでイベントを分岐させようと思ったのですが、それだけでは「選択肢を表示させる」を選ぶべき場面で(自動で選択肢を表示させないのがC.B.S.システムなのです)次のイベント番号に移動するスキップボタンを押してしまうと、存在しないファイルを参照してしまうことにより、ブラウザが止まってしまうのです。正確に言えばちょっと違うんですが、だいたいこんな感じの状態。
しかし、本当に間に合うんでしょうかねえ…まあ、間に合わなくても発表はするんですけど。
でも大丈夫、最初の発表で私の構想を伝えられなければ、第二段第三段で搭載していけばいいのです。
「最初に失敗すると取り返しがつかないよ」という発想は世間的にあるようですが、私はそれはあえて無視します。発想は逆です。「失敗してもいいからまずやってみる」なのです。どうせ大きなお金をかけているわけじゃないんですから。
だから、恐れることはありません。そう、自分に言い聞かせます。
音楽ファイルは無事流せるようになりました。また、スタート画面とイントロダクションの操作説明ページも作成し、流れに沿って自然に始められるようになりました。
しかし、やはりことはそう順調にはいきません。当初は簡単に思えた条件分岐を使った背景や登場人物の切り替えが案外うまくいかず苦戦中。原因はだいたいわかっています。条件分岐に使っているイベント番号が、スコープの範囲外でうまく動かないのです。JavaScriptだけの話だったら一番最初に変数の宣言と代入をしてしまえばファイル全体がスコープになるのですが、HTMLの操作が関わってくると、変数を書いたはずなのに「is not defined」問題に頭を悩ませることになります。
いや、本当にこれで問題が起きているのか分からないけど…
と、書きながらあらためで自分の書いたコードをちらっと見たら、違いました笑。超単純に、イベント進行ボタンの中でイベント番号を使った条件分岐を書いていなかった。なんという当たり前なことが…。まあ、プログラムの問題ってこんなもんだったりします。
といわけで、問題が解決したから次へさっさと取り掛かります。プロジェクト第一段階の発表の今月末に向けて、予定よりかなり遅れているので、ちょっとでも取り返せるように頑張ります。
ああ…こうしたらもっと面白いというアイディアはいくらでも思いついていくのに、それを実現する技術がないために思わぬ部分で時間を取られていく…
今日はノベルゲー風の文章送りがほとんどできるようになりました。昨日からの課題で、昼間仕事しながら足りない頭でうんうんうなっていた一度表示したスクリプトを削除して新しいスクリプトを流すというコードが、帰ってきて仮眠をとったら一瞬で書けました。いやあ、睡眠って偉大ですね。
本当は次にやることは「C.B.S(コミュニケーション・ブレイク・システム)」の実装のための設定なのですが(これができれば付随してプレイヤーの選択による条件分岐のための下地も整う)、私はここで少し手順を変更します。
それが表題の音楽ファイルの再生です。最初は第一段階の発表時点では音楽がなくても許されるかな、などと考えていたのですが、実際に形が出来始めて自分で操作をし始めると、音楽がないと圧倒的に物足りない！なので、第一段階で何とか頑張って音楽を流せるようになろうと決意しました。…そう、今日の最初に書いた「思わぬ部分で時間を取られていく」現象に現在どっぷりとハマっているわけです。
その自覚がありながらなぜ音楽に着手しているかというと、「自分の作ったコードのテストをするたびに大好きな音楽が流れたら絶対モチベーション上がる」というだけの理由です。仕事と睡眠以外の時間のほぼすべてを本プロジェクトに費やしている現在からどうやってさらにモチベーションが上がるんだ、というのは置いといてください…
とりあえず、音源から必要なmp3ファイルを作成することはできるようになりました。後はこれをJavaScriptで再生させるだけです。まあ、案の定その「だけ」で躓いているのですが。てか、いまだにmp3ファイルが良いんですかね。私がネットに触れ始めた十数年前からずっとこれ使ってますが。まあ、そのへんも後で詳しい人の協力をいただけたら改善しようっと。
なんだかプロジェクトが進むにつれてやらなくてはいけないことが増えていっているような…自分を追い込むために〆切設定のつもりで今月中には必ず第一段階の発表をしますと言ってしまっているけれど、大丈夫か？
とりあえず思いつく第一段階での課題
・C.B.Sシステムの導入とそれに伴う条件分岐
・google mapから取得した緯度経度の数値を元にセリフを変更
・音楽ファイルの実装
・作成したファイルを正しくアップロード
・テキストシナリオの作成
・必要な画像や音楽など素材となるファイルの作成
これらは必須かな。二日で一つできたとしても今月中の発表に間に合わねえ…
でもいい、確認する。「止まらなければ、いつかは辿り着く」。「今が、一番辛い」。
前回、「google先生によると、ノベルゲームの基本プログラムは初心者でも書ける」という適当な情報を書きましたが、もうちょっと調べてみると、どうもjQueryとかで実装すれば自然とできるようになるというレベルのものではないみたいです。
でも、実は頭の中では何となく仕組みは作れていたので、今まで学んできたJavaScriptやHTML&CSSの基本的な知識を組み合わせて作成に挑んでおります。
ただ、やはりコピペしてくるのと自分で知識を動員して作り上げるのとでは進行スピードが違います。上手くいかないことばかりで、中～上級者なら一瞬で書けるんだろうなと思う内容に何度も何度も検索をかけて試しちゃ失敗し、たまに成功して喜び、また検索し…きっと、プログラミングを独学している者なら誰でも通る道なんでしょうね。
とりあえず今のところ、ブラウザの操作に応じて参照するファイルの名称をJavaScriptで出力するところまでできるようになりました。何言ってるか分からねーよ、という方のために、私の頭の中に描いてることを含めてちょっと詳しく説明します。
超簡単なゲームで例えましょう。
キャラクターが朝の風景をバックに「おはよう」というセリフを表示→プレイヤーが「次に進む」ボタンを押す→バックが昼の風景になり、セリフも「こんにちは」にかわる→プレイヤーが「次に進む」ボタンを押す→バックが夜の風景になり、セリフが「こんばんは」にかわる。「前に戻る」ボタンを押すと逆の変化が起きる。
これだけのゲームです。これを実現します。
変更する必要があるのは、背景とセリフだけです。ですから、朝の場面に0番、昼の場面に1番、夜の場面に2番という番号を振り、プレイヤーが「次に進む」ボタンを押したら場面の番号を+1し、「前に戻る」を押したら場面の番号を-1し、それに合わせて読み込む背景とセリフのファイルを変えればいいというわけです。
では、現在どこまで来たかというと、ボタン選択に合わせて場面の番号を変更し、それをJavaScriptで出力するところまでできました。また、それに合わせて読むこむファイルのパス（どこから読み込めばいいのか）を正しく表示させることまでできています。
後は、表示された通りの名称のファイルを読み込めればOKです。まあ、文字で書くと簡単なんですが、実際書くとなると苦労しているのですが。
でも、ここが最後の関門。これが終わればノベルゲーの部分についはテキストをもりもり書いていくこと、先ほど作った場面番号に合わせてキャラクターや背景も変更させていくこと、で終わりです。もう1日あればさすがにできそう。
次にするべきことは、進行に合わせて選択肢を表示し、選択によってその後の進行を分岐させることです。実は、これも頭の中で仕組みは出来ています。後は、それをプログラムで表現できるかどうか。
さあ、今日も最後に確認しておきましょう。毎日進むこと、今が一番辛いこと。実際、本プロジェクトは進めば進むほど楽しくなっている気がします。
なんということでしょう…第一段階の発表時点では実装しなくていい機能に今日一日を費やしてしまいました。その機能は表題のとおり。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だって一週間でここまできたし、きっといけるでしょう。
最後に、またいつものことを確認します。「止まらなければ、いつかは辿り着く」、「今が、一番辛い」。そのうちモチベーションを高めるためにプロジェクト中の座右の銘が増えていくかもしれませんね。会社における社訓みたいだと考えたら、なんか途端に良い印象が消えますが。
ある程度記事を書いていて感じましたが、本ブログは常体と敬体が記事によって入り混じっています。この記事は敬体で書いていますが、常体の記事も多いです。
それもそのはず、本ブログは基本的に推敲や校正といったものを一切していないためです。それもこれも、プロジェクトの進行を優先するため自分に課したルール。推敲とか校正ってやりだすと本当に無限に近い時間を吸い取られていきますから。
なので、おかしな文章や誤字脱字等もたくさんあると思います。お見苦しいかと思いますが、本プロジェクトを応援するためだと思って多めに見てやってください。
なお、どうしても事実に合わないもの、絶対に修正が必要なものについてはご一報いただければ、検討の上積極的に対応したいと思っていますので、右側のフォームからご連絡ください。
ああ、こうして書いている間に日付を5分ほど跨いでしまった。プロジェクトに戻らねば。
昨日ブログを書き終わってから、すぐに問題が発覚します。Jtrimの使用方法を学んでいたら、すぐに「複雑な形の切り抜きは'Photo Filtre'を使ったほうが良いです」と書いてあった。え～、と思わないでもなかったが、詳しい人に逆らっても仕方ないので大人しくPhoto Filtre7をダウンロードしました。
しかし、もっと便利かと思いましたがやはりそこは無料ツール。画像の切り取りも非常にアナログにマウスでクリックしていくしかないようです。ペンタブもなく画像の切り抜きなどしたことのない私がマウスで上手に枠に沿って切り抜きができるはずもなく、案の定切り取り線はくしゃくしゃに…。やっぱり第一段階の発表をしたら早めに画像編集の技術がある人の協力を募ったほうが良さそうですね。
今後の画像編集はほとんどPhoto Filtreを使っていくことになるでしょうが、ラベルをいちいち変えるのは面倒なので、画像編集の回は「Jtrim」というラベルでやっていきますのでご了承ください。
さて、ようやく今日の内容に。今日は実際に第一段階の発表をするページのコーディングを行っていきました。HTML&CSSは基本的なことはだいたい分かっているし難しいところもないので、検索しながらスイスイと進んでいきました。こうやって自分のできることばかりやっていると前進がないのでここはあっさり終わらせなくてはと分かっているのですが、ついつい楽しくて凝ってしまいます。ウインドウボックスの色とか、文字のフォントや影のつけ方、背景画像など…。
まあ、こうやってブログを書くことでいったん熱が引けたので、後は画像のポジショニングがうまくいかない部分とボタンの設置くらいだけして、またJavaScriptなどの知らない知識を身に着けていかなくては、ですね。
今日がスイスイ進んだせいか、ずいぶんプロジェクトも発表の形が見えてきて楽しくなってきます。しかし、これからが正念場です。これからは、変数や条件分岐などをふんだんに使って、閲覧者(プレイヤー？)の操作に従ってプログラムが動くようにしていかなくてはなりません。
しかし、あまり構えすぎないようにしましょう。一時期はリバースジオコーディングなどで完全に手詰まりに思えましたがそれでも粘り強く取り組むことで乗り越えられたのです(以前言っていたAPIのパスがなぜか通らないことは、v2からv3へとヴァージョンアップがあって、参照していたサイトの情報が古いことが原因でした)。きっとこれからもたくさんの困難をゆっくり越えていけるはず！
あと、最近もう一つ自分を奮い立たせる言葉を考えつきました。
「今が、一番辛い」
というものです。
何かを新しく始める時、仲間がいればいいですが、そうでない場合、孤独です。一人では進まないから、成果の実感も少ないし、モチベーションも保ちにくい。
でも、少しずつ進んでいけば、知識も経験も雪だるま式に増えて進行具合も加速していきますし、仲間ができればさらに加速します。それに、仲間ができれば成果だけでなく過程にも楽しみを見出すことができるはずです。
だから、辛くなった時は、「今が、一番辛い」と言い聞かせてもう一歩だけ頑張ってみようと思います。
今日のプロジェクトの進行はかつてないほど不十分だった。仕事がいつもより長引いたためである。
しかし、何度も言うように僅かでも毎日進むことが大切だ。いつかは辿り着く。
そこで、今日したことは画像編集ソフトのダウンロード。何が良いのか迷った。画像編集と言えばPhotoShopというのが定番だが、今回のプロジェクトでは切り抜きくらいで高度な操作は必要なく、そのために有料のソフトを購入するのはやりすぎだろう、ということで無料のJtrimというソフトをダウンロードした。これを使っていって、物足りなければ将来的に有料ソフトも検討しようと思う。
今は加工に必要な素材を集めている。といっても最低3つほどあれば第一段階の公開には足りるので、すぐに終わるのだが。
画像編集もやはり知識と技術のある仲間を募ったほうが良さそうだ。まあ、これ言い出すと何の専門的な知識も技術もない自分がプロジェクトに不要になりそうだが、実はそれも目指している遠いゴールに設定されている。そう、本プロジェクトは最終的には私の手から飛び立ってほしいのだ。宇宙を目指して打ち上げたロケットが、やがては地球の引力を振り切っていくように。
一昨日からの課題だったマーカーを消す操作はなんとかできました。原因としては、やはり自分で課題に感じていた関数の知識の問題だった。具体的に言えば、マーカーを消す関数に使用していた変数の中にスコープ外で宣言してしまっていた変数があったのだ。それくらいコンソールを出してみればすぐに分かるだろうと思われるかもしれないが、まあ私のプログラミングに関するレベルはその程度と思ってもらっていい。基本が足りないのは認めるが、応用で躓いた経験のない基本知識は脆いので、これによって基本の知識が補強されたと見るべきだろう。
緯度経度から住所を表示することもできるようになった。これは「逆ジオコーディング」、あるいは「リバースジオコーディング」と呼ばれるものなようで、ジオコーディングのAPIを有効にしている必要があった。これも後になってみるとなぜそんな簡単なことが分からなかったんだと思うが、人間そんなものである。
なお、学習しているサイトのコードを実行してみたところgoogle mapが正しく表示されない現象がおき、それはいくら検索しても英語のウェブページを見ても解決しないので、ついに「teratail」で質問してみた。まだ回答はきていないが、ネット上にいるたくさんの猛者の中の一人くらいは見てくれるだろうと期待している。
細かい部分で言うともっと学習したいポイントはあるのだが、Maps JavaScript APIに関する知識はここまで取得したもので本プロジェクトには最低限足りそうだ。
今後必要になると思われるのは、
・画像処理ソフトの使い方
具体的には画像から必要な部分を切り抜くだけなので、これは上手くいけば数時間で身に付きそう。
・自分のブラウザで表示している操作を他人のブラウザでもできるかの確認
カスタマーにはChromeの使用を推奨する予定なので、他のブラウザへの対応の確認は無理にやる必要はないが、APIの操作を他人のブラウザでもできるようにすることは必要と思う。
・ブラウザで行っている処理をアプリ化する
これができれば、前述のブラウザ問題は解決する。将来的には必須の作業となるが、第一段階の発表時点ではブラウザで表示してもらって、プログラミングに強い仲間が加わってからやったほうが良いと思っている。
「自分が思いついた時には世の中に同じことを考えているやつが100人はいるから、その100人の中から1人になるのは実行力とスピードだ」というのをもっと自覚しなければいけない。自分で一つ一つゆっくり作り上げるのは楽しいし、形になったものを突然発表して周囲に衝撃を与えるのはさぞ気持ち良いことだろうが、やはり素人一人での作業は遅々としている。予想よりも早い段階で第一段階を切り上げてプロジェクトを発表し、仲間を見つけていく方向に頭の中で軌道修正している。
相変わらずマーカーの削除で止まってしまったままです。とりあえずの対策を考えるために、ボタンを配置してそれを押したら地図上からマーカーを消すようにという基本的なことをしてみたのですが、これも反応なし。どうもよろしくない。
まあそれでも知識の方はつけていかなくてはいけないわけで、今日は情報ウインドウの操作を学習しました。これはプロジェクトでも有効に使う箇所がありそうななさそうな。
あと、基本の学習のほうではもう一度文字列のことを詳しく学習しています。もっとぱっぱといけるかと思っていましたが、辞書的なサイトを見るとProgateとは比較にならないくらい文字列に関してだけでも情報があり、ついつい楽しくてこんなことができるのかと読んでしまい、なかなか条件分岐や関数のところまで進まないですね。まあ、何度も言いますが歩みさえ止めなければいいわけですので。
今日はちょっと短いですが、深夜に地震があった関係でブログを書く時間をあまりとれなかったのでこのくらいで。
今さらとなりますが、本ブログの作成上意識していることを書きます。
最初に書けよと思われるかもしれませんが、ブログにかまけてプロジェクトの進行を遅らせるのは避けたいので、ブログにかける時間は1日30分を上限にしているため、記事の作成に余裕がある時にしかこういったプロジェクトの進行外のことは書かないようにしています。
そのため、この記事を筆頭に本来であれば序盤に記述すべきことが後になって投稿されることが多々あるかと思います。しかし、それは了解していただきたい。いずれ30分の中で余裕があれば、記事全体をツリー構造にして本来のあるべき形に整理することもできればと思っています。
あくまで、このブログはプロジェクトの進行を後から振り返るための足跡でしかないのです。足跡を美しくすることに時間をかけて、前を向けなくなってはいけません。
なので、このブログを最初から読んだだけでは私の目指しているプロジェクトがどんなものなのか分からないのも仕方のないことなのです。恐らく、このブログにそこそこに読者がお度ずれるとすれば、プロジェクトが段階的に発表され、その足跡に人々が注意を集めるようになってからと思われます。ですから、この記事を読んでいる方の多くも、きっとプロジェクトのことはすでに理解した状況で読まれていることでしょう。
ああ、北の精霊よ、このプロジェクトが目的地へと辿り着けるよう、私の心身に守護を与えたまえ！
残念ながら、今日は昨日の目標だった古いマーカーの削除やクリックした一度の住所を取得すという目標には至れませんでした。また1時間以上失敗を繰り返しました。どうも、マーカーを削除するスクリプトを記入するとマーカーの生成自体ができないようになってしまっているようです。
足掻くだけ足掻きつつも、同時並行で標題のAPIの学習を進めております。今日は表題の通りマップタイプの操作ができるようになりました。おそらく、プロジェクトにおいては「衛星」モード（世間で言うgoogle earthにあたると思われる）しか使わないと思いますが、コードを自分でいじることでJavaScriptの基礎知識の習熟度も上がったような気がしています。
実はナビゲーションコントロールを使ったズームやフェードの操作も学習したのですが、どうもナビゲーションコントロールをFalseにしても表示が消えないのが悩みです。しかし、ここはプロジェクトには利用しないと思われる部分なので、分からずとも先に進むことにしました。こういう機能があるのだと知っておけば、後で再び参照することはできますからね。
本当はもう少しJavaScriptの基本の勉強をしておきたかったので、これから寝るまでの時間でそちらも進めたいと思います。他の言語の知識が多少あるおかげで、基本の学習はスムーズにコードが書けますが、それゆえにそちらの時間に比重を置いてしまいそうなので、今後の学習の優先度は"応用＞基礎"とします。基本ができてから応用に手を付けるべきだという信仰の方は、私が応用と基礎を同時並行する理由をこちらで書いていますのでご了承ください。特に、関数の引数と戻り値のことについてまだ間違った記述をすることがあるようなので、そのあたりを中心に確認していきたいところです。
プロジェクトの第一歩の形ができたらtwitterで公表の上、ここのブログともリンクをさせていこうかと思いますが、想像通り道は遠いですね。最初は1週間くらいでなんとかそこまでと思っていましたが、今のペースを考えると何とか今月中にはといったところでしょうか。これが何とか3月まで中には、そして何とか夏までにはとならないことを祈ります。しかし、歩みが遅いのは重々自覚していますが、それを歩みを止める理由にしないよう、再三再四自分に言い聞かせていきます。
今回はブラウザ上でgoogle mapを表示し、クリックした地点にマーカーをつけると同時にその地点の緯度経度の数値を取得することができるようになった。また、現在の位置情報を取得してその緯度経度を表示できるようになった（GPSを利用した精度の高い環境で実行していないのでまだ問題はありそうだが）。
しかし、一見簡単そうな場所で躓く。現在躓いている地点は以下の二箇所。
・取得した緯度経度から、日本語の住所を表示させる
・一度ある地点をクリックした後に別の地点をクリックした場合、前の地点につけたマーカーは削除する
始める前は、非常に簡単だと思っていた。しかし、これがなぜだか上手くいかない。処理したと思うと、なぜかgoogle map自体が表示されなくなったり、新しくクリックした地点にマーカーが置かれなかったりといった不具合が発生してしまい、あれこれ改善を試みながらもうまくいかないまま1時間以上経過してしまった。
基本を無視して検索エンジンを使って見つけたコードのコピー＆ペーストで突き進んできたために私の基本的なJavaScriptおよびAPIへの知識が足りないためにしている苦労だというのは分かっているのだが、だからといって歩みを止めることはできない。多分ここで立ち止まって基本の勉強だけに逃げてしまったら、このプロジェクトはおそらく頓挫するであろうという確信があるからだ。
とりあえず直近の目標はこれらの課題をクリアすること。そして、それができたら次は取得した緯度経度のデータから条件分岐を行い、それに従って何種類かのテクストを表示させることに挑戦するつもりだ。
本プロジェクトにはいくらかのプログラミングの知識が必要である。
私は基礎知識として、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分ほどかかった。だが、そこさえ気づいてしまえば後は緯度経度と縮尺を変更するだけで目標の地図を表示できるので非常に便利だと感じた。コードを読む限り、目標地点を地図の中心以外にして表示することもできそうだが、それは今のところ利用する予定はないので気にしないでおく。
今後は、自分の位置情報を取得して特定地点に到達したかどうかを判定する技術を習得することが目標となる。将来的には、変数を利用することで特定地点への到達だけでなく、接近や離反の判定もできるようになることが求められる。
道はまだまだ長い。仲間も必要になるだろう。焦る必要はない。目的地に辿り着ける者の多くは、道程を楽しめる者なのだと自分に言い聞かせる。
