サイトをアップデートした。
夏休み(お盆休み)を使って😓😓
これで5回目のアップデートとなる。ver0.5。
そんなMappingサイトはこちら。
バグ的なところから、改善が必要なところまでいろいろあるけど、仕事をしながらの開発なので、進みが遅いのは許してほしいでゴンス。すいません。
この記事までにやったことは以下。
✅駅を検索して、その場所に地図を移動できるように更新
✅レストランと観光地アイコンのデザインを変更
✅小さな更新
- 証明書の更新
- Hotpepper APIを使用しなくてもよいようにする
- 観光地の文字化け解消
- A8Netのリンクを貼る
特に「駅を検索して、その場所に地図を移動できるように更新」と「レストランと観光地アイコンのデザインを変更」はデザインの結構大きな変更。
今回のアップデートによる変更
駅を検索して、その場所に地図を移動できるように更新
駅を検索してその場所に地図を移動できるようにした。
以下のような感じ。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/駅移動.gif)
結構な力作です。
レストランと観光地のアイコンのデザイン変更
レストランのアイコンと観光地のアイコンを幾つか画像に変更した。
同じアイコンだとパッと見分からないから。
例えばレストランの居酒屋のアイコン。提灯をモチーフにしている。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/hotpepper_izakaya.png)
観光地のキャンプのアイコンは以下のような感じ。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/camp.png)
画像は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マジ神
小さな変更
証明書の更新
証明書の期限が切れていた。ページにアクセスすると以下のようになっていた。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/08/image-4.png)
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のキーを入力しないといけない仕様にしていた。(以下のような感じ)
![](https://apao-m-appare99999.com/wp-content/uploads/2023/08/image-17-1024x263.png)
でも、それを無くした(以下のような感じ)
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/image-1024x213.png)
観光地の文字化け解消
インターネット上に公開しているサービスを使ってみて気づいた。
文字化けしているやないか!!
![](https://apao-m-appare99999.com/wp-content/uploads/2023/08/image-6.png)
ローカルで検証したときは文字化けしていなかったので気づかなかった。(以下はローカルでの様子の画像)
![](https://apao-m-appare99999.com/wp-content/uploads/2023/08/image-5.png)
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へインポートしたら、直った(以下)
![](https://apao-m-appare99999.com/wp-content/uploads/2023/08/image-16.png)
こういう事象もコンテナ化してパッケージ化していれば起きにくいだろうなぁ。
A8Netのリンクを貼る
サービスを運用していくと現在はさくらインターネットさんのVPSを使用しているため、お金がどんどん外へ出ていく。
つまり、サービスで利益を出さないといけないわけだけど、今回はA8Netさんのリンクを貼ることで収益化できないかを試してみる事にしてみる。
当初はGoogleアドセンスを貼り付けてみようとしていたけど、審査に通らない…。😫😫
審査に通るレベルのサイトまで構築していてはお金がどんどん流れていくので、今できることをしようと思った。
で、A8Netさんの広告を貼らせていただくことにした。
このサイトと一緒に使えるサービスの広告などを貼っていければいいなと思っている。
投稿者あとがき
先日、群馬県の前橋の方に軽い旅行に行った(一泊二日)。
その際に、この自分で作ったWebサービスを使おうとしたが使いづらく、結局ネット検索とGoogleマップに頼った。
このサイトは決して天下のGoogleマップに挑もうとはしていない。
そこは勝ち目が無いのは分かっている。
だからGoogleマップと並行で使えるツールを目指したいと思っている。
このサービスの本来のテーマは変わらず「日常の景色を変えるためのコンパスとなるサービス」。
その実現に向けて、実際に旅行しながら使いつつ、アップデートしていきたい。
最後に前橋に行った際に立ち寄った臨江閣の別館大広間の画像を載せてこの記事を終えようと思う。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/PXL_20230817_015528769-1024x771.jpg)
あと、茶の間の外観も。
![](https://apao-m-appare99999.com/wp-content/uploads/2023/09/PXL_20230817_021222892-1024x771.jpg)
僕も使っている、SakuraのVPSサーバー。この記事のサービスもこのVPSサーバーで動いています。👇
![](https://www18.a8.net/0.gif?a8mat=3T4IPY+CLOBQQ+D8Y+CC3NL)
ドメインはこちらでも取得可能!👇
![](https://www13.a8.net/0.gif?a8mat=3BI8OI+A4E2A+50+2HM5Z5)