Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wikimedia Commons + OSMをWeb APIで活用する / Utilizin...

K.Sakanoshita
September 29, 2024

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

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

K.Sakanoshita

September 29, 2024
Tweet

More Decks by K.Sakanoshita

Other Decks in Education

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.4 デジタル化への対応 ◼ 地域活動のデジタル化による問題点 ⚫ データの保管場所に信頼性が高くない場所を使う危険性 ✓ 無料で利用できるホームページやブログを提供しているサービスなど ✓ 2019年に終了した「Yahoo!ジオシティーズ」は400万件のサイトを保有

    ※参考) https://seniorguide.jp/column/furuta/1176647.html ⚫ ライセンスが曖昧で「とにかく集めた」だけの可能性 ✓ 「昔の写真を集めてアーカイブサイトを作ろう」として写真を集めていくが ライセンスが曖昧で他のことには使えない。お年寄りにライセンスのことを 説明すること自体が難しいなど ➢ 苦労が予想されるので、極力簡易な方向に舵を切っている場合もある 地域活動は基本的にお金が無い(掛けられない)が やり方によって資料(データ)を残せる方法もある P.4
  4. P.5 オープンデータと国際プロジェクト ◼ 地域資料を将来に残すなら ⚫ オープンデータとしての情報収集 ✓ 少なくとも、何も取り決めずに「単に集めただけ」での活用は厳しい ✓ もちろん、オープンデータ以外のライセンスを設定する方法もあるが、

    この場合、データをマージすることに制約が発生することに注意する ✓ 将来に残すことを考えると、オープンデータでの情報収集が望ましい ➢ CC-BYだと、別の誰かが改訂する度に著作権表示が増えていく… ➢ ルールを守るものが不利になるなら、いっそのことCC0の方が楽 ⚫ 国際的なデータプラットフォームの活用 ✓ 補助金でサーバを持つ場合、補助金が切れるとデータが消失する恐れ ✓ 寄付やスポンサーで運営基盤が安定している国際プロジェクトを利用 することは、データを長生きさせる(将来に残せる)可能性がある ✓ 全く「想定していない活用方法」やデータ連携が出来る可能性がある P.5 ←こういったプロジェクトの活用が重要
  5. P.6 さて、どう活用していくか ◼ Wikimedia各プロジェクトやOpenStreetMapに関わる? ⚫ 残念ながら「さぁ、みんなで編集しよう」では人は動かない ⚫ 理由は様々だが、「巨大プロジェクトの一部」に埋没してしまい 活動の動機となる地域性が失われると感じる人が多いからかも? ◼

    他にも関わりにくい理由がある ⚫ Wikimedia commonsに写真を載せただけでは見て貰えない ※フォトコンテストで最優秀とかなら話は別ですが、レアケース ⚫ WikidataはIT詳しくない人には「訳が分からない」 ⚫ OpenStreetMapは「単なる地図」にしか見えない ✓ 単なる地図なら、Google Mapsで十分でしょ? ⚫ Wikipediaだけは、Google検索で表示されるので 他と違って、埋没しない可能性がある P.6
  6. P.7 アプリでオープンデータを活用する P.7 ◼ やりたいことと、必要なこと ⚫ ネットワークにおけるOSI参照モデルとよく似ている ⚫ みんながやりたいことはアプリケーション層 ✓

    例えば、地域の歴史書、子育てマップ、バリアフリーマップなど ⚫ 必要なこと(Wikimedia各プロジェクトやOpenStreetMap)はインフラ層 ✓ 例えば、その地域の歴史・文化、施設の位置情報など 「やりたいこと」と「必要なこと」を繋げるために アプリを開発するのをオススメします 名称 意味 アプリケーション層 みんながやりたいこと ※アプリケーションが該当 インフラ層 実現させるために必要なもの ※オープンデータが該当 やりたい!
  7. P.9 Wikimediaの各プロジェクト Wikimedia財団 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語

    ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 英語版 日本語 ドイツ語 フランス語 ・・・ 言語毎に独立して運用 写真や動画は ここに集約 • 個人や団体の寄付で運営 • サーバー運用など、プロ ジェクトの下支えを担当 • プロジェクトの運営には 直接的には関わらない Commons (写真・動画) Wikipedia (百科事典) Wiktionary (辞書) Books (教科書) Source (原文) Wikiquote (引用集) News (ニュース) P.9 今回はWikimedia Commonsを活用
  8. 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); } }) }
  9. 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
  10. 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形式でタグを指定する この組み合わせで公園やトイレなどのデータを取得することが出来る データ形式とタイムアウト 緯度経度
  11. P.23 OSMとCommonsを組み合わせる ◼ wikipediaタグとの組み合わせなら ⚫ 拙作「Open History & Culture Map」などで

    地図上でWikipediaを読むアプリを作れる ◼ OSM側にCommonsのデータが少ない こともあるが、それ以上の理由として ⚫ Commonsには同じ地物にも複数の写真が 掲載されているので、それらからアプリに ふさわしい写真を選んで使いたいと考える 開発者や利用者が多いと考えられる ⚫ そのため、OSMとCommonsをそのままで 自動的に組み合わせることは難しい P.23
  12. P.24 OSMとCommonsを組み合わせる P.24 ◼ アプリの独自データとOSMのデータを組み合わせることで 「何処に何があるか」を写真を含めて可視化ができる Wikimedia Commons データベース OpenStreetMap

    データベース アプリの独自データ 国際的なオープンデータの プラットフォーム(保管先) 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ
  13. P.30 意外と近い活動をしている所もある ◼ 地域活動でも地域資料(データ)が求められている ⚫ 各地のNPOやコミュニティは、そういったデータを自前で準備して いることが非常に多く、活動終了とともにデータが消散していく ✓ 例)バリアフリーマップ、商店街マップ、地域の文化・歴史の冊子など ◼

    データの収集~活用のノウハウは団体によって異なる ⚫ 資料(データ)を残す視点を持って活動している団体は少ない ⚫ また、「残す」ことを意識しても、ライセンスを決めていないので、 新しい活用(ネット掲載など)への対応や後継団体に権利移譲する ことが出来ない場合も多い(権利関係が不明なので出来ないなど) ◼ あなたのアプリでオープンデータを使うことで ⚫ オープンデータが地域活動に直接的に役立つ ⚫ オープンデータの活用に自然と意識が向いて、 データの充実に興味・関心を持ってもらう P.30
  14. 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