読者です 読者をやめる 読者になる 読者になる

Netablog

デザインしたりとWebマーケティングしたりするときにネタになることまとめているネタブログです。

スマホのブラウザでページ全体をキャプチャーしたい

お仕事で「ランディングページを使って求人しよう」ってことこで

PC版とスマホ版のランディングページを制作しました。

PC版のページはさておいといて、スマホ版のページを

校正するのにアホみたいに苦労してしまった。。。(´ω`)・・トホー

 

 

スマホページがChromeで見れない

ただただ、スマホページ全体を印刷したかっただけなんです。

 

スマホページ制作者に、面と向かって「ここをこうしてこうしたい」って

スマホの小っせい画面見ながらチマチマ説明するより、

紙に出して説明したほうが早いだろって思って。

 

そこはスマホページなんだから

紙に出力して校正しても意味ねいだろ

てとこはさておいといてください(;´Д⊂) 

 

 

んで、何に苦労したかっていうと

PC(Chrome)でスマホページを表示したいのに

ぜーんぜんうまくいかない。

ふだん、スマホサイトをPCで見たいときは、

Chrome機能拡張UseAgentSwitcherつかうか、

レスポンシブサイトならブラウザ幅を小さくすればいいだけ。

 

いつもなら、「ふふふ〜ん♪」と鼻歌まじりの作業なのに、

どうがんばっても、PC版ページしか表示されない(T T)

 

なぜなのか。。。

 

今回の場合、PC版とスマホ版でhtmlが別になってて、

どうやら、PCでスマホhtmlにアクセスすると

PC判別→リダイレクト→PC版htmlどーん

てな流れで、ユーザーエージェント偽装しても

「おまえスマホじゃないだろ、スマホhtml見てろ」

てな具合に、見破ってスマホhtmlに飛ばされる模様。

 

あれ、なにこれ。

 

とおもって、ソースみると

pc2spていうJavascriptで振り分けられてる。

jsとかプログラム系は苦手なので、jsの中身みたけど意味不明。

 

当然、iPhoneでそのスマホhtml見りゃ、所望のページは見れるわけで。。。

 

 

スマホで画面キャプチャーするアプリ

 

どうにもこうにも。どうすりゃいいのかこれ。

悩んでても進まないので、ちょっと考えを切り替えました。

 

スマホでブラウザを全画面キャプチャーできりゃ

いいんじゃねーのってことでしょう( ゚∀゚)ノ゙

 

そんなアプリはないものかと探して

これにしました。

 

f:id:nekonkeo:20140907224027j:plain

 

タダ(無料)です。

f:id:nekonkeo:20140907224059j:plain

起動するとこんな画面。

下のURLボタン押すとURL入力できるコーナーが上部に登場。

URLを入力するとページが表示されて

CAPTUREボタンを画像を保存してくれます。

f:id:nekonkeo:20140907224308j:plain

 

一つだけ設定があって、Scrollをonにしないと

ページスクロールしてキャプチャーしてくれません。

 

ここ参考にさせていただきました。ありがとうございます。

iPhoneでもお手軽に画面メモ!無料アプリ Web Capture

 

保存されたキャプチャーをGoogleDrive経由で

PCに落とすことに成功♪