「コーヒー好き.com」で世界50か国のコーヒー豆 生産国が分かる Googleマップ連携と銘柄ごとの国旗表示を実現

まず最初に今回『なぜコーヒー専用サイト「コーヒー好き.com」を立ち上げたのか』について簡単に触れておきます。

「なにごとも経験」ブログなのにコーヒーネタばかり

2015年から自宅でコーヒーを淹れて飲むことを始めました。せっかくなら美味しく淹れる方法を調べてみよう、といった内容のブログ記事を書いたのがはじまりでした。

「おいしいコーヒーのいれ方」解説と動画を比較

最初はまだスーパーでコーヒーの「粉」を買って淹れていましたが、徐々に「豆」をミルで挽くことを覚え、自家焙煎コーヒー豆のおいしさに目覚めたのです。

ハリオ コーヒーミル・セラミックスリム MSS-1B でコーヒー豆を手動で挽いてみました

するとコーヒー豆にもいろんな種類や世界中に産地があると知り、あちこちのショップで様々な国の銘柄を買うようになりました。

自宅で挽いて味わったコーヒー豆の生産地が 30か国を超えて分かったこと、感じたこと

それから約 8年が経過してコーヒーに関する記事だけで約 350本になり、買ったコーヒー豆の生産国は 50か国、銘柄数は 260に到達。われながらビックリです。

ベネズエラ産コーヒー生豆「ブラックハニー パラミート農園」で 50か国目(ワイルド珈琲ストア)

すると元ブログ「なにごとも経験」がコーヒーネタばかりになり、新たにコーヒー専門サイトを作って過去のコーヒー記事をまとめ、国ごとお店ごとに分類や集計して公開したくなったのです。

コーヒー専門のサイト名は「コーヒー好き.com」

せっかくコーヒー専用のサイトを立ち上げるなら「それらしいドメイン」があったほうが楽しいので、いろいろ探して決定したドメイン名がこちら。

coffeezuki.com

「coffee」は絶対に含めるとして専門家ではない趣味サイトなので名前も「プロっぽくない」ものにしました。

コーヒー好き.com

「.com」は大げさかとも考えたのですが「コーヒー好き」だけだとサイト名か何か分からないので「コム」は付けておきます。とりあえずロゴもこんな感じで十分かな。

アイコンもありがちなコーヒー豆のデザインをお得意(?)のパワーポイントで作成。

こまめな情報発信のため新たに「X(旧ツイッター)」のアカウントを追加。@coffeezuki はすでに使われていたので

@CoffeeZukiCom

勢いだけでコーヒー関連記事の移管と最低限の体裁を整えて 12月19日に公開。元ブログからゴッソリ記事がなくなったので「なにごとも経験」には、その旨の記事をアップ。

でも、記事を移管しただけだったので、それから約半月をかけてサイトに手を加え、以下の機能を組み込みました。

  • Googleマップのマイマップ機能で作った「コーヒー豆 生産国マップ」と連動
  • 自由に加工して公開できる世界地図データを使って「生産国マップ」を作成
  • 各記事の紹介画像に「生産国」「購入ショップ」タグと生産国の国旗を表示

以上の作業がひと段落したので、今回、この記事を書いているわけです。

Googleマップの「マイマップ」機能との連動

Googleマップの「マイマップ」機能を使って以前から「コーヒー豆 生産国マップ」は作成して公開していました。

このマップでは以下のことが可能です。

  • これまで飲んできたコーヒー豆 生産国 50か国の位置を世界地図上に表示
  • 各国の表示アイコンを生産国エリア別に色分けし、地図左の一覧で確認
  • アイコンをクリックすると「コーヒー好き.com」内の国別リンクを表示

これで Googleマップで生産国のエリア分けと各国の場所を確認でき、さらにマップ上をクリックすると、その国で採れたコーヒー豆一覧の表示ページが開きます。この「埋め込み」は Googleマップの公式機能で公開表示を許可されています。

適切な権利帰属を伴うコンテンツを、オンライン、動画形式、印刷形式で公開表示

ただし、Googleマップはサイトに埋め込んで利用できても、画像コピーして地図として加工する二次使用は許可されていないようです。

禁止行為。コンテンツをコピーすること。ただし、Google マップ、Google Earth、ストリートビューの使い方と許可に関するガイダンスのページ、または適用される知的財産法で許可されている場合を除く。

どうやら Google マップの使い方を示すためのコピーは許してもらえそうなので、サイトに埋め込んだ Googleマップを含めた当サイトの紹介には画面キャプチャーを使う予定です。

フリーの世界地図データで生産国マップを作成

そこで Googleマップをコピーしなくても自由に公開できる世界地図を作成できるフリー素材を探すと、パワーポイントで加工してネットでも公開可能な無料の白地図がありました。

さっそくダウンロードしてパワーポイントを使って Googleマップで作成した生産国の位置情報を移し替えました。

さらに Googleマップ上では表示が難しい「コーヒーベルト」も描いてみました。

できあがった世界地図を使って、早速、サイトの紹介画像も作成。

今後、世界地図の画像が必要なときは。これを加工して公開する予定です。

各記事トップに「生産国名」「店名」「国旗」を表示

さらにコーヒーの記事はどうしても「茶色」ベースで色的に地味ですし、コーヒーを撮影しても写真ではほとんど区別できません。ちなみに下は同じベネズエラの豆で左が「シティロースト」、右が「ハイロースト」。

そこで生産国のカラフルな「国旗」を画像に表示すれば見た目も楽しくなるだろうと考えたわけです。

もちろん世界地図に続き「国旗」もフリー画像を探してきました。

ダウンロードしてきた国旗の画像ファイルには番号が振っているだけで、ここから「生産国 50か国」の国旗を抽出して、それぞれの名前を国名にするだけでも大変でした。

一方で「この国の国旗はこれか」とか「この部分だけ違ってあとは同じデザイン」といった発見もあって楽しく作業できました。

そして記事ごとに「生産国の名前」と「購入したお店の名前」をタグ表示して、さらに「国名」に対応した「国旗」を自動で表示する仕組みを作ることにも無事に成功しました。

見るからにカラフルになって楽しくなったと自画自賛しています。

2024/1/16 その後、国旗付きマップを作成

まだまだ改善点は多いけど、ひとまずは完成

ほかにも「アコーディオンメニュー」を使って、これまでの銘柄を国別に分け、エリア別で探せるようにしました。

これで「ひとまず完成」として、この記事を書いているというわけです。

まだまだ改善したい点や追加したい機能もありますが、こればかりに時間をかけているわけにもいかないので、年内はここまでとしておきましょう。

とはいえ、かなりの力作です。私がこれまで飲んできたコーヒー豆自体に興味がない人でも、たとえば

コーヒー豆の生産国って「50か国以上」もあるんだ

この国の「国旗」って、こんなデザインだったんだ

といった興味本位で構わないので気軽にお読みいただければ、意外に楽しめる「かも」。

自宅で挽いて飲むコーヒー豆の生産国で 40か国を目指すときに残っている国は

さすがにここから 60か国を目指すのは厳しいですが、40か国のときも 50か国のときも難しいと言いながら、結局は到達したので分からないかもしれませんね。