Web ブラウザ上で動作する市民参加型写真収集アプリの開発と運用
Development and Practical Use of
A Web-based Participatory Photo Collection App
松田 裕貴 1,2 ∗ 河中 祥吾 1,3
Yuki Matsuda,1,2 Shogo Kawanaka1,3
奈良先端科学技術大学院大学 Nara Institute of Science and Technology
2
JST さきがけ JST, PRESTO
3
日本学術振興会特別研究員 JSPS, Research Fellowship for Young Scientists
1

要旨: 市民協働は，新たな街づくりのあり方として，様々な自治体において活発な取り組みがなされている．近年では，ICT と組み合わせることで地域の課題を解決する例も増えてきており，今後より注目されると考えられる．しかしながら，一般の市民が ICT を十分に活用できるようにするた
めには，まず手に取るための障壁を下げることが必要である．本研究では，市民参加型で写真を収集しオープンデータ化するという活動を題材に，Web ブラウザだけで動作する写真収集アプリを構築し，一般市民を対象としたイベントにて実際に運用を行った．本稿ではシステムの実装および運用を通して得られた知見について報告する．

1

はじめに新たな街づくりのあり方として，市民協働が様々な自治体において活発に取り組まれている．近年では，地域の課題を解決するために，ICT と組み合わせる例も増えてきており，今後より注目が集まると考えられる．
代表的な例としては，道路の破損・落書き・街灯の故障・不法投棄といった地域の課題を市民がスマホアプリによって報告することにより解決・共有するプラットフォームである，FixMyStreet1 が挙げられる．こうした，市民が自身の所有するデバイスを用いて「データ」を収集する仕組みは，ユーザ参加型センシング（以降，参加型センシング）と呼ばれる [1]．参加型センシング
は，街に広く点在する人々の力を借りることによって，街における広範囲かつ網羅的なデータ収集（桜の開花状況 [2]，夜間の街灯照度 [3]，街の環境雑音レベル [4]，大気の汚染状況 [5] など）を可能とする．
しかしながら，一般市民がこういった ICT を活用するデータ収集に参加する上で，専用のアプリインストールや煩雑な初期設定などが障壁となり，意欲ある市民の参加を阻んでしまうという課題がある．そこで我々は，一般市民がデータ収集システムに参加する上での障壁を下げ，多様な市民のデータ収集参加を可能にするため，おおよそ全てのスマートフォン端末にプリインストールされている「Web ブラウザ」に着目し，Webブラウザのみで完全動作する位置情報付き写真収集アプリを構築した．構築したシステムを用いて，市民参加型で写真を収集しオープンデータ化するという活動を題材に，一般市民を対象としたイベントにて実運用を行った．本稿では，システムの実装および運用を通して得られた知見について報告する．

2

関連研究

ICT を活用した市民協働として広く知られているのが，CivicTech（シビックテック）と呼ばれる活動である [6]．シビック（市民）とテック（技術）を掛け合わせた造語であり，市民が主体となって ICT などの技術を活用しつつ地域や社会の諸問題を解決するものである．
その活動は多岐にわたり，例えば地域のごみの分別方法やスケジュールを教えてくれるアプリである 5374 ゴミナシ.jp2 であったり，誰でも自由に使える地図（オープンデータ）を一般市民の手で作る OpenStreetMap3であったり，道路の破損・落書き・街灯の故障・不法投棄を市民がスマホアプリで写真・コメントとして報告することができる FixMyStreet1 であったりと，規模や目的は様々である．これらの活動に共通することは，∗ yukimat@is.naist.jp

2 http://5374.jp/

1 https://www.fixmystreet.jp/

3 https://openstreetmap.jp/

一般市民が自らの意欲・能力・時間をある目的を達成するために出し合い，自治体のみでは提供できないサービスを実現することを可能としている点にある．
こうした市民協働やシビックテックを加速させるための基盤として，市民が自身の所有するデバイスを用いて「街中のデータ」を収集する仕組みである参加型センシングの効果的な活用は不可欠である．筆者ら [7] は，様々な都市環境データを市民のスマートフォンのセンサ（カメラ，慣性センサ，環境センサ，GPS 等）によって収集するセンシングプラットフォーム ParmoSense を提案している．多様なセンサをサポートするため Android/iOSのネイティブアプリとなっているが，実際の一般市民を対象とした実験を通して，新規アプリのインストールや初期設定などが参加の障壁となっていることが明らかとなった．そうした参加の障壁を下げるため，Webシステムの形を採用したのが，坂村ら [8] が提案する
MinaQn である．MinaQn は，まちづくりに一般市民を巻き込む「市民参加型まちづくり」を実現するために，行政職員による運用・市民の参加が Web 上で実施可能な位置情報付きアンケートシステムとなっている．

