Day19 グーグル様は接続されたくない

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】|川西発之 / 陳発暉|note
 note.mu

今日は詳細画面!
ひたすらもくもく。ときどきメモ。

旅行記の詳細画面を作ろう

さあ作ろう!

前章まででホーム画面はこれでほぼほぼ完成です。本章では、ホーム画面に表示されている評価データをクリックすると現れる旅行記の詳細画面を実装します。地図や写真データの表示の仕方など、派手な要素も登場します。

やったー!がんばるぞー!

例えるならばAさんがBさんにファイルを送るときにUSBメモリ経由で直接送るのではなく、Aさんが一旦Googleドライブ共通アカウントなどのクラウド上にアップしてそれをBさんがダウンロードするというのに近いイメージです。

むぅ、これだと、ネットワークがないと詳細画面は表示できないんかな?ローカルだけで渡すこともできるのかしら。

それぞれのファイルでその都度宣言するよりも一箇所のファイルにまとめてそっから参照することがよくあります。今回はactionsフォルダの中にtypes.jsを新規作成し、

types.js を作るところでエラー

なんじゃろなと思ってみたら、type.js にしてた。typo でした。

3つとも全部USAなのでわかりづらいですが笑、クリックされたデータによって日付が変わっているのが確認できると思います。

おー3つともできた~!
React Native はコンポーネント選びが12割な気がしてきた。

最後に、<MapView />タグを<ScrollView>タグ内に追記しましょう。

ここでもエラーが…よく見ると、<MapView の閉じタグの後にコメントが入ってて、それがダメだ!ということで />  // ←追記ここまで を削除したら動き出しました!

今回は`react-native-geocoding`というものを使おうと思います。

$ npm install react-native-geocoding
$ npm install

`react-native-geocoding`は天下のGoogle mapを介して変換作業を行うので、自分達のアプリからGoogle mapの機能を使わせて頂く許可みたいなのをGoogleに貰わなければいけません。それがAPIキーというものです。

