Azure と VPN その2

Windows10 でやっと Azure の VPN に接続できた。 なにがだめだったのか？Windows の標準機能でできる的な事が本家のウェブサイトのどっかに書いてあったので、Windows 10 上でなにもインストールせずに VPN をつかったのだが、じつは Gateway の VPN client というのをダウンロードしてインストールしなければならない。たぶん、設定ファイルやなんやかんやだと思う（精査してない）、

ポイント対サイト接続とネイティブ Azure 証明書認証を使用してコンピューターを Azure 仮想ネットワークに接続する: Azure Portal | Microsoft Docs

ここにある「クライアント アドレス プールの追加」で[今すぐ構成] で「フィールドに証明書データを貼り付けます」の後に、

VPN クライアントをダウンロード

VPN クライアントをダウンロードというのがあるのでこれでダウンロードすると、64bit と 32bit の Windows 用と General(たぶん他の機種用。精査してない。) をダウンロードできるので、それをインストール。これをインストールするとネットワークに vnet が現れる。あとはこれをクリックするだけ。

下の絵が出る。普通の VPN の設定じゃダメ。なにこれ？って感じ。

azure と gateway

ただの備忘録。

ポイント対サイト接続とネイティブ Azure 証明書認証を使用してコンピューターを Azure 仮想ネットワークに接続する: Azure Portal | Microsoft Docs

単純にこの通りにやる。 最初に VM とかつくらないで VPN つくる。この例では微妙に 192.168.1 を先に作って(default のサブネット) 192.168.0 をあとから vpn 用に作っている。 あとこの例の通りにすると、SKU が VpnGW1 になる。最初は BASIC にするとトラフィック制限があるが 安くなる。

で証明書をつくる。

ポイント対サイトの証明書の生成とエクスポート: PowerShell: Azure | Microsoft Docs

この通りにやると CN 名称が P2SRootCert になってしまう。 その場合は Azure 側の名称を P2SRootCert にしなくてはいけない。（絵もそうなっている、、、） ださいので最初から CN の名称は自分のにしましょう。

でもって VPN で Windows10 からつなごうとすると

VPN クライアント エラー: VPN トンネルの試行に失敗したため、リモート接続を確立できませんでした。

これ NIC ドライバが古いときにもこういうエラーが発生するらしい（わかりづらい）。で、ただいま NIC ドライバ更新中。

Azure ポイント対サイト接続の問題のトラブルシューティング | Microsoft Docs

また同じエラー。うまくいかんぞ。

タイミングについての覚書

タイミングでエラー。配置配線(Implemantation) でも 37 分近くかかっている。開始時間が 1:42 AM というのが泣けてくる。 どこがエラーか？

clk_pl_1 と clk_pl_2 の間で起こっていることが分かった。このシステムは clk_pl_1 に AXI ライトでコントロール系、clk_pl_2 は画像処理で使っていて、基本的に AXI ライトで頻繁にパラメタを変えることはない。なので、 clk_pl_1 と clk_pl_2 はほぼ排他的。もし画像処理中にコントロールしたいなら、ソフトで画像処理をいったん止めてコントロールするなどの処理をするシステム。あるいは IP コアの方で vsync のタイミングで反映するように気を使ってある。 しかし、ツールはそんなシステム設計やや IP コアの気遣いは知らないのでがんばって帳尻あわせようとする。無理がある。

橙色のところが unsafe。ということで明示的に clock の group 分けをする。

これで再合成すると、タイミングエラー消えて、合成時間も短くなる（はず）。

IBM think 2019 のウェブサイト

まずヘッダー。header 属性で Think2019 と What to expect , How to attend, Registration opens in X days を定義している。そういう構成。

映像をはめ込んでいるが、それはどうやっているのか？ 実は２層になっている。それを div でまとめている。 一番上は文字とSVG。文字は h2 や p でつくっていて特記するほどではない。z-index で上に来るようになっている。ついでに書くと js で slide-in するようになっている。data-trigger="slide-in" がそれ。class にも slide-in はあるが slide in の動作には関係ない（なかった）。 そして、play/pause ボタンのために SVG がかかれている。absolute で bottom:2rem と下に来るようになっている。

これらは small, mid, large のサイズで hide/display を切り替えている。このケースでは small の時に hide。

したの div に mp4 を配置している。sm (small サイズ。つまりスマホ)のときは動画は表示しない。

ここまでが一個目のsection。div で ibm-grid という名称の class とかつかっているのが特徴。

.ibm-grid {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
}

どうも、ibm-col-group というのが別のページにはあったのだが、名称が変わったか、新たに作られたかしたらしい。

次の section は Join us... で、これも sm, md, lg でサイズで表示が微妙に変わる。

更に次の section は Expand your ... でこれもサイズで配置が変わる。

[ ]

基本的に以下これの繰り返しだ。

crowi を入れようとしたけど微妙に失敗した。

