私の趣味

Adobe Device Central CS5

私は、Drwamweaver CS5を使っています。Adobe Device Central CS5はそれに付属していました。

私はまだガラケーを使っていますので、スマホは持っていません。すると、運営しているウェブサイトがパソコンではどのように見えるかわかるのですが、スマホでどのように見えるのかわかりません。

そこで、自分の作成したウェブページが携帯電話尾やスマホでどのように見えるかをどのような方法でチェックできるかというと、その方法の一つとして、Google AdSenseのホーム画面で、「サイトの状況」というところをクリックすると、スマホでどのように見えるかチェックすることができます。しかし、そこに表示されたウェブページは、私の設定では、左上が表示されます。そして、中央や右側を見ることはできません。つまり、画面は動かないのです。

ある日、Adobe Device Central CS5 をたまたま開いてしまいました。それは、Adobe Dreamweaver CS5にに付属しているソフトウェアです。単品では発売されていないそうです。Adobe Device Central CS5 はパソコン上で携帯電話のシミュレーションを行うためのソフトとのこと。

なぜ私がそれを開くことになったかというと、Dreamweaver CS5でウェブページ作成をしていて、それがブラウザでどのように見えるかを確認する時に、メニューバーの「ファイル」＞「ブラウザでプレビュー」＞「Safari」といくところを、間違って、「Safari」の下の「Device Central」に行ってしまったからです。それが開いた時に、スマホでどのように見えるかがパソコン画面に現れました。しかも、スマホの画面はパソコンよりもだいぶ小さいですが、ウェブページを隅々まで移動できて確認できるのです！そして、リンクをクリックすると、ほかのページにもジャンプできるのです。これは便利ですよね！それ以来、htmlファイルを作成しながら、Device Central CS5を開いてスマホでどのように見えるか確認しています。

実際にサーバにアップロードして、それをダウンロードした時の画面と若干違うところもあります。一例としては、SNSボタンの表示場所が違うところに現れる点があります。しかし、現在までに確認できているところでは、それ以外は、基本的に同じ表示ですので、htmlファイルを作りながらAdobe Device Central CS5 を使ってレイアウトを確認することができます。

なお、サーバにアップロードしたhtmlファイルは、Google Chrome Canaryをインストールして、それでチェックしたいページを開いて、右クリックして一番下の「要素の検証」を使えば、スマホやiPadでどのように見えるかをチェックすることができます。Google Chrome CanaryはGoogle Chromeをインストールしていてもインストールできます。つまり、両方同時に使うこともできます。ただ、気になるのは、Google Chrome CanaryとGoogle Chromeでレスポンシブサイトの要素の検証を行った時に、iPadで見た時の画面が異なることです。Google Chromeの方はPCサイトの画面と同じになりますが、Google Chrome Canaryの方はスマホサイトの画面が横に伸びたレイアウトになっています。こんなことがあるんですね。リアルなiPadでは見たことがありません。