※ここから先の情報は、まず失敗があり、次に失敗じゃないけど成功もしていないような…?そんな感じの情報になっています。Geoconding API の取得については、いろいろなサイトをご自身でお探しください(遠い目

note に書いてあるとおり、API キーを取得するページに行ってみます。
Get the API key

Get an API Key  |  Geocoding API  |  Google Developers Maps Platform Overview Products Pricing Documentation Get Started Get Started with GMP API Picker Billing Account Credits GMP Billing GMP FAQ GMP Support and Resources Maps Maps SDK for Android Maps SDK for iOS Maps Static API Maps JavaScript API Street View Static API Maps URLs Maps Embed API Routes Directions API Distance Matrix API Roads API Places Places API Places SDK for Android Places SDK for iOS Places Library, Maps JavaScript API Geocoding API Geolocation API Time Zone API Additional Resources API Key Best Practices Map Coverage Details Optimization Guide Deprecations GMP Asset Tracking Plan GMP Root CA Migration FAQ Public Programs Premium Plan Blog Language Bahasa Indonesia Deutsch English Español Français Português – Brasil Русский 中文 – 简体 日本語 한국어 Web Services Geocoding API Get started Contact sales Guides Support Send feedback Google Maps Platform Overview Products Pricing Documentation More Guides Support Blog Get Started Developer Guide Get API Key Best Practices Geocoding Addresses Geocoding FAQ Web Services Best Practices Client Libraries Policies and Terms Usage and Billing Optimizing Quota Usage Policies Terms of Service Other Web Service APIs Directions API Distance Matrix API Elevation API Geolocation API Places API Roads API Time Zone API Get Started Get Started with GMP API Picker Billing Account Credits GMP Billing GMP FAQ GMP Support and Resources Maps Maps SDK for Android Maps SDK for iOS Maps Static API Maps JavaScript API Street View Static API Maps URLs Maps Embed API Routes Directions API Distance Matrix API Roads API Places Places API Places SDK for Android Places SDK for iOS Places Library, Maps JavaScript API Geocoding API Geolocation API Time Zone API Additional Resources API Key Best Practices Map Coverage Details Optimization Guide Deprecations GMP Asset Tracking Plan GMP Root CA Migration FAQ Public Programs Premium Plan /* Enable Billing Modal Dialog Styles */ .devsite-enable-billing-dialog { left: 50%; margin-left: -274px; top: 25%; width: 548px; } .devsite-dialog-close { color: #747474; } #devsite-dialog-onload-billing-enabled { padding: 0; } #devsite-dialog-onload-billing-enabled .get-key-check { background: no-repeat #8cc152 center/72px url(/maps/images/lhimages/v2/check@2x.png); height: 150px; width: 100%; } #devsite-dialog-onload-billing-enabled .devsite-dialog-contents, #devsite-dialog-onload-billing-enabled .devsite-dialog-buttons { margin: 8px; } .devsite-enable-billing-dialog ol { list-style: none; margin: 40px 0; padding: 0; } .devsite-enable-billing-dialog li { counter-increment: step-counter; font-size: 14px; line-height: 16px; margin-bottom: 28px; } .devsite-enable-billing-dialog li::before { border-radius: 50%; border: 2px solid #ececec; color: #00bcd4; content: counter(step-counter); font-size: 14px; font-weight: 500; margin-right: 22px; padding: 6px 10px; } /* Style Wizard introduction */ .styleWizardIntroMain { border-radius: 3px; height: 500; width: 640; } .styleWizardIntroSixMapSamples { left: calc(50% - (500px / 2)); line-height: 1; position: relative; text-align: center; width: 500px; } .styleWizardIntroSample { border: 1px solid rgba(0,0,0,0.07); border-radius: 3px; box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.10); display: inline-block; height: 140px; margin: 10px; overflow: hidden; width: 140px; } .styleWizardIntroCaption { text-align: center; } #signing-form { background: #f7f7f7; padding: 16px 2%; } .framebox.signing { box-shadow: 0 1px 4px rgba(0,0,0,.37); } #url-div { margin-bottom: 16px; margin-top: 16px; width: 63%; } #secret-div { display: inline-block; margin-top: 16px; margin-bottom: 16px; float: right; width: 35%; } #signing-result { background: none; border: none; border-bottom: 1px dotted gray; color: gray; margin-bottom: 16px; } #signing-form input { width: 100%; } #signing-result:focus { border-bottom: 1px dotted gray; padding-bottom: 7px; } @media (max-width:500px) { #url-div { width: 100%; } #secret-div { float: none; margin: 0; margin-bottom: 16px; width: 100%; } } #signing-form .devsite-click-to-copy-button { margin: 0; right: 2%; } #signing-form h4 { margin: 8px 0; } .url-signing-error { border-bottom: 1px dotted gray; color: gray; display: none; font-size: 16px; line-height: 20px; margin-bottom: 16px; overflow: hidden; padding: 7px; white-space: nowrap; } Home Products Google Maps Platform Documentation Web Services Geocoding API Guides Get an API Key New Users: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a billing account. To learn more, see Get Started with Google Maps Platform. To use the Geocoding API you must have an API key. The API key is a unique identifier that is used to authenticate requests associated with your project for usage and billing purposes.
 developers.google.com
Google Cloud Platform Console を開きます。
画面上のプロジェクトをクリックします。
右上の「新しいプロジェクト」を選択します。
適当な(初期値の)プロジェクトを作成します。

バーガーメニューをクリックして、API&サービス>認証情報

認証情報を作成をクリックします。

で、これで API キー作成できたー!って思ったのに…貼り付けたらエラーが出てしまったのです。
画面はこちら。

うーーん?Possible Unhandled Promise Rejection id: 2
Error from the server while geocoding. The received datas are in the errors origin field.
This API project is not authorized to use this API.

なんやてーー!?
なんか認証されていないって…orz

数年前(十数年前)、グーグル先生がまだマップをお出しになられたばかりのころ、こうやって認証の仕様(方式)が次々に変わっていきました。マップ表示を納品済みのお客様から、「地図がエラーになったぞ!どうなってるんだ!」って言われたことを思い出しました。今の私なら追加料金をもらうところですが、当時の私は無料で対応していたのです。悔しいです。

グーグル先生は10年以上たって、まだ私に「福田よ、初心忘るべからず。人の一生は重荷を負いて遠き道を行くが如し、急ぐべからずである」とおっしゃっているに違いない。

さて、初心に帰って、グーグル検索をする。
“Google Cloud Platform Geocoding API key”

最初に出てきたのがこちらのサイト
Google Cloud Platform APIキーの取得方法

このサイトのやり方でやろうとする。
※注意※
さっき作ったプロジェクトとか Key はそのままです。

まず Google Cloud Platform の画面を表示します。

getting-started?hl=ja html; charset=utf-8 ファイル
 console.cloud.google.com

そうすると右上にアラートが表示されていました。

あら、プロジェクト作成してるよーっていうアラートだ。
新しく見つけた参考サイトは「5. プロジェクト名を適当に入力し、「作成」をクリック。」まではプロジェクト作成についてになってるので、そのままこのプロジェクトを使おう。
ということで、アラートで表示されたプロジェクトをクリック。

その後、メニューの検索窓で、”Geocoding API” を検索して、有効にします。

有効にすると、この画面になります。Geocoding API の左の矢印で、一つ上の画面に遷移します。
有効なAPI に Geocoding API が入っていることを確認します。
バーガーメニューから、APIとサービス>認証情報をクリック。
認証情報を作成>API キーを選択
キーができました。

ソースコードに貼り付けたら、できたーーーーー!
うれしくてたくさん表示させる。
そしたらまたエラーが…..!!(T_T)

You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account
OVER_QUERY_LIMIT

OVER_QUERY_LIMIT!
OVER_QUERY_LIMIT!
OVER_QUERY_LIMIT!!

まだ3回しか接続してへんやーーーん!!

はーまた明日にしよう。
明日は1回だけ接続できたら、APIの設定そのものは大丈夫で、Google Cloud Platform の設定ができていないということを検証しよう。

ふー。グーグル先生。相変わらずですなー。(T_T)

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください