Webサイト運用更新の際、あると便利なツールやサイト

2024年 8月19日 Posted 藤原(フロントエンドエンジニア)

Webサイトを運用・更新している時、「テスト環境ページのパスワード設定」「テスト環境と本番環境の描写確認」「作業者への指示書作り」などの作業が発生します。そんな時に使える、あると便利なツールやサイトをご紹介します。

テスト環境ページのパスワード設定

テスト環境ページを作成する際に一部の制作者のみ閲覧できる様にパスワードを設定する時があります。Passwords Generatorを使ってアルファベット大文字・小文字の有無、文字数、個数などを設定し、パスワードの自動生成ができます。大事な情報をメールに添付する際もパスワードをランダムに生成できてとても便利です。なるべく分かりにくいパスワードにしたいですよね。

テスト環境と本番環境の描写確認

公開中のページに修正が入った際、本番公開前にテスト環境ページと本番ページを照らし合わせて比較確認する時があります。そんな時はDomain Switcherを使ってボタン一つでテスト環境ページと本番ページの切り替えができ、確認作業の時間短縮ができます。

設定方法

  1. 「Chormeに追加」ボタンを押します
  2. Chromeの右上にアイコンが表示されますので、クリックして「オプション」を選択
  3. 「Add project」を押して、プロジェクトを追加します
    *プロジェクト名は任意
  4. テスト環境ページ・本番環境ページのURLを設定します
  5. ページ下部、「Save」を押して設定を保存します

作業者への指示書作り

画像やテキストの修正が入った際、作業者に依頼書を作成します。その際、画面キャプチャーがあると作業者も視認性がよく作業しやすいです。 FireShotを使って選択範囲・表示部分・画面全体などのキャプチャーをPDF / JPEG / GIF / PNGで保存できます。

設定方法

  1. 「Chormeに追加」ボタンを押します
  2. ポップアップの「拡張機能を追加」を押下します

キャプチャーしたいページを開き、画面右上のFireshotアイコンを押下して、好みの部分を選択し保存できます。

番外編

いつも閲覧しているWebサイトで「あれ? いつの間にかリニューアルしている! 前のデザイン好きだったのに……」という時にサイトの更新日で当時のデザインを振り返ることができるとても便利なサイトです。

ついつい数十年前のページを検索してしまいます。(例えばヤフーのサイトの場合、その当時のニュースなどが見られて面白いです)。

URLを入力したWebサイトの過去の状態を見ることができます(過去のデータがアーカイブされていないケースもあります)。

まとめ

今回ご紹介したツールやWebサイトは、Web制作者でしたら「もう知っていますけど!」という方も多いかもしれません。自分がよく使用するので1人でも多くの方のお役に立てたらうれしいです。