Media Queriesの確認にDropboxを利用する
Media Queriesを実機で確認する時はどうしてもサーバ経由になると思います。
実際自分の場合はクライアントのFTPをソフト使用してサーバにアップして、そのURLを
PCブラウザ、iPhone、Android端末のブラウザで確認するというやりかたを行っておりました。
PCブラウザ、iPhone、Android端末のブラウザで確認するというやりかたを行っておりました。
その時感じたのが「いちいちサーバへアップするのが面倒」でした。
何かいい方法は無いかと考えていた時に、以前書き留めていた「DropBoxでWebPageを公開してみる」を思い出しました。
実際いやってみたところ確認作業が楽になりましたので、書き留めておこうと思います。
■ローカルのファイルを保存すると自動アップロード。
Dropbox https://www.dropbox.com
DropboxをPCにインストールすると、ローカルにDropboxというフォルダ作られます。
確認したいhtmlファイルをPublicフォルダに格納する
次にいつも使用しているブラウザを起動してDropboxのサイトへ接続
※Winなら画面左したのDropboxアイコンを右クリックしてDropbox Webサイトを開くでも可能です。
Dropbox webサイトホーム画面
ローカルと同じ内容がWEBからでも確認できます。
確認がとれたところでhtmlファイルを格納したPublic内に移動します。
対象のhtmlファイルにカーソルを合わせて右クリックをします。
次にパブリックリンクのコピーをクリックします。
表示されたアドレスをCtrl+cでコピーします。→アドレスが表示されている画面を閉じます。
※表示されたアドレスをコピーすることが大事です。
コピーしたアドレスをブラウザのアドレスバーに貼り付けます。
そうするとローカルで保存したファイルがWEB上で表示されます。
このアドレスをiPhone、android端末のブラウザで読み込めば確認できます。
後はローカルで保存したら各ブラウザの更新ボタンをクリックすることで、更新を内容を確認できます。
毎度クライアントのFTPソフトを使用してファイルをアップロードする手間が省けました。
毎度クライアントのFTPソフトを使用してファイルをアップロードする手間が省けました。
このやり方でどれだけ複雑システムやプログラムとの連動が出来るかは分かりませんが、通常WEB作る際の階層構造や
外部CSS,jQueryなどは動作するようです。
■ちょっとした便利Chromeの便利アプリ
PCのChromeで見ているページのURLをandroid端末に飛ばすことができます。
ブラウザのサイズを変更できます。※独自サイズの保存もできます。
※この方法は便利ですが、ファイルがWEB上にあがってしまう（公開状態）ので取り扱いに注意が必要なファイルなどは気をつけてください。
