プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

QNAP SSL 証明書を設定する

自宅で使っているQNAP の NAS に接続する際は、https のみに限定しています。 しかし、最近、ブラウザで https のサイトにアクセスすると正しい証明書と確認できない、などの警告がたくさんでるようになってきました。

そこで、自己証明証明書を作成して、これをブラウザにインストールして警告に煩わされないようにしたいと思います。

基本的な考えは下記のドキュメントの通りです。

www.qnap.com

また、下記記事なども参考になります。

www.out48.com

いつのころからか知りませんが、QNAPのコントロールパネルからも自己署名証明書の作成と設定ができるみたいなので、今回はそれを使います。

設定方法

『コントロールパネル』->『システム』->『セキュリティ』->『証明書とプライベートキー』を選択します。

f:id:junichim:20181102153447p:plain

初期状態では、QNAP が提供するデフォルトの証明書が使われていることがわかります。 ちなみに、この証明書はコモンネーム(CN)が『QNAP NAS』で固定になっています。 このため後述する方法で証明書のダウンロード・インストールしても、実際のNASのサーバー名やIPアドレスと一致せず、証明書としては常に無効になってしまうので、使えないです。

『証明書の交換』を選択します。

f:id:junichim:20181102153522p:plain

ダイアログが表示されるので、『証明書のインポート』から『自己署名証明書を作成する』を選択します。

証明書の作成に必要な項目の入力欄が出てくるので、現時点(2018/11/2 時点)ではすべて の項目(※)を入力します。

f:id:junichim:20181102153614p:plain

※ ここ需要です。本来は、必要項目のみ入力すればよいはずですが、その場合正しく自己証明証明書が設定されません。全項目を入力することで回避できます。QNAPのサポートに教えてもらいました。

f:id:junichim:20181102154050p:plain

こんな感じになります。

入力が終わったら『適用』ボタンを押します。しばらく、進行中のダイアログが表示されており、ダイアログが消えれば設定されているようです。

いったん、ログアウトして、再度接続すると、自己署名証明書で接続しようとしている旨の警告ダイアログが表示されます。

f:id:junichim:20181102230408p:plain

ブラウザのアドレスバーの鍵アイコンをクリックして証明書の状態を見ると、

f:id:junichim:20181102231512p:plain

『無効』となっていることがわかります(なお、証明書を表示してみると、発行者がNASの名前になっているのがわかります)。

この証明書を例外として認めて、接続後再度コントロールパネルを見ると、

f:id:junichim:20181102155239p:plain

こんな感じにNAS側に正しく設定されていることがわかります。

証明書をインストール

最後にブラウザでアクセスしても問題ないように、自己署名証明書をインストールしておきます。

まずは、NASにログインして、『コントロールパネル』->『システム』->『セキュリティ』->『証明書とプライベートキー』を開きます。 『証明書のダウンロード』ボタンを押すと、

f:id:junichim:20181102155436p:plain

とダウンロードするものを聞かれます。今回は両方にチェックを入れたままにしておきます。 『OK』ボタンをおすと、証明書とプライベートキーをまとめたzipファイルがダウンロードされます。 zipファイルを解凍して、証明書を取り出します。

証明書(.crtのファイル)をダブルクリックすると、

f:id:junichim:20181102230727p:plain

のように証明書が表示されるので、『証明書のインストール』を押します。 証明書のインストールウィザードが開始されます。

f:id:junichim:20181102230815p:plain

『現在のユーザー』のまま、『次へ』をクリックします。

f:id:junichim:20181102230903p:plain

証明書ストアを選択する画面が表示されるので、『信頼されたルート証明書』を選択します。

インストールする前に、

f:id:junichim:20181102231107p:plain

のようなダイアログが表示され、証明書をインストールしてよいか、再度確認されるので、『はい』を選択してインストールします。

確認

証明書のインストールが終わったら、一度ブラウザを終了させて、再度起動します。 NAS に接続すると、何も聞かれず、ログイン画面が表示されます。

ブラウザのアドレスバーの鍵のアイコンをクリックすると

f:id:junichim:20181102231324p:plain

のように、証明書が有効であることがわかります。

