» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

Localとchrome拡張機能を使ってコーディングしたサイトをスマホ実機で確認する方法

投稿日時2018年12月20日 タグ

カテゴリ Webデザイン・コーディング

最近、会社のリモートワークでWordPress構築案件が多いので(多いというかWordPress構築しか仕事がないような会社みたいですが‥)スマホサイトの表示をローカル環境で確認する方法がわかったのでメモします。

※アプリの起動やブラウザの拡張機能の動作については保証いたしかねます。


(1)Localhttps://local.getflywheel.com/のアプリを起動してサイトを立ち上げます。

Localとchrome拡張機能を使ってコーディングしたサイトをスマホ実機で確認する方法

(2)DISABLEをクリックして生成されたURLをコピーします。

(3)chromeの拡張機能「QRコード作成器 (Quick QR)」をクリックしてスマホでサイトを開きます。

Localとchrome拡張機能を使ってコーディングしたサイトをスマホ実機で確認する方法

(4)これでローカルで構築したサイトをスマホで確認する事ができるようになります。


先月、作りかけのWordPressサイトをサーバーへいきなりアップするものだから
自分でスマホで確認しながらコーディングできなかったので、レスポンシブのCSSの
コーディング調整で何度も修正対応してスムーズに納品できなかったので疲れました。

私が働いてるweb制作会社はローカルでは作成せずにいきなり開発環境へアップする手順なのでものすごくコーディングしづらかったです。
自分で何かツール使ってコーディング時に工夫しないとなと思いました。

最初にローカルでWordPress環境は絶対作ってた方が効率いいと思いました。
LPなどのペライチサイトならいきなり本番環境へアップするのはアリだと思いますが。

私はローカル環境でWordPressテーマの表示を確認してから開発環境へFTPでアップする手順でいこうと思います。

いきなりwebサーバーへ上げるとデバイス毎に確認しながら
CSSを少し書いては確認して保存してFTPへアップするという作業を何回も繰り返すことになるので非常に手間だと思います。