ある日Twitter(Xと言ったらあっこ, つのつのに怒られる)を見ていたら、大阪電気通信大学の鉄道運行状況ディスプレイのツイートが流れてきて、これ作りたい！となり、バス運行状況の開発をスタート。最初は、昇降口付近にディスプレイを設置することを検討していたため、デスクトップ版アプリを1週間で開発。校長室に提案しに行ったところ、即GOサインが出た(嬉しかった)。

　情報の先生に技術的な相談をしに行ったところ、こちらも即GOサイン(嬉しかった)。話し合いを重ね、昇降口前にディスプレイを設置するのは色々問題があることがわかり断念。代わりに、職員室前のデジタルサイネージに運行状況を掲載することになった。

　だが、友人の「そんなとこに設置しても誰も見ねえ」という一言がきっかけでiPadでも見れるようにweb版の開発をスタートした。web版の開発にはHTMLとCSSの知識が必須となるが、やにけにその知識はなかった。そこで、HTMLができるつのつのの存在を思い出し開発に誘った。同時にあっこも開発に誘い、3人での開発がスタートした。web版は開発を開始してから5日ほどで完成した。

　最後にこの場をお借りして、この企画において快く承諾してくださった校長先生、親身になって相談に乗ってくださった情報科の先生、そしてアイデアを出してくれた友人に感謝を申し上げます。

　2026年4月に本サイトを再作成した。構成はNext.js + Tailwind + Vercel。

　初代バス運行状況サイトはPythonを用いたが、今回はNode.js(TypeScript)を用いている。Pythonを使ったウェブアプリ作成が技術的に古くなってきたことに加え、やにけのスキルアップも兼ねて、Next.jsという最新技術を用い、このサイトを1から作り直した。

• Next.js：表示が速く、モダンなWebサイトを簡単に作れるツール
• TypeScript：JavaScriptという言語に「型」という概念を追加したやつ。JavaScriptとJavaは全くの別物だよ！
• Tailwind：CSSを使わずに、Webサイトの装飾ができるとても便利なやつ
• Vercel：Webサイトを簡単に公開できるやつ。サーバー管理の手間がなくなるのでとても楽。

　言語は全てPython。requestsでサイトから情報を取得し、BeautifulSoup4でのHTML解析や、JSON解析を行っている。データを処理し一度JSONファイルとして保存したあと、Flaskを利用したウェブサイトを作成。CSSやJavaScriptを使用し、ライト/ダークモード機能や現在時刻をリアルタイムで更新する機能を盛り込んでいる。また、本サイトはPWAに対応している。本番環境には外部のレンタルサーバーを使用している。

　開発はVScodeで行っており、Githubで管理している(公開はしていない)。やにけのPCを自宅で起動させ、あっことつのつのはVScodeのLiveshareという拡張機能を利用して共同編集を行っていた。またTailscaleというサービスでVPNを繋ぎ、開発環境のウェブサイトにアクセスしていた。

• HTML：ウェブサイトを構成するためのもの
• CSS：HTMLで構成されたウェブサイトを装飾する(色をつけたり、余白を付けたり)
• JavaScript：プログラミング言語の一つ。HTMLで構成されたウェブサイトに動きをつける(ライト/ダークモードの変更など)
• Python：プログラミング言語の一つ。データを処理する部分に使っている
• PWA：ホーム画面に追加したら、本物のアプリっぽくなるやつ。プッシュ通知とかもできるらしい

• バスの到着時間は遅延も反映している。
• 間に合うかどうかは昇降口からの目安である。
• 情報は30秒毎に取得しているため、いくらページをリロードしても意味がない。
• ライト/ダークモードは前回のサイト訪問時から1時間以内は同じ設定が適用される。1時間以上が経過していた場合は、システム設定が適用されるよ。
• "E"キーでメニューが開き、"D"キーでダーク/ライトモードが切り替わる。"E"キーでメニューが開いた後、"tab"キーで選択、"enter"キーで決定できる。よって、画面をタップしなくても全ページを閲覧できる。これは便利。
• ボタンにカーソルを合わせたら、本物のボタンのようにボタンが浮き沈みする。
• 鉄道運行状況ページの京急の鉄道コードのアイコン画像(KK)だけは自作である。パワポで作った。
• ボタンのデザインモダンだよね。ChatGPTに任せたの。
• バスや、電車のドット絵(歴代開発者ページに掲載)はsvg(ベクター画像)なので、いくら拡大しても画質が劣化しない。
• アイコン画像やドット絵にはキャッシュを設定している。2回目以降のアクセス時は、サーバーまで取りに行かずに端末に保存されている画像を使うから読み込みが速くなるよ！
• あっこは変態
• つのつのは...これもうわかんねぇな
• やにけはかなり変態、しかもむっつり（筆：友人）

