MENU

【サーバーアップ不要!】ローカル環境で制作しながら実機で確認する方法

ローカル環境で制作しながら実機で確認する方法

こんにちは、Web制作フリーランスのママです。

ばぶみ

WordPress構築してるんだけど、サーバーにアップして確認するのが手間…

ばぶこ

もっと簡単に確認できる方法が知りたい!

ママ

ボタン1つクリックするだけで、ローカル環境でも実機で確認できる方法があるよ

注意

今回はローカル環境構築ツール「Local」を使用しWordPress構築を行なう場合のお話です。

目次

サーバーにアップせずリアルタイムで確認できる!

WordPress構築をする際、以下のような流れで行う方が多いのではないでしょうか。

  • ローカル環境にてWordPress構築
  • テスト環境にアップ&確認(修正があれば再度ローカル環境↔︎テスト環境の繰り返し)
  • 本番環境にアップ&確認

確認するためにテスト環境にあげて、またローカル環境で制作、テスト環境に上げる…..この繰り返し作業が意外に大変だったりしますよね。

しかし「Local」のLive Linkという機能を使用すればこの手間がなくなり、ローカル環境にて制作中でもリアルタイムで確認することが可能です。

ママ

早速使い方を見ていきましょう♩

Live Linkを使用して確認する方法

STEP
アカウント登録・ログイン

Live Linkを使用するにはLocalにアカウント登録をする必要があります。

(アカウントをお持ちの方はログイン後「STEP2」へ)

Localを立ち上げ、左上のユーザーアイコンをクリックしメニューが表示されたら「Login to Local」をクリックします。

Localログイン画面

ブラウザが立ち上がり下の画像のように表示されるので右上の「Create an account」をクリックします。

Localアカウント新規登録画面

画面が切り替わったら「名前・メールアドレス・パスワード(確認のため2回入力)」を入力し、下にある緑ボタンをクリックしたらアカウント作成が完了です。

STEP
公開情報の確認

Localに戻り、「確認したいサイト名を選択」した後右上の「Start site」をクリックし起動させ下の「Enable」をクリックします。

Local管理画面

しばらくすると「Live Link」が起動するのでクリックします。

Local LiveLink起動ボタン

「URL・ユーザー名・パスワード」が表示されるのでコピーしてアクセスすれば閲覧できるようになります。

Local  LiveLink公開情報

「Tools」をクリックし、「Live Links」をクリックすると右下に公開情報が一括でコピーできる箇所があるのでクライアントに送る場合はこちらを使用するのもおすすめです。

Local LiveLink公開情報全コピー

Live Link使用時の注意点

①注意:Live Link使用時はずっとLocalを起動させる必要がある

Live Linkで確認する際はLocalを起動させてLive Linkがオンになっている状態でないと見れません。

PCがスリープ状態になっても見れなくなるのでクライアントに共有する場合は、可能であれば「○時までにご確認ください」と時間指定をしたほうが安心です。

②注意:サイト速度の低下

サイト速度はあまり良くないです…

なのでクライアントに共有する場合は実際の環境とは違うこと、サイト速度が遅いことも伝えておきましょう。

ちなみに…

わたしはLive Linkをクライアントに共有することはあまりないです。

理由としては、上の注意点2つです。

自分でiPhoneなどの実機で確認したいときにLive Linkを使用し、クライアントに送る際は修正が全て完了後テスト環境にアップして送っています。

まとめ

いかがでしたでしょうか。

サーバーにアップしなくても実機で確認ができ、操作も簡単なので作業効率がぐんと上がると思います。

まだ使用したことがない人はぜひ試してみてください♩

ローカル環境で制作しながら実機で確認する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

業界未経験からフリーランスでWeb制作してます。
制作会社と業務委託を結びお仕事をいただいたり、個人のお客様のサイト作りを一貫して行ったり。
プライベートでは年子のママとして日々奮闘中。
Web制作のことやフリーランスの働き方などお伝えしています。

目次