Google は、公式サイトで API キーをコードに直接埋め込まないでくださいと言っている割には、[公式サンプル]のコーディングが以下の様になっていて、堂々とHTMLの中にYOUR_API_KEYが登場している。
これでwebページ作ったら世界中にAPI キーを公開してしまうことになる。まるで、堂々とフリチンで公道を歩いている様な状態。公式サンプルは裸の王様か？
#!/usr/bin/python
# -*- coding: utf-8 -*-
importrequestsimportosurl='https://maps.googleapis.com/maps/api/js'# 公式サンプルの HTML が src= で読んでたurl
key=os.environ['GOOGLE_MAPS_API_KEY']# 環境変数に入っている APIキーを取り出す
mysrc=url+"?key="+key# url に APIキーを連結する
response=requests.get(mysrc)# google マップのサイトにアクセスして src を持ってくる
print("'Content-Type': 'text/javascript; charset=UTF-8'")# HTML に返してあげるためのヘッダー
print("")print(response.text)
この部分も皆さんの環境毎に異なる部分なので、ご自分の使える言語で記述してください。
要は、サーバーの環境変数からAPIキーを持ってきて、url 指定して google のサイトから javascript を頂戴するということです。ヘッダーの部分は、'Content-Type': 'text/javascript; charset=UTF-8' にしましょう。
３．javascript の window.onload で CGI を呼ぶ
main.js
functioninitMap(){// 公式サンプルの内容と同じ// Initialize and add the map// The location of Uluruvaruluru={lat:-25.344,lng:131.036};// The map, centered at Uluruvarmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:4,center:uluru});// The marker, positioned at Uluruvarmarker=newgoogle.maps.Marker({position:uluru,map:map});}window.onload=function(){// ページを表示した後に、実行したい処理を書く。ここからが今回のポイント！fetch("/cgi-bin/getapijs.py").then(res=>{// CGI 実行して、結果の TEXT だけを次にパスするreturnres.text();}).then(mytext=>{// 受け取った javascript を EVAL で実行する。eval(mytext);}).then(()=>{// 実行後の処理。公式サンプル HTML が &callback= でコールしていた部分initMap();}).catch(()=>{// お好きなエラー処理をどうぞ});}
<!DOCTYPE html><html><head><style>/* Set the size of the div element that contains the map */#map{height:400px;/* The height is 400 pixels */width:100%;/* The width is the width of the web page */}</style><title>Hello World</title><script src="main.js"></script></head><body><h3>My Google Maps Demo</h3><!--The div element for the map --><divid="map"></div></body></html>
tweet
このイベントは、ユーザーがツイートウェブインテントを使ってツイートを投稿した時(新規投稿かリプライ)に発生します。
埋め込み型ツイートへのリプライツイートや、埋め込み型タイムライン内に表示されるツイートを含みます。
twttr.events.bind(
'tweet',
function (event) {
// Do something there
}
);
<template><divclass="page"><ul><liis="ListItem"v-for="(fruit, index) in fruits":text="fruit":key="index">{{fruit}}</li></ul></div></template><script>importListItemfrom'~/components/Lists/ListItem.vue'exportdefault{data(){return{fruits:['りんご','みかん','ぶどう'],}},components:{ListItem,},}</script>
<html><head><script src="https://code.jquery.com/jquery-3.5.1.js"></script></head><body><divid="reportDiv"></div><script>varauthUserId='authUserId@auth.com';varauthUserPass='dammy for noPass=true';varadminId='admin@yellowfin.com.au';varadminPassword='test';varbody={signOnUser:{userName:authUserId,password:authUserPass,clientOrgRef:""},noPassword:true,adminUser:{userName:adminId,password:adminPassword}};//encode to JSONvarjson_text=JSON.stringify(body);$.ajax({type:'POST',contentType:"application/json;charset=UTF-8",data:json_text,crossDomain:true,url:"http://frontend.web.server/api/rpc/login-tokens/create-sso-token",headers:{'Authorization':'YELLOWFIN ts='+newDate().getTime()+', nonce=123',"Accept":'application/vnd.yellowfin.api-v1+json'},success:function(res,textStatus,jqXHR){securityToken=res.securityToken;leturl='http://frontend.web.server/JsAPI/v3?token='+securityToken;lettp='text/javascript';letsc=document.createElement('script');sc.src=url;sc.type=tp;document.body.appendChild(sc);setTimeout(function(){yellowfin.showLoginPrompt=false;yellowfin.init().then(()=>{yellowfin.loadDashboard({dashboardUUID:'417a0ff3-6adf-4c92-8328-98d0eeb3fd6a',element:document.querySelector('div#reportDiv')});});},1000);},error:function(responseData,textStatus,errorThrown){alert("error!");}});</script></body></html>
