何を今さら モバイル フレンドリー テスト、でも超簡単 !!

今更ながらの話ですが、今年(2015年)の4月21日に
Googleのモバイル・フレンドリー・アップデートが行なわれました。

説明するまでも無いでしょうが、
モバイル・フレンドリー・アップデートとは、
スマホなどのモバイル端末からの検索において、
モバイル端末ユーザーが見やすくて使いやすいウェブサイトを優先して
表示するというものです。

あるブログがモバイル・フレンドリーか否かのテストが可能なツールが
Googleより提供されています。
お馴染みの画面ですね。

MobileFriedlyTest_S

自分のブログのテストだけなら、それ程面倒ではありませんが、
余計なお世話的な「他の人のブログ」のテストをやるとなると
意外と面倒ですよね。

① そのブログに行く。
② URLをコピーする。
③ モバイル・フレンドリー・テストのページに行く。
④ URLをペーストしてテストする。
④ テストに意外と時間がかかる

うん、、出来心でちょっとテストするには面倒です。

実は、そのブログを開いたままで、簡単にテストする方法があるんです。
そうです。
Google Crome の Developer Tools  を使うんです。

このツールはめちゃくちゃ便利なんですが、
ツール自体が英語、マニュアルも日本語化が完全じゃないので、
今ひとつ、一般的には使われていないようです。

名前の通りに Developer (開発者)さんご用達でしょうか?? (>_<)

1. Developer Tools で モバイル端末をエミュレートする

まずは、モバイル端末に表示したいウェブサイトを開いてください。
ブラウザは取りあえずGoogle Crome を使いましょう。

サイトが開いたら、[ f12 ]キーを押します。
Developer Tools のウィンドウが開きます。

Developer_Tools_011

Developer Tools ヘッダ部分のスマホのアイコン(赤枠線)をクリックする。
ブラウザの表示が、PCからモバイル端末のエミュレーション表示へ変わります。

 

Developer_Tools_02_600

ここで、エミュレート画面にモバイル端末対応でブログが
表示されていれば、モバイルフレンドリーOKだと判断するのです。

なので、この方法では、モバイル・フレンドリー・テストのように
厳密にはテストできません。

ただ、
今見ているブログなどがモバイルフレンドリーかのテストが
非常に簡単にできるので、私は重宝しています。

往々にして、黄色い背景色に以下の警告メッセージ
You might need to reload the page for proper user agent spoofing
and viewport rendering.
が出るんですが、出た場合は、

[ f5 ] キーを押してページの再読み込みを行なってください。

Developer_Tools_02_menu_03

警告メッセージが消えて、モバイル端末の画面に該当ブログが
表示されます。

以上で、モバイルフレンドリーの簡易テストができました。

 

モバイル端末のエミュレーターモードから、
通常のPCモードへの戻るためには、今までやってきた事の
逆を行なえば良いのですが、、、

なかなか思うように復帰作業が進まないことがあります。

そんな時は、現在のタブを閉じれば良いだけです。
そして必要ならば閉じたサイトを開けばOK。

——————————
これから先は、私の備忘録となります。
小難しかったら、スキップしてください。。(^^♪

2. モバイル端末のディバイス設定

モバイル端末の設定メニューです。

Developer_Tools_02_menu

①:スマホのディバイス設定変更のリセット
②:スマホ・ディバイスの設定

Developer_Tools_02_menu_02

ここで、「Apple iPhone 6」が選択したとします。
すると、以下のようなページの再読み込み要求メッセージが表示されます。
[ f5 ]キーを押してページの再読み込みを行なってください。
スマホのエミュレーター画面が再描画されます。

③‐1:先頭のチェックボタン にチェックが入っている事。
チェックされていないと、通常のPC画面が表示されます。
③‐2:相対サイズ・・・ 各ディバイスの画面サイズを考慮して、PCモニター上で
表示する時の横 × 縦 のピクセル数。
③‐3:縦、横の画面切り替え
③‐4:Pixel Ratio ・・・ ③-2の相対サイズのピクセル数と実際のディバイスの
ピクセル数の比率。
③‐5:fit ・・・・ ここにチェックを入れた場合、③‐2相対サイズが
PCの画面より大きい場合、PC画面に入るように自動的に縮小する。

3. その他

Google crome の Developer Tools だけではなく、Firefoxでも、I.Eでも
同等の機能はあります。
それぞれ

Google crome ・・・ Developer Tools
Firefox ・・・ インスペクタ
I.E   ・・・ 開発者ツール

と言う名前のツールです。

3つのツールともに、【 f12 】キーを押すとツールが起動されます。

中高年・衰える記憶力をサポートする最強ツールは!?

年齢と共に記憶力が衰えてます。パソコン_スマホ画像

メモすれば良いのでしょうが、、、

どこにメモしたのか忘れてしまう。
メモした事さえも忘れちゃいますねー。  (^^ゞ

困った!!

でも、こんな高齢者を強力にサポートする最強ツールがあります。
それは、「パソコン」、「スマホ」などのデジタル機器です。

「中高年・衰える記憶力をサポートする最強ツールは!?」の続きを読む…

記憶をさかのぼる旅 ・・・ 人生の履歴書の作成

幾日か前、読売新聞を読んでいたら、
「自分史」に関する記事が載ってました。

皆さんは、「自分史」というか、
「人生の履歴書」を書いてますか?

私は書いています。
50歳過ぎた頃、書こうと思ったのが始まりです。

「記憶をさかのぼる旅 ・・・ 人生の履歴書の作成」の続きを読む…

アイデアは直ぐに記録しましょう !!

ブログの記事ネタって意外と苦労しますね。082059_02
アイデアって頭に浮かんでも
直ぐメモしないと忘れてしまいます。

私は歩いているときにいいアイデア
頭に浮かぶんですが、

歩きながらメモに書いたり、
iPhoneに入力したりするのは危険ですよね。

そんな時、私は手早く簡単にメモしています。
歩きながら・・・(*^^)v
「アイデアは直ぐに記録しましょう !!」の続きを読む…