こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
Webページの入力情報を読み取る 例：https://healthcare.mb.softbank.jp/pc/assets/setup/web_explanation_input.php 上記ページで以下のAppleScriptを実行すると... tell application "Safari" activate do JavaScript "(function(d, s, r, url_key, inputs, options, i){ url_key=d.location.protocol.replace(/[^A-Za-z]/g,'_')+'__'+d.location.hostname.replace(/[^A-Za-z]/g,'_')+d.location.pathname.replace(/\\W/g,'_'); inputs=d.getElementsByTagName(
Tweet * WhatFont is not affiliated with MyFonts and/or the WhatTheFont service. ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font
Google Web Fontsのテストはまじめにやる時はちゃんとテストページを作って確認してるけど面倒くさい。Google Web FontsのPreview Textは日本語使えないので、日本語部分との相性やベースラインのずれなどが確認できなくて問題外。でもできるだけ手抜きしたいので、そういう時はSoma FontFriendというブックマークレットをこのWebサイトを開いてから起動している。これは結構昔からあるブックマークレットで元々は単にfont-familyを書き換えるだけだった(と思う)んだけど、今のバージョンだとGoogle Web Fontsからフォントを引っ張ってきて確認できる。愛用してる。 Full preview of Soma FontFriend 起動するとこのような画面が左下(画面位置は矢印をクリックすると移動できる)に出てくるので、中央右の一番上にあるGoog
Locksmith is not merely about giving you emergency or manchesterlocksmith.org.uk it’s so much more than that. This is why we have decided to enlist the basic and some extra services most locksmith services can effectively help you with. They can help you get in if you lost your keys This is perhaps the main task of most locksmith services as keys are vulnerable to losing, falling in to a place whe
Here’s a tiny util that you can save as a bookmarklet and use to crawl the JavaScript object model of any web site. Waldo (thanks to @shinypb for the name!) lets you find and inspect instances by name, type or value, and it can be easily customized to add additional tests. It runs in the console on Chrome, Firefox, Safari and IE>8. It's sourced on github. Feel free to fork it if you want to add mo
サイトのモックアップを作成するツールは多々ありますが、業界の標準デザインを意識してサイトを構築するのであれば、参考にしているサイトは必ずあるはず。 今回は、そんな時に、サクっと参考サイトからモックアップを作成できるツールをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 開いたサイトをワイヤーフレームにするブックマークレット「Wirify」 「Wirify」は、見ているサイトをその場でモックアップにしてくれるブックマークレット。 サイト上の画像とテキストリンクをワイヤーフレーム表示し、画面キャプチャを撮り、追加したいものを画像編集ソフトで追加すればモックアップとして共有することができます。 サンプルモックアップ ↑これは当ブログから作ったモックアップ。ブックマークレットをクリックする
webサービス利用時の大きな悩みの一つが、IDとパスワードです。 便利なサービスが軒を連ねる今、利用するサービスが増える程IDパスの管理の煩雑さも比例して増えていきます。 OpenIDなど、無駄にIDパスを取得する必要がないようにする動きも広がっていますが、当然全てがまかなえる訳ではありません。 また、pc、iphone、ipadとwebに繋がる機器がpcだけではなくなりつつある昨今、機器間を超えてユニバーサルに利用出来るパスワード管理toolの必要性は高まるばかりです。 ユニバーサルパスワード管理と言えば、有名どころでroboformや、1password等もありますが、コレらは有料サービスで、お金を払わないと利用がままなりません。もちろん、お金を払うだけの価値があるサービスな訳ですが、出来れば無料が望ましい。 無料でも大変便利に利用出来るのがlastpassでございます。 iphone
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
82017 Bookmarklets! Create Hatena::Let でブックマークレットをかんたんに作成・公開しよう！ 現在閲覧しているサイトのスクリーンショットをクリップボードに入れます javascript:(async()=>{if(!window.html2canvas){await new Promise(((res,rej)=>{const s=document.cre...
【2012/01/03：更新】 Ust DLの公式ページができました。今後の最新情報はこちらをご確認ください。 Ust DL 公式ページ 【2010/04/13：追記】 スクリプトをアップデートしました。もう少し詳しい説明が以下リンク先にあります。 UstreamのRecordedをダウンロードできる「Ust DL」はUserScriptでもイケます えーと、タイトルの通りですw 録画済のページ（http://www.ustream.tv/recorded/*）でブックマークレットを起動するだけ。 右上のEmbedとかがあるボックスの下に、Downloadリンクが表示されます。動画によって置き場がまちまちみたいなので、場合によっては複数リンクがでますがどっちかが正解です。（悪意のあるリンクに見えちゃいますね…） こちらのリンクをブックマークに保存してください。 Ust DL 一応言っておき
⇒ greasemonkey版はコチラへ 全国4300以上の図書館から貸し出し状況が検索できてしまうという超絶便利！なカーリル。同じく普段からよく使ってるAmazon。 この２つをむすんじゃえ！と作ったのが今回のbookmarklet（ブックマークレット）です。 ★ スクリーンショット Amazon.co.jp： 必死のパッチ: 桂 雀々: 本 ↑ アマゾンの商品ページで実行すると、↓ カーリルの個別ページにジャンプします。 必死のパッチ | カーリル ★ インストール javascript:if(location.href.search(/[^0-9A-Z]([B0-9][0-9A-Z]{9})([^0-9A-Z]|$)/)!=-1){void(location.href='http://calil.jp/book/'+RegExp.$1);} ブックマークに登録するには一旦このページを
wildoptions=autoとcomplete=lが凄い件 - Dis Communication - 符号無し で紹介されている set complete=l を使うと、Bookmarkletが補完対象にならなくて困ってたんだけど、about:config で browser.urlbar.filter.javascript = false にすれば補完してくれることに気付いた。 あと補完の件数が12と少なすぎなので、browser.urlbar.maxRichResults = 50 で50件まで出すことにした。 js <<EOM liberator.options.setPref('browser.urlbar.filter.javascript', false); liberator.options.setPref('browser.urlbar.maxRichResults'
長くて困るAmazonの商品ページのURL。これをできるだけ短くする方法を紹介しよう。ただし、URL短縮サービスは利用しない。 Amazonで商品を検索すると、検索ワードや著者名がエンコードされた長いURLで表示される。ただブラウザに表示している分には気にならないが、メールに張り付けようとした場合、メールソフトによっては折り返されて2行にまたがってしまうという問題が発生する。掲示板やブログに張り付ける場合、ブラウザによってはこれらのURLが折り返されないこともあって、レイアウト崩れの原因になりがちである。 こうした場合、URLの削れる文字列は削ってしまうとよい。もともとAmazonの商品ページは、書籍であれば10けたのISBNコード、それ以外の製品もASINの10けた番号さえあればアクセス可能だ。エンコードされた検索ワードや著者名、そのほかのパラメータはすべて省略してしまって構わない。 具
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く