3

Web ブラウザで動作する市民参加型写真収集システム

本稿では「市民参加型で写真を収集しオープンデータ化する」という市民協働の活動を題材とし，一般市民が利用可能な写真収集システムを提案する．前述の通り，新規アプリのインストールや煩雑な初期設定（パスワードの設定を要するユーザ登録など）は参加の大きな心理的障壁となることがわかっているため，本システムの設計にあたっては，下記の 2 つを要件として定義した．
要件 1 ユーザが既に有するアプリ上で駆動可能なシステムであること
ユーザが自身のスマートフォンにインストールし普段から使用しているアプリは，ユーザは使用方法などを既に知っていることが期待できる．そうしたアプリ上でシステムを実装することで，参加の障壁を下げられる可能性がある．例えば，Webブラウザ上に実装する Web アプリや，メッセージングサービス（LINE や Facebook など）に実装するチャットボットといった形態がこれに該当する．
要件 2 パスワード設定などの初期設定を最小限とするシステムであること
サインアップ・ログインが必要なシステムにおける「登録」は，ユーザが離脱するポイントの一つであることが知られている（フォーム離脱と呼ば

実世界

スキャン

①
QR Code

カメラ
アクセス

アクセス

①
URL

GPS
位置情報付き写真

Webアプリ⑤

記録

IDの自動再紐付

③

データ

収集データ

ユーザ情報
IDの自動生成

データベース

読込④

APIサーバ

ユーザ情報⑥

Webアプリデータ②

CookieWebブラウザスマートフォン

フロントサーバ

図 1: システム概要れる）．特にパスワードなど「覚えておかなければならない」項目については，ユーザに負荷を与えることが想定されるため，そうした設定を最小限に抑える工夫が必要である．
これらの要件を満たすため，あらゆるユーザのデバイスにインストールされており位置情報と写真データを紐付けて収集可能な環境である Web ブラウザを動作環境とする写真収集システムを設計する．システムの構成図を図 1 に示す．以降では，システムの動作を実際の使用の流れに沿って概説する．

1. ユーザは QR コードや URL，Web 検索などを介して本システムへと到達する．
2. フロントサーバでホスティングされている Webアプリが Web ブラウザ上に表示される．
3. Web アプリの利用を開始すると，ユーザ識別子（ID）が自動生成される．この ID は Cookie に保存され，再度 Web アプリにアクセスした際に，同じ ID が割り当てられる（自動再紐付）．
4. Web アプリで使用するニックネーム等を設定する際に，ID をサーバに登録する．
5. ユーザは，カメラ・GPS から得られる位置情報付き写真データを取得し，アップロードする．
6. 自身・他者がアップロードしたデータが Web ア
プリ上に可視化される．
本システムでは，Cookie を用いてユーザ情報をブラウザに自動保存・再紐付することで，サインアップ・ログインを要さない仕組みを実現した．

(ａ) トップ画面(ｂ) Webアプリホーム画面(ｃ) 写真撮影画面(ｄ) 撮影した写真一覧(ｅ) 地図上での可視化(ｆ) タイムラインでの可視化

図 2: 市民参加型写真収集システムの画面例
本システムのアプリ画面例を図 2 に示す．これらの画面例の通り，アプリのトップ画面（a），ホーム画面（b），写真撮影（c），データの可視化（d，e，f）の全ての機能が Web ブラウザ上で動作する．可視化としては，自身が撮影した写真を一覧に表示できる機能（d），自身・他者のアップロードしたデータを地図上（e）およびタイムライン（f）として可視化する機能を実装した．また，ユーザの関心・意欲を高めるための一般的な仕組みとして，データに対して「いいね」を付ける機能も追加実装した．
本システムの OS ごとのブラウザ対応状況について
表 1 に示す．Android は対応ブラウザが多く，GoogleChrome，Mozilla Firefox，Opera，Opera mini で正常動作することが確認された．Google App や Microsoft
Edge は機能としては問題なく利用可能であるがそれぞれ固有の問題があり，非推奨とした4,5 ．iPadOS・iOS
は，純正ブラウザの Safari 以外のブラウザにおいてカメラ機能（javascript の MediaDevices.getUserMedia()メソッドを用いる方法）がサポートされていないことから，使用不可であった．なお，図 1 に示すとおり，ユー
ザは URL を何らかの方法（SNS アプリやメールアプリな）で取得し本システムにアクセスすることが想定される．そうしたアプリ上で URL を開いた際に，同アプリ内で内部ブラウザ（in-app ブラウザ）が立ち上がり表示される場合が存在する．この場合，本システムを使用することは可能であるが，ブラウザ間で Cookie の共有ができないことから，毎回同じ in-app ブラウザで使用しなければならない状況に陥る．そのため，in-app
ブラウザは一律で本システムの動作対象外の環境と見なすこととした．
4 Google App： 画面左上に「×」ボタンが常時表示されており，押すと簡単にページが閉じてしまうことから，長時間使用するアプリを稼働させる際には誤操作の原因となりうる．
5 Microsoft Edge： 一部の画面が正しく表示されず，画面サイズによっては機能が制限される可能性がある．

