世界中の国旗をJSで条件絞り込みできるように頑張ってみた記録。

構図・色といった条件で入れていくことで世界中の国旗を絞り込みできるように頑張ってみました。
作成したページは以下です。

国旗を調べるページ

このページでは作成するに至った経緯と、作業のあれこれを書いています。

作成の経緯

2021年、緊迫するアフガニスタン情勢が気になり上記Flightradar24でカブール国際空港に出入りする飛行機を連日チェックしていました。

Flightradar24キャプチャ

飛行機が登録されている国は国旗アイコンが表示されるのですが、結構な割合で国旗を見てもどこの国だか分からないという自分の無知が露見。
JSの勉強も兼ねて条件分岐で絞り込めるページを組むか?と思い至りました。出来上がるまで結構時間がかかったというか間が空いてしまいましたが……。

実は同じようなサービスを提供しているサイトもあるのですが、自分で作らないと成長に繋がらないじゃないですか!!

絞り込む条件の定義

「条件で絞り込む」と書く分には簡単ですが、何の条件で、条件の種類・分類は?等々、きちんと整理する必要があります。
まずExcelにABC順に国家リストを並べ、後述する各条件をExcelにまとめていきました。とてもとても地道な作業です。

国家リスト

政治的配慮も絡んでくるのでどこからどこまでを国家と見なすか正直難しい。
NHKのオリンピック特設ページの「国・地域名から探す(ABC順で探す)」を基本的に参考にしました(その後非公開になりました)。
これに自治区などを追加して、計204カ国としています。
(スコットランド、ウェールズ、グリーンランドなど入ってないことに気付きました。増やさな)

国名

正式名称だと長くなってしまいます。それに「グレートブリテン及び北アイルランド連合王国」より「イギリス」の方が通りがいいですよね。
というわけで略称表記を採用。

構図

世界中の国旗をざーっと見て、大まかに構図を分類します。
真ん中にどーんとあれば「日の丸」構図としようと思いましたが、図案の日の丸と混乱する可能性があるので、シンプルに「中央」としました。

水色、紺色も青に、赤茶色は赤に分類。オレンジは分けました。
紋章の中に細かく入っている色は無視。
ぱっと見、明らかに含まれている色をカウントすることに。

図案

何を「紋章」と認識するかの定義が難しいです。学術的な知識が必要になってきます。
よくよく見ると星とか植物が配置されているなんて場合は、それぞれの分類に含めず「パッと見て明らかに星ですとか植物です」で分類。
「何か」という条件を作り、「何らかの図案が含まれている」として対応できてるかなぁ?

地域


こちらの分類だとちょっと細かいので、「アジア」「中東・中央アジア」「ヨーロッパ」「アフリカ」「北米」「中南米」「オセアニア」で分類。
「中央アジアの範囲は」「東ティモールとパプアニューギニアが別エリアとかおかしくない?」「ロシアはヨーロッパ・中央アジア・アジアを網羅しているのでは」とか考え出すとキリが無いため、細かいことは考えないようにして分類。

自分でも使える絞り込みのJavaScriptを探せ!

ソート・絞り込みはJavaScriptで実装。
検索しては、アレンジができなくて諦めたり、複数条件で絞り込む仕様ができなかったり、望み通りのJavaScriptの解説をした技術系ページがないかWWWを旅します。

最終的に技術系サイトの老舗、株式会社TAMさんのサイトを参考にさせていただきました! 解説が丁寧で助かりました🙇‍♀️

Excelのデータをまとめて、HTMLに条件やテキストやリンクをせっせと貼っていく

地道 of 地道

ここが一番時間がかかりました。
Excelマスターなら前セクションでまとめたExcelデータからHTMLを吐き出すよう組めるはずですが、Excel初心者なので手作業でせっせとHTMLに条件を設定していきました。またもや地道な作業です。
データとコード、要はテキストだけを204カ国分見つめ続けるため、目が滑る滑る。貼ってはExcelの該当セルに背景色を付けるなど目印を付けながらの作業でしたが、それでもチェック時にまとまってミスっている箇所を発見したり。
確認作業も地道です。。さすがに自分で作業して自分で確認という手はやめます。ミスった本人が自分のミスには気付かないものです。元同僚にチェックをお願いしました。

国旗の画像データを書き出す

Shutterstockで世界中の国旗がひとまとめになってる素材を購入しました。素材に含まれていない国や自治区もありましたが、ラッキーなことに簡単な形状だったためそれは自分で作図。
この購入した素材の色味が若干彩度強めだったので、ほとんどの国旗の色味を修正対応しました。さらによくよく見ると、イタリア国旗が左右反転していたり、トルコの月と星のバランスが悪かったり、ところどころで罠がありました。
アフガニスタンのように最近政権交代が発生した国は国旗が変わっていますが、それには未対応です。

国旗のベクターデータをAIで色調整→PSDでサイズ調整→PNG書き出し……してから、Wikipediaで基本的に国旗はパブリックドメインでダウンロードできることに気付きました。ま、一々それぞれの国旗データをダウンロードするのも手間なので、素材でまとめられていた方が早かったのかもしれません。

ここまで来ると、ページを表示したときに各国の国旗が賑やかで完成が近づいてきている感もあり、作業スピードもノってきました。

進捗状況が目に見えると俄然ヤル気が出る

できたページはこちら

国旗を調べるページ

頑張った! 褒めて!(間違ってる箇所を見つけたら、ご指摘お願いします🙇‍♀️ )