皆さまこんにちは。連日の猛暑に夏バテになっていませんか？　不肖・Rickyです。

毎年この時期にブログ担当が回ってくるのですが、今回はWeb制作のTIPSをお送りしようと思います。

制作においてテストアップ時の検証は大事な工程です。皆さんも基本的にPC/スマホの実機でブラウザチェックを行っていると思いますが、スマホの実機で確認しているとPCでササッとできることがスマホ実機だとできない！　とイラッとしてしまう方もまだまだ多いのではないかと思います。

個人的には

• Webページ全体のキャプチャ
• ブラウザのキャッシュ削除
• 画面を並べての比較
• ページ内のキーワード検索

このあたりがスマホだとできなくてイラッとしてしまいます（皆さんもそうだろうという前提で話を進めていきます）。

ただ、できないと書きましたが、これらのことはスマホでもすべてできます。 やり方さえ覚えれば作業効率をアップできること間違いなしですので、是非お試しください。

Webページ全体をキャプチャ保存

エンジニアへの指示やクライアント展開時に全体像を見せたいシーンはありますが、スマホでは今表示している部分だけのキャプチャは簡単ですが、ページ全体となるとちょっとひと手間かかります。

iPhoneの場合

電源＋音量ボタンでいつものスクショを撮ると、画像が画面左下にサムネイルのように表示されますが、この小さな画像をタップすると、キャプチャ画像の編集画面へ遷移し、そこで「フルページ」を選択できます。スライダーで任意の場所を確認でき、そのままPDFファイルとして保存できます。

Androidの場合（Chromeでの操作）

Chromeおなじみの「︙」から「共有」を選ぶと「ロングスクリーンショット」というサブメニューがあり、こちらを選択すると画面上に上下の矢印が表示されます。この矢印をスライドさせて範囲を拡大していくとページ全体を保存できます。

キャッシュだけ削除する

これはかなりの悩みの種だと思います。 普通に「履歴とWebサイトデータを消去」でキャッシュを消してしまうとログインのID/PWなどCookie情報も削除されてしまうため、苦肉の策としてシークレットモードで見ている、という人も多いのではないでしょうか。 しかしこれもキャッシュだけ削除する方法があります。

iPhoneの場合

設定 / Safari内にある「履歴とWebサイトデータを消去」の下に「詳細」があり「Webサイトデータ」からデータ削除するサイトを個別に選択できるんです。詳細メニューがスクロールしないと出てこずミスディレクションを誘発させているので要注意です。

Androidの場合

AndroidはPC版と同様のやり方でいけ、「︙」→「設定」「プライバシーとセキュリティ」「閲覧履歴データの削除」から行えます。

CSSの反映確認などは間違いなくこれでストレスフリーになれるでしょう。

ブラウザ内の文字を検索する

文言を一括置換した場合や、テキストメインのページだと、いちいち修正箇所を探すのに時間がかかり、目も酷使することになります。PCなら「Command (Control) + F」と片手でサッとできるのに......。という場合も簡単に検索機能を使えます。

iPhone／Android 共通（ほぼ）

どちらの場合でもブラウザメニューに「ページ検索」機能があり、テキスト入力すると該当箇所がハイライトされるのと合わせて結果数も表示されます。

タブで素早く比較する

例えばstg環境とwww環境とで差分を確認するときにタブを切り替えて見比べたりするのですが、細かな文字レベルではなく、画像やレイアウトといった大枠をまず確認したいときにはパッパッパッと切り替えて把握します。 PCだとCtrl+Tabで行えますがこれはスマホでもほぼ同様な操作感で行えます。

iPhone／Android 共通

比較したい画面が連続するようにページ位置を調整したら、後はアドレスバーを左右にスワイプするだけです。

まとめ

いかがでしたでしょうか。 Webディレクションは細々とした実務が多いです。その一つひとつを丁寧に行っていくことがクオリティに直結しますが、効率を高められれば、より早く、よりクオリティ高く案件を納品できると思いますので、知らなかった機能があったら是非お試しください。