くま発見報告サービス的なものをつくってみた(Python+Django+Javascript+Bootstrap+Google Map API)
いくつになっても勉強じゃ
ちょっとまえに８０歳過ぎと思われる女性が「私がこれから起業しようとしても別に普通でしょ？」とカメラに向かって語りかけるCMがあった。内容はうろ覚えだけどいくつになっても新しいことをやればいいんじゃんってことだなぁと思い、なかなかかっこいいよなと思った。
まあそれからめてワシもだいぶ年齢的にはくたびれてきているけれど、新しいことをやってみるのは面白いと思ってるので、ここ最近はPyhtonをつかってちょっとしたプログラムを書いたりしている。ただ具体的な目的がないとカルチャースクール的な域を脱するには難しいだろうと考え、かつて仕事でお客さんに紹介していた「鳥獣被害の情報を管理するシステム」みたいなやつを作ってみようとしてやってみた。
ちなみにサイトデザインは人気のBootstrapを使ってます。
とりあえずJavascriptをさわってみる
PythonとDjangoをつかって簡単なWEBシステムはいくつか作ってみたりしてたんだが、今回はGoogle Map APIをつかったシステムにしようと考えたから、それにはどうしてもJavascriptを扱うことが必要。でも全くやったことがないので、グーグル先生に教えてもらいながら先人が残してきたコードを参考に（単純にコピペもして）手探り状態。特に情報をDjangoで作ったテンプレートからJavascriptにどんなふうに渡すかがよくわからず、２、３日悩んだりしたけど、突然の天啓でなんとか解決（それが正しいやり方かどうかわからんけど）したりと、とりあえずカッコがつくようなもんができましたよ。
Google Map APIについて
Google Map APIをつかう場合には、費用が発生するので（ただし1ヶ月$200までは無料。ちなみに1000アクセスあたり$7）作ったアカウントにクレジットカード情報登録が必須です。
それからアカウントを登録するとアクセス時に必要なAPIキーが発行されますが、こいつの扱いをどうするか。Google Mapの利用説明をみると基本APIキーは公開しないように大事に管理せよと書かれているんだけど、Googleに地図要求コードを送信するためのソースコード（HTML文)にはもろに書かれているので丸見え。で、どうしようかといろいろと調べてみたんだけど、結局はGoogle Map APIの管理側でアクセスサイトを制限したり、利用するAPI毎にコードを発行したりすることで、悪用を防ぐってのが一番簡単な対策ではないかと思われます。ほんとうは電文送信直前にコードを書き換えるやり方が良いんだろうけど、WEBサーバー側の設定を調整したりすることが必要で、pythonanywhereやherokuでは対応ができなさっぽいので諦めました。
実際どんなかんじか？
サービスの概要は次の通り
- スマホの位置情報と現在時刻を取得する
- 位置情報と時刻にコメント（くまがいる、フンを見つけた）を追加して送信する
- 位置情報と時刻は変更可能（後で報告する場合の対応）
- アプリではなくWEBサービスとして提供
アプリとして提供しないのは、アプリをダウンロードしていないと使えないのであれば緊急時に役に立たないことと、アプリの公開ではカネと時間がかかってめんどくさいからです。もちろんスマホアプリの作り方がよくわからないのと、iOS,Android両方作るのはめんどくさいというのもありますわい。
「誰でもどこからでもすぐに情報提供ができる」ということは、誰でもいつでもいたずらができるってことになりますが、その点についての対策は行っておりません。利用を制限することで使いづらくするよりも、誰でもいつでも簡単に情報提供ができることが、よりおおくの情報を集めることができるんじゃないかって考え方ですね。
で、今回のサービスは基本スマホから使うことを前提としているけれど、PCから使うこともできるから、現在のクマや鳥獣被害の情報収集方法として多くの自治体で使われている電話による連絡にも、連絡を受けた担当部署がPCからその情報をもとにデータ登録が簡単にできるので、画面や機能を多少見直せばそちらでも使えるかなと。（そのための位置情報と時刻が簡単に変更することができるようにしとります）
簡単なご紹介
では画面を貼り付けてみましょう
修正）いらすとやのかわいいクマちゃんよりも、同じく利用フリーのクールなクマのほうが良いと思い画像を差し替えました。また名前がちゃんとした英語の「クマに気をつけろ」とはなってなかったのでこちらも修正しますた。以下、すべての画面のタイトルと絵が変わります。
トップ
トップ画面の「ほうこく」ボタンを押せば報告画面へ飛びます。そのタイミングでスマホの位置情報を取得してます。「位置情報以外は取得しませは」などの注意書きはもっと詳しく個人情報取り扱いについての説明が読めるようにするべき。
報告
スマホの位置情報と現在時刻が設定されるので、現場から報告するならばこのまま「ほうこく」ボタンを押せば報告はおしまい。場所を移動してしまったとか、後で報告する場合には場所と時刻の変更が可能。コメントがあればここで登録するとデータとして反映されます。急いでるときや焦っているときにはコメントを省略してもオーケー。
場所変更
場所を変更したい場合、地図上をタップすれば位置指定ができるので、山の中でも海の上でも位置していはカンタンです。ここらへんの機能はさすがGoogle先生というべきで、これだけ便利な機能ならば有料も仕方ないかな。
登録情報参照
報告済みの情報を参照することもできますよ。
報告済み一覧（地図）
報告情報一覧を地図上にプロットした画面はPCのほうが（当然）見やすいね。自治体や組織側で登録管理する場合はこちらのイメージになりますな。
実際に利用例としては上の写真のようにクマ出没注意の看板にQRコードなどを表示しとけば、すぐに使えるのではないかというひとつのアイディアです。
なお、画面の位置情報、報告情報はテストでテキトーに登録したもので根拠はゼロです。
とりあえずこの頃は住宅街へクマが出没するニュースがいろいろと取り上げられているので、「クマ情報を報告する」的な内容にしてみたけど、サルでもイノシシでも害獣についても使える。写真を登録できるようにすれば利用方法がもっと広がるだろうから、次は写真登録機能の実装をしてみたいと思っとります。
そんなわけで現場からは以上です。
