Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
タイトルや見出しの確認など、SEOに便利なブックマークレット (PIXEL LAB)
';tag+=getTag(tree,0);var view=document.createElement('div');view.innerHTML=tag;view.setAttribute('style',(function(){var s='z-index:9999;position:fixed;max-width:300px;top:0;right:0;max-height:100%;padding:10px 10px 50px 10px;';s+='overflow-y:scroll;box-sizing:border-box;';s+='background:#333;color:#fff;box-shadow:0px 0px 5px rgba(0,0,0,0.2);line-height:1.4em;font-size:12px;';return s;})());docum
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
私がよく使っているWebサイト作成に役立つブックマークレット
ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。 XRAY クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。 ColrGrabr そのサイトにどのような色が使われている
Fount · Identify any web font you see.
Drag this button Fount into your bookmarks bar to identify any web font you see! How it Works Fount will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style. After adding the bookmark: Go to any site and click the Fount bookmarklet. Click on any type you want to identify. Repeat. To turn Fou
Snufel - Sell physical and digtal products
Select Location Snufel allows you to shop from anywhere in the world.
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
HTML_CodeSniffer
Check that your HTML code conforms to your coding standard HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs". To get you started, HT
Useful Bookmarklets for your iPad, iPhone and iPod Touch Browser
The Safari browser of your iOS device (iPad, iPhone, iPod Touch) doesn’t support extensions (or add-ons) but you can still add extra functionality to the mobile browser with the help of bookmarklets. Bookmarklets, if you are new, are like regular bookmarks but instead of opening new websites, bookmarklets are often used to perform actions. For instance, you can shorten long URLs, translate web pag
Feelingplace
フォルテ大集合♡ Photo by feelingplace フォルテ、かわいいですよねぇ。 フォルテの写真は週に何度かfeelingplace’s Profile • Instagramにアップしていますのでお時間があ […]
ExiFlickrHtmlをプチリニューアル。結果出力先を選択できるようになりました♪ - matuダイアリー
毎度ご無沙汰しております（；^ω^） 拙作のブックマークレット「ExiFlickrHtml」ですが、この度、プチリニューアルしましたのでお知らせさせていただきます！ ExiFlickrHtmlって？ Flickrにアップロードした写真をブログに載せるためのHTMLを出力するブックマークレットです。Exif情報も一緒に出力するので、デジタル一眼レフカメラをお使いの方などには有用なのではないかと思い作ってみたモノです。詳しくは以下の記事をご覧下さいm(_ _)m Flickrにアップした画像をExif情報も一緒にブログに載せるためのブックマークレット「ExiFlickrHtml」！ | matuダイアリー [iPhone] #MyScripts 版！Flickrの写真をブログに掲載するためのHTMLを生成するExiFlickrHtml！ | matuダイアリー 今回の変更点 以下、仕様が変更に
deCSS3 - a bookmarklet for graceful degradation.
Drag this to Bookmarks Bar → deCSS3 Use this bookmarklet to get a whiff of what your site will look like on older browsers that don't support CSS3. It doesn't do everything right now, but if you’d like to help please fork it on Github, we're looking for collaborators with regex-fu. Currently supports: Chrome, Safari
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
