macOS Big Surにアップデート

以前Catalinaにアップグレードして痛い目にあっていたのでMojaveのままにしていたのを
Teams入れてみたいなということで、ほかのソフトの互換性をあきらめてBig Surへあげることに。
軽い気持ちでアップデートに臨んだら、いったん文鎮化して復旧したときの記録です。
なんだかんだでインターネットからリカバリできるのは強い。
互換性とかを気にする人はMojaveから当面上げないほうが良いかも…。
僕のように大した用途でしか使ってなければ、やっちまいましょう。
（メインのマシンはWindowsデスクトップ機です）

要約

・アップデート前にはTime Machineやっとけ
・データをバックアップしましょうね
・うまくいかない場合は、サポートされてるものなら、ディスクパーティション全消しすればなんとかなるよ。

私の環境

iMac (Retina 4K, 21.5-inch, Late 2015)
CPU: 3.1GHz Intel Core i5
メモリ: 8GB DDR3
ストレージ: 1TBハードディスク
ちょっと古めのiMacです。購入自体は2017年あたりだったでしょうか。
Swiftを使いたいがために買ったMacでした。

とりあえず普通にインストール

MojaveからCatalinaを飛ばしてBig Surへ
インストールして再起動してリンゴマークが表示されて
「残り1分未満...」の表示で固まる
訓練されたマカーには与えられた試練。
こんなの朝飯前です。想定の範囲内。
私はMac製品も好きですが、どちらかといえばドザーです。すみません。

電源ボタン長押し強制終了で対処

電源ぶっちんして起動しなおすと治るとの報告があったのでやってみる。
そのあと電源ボタンから起動しても無限再起動状態に
見事に文鎮化しました(^人^)。
失敗

リカバリモードで起動

⌘(command) + Rでリカバリモードで起動する
このモードでは最新のバージョンにアップグレードせず、
Macに最後にインストールされていたバージョンのmacOSを再インストールするということらしい。
ただ、この場合も私の環境ではBig Surでした。
そうすると今度はワイヤレスマウスが効かないので有線マウスにして操作を続行
どういうことだってばよ…ドライバが何らかの理由で死んでるのか？
Big Surをインストールする
そうすると今度は…
「ソフトウェア・アップデートの適用中にエラーが起きました。」
「OK」ボタンだけが出現します。
OKじゃねーよｗｗｗ
失敗
神は乗り越えられる試練しか与えないのだ（嫌いな言葉No1！）

Time Machineでリカバリを試みる

リカバリモードでTime Machineを選ぶも、「Time Machineを検索中」でだめ。
エンドレス検索。
もちろんTime Machineでバックアップとってない。マカーとしてはあるまじき行為です（笑）
失敗

リカバリモードでインストールをし直す（1回目）

option + ⌘(command) + R
このコマンドを使うと、Macと互換性のある最新のmacOSにアップグレード、という
コマンドだが、私の環境の場合はBig Surになる。
ディスクユーティリティでシステムパーティションのみを削除して
OSをインストールしなおししようとするもどうもうまくいかない。
やはりデータ領域も消さないとだめか…
とおもいつつThunderBolt2のケーブルないしなぁ…。
と、データを残したいのだがうーん…。
まぁそんなに大事なデータはMacにはないからいいんだけれども。
失敗

リカバリモードでインストールをし直す（２回目）

shift + option + ⌘(command) + R
macOS 10.12.4以降Macに付属していたmacOSか、
それに最も近く現在利用できるmacOSを再インストールされます。
とのことで、Sierraが出てきた。おいおい古すぎ。
あきらめて、データ領域を消してクリーンインストールする作戦にすることにする。
このモードだとAPFSが扱えない（そりゃそうだ）。

データを救い出す

幸いMac Book Air Early 2016 (Catalina)のマシンがあるので一応APFSのディスクが読めるマシンはある。
データを取っておきたいのでThunderBolt2のオス／オスケーブルを用いて、
Macをターゲットディスクモードで起動しデータを抜き出す。

……もちろんThunderBolt2のケーブルを持ってないので、家電量販店へ…
別に純正でなくともよかったのだが、さっさと復旧したい。
在庫が2mのしかなかったそうで4500円のダメージを受ける。
さて、でかいデータがディスクに1TB弱あるのをどうしようということで、
外付けハードディスクへ…
当然、外付けHDDはNTFSなので、ParagonのMicrosoft NTFS for Macを追加で買う。

Macしかない人はMac拡張とかでいいと思うけど。
アプリのデータはいらないので退避しない。
ユーザーのデータフォルダだけ退避する

