前回は CSS のみでテーブルヘッダを固定する方法を紹介しました。ただ、ページ構成によっては position: sticky; が効かない場合があるため、今回は JavaScript を使う方法を紹介します。jQuery には高機能なプラグインがありますが、実装が複雑なためか動作が不安定になることがありますが、余計な機能はいらないならこれで十分です。

<div class="scrollbox">
	<div class="innerbox">
		<table class="tablefix">
			<thead>
				<tr><th></th></tr>
			</thead>
			<tbody>
				<tr><td></td></tr>
			</tbody>
		</table>
	</div>
</div>

.scrollbox {
	position: relative;
	width: 100%;
	height: 30em;
	overflow: scroll;
	border: 1px solid gray;
}

.innerbox {
	padding: 1em;
	display: table-cell;
}

.tablefix {
	border-collapse: separate;
	border-spacing: 0px;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.tablefix thead th {
	position: relative;
	white-space: nowrap;
	background-color: #e3e3e3;
}

.tablefix th,
.tablefix td {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	padding: 0.5em;
}

$(function(){

	$('.scrollbox').scroll(function(e){
		let th_top = $(this).find('.tablefix').position().top;
		let filter;

		if (th_top>=0) {
			th_top = 0;
			filter = 'unset';
		} else {
			th_top = -th_top-1;
			filter = 'drop-shadow(0px 4px 0px #00000040) drop-shadow(0px 2px 0px #00000040)';
		}

		$(this).find('.tablefix thead th').css({
			top: th_top,
			filter: filter
		});
	});

});

.tablefix {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #dddddd;
}

.tablefix th,
.tablefix td {
	border: 1px solid #dddddd;
}

CSS の display: sticky を使うことで、jQuery などの JavaScript を使わずにテーブルヘッダの固定が出来ます。若干、扱いが難しい面もありますが、不安定なプラグインの動作に悩まされることなく手軽に導入できます。

サンプル

HTML

<div class="scrollbox">
	<div class="innerbox">
		<table class="tablefix">
			<thead>
				<tr><th></th></tr>
			</thead>
			<tbody>
				<tr><td></td></tr>
			</tbody>
		</table>
	</div>
</div>

CSS

.scrollbox {
	position: relative;
	width: 100%;
	height: 30em;
	overflow: scroll;
	border: 1px solid gray;
}

.innerbox {
	padding: 1em;
	display: table-cell;
}

.tablefix {
	border-collapse: separate;
	border-spacing: 0px;
	border: 1px solid #dddddd;
}

.tablefix thead th {
	position: sticky;
	top: 0;
	white-space: nowrap;
	background-color: #e3e3e3;
}

.tablefix th,
.tablefix td {
	border: 1px solid #dddddd;
	padding: 0.5em;
}

解説

Firefox のバグに対応

テーブルを border-collapse: collapse; にして th に position: sticky; を設定すると、firefox 系で枠線（の右側と下側）が消えるバグが発生します。このためテーブルを border-collapse: separate; border-spacing: 0px; にしています。この場合、枠線の太さを 2px にする場合と 1px にする場合とで工夫が必要になります。

枠線の太さを 2px にする場合

table, th, td の３つに 1px の枠線を付けます（サンプルの方法）。

枠線の太さを 1px にする場合

table の右と下に 1px の枠線、th, td の左と上に 1px の枠線を付けます。

.tablefix {
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.tablefix th,
.tablefix td {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
}

innerbox について

scrollbox 内でスクロールさせたとき、padding（もくしはテーブルの margin）がうまく適用されない点について修正しています。これ（display: table-cell;）が無いと、右側へスクロールさせても余白がありません。また、Firefox と Chrome で下側へのスクロールで違いがあります。

なお、スクロールボックス内に入れない場合や、余白が必要ない場合は必要ありません。

複数の REST API の呼び出しなどで、すべての通信が終わった後に何か実行したいとき地味に困りますよね。非同期通信なので、終了時のコールバック関数で処理するのですが、他の通信がまだ終わったのをどうやって知るのがベストでしょうか。様々な手があるかと思いますが、今回は記述がシンプルで分かり易い方法を考えてみました。他にもっといい手がある、という方はコメント欄にて教えて下さい。

考案した方法は、必要な処理数を各終了時関数内でカウントダウンしていき、ゼロを引いた時点ですべての完了関数を呼び出すというものです。カウントダウンとゼロ判定、完了関数の呼び出しまで１行で記述しており、可読性も高いと思います。

let standby = 2;

$.getJSON(URL1,function(json){
	allReady();
});

$.getJSON(URL2,function(json){
	allReady(); 
});

function allReady() {
	if (--standby) { return; }
	console.log('All Ready !');
}

邪魔なボタンの消去

オープニングで表示される「イントロスキップ」ボタン、エンドクレジットで表示される「クレジットを見る」「次のエピソード」「←」ボタンは、機能拡張「uBlock Origin」で消去可能です。機能拡張をインストールして、これらのボタンが表示されている間にスポイトツールを使って指定します。なお「クレジットを見る」「次のエピソード」については、両方のボタンの隙間を指定するとまとめて指定できます。

• uBlock Origin (GitHub)

再生開始時の表示をクリアにする（プレイヤーコントロールを消す）

開始時にオーバーラップするプレイヤーコントロールも邪魔ですが、uBlock を指定すると操作しにくくなります。今のところスマートな方法がないのですが、下記のような手順でオーバーラップを回避できます。

• 再生開始直後に「スペース」キーを押す
• 「←」キーを押し先頭にシークさせる
• マウスカーソルを画面右端に置く（マウスに電源があればオフにしておく）
• プレイヤーコントロールが消えるのを待つ
• 「スペース」キーを押し再生開始する

動画終了の５分前付近で高確率でプチフリする

マシンスペックが足りないわけでも無いのに、４５分ドラマの４０分付近で高確率で映像がカクカクっとプチフリし、数秒後に音声が少し途切れてしまう現象があるようです（Windows10 / Chrome）。音声の途切れは会話の中だと１文字（音）抜けるので非常に気になります。

恐らくはバックグラウンドで次のエピソードを準備するなどの処理が走るためかと思われます。はっきり環境を特定できたわけではありませんが、別のブラウザ（Edge）で視聴したときは再現しませんでした。Chrome でも他の機能拡張をオフにするなり、まだ検証の余地はありますがとりあえず Edge を NETFLIX 視聴専用にしたいと思います。

チキンラーメンのたまごポケットに乗っけてお湯を注いだだけでは、なかなか写真のように綺麗に固まってくれません。そこでできるだけ手間なく簡単に作れる方法を考案してみました。

作り方

1. どんぶりにチキンラーメンを入れ、ラップを1/3程度掛けておきます
2. 冷蔵庫からたまごを取り出しコップに入れます
3. やかんにお湯を沸かします
4. 半分くらいお湯が沸いたら、たまごの入ったコップに注ぎます（温めて固まりやすくするわけです）
5. 完全にお湯が沸いたら凹みに卵を乗せ、白身の部分に回しながらお湯を注ぎます（そっと崩さないように）
6. ラップを全部被せます（蓋があれば併用します）

ポイント

すぐに食べたいのに、冷蔵庫から予めたまごを取り出して常温になるまで待つなんて出来ません。そこでお湯が沸く途中のぬるま湯に、たまごを浸しておくことでちょうどいい温度まで上げます。

お湯の注ぎ方は白身に直撃させならが回し入れ、ラップで素早く密閉させて熱を逃がさないようにします。もしラップだけで熱が逃げるなら、蓋を併用するとよいでしょう。

NFJオリジナル DSP搭載デジタルコントロールラインアンプ P01J

これをなぜ買ったか

「オーディオ」ド素人の私がなぜこれを買ったかと言えば、複数の音声ソースを ART SPLIT Mix 4 というミキサーで統合してコンポに入力していて、一括したボリュームコントローラが欲しい、ということでした。また、この構成だとボリュームが小さくコンポ側で最大音量に調整する必要があり、他の音声ソースに切り替えると最大音量で鳴ってしまうので、これも改善したかった。目的としては、ミキサーとコンポの間にボリュームコントロール（増幅できるやつ）を入れたい、というものです。まあ、結論から言うと検討違いの買い物なんですけどね。

目的からして必要なのはアンプとよばれる製品でいいはずだが、種類がたくさんあって漂流してしまった。結局、必要端子とボリューム、外部電源が入る製品という条件を満たすこれを選んでみたわけ。

ダメ元で購入してみてまったく目的にマッチしない製品だったと数秒で理解した。ボリュームは減衰しかできず、増幅できないばかりか、最大ボリュームでも少し小さくなる。ほかに使い道は無いだろうか、安いとはいえもったいない。

何に使うものだったか

搭載されている機能を調べると、BBE と ViVA HD3D というものがある。BBE はデジタル圧縮で曇った音を原音に近いクリアな音に補正するためのもの。ViVA HD3D は周波数ごとに音を分離して何かすることにより音に広がりを持たせるもの。

実際にそれぞれ使用してみると、はっきりと違いが聞き取れた。特に 3D のほうは左右に音が広がり、音に包み込まれるような感覚を得た。この価格帯でこれほどの音質改善に、音質に無頓着な私も魅力を感じざるを得なかった。

製品としては車内での利用を想定しているらしいので、DVDプレーヤーなどとカーオーディオの間に入れて音質を改善させるものだと思われる。ちなみに電源アダプタは付属しておらず、DC12V ということでシガーソケットなどから取りやすくなっている。

ヘッドホンで聴くと問題点も

スピーカーで聴いたときは、すばらしく音質が良くなったと感じ、目的には合致せずとも利用したくなっていた。しかし、ヘッドホンで聴いてみるとノイズが乗ってしまうようで、かなり気になってしまう。

常に「サー」というノイズが乗っていて、よく聞くと「ブーン」という低いノイズも聞き取れる。特に映画を視聴しているとき、静かなシーンでは雰囲気を壊してしまうほどだ。この製品を取り除くと気にならなくなるので、この製品自体が発しているか、元の音源のノイズを強調してしまっている、ということかも知れません。

いずれにしろ、昼間はスピーカー、夜はヘッドホンといった視聴環境なため、このヘッドホンでの状況は許容できない。この製品の電源をオフにすると音声自体がオフになるため、使い分けをするのもうまくない。

まとめ

当初の目的は達成できなかったが、音質の改善は非常に魅力的だった。ヘッドホン使用時にノイズが乗ってしまうので残念ながら使用することは無いが、車内での利用なら恐らく問題になることは無いだろう。また、電源アダプタやケーブルが付属しないので、別途用意する必要があるので注意が必要だ。

追記

本来の目的（小さい音声ソースを増幅したい）だが、どうやらオーディオの知識不足から思い違いをしていたみたい。小さいのはライン入力（AUX）に接続していたためでした。使用しているコンポの、ポータブル入力（PORTABLE IN）に接続すれば良かったようです。

そう言えば昔、ミニピンジャックのケーブルを買ったときに抵抗入りを買ってしまい音が小さくなったことがあった。同じ音声信号でもレベル（強さ）の違いがあり、ただ繋がってればいいというものではないということを学習した。

YAMAHA NVR510 ギガアクセスVoIPルーター

YAMAHA サイトの「IPIPトンネリング【設定例10：IPv4 over IPv6 IPIPトンネル接続 インターネットマルチフィード株式会社 transix IPv4接続（固定IP）】」の設定例【ひかり電話を契約している場合：DHCPv6-PD】でひかり電話が使えなかったので原因を調べてみた。

経緯と現象

設定例をプロバイダの情報で置き換えて、すぐにインターネットは正常アクセスを確認できた。いっぽう、ひかり電話の方は「ツー」音だけ確認し、同時に購入した電話機の到着待ちの後回し。

新しい電話機を接続し電話を掛けると、どこに掛けても通話中の「ツー・ツー」音となる。外線から掛けてみると「現在、おかけになった相手の通信機器の電源が入っていない、もしくは故障、 またはネットワークの故障が発生していると思われます」のアナウンスが流れる。

ひかり電話の設定

設定例にひかり電話の設定も入っているものと思っていましたが、WebGUI で確認するとからっぽになっていた。かんたん設定からひかり電話の設定を追加する（インターフェイスは「WAN」、プレフィクスは「なし」）。これで状態表示の欄に、代表電話番号が入り接続中になり、ひかり電話も使えるようになった。

ただ、それと引き換えにインターネットがおかしくなる。繋がるサイトと繋がらないサイトが出てるので、IPv4 か IPv6 のどちらかが切れている感じに見えた。具体的には Google 検索はできるが、結果サイトに飛ぶとずっとぐるぐる状態になる。

設定コマンドの確認

WebGUI だとらちが明かないので、ひかり電話の設定を入れる前と後とで何が変更されたか確認してみた。これが実に大変な作業で、IPv6 も YAMAHA 製品でのひかり電話の設定も初めてだったので、コマンドひとつひとつ意味を確認していった。確認しても書いてある内容がイマイチ理解できないので、ダブって設定されているようなところを見つけてオフにする、という試行錯誤に出た。

ひかり電話で追加された不要な設定

試行錯誤の結果、不要部分が分かり、これをオフにすることで問題解決した。最短手順としては、(1)工場出荷状態から設定例のコマンドを流す、(2)WebGUI にてひかり電話の設定を追加する、(3)下記のコマンドで不要な設定をオフにする、となる。

no ipv6 lan1 address dhcp-prefix@lan2::1/64
no ipv6 lan2 address dhcp

また、ナンバーディスプレイを契約している場合は、下記の設定を入れておくと良い。これで TEL1 に接続した器機に発信者番号通知が流れるようになる。

analog arrive number display 1 on

多少の問題点も

上記設定を修正したところ、WebGUI のひかり電話の状態が表示されなくなってしまった。ひかり電話は発信も受信もできるので使う分には問題ないのだが、WebGUI ですべてできる訳ではないのだな。

エネループに期待したことと言えば、何度でも繰り返し使える、電池のモチがいい、液漏れしない、使い捨て電池うを使い続けるより経済的、などだったと思う。家にあるエネループは SANYO 時代のものだが、今思うにあまり自分にとってメリットの無い製品だった。

何度でも繰り返し使えなかった

いわゆるメモリー効果のためか、すぐに器機の動作が不安定になる。特にマウスやキーボードに使ったとき、止まったり入力を受け付けなくなることが頻繁に起こり、これらの器機は使い捨て電池に戻すことに。これまでの充電池の弱点を解決した製品なのかと勝手に思っていたが、ニッケル水素充電池の使いにくさは残ったまま、期待外れだった。

使いたいときにすぐ使えない

使い終わったら充電しとけばいいんだけど、充電器どこって探してるうちに、充電済みとそうで無いものが混ざって分からなくなる。結局使いたいときに、充電器を探して一応充電してってやってる手間が煩わしい。管理や整理は普通だと思うが、そもそも電池の需要が頻繁にあるわけじゃないので、どうしてもそうなる。

結局、扱いが面倒

電池の使い方に気を付ける点が多すぎる。メモリー効果でモチが悪くなったり、過放電はダメだとか、電極の接触不良に、購入時期を揃えてセットで使えとか、そんなに気を付けて使わないといけないの？

ここら辺が解決されて「簡単に何度でも繰り返し使える次世代の電池」というのがエネループへの期待だった。結論を言おう、買い置きの使い捨て電池の方が100倍使い勝手が良い。エコ病を拗らせるとロクなことが無いね。

まとめ

• 初期投資が高い割に繰り返し使えない（元が取れない）
• 使い方の気を付ける点が多すぎる
• メモリー効果が出た電池をリフレッシュするにはその機能がある充電器がいる（最初から付けとけ）
• 端子の腐食と思われる不安定動作が頻発
• 充電器の寿命サインが出ると特定に手間が掛かる（個別サインが無いので）
• そもそも寿命が来るほどの回数充電してない（公称回数と実質回数で乖離しすぎ）

IPv4 の固定IPを使っている関係でずっと IPv6 を避けてきたのだが、セッションを消費せずに固定IPが貰えるサービスがあるのを知った。「transix IPv4接続（固定IP）」というもので、インターリンクの「ZOOT NATIVE IPv4固定IP1個」というプランが採用しているようで、さっそく試してみることに。ちなみに、それほど詳しくは無いので知識不足で適当なことを書くかも知れないのでご注意を。

フレッツ光は「フレッツ・v6オプション」の契約が必要

電話で確認すると「フレッツ光サービス情報サイト」で契約すれば無料だが、電話で受け付けてもらうと手数料が掛かるとのこと。ただし家の場合、ルータの構成が特殊なためそのままでは情報サイトに接続できず、NTTレンタルルーターのみの構成に戻してから手続きする必要があった。

対応ルーターを調達

対応ルーターが必要になるため、対応ルーターの情報から選んで用意する。今まで使用していたのが YAMAHA RTX1200 なため、NVR510 を選定。ちなみにこのルーター、光電話に対応するためレンタルルーターが不要になる。また、ONU も内臓可能となっていてこれ１台に集約できるが、内臓用の小型 ONU への交換はかなりテクニックが要るらしい。

YAMAHA NVR510 ギガアクセスVoIPルーター

プロバイダと契約

インターリンクは２ヶ月無料があるのでそれを活用。なお「ZOOT NATIVE」と「ZOOT NATIVE IPv4固定IP1個」は別サービスなので注意。あと、他のプロバイダは調べていないが、対応しているプロバイダは少ない様子だ。

※他の方式では固定IPv4用に別セッションが必要になったりする

ルーターの設定とIPv6の基礎知識

YAMAHA のサイトで「IPIPトンネリング【設定例10：IPv4 over IPv6 IPIPトンネル接続 インターネットマルチフィード株式会社 transix IPv4接続（固定IP）】」を参考に設定を作成する。ヤマハルーターの設定例をプロバイダの契約情報で置き換えて作成すればよいが、いくつか基礎知識不足で躓いた。

アドレスの表記

128ビットを16ビットごとに「:」で区切り16進で表記したものだが、省略表記とかでアドレスっぽくなく見えたりするので戸惑った。各ビットグループは前ゼロは省略でき、ゼロのビットグループが連続する場合「::」で省略できる。ビットグループの省略は何個連続していも「::」になり、アドレス内で１箇所のみ省略可能な点に要注意だ。

プロバイダの情報の中で「インターフェイスID」が「::feed (0000:0000:0000:feed)」となっていて「は？」ってなった。これを下記の設定箇所にどうやって置き換えるのか。

 ipv6 lan1 address dhcp-prefix@lan2::(インターフェイスID)/64

少し考えて、設定値は省略表記と括弧書きのが正式表記だろう（前知識が無いと分からん要素）。ただ「～lan2::(インターフェイスID)/64」の「::」が設定の区切りの意味なのか、アドレスの省略なのかよく分からなかった。最初「～lan2::::feed/64」と入れてみたがダメ、次に「～lan2::0000:0000:0000:feed/64」と入れてみたら通ったようだ。設定を再表示してみると「～lan2::feed/64」だったので、結局「::」は予め入れてあった省略記号だった模様。

あと、いかにも意味ありげな「feed」は、単語ではなく「0xFEED」という数値でしかない。IPv6 のアドレスが分かり難い原因はここら辺と、コロン記号を採用したことにあるんじゃないのかなあ。

IPv6アドレスの通知設定

この設定は見たところ必須ではないっぽい。要約すると「新しいアドレスが付与されたらアップデートサーバに通知すると通信再開が早まる」になる。Lua スクリプトで実行タイミングは起動時となっているので、停電時などでしか要らなさそう。設定しない場合どの程度待たされるのか、他に問題は無いのか、気になるところではあるが後回しでも良さそう。

具体的には lua スクリプトの設定例があるので、設定値のセクションをプロバイダからの情報で埋めて作成すれば良い。文字コードを迷ったが、設定例を「リンク先に名前を付けて保存」して編集することにした（SJIS）。後は USB メモリ経由でルーターにコピーし、設定例に従ってスケジュールを設定する。

copy usb1:/interlink_update.lua /interlink_update.lua
show file list /

結果はいかに？

今まで20～30Mbps（夜間など 10Mbps を切ることもあった）が、初計測から 70～90Mbps と劇的に改善。ブラウザの表示も、モタツキがほとんど無くなり非常に快適だ。

重い腰を上げるまでは色々と面倒そうだったが、やってみると意外と簡単だった。ルーターの交換がお金的に痛いが、エレコム製なら１万くらいもある。自宅サーバーあるから回線弄りたくないと思っているアナタ、IPv4 を使い続ける理由はもはや無いだろう。

何年か前にホームセンタームサシで買ったカバコという商品ですが、材質に問題があるようで激しく劣化します。ちょっと触っただけで割れるほど脆くなり、片手でもほとんど負荷なく（チョコレートほどの強度）パキパキ折ることができるほど。壊れた部分は鋭角に尖ってかなり危険な状態になるので、すぐに使用を止めたほうがいいです。

ネットで調べても同様の報告はないので、改良されたのかパチものなのか分かりませんがリコールものの異常さだと思います。特にお子さんのいる家庭では、この製品につかまったりして壊れるとヤバいことになりかねません。壊れ方によっては剣先のように飛び出て危険極まりない状態になる場合がありますので。

家にはその時に買ったカバコしかないですが、全部この症状になっています。幸い簡単に細かくなるし、バラバラにして燃やすゴミとして処分します。

こんなキケンな製品は回収するなり、メーカーとしてきちんと対応して欲しいものだと思います。