Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認
ブックマークレットとは… ブックマークレットは、ブラウザのブックマークに登録しておく事で使える便利機能。登録したブックマークレットを使用すると、ウェブページが表示されるのではなく、ウェブページ上で何かしらのアクションを起こすことができます。 例えば、私のブログの画像サイズを調べたいとします。そうしたら、予め登録しておいたブックマークレット「XRAY」を選択します。（※ブックマークレットの登録の仕方については後述します） すると、画面上にメニューが表示されます。 この状態で、調べたいウェブページ上の要素をクリック。すると、ページの遷移はせず、先ほどのメニューに要素の詳細が表示されるんです。要素上にもタテヨコのサイズが表示されていますね。 メニューの中には画像のサイズだけでなく、marginやpadding、要素の持つclassなども表示されます。 人のウェブページを参考にしながら自分のブログ
フリーランスのテクニカルライター 可知 豊の個人ブログです。 IT・ビジネス・プログラミング学習などをテーマに、多くのメディアで記事を書いています。 このほかに、Webコンテンツや簡単なプログラムの作成、 Webシステムやプログラミングのトレーニング支援、 企業メディアの企画・制作・運営にたずさわってきました。 お仕事、絶賛募集中です。 Works ... 一本指でもサクサク打てる、キーボード超入門 パソコン初心者が文字入力で困ったら読む本 知る、読む、使う！ オープンソースライセンス 著書・実績 自己紹介 そのほか ＊ 2024-09：ながらく、いくつかのWebサイトをWordPressで運営してきましたが、 Pelicanという静的サイトジェネレータに導入して記事を移行しました。 catch.jp blog catch.jp wiki オープンソース・ライセンスの談話室
この記事はJavaScriptおれおれAdvent Calendar 2013の4日目の記事です。 ブックマークレットてご存じですか？ ブックマークにJavaScriptを登録して、あれこれの機能を使おうというものです。 説明ははてなのページがわかりやすそう。 ブックマークレット – はてな Mobile Safariでも利用する事が出来ます。 例えば ウェブページのタイトルとURLをコピーしやすく提示 何かのページを見ていてTwitterに流したいなーってときに使ってます。 javascript:prompt(”,document.title+’ ‘+location.href);void 0 みてる / Web Components/Polymerを軽く触ってみる | inkdesign http://t.co/iW2c1XzEdV — 高梨ギンペイ (@ginpei_jp) 2013
bookmarkletのコンパイル（？）を簡素化するために、bookmarkletterなんてものを作ってはしゃいでたわけなんですが、調べてみると既に他にもたくさんあるようでした。 Bookmarklets Publish Kit - ブックマークレット・パブリッシュキットは知ってたんですが、まさかこんなにあるとは…。 というわけでそのまとめ。 Marklet BLOG: ブックマークレットを手軽に作るブックマークレット FF専用。これ自体がブックマークレットで実装されていてどこでも使える。 Side-X - ブックマークレットの作成を補助するフォーム セミコロンで改行ボタンが特徴的。IEだと折り返しの有無も設定できる。 WDF - Software : ブックマークレット作成スクリプト この中では一番最近に作られたもの？無名関数形式で結果を吐いてくれる。 ブックマークレット作成補助フォー
1年ぶりにレイバンのサングラスが半額に!在庫切れになる前にゲットしておこう #Amazonブラックフライデー
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
はてなブックマークでタイトルを一覧表示するブックマークレットを作りました。 １．作った理由 2013年1月8日、はてなブックマークのデザインがリニューアルされました。 リニューアル前 リニューアル後 個人的に、はてなブックマークを読むときは、「人気エントリー一覧」のページをスクロールしながらタイトルだけをざっと見て、読みたいと思ったものを別タブで開いていき、あとでそれらをゆっくり読む、というスタイルをとっています。 リニューアル後は、ページに表示されるタイトルの数が減ってしまっていて、スクロール量が増えました。 また、順序なしリストをinline-blockで横並びになり、タイトルだけの表示もできないようなので、タイトルを追うための視線の移動が以前より大きくなりました。 ２．ブックマークレット ということで、タイトルを一覧表示するためのブックマークレットを作ってみました。 一覧表示 上のリ
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
Boo.kmarked | The Free Bookmarklet Maker 外部JSをベースに速攻でブックマークレットを作成できる「Boo.kmarked」。 このツールを使えば、githubなどで公開されているJSファイルをすぐにBookmarkletに変換することができるようです。 単純に scriptタグをcreateElementしてAppendしているだけのようですが、１から書こうとすると大変ですね。 ブックマークレットを作るのは１行で面倒で、圧縮するようなツールもあったりしますが、オリジナルを毎回圧縮してコピペするのは面倒ですね。 指定URLのスクリプトを直接書き換えることで処理を変えられるのは便利。そして最初にブックマークレット化する際にこちらが使えるという感じです。 関連エントリ ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「
ライフハッカーで紹介されていた 高機能なブックマークレットの Quixを試したら本当に便利でした のでご紹介します。使いこなせば かなりブラウジングやWeb制作 の助けになりそうです。 Quixの使い方はいたって簡単で、指定されているコマンドを入力するだけ。以下のようにブックマークレットを使って出るテキスト欄にコマンドを入力します。 短いコマンドを入力するだけでGoogleの様々なサービスや、Web制作に役立つFirebugやxray、Twitterやtumblrにポストする事も可能。 コマンドの数はかなり多いので個人的にお勧めのコマンドを抜粋します。 Quixにはおよそ90ものコマンドが用意されており、ブックマークレットを使って出るテキストエリアにそのコマンドを入れるだけで使えます。検索関連機能は全て「コマンド キーワード」が使えます。 使い方 使い方はかなり単純。ブックマークレットを使
jQueryのプラグインを作っていると、 好きなサイトにプラグインの機能を適応させて動作の確認をしたい場合があるんですが、 それを簡易的に行うちょっとしたブックマークレット。 javascript: (function() { var $, s = document.createElement('script'); s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'; s.onload = function() { $ = jQuery.noConflict(true); // jQueryオブジェクトを退避させる main($); }; if (document.all) { // IE用の読込み完了確認 s.onreadystatechange = function() { if (s.re
Who I Block? by @arikfrでSign in with Twitterボタンをクリック→Twitterのサイトに飛ぶのでそこで拒否か許可を選択。whoiblockに戻るとブロックしているユーザーが表示される。こちらでは下記のようなブラウザの再起動みたいな手間もなく割と安全に確認できるはずです。ただ、このサービスを私とは一切関係がないので本当に安全かどうかは(私は)保証できません。あしからず。 Twitterの仕様変更により、下記のブックマークレットは動作しません。 http://twitter.com/ を開いた状態で、下記をブラウザのアドレスバーに貼り付けて実行すると認証ダイアログが出るので、ユーザー名、パスワードを入力してください。サイドバーにユーザー名がずらっと出てくると思います(一人もブロックしてなければ何も出てきませんが)。 なお、一度認証を通すと、ブラウザを再
javascript:(function () { var get_video_id = function () { return yt.getConfig("VIDEO_ID"); }; var get_title = function () { return yt.getConfig("VIDEO_TITLE"); }; var get_t = function () { return yt.getConfig("SWF_ARGS").t; }; var make_download_url = function (format) { var url = "http://youtube.com/get_video?video_id="; var video_id = get_video_id(); var t = get_t(); url += video_id; url += "&t=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
