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
この記事は 2年前に書いた「ブックマークレット準備編」の記事へのアクセスが、じわじわと増えてきました。ありがとうございます。 さて、ブックマークレットを作る手順が分かっても、上手にブックマークレットは作れません。先人が作ったウェブアプリケーション(画面)をハックする折れない心が必要です。ブックマークレット自体に制約が多いので、制約の範囲の中でハックする必要があります。 ということで、今回は実用的なものを作るハック手順を紹介しようと思います。私がウェブアプリケーションをハックするときに、見ているポイントや気を付けるポイントを紹介しながら、ブックマークレットに仕上げを仕上げていきます。 はじめに 一番大事なのは要件を決めること いきなりストレートの直球を投げ込みました。別にブックマークレットに限ったことではないですね。プログラムを作る上でとても大事なことです。 ブックマークレットは単独で動くア
業務でもプライベートでも、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
調べ物していて、これはあとで見返したいとか、メモを取りたいというときに、これまで公式に提供されているScrap to のBookmarkletを使っていたけど、Scrap元のホストも機械的に記録しておくと便利そうだなと思い、Bookmarkletを改造して、location.hostをタグとして追記するようにした。 あの情報はgithubのドキュメントでみかけたはず、くらいの情報で探しに行けて便利で、github.comというページの関連ページにはgithub.comからクリップしたページが並ぶという形になった。 https://scrapbox.io/hitode909/github.com Bookmarklet生成場 コード生成するコーナーを置いておくのでご利用ください。本体側のBookmarkletの改修からは置いていかれるので、ある日動かなくなる可能性はある。プロジェクト名を入力
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. Installation Create a new bookmark in your browser, then copy/paste the minified code below into the URL field. You can customize the output using the optional variables at the top, and the template at the bottom. The default template is designed for use with the Dataview plugin. If you make changes I
なにかツールを作るまでもないが、ブラウザ上での作業を簡略化したい場合、ブックマークレットを使うケースがあり、色々と工夫していたら一つの記事になりそうだなと思ったので、いつも使っている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
0 push to talk.md Short link to this page: http://caseywatts.com/ptt Other gists & tricks: http://caseywatts.com/gists-and-tricks Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book Push To Talk in a Google Hangout (Meet) Save this bookmarklet. Right-click on boomarks toolbar Add Page... Name: PTT (push to talk) or whatever you'd like (maybe short so it
SlackやGithubでリンクを共有する際に面倒だなーと思ったところ、同僚も面倒と思ってたらしいので用意してみました. ブックマークレットの登録方法 - Qiita cp link リッチテキストのリンクをクリップボードにコピーします タイトルに#から始まる数字があればそこのみリンク タイトルがない場合はURLがリンク名 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.in
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でちょちょっと表示をいじることにしました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く