Web Developer 向けの WWDC 情報です。個人的には Safari Web Extension が追加されて、Safari を使ってる方にも自分の Web Extension が提供できるようになったのが一番嬉しかったです。
なんというかやっぱり色んなベンダーを超えたブラウザで同じような体験が提供できるのがウェブテクノロジーの強みなので、よかった。
// Web Animations API Code Exampleletneedle=document.getElementById("needle");letlogo=document.getElementById("logo");logo.addEventListener("click",()=>{needle.animate({transform:["rotateX(35deg) rotateZ(13deg)","rotateX(35deg) rotateZ(733deg)",],easing:["ease-out"],},800);});
<videoid="videoElement"src="https://site.example/video.mp4"></video><buttonid="deviceButton">Send video to a remote device</button><script>letvideoElement=document.getElementById("videoElement");letdeviceButton=document.getElementById("deviceButton");deviceButton.addEventListener("click",(event)=>{videoElement.remote.prompt().then(updateRemotePlaybackState);});</script>
ここで、Project version は "New"、Execute the app as (誰の権限でスクリプトを実行するか) は "Me" (あなた自身) に設定し、Who has access to the app (誰が API にアクセスできるか) は用途に応じて変更して下さい。
ここを例えば、"Only myself" (自分だけ) にすると、Google ログイン状態の時しか使えない API になりますが、それだと JS からシンプルに fetch する事は出来なくなるので、この記事の趣旨に照らせば "Anyone, even anonymous" (匿名であっても誰でも) を選ぶことになります。
初期状態では、最後に公開したバージョンが選ばれているので、Project version に "New" を選び直して更新することで、最新の状態を反映することが出来ます。この際すでに発行済みのユニーク URL は変わらないので、API を fetch しているクライアント側の変更は必要ありません。
Google スプレッドシートのデータを外部に API を通じて JSON として公開する方法は以上になります。当初は他にも色々と書こうと思っていたのですが、大分長くなったのでいったんここで一区切りとします。
この記事で扱ったのはあくまでデータを読み出す部分だけでしたが、反響が大きければ下記の内容も別に書こうと思います。
Google フォームを使ってデータを集めてスプレッドシートに溜める
POST メソッドも Google Apps Script で受けられるようにして、より高度なフォームを自作する
cron のように定期的に Google Apps Script を実行して、必要な時にメールで通知する
'use strict'letCat=(function(){let_share='only one';letprivates=newWeakMap();let$=function(o){returnprivates.get(o);};functionCat(name){privates.set(this,{});$(this).name=name;}Cat.prototype={//self:function(){return privates.get(this);},init:function(){},load:function(){},say:function(){console.log('my name is',$(this).name)},getShare:function(){console.log(_share);},setShare:function(newValue){_share=newValue}};returnCat;})();letcat1=newCat('cat1');letcat2=newCat('cat2');console.log(cat1);console.log(cat1===cat2);console.log(cat1.init===cat2.init);console.log(cat1.load===cat2.load);console.log(cat1.name);cat1.say();cat2.say();cat1.getShare();cat2.getShare();cat1.setShare('share changed by cat1');cat1.getShare();cat2.getShare();
constbooks=[// new クラス名()でインスタンスを生成// constructor()の引数に沿って出力したい値を入力するnewBook("メモの魔力","メモの重要性がわかる")newBook("多動力","ノリの良さが大切")newAuthorBook("革命のファンファーレ","広告戦略の鏡","西野亮廣")]
constbtn=document.querySelector('button');btn.addEventListener('click',()=>{letmyDate;for(leti=0;i<10000000;i++){letdate=newDate();myDate=date}console.log(myDate);letpElem=document.createElement('p');pElem.textContent='This is a newly-added paragraph.';document.body.appendChild(pElem);});
Web workerはかなり便利ですが、いくつかできないことがあります。それの主要なものの一つがDOMにアクセスできないということです。つまり直接的にユーザーインターフェースを更新するためにワーカーを使うことができないということです。私たちはワーカーの処理によって100万の青い円を表示することはできない、したがって基本的には数値処理しかできないです。
POST http://127.0.0.1:8080/0.png
200 <m>created</m>
POST http://127.0.0.1:8080/1.png
200 <m>created</m>
POST http://127.0.0.1:8080/2.png
200 <m>created</m>
POST http://127.0.0.1:8080/3.png
200 <m>created</m>
POST http://127.0.0.1:8080/4.png
200 <m>created</m>
GET http://127.0.0.1:8080/end
200 <m>bye!</m>
サーバー側
$ deno run --allow-net --allow-read --allow-write server.ts
http://127.0.0.1:8080
127.0.0.1 OPTIONS /0.png
127.0.0.1 POST /0.png
0.png 18321 created
127.0.0.1 OPTIONS /1.png
127.0.0.1 POST /1.png
1.png 18537 created
127.0.0.1 OPTIONS /2.png
127.0.0.1 POST /2.png
2.png 18706 created
127.0.0.1 OPTIONS /3.png
127.0.0.1 POST /3.png
3.png 18573 created
127.0.0.1 OPTIONS /4.png
127.0.0.1 POST /4.png
4.png 18562 created
127.0.0.1 GET /end
