<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on よ〜んの雑記</title><link>https://mu7889yoon.github.io/tags/javascript/</link><description>Recent content in Javascript on よ〜んの雑記</description><generator>Hugo</generator><language>ja-jp</language><lastBuildDate>Tue, 07 Apr 2026 21:49:15 +0900</lastBuildDate><atom:link href="https://mu7889yoon.github.io/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>ブックマークレットとかいう魔法</title><link>https://mu7889yoon.github.io/posts/bookmarklets-a-kind-of-magic/</link><pubDate>Tue, 07 Apr 2026 21:49:15 +0900</pubDate><guid>https://mu7889yoon.github.io/posts/bookmarklets-a-kind-of-magic/</guid><description>&lt;p&gt;よ〜んです。&lt;/p&gt;
&lt;p&gt;ブックマークレット、知ってます？ 拡張機能とかが当たり前になった今だと、名前すら聞いたことない人もいるかもしれないですね。枯れてるっちゃ枯れてるんですが、現役で使えるやつなんですよね&lt;/p&gt;
&lt;h2 id="ブックマークレット"&gt;ブックマークレット&lt;/h2&gt;
&lt;p&gt;ブックマークレットは、JavaScript をブックマークとして登録して使うやつです。&lt;/p&gt;
&lt;p&gt;ブックマークを押すと、そのページで簡単な処理を実行できます。&lt;/p&gt;
&lt;p&gt;拡張機能を入れるほどでもないけど〜みたいな時にちょうどいいやつです。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88"&gt;ブックマークレット - Wikipedia&lt;/a&gt;&lt;/p&gt;
&lt;h2 id="最近ここ3年ぐらいで作ったブックマークレット"&gt;最近(ここ3年ぐらい)で作ったブックマークレット&lt;/h2&gt;
&lt;h3 id="ecs-execするためのやつ"&gt;ECS Execするためのやつ&lt;/h3&gt;
&lt;p&gt;cloudshellなどからecs execするために、以下のようなコマンドを組み立てる必要がありました。（過去形）&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"&gt;&lt;code class="language-sh" data-lang="sh"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;aws ecs execute-command --cluster &lt;span style="color:#e6db74"&gt;${&lt;/span&gt;CLUSTER_NAME&lt;span style="color:#e6db74"&gt;}&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;\
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#ae81ff"&gt;&lt;/span&gt; --task &lt;span style="color:#e6db74"&gt;${&lt;/span&gt;TASK_ID&lt;span style="color:#e6db74"&gt;}&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;\
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#ae81ff"&gt;&lt;/span&gt; --container &lt;span style="color:#e6db74"&gt;${&lt;/span&gt;CONTAINER_NAME&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; --interactive --command &lt;span style="color:#e6db74"&gt;&amp;#39;/bin/sh&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;ECSのタスク詳細ページで実行すると、URL からクラスター名・タスクID・コンテナ名を抜き出して &lt;code&gt;aws ecs execute-command&lt;/code&gt; のコマンドを組み立てて、クリップボードにコピーしてくれます。あとは CloudShell に貼るだけ。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;javascript&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt;(() =&amp;gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;url&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;new&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;URL&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;location&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;href&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;segments&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;url&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;pathname&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;split&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#34;/&amp;#34;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;cluster&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;segments&lt;/span&gt;[&lt;span style="color:#a6e22e"&gt;segments&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;indexOf&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#34;clusters&amp;#34;&lt;/span&gt;) &lt;span style="color:#f92672"&gt;+&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;];
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;task&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;segments&lt;/span&gt;[&lt;span style="color:#a6e22e"&gt;segments&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;indexOf&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#34;tasks&amp;#34;&lt;/span&gt;) &lt;span style="color:#f92672"&gt;+&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;];
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;container&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;url&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;searchParams&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;get&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#34;selectedContainer&amp;#34;&lt;/span&gt;) &lt;span style="color:#f92672"&gt;||&lt;/span&gt; &lt;span style="color:#e6db74"&gt;&amp;#34;web&amp;#34;&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;cmd&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#e6db74"&gt;`aws ecs execute-command --cluster &lt;/span&gt;&lt;span style="color:#e6db74"&gt;${&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;cluster&lt;/span&gt;&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;&lt;span style="color:#e6db74"&gt; --task &lt;/span&gt;&lt;span style="color:#e6db74"&gt;${&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;task&lt;/span&gt;&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;&lt;span style="color:#e6db74"&gt; --container &lt;/span&gt;&lt;span style="color:#e6db74"&gt;${&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;container&lt;/span&gt;&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;&lt;span style="color:#e6db74"&gt; --interactive --command &amp;#39;/bin/sh&amp;#39;`&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;navigator&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;clipboard&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;writeText&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;cmd&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;})();
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;今はマネージドコンソールからできます😢&lt;/p&gt;
&lt;p&gt;&lt;a href="https://aws.amazon.com/jp/about-aws/whats-new/2025/09/ecs-exec-aws-management-console/"&gt;ECS Exec が AWS マネジメントコンソールで利用可能に - AWS&lt;/a&gt;&lt;/p&gt;
&lt;h3 id="markdownでリンク埋め込むやつ"&gt;Markdownでリンク埋め込むやつ&lt;/h3&gt;
&lt;p&gt;引用する際に、こういう形式↓でクリップボードに入れてくれます。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://mu7889yoon.github.io/"&gt;よ〜んの雑記&lt;/a&gt;&lt;/p&gt;</description></item></channel></rss>