Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年にアップルが最初に導入した。後に、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化された。
<script>letupdated=0;apiMock=(i)=>{returnnewPromise((resolve)=>{setTimeout(function(){updated=i;resolve(i);},i);});}asyncfunctionstart(){res=awaitapiMock(1000);console.log(`apiMock is done. res=${res}`);console.log(`updated=${updated}`);}start();</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{setTimeout(function(){updated=1500;resolve(1500);console.log("apiMock done");},1500);});// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(async()=>{if(maxTry++>100){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});// 不要。new Promiseだけで走り出す。// () => Promise.all([apiMock]);/* もし すべて終わった後に処理をしたければ then する
Promise.all([apiMock, apiNoWait, apiWait]).then((p) => {
console.log("finished");
console.log(p); // 全taskの戻り値(resolveの引数)が帰る → [1500, 1000, 1500]
});
*/</script>
apiMock()の中の new Promise も await + asyncにしないと同期しないのがめんどくさい。
<script>letupdated=0;// Task1: Wait 1 secapiMock=async()=>{awaitnewPromise(async(resolve)=>{setTimeout(function(){updated=1500;resolve(1500);console.log("apiMock done");},1500);});}// Task2: Wait 0 secapiNoWait=async()=>{awaitnewPromise(async(resolve)=>{resolve(1000);console.log("apiNoWait done");});}// Task3: Wait until task1 is doneapiWait=async()=>{awaitnewPromise(async(resolve,reject)=>{letmaxTry=0;constinterval=setInterval(async()=>{if(maxTry++>100){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});}conststart=async()=>{awaitapiMock();awaitapiNoWait();awaitapiWait();}start();</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{thrownewError("api failed");// <---------エラー);// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(()=>{if(maxTry++>50){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});Promise.all([apiMock,apiNoWait,apiWait]).then((p)=>{console.log("finished");console.log(p);}).catch((p)=>{console.log("Found an error:");console.log(p);});</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{thrownewError("api failed");// <---------エラー);// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(()=>{if(maxTry++>50){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});Promise.allSettled([apiMock,apiNoWait,apiWait]).then((p)=>{console.log("finished");console.log(p);}).catch((p)=>{console.log("Found an error:");console.log(p);});</script>
apiNoWait done
index.html:39 apiWait had waited 1 times ...
index.html:39 apiWait had waited 2 times ...
...
index.html:39 apiWait had waited 51 times ...
index.html:45 finished
index.html:46 (3) [{…}, {…}, {…}]
0: {status: "rejected", reason: Error: api failed at file:///Users/JP23223/Desktop/index.html:11:8 at new Promise (<anonymo…}1:{status:"fulfilled",value:1000}2:{status:"rejected",reason:"apidoesnotrespond"}
<script>letupdated=0;apiMock=(i)=>{returnnewPromise((resolve)=>{setTimeout(function(){updated=i;resolve(i);},i);});}asyncfunctionstart(){res=awaitapiMock(1000);console.log(`apiMock is done. res=${res}`);console.log(`updated=${updated}`);}start();</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{setTimeout(function(){updated=1500;resolve(1500);console.log("apiMock done");},1500);});// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(async()=>{if(maxTry++>100){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});// 不要。new Promiseだけで走り出す。// () => Promise.all([apiMock]);/* もし すべて終わった後に処理をしたければ then する
Promise.all([apiMock, apiNoWait, apiWait]).then((p) => {
console.log("finished");
console.log(p); // 全taskの戻り値(resolveの引数)が帰る → [1500, 1000, 1500]
});
*/</script>
apiMock()の中の new Promise も await + asyncにしないと同期しないのがめんどくさい。
<script>letupdated=0;// Task1: Wait 1 secapiMock=async()=>{awaitnewPromise(async(resolve)=>{setTimeout(function(){updated=1500;resolve(1500);console.log("apiMock done");},1500);});}// Task2: Wait 0 secapiNoWait=async()=>{awaitnewPromise(async(resolve)=>{resolve(1000);console.log("apiNoWait done");});}// Task3: Wait until task1 is doneapiWait=async()=>{awaitnewPromise(async(resolve,reject)=>{letmaxTry=0;constinterval=setInterval(async()=>{if(maxTry++>100){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});}conststart=async()=>{awaitapiMock();awaitapiNoWait();awaitapiWait();}start();</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{thrownewError("api failed");// <---------エラー);// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(()=>{if(maxTry++>50){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});Promise.all([apiMock,apiNoWait,apiWait]).then((p)=>{console.log("finished");console.log(p);}).catch((p)=>{console.log("Found an error:");console.log(p);});</script>
<script>letupdated=0;// Task1: Wait 1 secapiMock=newPromise((resolve)=>{thrownewError("api failed");// <---------エラー);// Task2: Wait 0 secapiNoWait=newPromise((resolve)=>{resolve(1000);console.log("apiNoWait done");});// Task3: Wait until task1 is doneapiWait=newPromise((resolve,reject)=>{letmaxTry=0;constinterval=setInterval(()=>{if(maxTry++>50){// give up after x triesreject(`api does not respond`);clearInterval(interval);}elseif(updated>0){resolve(updated);clearInterval(interval);resolve(100);console.log("apiWait done");}else{console.log(`apiWait had waited ${maxTry} times ...`);}},300);});Promise.allSettled([apiMock,apiNoWait,apiWait]).then((p)=>{console.log("finished");console.log(p);}).catch((p)=>{console.log("Found an error:");console.log(p);});</script>
apiNoWait done
index.html:39 apiWait had waited 1 times ...
index.html:39 apiWait had waited 2 times ...
...
index.html:39 apiWait had waited 51 times ...
index.html:45 finished
index.html:46 (3) [{…}, {…}, {…}]
0: {status: "rejected", reason: Error: api failed at file:///Users/JP23223/Desktop/index.html:11:8 at new Promise (<anonymo…}1:{status:"fulfilled",value:1000}2:{status:"rejected",reason:"apidoesnotrespond"}
Google Chromeなどの最新のブラウザは、ウェブサイトを訪問する時に楽しませてくれるだけでなく、アプリケーション構築のための素晴らしいツールをウェブ開発者に提供してくれます。たくさんの優れたブラウザ拡張機能の中から選べます。ソフトウェアエンジニアの生産性を高め、アプリケーションの開発を高速にし、バグの発見に役立つものを集めました。
javascript:(()=>{constt=location.href.split("/");if(t[2].endsWith("twitter.com")&&t[3]){consto=t[3].split("?")[0],i=prompt("Search from @"+o,"");i&&(location.href="//twitter.com/search?f=live&q="+i+"%20from:"+o)}})();
使い方
検索対象とするTwitterアカウントのホーム、またはツイートのページを予め開いておく。
ブックマークレットを実行。
入力画面が表示されるので、キーワードを入力する。
簡潔な説明
圧縮前のコードはこちら。
(()=>{// ----------constpath=location.href.split('/');// twitter ID checkif(path[2].endsWith('twitter.com')&&path[3]){// idconstid=path[3].split('?')[0];// no parameters// keywordsconstkeywords=prompt('Search from @'+id,'');// search resultsif(keywords){location.href='//twitter.com/search?f=live&q='+keywords+'%20from:'+id;}}// ----------})();