リカバリモードでインストールをし直す（３回目）

option + ⌘(command) + R
再びリカバリモードでディスクユーティリティからディスクを全部消した状態で消す。
マイナスボタンでパーティションを全削除して、
最後に新たなパーティションを作成します。この記事とやり方は一緒です。

インストール中、不安な挙動はあったものの（プログレスバーが戻ったり、画面が一瞬灰色になったり、リンゴマークがおかしくなったり）、無事Big Surをインストールできました。

アップグレード後の所感

今回の変更はついにバージョンが10から11に上がったということもあり、やはりでかいです。
ハードディスクモデルなのでもともと激遅なのですが、
ディスクを消した恩恵が多分でかくて、早くなりました。
UI/UXも全体的に良くなった感じがしました。
M1 Mac欲しい…。でもアーリーアダプターではないので、買うとしても1年後かな。
あと、Mac製品は2個以上あったほうがいざというときに何とかなりますね
（TimeMachine使えよって話ですが…）。
……ParagonさんAPFSを読めるWindowsソフトも出してるんだ。
けど、ThunderBoltのインターフェースはちょっときつい（　＾ω＾）・・・

親プロクシがあるときのSquidの設定方法 Windows編

何らかの理由で閉じたネットワーク内で、いわゆる踏み台の内側にネットワークを組んでいる場合、
その内側のマシンからインターネット接続をしたいことがあると思います。
その場合、例えば企業内のネットワークでインターネットに出る場合
Proxyを経由しないといけない場合があると思います。
踏み台には単にProxyの設定をすれば踏み台からインターネットアクセスができます。
では、内側のマシンからの場合はどうするかという内容です。
多段プロクシをすればいいのです。この場合、親になるプロクシは親プロクシとか上位プロクシと呼ばれたりします。

踏み台の設定

構成は次のような感じとします。IP体系がへんてこなのは実は私が実験している環境がHyper-Vだからです。
普通に社内と192.168.1.0/24のNICを２つ持っている踏み台があると思ってもらえばよいです。 今回は、192.168.185.224/28ですが…。 踏み台もdev01もDefault Switchを使っているのでプロクシを通さずとも、インターネットに出れるので
私の環境を再現した図としては、この図は正確ではないですが、
開発用のネットワークだとありそうな感じかなと思っていただければ…。
本当に同じ環境をしたい場合は下記リンクのように 踏み台にNIC2枚(外部スイッチとプライベートスイッチ)をつけてください。
Hyper-Vのスイッチの違い - 海を飛んで君の許へ。
そのうえで、片方をプライベートスイッチにしてください。

企業プロクシに見立てたフリーで公開されているプロクシで下記を使います。
http://www.cybersyndrome.net/plr6.html

150.95.198.104:3128

これをWindowsのProxy設定で設定すると当然踏み台からは
Edgeとかでインターネットにつなげるはずです。

Squidの設定

では、内側のマシン（例：Dev01）からの場合はどうするかというといくつか方法がありますが、
Squidを使うパターンでやってみます。
Squid for Windowsのインストールをします。
バージョンは最新版で3.5.28です。
https://squid.diladele.com/

最近数日間だけこのサイトが停止していました…（ドメイン更新忘れかな？）。

ダウンロードしたsquid.exeをダブルクリックしてインストールをします。
特に設定項目みたいのはなく、デフォルトのままでOKです。
既定ではC:\Squidにインストールされます。

C:\Squid\etc\squidをエディタで開き設定を末尾の行に追加します。
もちろんタスクバーに常駐しているのでそこから開いてもかまいません。 この記事で重要なのはここだけです。

# parent proxy server
cache_peer [親のproxyのhost] parent [親のproxyのポート] 0 no-query
icp_port 0
never_direct allow all

を追記します。 キャッシュサーバーとして動作させるときにicp_port 0とするのですがたいていこれでOKです。 never_direct allow allは送信元（このSquidの利用元）からインターネットへの直接アクセスを禁止します。
今回の場合は、

# parent proxy server
cache_peer 150.95.198.104 parent 3128 0 no-query
icp_port 0
never_direct allow all

となります。あとは

以上でおわりですが、Firewallも忘れずに開けておきましょう。 Windowsのファイヤーウォールの設定で、 受信の規則で3128ポートを許可します。※キャプチャはお試しWindows 10 Enterpriseの英語版です。

あとは閉じたネットワークのLinuxマシン等から（もちろんWindowsでもOK） /etc/environment等にhttp_proxy, https_proxy, no_proxy変数等を設定すればよいでしょう。 今回は面倒なのでUbuntuのFirefoxにProxy設定を入れます。 Windows（Squidサーバー）のIPは今回でいうと、192.168.185.227:3128なのでそれを入力します。