これで、無事に証明書がインストールされました。ブラウザでいちいち対応しなくてよくなるので楽になりますね。

(参考)Let's Encrypt の証明書について

ちなみに、先ほどの『証明書とプライベートキー』のところでは、Let's Encrypt の証明書も選べるようです。 ただ、Let's Encrypt の証明書を発行するには、サーバーの80番ポートにアクセスできる必要があるそうです。

vezloaforce.jp

なので、内部向けのプライベートアドレスの証明書は作れないということで、今回はこちらを使うのを諦めました。

(参考)myQnapCloud のSSL証明書

ところで、myQnapCloudの画面を見ると、ここにもSSL証明書をインストールするという画面があります。

f:id:junichim:20181102232711p:plain

たぶん、こちらは myqnapcloud のドメイン名(DDNS)でアクセスする際に使われる証明書になるかと思います。

tech-mmmm.blogspot.com

当面、外からアクセスする予定はないので、こちらは何もせずにほっときます。

QNAP HDD 交換

NAS として QNAP TS-251+ に 2TB の HDD 2台積んで、ミラーリングで運用してます。

初期設定時(こちらの記事)にボリュームをHDD全体でとってしまい、ボリュームに空き領域があるにもかかわらず、新たに iSCSI 用の LUN が作れないという残念な状態になっていました。

ボリュームを一度削除して、少ない容量で再設定すれば空き領域を再利用できるのはわかっているのですが、このボリュームに対していくつかアプリケーションがインストールされています。

f:id:junichim:20181027220232p:plain

App Center のクイックスタートガイドで説明されているように、App Center を使えば、アプリをボリューム間で移動させることもできるようです。

f:id:junichim:20181027220351p:plain

が、残念ながら今インストールされているアプリは対象外のようです。それに、一度ボリュームを削除して、再設定するのも怖いです。

どうしたもんかと悩んでいたところ、別件で NAS をもう一台追加することになったのを機に、容量の大きなディスクをこれに割り当てて、今使ってるHDDは新しいNASに回すことにして、ディスク容量を増やすことにしました。

ということで、HDD交換のメモ書きです。

HDD 交換方法

HDD を交換して容量の増やすのは、わかってしまえば全然難しくないですが、一応手順をまとめておきます。

まず、QNAPの管理画面にログインして、『ストレージ&スナップショット』を選択します。

f:id:junichim:20181027220806p:plain

次に、『ストレージプール』を選択して、『管理』を押すか、『ストレージプール』上でダブルクリックをします。

f:id:junichim:20181027220914p:plain

表示された画面で『RAIDグループ』の『管理』->『ディスクを1台ずつ交換する』を選択します。

f:id:junichim:20181027221025p:plain

交換したいディスクを選んで、画面上部の『変更』ボタンを押します。

f:id:junichim:20181027221132p:plain

選んだディスクの説明が『このドライブを取り外してください』となったら、HDDを取り出します。

その後、新しいHDDをセットします。セット後、自動的にリビルドが始まります。リビルドは、今回で約5時間ぐらいかかっていました(ディスクの使用量は、ユーザー領域で約560GB)。

リビルドが完了したら通知されるので、もう1台も同様に交換します。で、またリビルドが走るので、5時間ほど待ちます。

ここまで完了すると、下記のような状態になっています。

f:id:junichim:20181027221620p:plain

RAID1アレイを構成するディスクの容量が4TB(表示では3.64TB)になりましたが、RAID1自体の容量(ストレージプールの容量)はもとの2TB(表示では1.81TB)のままです。 なので、次はストレージプールの容量を増やす必要があります。

これを行うには、もう一度『RAIDグループ』の『管理』から『ディスクを1台ずつ交換する』を選択し、

f:id:junichim:20181027222006p:plain

画面下部の『容量の拡張』ボタンを押します。すると、また再同期が開始され、RAID1の容量(つまり、ストレージプールの容量)が増加します。 これも約5時間ぐらいかかりました。

無事に完了すると、

f:id:junichim:20181027222234p:plain

となり、既存のボリュームの容量はそのままで、RAID1の容量(ストレージプールの容量)が増えていることがわかります。 あとは、ボリュームを追加するなり、iSCSI LUN を作るなりご自由にできます。

