フロントエンドで使えるブックマーク!(タグ、画像、alt、全角)

備忘録

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスとして活動しており、主にフロントエンドよりのWeb系の案件に多く携わっています〜。

ひとまずWebページが完成した後にこういうことありませんか?

なんかレイヤー崩れてる、タグがおかしいのかも。

画像の比率おかしかったりするかな。。。

きちんと完成したものを、お客さんに渡さなければいけませんので、チェックが大切になります。

ということで、今回は、「フロントエンドで使えるブックマークレット」ということで、

  • タグチェック
  • 画像サイズチェック
  • altチェック
  • 全角チェック

の4つのブックマークレットを紹介します!

この記事は以下のような人向けです。

Webページ制作で役に立つブックマークレットないかな、、、。

では参りましょう〜。

 

スポンサーリンク

 ブックマークレットの設定方法

まず、大前提として、「ブックマークレットとは」について。

ブックマークレット (Bookmarklet) とは、
ユーザーがウェブブラウザブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

引用:Wikipedia

簡単に言ってしまうと、「ブックマークに登録されたプログラミング」です。

ほとんど、JavaScriptのコードで書かれています。

設定方法は簡単です。

1.ブックマークバーに適当な名前のフォルダを作ります

2.なんでもいいので、適当なWebサイトを開きます

3.作ったフォルダに、開いたサイトをブックマークに追加します

一番下に追加されていますね

4.追加したブックマークの上で、左クリックして、編集をクリックします

5.URLにプログラミングをコピペします

以上で完了です!

登録したブックマークをクリックすれば、ブックマークレットを実行できます。

すごく簡単ですね〜。

以下で、早速4つのブックマークレットを紹介します〜。

※ここでは、ブックマークレットの中身は説明しません。

コピペして使ってね!

 タグチェック

まず、タグチェックができるブックマークレットの紹介です。

コピペ↓

githubのこちらのサイトが元ソースです。

しかし、googleのSSL(https)化対応に伴って、githubのコードを貼り付けても使えなくなりました。

使えるようにするための手順としては、

  • tagcheck2.jsを、こちらのサイトからダウンロードして、自分のhttpsのサーバーに上げる
  • src=””にhttpsから始まるファイルパスを記入

これで使えるようになります。

※見本のコードは、私のサーバーになっています。
※いろんな方法を試しても、文字化けが治らなかったので、tagcheck2.jsをいじって、英語バージョンにしています。

実際に、タグチェックのブックマークを実行すると、以下のようになります。

タグがちゃんとできている場合↓

タグがちゃんとできていない場合↓

タグがきちんとしているか、1発でわかって、めちゃくちゃ便利ですね!

 画像サイズチェック

次は、画像サイズをチェックできるブックマークレットです。

コピペ↓

ブックマークレットを実行すると、本当の画像の大きさでない画像が赤枠で囲まれるようになります。

※比率が実画像と同じでもエラーとしてでます。

わかりやすい!

 altチェック

<img src=”” alt=””>の、altに書かれているテキストを表示してくれるブックマークレットの紹介です。

SEOを気にしているお客さんもいるので、altが簡単に確認できるということで役に立ちます〜。

コピペ↓

実際にaltチェックのブックマークレットを実行すると、以下のように画像の横にalt内のテキストが表示されます。

 全角チェック

最後は、全角チェックのブックマークレットです。

コピペ↓

「英数字はすべて全角にすること」となっている案件では重宝します。

ブックマークレットを実行すると、全角の英数字の背景が黄色になります。

とても気づきやすい!

 まとめ

以上、フロントエンドで使えるブックマークレットを4つ紹介しました〜。

すべて、有能だぁ〜!

ブックマークレットの正体は、JavaScriptでできているので、簡単に自分が欲しいブックマークレットも制作できます。

自分でブックマークレットを作ったり、既存のブックマークレットを使って、作業環境を快適にしていきましょう〜。

以上でなっちる先生の授業を終わります〜。

素敵なブックマークレットライフを〜!

タイトルとURLをコピーしました