PWAでGoogleMapAPIの課金問題を回避する #PWA

初回投稿です。
本記事の目的は次の項目のご紹介です。
1．地図を使ったモバイルアプリでGoogleMapAPIの課金設定を回避する方法の試行錯誤結果
2．モバイルアプリのコードをWebアプリ（PWA含む）に変換する方法と限界について
3．医療関連、特に新型コロナ関連アプリのストア公開時のハードルの高さの体験談
4．オープンデータを使ったアプリ開発時の留意点

私もGoogleMapAPIの課金設定が必須になるのは分かっていたのですが、まあiOS向けだけでも配信出来れば良いと安易に考え、最初にReact-Native＋Expoで開発を始めました。iOS向けの開発上は何の問題も発生せず、react-native-mapsを使ってOpenStreetMapのタイルを使い完成したのですが、他の記事にもあるように、AndroidではOpenStreetMapのタイル設定は可能ですが、Expo Go以外のdevelopment-clientや実機での起動が出来ず、色々調べたらGoogleMapを使っていない場合も➀地図にGooleのロゴが表示される（Expo Goで確認）➁実機等ではGoogleMapAPIの設定をしていないと起動しても何も表示されない、ということが判明。同じ悩みを持っている人たちが質問サイト等で結構多いのが分かりました。
参考：Qiita React-Nativeで地図を表示する(react-native-maps)

１．モバイルアプリでGoogleMapAPIの課金設定を回避する方法
結論を先に言うと、Androidでの配信が必須の場合にはReact-Native＋Expoを諦めて、leaflet＋OpenStreetMapでWebアプリを作り、これをPWA化して配信するというのが私の回避策です。
色々調べましたがreact-native-mapsを使う限り回避方法は見つかりませんでした。本モジュールのソースをGithubで確認しましたが、type="none"やprovide="default"の設定をしても地図のframeworkがGoogleMapに依存しているように見えます（間違っていたら指摘して下さい）。

App.js

<MapView
        provider={null}
        mapType="none"
        style={styles.map}
        region={location}
      >
        <UrlTile
          urlTemplate={urlTemplate}
          maximumZ={19}
          shouldReplaceMapContent={true}
        />

上のコードはAndroid用に書いたJSX内のMapviewタグの部分ですが、Expo Goで表示させるとurlTemplateで指定したOpenstreetmapのタイルが表示されますがGoogleのロゴは消えません。また実機では地図自体が表示されませんでした。
iOSの場合はproviderとmapTypeは設定しないとApple純正のMapKitが表示され、上記と同じの設定をするとOpenstreetmapのタイルが実機でも問題無く表示されました。

２．モバイルアプリのコードをWebアプリ（PWA含む）に変換する方法と限界について
今回はExpoとreact-native-mapsでほぼ開発が完了した状態でしたので、上記回避策を実現するにはExpoでコードをWeb向けのビルドをすればWebアプリに変換できると考え、やってみたのですがreact-native-mapsはWebビルドに対応していないことが分かり、ほとんど変換できませんでした。仕方なく部分的に元のソースからleaflet＋OpenStreetMapベースのコードを書き直し、最後はPWA化しました。ちなみに環境は下記の通りです。
React-Native ＋ Expo ＋ react-native-maps
react-native: @0.64.3
Expo SDK: @44.0.0
react-native-maps: @0.29.4
↓
leaflet: @1.6.0
leaflet-easybutton@2

３.　医療関連、特に新型コロナ関連アプリのストア公開時のハードルの高さの体験談
これは単に自分の無知が原因ですが、AppleもGoogleも新型コロナ関連や医療関連のアプリをストアで公開する際は、政府関係機関かメジャーな医療関係機関に限定されており、App storeでの審査でも簡単には通りませんね。今回は公式のワクチン接種証明等のアプリではなく、単なる病院検索アプリでだったので大丈夫だろうと考えやってみたのですが、ハードルはかなり高いことが分かりました（Google Play storeには地図問題があったので申請はしてません）。

４．オープンデータを使ったアプリ開発時の留意点
今回は厚生労働省の地方厚生局で公開されている保険医療機関コード別データと、政府CIOポータルで公開されている全国医療機関の医療提供体制の状況のデータを利用させてもらいました。前者は県別データがExcelデータ等で公開されていますが、細かいデータフォーマットまで統一されていないので（例えば電話番号表記のハイフォン有無や括弧書き）利用の際は注意が必要です。
また後者ではJSONデータで直接取得できそうですが、Webサイトから取得する際はCORS問題にひっかり、JSONPとかには対応してないようなのでこれも注意が必要です（モバイルアプリの場合はCORS問題が無いため問題ありませんでした）。自分は結局一旦自分のサーバーにJSONデータを保存してから利用するようにしました。
また各オープンデータを利用する際はライセンス等の確認が必要で、クリエイティブコモンズのライセンスがベースだと思いますが、各々微妙に違うケースもあるので利用の際は注意が必要だと思います。
参考：関東　保険医療機関コード別データ
 　　：政府CIOポータルで公開されている全国医療機関の医療提供体制の状況のデータ

以上OpenStreetMapを使いコロナ関連のモバイルアプリで公開する方法のご紹介でした。
参考までに今回Webで公開したアプリは下記の通りです。良かったら使ってみて下さい。