以下のデータ元を使用しています。

• 相鉄バスナビ
• 神奈中バスロケ
• 公共交通交通オープンデータセンター
• 各鉄道会社サイト

　と題したものの、プログラミングをやりたいとは特に思ってない人にも、僕の考えを共有できればいいなと思います。※あくまで個人的な意見です。

　僕がプログラミングを始めたのはDiscordのbotを作りたかったからでした。中1の時にDiscordを使い始めて、その後Discordサーバーの管理をするようになり、管理の自動化や、荒らし対策のためのオリジナルbotを作りたいと思い始めました。色々調べてみると、Pythonが初心者にオススメだということを知り、Pythonの学習を始めました。

　僕は目的を持ってプログラミングの勉強をした方が良いと思っています。言い換えると、作りたいものがあるからそのためにプログラミングの学習をする、ということです。将来お金をたくさん稼ぎたいから、みんなやっているから、という理由だと正直学習が続かないと思います。続いたとしてもつまらないと思います。（情報の授業でのPythonに関しては論理的思考力を鍛えるという意味ではいいと思います。）そんな大きな目的じゃなくていいんです。勉強用のタイマーを作りたいから、じゃんけんゲームを作ってみたいからなどなど、なんでもいいので目標を持ってみたらいいと思います。

　僕が通ってきたプログラミング学習ルートについて。Paizaラーニングの『Python3入門編』という完全無料のPython講座をひたすらやってました。動画を見て、演習問題に取り組むという形になっています。プログラミングを全くやったことがない人向けに丁寧に解説されています。動画を見て演習問題に取り組む中で、わかんないところがあったらChatGPTに聞く、を繰り返していけば実力は付いてくると思います。(実際僕もChatGPTに頼りまくった。)

　初代バス運行状況をリリースしてから早1年半が経過しました。今も使い続けてくださっているようで、とても嬉しいです。ありがとうございます。今までも細かい不具合修正やデザイン変更を行ってきましたが、この度新しい技術を用いて1からサイトを作り直しました。

　正直に言えば、これまでのサイトでも「バスの時間を表示する」という目的は果たせていました。それでもあえて全てを作り直したのは、現状に満足せず、より使いやすく、より質の高いものに挑戦したかったからです。一度完成したものを壊してゼロから作り直すのは勇気がいりますし、手間もかかります。しかし、その過程でしか学べないことや、新しく見えてくる工夫がたくさんありました。

　さて、このサイトを見ている中高生の皆さんに伝えたいことがあります。それは、「違和感や不便を放置しないでほしい」ということです。

　このプロジェクトが始まったきっかけは、「バスの時間がわからない」という小さな不便と、それに対する「だったら作ればいいじゃん」という単純な思いつきでした。学校生活の中には、まだまだ「これ、もっとこうなればいいのに」という隙間がたくさん転がっています。

　プログラミングに限らず、何かを作る力を持つということは、自分の周りの世界をほんの少しだけ自分たちの手で書き換える権利を持つということです。大人に用意された環境をただ消費するだけでなく、自分たちの「あったらいいな」を形にしてみてください。

　もちろん、最初は失敗もするし、友人から「そんなとこに設置しても誰も見ねえ」とツッコまれることもあるでしょう。でも、そこで試行錯誤した経験は、テストの点数よりもずっと皆さんの血肉になります。

　このサイトが、単にバスの時間を調べる道具としてだけでなく、「自分たちでも何か作れるかもしれない」と思ってもらえるような、一つのきっかけになれば幸いです。