Google Chromeの拡張機能「Webiew 2.1.1」をリリースしました。

chromeウェブストア

機能概要

1. メタ情報

   • title, description, ogなどメタ情報の確認
   • GTMの有無、コンテナIDの確認
   • メタタグの重複、noindex記述がある場合のアラート

2. スクリーンショット

   • 表示領域 / ページ全体のスクリーンショット撮影
   • 撮影したキャプチャに矩形、文字などを書き込んで保存

3. カラーピッカー

   • ブラウザ領域外も含む、デスクトップ全体を対象とした色取得
   • 取得した色コードをHEX / RGBで確認・コピー

4. キャッシュクリア

   • ページのキャッシュクリアとハードリロード

主にWeb制作者向けの作業効率化を手助けするツールにはなりますが、ハードの再読み込み、スクリーンショットあたりは一般ユーザーの人にも使いどころはあるかもです。

数年前に作ったβ版（1.0）を作り直したのでリリースバージョンは2.x.x系〜にしてます。

名前の意味

最初は Web + view（＝Webを見る・確認する）を掛け合わせた造語で「WeView」という名前にしようと思ったんですが、調べたところ既に不動産、医療など複数の業界で同名のサービス・製品があるようだったので（別に被ってもいいんですけど）、少しひねりをくわえてWebiewとしました。

制作の経緯

• 検品ツールとして

  Web制作、特にコーディングをしていると別の案件で使用したHTMLを雛形として再利用することがありますが、その際にメタ情報やGTMの設定を変更せずにそのまま使ってしまったり、テスト環境用に入れていた <meta name="robots" content="noindex"> を消し忘れてしまったりで、大きな事故（インシデント）に繋がることが稀にあります。

  毎回チェックは挟むものの、コードを読めないディレクターも多かったり、コードが読めても毎回ソースコードを開いてメタタグを確認するのはやや手間……。

  もちろん品質担保として確認作業は必須ですが、できるだけ手軽にチェックを進めたいという気持ちから、検品ツールとして作成しました。

• フィードバックツールとして

  ディレクターとしてテストアップされたものにフィードバックを出す際に、 修正箇所のキャプチャを撮る → キャプチャに指示を書き込んで渡す という場合があります。

  文字を入れるために、Photoshopなどに一度キャプチャした画像を取り込んでから赤入れをしていたのですが、これが地味に面倒……。

  そこで、キャプチャした画面にそのまま指示を書き込んで保存できれば作業の時短になると思い、FB効率化ツールとして作成しました。

• 拡張機能の一元化

  Web制作をしていると、スクリーンショット / カラーピッカー / ルーラーなど複数の拡張機能を入れていることが多いと思いますが、機能追加のたびにアイコンが増えて目的の拡張機能を探すのに手間取るようになってきたので、全てを1個のツールに集約してしまおうと思い、使用頻度の高いものを統合しました。

今後もWeb制作の中で「これが一つにまとまっていたら便利なのに」と思った機能を追加していく予定です。

Web制作に関わっている方は、よかったら使ってみてください。