にしても計15時間か。恐ろしいぐらい時間かかりますね。

参考

余談ですが、QNAP のストレージ管理はちょっといろいろあってわかりにくいです。

RAID アレイ上に直接ボリューム(パーティション)を作成するのではなく、RAIDアレイ単位をまとめたストレージプールを介して、ボリュームを管理しています(もっとも、RAID上に直接ボリュームを作るオプションも用意されており、『静的ボリューム』で調べるとでてきます)。 この方式のメリットは、複数のRAIDアレイをまたいで一つのストレージプールを作成できるので、RAIDアレイの容量(すなわちHDDの容量)に制限されずに、大きなストレージ領域を作成できることだと思います。まあ、一種の論理ディスクのようになるのかな?

でも、2台のHDDでRAID1で運用するような個人だと、複雑になるだけで分かりにくいんですけどね。

このあたりのことは、最初マニュアル等を読んでいてもよくわかりませんでしたが、下記の記事の先頭にある図がわかりやすかったです。

www.qnap.com

QNAP のストレージ周り、今一つピンとこないな、とお思いの方、ご参考にしてください。

E2D3 で地図を描いてみた(続き)

こちらの記事

blog.mori-soft.com

で紹介したように E2D3 で地図描いてみたので、データも表示してみることにします。

データの表示

表示するデータの取得

今回作成した地図の元にした nagoya-color と同様に、人口や世帯数を表示してみようと思います。 人口のデータも境界データと同じく、 e-stat から取得できます。

e-stat のサイトのトップページから 『地図で見る』->『地図で見る統計(統計GIS)』->『統計データダウンロード』と進みます。 次に、『国勢調査』->『2015年』->『小地域(町丁・字等別)』と進むと、

f:id:junichim:20181027003630p:plain

のようにダウンロードしたいデータを選択する画面が表示されるので、『男女別人口総数及び世帯総数』をクリックします。 すると、県単位でデータがダウンロードできるので、三重県を選択して、ダウンロードします。

データの加工

ダウンロードしたデータ(CSV形式)を見ると、県内の全市町村さらに町丁字別に総人口および男女別人口と世帯数が記載されています。 いやー、これだけの統計まとめて公開してるのすごいですね。国勢調査、面倒やなー、ぐらいにしか思ってませんでしたが、こうやって成果を目の当たりにすると、ただただ頭の下がる思いです。

E2D3 で表示するために、これを若干加工します。もとにした nagoya-color ではどうも ward に該当する名前をもとにデータを表示しているようです。伊勢市のデータだと、wardの部分は、町丁字(ちょうちょうあざ)の名前になります。 なので、先頭列に 町丁字等の名前が来て、続いて総人口、男女別人口、世帯数が並んだ形式にします。こんな感じです。

f:id:junichim:20181027003847p:plain

これを data.csv として ise-color ディレクトリに保存しておきます。

表示

これで準備できました。e2d3 コマンドを実行して、ブラウザで ise-color を表示させると

f:id:junichim:20181027004223p:plain

見事に表示されました。

いやー、なかなかいいですね。マウスをその地域に合わせるとポップアップで情報が表示されます。

f:id:junichim:20181027004309p:plain

余談

ま、基本的にはこれで問題ないのですが、実はデータをよく見ると不思議な点があるのに気づきました。 伊勢市の場合、町丁字等の名前が同じデータが複数存在しています。

例えば、伊勢市のデータだと、『小俣町新村』というところが、2レコードあったりします。

f:id:junichim:20181027004701p:plain

不思議に思って、データのフォーマット(PDF)を調べてみると、 それぞれに対して KEY_CODE という 都道府県コード + 市町村コード + 町丁字コード であらわされたコードが割り当てられています。 前述のデータをよく見ると、先頭列が KEY_CODE となっており、確かに同じ町名であっても、KEY_CODE が異なっています。

これって、いわゆる大字(おおあざ)までが載っていて、小字(こあざ)の地名が省略されてるんでしょうか?ちょっとわかんないですね。 わざわざ町字コードを変えるなら、対応する町丁字名も変えてくれてもよかったのに、と個人的には思います。