参考

Squidによるプロキシサーバーの構築
水銀室 Squidで多段プロキシーを設定する -CentOS最短構築支援-
上記リンクはそれぞれの設定値の意味を細かく書いてくださっているのでわかりやすいです。

トラブルシューティング

Squid通らないぞと思ったらまずはマシン同士が通信できるかping等で確認してください。
もちろんpingもWindows Firewallの設定を解除してあげなければなりません。
【Windows 10対応】Windowsのファイアウォールで「ping」コマンドへの応答を許可する：Tech TIPS - ＠IT
また、ちゃんとProxyを介しているかどうかはC:\Squid\var\log\squid\access.logを見てください。 Windowsの仮想スイッチの概念わかりにくいなー。
デフォルトスイッチ・外部スイッチ・内部スイッチ・プライベートスイッチがある。。。 デフォルトスイッチと外部スイッチの違いがよくわからん。

あと、ちゃんとSquidつかうならログのローテーションの設定を忘れずに！

2020年の振り返り

今年取り組んだ技術の振り返りです。

認証・認可

LDAP(OpenDJ)
OpenId Connect/OAuth 2.0(OpenAM)

Webアプリ

Node.js(Express)

リバースプロクシ

Nginx

データベース

MongoDB

データ分析・簡易的な定型処理

Jupyter/Python

仮想化

VMware ESXi
Docker

サーバー

AWS(EC2/S3/Route53)
Azure(Virtual Machines/Blob Storage)

総括

あまり目新しいことやってないなーと感じています。
認証・認可のOpenAMだけが唯一新しいくらいかな。
あとは設計書とかその辺のドキュメントだったり、品質管理だったり、そんなところの比重も多かったですかね。

画像をJavaScriptでXHR経由で読み込む方法

やむをえない事情があり、JWT認証を通過して画像を表示させる必要があったので、
XHR(Ajax)で画像を読み込む方法を調べました。
同一ドメインならこんな苦労はしないのにーとか最近そんなことを悩んでいます。

サーバーサイドのコード

何でもいいのですが、最近お気に入りのexpress
サクッとなんか書くのが楽なんです。環境構築も長楽だし。
JavaScriptいいお。
Nodeはversion 12くらい。Expressはversion 4です。

$ express --view=ejs myapp

とかでサクッとひな形作って、
とりあえずroutes/image.jsとかいうルーターを作り、単にバイナリデータを返します。

const express = require('express');
const router = express.Router();
const fs = require('fs');

router.get('/', async (req, res, next) => {
    fs.readFile('./public/images/nyam.jpg', (err, data) => {
        if (err) {
            console.error(err);
            res.sendStatus(500);
            return;
        }
        res.writeHead(200, {'Content-Type': 'image/jpg'});
        res.end(data);
    });
});

module.exports = router;

index.jsのコードは省きます。
nyam.jpgというのは猫の画像です。にゃーむ。
当然PythonのFlaskでもRuby On Railsでもなんでもええです。楽なやつにしましょう。
Spring Bootでもいいですが若干だるいと思います。

フロントエンドのコード

jQueryでも実はできるとのことですが、まぁXHRでいいでしょう。 Blobってのを使うと超絶らくちんです。
Base64ならなんでもできるぜい、っていう素敵なおっさんから話は聞いてましたけど
めんどっちいんでBlobで。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <div style='height: 300px;'>
      <img id='img' alt='nyam' height="300" />
    </div>
  </body>
  <script>
  var loadBinaryImage = function(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        cb(this.response);
      }
    }
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }
  document.addEventListener('DOMContentLoaded', function () {
    loadBinaryImage('./image', function (blob) {
      var img = document.getElementById('img');
      img.src = URL.createObjectURL(blob);
    });
  });
  </script>
</html>

これを調べた動機

そもそも画像を表示するなら

<img src='http://localhost:3000/images/nyam.jpg' alt='nyam.jpg'>

で事足りるわけですが、 やんごとなき事情によりAuthorization: Bearer [token]がないと画像が取れねーよって状況になってるので調べました。 さてと動画というと… 206の応答を返してごにょごにょして…

こんな感じでできるっぽい。
重い動画の場合は知らん。
そもそもほかのドメインに動画読み取らせるのはなぁという…。

参考リンク

XMLHttpRequestで取得した画像バイナリをJavaScriptでロードする - kinjouj.github.io
AjaxでバイナリのJPEG画像データを受け取って表示する - Qiita