Mac wifiの認証画面が表示されない。にハマる

カンファレンスや勉強会、お店などにある FreeWifi で wifi 接続時に認証画面が表示されログインをしないとネットワークに繋げられないものがあります。
通常であれば wifi を選択するとシステムダイアログ (Captive Portal って言うらしい) のような感じで認証画面が表示されるのですが、ネットワークを再接続したりしても一向に認証画面が表示されず wifi (基本的人権) を得られないくてハマってしまったのでメモ。

DNS の値が 8.8.8.8 になっている

「Mac wifi 認証画面 表示されない」とかで検索すると結構出てくるやつ

1. システム管理画面 > ネットワーク > wifi > 詳細
   
2. DNS タブを選択
3. DNS サーバ に 8.8.8.8 ある場合、表示されている 8.8.8.8 でないアドレスをメモしておき 「-」で 8.8.8.8 を削除するか「+」でメモしておいたアドレスのみに上書きする
4. 一度 wifi を off にして再接続
5. 認証ダイアログが表示されれば成功

今回はこれで解決しなかった

再起動

wifi アクセスポイントが見つからないとか困った時の再起動。
割と解決するケースが多いソリューション。

今回の場合は再起動したら、認証画面が表示されてた。ただしエラーで、
「問題が起きました。」 その問題の内容を教えて欲しい…

curl で認証ページのURLを見つける

通常は何らかのwebサイトのアクセスしようとしたら認証ダイアログ (Captive Portal) が表示されるものが、今回はどうやらシステムの認証ダイアログの表示が何らかの理由でできなくなっているのが原因っぽい。
curl コマンドでどのようにリダイレクトをしているかの log をみれば認証画面の URL が解りそう。

こんな感じのコマンドを実行

$ curl -k -v -L -D test example.com

👇(抜粋)

