新千葉 ガーベージ・コレクション

FPGA マガジンやインターフェースで書けなかったこと等をちょぼちょぼ書いてます。@ryos36

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

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

f:id:ryos36:20181101130839p:plain

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

f:id:ryos36:20181101131139p:plain

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

f:id:ryos36:20181101131313p:plain

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

IBM think 2019 のウェブサイト

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

映像をはめ込んでいるが、それはどうやっているのか? 実は2層になっている。それを 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 ... でこれもサイズで配置が変わる。 f:id:ryos36:20180904171641p:plain:w300

[f:id:ryos36:20180904171710p:plain:w200 ]

f:id:ryos36:20180904171815p:plain:w100

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

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

5月あたりにウェブを更新しようとして、HTML5 になって header, main, footer というタグがあることにきがついた。WordPress が世の中で流行っているようだが、結局、JavaScriptCSS と新設タグで対応している。別に 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 は世界に2人しかいなかったが、いまや何人いるかわからない。

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

まずはヘッダー。

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

基本は CSS で maxheight を設定すること。2つの 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 とは共存しない。ので外と内で2台 VM を立てることにした。いままで view で区別してきたんだけどね。

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

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

そして Hyper-V

なんかしらんがサーバが全滅したみたいなので Hyper-V の上に再構築。Windows Server 2018 R2 っていうやつかな?

何故かデフォルトで Hyper-V はオンになっていないので有効化する。
そして、ubutntu 18.04 をインストール。Hyper-V の新しい VM というやつ(BIOS が使えなくて UEFI で 64bit のみのバージョン)をつかってみる。どっかのサイトを見ると、secure boot をオフにしないといけないとかいてあった。とおもったら、うそだった。Windows の template がだめなだけで、Microsoft UEFI Certificate Authority にすればよかった。(Windows Server の場合。Windows 10 では違う可能性もある)

さっそく ubuntu の install で secure boot で引っかかる。オフにするとちゃんと grub が立ち上がる。そしてインストール。DHCP が立ち上がる。

ubuntu 18.04 はいつのまにか /etc/network/interfaces じゃなくなった。/etc/netplan の下の 50-cloud-init.yaml になった。なんだよ。悩んでしまったじゃないか。

これはほっていおいて postfix と dovecon の imappop3 をインストール。設定して再起動。

service dovecon stop(あるいは start)

postfix はなぜか /etc/init.d で stop/start 。(たぶん違うけどわからなかった)。Maildir は mkdir でつくって、chmod -R 700 にすればいいみたい。sendmail でメール送信して、new に入ることを確認。そして、windowsthunderbirdimap が動くところまで確認した。dovecon は fetchmail の設定をしなかったけど大丈夫なのだろうか?

FreeBSD 11.1 久々にインストール

まず dig も nslookup もない。bind もない sudo もない。内部用の DNS は unbound(だっけ?
)に変わったのか?

とりあえず、sudo インストール

http://www.gadgets-today.net/?p=4314

pkg が効かない。resolv.conf 書いてなかった。IP アドレス追加。resolv.conf に nameserver のキーワード書いてなかった。IP アドレスの追加だけじゃダメだった。

pkg install sudo

インストールできたようだ。ついでに vim-console もインストール。tiny とどう違うのかはなぞ。

dig は知らない間に drill になっていた。ずーと、nslookup つかってたけどね。

dns/bind99 をインストール。その過程で python2.7 が入る。最近は bind じゃないのかも。とおもったら、案の定 deprecated で dns/bind911 をすすめられた。ので bind911 をインストール。911 というところが、わざわざね。という感じ。どうやら dns/bind99 はインストールされずに bind911 をお勧めするメッセージだけが出た模様。(pkg info でみても bind99 がなかったから)

インストールすると、今度はそしたら、attention だって。

/usr/local/sbin/rndc-confgen は既にインストールされていたので(いつ?)、attention の指示通りに rndc-confge を実行する。

rndc-confgen -a

正しいのかどうかは不明だが、/usr/local/etc/namedb/rndc.key ができたらしい。MD5 だよ。ちがう。hmac-md5 だった。
どうやら jail でセキュアーな仮ホストを使ってそこで bind を動かして rndc でコントロールする仕組みらしい。だから rndc が必須。そしてランダムキーを rndc-confgen で作る模様。いままでつかってなかった。

master の書き方は今まで通りのようなのでコピペすればよろしい。いままで内向きの DNS もここに書いていて、反応が妙にのろかったが、これで unbound で別々に管理できる(はず)。