はじめて作った画面をスマホで見てみる 〜スマホ, ローカルIPアドレス, inputタグ, buttonタグ〜
プログラム自学案内の4回目です。前回の記事ではHTMLを作ってみました。（課題は解けましたか？）
今回はちょっと趣向をかえて寄り道します。PCとスマホをWifiでつないで、自分で書いたHTMLファイルを、スマホで見てみることにしましょう。
スマホで見るのに必要なもの
・自宅のWifi
・自宅のWifiにつながったPC
・自宅のWifiにつながったスマホ
スマホで見る準備
(1) PCでLiveServerを立ち上げ、ブラウザでHTMLファイルを見る
前回の要領でHTMLファイルを作り、PCのブラウザで表示させます。
このURLで、自分の作ったHTMLファイルがブラウザに表示されている状態になればOK。
(2) PCのローカルIPアドレスを調べる
ローカルIPアドレスとは何でしょうか。厳密な定義はググってもらうとして、この記事ではいったん、「WifiにつながったPCとスマホが、お互いの場所を特定するための番号」と理解すれば十分です。「192.168.3.11」なんていう感じの、数字4つをピリオドで区切ったものになります。
自分のPCのローカルIPアドレスの調べ方は、Windows PC, Mac PCでそれぞれ異なりますので、ここでは案内しません。やり方はネットで調べてください。
※「MACアドレス」は ローカルIPアドレスではない（Mac PCのローカルIPアドレスという意味ではない）ので注意してください。
※ 調べるまえにWifiに接続することが何より大切です。
(3) ローカルIPアドレスが合っているか確認
調べたローカルIPアドレスが合っているか念のため確認しましょう。
このURLのうち「127.0.0.1」の部分を、(2) で調べたあなたのPCのローカルIPアドレスに置き換えて、PCのブラウザで表示させてみましょう。ちなみに置き換えられる前の数字の「127.0.0.1」は、そもそも「自分自身」を意味する数字なのでした。
置き換えると、たとえばこんな感じになりますね。このURLで、同じHTMLファイルが表示されれば、準備完了。
スマホから見てみる
さて、準備の最後にPCのブラウザで確認した、ローカルIPアドレスの入っているアドレスは、同じWifiにつながっているスマホのブラウザからでも、見られるはずです。自分のスマホにこのアドレスをメールしてみましょう。
スマホをWifiにつないで、PCから届いたリンクをクリックします。どうですか、みられましたか。
もし見られたら、成功です。
PCでHTMLファイルを書き換え、その内容がスマホにも反映されることも確認してみましょう。
もし見られなかったら、残念ながら失敗です。。。
原因は様々考えられます。その原因調査の手ほどきは、残念ながらこの記事の範疇を大きく超えてしまいます。運が無かったと思ってあきらめるか、周りの詳しそうな人に相談してみてください。
input, buttonを足して、さらに遊んでみる
スマホで見えるようになったところで（スマホで見れなかったひとも）、せっかくなので、さらにHTMLファイルにWebページっぽい部品をどんどん足して遊んでみましょう。
HTMLファイルに、下のコードをコピペしてみてください。
<input type="text" value="私はテキストです" />
<input type="date" />
<textarea cols="40" rows="10"> 私はテキストエリアです </textarea>
<button>私はボタンです</button>どうですか、Webページっぽい部品が増えましたね。スマホとPCでの見え方の違いにも気づくと思います。
それぞれのタグの意味、使い方を調べてみましょう。
まとめと次回予告
今回はHTMLファイルをスマホから確認する方法を紹介しました。加えて、inputタグ、buttonタグ、textareaタグを紹介しました。楽しんでますでしょうか。大体、HTMLファイルの作り方の要領がつかめたことを期待します。
次回、HTMLの学び方のヒントをレクチャーして一旦HTMLは卒業としたいと思います。
この記事が気に入ったらサポートをしてみませんか？