作ったもの

作ったきっかけ、問題提起

個人開発というタグをつけるのもどうかと思うくらい、技術的には簡単なものなので、控えめに発表いたします。

五島列島とは、九州の左上（言い方）の長崎県に所属する島々です。ウィキペディアによると、152の島々からなるそうです。そんな島の国（言い方）に、今度旅行に行きます。２度目なんですけど。島ばかりなので、島と島を船で移動することが多々あるんですね。大きい島は大きいんですが、やっぱ島間を移動したくなる。

そこでググってみんながよく見るサイトがこちら。五島交通ナビ。（交通＝船の時刻表ということにちょっと驚き。）有名なのに見づらい見づらい。ほかのサイトも大体同じです。船はいつもこんな感じ。この見づらいことが問題です。

見づらい原因は、船の会社ごとに時刻表が並んでいて、複数の会社を跨いだ検索ができないためです。渋谷駅から東京駅へ行くときに「最初に路線を選んでください。そしたら時刻表を出してあげます」と言われる感じです。つらい気持ちになる。

ということで、fromの港と、toの港を選べば、時刻表をもとに検索してくれるツールを作りました。

ソースはこちら（大したことないけど）

動くサイトはこちら（herokuのため最初だけ重い時があります）

ちなみに五島のすべての港はこちら（25港！）

まず、五島交通ナビや五島最大手の九州商船のホームページを見て、すべての時刻表をJavaScriptに書き起こしました。

なにしろみんなフリーフォーマットなので、スクレイピングとかは絶対無理です。往路は左から右、復路は右から左に、tableになってたりとか。そういうのを目で確認しながらコツコツやりました。（おそらくミス＝バグもあるでしょう・・・）大体、５～６時間かかりました。

次に、JavaSciriptで配列をぐりぐり回して探す処理を入れました。大体３時間くらい。

最後に見た目を整えて完成。大体２時間くらい。

あんまりないけどこのままだと日記になるので少しだけ。

こんな感じで、マスタテーブルのような配列を作りました。

let PORTS = [{'id':1, 'name':'福江港'}, {'id':2, 'name':'奈良尾港'}];

IDを指定して、この情報を取り出す方法。

PORTS.find((mst_p) => mst_p.id==p["from"]);

うーん・・・しょぼいテクですみませんｗ
技術的にはそんなもんです。

技術的なレベルはさることながら、うれしい人は結構いると思うのです。次の朝ドラは五島みたいだし、リゾートホテルもオープンするようだし。
私自身の技術レベルも高くないので、ローテクだけどうれしい人がある程度いる、というところを、今後も攻めたいと思います。

あとこういうの、ちゃんと市とかまとめてる人たちが問題意識をもってやってほしい。（アドバイスしますよ！）

2022年8月に福江島(下五島)、中通島(上五島)へ旅行へ行ってきました！このツールやっぱ使えますよ。五島へ行く人は是非！

スマホ対応してなかったので、しておきました。

<meta name="viewport" content="width=device-width">

これを追記しただけですがｗ