degitekunote2ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。ScRfixeder」公開しますWeb制作・ものづくりCSS3のFlexboxで作ってみる2016年に流行ったスマホカラムレイアウトWeb制作・ものづくりAltを可視化するChrome拡張機能作りました「見え〜るAlt」Web制作・ものづくり【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方&サンプルWeb制作・ものづくりWeb制作・ものづくりの記事一覧へ今年2022年(買って|体験して)良かったモノ・悪かったモノ・微妙だったモノコラム&ライフログ今年2021年買って良かった、使って良かったモノランキングコラム&ライフログ2020年、今年買ってよかったモノ・サブスクBEST10コラム&ライフログ今年2019年買ってよかったものコラム&ライフログ24歳ってヤング時代(18歳〜)の最後なんだってよ。【結果DP-X1A最高!】AK70と迷いに迷って買ったDP-X1Aはやはり最高でした。+「ブックマークレット」が掛けあわさると何故かドキドキしてしまうブックマークレット大好きな私(@こふす)です。今回は私が日常的によく使う便利なブックマークレットを8選紹介したいと思います。わかりにくくてスマソググって(ごめんよ~)簡単に追加ができるようにとD&D用のボタンを用意したんですけど、何故かWordpressだとうまくいかなくて(恐らく自動修正機能なのかな!?)そうこうしているうちに疲れちゃいました。いうわけでブックマークレットの追加の仕方は端折りますっ。この記事に興味がある方なら知ってますよね!なのでスクリプト文はソースとして記載しましたのでちょっと面倒ですが手動で追加してね。スクリーンショットog:urlやog:image、og:url、og:title、og:description等など(その他多数あり)をチェックすることができるブックマークレット。OGP設定時の確認などに役に立ちますね。スクリーンショット画面幅を簡単に変更できるブックマークレット。最初からipadやiphone5といった画面サイズのプリセットがあり、しかも自由にサイズを変更することもできます。レスポンシブなページをデザインするときに重宝しますね。スクリーンショットブログなどで「このアプリおすすめ!」的な感じで紹介するときにリッチなスタイルを生成することができるブックマークレット。CSSをイジることもでき、こんな感じで紹介することができます。cssで好きなように調整してみたところiTunesアフェリエイトIDを組み込むこともでき、また大きさの種類も多数あるので、ここではブックマークレットのスクリプト文は紹介せずにAppHtmlを作れるブックマークレットメーカーのページを紹介しておきます。簡単に、そして自由に作れますよ。スクリーンショット「この記事最高の出来だからFacebookで紹介するべ」な時などに活躍してくれるのがこのブックマークレット。ボタンをクリックするだけでOGPがちゃんと設定されていれば画像なども自動的に読み込まれ、簡単にシェアすることができます。スクリーンショットHTMLをいじっているとよくタグの閉じ忘れなんていうことが起きますよね。いざプレビューしてみるとデザインが崩れていて何が原因かわからなくなっちゃうこともよくあることです。このブックマークレットはそういった”タグの閉じ忘れ”を検出して教えてくれます。スクリーンショットページ中の文字のフォント名を簡単に調べることができるのがこのブックマークレット。「このサイトのフォントって何だろう」という時に使うと一発で分かり便利です。スクリーンショット「このページブログで紹介したいなぁ」という時にリッチなデザインで紹介できるのがこのブックマークレット。AppHtmlと同じ様に色々と凝った設定ができるのでここではスクリプト分は載せず、ShareHtmlを作れるブックマークレット・メーカーのページを紹介します。ちなみに下記リンクがShareHtmlで生成したリンクです。スクリーンショットブログやサイトを運営しているとページの読み込みにかかる時間をちょっとでも速くしたいと思うものですよね。そこで使いたいのがこのブックマークレット「ページ表示のどこに時間がかかったかチェック」。WEBサービスを使わずにチェックすることができるので非常に手軽にどこに原因があるのか調査できますね。