ブックマークレット開発環境を作りたい｜0123456
ブックマークレットを作っていて動作を確かめたいとき毎回こんなことをやっていました。 １，Visual Studio Codeでブックマークレットのソースコードを編集する。 ２，Visual Studio Codeの標準機能（JoinLines）を使ってソースコードを1行にし、Ctrl + Cでコピーする。（1行にするのは必要ないかもしれないです。） ３，Chromeに移動してブックマークレットを右クリックし「編集」を押してCtrl + Vでソースコードを一行にしたソースコードを貼り付ける。 ４，「保存」を押して、ブックマークレットの動作を確かめたい対象ページを開きブックマークレットを実行し動作を確かめる。 ざっとまとめるとこんな感じなのですが、結構面倒くさかったです。 ブックマークレットが思うように動かないと、この作業をする回数がさらに増えるのでさらに面倒くさいです。 そこでブックマークレ
文字列をコピーするブックマークレットで使うクリップボードのAPI改めて見てた - hogashi.*
ブックマークレットで文字列をコピーする (クリップボードに入れる) というのをよく書く。 昔ググってへ〜と思ったまま Document.execCommand() - Web API | MDN をずっと使っていた。(あと HTMLInputElement.select() - Web APIs | MDN も知らなくて、 Selection を使って頑張って文字列選択していた。) const value = 'これをコピーしたい'; // input をつくって body に入れる const input = document.createElement('input'); document.querySelector('body').appendChild(input); // フォーカスしたときスクロールされてしまわないように画面内に出す input.style = 'positio
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
ブックマークレットの制作環境に最適だった… CodePenを使ってオリジナルのブックマークレットを開発しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ブックマークレットとは？ ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである (Wikipediaより) 「おすすめ ブックマークレット」などで検索すると、あなたのインターネットライフにぴったりな良いものが見つかるかもしれませんが、見つからないかもしれません。 ブックマークレットを作ろう めぼしいブックマークが見つからなかった？ ……エンジニアたるもの、ないものは作りましょう！ それでは作りながら見ていきましょう！ 今回作るものはこちら！ See the Pen Bookmarklet LIGblog DEMO by rider (@mtmtkzm) on CodePen. ［LIGブログを沈める］ボタンを、ブラウザのブックマークバーまでドラッグアンドドロップしてみてくだ
ブックマークレット実行時に外部ファイルをロードして使う - ザリガニが見ていた...。
ブックマークレットの書き方の段階的な発展の仕方の続き。 基本 前回の外部ファイルをロードして実行するブックマークレットは、こんな感じだった。 javascript: (function(d,s){ s=d.createElement('script');s.src='//dl.dropboxusercontent.com/u/XXXXXXX/bookmarklet.js';d.body.appendChild(s); })(document) Webページのbodyタグに以下のようなscriptタグを追加して、 シンプルに、たった一つの外部ファイルをロードしているのだ。 <script src='//dl.dropboxusercontent.com/u/XXXXXXX/bookmarklet.js'></script> 複数の外部ファイルをロードする では、外部ファイルを二つ以上ロードし
俺の最強検索ツール（ブックマークレット）を見てくれ！！ - Qiita
検索する対象のサイトが多いんじゃあー！！ 技術系の記事を読みたい時はQiita、買い物をしたい時はAmazon、場所を調べたい時はGoogleMap 検索しなくちゃいけないサイト多くない！？ Googleの検索窓から直接調べたいキーワードを打てばある程度、調べられるけどもっと細かく調べたいんじゃあ！！ 特定のサイトの中だけを検索したい時ってありますよね？ いちいちサイトに遷移して検索窓にキーワードを打つのがめんどくさい どうすればいいのだ？ ChromeにはOmnibox（アドレスバー）の機能に検索エンジンを切り替えて検索することができる機能があります。 ※規定の設定だとGoogleになっています。 Omniboxに検索エンジンの設定をすることでGoogle以外から検索することができます。 興味がある人はぜひ調べて見て下さい！！ OmniBoxは良さそうだが、検索エンジンの設定はものすごく
Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
ブックマークレットで複数行の文字列をtextareaに出力する - A2のブログ
ブックマークレットで文字列を出力する際によく見かけるのがpromptですが、promptは1行しか出力できません。メールのテンプレとか複数行の文字列を出力できないものかと思い、textareaの.defaultValueを利用してみることにしました。 例えば、テキトーですがこんなtextareaタグをぶっこむ、みたいな。 <div id="divtext" width="100%">コピー用 <form id="form1" width="100%"> <p id="p1" width="100%"> <textarea id="textarea" cols="100" rows="10"> お世話になっております。 どうぞよろしくお願いいたします。 </textarea> </p> </form> </div> この様なHTMLをブックマークレットのJavaScriptから作成して埋めこ
Octopressでブログを書く時に便利なブックマークレット
B! 2 0 0 0 ブログを書いてる時に参考にしたりしたページの リンクなどを簡単にブログ用に整形して取得するための ブックマークレットについて整理したのでまとめておきます。 ブックマークレット Markdown方式で、タイトルにリンクを付ける 選択範囲をブロッククォートにする Amazonの画像だけのリンクを作る Amazonの説明入りリンクを作る まとめ ブックマークレット 追記: 2017/01/10 SSL化。 追記ここまで Markdown方式で、タイトルにリンクを付ける ページのタイトルとURLを取ってきてマークダウン方式のリンク([タイトル](URL))に当てはめるだけの ブックマークレットです。 Title with Link 1 2 3 4 5 javascript:( function(){ prompt("[title](url)","["+document.tit
仕事用：サイト内の画像を抽出するブックマークレット - Qiita
サイト内の画像を抽出し、フォトビューワーライクにドロワー表示するブックマークレット。 主な機能 サイト内の<img>タグの画像を抽出。(background-imageは非対応) 元画像のサイズ表示 画像のURL表示 デッドリンクの画像を赤字でアラート表示 ドロワー内の画像をマウスオーバーすると対象の抽出元画像のハイライト 画像をクリックするとアンカージャンプ ※動作確認は、MacのSafari、Chrome、Firefoxでしか行なっていません。 アンカーリンク追加版 アドレスコピー用ソース(Compress & encodeURI加工済み) javascript:(function()%7Bvar%20a=%5B%5D;var%20b=%7B%7D;var%20d='.mi-bd%7Btransition:%20.5s%7D'+'.mi-mw%7B%20position:fixed;%
Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2015年版】 - Qiita
経緯 2014年一年間で読んだ本の情報をまとめようと思った。とりあえずAmazonから一年分の購入履歴を取得したい。 そういえば去年、Amazonの購入履歴の合計金額を取得するブックマークレットが流行ってたことを思い出した。 そうだ、あれを参考にさせてもらおう。 （ ＾ω＾） とりあえず上記サイトのブックマークレットを実行！ ...あれ、動かない。 デバッガで調べてみたところ、どうやら現在Amazon側の仕様が変わっていて利用できなくなっている。 更に探してみたところ、Amazonの新しい仕様に沿った修正版をgistで発見。 こちらのコードからforkして、商品情報を取得する実装を追加した。 (またそのうちamazonの仕様変更で使えなくなるかもしれないが。) 成果物 入力 集計したい年を入力。
ブックマークレットを作るときのTips - Qiita
//javascript: (function(){document.getElementsByTagName("title")[0].innerText;})() 特に多くのページで利用されるブックマークレットは、平凡な変数名だと既に存在する変数名とバッティングする可能性が高いので、このように (function(){...})() することが重要になってきます。関数ブロックは変数スコープを作り、 この中で var で宣言した変数は外部で使われる同名の変数と別のものになります。 また、このようにすることでブックマークレット全体の実行結果として何も返さない(voidを返す)ことも都合が良いです。 すべての変数は無名関数ブロックの変数スコープ内で var を使って宣言しましょう。var は複数の代入をコロンで区切って宣言することができます。 var div = document.create
ブックマークレットの書き方の段階的な発展の仕方 - ザリガニが見ていた...。
ブックマークレットとは、JavaScriptコードが保存されたブックマークのことである。クリックすると、そこに保存されているJavaScriptコードが実行される。 通常のブックマークのアドレスには、http:で始まるURLが保存されている。 ブックマークレットのアドレスには、javascript:で始まるJavaScriptコードが保存されている。 はじめの一歩 WebブラウザのURLフィールドに以下のように入力して、returnキーを押してみると... javascript:alert("hello world!!") アラートダイアログが表示された！ URLフィールドのアイコンをブックマークバーにドラッグ＆ドロップすると、そのJavaScriptはブックマークレットとして保存される。 あるいは、aタグのリンク先にJavaScriptを設定しておけば、そのリンクをドラッグ＆ドロップして
いまさらまとめるブックマークレットの作り方 〜 2016年版 〜 - 無駄と文化
これまでプライベート・業務の両面で個人的にブックマークレットを作っては利用してきました。 我ながらだいぶ小慣れてきた感じがあります。 このブログでもブックマークレット関連のネタは書いてきましたが、ブックマークレットそのものの作り方に関してまとめていなかったので、あらためて書いてみます。 そもそもブックマークレットって何やー シンプルに言うと「ブックマークに登録しておいて、自分の好きなタイミングで実行できるJavaScriptのコード」です。 実例として、 WordPress は文章を引用して素早く記事を作成するための Press This というブックマークレットが標準で付いてきます。 ブックマークレットでできること 長らく草案だった HTML5 がついに勧告され、近年では ECMAScript 2015(ES2015, ES6) がモダンブラウザに着々と実装されてきています。 この状況を
Bookmarkletからクリップボードに文字列をコピー
前回のエントリの応用で、Bookmarkletからクリップボードにコピーすることも出来ました。なにげに便利。てか、もうこれ無しでは生きていけない予感。 今回でっちあげたURIスキーマはset-data-to-clipboard:にしてみた。前回のレジストリと同じような感覚でまず登録。今度はスクリプトをSetDataToClipBoard.jsとします。 REGEDIT4 [HKEY_CLASSES_ROOT\set-data-to-clipboard] @="URL:Set Data To Clipboard Protocol" "URL Protocol"="" [HKEY_CLASSES_ROOT\set-data-to-clipboard\shell] [HKEY_CLASSES_ROOT\set-data-to-clipboard\shell\open] [HKEY_CLASSES
Browser.js [Bookmarklet 16] Google Readerの購読者を調べるブックマークレットを書いてみたよ
The Latest Pop News ＆ More Opera, Firefox, Sleipnir ( Custom ＆ Tips, Latest News, My Opinions, Lovely Music ＆ Movies and so on ...?! No ! More ＆ More !! ) そのブログのGoogle Readerの購読者数を調べる方法と、おまけとしてのそれを実行するブックマークレットを書いてみました。 興味がある人はどうぞ。 （続きはこちら） ブログとかでRSSが用意されているサイト、Webページがありますよね。 そういうところでは、そのページを見ている人が「これは面白い、気に入った、購読したい」と思ったら、RSSリーダーで購読することができます。 まあ、巷にはいろいろなRSSリーダーがありますが、そのなかに「Google Reader」というものがあっ
iPhoneやiPadで開いてるページのタイトルとURLをコピーする(為の)ブックマークレット - 小林商店 松戸支店
iPhone, iPad, Safari, JavaScriptクリップボードにつっこめれば楽なんだけど、ちょっと調べて出来なさそうだったので表示するだけのブックマークレット。Read It Laterのブックマークレットが丁度良さそうだったんで参考にした。 下記のコードをコピーして適当なページで作成したブックマークのURLと置き換えれば登録完了。 javascript:(function(m) { var msg = document.createElement('div'); var h = window.innerHeight; msg.style.cssText = 'display:block; position:absolute; margin:0px; padding:0px; font-size:12px; font-family:Arial; text-align:cen
クックパッドのレシピで分量を自由に変更できるブックマークレット - P A R A G R A P H S
Cookpad Recipe Scalable - Hatena::Let 最近よくクックパッドのレシピを見て料理を作っているんだけど、作りたい分量が合わないとき頭で分量を計算しなおすのが面倒くさいので作りました。 ブックマークレットを起動すると「操作」エリアが追加され、テキストエリアに数字を入れて「倍」ボタンを押すと分量を変更してくれます。あと、おまけで「ヘルシーに」を押すと肉と油を減らしたり「うまそうに」を押すとその逆をやってくれたりする機能もつけてみました。 豚汁 100 人分とか巨大なケーキの分量を知ることができて便利だと思う (もちろん 0.5 とか入力して 4 人分を 2 人分に減らすこともできる)。ただ、レシピ掲載者のひとたちの表記ゆれを全部カバーできている自信が全然なくてうまく動かないことが多いかもです。 (サンプル画像としてプロの味！の豚汁 by Fumiaを使わせていた
Remember The Milkで「あとで読む」を実現するブックマークレット - すらすら はてぶろ
Remember The Milkであとで読むを実現するブックマークレットを書きました。 仕組みは単純で、Remember The Milkの「受信箱のメールアドレス」に対して決まったフォーマットの本文を自動的に入力した状態でGmailのメール送信画面を表示するだけです。メールの送信ボタンだけは手動で押す必要があります。 メールのフォーマットは以下のような感じにしました。 Subject: すらすらはてな List: Action Tags: あとで読む Priority: 1 Due: today URL:http://d.hatena.ne.jp/kslash/ -end- ブックマークレットは以下から。yourRtmMailAddress@rmilk.comは「受信箱のメールアドレス」に、「&body=」のあとの本文は自分の好きなように書き換えてください。 javascript:(f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Trelloのタスクの終了時間を計算するブックマークレット - Hatena::Let