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

TZN'EXのアイ

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

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

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

ーーーーー

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

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

黎明期（2000年～2004年）

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

若手社会人時代

社会人2～3年目のときWebアプリの開発にかかわることがあり、その際に得たCSSやJavaScriptの知識を取り入れていく。
とは言え、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枚超のものが普通にある）となってくると後ろにある画像はボタンを何回も押さないと見られない。これは不便ということで、配列の内容をプルダウンに持たせ、表示したい画像を選択するよう変更した。このとき現在に至る基本が出来上がった。

（長くなるので次回以降に続く）

ほぼ誰でも作れるcolorboxを使った画像の拡大講座

画像をクリックすると拡大されて表示される仕掛けのWebサイトを見たことがある人は多いと思います。
それを自分で実装してみたいと思い、いろんなサイトを参考にして実装しました。
今回はとりあえず動く最低限の仕組みをご紹介。これであなたも作れる（はず）。

【参考】
harublog-elpis.com

ファイルはCドライブの直下に「test」というフォルダでも作って、そこに置けばよいでしょう。

(1)画像を用意します。C:\testにコピーしてファイル名を「test.jpg」にします。

(2)以下のサイトからプラグインをダウンロードします。
www.jacklmoore.com

(3)ダウンロードしたプラグインのうち、必要なファイルをC:\testにコピーします。
・ダウンロードしたアーカイブのフォルダ「colorbox-master」直下に「jquery.colorbox-min.js」というファイルがあるので、これをC:\testにコピーしてファイル名を「jquery-colorbox-min.js」に変更します。
・さらに「example2」フォルダ直下のフォルダ「images」と、colorbox.cssもC:\testにコピーします。

(4)C:\test直下にテキストファイルを新規作成し、ファイル名を「test.html」とします。
ファイルをテキストエディタで開き、以下の内容で保存します。

<html>
  <head>
    <link rel="stylesheet" href="colorbox.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="jquery-colorbox-min.js"></script>
      <script>
          $(document).ready(function(){
              $(".ex").colorbox({rel:'ex'});
          });
      </script>
      <title>テスト</title>
  </head>
  <body>
      <h1>テスト</h1>
      <a href="test.jpg" class="ex" title="">
          <img src="test.jpg" width="800" alt="">
      </a>
  </body>
</html>

ファイル構成は以下のようになっているはず。

(5)C:\test\test.htmlをブラウザで開きます。

(6)画像をクリックします。

ね、簡単でしょ？

これを見ても動かないという人がいたらコメントください。

ただしこれはあくまでとりあえず動くものを作っただけで、必要なファイルは全部同じフォルダに置いていますが、
実際にWebサイトで公開する場合、ファイル構成はきちんとしておきましょう。

沼津帰省目録

はいはいはいはい。みなさん、こんにちは。TZN'EXです。
2021年11月以降の積んでいた沼津帰省の記録を一気にアップしましたのでまとめました。
大して面白くないでしょうが、お暇ならどうぞ。

2021年11月編

「オモウマい店」に登場したあの店に行きましたよ。
tznex.hatenablog.com
tznex.hatenablog.com
tznex.hatenablog.com
tznex.hatenablog.com

2021年12月編

冬コミサークル参加ついでの沼津帰省。
tznex.hatenablog.com
tznex.hatenablog.com

2022年4月編　その1

2020年3月以来2年ぶりにまた過酷な企画が始まる…
tznex.hatenablog.com
tznex.hatenablog.com
tznex.hatenablog.com
tznex.hatenablog.com

2022年4月編　その2

2週間後にまた帰省。きっしょ。
tznex.hatenablog.com
tznex.hatenablog.com

みんな悔しいのです　本当に悔しいのです

2020年12月～今年3月まで玉野で勤務していたけど、あまりいい思いをしていなかったので4月以降は玉野へ遊びに行く気持ちが正直失せていた。

4/23に一度行ってはいるものの、クルマで行く元気がなく電車で宇野駅まで向かい、萬福軒で食事してたまの湯で入浴してから「ラ・マル　せとうち」で岡山に向かっただけだった。

強いて言うならクルマ通勤から電車通勤に戻ったので、30分以上もクルマを転がすのが億劫になっていたというべきか。途中で山を越えるので実際の時間、距離以上に遠く感じるもの。

でもこれではまだ玉野と「和解」できていないなと思い、この日改めてクルマで出かけた。

この日限定の軍鶏のみそラーメン。軍鶏と味噌を合わせるとこんなに化けるのかと。


萬福軒で食事してから渋川へ足を伸ばした。5月なので鯉のぼりが立っていて思わずパシャリ。



1時間ほど海を眺めてのんびり過ごす。


玉野市街には地元出身のいしいひさいち氏による漫画がある。これは旧三井造船、現在の三井E&Sホールディングスのことを表しているのだろう。
船舶エンジンは三井造船の機械・システム事業を引き継いで分社化した三井E&Sマシナリーが強みとしている分野。
三井の艦艇事業は三菱重工に事業譲渡し、敷地外からも見える工場のクレーンは三井のMマークから三菱のスリーダイヤに変わり、地元民には衝撃的だったようだ。
実際に私もその姿を目の当たりにして、「うわー、まるで三井から三菱に乗っ取られとる…」と思ってしまった。

JIMO-AI Dash! ～2022 Spring～(5)

前回からの続き
tznex.hatenablog.com

