MENU
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
プログラミングやサーバー設定など様々な内容を紹介しています。
HIROTRONの部屋
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
HIROTRONの部屋
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
  1. ホーム
  2. さどんでこプロジェクト
  3. 第1話:WordPressじゃ物足りない!?LINE✕鬼太鼓スタンプラリー開発のはじまり

第1話:WordPressじゃ物足りない!?LINE✕鬼太鼓スタンプラリー開発のはじまり

2025 6/25
さどんでこプロジェクト
2025年6月22日2025年6月25日

私は、友達の紹介でさどんでこプロジェクトのIT担当として様々システム構築などを行っています。今回、スタンプラリー作成でかなり大変だったということから、開発秘話をブログにまとめてみました。興味ある方ぜひ御覧ください。

Sadondeko Project
佐渡を楽しむ デジタルスタンプラリー – さどんでこプロジェクト 佐渡の伝統文化「鬼太鼓」をテーマにしたデジタルスタンプラリーです!両津港をスタート地点に、佐渡金山や大野亀などの主要観光地を巡りながら、各地で鬼太鼓スタンプを集…
目次

はじめに:地域の魅力をデジタルで届けたい

新潟・佐渡の伝統芸能「鬼太鼓」。この文化をもっと若い人や観光客にも楽しんでもらいたい——。そんな想いから始まったのが「鬼太鼓スタンプラリー」プロジェクトです。

初めは、WordPressを使って手軽にスタンプラリーサイトを作ろうと考えていました。プラグインで位置情報や地図を入れて、ページ上でスタンプを集めてもらえば良いのでは、と。

しかし、ここから思いもよらぬ開発の旅が始まるのでした。


WordPressは簡単だけど、自由度が足りない…

WordPressのスタンプ編集画面

WordPressには素晴らしいプラグインがたくさんあります。地図も表示できるし、フォームも作れるし、スタンプラリー風のシステムも「なんとなく」実現できそうでした。

でも、いざやってみると…

  • プラグインを入れすぎて、ページが重くなりすぎる
  • ユーザー登録のUIがあんまりよくない
  • 位置情報は手動で入力 等々

管理もしにくいし、特にスマホでの操作性が悪く、**「せっかく観光地で体験してもらうのにこれは無いな…」**と感じました。

プラグインは

  • GamiPress (スタンプ獲得機構をベース)
  • WP-Members (ユーザー登録)
  • Gianism (SNSログイン)

を使用しました。

また、位置情報認識にはJavascriptをゴリゴリに使用してやりました。

(自分はphpに疎くプラグインを作るのは断念していました)


LINE Botという選択肢:スマホに最適なスタンプラリー体験へ

そこで目をつけたのが LINE Messaging API と LIFF(LINE Front-end Framework)。

LINEならほとんどの人が使っているし、様々LINE Messaging APIを使用したLINE Botを作成していたのでこれなら行けると思いました。スマホに特化したスタンプラリー体験を、ネイティブアプリを作らずに提供できるのです。

「そうだ、LINEでスタンプラリーをやろう」

WordPressを使った“なんちゃってスタンプラリー”を捨て、完全オリジナルの仕組みを構築することを決意しました。

過去のLINE Messaging API 実績

GitHub
GitHub – hiroto121022/django-bento-system: 弁当の購入数及び合計金額をLINE Official Accountで管理する… 弁当の購入数及び合計金額をLINE Official Accountで管理するシステム. Contribute to hiroto121022/django-bento-system development by creating an account on GitHub.

友人たちとお弁当を契約しているのだが、各々注文日、注文数が違うので集金日に誰がいくらか計算が面倒だった、から生まれたLINE Bot。簡単にお弁当のお休みを登録でき、各々の料金も表示されるので、とても便利になった。

GitHub
GitHub – hiroto121022/Ski-Movie-LineBot: Google Driveにある動画をLINE Official Accountから参照できる… Google Driveにある動画をLINE Official Accountから参照できるシステム – hiroto121022/Ski-Movie-LineBot

コーチにスキーの動画を撮影してもらっているがその動画を共有する方法が確立されておらず、作成したLINE Bot。動画の拡張子がmp4なら良いが、mpegというスマホで再生できない形式だったので、それを変換してGoogle Driveにアップロードして共有していた。それを参照してLINEで見ることができる画期的なシステム。


鬼太鼓 × 技術の力で、佐渡をもっと面白くしたい

僕が目指したのは、ただの観光コンテンツじゃなくて、地域とテクノロジーが結びつく新しい体験。

  • 実際に鬼太鼓のスポットを回ることで、文化に触れる
  • 位置情報と連動してスタンプをリアルタイムに獲得できる
  • 獲得状況をスタンプカードで可視化して「自分だけの鬼太鼓マップ」に