で、これにちゃんと対応しようとすると main.js 側の処理を変えてやり、KEY_CODE を使って領域を区別する必要があるようです。 (もちろん、処理を変えなくても、町名に1とか2を付加して、対応する topojson の町名も同じように1とか2を追加すれば、対応できます。)

ちょっと手間かかりそうなんで今回は割愛します。

ちなみに、今の main.js のs処理だと、同じ地名のデータが複数ある場合は、あと側のレコードのデータが採用されます。

(参考) ダウンロードしたデータに関する情報は、下記のページにあります。上記のデータフォーマットのPDFもこちらのページから飛べます。

ダウンロードデータについて | 政府統計の総合窓口

余談2

上記のデータの箇所について、 topojson 側はどうなってるんだろうか?と気になったので、調べてみました。

すると、上記の『小俣町新村』というところが、人口データでは2レコードなんですが、topojsonでは、4か所もあります!

なんじゃこれは?

で、仕方ないので topojson のもとになった国勢調査の内容を確認してみると、同じ町丁・字番号(KEY_CODEが同じということになるかな?)に対して、複数のデータが存在していることがある、とのことです。

そんなのありか?と思いましたが、あれこれ地図を見ていたら、世の中には『飛び地』とかがあることを思い出しました。同じ町名だけど、飛び地。そうなると領域としては分離してる。なので、同じKEY_CODEに対して、複数の領域(複数のデータ)が存在しているのかな?と思うとなんとなく合点がいきました。

じゃあ、これって、topojson 内(というか国勢調査内)では どうやって表現してるんだろうか?と思って 境界データの定義書(PDF) を調べる と KIGO_E (特殊記号E) というのを連番で割り当てて、区別可能になっているようです。

データ表現って難しいなー。

ちなみに、 topojson 側で同じ地名の領域が複数ある場合、すべて同じデータが表示されます。

プルリクエスト

さて、せっかくデータを作ったので、 E2D3 に地図のテンプレートとして追加申請してみようと思います。 テンプレートの追加を申請するには、 e2d3-contrib のクローンを使うのではなく、一度 e2d3-contrib をフォークして、そのリポジトリにコミットしたものをプルリクエストで取り込み依頼をかけます。

具体的な手順は、 データ可視化テンプレートを新しく追加する に載っているので、それに従えば問題ありません。

ということで、まず Github 上で e2d3-contrib のフォークを作ります。 フォークしたリポジトリをクローンします。

mor@lenovo:~/workspace/e2d3/test$ git clone https://github.com/junichim/e2d3-contrib/

作業用のブランチを切ります。

mor@lenovo:~/workspace/e2d3/test$ cd e2d3-contrib
mor@lenovo:~/workspace/e2d3/test/e2d3-contrib$ git checkout -b ise-color

作業用ブランチに先ほど作った ise-color をコミットします。

mor@lenovo:~/workspace/e2d3/test/e2d3-contrib$ cd ise-color
mor@lenovo:~/workspace/e2d3/test/e2d3-contrib/ise-color$ 各種ファイル編集
mor@lenovo:~/workspace/e2d3/test/e2d3-contrib/ise-color$ cd ..
mor@lenovo:~/workspace/e2d3/test/e2d3-contrib$ git add ise-color
mor@lenovo:~/workspace/e2d3/test/e2d3-contrib$ git commit -m "Add Ise color"

実際にコミットしたものは、前回書いた記事とは若干異なり、

  • topojson 側の属性名を変更するのではなく、 main.js 側で参照する属性名を変更している
  • 領域にマウスを乗せた際に表示される地名を、町丁字名のみとしている(三重県伊勢市は省略)

のようにして内容を変えています。また、README.mdやthumbnail.pngも整えました。

リモートリポジトリにプッシュします。

mor@lenovo:~/workspace/e2d3/test/e2d3-contrib$ git push origin ise-color

Github 上でプッシュした ise-color についてプルリクエストで取り込み依頼をかけます。 しばらくののち、無事に取り込んでいただきました。やった!

f:id:junichim:20181027213542p:plain

Excel Online で見てみると、ちゃんと表示されてます。 めでたし、めでたし。

(参考)

データ可視化テンプレートを新しく追加する