![【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久](https://cdn-ak-scissors.b.st-hatena.com/image/square/8286bcf9fa11b8444237dbf47cee3d1f9b675bde/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fnakanohito%2Fnakanohito_icon120.png%3Fitok%3DY73coXs3)
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
どーもノリ五藤( @nori510 )です。 ブログを書く上で、どうしても必要な手間がかかる部分があります。リンクを貼ったりとか、HTMLのタグうちなど。 そういう手間は、なるべく減らしたい。 という事で、今回はブログ更新の手間を減らす私がブログ更新に使用している便利なbookmarkletをまとめてご紹介してみようと思います。 ブロガーに必須のブックマークレット まとめ その0 ブックマークレットを超絶快適に使う為のChrome エクステンション『Keyconfig』 まず、PCでブックマークレットを使用する時などに、ほんとに素晴らしい働きをしてくれるchromeの拡張機能『Keyconfig』をご紹介させて頂きます。 ブックマークレットを語る上でコチラは欠かせません。 キーボードショートカットをブックマークレットの起動に割り当てれば、超快適にブックマークレットを使用できます。 使用頻度
昨日、以下の記事を書きました。 私がiPad2を購入する目的とiPad2でやろうと思ってること まだほんの少しだけ気が早いかもしれないようですが、iPad2が到着したらすぐにでも環境を整えることが出来るよう、まずSafariの環境を改善してみることにしました。 てことで、ブックマークレットを10個作ったのと、他にも便利なブックマークレットを、まとめて紹介してみます。 iPadで使えそうなブックマークレット目次 以下、例によって長いので目次を作りました。 iPadでのブックマークレットの登録方法Safariの設定変更でより便利にブックマークレットを作る時に便利なエンコーダ そして以下が今回作ったブックマークレット10個です。 はてダの日記編集画サイズを変更するページをMakeLinkするページタイトルとURLをメールで送るページを公式Twitterアプリでtweetするはてブコメントページへ
前回予告させていただいたブックマークレットですが、早速公開させていただきます。 URLが有効かどうか確認するためにアフィリエイトの申請などを行ってたのですが、思ったより時間がかかりました(;^ω^) このブックマークレットの目的はメディアマーカーによる読書管理からブログ記事執筆までの自然なフローを作ること。 メディアマーカーを使わなければいけないことは大きな制約かもしれません。でも、良いワークフローには制約がつきものだと思いますし、メディアマーカーはすごくいいサービスなのでこれを機にユーザになったとしても絶対に損をすることはないと思います。ということでそれに特化したブックマークレットを作ってみようと思った次第です。「MMHtml」と命名しました(^ω^) 1.MMHtmlの特徴 MMHtmlの特徴は以下の通りです。 メディアマーカーの自分のバインダーを軸にブログ紹介用のHTMLを生成 ヨメ
画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit... 次の記事 ≫:かなりいい感じのWordPressテーマ20 Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
いらぬ親切余計なお世話。 あまり好きな言葉ではございませんが、Evernoteを使っている時にそれをふと感じる事があります。 EvernoteでWebクリップをする際、ChromeエクステンションやFirefoxアドオンを用いている人が大半でしょう。 ただ、単にクリッパーをクリックするだけだとサイドバーやらヘッダーなどのいらない情報がクリップされてしまう事があります。 これぞ、The・いらぬ親切。 上は当ブログの過去記事を適当にクリッピングしたものですが、Webクリップにはヘッダーやらなんやら不要ですよね。 ロゴはカッコイイけど。 で、この間@goryugo さんのブログで紹介されていた、とあるブックマークレットが、こんな時に超絶便利だって言うお話なんです。紹介せざるを得ない感じで便利。 その名も、「Print what you like」! 参考:[link]Evernoteのクリップに
個人的によく使っているブックマークレットのご紹介。どれも便利で役立つので手放せないものになっています。Web制作をしている人なのでそれ系に偏っているかも知れませんが、多少でも参考になれば幸いです。ほとんど有名なものだとは思いますが・・・ というわけで、便利なお役立ちブックマークレットをいろいろとご紹介。手軽なのが素敵ですよね。以前書いてから大分経ちますので改めてエントリーしますが、少々Web制作系に偏っています。順不同です。 CSS構成を一目で確認出来るXRAY 何かと便利なXRAY。クリックした要素の詳細を教えてくれます。Web屋さんはご存じの方も多いのでは。 XRAY 今見ているページをiPhoneで「後で見る」KeepItWith.Me 最初の設定がすごくストレスだったのですが、設定後の便利さが感動したのでご紹介。PCで見ているページでブックマークレットを使って自分のiPhoneに送
指でダイレクトに触ってなめらかに反応する、あのiPadのUIは、あっという間に使う人々を魅了する。しかし、そのまま使い続けているうちに、実はMacBookのようなマウスを利用したUIほど細かい操作ができないことに、いずれ気付く。 iPadのUIには、指先での操作を考慮して、適度なサイズと間隔が保持されている。そのため、マウスのUIほど機能を詰め込むことが出来ず、厳選した機能のみが提供されることになるのだろう。 iPadのSafariに不足しているもの それにしても、今のSafariにどう考えても不足していると感じる機能が、二つある。 表示中のページを閉じる機能 ページ内検索 表示中のページを閉じる機能 例えば、http://b.hatena.ne.jp/hotentry で、気になる記事へのリンクをクリックすると、新規ページが開いてリンク先にジャンプする。 気になる記事を読み終わったら、今
⇒ greasemonkey版はコチラへ 全国4300以上の図書館から貸し出し状況が検索できてしまうという超絶便利!なカーリル。同じく普段からよく使ってるAmazon。 この2つをむすんじゃえ!と作ったのが今回の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);} ブックマークに登録するには一旦このページを
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい!と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く