NOT SO BADなブログ

Towards a not so bad world.

日本語で国名を選択できて、値はISOの国コードになってるいい感じのセレクトボックスを5分でお手軽に用意する

国を選択させたいこと、ありますよね。

セレクトボックスでは国名を表示させたいけど、値はISOの2桁国コードで保存したいってやつ。

もちろん国名は日本語で。

そんな状況がまた来たので、お手軽に5分で作れる方法を考えてみました。よければご活用ください。

経緯と方針

これ昔やってたときはRailsでgem入れたりしてたのです。

しかし今回はRailsを離れて素のhtml/jsで書いてたので、どうしたもんかなーと思いまして。

普通にライブラリとか探してたのですが、なかなかよさそうなのがない。

で探しているとこんな記事を見つけました。

miz2403.com

selectとoptionに国がずらっと入ってるやつが、テキストでコピペできるように用意されてます。

なるほど、よく考えればこれで十分じゃないかと。

国名なんてそうそうアップデートされるものでもないので、メンテナンス性はそんなに考慮しなくていいし。

逆にライブラリとか使わない方がメンテナンスフリーで運用にはよさそうかもしれない。

というわけで、ライブラリに頼らず生のHTML出力する方向ですすめてみます。

さっきのリンクだと英語版しかないので、これの日本語版を用意するのがゴールです。

やりかた

とにかく一回リストを作ってしまえばいいだけなので、いかに省力でいけるかがカギです。

Wikiの一覧ページをコピってスプレッドシードに貼り付ける

まずは日本語の国名とISOコードが一覧になった元データを探します。

Wikipediaにいい感じのページがありました。

ISO 3166-1 - Wikipedia

このテーブルの部分をまるっと選択してコピーして、スプレッドシートに貼り付けます。

もちろんお好みでエクセルを使ってもかまいません。

CONCATENATE関数でoptionタグを生成

次にこのデータから大量のoptionタグを生成します。

やることはめちゃシンプルで、スプレッドシードのconcatenate(文字列結合)関数を使って、いい感じにタグを作るだけです。

こんな感じ。

f:id:o_tomomichi:20171204144804p:plain

メインの部分は、

=CONCATENATE("<option value='",LOWER(E3),"'>",A3,"</option>")

で、E列がISO2桁のコード、A列が日本語の国名ですね。

今回はISOを小文字で使いたかったのでLOWER関数をかませてます。

この時点でもうほぼほぼできています。

最後の仕上げとして、元のWikipediaのテーブルに値が入っていない見出し行があるため、これを除外するようにIF文を追加します。

=if(E3<>"", CONCATENATE("<option value='",LOWER(E3),"'>",A3,"</option>"), "")

これでいい感じにoptionタグが生成されました。

あとはふつうにこれをコピペするだけで使えます。

超お手軽!


英語名の列もあるので、英語版への切替も簡単にできそうです。

おしまい。