「Mappingサイトを更新した！Update ver 0.5へ」開発者の開発者による開発者のための記録 #11

サイトをアップデートした。

夏休み（お盆休み）を使って😓😓

これで5回目のアップデートとなる。ver0.5。

そんなMappingサイトはこちら。

バグ的なところから、改善が必要なところまでいろいろあるけど、仕事をしながらの開発なので、進みが遅いのは許してほしいでゴンス。すいません。

この記事までにやったことは以下。

✅駅を検索して、その場所に地図を移動できるように更新

✅レストランと観光地アイコンのデザインを変更

✅小さな更新

証明書の更新
Hotpepper APIを使用しなくてもよいようにする
観光地の文字化け解消
A8Netのリンクを貼る

特に「駅を検索して、その場所に地図を移動できるように更新」と「レストランと観光地アイコンのデザインを変更」はデザインの結構大きな変更。

今回のアップデートによる変更
投稿者あとがき

今回のアップデートによる変更

駅を検索して、その場所に地図を移動できるように更新

駅を検索してその場所に地図を移動できるようにした。

以下のような感じ。

結構な力作です。

レストランと観光地のアイコンのデザイン変更

レストランのアイコンと観光地のアイコンを幾つか画像に変更した。

同じアイコンだとパッと見分からないから。

例えばレストランの居酒屋のアイコン。提灯をモチーフにしている。

観光地のキャンプのアイコンは以下のような感じ。

画像はmidjourneyを使用して作成している。

僕は有料版でサブスクしているので、商用利用可ということで使用することにした。（無料版（現在は廃止）は商用利用ができないらしいので注意）

このブログでもちょこちょこmidjourneyで作った画像を使っている。

midjourneyマジ便利

画像を作成したらアイコン用に加工している。

一つ一つ手作業でやるのは非現実的なのでpythonで実装。

そのプログラムも載せておく。

import os
from PIL import Image, ImageDraw

# 画像を処理する関数
def process_image(input_path, output_path, output_icon_path, radius):
    # 元の画像を開く
    image = Image.open(input_path)

    # 画像のサイズを取得
    width, height = image.size

    # 中心座標を計算
    center_x = width // 2
    center_y = height // 2

    # 切り取る円の領域を計算
    crop_box = (
        center_x - radius,
        center_y - radius,
        center_x + radius,
        center_y + radius
    )

    # 出力用の新しい画像を作成（透明な背景）
    output_image = Image.new('RGBA', (2 * radius, 2 * radius), (0, 0, 0, 0))

    # 切り取った部分を新しい画像にペースト
    output_image.paste(image.crop(crop_box), (0, 0))

    # 透明な領域を描画（円の外側）
    mask = Image.new('L', (2 * radius, 2 * radius), 0)
    draw = ImageDraw.Draw(mask)
    draw.ellipse((0, 0, 2 * radius, 2 * radius), fill=255)

    # 透明部分を設定
    output_image.putalpha(mask)
    
    resized_image = output_image.resize((radius // 7, radius // 7), Image.ANTIALIAS)

    # 画像を保存
    output_image.save(output_path)
    resized_image.save(output_icon_path)

# 処理を行うディレクトリのパス
input_directory = 'src/'
output_directory = 'dest/'
output_icon_directory = 'dest_icon/'

# 中心からの半径を設定
radius = 280

# 入力ディレクトリ内の全ての画像ファイルに対して処理
for filename in os.listdir(input_directory):
    if filename.endswith('.png') or filename.endswith('.jpg'):
        input_path = os.path.join(input_directory, filename)
        output_path = os.path.join(output_directory, filename)
        output_icon_path = os.path.join(output_icon_directory, filename)
        process_image(input_path, output_path, output_icon_path, radius)

ちなみにこのコードはChatGPT様が教えてくれたもの。

ChatGPTマジ神

小さな変更

証明書の更新

証明書の期限が切れていた。ページにアクセスすると以下のようになっていた。

portの80番をnginxが使っているので、そのまま証明書を更新しようとすると以下のエラーが出るはず。

Failed to renew certificate appare99-system.net with error: Could not bind TCP port 80 because it is already in use by another process on this system (such as a web server). Please stop the program in question and then try again.

なので、nginxを止めて、証明書を更新して、nginxを再度起動するっていう手順をとる。

# systemctl stop nginx
# certbot renew
# systemctl start nginx

この更新、いちいち手動で対応する運用方法はあんま良くない。

scriptを用意し、cron実行の設定をして自動更新をする必要もあるね。

Hotpepper APIを使用しなくてもよいようにする

今までは現在地付近のレストランを探すにはHotpepper APIのキーを入力しないといけない仕様にしていた。（以下のような感じ）

でも、それを無くした（以下のような感じ）

観光地の文字化け解消

インターネット上に公開しているサービスを使ってみて気づいた。

文字化けしているやないか！！

ローカルで検証したときは文字化けしていなかったので気づかなかった。（以下はローカルでの様子の画像）

DBに入っているデータ自体が文字化けしとる…。

MariaDB [db_name]> SELECT spot_name FROM table_name LIMIT 5;
+--------------------------------------------------------+
| spot_name                                              |
+--------------------------------------------------------+
| 蛹玲ｵｷ驕灘､ｧ蟄ｦ讀咲黄蝨?                               |
| 譛ｭ蟷後ラ繝ｼ繝?                                        |
| 繧ｵ繝??繝ｭ繝薙?繝ｫ蜊夂黄鬢ｨ                            |
| 螳壼ｱｱ貂?                                              |
| 蛹玲ｵｷ驕灘､ｧ蟄ｦ邱丞粋蜊夂黄鬢ｨ                         |
+--------------------------------------------------------+

テーブルの文字コードを確認すると…

MariaDB [db_name]> show create table table_name \G
・・・略・・・
) ENGINE=InnoDB DEFAULT CHARSET=cp932 COLLATE=cp932_japanese_ci

cp932になっとるやないか…😓

tableの文字コードを変更しようとすると以下のエラー

MariaDB [db_name]> ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ERROR 1366 (22007): Incorrect string value: '\x81\xB6\xC2?-\xC2...' for column `db_name`.`table_name`.`genre` at row 1

対象のテーブルの中身を一旦、空にしたらエラーは解消（空にする際は周りの人に許可を取ることを忘れずにね！）

MariaDB [db_name]> truncate table table_name;
Query OK, 0 rows affected (0.008 sec)

MariaDB [db_name]> ALTER TABLE `table_name` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
Query OK, 0 rows affected (0.011 sec)              
Records: 0  Duplicates: 0  Warnings: 0

DBの文字コードもcp932だった

MariaDB [db_name]> show variables like 'character%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8mb3                    |
| character_set_connection | utf8mb3                    |
| character_set_database   | cp932                      |
| character_set_filesystem | binary                     |
| character_set_results    | utf8mb3                    |
| character_set_server     | utf8mb4                    |
| character_set_system     | utf8mb3                    |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.001 sec)

DBも文字コードを変更

MariaDB [db_name]> set character_set_database = utf8mb4;
Query OK, 0 rows affected (0.000 sec)

MariaDB [db_name]> show variables like 'character%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8mb3                    |
| character_set_connection | utf8mb3                    |
| character_set_database   | utf8mb4                    |
| character_set_filesystem | binary                     |
| character_set_results    | utf8mb3                    |
| character_set_server     | utf8mb4                    |
| character_set_system     | utf8mb3                    |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.001 sec)

再度データをDBへインポートしたら、直った（以下）