You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
業務でもプライベートでも、Bookmarklet 無しには生きていけない私です。 ちなみに最近私が書いた便利そうなコードは、後述するコチラです。 ところで Bookmarklet ってなんなんでしょう...?思えば Bookmarklet の公式リファレンスみたいなものを見たことがありませんでした。起源は?どうやって実行できている?調べてみました。 間違ってたらコメント欄で教えてください。 起源 調べてみると下記サイトが随分古くからあるようで参考になりそうです。このサイトが Bookmarklet を命名したのかな? このページによると、Bookmarklet のアイデアは Netscape JavaScript Guide から来ている、とあります。 http://developer.netscape.com/docs/manuals/communicator/jsguide/misc.
はじめに 前回のブックマークレットの記事を書いている途中で、Safari で動作確認をした際に、どうも動かないなあと思ったので調べてみました。 Safari 限定です。確認した Safari のバージョンは14.1.2(15611.3.10.1.5, 15611)です。 動かない Bookmarklet 以下のブックマークレットは動きませんでした。開発ツールのコンソールでは、期待通り最初の alert(); が実行されますが、ブックマークレットにすると動きません。 javascript:(function(){alert();return;const s='a';var a='a'.replaceAll(s,'%'+'20').replaceAll('/','%'+'2F');})(); javascript:(function(){alert();return;const P=Strin
0.初めに 私は、非エンジニアなのでこの記事は初心者向けです。 Qiitaや掲示板を閲覧するときに、自動スクロールして、ぼーっと眺めたかったのでそういうブックマークレットを探してみました。 1.見つけたもの 以下のページにひな形になる情報がありました。 速度調整できる自動スクロールのブックマークレット | MIII.me https://miii.me/4326.html 個人的には、以下の点が、不便だったので変更してみました。 ブックマークバーから起動/停止はちょっと使いづらい スクロール速度が変更できない 2.作った物 以下の画像の通りです。 処理の流れは以下。 ブックマークバーで「スクロ」クリック スクロールボタンが常に画面左上部に表示される スクロールボタンを押すとスクロール速度を入力するプロンプトが表示 プロンプトでOKを押すとスクロール開始 もう1回スクロールボタンを押すと停止
Webサイトの運用業務では繰り返し行うルーティン作業が数多く発生します。特にバナー画像やテキストのちょっとした修正は日常茶飯事では無いでしょうか? この記事では特定のページから任意の画像もしくは画像を一括でダウンロードする作業を自動化させる方法を紹介していきたいと思います。 繰り返し作業を自動化させる方法には様々な手法がありますが、ここではブラウザが持つブックマークレットという機能を使って自動化処理を行いたいと思います。 この記事を読んでできること右クリックでの都度画像保存から脱却できるサムネイルやスライダーなど手動では一度に画像保存しにくい操作の自動化ブックマークレットに関しては以下を参照してみてください。 ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。 ブックマークレット
readme.md By @kepano Visit my website to see a demo and find more information about this project. Now available as a browser extension Obsidian Web Clipper is now available as a browser extension, which makes it more customizable and solves issues related to running third-party scripts on web pages. I originally created Obsidian Web Clipper as a bookmarklet in 2021. The bookmarklet is still availa
なにかツールを作るまでもないが、ブラウザ上での作業を簡略化したい場合、ブックマークレットを使うケースがあり、色々と工夫していたら一つの記事になりそうだなと思ったので、いつも使っているTIPSを共有します ブックマークレットって?ブックマークから起動する簡易的なプログラムです。 ブックマークのURLのところにjavascript:からスタートする文字列を入れると、JavaScriptが動くというものです。 JavaScriptが動くので基本何でもできるのですが、入力欄が一行なので開業をベースとした通常のJavaScriptとは違った書き方を推奨されます。 書き方のコアコンセプト基本的に短めにするカンマやセミコロンなどで明示的に文の区切りを指定するTIPSクロージャーでくくるブックマークレットはグローバル変数を汚染するため、スコープを制限するためにクロージャーでくくることが推奨されています G
javascript: (function() {function bR(a,b,c,d){return function(i){let f=i;let g;while((g=a.exec(i))!=null){let e=g[0].substr(0,g[0].length-b).replace(',','').replace('\u2212','-').trim();e.endsWith('-')&&(e=e.substr(0,e.length-1));let h=Math.round(c(e)*10)/10;isNaN(h)||(f=f.replace(g[0],' '+h+' '+d));}return f;};}function checkString(a){return a=iR1(iR2(iR3(iR4(iR5(iR6(a)))))),a=foR1(foR2(foR3(foR4
I forgot that Scroll to Text fragment was a thing that is launching soon in Chrome (81 and not 80 as mentioned in Chrome Status), until I saw this Tweet. I love this feature, it let's you link to more than just named elements. Domenic Denicola asked if there was an extension that did this. I don't think you need one, because bookmarklets are awesome and underused. I decieded that it should be pret
Bookmarklet: Compare SERP titles to actual onpage titles and h1 heading aka: the #titlegeddon bookmarklet Google has stirred up some dust all around the SEO world with their rewriting of websites’ titles. SEO folks are now trying to figure out how Google is rewriting their titles. Fede Gómez, a WordPress developer from Toledo, Spain has come up with a nice JavaScript bookmarklet to be used on Goog
javascript:(c=>{const d=b=>c.createElement(b),e=(c,a)=>c.appendChild(a),f=(d,a)=>e(d,c.createTextNode(a)),g=c.body,h=location.href,i=c.title,j=i.match(/(?<=\W|^)(?=\W|$)#\d+/),k=d("span"),l=d("a");l.href=h,j?(f(l,j[0]),f(k,i.slice(0,j.index)),e(k,l),f(k,i.slice(j.index+j[0].length))):(f(l,i||h),e(k,l)),e(g,k),c.getSelection().selectAllChildren(k),c.execCommand("copy"),g.removeChild(k)})(document);
title: option: " -> \x22 (for Opera) script: (function(){ })() script(space removed): bookmarklet: bookmarklet
なるほど、Amazon の書籍情報を引っ張り出してくるのか、考えてもみなかった…考えない人生ツライ。と言うことで、Bookmarklet を自分向けに作り直してみました。 それがこちらの Scrapbox にあります。 元々のコードを次のようにリファクタリングして、自分のわかりやすいように書き換えました。 古い Javascript から ES5/6 仕様へ 行数削減 (古い人なので、複雑でも短ければ勝利的な考え方ある。良くない) if 文の排除 (現時点ではまだ一つ残ってるけど) var やめて、全部 const 化 Amazon アフィリエイトIDは、定義を先頭に 表示するフォーマットの変更 メタデータを使いたかったので、表示用とメタデータ用とでデータを準備しました 久しく Javascript触ってなかったけど、元のコードがあればいけますね。良かった。 現時点でのコードを、一応残して
下記の記事の通りです(ぇ How to add favicons to bookmarklets in Chrome — Marc Jenkins HTML が弄れる前提で話を進めますと、 ブックマークをエクスポート 以下を含んだ状態にしておいてください 使いたい Favicon が入ったブックマーク Favicon を付けたいブックマーク エクスポートしたブックマークをエディタで表示 Favicon を含んだ A タグの ICON 属性をコピー Favicon を付けたいブックマークの A タグにペースト 保存してブックマークにインポート 以上! これでページタイトルなしのブックマークバーを使い倒せます Oh!Yes!
Bookmarklet とは ブックマークの URL に登録して使う、javascript のプログラム アラートを出したり入力欄に自動入力したり、いろいろできる コードには以下の特徴がある 先頭にjavascript:をつける コードは一行だけ 例)以下のコードをブックマークの URL に登録し、ブックマークをクリックすると、Hello Bookmarkletとアラートが表示される 経緯 開発やテストの時は名前などを入力フォームに何百回も入力する(よね?)。今まで手入力だったので、ボタン一つで入力できるようにしようと考えた しかし Vanilla JS なら簡単だが、React はひと手間増えるようだった。そこで詰まったので備忘録をかねて投稿する 作成手順(Vanilla JS) 普通の javascript なら簡単にできる。 コード作成 以下のコードを作成する コンパイル Closu
ChatGPTの過去ログが時々下の図のようになってアクセスできなくなるので、会話がうまくいった時はローカルにも保存したいと思い、 今日の午前中、ChatGPTと一緒に、Web上でのチャットをMarkDown形式でダウンロードできるBookmarkletを作成しました。開発には約2時間ほどかかりました。 このプロジェクトは、会話が長くなったため二部構成に分けて進めました。最初の短い土台を除いて、コードをほとんど書かずに、ChatGPTに生成してもらいました。途中で何度も変更を加えていく中で、最初に変更した部分が元に戻ってしまいましたが、ChatGPTに指摘するとすぐに修正されました。 JavaScriptのコードは無事完成しましたが、minifyしてBookmarkletへの変換はうまくいかず、僕の根気が続かなかったため、完全には成功しませんでした。 minify して Bookmarkle
Text FragmentsはURLのアンカー以降に特殊なコードを付けることで、URLを開いた時に該当部分をハイライトしてくれる仕組みです。今のところGoogle Chrome 81以降が対応しています。 そんなText Fragmentsを使ったURLを生成し、さらにツイートできるのがTweet-Text-Fragment-Link-Bookmarkletです。 Tweet-Text-Fragment-Link-Bookmarkletの使い方 文字列を選択して実行するとツイート用のウィンドウが開きます。 ツイートされたURLを開くと、選択した文字列がハイライトされます。 Tweet-Text-Fragment-Link-Bookmarkletを使うことでText Fragmentが簡単に使えます。縦に長いWebブラウザに対して、どこを見てもらいたいかを明示できます。 Tweet-Text
bookmarkletをnpm scriptで簡単に作成できないか検討してみました。 前提 即時関数化 メインの話とはずれますが、 bookmarkletはglobal汚染してしまうので、即時関数化が必要です。 これはJS側に書いておくことにします。 (※即時関数もbookmarklet生成時に追加することは可能ですが、今回やってませんよという話。) ご参考) IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN minify esbuildはtsでの利用も可能で軽量なのと、minifyオプションが付いていて簡単に1liner化できます。 今回は、これを利用することにしました。 npm script shellを書いてもよかったのですが、JSで完結したく、npm scriptでできないか検討しました。 当初 echo -n javascri
1. Add your Mastodon instance: 2. Drag this link to your bookmarks bar (or click it to try it out with this page) Toot! 3. Or add the following as a bookmark URL: NB: If you select text before clicking, it will add that to the toot as well!
radiko でラジオを聞くことが多いのだが、再生速度を変えられないのがすごく不便。 アプリ版は手を出しづらいので、Web版に再生速度変更機能を追加する bookmarklet を作った。 実行結果 ついでに、指定秒ジャンプ機能もある。 コードは Gist に置いた。 radiko に再生速度変更ボタンと指定秒ジャンプボタンを追加する bookmarklet ブックマーク作りやすいように現在のバージョンでリンクを作ってみた。 link (terser で短縮後、はてなブログのMarkdown解釈がバグっている(?)部分への対処で少し手を入れているので、そのバグが直されたらうまく動かないリンクになるかも) PC版 Firefox & Chrome と Android版 Chrome にて動作確認済み。Android版 Firefox はあるバージョンから bookmarklet が起動できな
If you find yourself saving lots of notes from various online articles into Roam Research, it can become tedious to format them properly to include the source. This is a simple bookmarklet that does the job for you. It works with any browser, including Chrome, Firefox and Safari. As you can see in the gif below, it can help you save snippets of content in seconds. (if you somehow stumbled upon thi
はじめに こんにちは。友人(IT業界勤めではない)から「JavaScript の勉強をしているが、せっかくなので何かつくってみたい」という話を聞きました。そこで僕は Bookmarklet をつくってみてはどうか という提案をしてみました。 今日はそんな実際にあった話をもとに記事を書いてみたいとおもいます。 Bookmarklet ってなに? そもそもブックマークとはWEBサイトのURLをブラウザに登録しておき、好きなタイミングで登録したURLを呼び出せるようにする機能のことですよね。このあたりは普段インターネットを使っている方はよくご存じかとおもいます。(この記事を見ている時点でインターネットをつかっていますので聞くまでもなかったと書いてからおもったw) これに対し、ブックマークレットですが同じくブックマークの機能を使うことには変わりありません。違うのはURLの代わりに JavaScri
はじめに タイトルは「できない」としましたが、けっして Edge に何か不具合や落ち度があったわけではありません。この記事では「できない事態が起きたときに、コードの何を疑うべきか。どう対処したか」について記します。 Edge で発生しました。他のブラウザではまだ確認していません。 発生した事象 Bookmarklet を作成していて、その中に以下のような処理がありました。 お察しの通り、URL エンコードした文字列をいろいろと操作する処理の一部です。 これが Edge の Bookmarklet にしたとたん、何も replace されないということがおきました。 しばらくハマったのですが、原因は、作成した Bookmarklet のコードをブックマークに登録した瞬間、以下のようなコードに書き換えられてしまったことです。
掲題のことをやりたくて、こちらの記事を見つけた。 新規タブの空白ページでも動作するブックマークレットを作る - Corredor が、こちらの記事でも、その中にリンクされているページ(※)でも、いまいち、わからなくて、ちょっと試行錯誤したので、書いておく。 javascript bookmarklet does not work in new tab in chrome - Stack Overflow javascript - Bookmarklet on blank page - Stack Overflow 書かれている内容 ブックマークレットは、そのページで動作させたいJavaScriptをjavascript: (function () { ~ })();で囲む。 上記に書かれている解決法は、このようなもの。 代わりに、ホームページを次のようなものに設定してみてくださいdata:
AdobeFontはAdobeCCを使っていると無制限に使えるので便利なのですが、1つずつ(フォントパックもあるけど)アクティベートにしなければ利用できません。 大学のアカウントでフォントをまたアクティベートする必要があったので一括でオンにする方法を探していたのですが、パソコンの負荷的にもそれはできないみたい...? ページ内のフォントを一括で開くBookmarklet 少しでも手間を省こうと、今開いてるページのフォントを全て新規タブで開くBookmarkletを作ったのでメモがわりに載せておきます。 AdobeFont|ページ内のフォントを全て開く javascript: (function () { let link = document.querySelectorAll(".adobe-fonts-family-card--link"), i = -1; while (++i < l
__ext_name__ __ext_name__ __ext_name__ __ext_name__ __ext_name__ __ext_name__ こんにちは、PEKETTER TECH(ペケッターテック)の( ᑸ )よだれ/YODAREです。 このページでは、GoogleのChromeウェブストアで2024.9.11にリリースされた、弊サイト開発のX(旧Twitter)を快適にする「__link_ext_page__」(バッジニューカラー拡張)の iPhone/iPad OS16.6以降 Mobile Safari向け「ブックマークレット版」を無料でカスタマイズして入手できます。 バッジニューカラー拡張 for X Twitter では、ざっくり次のようなことができます。 フォロー関係性による青バッジカラー変更 フォロイー フォロワー 相互 FF外 FF外100万人フォロワーホ
Bookmarklet(ブックマークレット)とは 詳細はこちら ウィキペディア 簡単に言えばブラウザのブックマークにURL代わりにjavascriptを入力して保存しておいて。 そのjavascriptを実行したい時に該当のブックマークをクリックするというものです。 たとえばブックマークにjavascript:alert('hoge');と登録しておけば、 そのブックマークをクリックしたら<a href="javascript:alert('hoge');">hoge</a>をクリックした時と同じ事が起きます。 作り方は色々ありますが、uglify-jsを使って作成する方法を紹介します。 javascriptの作成 まず、適当にjsファイルを作って適当に実行したいjavascriptのコードを書きます。 今回は例としてページ内のdivタグの数を数えるスクリプトを作ります。 以下のコードをs
リゼロの2周目を見終わって「はぁやっぱりレムかわいいよぉ」となって、その流れでAmazonでレムのフィギュアをひたすらほしい物リストに入れた後、そのリストページを見て思うわけです。 リンク一覧を取得したい、と。 これくらいならブックマークレットでできるといいなと思い探してみたところ、合計金額を表示してくれるものは見つけたのですが、リンク一覧取得がほしかったので作りました。 Amazonのほしい物リストのページを開いて上記ブックマークレットを実行するとクリップボードにリンク一覧がコピーされます。 javascript:var%20lst='',add='',r=document.getElementsByClassName('a-link-normal');for(var%20i=0;i<r.length;i++){if(r[i].id.substr(0,9)=='itemName_'){l
クオートで囲うの面倒くさい 選択して"やshift+@で囲ってくれるエディターの便利機能に体が慣れてしまった。 誰か作ってるだろうけど、練習用に作ってみた。 使い方 コピーしてブックマーク編集のURL欄に貼り付け、使いたい場面でそれをクリック。 カーソルが十字になる。 文字を選択して`とか"とか{とか押すだけ。詳しくはソース参照。 javascript: /* eslint semi: "error"*/ (() => { function sandwich(p1, p2) { if (p2 === undefined) { p2 = p1.slice(p1.length / 2); p1 = p1.slice(0, p1.length / 2); } var textarea = document.activeElement; var pos_start = textarea.selec
Red Hatのドキュメントが、access.redhat.com/documentation から docs.redhat.com/ja/documentation のようにかわり、6月20日から従来URLからのリダイレクトが行われるようになりました。 それにともなってちょっとサイトデザインもちょっと変わりました。画面幅の使い方がうまくなくて、幅1280pxで表示しようとするとほとんどのコマンドやログの例が見切れてしまう。なおfocus modeのトグルを有効にしても目次が消えるだけで幅は狭いままです……。 docs.redhat.comの幅1280pxでの表示例。ほとんどのコマンドやログの例が見切れている割に空白が多い 自分は2560x1440のディスプレイを2分割して使うことが多いため、これだと困ってしまう。というわけでbookmarkletでちょちょっと表示をいじることにしました。
ツイ廃の @riocampos ですw しかしとうとうツイ廃から離れる日が来てしまったようです。 Twitterでは日記にならなくなった 残念な事に Twitter は API が有料化され、その影響で、私の Twitter ライフにとてもとても重要であった Twilog がサービス停止に追い込まれました。このため、 Twitter から Misskey.io への移行を行っております。 Mastodon でも良かったのですがなんとなく Misskey にしました。行き先は りおかんぽす (@riocampos) | Misskey.io です。Misskey や Mastodon など ActivityPub 対応の SNS からは @riocampos@misskey.io で検索してもらえれば見つかります。 そして日記目的には notestock を使います。ありがたやありがたや。
それって意味有るの? ある。正直手でBookmarkletを書くのはしんどい。 規模が大きくなればなおさら。 とは言えFirefoxを基準に26kbあたりまで書くとなるとしんどい。 qiita.com 手書きBookmarkletがしんどい理由 ファイル分割してClassごと別にして処理を使いまわしたい 改行制御を考えたくない IED(VScode)でESLintやPrettierの恩恵を受けたい。勝手に改行される。 Git、Githubで差分管理をしたい。ここを1行だと差分管理は難しい。 実際にできるのか? できる。 消す処理を Webpackでビルドして Terserでコメントなし、minifiyでいける。 ただこの場合、外部ライブラリ利用のライセンス違反の誹りは免れない。 コメント付きの場合でも、URLの//を除いてコメント消す処理を入れて改行を半角スペースにするなどでなんとかできる
序 React.jsで構築されたサイトをBookmarkletで操作するための何か なに? DOM操作でINPUTエレメントなどに値を入力/変更してもReact側には伝えられないためReactから無視されます。 これを無理やりReact側に伝えるためにごにょごにょする奴です。 方法 input[type="text"] ごにょごにょした上でchangeイベントを強制発火します。 // React.jsのデータをイベントを発火することで無理やり書き換える function setValueToInput(value, element) { const lastValue = element.value; element.value = value; const event = new Event('change', { bubbles: true }); const tracker = el
コレ抜きでブログは書けない!! ブロガーにオススメの厳選ブックマークレット!! 以前、記事でブックマークレットってなんぞや?について書きました。今度は私が実際に使っていて、現在進行形で役に立ちまくっているオススメのブックマークレットを紹介します!! ブックマークレットをオススメしている理由は、ブラウザのお気に入り(ブックマーク)に登録でき、ワンクリックで起動できるという手軽さだけではありません。なんと言っても軽いんです! 今回は「ブロガー向け」に絞ってのお勧めブックマークレットを紹介します! ブロガーにオススメのブックマークレット では私も普段から愛用しているブロガー向けのブックマークレットを5つを紹介します。 今回の5つは、厳密には自分に合ったブックマークレットを作成する、「ブックマークレット・ジェネレーター」です。そのまま使えるのではなく、自分でフォームに入力して設定する必要があります
Memeplex「ChatGPTを擬人化。日本人の男性風で。」浮世絵風でと依頼して描いてもらいました ChatGPTでデータベースの設計をやらせてみたとか色々な事例があったので、自分でも試してみました。 以下、やり取りを貼っておきます。 自分の質問 表示されているURLからタイトル・URLを取得し、Markdownのリンク記法に変換するbookmarkletを作って欲しいです。 ChatGPTさんの回答 以下が、要求されたbookmarkletです。 javascript:(function(){var%20url=window.location.href;var%20title=document.title;var%20mdLink='['+title+']'+'('+url+')';prompt('Markdown Link:',mdLink)})(); このbookmarkletを使
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く