3000系3506編成（渡辺曜バースデーヘッドマーク　DREAMY COLORバージョン）
3000系3506編成（渡辺曜バースデーヘッドマーク　DREAMY COLORバージョン）

ほい、ようやく晴れショットで曜ちゃんバースデーヘッドマークの撮影ができた。
富士山ともなんとか絡めることができてよかった。

7000系7502編成

おまけ。去年9月20日まで「Over the Rainbow号」だった7000系7502編成はラッピングがきれいに剥がされました。
3年前からがむしゃらに追いかけた日々が懐かしい。

3000系3506編成（渡辺曜バースデーヘッドマーク　DREAMY COLORバージョン）

これを撮影したら満足して、伊豆長岡から伊豆箱根バスで内浦へ。

お昼は千鳥海館でアジのたたきセット。





晴れの三津浜を眺めてのんびり。やっぱりこの景色が好き。

伊豆箱根バスで伊豆長岡駅まで戻ると偶然にも接続電が3506編成



帰りに沼津駅近くの八福で夕食。八福ラーメン、半チャーハン、餃子を食す。

帰りの新幹線でアイスクリームを食べるのは恒例行事（笑）

JIMO-AI Dash! ～2022 Spring～(4)

はい。というわけで曜ちゃんバースデーヘッドマークのリベンジのため、2週間ぶりのサンライズ瀬戸でございます。
GWということもあって当初は満席だったけど、乗車当日の28日朝にe5489を確認するとシングルに空きがあったので即予約。
しかも2階の進行方向右側なので対向列車がよく見えるし、網干総合車両所の様子もラウンジに出向くことなく自室から見られるのがいいですね。
e5489だとなぜか1階ばかりご用意されることが多い印象。

サンライズ瀬戸・出雲はこのように乗車の何日か前の時点で満席でも、当日にキャンセルが出ることもあるので諦めてはいけません。これはあの鉄道系YouTuberのスーツさんも動画でよく言っています。

とは言ってもこの日は3000系3506編成がもともと運休日で、しかもまた天気が悪いので沼津をぶらり。

五小南交差点の角型灯器は撤去され低コスト灯器に更新されていた…

丸勘でアジの漬け丼を久々に見たので食べた。ちなみに「ヨーソロー」は丸勘においてはご飯大盛り無料の呪文のようなもの、ラーメン二郎とかの「ヤサイニンニクカラメ」みたいなもんですね。これを「大盛りで」と言ってしまうと追加料金がかかるので注意。
店員さん「かき揚げはタレと塩のどちらにしますかー？」
私「両方で」
店員さん「おー、やるねー」

渡辺商店さんへ2週間ぶりの訪問。またアジの干物とワタナベーコンを購入。

内浦へ寄って松月さんへ。

雨だったのでそそくさと内浦から戻り、昼食は欧蘭陀館で食事してコーヒーを飲みながらのんびり。ファンの人が描いた曜ちゃんお誕生日記念の色紙と一緒に料理を撮ってみた



沼津駅に戻ると内閣サイバーセキュリティセンター（NISC）とタイアップした東海バスの「ラブライブ！サンシャイン!!」ラッピングバス5号車がいた。


反対側は引きが取れないのでアップで。千歌ちゃん。


梨子ちゃん。


果南ちゃん。


ダイヤさん。このダイヤさんめちゃくちゃかわいいですね。


曜ちゃん。



回送表示でもネタを仕込む東海バスさん素敵。

ツイートの時系列が前後するけどこの後グランマシーサイド店さんへ行って沼津まちあるきスタンプを押してきた。ついでに「富士千本」のチーズブッセも購入。グランマさんの富士千本は本当に美味しいので沼津へ行ったら買うべきですよ。

夕食は沼津港の松福でいつもの。今回はミニチャーハンにした。

曜ちゃんの誕生日から12日経過したけど伊豆箱根鉄道の限定旅助けはまだ残っていました。これでもれっきとした1日乗車券ですよ？

明日は天気が良いみたいなので、晴れショットが撮れることを願って。

＜つづく＞
tznex.hatenablog.com

JIMO-AI Dash! ～2022 Spring～(3)

有休を取っていたのでこの日まで沼津滞在。しかし3日間とも生憎の天気。こんなの初めて…じゃないか。
3年前のよしこ誕の時期（7/13～7/15）もまだ梅雨明けしてなくて晴れた日がなかったな。
なので伊豆箱根鉄道の撮影には行かず、沼津界隈をぶらり。

朝丸勘ずら。生しらす丼があったので迷わず注文。海老のかき揚げはタレ、塩半々で食べるのがまた美味しい。

313系8000番台＋211系

というわけで313系8000番台を撮影してから熱海往復。セントラルライナーは大学時代や社会人3年目ぐらいの時期に乗ったことがあるけど、当時はまさか静岡に将来転属するとは思わんかった。

313系8000番台の車内

もともと有料の定員制列車を主体に運用していただけあって車内は豪華仕様。ロングシート車が基本の静岡地区にあって異彩を放つ存在。

313系8000番台のセミコンパートメント

車端部にはテーブルを備えたセミコンパートメントがあり、空いていればこちらを利用するのもいい。

313系8000番台＠沼津駅

沼津で撮影したことが分かるよう駅名標を絡めて撮影。

グランマシーサイド店さんでのんびり。

長岡温泉で湯につかってきた。

ひかり521号で帰宅。エクスプレス予約のグリーンポイントを使ってグリーン車で。