表 1: OS ごとのブラウザ対応状況

OS（バージョン）

Android (10)iPadOS (13.3.1)
iOS (13.7)*a4ブラウザ
Google Chrome
Google App
Mozilla Firefox
Microsoft Edge
Opera
Opera mini
in-app ブラウザ
Google Chrome
Google App
Mozilla Firefox
Microsoft Edge
Opera Touch
Safariin-app ブラウザ

対応状況*a◯△◯△◯◯×××××◯-◯: 使用可能，△: 使用可能（非推奨），×: 使用不可，-: 対象外

ケーススタディ

奈良県生駒市の市制 50 周年記念事業の一環として，現在の生駒市内の様子を写真オープンデータとして未来に残すためのイベント「いこまの写真 de ぶら散歩6 」
において，本システムの実運用を行った．イベント期間は，2020 年 11 月 3 日〜12 月 6 日の約 1ヶ月間であり，期間内にユーザが随時参加していく形態となっている．ユーザに与えたタスクは，図 2 (d) に示すようにアプリが提示する 25 のお題（テーマ）に沿って，市内全域の任意の場所で写真を撮影し，位置情報・コメント付きで投稿するというものである．なお，同じお題は何度でも再撮影可能とした．ユーザには，本イベ
6 https://www.city.ikoma.lg.jp/0000023383.html

累積ゲストユーザ数（人）

累積登録ユーザ数（人）

累積ゲストユーザ数

経過日数（日）図 3: 累積登録ユーザ数・ゲストユーザ数の推移

写真アップロード数（枚）

累積登録ユーザ数

ユーザ（アップロード数順にソート）

図 5: アクティブユーザのアップロード枚数の分布

流入ユーザ数（人）

計結果を示したものが図 4 である．各媒体の名称は，「チラシ」は本イベントの宣伝チラシ，「いこまち」は全市民に配布される広報紙，「ぱーぷる」は日刊の情報誌，「市公式」は市が運営する Web サイト・SNS アカウン
ト，
「おちやせん」は市のアンテナショップ，「アプリ内シェア」は登録ユーザによる外部への共有（QR コードや SNS 投稿）を意味している．なお，紙媒体には QRコードが掲載されていた．図 4 から，多くのユーザは市の Web サイトおよび広報誌から本システムにアクセスしていることがわかる．Web サイトからのアクセスが多くなった要因として，別媒体で本イベントを知ったユーザがイベントの内容を確認するために市の Webサイトを訪れ，システムへと到達している可能性が考
流入元媒体えられる．今後は，流入したユーザがその後どのよう
図 4: 本システムへアクセスしたユーザの流入経路な行動をしたかなどの分析を行う必要がある．
また，登録ユーザ 277 名のうち，実際に写真をアップロードしたユーザは 97 名であった（以降，アクティントに貢献するインセンティブとして，与えられた 25ブユーザと呼称する）．アクティブユーザ毎の写真アッのお題を全て達成した後に，市の Web サイトより応募プロード数を示したものが図 5 である．オレンジ色ですることで景品が抽選で獲得できることを事前に告知
示す 23 名のユーザは，本イベントの明示的なゴールとしている．
して設定されている 25 枚の写真を投稿したユーザ（達以下では，イベントで収集されたデータおよび参加成ユーザ）であり，それ以外の緑色で示す 74 名は未達者の情報を分析する．まず，登録ユーザ（システムに成ユーザである．本イベントは，条件に基づきインセ登録したユーザ）およびゲストユーザ（システムに登ンティブが与えられる設定であるため，達成ユーザに録していない訪問者）の時系列での累積数を図 3 に示
おける 0〜25 枚の写真はインセンティブ駆動で撮影さす．各ユーザの分類は、前述のブラウザに記録されてれたものであると仮定される．しかし興味深いことに，いる Cookie 情報を用いることで識別を行った．最終的達成ユーザのうち 78%を占める 18 名は，インセンティに累積登録ユーザ数はイベント期間終了時点で 277 名
ブ発生条件の 25 枚よりも多くの枚数を撮影するというとなった．コンバージョン率（ゲストユーザ数がどの結果となった．これは，インセンティブとは別の内発程度システムへの登録を行ったかの割合）は，16.3%と的動機（例えば，「よりきれいな写真を投稿したい」「よなっている．なお，ゲストユーザ数は同一ユーザのアり多くのいいねを獲得したい」「イベントの趣旨に共感クセスを含むデータであるため，実際の割合はより高した」といったモチベーション）が生じていることをいと考えられる．
示唆している．この内発的動機付けのメカニズムを今次に，ユーザがどういった経路でシステムに流入す後の分析あるいは別の実験によって明らかにできれば，るのかを分析する．本イベントでは，各宣伝媒体に掲載されている URL に個別の媒体 ID を付与しており， より持続可能なデータ収集の仕組みを構築することに寄与する知見が得られると考えられる．
媒体毎のアクセス数を集計可能となっている．その集

