Wikimedia Commons + OSMをWeb APIで活用する / Utilizing Wikimedia Commons + OSM with Web API

Wikimedia Commonsは写真を始めとしたメディアファイルを集める誰でも参加できるプロジェクトです。
世界中から「広い意味で教育的」なメディアファイルが投稿され、オープンデータで公開されています。
Wikimedia Commonsが提供しているWeb APIとOSMを組み合わせたアプリ開発のコツをお話します。
(OSC広島2024 発表資料)

Transcript

1. Wikimedia Commons + OpenStreetMapを Web APIで活用する 坂ノ下 勝幸 諸国・浪漫 / OpenStreetMap Foundation Japan Code for OSAKA, Harima, Kusatsu/ 淀川アートネット Facebook: K.Sakanoshita X(Twitter): @K_Sakanoshita P.1 本資料で利用している地図： © OpenStreetMap contributors
2. P.2 自己紹介 - 坂ノ下 勝幸 ◼ 主な所属コミュニティ・団体 ⚫ OpenStreetMap Foundation Japan ⚫ Wikimedians of Japan User Group ⚫ 諸国・浪漫 / 淀川アートネット ⚫ Code for OSAKAなど ◼ 主な活動内容 ⚫ マッピングパーティの開催および協力 ⚫ ウィキペディアタウンの開催および協力 ⚫ オープンソース/データの活用（アプリ開発など） ◼ 目指していること ⚫ 地元の情報は、自分たちで発信する文化を作る ⚫ 現場こそ最強のツールとデータが使えるように P.2
3. P.3 地域活動のデジタル化 P.3
4. P.4 デジタル化への対応 ◼ 地域活動のデジタル化による問題点 ⚫ データの保管場所に信頼性が高くない場所を使う危険性 ✓ 無料で利用できるホームページやブログを提供しているサービスなど ✓ 2019年に終了した「Yahoo!ジオシティーズ」は400万件のサイトを保有 ※参考) https://seniorguide.jp/column/furuta/1176647.html ⚫ ライセンスが曖昧で「とにかく集めた」だけの可能性 ✓ 「昔の写真を集めてアーカイブサイトを作ろう」として写真を集めていくが ライセンスが曖昧で他のことには使えない。お年寄りにライセンスのことを 説明すること自体が難しいなど ➢ 苦労が予想されるので、極力簡易な方向に舵を切っている場合もある 地域活動は基本的にお金が無い（掛けられない）が やり方によって資料（データ）を残せる方法もある P.4
5. P.5 オープンデータと国際プロジェクト ◼ 地域資料を将来に残すなら ⚫ オープンデータとしての情報収集 ✓ 少なくとも、何も取り決めずに「単に集めただけ」での活用は厳しい ✓ もちろん、オープンデータ以外のライセンスを設定する方法もあるが、 この場合、データをマージすることに制約が発生することに注意する ✓ 将来に残すことを考えると、オープンデータでの情報収集が望ましい ➢ CC-BYだと、別の誰かが改訂する度に著作権表示が増えていく… ➢ ルールを守るものが不利になるなら、いっそのことCC0の方が楽 ⚫ 国際的なデータプラットフォームの活用 ✓ 補助金でサーバを持つ場合、補助金が切れるとデータが消失する恐れ ✓ 寄付やスポンサーで運営基盤が安定している国際プロジェクトを利用 することは、データを長生きさせる（将来に残せる）可能性がある ✓ 全く「想定していない活用方法」やデータ連携が出来る可能性がある P.5 ←こういったプロジェクトの活用が重要
6. P.6 さて、どう活用していくか ◼ Wikimedia各プロジェクトやOpenStreetMapに関わる？ ⚫ 残念ながら「さぁ、みんなで編集しよう」では人は動かない ⚫ 理由は様々だが、「巨大プロジェクトの一部」に埋没してしまい 活動の動機となる地域性が失われると感じる人が多いからかも？ ◼ 他にも関わりにくい理由がある ⚫ Wikimedia commonsに写真を載せただけでは見て貰えない ※フォトコンテストで最優秀とかなら話は別ですが、レアケース ⚫ WikidataはIT詳しくない人には「訳が分からない」 ⚫ OpenStreetMapは「単なる地図」にしか見えない ✓ 単なる地図なら、Google Mapsで十分でしょ？ ⚫ Wikipediaだけは、Google検索で表示されるので 他と違って、埋没しない可能性がある P.6
7. P.7 アプリでオープンデータを活用する P.7 ◼ やりたいことと、必要なこと ⚫ ネットワークにおけるOSI参照モデルとよく似ている ⚫ みんながやりたいことはアプリケーション層 ✓ 例えば、地域の歴史書、子育てマップ、バリアフリーマップなど ⚫ 必要なこと（Wikimedia各プロジェクトやOpenStreetMap）はインフラ層 ✓ 例えば、その地域の歴史・文化、施設の位置情報など 「やりたいこと」と「必要なこと」を繋げるために アプリを開発するのをオススメします 名称 意味 アプリケーション層 みんながやりたいこと ※アプリケーションが該当 インフラ層 実現させるために必要なもの ※オープンデータが該当 やりたい！
8. P.8 Wikimedia Commons P.8
9. P.9 Wikimediaの各プロジェクト Wikimedia財団 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 言語毎に独立して運用 写真や動画は ここに集約 • 個人や団体の寄付で運営 • サーバー運用など、プロ ジェクトの下支えを担当 • プロジェクトの運営には 直接的には関わらない Commons (写真・動画) Wikipedia (百科事典) Wiktionary (辞書) Books (教科書) Source (原文) Wikiquote (引用集) News (ニュース) P.9 今回はWikimedia Commonsを活用
10. P.10 Wikimedia Commonsとは ◼ ウィキメディア・コモンズは「教育的メディアコンテンツをパ ブリック・ドメインやフリーライセンスで誰にでも利用可能に し、ウィキメディア財団の様々なプロジェクト共有の保管庫と して機能する」ことを目指します。 ⚫ https://meta.wikimedia.org/wiki/Wikimedia_Commons/ja より ◼ 具体的には以下のファイルをみんなで共有している ⚫ 写真 ⚫ 動画 ⚫ 音声 P.10
11. P.11 Wikimedia Commonsの基本的な使い方 ◼ Wikimedia Commonsで使いたい画像を見つける P.11
12. P.12 Web APIで画像のURLを取得する ◼ コードにするとこんな感じ P.12 getWikiMediaImage(fileTitle, thumbnailWidth, imageDom) { const apiUrl = `https://commons.wikimedia.org/w/api.php?action=query&titles=${fileTitle}&format=json&prop=imageinfo&iiprop=url|extmetadata &origin=*`; fetch(apiUrl + (thumbnailWidth == "" ? "" : `&iiurlwidth=${thumbnailWidth}`)) .then(response => response.json()) .then(data => { const pages = data.query.pages; const pageId = Object.keys(pages)[0]; const urlCat = thumbnailWidth == "" ? "url" : "thumburl"; if (pages[pageId].imageinfo !== undefined) { const fileUrl = pages[pageId].imageinfo[0][urlCat]; const copyright = typeof (imageDom) == "string" ? document.getElementById(imageDom + "-copyright") : undefined imageDom = typeof (imageDom) == "string" ? document.getElementById(imageDom) : imageDom; imageDom.src = fileUrl; imageDom.setAttribute("src_org", pages[pageId].imageinfo[0].url); imageDom.setAttribute("src_org", pages[pageId].imageinfo[0].url); if (copyright !== undefined) { let artist = pages[pageId].imageinfo[0].extmetadata.Artist.value let license = pages[pageId].imageinfo[0].extmetadata.LicenseShortName.value let html = `Image by ${artist} <a href="${pages[pageId].imageinfo[0].descriptionurl}">${license}</a>` copyright.innerHTML = html } } else { console.log("File Not Found:" + pages[pageId].title); } }) }
13. P.13 処理の概要① ◼ Wikimedia Commonsの画像URLは問い合わせる必要がある ⚫ JavaScriptのFetch命令で以下のURLからJSONを取得する P.13 https://commons.wikimedia.org/w/api.php? action=query&titles=${fileTitle}& format=json&prop=imageinfo& iiprop=url|extmetadata& origin=* 「fileTitle」変数の中身は 以下のファイル名を指定
14. P.14 処理の概要② ◼ 取得したJSONから画像URLを取得するコード P.14 const pages = data.query.pages; const pageId = Object.keys(pages)[0]; const urlCat = thumbnailWidth == "" ? "url" : "thumburl" if (pages[pageId].imageinfo !== undefined) { const fileUrl = pages[pageId].imageinfo[0][urlCat] imageDom.src = fileUrl } 「data」変数の中身は取得したJSON JSONの中身 JSONのkeyは動的で コードが必要となる 「url」か「thunburl」が 目的の画像URL
15. P.15 要するに Wikimedia CommonsのWeb APIを使えば、 1億以上のメディアファイルを自由に使える 先に掲載したコードはMITライセンスで 公開済みなので、自由にお使いください P.15
16. P.16 OpenStreetMap P.16
17. P.17 OpenStreetMapの「地図」とは ◼ 単なる「地図」だと、使い道はそんなに多くはない ⚫ 目に見えない人は「図」使えないし、トイレの情報が欲しい時に お店の情報が地図に表示されていると探しづらくなるよね？ 正確に言えばOpenStreetMapは地図と少し違います 「地図を作るための情報を集めたデータベース」です P.17
18. P.18 ◼ OpenStreetMapから必要なデータを取り出して活用する ⚫ データは様々な種類の地図、ゲーム、音声案内など何にでも使える OpenStreetMapは地図じゃない？ 観光案内 飲食店 防災 ゲーム Wikipedia 音声案内 OpenStreetMap データベース P.18
19. P.19 Overpass APIというWeb APIがある ◼ 必要なデータを取得するにはOverpass APIを利用する ⚫ 必要なデータの取得にはOverpass QLという言語をWeb APIに記載 して問い合わせる形式 (参考) https://wiki.openstreetmap.org/wiki/JA:Overpass_API/Overpass_QL P.19 https://overpass.openstreetmap.jp/api/interpreter? data=[out:json][timeout:30] [bbox:34.831,135.593,34.867,135.637]; (nwr["leisure"="park"];nwr["amenity"="toilets"];); out body meta;>;out skel; nwrは node、way、relationの頭文字。OSMはnode(点)、way(線/領域)、 relation(点や線の関連)で出来ており、nwrは「全ての形」を意味する この形の種類から”leisure”=“park” とkey=value形式でタグを指定する この組み合わせで公園やトイレなどのデータを取得することが出来る データ形式とタイムアウト 緯度経度
20. P.20 Wikimedia Commons + OpenStreetMap P.20
21. P.21 OSMとCommonsを組み合わせる ◼ 一応OSMには「wikimedia_commons」タグはある ⚫ 思ったよりはマッピングされているが、まだまだ少ないかな P.21
22. P.22 OSMとCommonsを組み合わせる ◼ ちなみにwikipediaタグだと、とんでもないことになる ⚫ ブラウザがハングアップするのをなだめすかしてスクショ取得 P.22 Wikidataタグもあるけど 膨大過ぎて、関西広域で 検索するのは危険と判断 そのため、試してません
23. P.23 OSMとCommonsを組み合わせる ◼ wikipediaタグとの組み合わせなら ⚫ 拙作「Open History & Culture Map」などで 地図上でWikipediaを読むアプリを作れる ◼ OSM側にCommonsのデータが少ない こともあるが、それ以上の理由として ⚫ Commonsには同じ地物にも複数の写真が 掲載されているので、それらからアプリに ふさわしい写真を選んで使いたいと考える 開発者や利用者が多いと考えられる ⚫ そのため、OSMとCommonsをそのままで 自動的に組み合わせることは難しい P.23
24. P.24 OSMとCommonsを組み合わせる P.24 ◼ アプリの独自データとOSMのデータを組み合わせることで 「何処に何があるか」を写真を含めて可視化ができる Wikimedia Commons データベース OpenStreetMap データベース アプリの独自データ 国際的なオープンデータの プラットフォーム(保管先) 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ
25. P.25 どんな活用が出来るか P.25
26. P.26 遊具のある公園マップ ◼ 公園内の遊具を地図で調べるためのアプリ ⚫ 親が子供を連れて公園に遊びに行く際、どういった遊具があるのか、 子供の希望に沿った公園を選び、楽しく遊ぼうという趣旨で開発 P.26
27. P.27 ◼ 2023年11月に開催された十三周辺のアートイベント ⚫ たくさんの店舗や施設が関わって、様々な作品が提示されていた ⚫ 参加者がスマホで近くの施設を調べらアプリとして活用していた 十三アートフェスマップ P.27 下記の写真はCommonsではありませんが、施設のOSM にWikipediaタグがあればCommonsから画像を表示する
28. P.28 大阪思い出のこしマップ ◼ 図書館が「地域の思い出」を集めてレファレンスした結果を 補足説明した上で、オープンデータとして将来に残す活動 ⚫ 図書館が得意なことと、地域情報がリンクしていく ◼ 大阪思い出のこしマップは、場所を示しながら読むアプリ ⚫ 例えば、「旭区」の場所を即答できる人はそんなに居ない P.28 施設のOSMにWikipediaタグがあればCommonsから画像を表示する
29. P.29 まとめ P.29
30. P.30 意外と近い活動をしている所もある ◼ 地域活動でも地域資料（データ）が求められている ⚫ 各地のNPOやコミュニティは、そういったデータを自前で準備して いることが非常に多く、活動終了とともにデータが消散していく ✓ 例）バリアフリーマップ、商店街マップ、地域の文化・歴史の冊子など ◼ データの収集～活用のノウハウは団体によって異なる ⚫ 資料（データ）を残す視点を持って活動している団体は少ない ⚫ また、「残す」ことを意識しても、ライセンスを決めていないので、 新しい活用（ネット掲載など）への対応や後継団体に権利移譲する ことが出来ない場合も多い（権利関係が不明なので出来ないなど） ◼ あなたのアプリでオープンデータを使うことで ⚫ オープンデータが地域活動に直接的に役立つ ⚫ オープンデータの活用に自然と意識が向いて、 データの充実に興味・関心を持ってもらう P.30
31. P.31 アプリでオープンデータを使いませんか？ ◼ 最後のまとめ ⚫ 地域活動では、著作権やアーカイブに関する視野が狭い時がある ⚫ 地域活動の成果は地域の宝であり、出来れば将来に残していきたい ⚫ そのためには、オープンデータ＆国際的なプラットフォームが大事 ⚫ ただし、「自分たちの活動」として認識できる仕組みが必要となる ⚫ Web APIを活用することで、それをオープンデータを充実させつつ 地域活動にオープンデータを低コストで活用できる可能性がある ◼ 先ほど紹介したアプリはオープンソースで公開中 ⚫ 遊具のある公園マップ https://github.com/armd-02/Playgrounds ⚫ 大阪思い出のこしマップ https://github.com/K-Sakanoshita/OsakaMemories ⚫ 十三アートフェスマップ https://github.com/armd-02/JusoArtFes2023 MITライセンスなのでコードは好きにお使いください P.31