最近はHTML+CSS+JavaScriptに手を出しています。
そこでXMLHttpRequestを使ってみた時、「localhostがどうのこうの」、というシーンがありました。
その挙動についてメモ。
基本設定
フォルダ設定
/Users/~~~/localhosttest | |- index.html |- main.js |- oha.txt
全てlocalhosttestディレクトリの中で行う。
ファイル
どうでもいいんですが、gistってアルファベット順に並ぶのでこのファイル名はいい感じの順番になってくれてちょっと嬉しいです
簡単な内容
index.html
とりあえず見た目はこんな感じ
まあ、そうなるよねって感じ。なお、「welcome to ろ〜かるほすとてすと」の「ろ〜かるほすとてすと」は後述のmain.jsで表示している。
main.js
1, 2行目は、index.htmlの「welcome to」の後ろにページのタイトルを埋め込んでいる。遊んでみただけ
4~7行目はdocument.getElementById()でページ内の要素を取得。
9行目からは、ボタンを押した時の挙動。まず「クリックされました」を表示。次にXMLHttpRequest()を利用してoha.txtの内容を取得し、取得できたら「読み込みました↓↓↓」と共に内容を出力する。
ちなみに、ぶち込む相手のhtml要素が<pre>なので、改行とかもそのまま表示されます。<div>とかに突っ込むと、htmlは改行を無視するので1行に伸ばされてしまう。
参考サイト1を参照のこと。
oha.txt
今回取得するファイル
おは〜〜〜☀︎ 読み込めましたか？ めでたし。 🤗🤗🤗🤗🤗
読み込めたらとても笑顔になれそうなテキストファイルです。では、頑張りましょう。
追記(2020/04/26)
index.html-15行目ととmain.js-5行目にあるid="status"の界隈は、最初使ってたけど結局使ってません。不要。
普通にHTMLを開いて試してみる
ブラウザでindex.htmlを開いてみました。ブラウザにhtmlをドラッグ&ドロップするなり、（僕はmac使ってるので）ターミナルで
$ cd /Users/~~~/localhosttest $ open index.html
を打つなど。
さっきと同じ画像。アドレスバーのところにfile:///Users/~~~って書いてあります。
ボタンを押してみます。
「クリックされました」は出るけど、肝心のファイルの内容が出てきません。safariの、「開発→Webインスペクタを表示」や、firefoxの、「ツール→ウェブ開発→開発ツールを表示」で見るとエラーが出てるのがわかります。firefoxによると
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、file:///Users/~~~/localhosttest/oha.txt にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。
とのこと。
localhostで開く
全然詳しくないのですが、「ろ〜かるほすと」を使うとhttpで自分のパソコンのファイルを使えるそうです（参考サイト2）。
ターミナルで準備
$ cd /Users/~~~/localhosttest $ python -m SimpleHTTPServer 8000
で「ろ〜かるほすと8000番」を開通。なぜ8000なのかはよくわからんがオススメらしいので8000にしとこう。
Serving HTTP on 0.0.0.0 port 8000 ...
が出たら使える。
ブラウザで
http://localhost:8000
にアクセス。
さっきと似てるけど、アドレスバーにlocalhostとあります。
またボタンを押してみる。
やった〜〜〜〜〜〜！！！！！読み込めました！！！！！
127.0.0.1 - - [21/Apr/2020 16:44:51] "GET / HTTP/1.1" 200 - 127.0.0.1 - - [21/Apr/2020 16:44:52] "GET /main.js HTTP/1.1" 200 - 127.0.0.1 - - [21/Apr/2020 16:44:57] "GET /oha.txt HTTP/1.1" 200 -
ターミナルにはなんかこんなのが出ている。うまくいってるんすね、知らんけど。
localhostを終了したいときは、ターミナルで[Ctrl]+[C]（強制終了）するとlocalhost:8000が使えなくなる。
他の例
完全に外部のサイトのデータを取得しようとした時の挙動。
- 失敗する時
Access-Control-Allow-Originがなんかダメで拒否されるとき。こういうのは普通に開いてもlocalhostで開いてもダメ。
firefoxの開発コンソールによると
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://example.com にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。
- 成功するとき
アクセスする対象がなんでもウェルカムなとき。こういうのは普通に開いてもlocalhostで開いても成功する。嬉しい。
弊ブログのアドレス https://o-treetree.hatenablog.com/ をindex.htmlのvar url=に入れてvar url = "https://o-treetree.hatenablog.com/"と書き換えて実行すると、ブログトップのHTMLの内容がまるっと書き出される。
こんな感じ。
まあ、こんなのはcurlで直接引っ張ればいいんすよ。
くろすおりじんがどうのうこうのという制限は、ページから他のページの内容を取得しようとした時に発生するので、curlなどを使った普通の（？）HTTPリクエストではこういう拒否られはないです。
解決方法のようなもの
JavaScriptファイルなら読み込めるので
- oha.js
var oha = "おは〜〜〜☀︎\n読み込めましたか？\nめでたし。\n🤗🤗🤗🤗🤗"
を用意して、
- index.html
...
<script src="main.js"></script>
<script src="oha.js"></script>
</body>
...
と書き換えて、
- main.js
... getohabutton.onclick = function(){ status.textContent = "クリックされました" result.textContent = "読み込みました↓↓↓" ohaspace.textContent = oha; }
と書き換えれば外から読み込みができます。
…………そういう話か？
indexじゃないとき
localhostにアクセスした時、そのディレクトリにindex.htmlがないとき（詳しい条件はわかりませんが）、そこにあるファイルの一覧が表示される。
index.htmlの「ファイル名」をohayashi.htmlにして（別に他の名前でも良いのだが）localhostのやつをやると（ざっくり）こんな画面になる。
（oha.jsが残っているが気にしない）
それぞれのファイルのリンクをクリックすると開ける。ohayashi.htmlをクリックすればlocalhostで開いた時と同じ挙動になる。
まとめ
HTML+CSS+JavaScript、ボタンとか作れるのでC言語よりモノ作ってる感があって楽しい。
別にみても面白くはないです（えぇ…………）
ナンプレ解読プログラムをJavaScriptに移植するのに挑戦しています。暇なので。完成したらまた報告します。
追記2020/0526
github pagesに移植しました。これにより、localhostを使わずに自然な感じでXMLHttpRequestの動作を確認できます
おしまい。