謝辞

表 2: 全ての登録ユーザの属性

19 歳以下
20 代
30 代
40 代
50 代
60 代
70 代以上無回答
合計

男性71830468400113

女性
25016342412100148

その他
010100002

無回答
02020001014

合計
9714683
32161010277

表 3: アクティブユーザの属性

19 歳以下
20 代
30 代
40 代
50 代
60 代
70 代以上無回答
合計

男性
19817120038

女性
0175181111053

その他
000000000

無回答
010
2000
36

合計
1271337
1231397

最後に，本システムのユーザ属性について分析する．
表 2 および表 3 は，全ての登録ユーザ 277 名およびア
クティブユーザ 97 名をそれぞれ性別・年代の属性別に整理したものである．これらの表から，本システムは性別問わず非常に幅広い年代のユーザに登録・利用されていることが明らかとなった．これは市民参加型システムの抱える参加への心理的障壁を本システムが軽減可能であることを示唆している．しかしながら，本システムに関する市窓口への問い合わせの記録から，特に高齢層のユーザはデバイスやブラウザの使用に慣れておらず，依然としてシステムを使い始めるための障壁が存在することが明らかになっている．今後はこうした機器そのものに不慣れなユーザも参加可能とするための方策について更に検討をすすめる．

5

おわりに

本稿では市民参加型写真収集システムを Web ブラウザ上で動作可能なアプリとして実装するとともに，一般市民が参加する自治体と連携した実際のイベントにて運用を行った．分析の結果，本システムで採用した方式が，市民参加型システムへの参加の心理的障壁を軽減できる可能性が示唆された．今後は，システムの改良および大規模な実験による検証を実施する．

本研究の一部は，JST さきがけ（JPMJPR2039），および，JSPS 科研費（JP19K24345, JP18J23281）の助成を受けて行われたものです．

参考文献[1] Jeﬀrey A. Burke, D. Estrin, Mark Hansen, Andrew Parker, Nithya Ramanathan, Sasank Reddy,and Mani B. Srivastava. Participatory sensing.
Center for Embedded Network Sensing, 2006.
[2] Shigeya Morishita, Shogo Maenaka, Nagata
Daichi, Morihiko Tamai, Keiichi Yasumoto, Toshinobu Fukukura, and Keita Sato. SakuraSensor: Quasi-realtime cherry-lined roads detection
through participatory video sensing by cars. In
Proceedings of the 2015 ACM International Joint
Conference on Pervasive and Ubiquitous Computing, UBICOMP ’15, pp. 695–705. ACM, 2015.
[3] 松田裕貴, 新井イスマイル. スマートフォン搭載照度センサの集合知による網羅的な街灯情報収集システムの開発. 情報処理学会論文誌, Vol. 55, No. 2,pp. 750–760, 2013.
[4] Eiman Kanjo. NoiseSPY: a real-time mobile
phone platform for urban noise monitoring andmapping. Mobile Networks and Applications,Vol. 15, No. 4, pp. 562–574, 2010.
[5] Yu Zheng, Furui Liu, and Hsun-Ping Hsieh. UAir: When urban air quality inference meets bigdata. In Proceedings of the 19th ACM SIGKDD
international conference on Knowledge discovery
and data mining, KDD ’13, pp. 1436–1444. ACM,2013.
[6] 稲継裕昭, 鈴木まなみ, 福島健一郎, 小俣博司, 藤井靖史. シビックテック: ICT を使って地域課題を自分たちで解決する. 勁草書房, 2018.
[7] 松田裕貴, 荒川豊, 安本慶一. 多様なユースケースに対応可能なユーザ参加型モバイルセンシング基盤の実装と評価. マルチメディア, 分散, 協調とモバイル（DICOMO 2016）シンポジウム論文集, pp.
1042–1050, 2016.
[8] 坂村美奈, 米澤拓郎, 伊藤友隆, 中澤仁, 徳田英幸.
Minaqn：市民参加型まちづくりのための参加型センシング web プラットフォーム. 情報処理学会論文
誌, Vol. 57, No. 10, pp. 2162–2174, oct 2016.