これらを実現するために、LINE Bot × Django × Google Maps × イメージマップ…という複雑な構成になっていきました。

北沢浮遊選鉱場のスタンプの画像

こんなクオリティー高い絵を書いてもらっては、システム作成担当は頑張るしか無いですよ!!


次回予告:画像に仕込む魔法!イメージマップとスタンプの格闘記

次回は、スタンプカード上にスタンプを「ポチッ」とタップして押せるようにするまでの格闘をお届けします。

  • イメージマップとは何か?
  • どうやってスタンプの座標を計算したのか?
  • スタンプがズレてしまう原因とその対策

……など、LINE Messaging APIを巡るの泥臭い裏話をお楽しみに!


おわりに

「WordPressでやろうとしたけど、無理だった」

そんな経験から、LINE Bot × フルスクラッチのシステムへと舵を切ったこのプロジェクト。

やりたいことを諦めないために、自分で作る。

それがこの「鬼太鼓スタンプラリー」の原点でした。

次に続きます。

あわせて読みたい
第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記 私は、友達の紹介でさどんでこプロジェクトのIT担当として様々システム構築などを行っています。今回、スタンプラリー作成でかなり大変だったということから、開発秘話…
Sadondeko Project
佐渡を楽しむ デジタルスタンプラリー – さどんでこプロジェクト 佐渡の伝統文化「鬼太鼓」をテーマにしたデジタルスタンプラリーです!両津港をスタート地点に、佐渡金山や大野亀などの主要観光地を巡りながら、各地で鬼太鼓スタンプを集…
LINE友達登録でスタンプラリー開始!
さどんでこプロジェクト
LINE LINE Messaging API Wordpress さどんでこプロジェクト
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • MySQLバックアップ、インポート コマンド
  • 第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記

この記事を書いた人

hiroto121022のアバター hiroto121022

医学生でありながら、さどんでこプロジェクトのITリーダーを務めるフルスタック開発者。LINE BotやGPS連携スタンプラリー、NFT販売サイトなどをすべて独学で開発。使用言語はPython、Typescript、Javascript。Django、Next.js、Reactなどのフレームワークを駆使し、サーバー構築・デプロイ・SSL対応まで一貫して担当。AIによるアートのアニメーション化にも取り組み、伝統文化とテクノロジーを融合させた新しい地域体験の創出に挑戦している。

関連記事

  • 第4話:位置情報でスタンプ獲得!LIFFとLINE Botの連携の裏側
    2025年6月22日
  • 第3話:地図の中にスタンプ!?Google Maps × Django管理画面の作成
    2025年6月22日
  • 第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記
    2025年6月22日

コメント

コメント一覧 (4件)

  • LINE API × 鬼太鼓スタンプラリー誕生秘話②|イメージマップとスタンプ処理 - HIROTRONの部屋 より:
    2025年6月22日 8:10 PM

    […] […]

    返信
  • LINE API × 鬼太鼓スタンプラリー誕生秘話③ 座標管理とDjango管理画面 - HIROTRONの部屋 より:
    2025年6月22日 8:53 PM

    […] […]

    返信
  • LINE API × 鬼太鼓スタンプラリー誕生秘話④ LIFFとGPSでスタンプを獲得する仕組み - HIROTRONの部屋 より:
    2025年6月22日 9:57 PM

    […] […]

    返信
  • Django ✕ LINE Messaging APIでローディングアニメーションを出す方法 - HIROTRONの部屋 より:
    2025年6月25日 11:36 PM

    […] […]

    返信

コメントする コメントをキャンセル

hiroto121022
医学生でありながら、さどんでこプロジェクトのITリーダーを務めるフルスタック開発者。LINE BotやGPS連携スタンプラリー、NFT販売サイトなどをすべて独学で開発。使用言語はPython、Typescript、Javascript。Django、Next.js、Reactなどのフレームワークを駆使し、サーバー構築・デプロイ・SSL対応まで一貫して担当。
GitHub
新着記事
  • Django ✕ LINE Messaging APIでローディングアニメーションを出す方法
  • 第4話:位置情報でスタンプ獲得!LIFFとLINE Botの連携の裏側
  • 第3話:地図の中にスタンプ!?Google Maps × Django管理画面の作成
  • 第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記
  • 第1話:WordPressじゃ物足りない!?LINE✕鬼太鼓スタンプラリー開発のはじまり

© HIROTRONの部屋.

目次