ブックマークレットを作っていて動作を確かめたいとき毎回こんなことをやっていました。 １，Visual Studio Codeでブックマークレットのソースコードを編集する。 ２，Visual Studio Codeの標準機能（JoinLines）を使ってソースコードを1行にし、Ctrl + Cでコピーする。（1行にするのは必要ないかもしれないです。） ３，Chromeに移動してブックマークレットを右クリックし「編集」を押してCtrl + Vでソースコードを一行にしたソースコードを貼り付ける。 ４，「保存」を押して、ブックマークレットの動作を確かめたい対象ページを開きブックマークレットを実行し動作を確かめる。 ざっとまとめるとこんな感じなのですが、結構面倒くさかったです。 ブックマークレットが思うように動かないと、この作業をする回数がさらに増えるのでさらに面倒くさいです。 そこでブックマークレ
ブックマークレットで文字列をコピーする (クリップボードに入れる) というのをよく書く。 昔ググってへ〜と思ったまま 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
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
ブックマークレットとは？ ブックマークレット (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、買い物をしたい時はAmazon、場所を調べたい時はGoogleMap 検索しなくちゃいけないサイト多くない！？ Googleの検索窓から直接調べたいキーワードを打てばある程度、調べられるけどもっと細かく調べたいんじゃあ！！ 特定のサイトの中だけを検索したい時ってありますよね？ いちいちサイトに遷移して検索窓にキーワードを打つのがめんどくさい どうすればいいのだ？ ChromeにはOmnibox（アドレスバー）の機能に検索エンジンを切り替えて検索することができる機能があります。 ※規定の設定だとGoogleになっています。 Omniboxに検索エンジンの設定をすることでGoogle以外から検索することができます。 興味がある人はぜひ調べて見て下さい！！ OmniBoxは良さそうだが、検索エンジンの設定はものすごく
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
ブックマークレットで文字列を出力する際によく見かけるのが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から作成して埋めこ
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
サイト内の画像を抽出し、フォトビューワーライクにドロワー表示するブックマークレット。 ##主な機能 サイト内の<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:fi
ブックマークレットとは、JavaScriptコードが保存されたブックマークのことである。クリックすると、そこに保存されているJavaScriptコードが実行される。 通常のブックマークのアドレスには、http:で始まるURLが保存されている。 ブックマークレットのアドレスには、javascript:で始まるJavaScriptコードが保存されている。 はじめの一歩 WebブラウザのURLフィールドに以下のように入力して、returnキーを押してみると... javascript:alert("hello world!!") アラートダイアログが表示された！ URLフィールドのアイコンをブックマークバーにドラッグ＆ドロップすると、そのJavaScriptはブックマークレットとして保存される。 あるいは、aタグのリンク先にJavaScriptを設定しておけば、そのリンクをドラッグ＆ドロップして
これまでプライベート・業務の両面で個人的にブックマークレットを作っては利用してきました。 我ながらだいぶ小慣れてきた感じがあります。 このブログでもブックマークレット関連のネタは書いてきましたが、ブックマークレットそのものの作り方に関してまとめていなかったので、あらためて書いてみます。 そもそもブックマークレットって何やー シンプルに言うと「ブックマークに登録しておいて、自分の好きなタイミングで実行できるJavaScriptのコード」です。 実例として、 WordPress は文章を引用して素早く記事を作成するための Press This というブックマークレットが標準で付いてきます。 ブックマークレットでできること 長らく草案だった HTML5 がついに勧告され、近年では ECMAScript 2015(ES2015, ES6) がモダンブラウザに着々と実装されてきています。 この状況を
前回のエントリの応用で、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
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, 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
Cookpad Recipe Scalable - Hatena::Let 最近よくクックパッドのレシピを見て料理を作っているんだけど、作りたい分量が合わないとき頭で分量を計算しなおすのが面倒くさいので作りました。 ブックマークレットを起動すると「操作」エリアが追加され、テキストエリアに数字を入れて「倍」ボタンを押すと分量を変更してくれます。あと、おまけで「ヘルシーに」を押すと肉と油を減らしたり「うまそうに」を押すとその逆をやってくれたりする機能もつけてみました。 豚汁 100 人分とか巨大なケーキの分量を知ることができて便利だと思う (もちろん 0.5 とか入力して 4 人分を 2 人分に減らすこともできる)。ただ、レシピ掲載者のひとたちの表記ゆれを全部カバーできている自信が全然なくてうまく動かないことが多いかもです。 (サンプル画像としてプロの味！の豚汁 by Fumiaを使わせていた
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ページを開く