* Rebuilt URL to: http://example.com/
* Connected to example.com
> GET / HTTP/1.1
> Host: example.com
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 302 Moved Temporarily
< Connection: close
< Location: https://XXXX.XXXX.com/logon?XXXXXXXXXXXXXXX
<
* Closing connection 0
* Issue another request to this URL: 'https://XXXX.XXXX.com/logon?XXXXXXXXXXXXXXX'
* Connected to XXXX.XXXX.com
> GET /logon?XXXXXXXXXXXXXXX HTTP/1.1
> Host: XXXX.XXXX.com
> Accept: */*
>
< HTTP/1.1 200 OK
< Allow: OPTIONS, GET

example.com にアクセスしようとしたのが 302 でリダイレクトして、認証画面の https://XXXX.XXXX.com/logon?XXXXXXXXXXXXXXX にアクセスし成功していた事が解った。
カットしているけど、ログにはレスポンスの body としてログイン画面のHTMLが表示されえていたので、この認証画面にアクセスすれば良さそうだと判断できた。 (パラメーターが動的に変わるものだと難しいかもしれないけど…)

curl のオプション

• -k ... Allow connections to SSL sites without certs (H)
  SSLの証明エラーとかを無視して接続
• -v ... Make the operation more talkative
  リクエスト・レスポンスのHTTPヘッダー、Bodyなど詳細を出力
• -L ... Follow redirects (H)
  リダイレクトさせる
• -D ... --dump-header FILE Write the received headers to FILE
  詳細なヘッダをファイルに出力 ( 先の例では test というファイルに出力している )

ポエム

今回は、curl 叩いて表示されたレスポンスにあった認証画面の URL をブラウザに直接入力するとログイン画面が表示され wifi を使うことができるようになった。ネットワーク関係はド素人なので、お作法的に良いのかチョット判断しかねるけど wifi の認証画面が表示されない時に調べてみる方法の一つにはなるかもしれない。

いつもスタバとかでもログイン画面のダイアログ出てこないから覚えてる認証画面のURL直接叩いて接続してたんだけど、そもそもマシンのアプリか何かがこのダイアログの表示を阻んでいるっぽい…

---

[参考]

• ログイン制Wi-Fiの仕組みについての考察（Mac編） - Ryoto Saito's Blog
• MacやiPhoneで公共のwifiに接続できない時の対処法 - 韜晦日記
• よく使うcurlコマンドのオプションまとめ（14個） - Qiita

100％ムックシリーズ　Wi-Fiがまるごとわかる本 2019 (１００％ムックシリーズ)

明治 カールチーズあじ 64g

curl...

Git 削除されたファイルを探したい

Railsのプロジェクトでrakeタスクが作成されてproductionに反映したからタスク削除済み。local環境に反映してなくて削除されたファイル探したいという事が頻繁にありGitで削除されたコミットを見つけてくる必要があったのでやりかたのメモ

削除されたファイルを調べるには --diff-filter=D オプションを使う

$ git log --diff-filter=D --name-status

--name-status オプションを使うと削除されたファイル名が合わせてlogに表示される。(--diff-filter=D だけだと削除が実行されたコミットの情報が表示されるだけで、どのファイルが削除されたかは表示されない)

ファイル変更のログを調べたい

ファイル名で log を表示したい時は -- <file name> で該当ファイルへの変更があった log だけを表示することができる。
例えばあるファイルの直近2つの変更 log を調べたい場合は次のような感じ

$ git log -n 2 -- <file name>

-- <file name> オプションは最後に渡さないと直近 2 コミット (-n 2) オプションが無視されるので注意。

あるファイルの追加 (Add) と削除 (Delete) のコミットを調べたい時は --diff-filter と組み合わせて

$ git log --diff-filter=AD --name-status -- <file name>

とすればOK。 　
git log 奥が深ぃ〜

---

[参考]

• Git - git-log Documentation
• Gitで過去に削除したファイルを検索、復元させる方法
• Gitでファイルがいつ削除されたかを特定する - PIYO - Tech & Life -

シルバニアファミリー 森のわくわくログハウス コ-62

ネタでamazonでログハウス調べたら本当のログハウス キットも売っててﾋﾞﾋﾞった。(ﾏｼﾞアマゾン何でも売ってるな… ｺﾚ 👉https://amzn.to/2YvTc3l )

React JSX 親コンポーネントから子コンポーネントの子要素を出力したい

こんなの

function Label(props) {
  // label で表示する要素を親コンポーネントで指定したい！
  return (
    <label htmlFor={props.htmlFor}>{ ◯◯◯◯ }<label>
  );
}

function Input(props) {
  return (
    <>
      <Label htmlFor={props.id}>推し</Label>
      <input id={props.id} defaultValue={props.dafaultValue} />
    </> 
  );
}

<Label /> コンポーネントを別に作っておいて、子要素はHTMLみたいに指定したいみたいなやつ。

props.children を使う

コンポーネントの <Component> と </Component> の間にある子要素は children というプロパティでコンポーネントに渡されるので、コンポーネントで {props.children} で出力

function Label(props) {
  return (
    <label htmlFor={props.htmlFor}>{props.children}<label>
  );
}

function Input(props) {
  return (
    <>
      <Label htmlFor={props.id}>推し</Label>
      <input id={props.id} defaultValue={props.dafaultValue} />
    </> 
  );
}

<label for="id">推し</label> と表示される

スプレッド構文を使う

プロパティをスプレッド構文 ... でコンポーネントのattributeに展開すると子要素 (props.children) も出力できるっぽい。

function Label(props) {
  return (
    <label {...props}>
  );
}

function Input(props) {
  return (
    <>
      <Label htmlFor={props.id}>推し</Label>
      <input id={props.id} defaultValue={props.dafaultValue} />
    </> 
  );
}

<Label> につけている htmlFor の様な attribute は attribute として出力され、子要素はこようそ <label for="id">推し</label> 出力される

スプレッド構文で子要素が出力できるので、children attribute に値を渡しても子要素として出力できた。

function Label(props) {
  return (
    <label children={props.children} /> 
  );
}

ポエム

コンポーネントの側だけ作っておけるの button とか label とかで汎用コンポーネント作っておくのに便利そう。

スプレッド構文で出力する方がコンポーネントがシンプルに見えるけど、ざっくり見た感じ React のドキュメントにスプレッド構文で子要素出力する方法見つけられなかったので、お作法的に良いのか判断できてない。

---

[参考]

• コンポジション vs 継承 – React

響け! ユーフォニアム 北宇治高校吹奏楽部、決意の最終楽章 後編 (宝島社文庫)

響け! ユーフォニアム 北宇治高校吹奏楽部、決意の最終楽章 前編 (宝島社文庫)

ユーフォ最終楽章えもえものえもだったから読んで！ (布教)