「TZN'EXのアイ」はじまります

ご無沙汰しております。TZN'EXです。
これまで「平日枠」として私が仕事等を通じて思うことを綴った話題について、新たに「TZN'EXのアイ」としてお送りすることにします。

…元ネタは「宇野バスのアイ」で、私がそれを読んで宇野社長の考えに感銘を受けたからです。
www.unobus.co.jp

それはさておき、第1回は私のWebサイトの歴史について。

ーーーーー

私はこのブログの他、下記のWebサイトで趣味である鉄道、バスの写真や好きな街である静岡県沼津市の風景写真などを公開している。
TZN'EX CHRONICLE

このサイトには私の様々な思いが込められているが、現在に至るまでの歴史をこの機会に振り返ってみようと思う。

黎明期(2000年~2004年)

Webサイト自体は遡れば大学時代の2000年にジオシティーズにて開設していたが、当時はCSSJavaScriptに関する知識などなく、今思えばいかにもインターネット黎明期のデザインだった。背景色が青一色とか(笑)。ジオシティーズのサーバ容量の関係上、2004年にインフォシークへ移転している。東京の会社に就職した時期とほぼ一致する。インフォシークへの移転を期に雑多なコンテンツを整理し、鉄道写真と風景写真に絞った「Train & Scene」というサイト名にした。
余談だが鉄道コーナーのタイトルは「TЯAIN!」で、これは当時握手会や撮影会に行くほど入れ込んでいた某グラビアアイドルKさんの写真集「TЯAP!」をもじったものであった。当時の私は曜子推し、今は「子」が取れて曜推し(笑)

若手社会人時代

社会人2~3年目のときWebアプリの開発にかかわることがあり、その際に得たCSSJavaScriptの知識を取り入れていく。
とは言え、JavaScriptはトップページに表示する画像を何枚かの中からランダムに表示させるための用途でしか使用していなかった。

インフォシークが無料ホームページサービスを2010年に終了することとなり、当時は仕事が忙しく更新する余裕もなかったことから、サービス終了と同時にWebサイトも自然消滅してしまった。HTML等のファイルはしばらくメディアの中で眠ることになる。

仕事でAngularJSをやることに。でも知識ゼロ…

転機となったのは岡山に帰って5年経過した2016年。
業務で東京時代以来のWebシステムの開発に関わることになるが、フロントエンドは当時まだ第一線だったAngularJSであった。WebアプリはStrutsで時代が止まっていた私は当然知識ゼロ。

Step! ZERO to ONE

でも「できません」では許されん。勉強してやるしかない。AngularJSの技術書も自費でAmazonから取り寄せた。業務上必要と会社に言えば買ってもらえ、借りることができるのだが、前職で新人だった頃に先輩から「技術書は自腹で買うべき」と教えられていたのであえて自前で用意した。とはいえ、ただの教科書的な勉強じゃつまらん。何かええ方法はないんか。ある日こんなことを思いついた。

「過去に作った鉄道写真のホームページをAngularJSで作り変えりゃいいんでは?」

そして、試行錯誤を重ねてどうにか動くものが作れた。(AngularJSの知識が)「0から1へ」歩みを進めた。
後にVue.jsに触れ、やがてすべてそれに統一されることになるのだが、Vue.jsに比べてAngularJSはとっつきにくかった覚えがある。

1からその先へ

いきなり盛りだくさんの機能は作れるわけがないので、最初は最小限必要な機能だけ作り、後々自分が欲しいと思った機能を少しずつ実装していく。ある意味セルフアジャイル開発なのかもしれない(笑)。

公開対象の画像パスなどをJSONに保持して、それを読み込んだ結果を配列に持つやり方は現在に至るまで変わらないが、当初は「<」ボタン、「>」ボタンを設置して、それぞれ画像を1枚ずつ戻す、送る(プログラム的に言えば配列の添字を1つ戻す、進める)ように表示していた。ニュースサイト等でよくある仕組み。

けれどもそれだと画像が少なければいいが、20枚、30枚、さらに100枚…(実際に今ではページあたりの枚数が100枚超のものが普通にある)となってくると後ろにある画像はボタンを何回も押さないと見られない。これは不便ということで、配列の内容をプルダウンに持たせ、表示したい画像を選択するよう変更した。このとき現在に至る基本が出来上がった。

(長くなるので次回以降に続く)