５月あたりにウェブを更新しようとして、HTML5 になって header, main, footer というタグがあることにきがついた。WordPress が世の中で流行っているようだが、結局、JavaScript と CSS と新設タグで対応している。別に WordPress でなくてもよい。HTML5 への移行と WordPress の成長がたまたま重なっただけだ。
大体の人がやりたいことは、ビジュアルな効果であるヘッダーのロゴの拡大縮小であったり、下スクロールによる画像の追加や変化であったりする。これは JavaScript でできる。
そして、画面サイズへの対応、PC 大画面やスマホによって見せ方を変える、これには CSS で対応すればよい。

ウェブのトップは出来たので wiki 的な何かを入れようとして pukiwiki を入れてみた。最近では docker ですぐに入る。nginx を前面にして proxy でとばす。

    location /abdc/ {
        rewrite ^/abdc/(.*) $1 break;

        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host/abdc/;
        proxy_pass http://localhost:10080/;
    }

proxy の設定や header への設定はいろいろあるみたいなので、個々に試した方がいい（やってない）。

で pukiwiki もいいけど、最近ならもっと高機能？なものがあるのではないかと思って crowi にチャレンジした。結論から言うと proxy がうまくいかなかった。
いままで気が付かなかったのだが、rewrite はブラウザから来た文字列を修正するもの。それを例えば pukiwiki や crowi などへ転送する。
/ を飛ばす分には転送元の URL と転送先の URL がほぼおなじなので、齟齬は生じない。上のように abdc にアクセスしようとしたら wiki に飛ばすという時に齟齬が生じる。コンテンツ内の URL にすべて abdc という下駄がないといけないのだ。
コンテンツの管理は wiki 側がやっているので、何らかの方法で abdc という下駄を教えてあげないといけない。static に wiki 側で設定してもよいが、abcd に変更したら、また wiki 側も変更しなくてはならなくなるので、dynamic にやりたい。
その、情報伝達がヘッダー内にあって proxy_set_header で設定する Host らしいのだ。”らしい”の意味はちゃんと調べていないから。あと、どんな header が必要でどうすべきかも精査していない。試行錯誤でこれが影響しているという事だけがわかった。すくなくとも pukiwiki はそうだった。
crowi はどうかというと、どうも現時点でサポートされていなさそうだった。もし、こういった基本的な事に注力していないウェブの見た目を重視した wiki であるなら、まぁ採用は見送ることになる。
参考までに書くと、試してないが、さらに docker 内で nginx で一旦受けるように設定するというウェブページもあったのでそうすればうまくいくのかもしれない。

crowi つかってみればわかるが、login 画面が出てきて見た目は qiita 風。リアルタイムにプレビューできる。が、結局、上の問題もあるが wiki の気軽さが失われている感じがするのでこの方針の wiki は今後も採用しないだろう。好みの問題だ。

好きな人は入れてください。login とかはよくできているとは思った。

本職じゃないけどウェブページ作る

いつのまにか HTML も 5 になって、いまや 5.2 らしい。3.X の時代は自分と同じ ID は世界に２人しかいなかったが、いまや何人いるかわからない。

本職じゃないので深入りしない程度に HTML 5 に対応してみる。

まずはヘッダー。

いつのまにか header とか main とか footer とかが新設されている。スクロールするとヘッダーのロゴが変化する（小さくなる）というビジュアル効果にトライしてみる。

基本は CSS で maxheight を設定すること。２つの css の記述をつくればよい。

#header.small img{
      max-height:50px;
      display:block;
}

#header img{
       max-height:40px;
       display:block;
}

こんな感じであとは header.small と header をタイミングよく入れ替えればよい。それは JavaScript で行う。JQuery も必要。jquery.min.js を読み込んでおくこと。

(function($) {
    $(function() {
        var $header = $('#header');
        $(window).scroll(function() {
            if ($(window).scrollTop() > 100) {
                $header.addClass('small');
            } else {
                $header.removeClass('small');
            }
        });
    });
})(jQuery);

これだけだとアニメーションしない。

#header img,
#header.small img {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

こんな感じでいろんなブラウザに対応しておく（らしいぞ）。これでびーよんと伸びたり縮んだりする Logo ができる。font に対応したいなら、

#header.small .font_logo {
    font-size: 24px;
}

みたいな感じ？

FreeBSD 11.1

$ pkg install netqmail
$ pkg install ucspi-tcp
$ pkg install checkpassword

で qmail をインストール。ついでに内向きの local_unbound も有効にする。bind911 とは共存しない。ので外と内で２台 VM を立てることにした。いままで view で区別してきたんだけどね。

local_unbound の設定は一苦労だ。プロバイダから貰う DNS のアドレスは中継してくれないようで、google の 8.8.8.8 とか 8.8.4.4 を使うとうまくいくが、いくらなんでもみんなこれだとこまるであろう。なのでプロバイダのウェブを探して中継してくれる IP アドレスを探し出した。

ucspi-tcp はメンテナーがいないそうだ。この環境からは脱出した方がいいのかもしれない。