トップページをリニューアルする

SPDY fails in node >= 11.1.0 · Issue #350 · spdy-http2/node-spdy · GitHub
Hi, Couple of short investigation, why SPDY drop error message //------------------------------------------------------------------------------------------------------- buffer.js:72 class FastBuffe...

2019/1/15 6:29:01

buffer.js:72
class FastBuffer extends Uint8Array {}
^

RangeError: Invalid typed array length: -4095
at new Uint8Array (<anonymous>)
at new FastBuffer (buffer.js:72:1)

モロだよなあ。。

2019/1/15 8:09:52

このissueは簡単には直らなそうですな。。

2019/1/15 21:22:31

・このトラブルが発生していることは認識している
・LTSバージョンのサポートは実施した
・node11.1の変更はnode-spdyにかなりの影響があり、修正は重そう
・ネイティブhttp2モジュールへの移行を検討すべき
みたいなことが書いてあるなぁ。

2019/1/15 21:26:30

そしてこのISSUEにコメントしてた人はnode-spdyの利用をあきらめ、nginxでhttp2を動かしてその配下にnodeを使うことにしたようだ。私も最初そうしてたが、express + node-spdyに移行してしまったのだ。。

2019/1/15 21:28:44

私が動かしてるwwwサーバーはアクセスは少ないし、expressでも十分さばけると思ったんだよな。そこはまあそうだったんだけど。。

2019/1/15 21:29:31

でまあ今ホストしてvpsはnode10.xに落として動かしてる。

2019/1/16 6:14:30

node11.1以降でnode-spdyが動かない件。コア・モジュールでhttp2が使えるようになってるので差し替えてみたが、以下のエラーで今度はexpressが落ちるという。。

_http_incoming.js:95
if (this.socket.readable)
^
TypeError: Cannot read property 'readable' of undefined

2019/1/16 6:14:30

そしてこれの代替モジュールがあるんだけど。。

GitHub - Jashepp/express-http2-workaround: Compatibility for the express module to work with the molnarg/node-http2 module
Compatibility for the express module to work with the molnarg/node-http2 module - Jashepp/express-http2-workaround

2019/1/16 6:14:30

このモジュールが11.1以降では動かないという罠。。

Error: Missing IncomingMessage property on http2 module? · Issue #3 · Jashepp/express-http2-workaround · GitHub
getting the following error Error: Missing IncomingMessage property on http2 module? npm verison: 6.4.1 node version: 11.1.0 express: 4.15.4

2019/1/16 6:14:31

11.1以降でexpressをhttp2で動かすのは今は無理のようだな。。expressはhttp2コアモジュールに対応するPRが出てるようだが、未だ受理されていないとのこと。。

Initial support proposal for http2 by phouri · Pull Request #3390 · expressjs/express · GitHub
Hi,
PiniH here - used wrong account before (work...).
Regarding this issue: #3388
This is an initial proposal for making http2 work, this requires node to expose the Http2ServerRequest/Response and...

2019/1/16 6:16:13

このPRもちと古いので、11.1以降では動かない可能性高し。。しかし11.0から11.1へのアップデートでかなり破壊的な変更があったように思えるなあ。。リリースノートで読むか。。

2019/1/16 6:18:10

あとは自分でこれを直すか、LTSに戻すかだが。11.xを使う理由は今はないので10.xに戻すか。。

2019/1/16 6:26:12

10.15.0だとやはりがっつり動きますなあ。。

2019/1/16 7:42:23

この問題が発生したのは、11.1におけるこの変更が原因らしい。

src: improve StreamBase read throughput · nodejs/node@48ed81f · GitHub
Improve performance by providing JS with the raw ingridients
for the read data, i.e. an `ArrayBuffer` + offset + length
fields, instead of creating `Buffer` instances in C++ land.

PR-URL: https://...

2019/1/16 7:46:41

function onStreamRead(nread, buf) {function
↓
onStreamRead(arrayBuffer) {

引数が一つになったのでnreadの値がarrayBufferに渡されエラーになってる。。

2019/1/17 7:23:55

とりあえず10.15.0で進めることにする。あまりこれに時間をかけすぎるとプリプロセッサの勉強ができないからね。。ブログジェネレートの部分は修正できたようなので続いてジェネレーしたものをホストサーバーにアップするところを直すとするか。。

2019/1/18 6:01:32

このソリューションはtermux上でも動かせそうなのでandroidタブレットでも試してみたんだけど、termuxはルートディレクトリ直下にディレクトリを作ることができないんだなあ。コンテンツは/var/wwwとかにおいてたんだけど、それをホームディレクトリに移さないといかんなあ。

2019/1/18 6:01:32

ということでコンテンツは/home/xxxx/以下に移動することにした。ホストサーバー上のディレクトリ構造も変えるつもり。というかそっちはあれかあ、ハードリンクの切り直しで済むよなあ。

2019/1/18 6:01:32

電車の中で実装できるようにするために、コンテンツのディレクトリ構造を変えるという。

2019/1/19 6:15:41

githubのプライベートリポジトリの開放は改めてすごいわあ。。

2019/1/19 6:16:40

androidタブの環境構築でなかなか事が進まないという。。でもなんとか動きそうだなあ。

2019/1/19 6:23:45

まあもうちょっとだけど。 https://t.co/dyVtCaKsnz

2019/1/19 9:09:09

androidタブを入手したことで

linux
windows
ios
android
fire os

をいじる環境が整った！だけ。

2019/1/19 10:57:11

しかしながら、http2をテストするにはポート443で動かす必要がある。termuxでは端末自体をroot化しないと443では動かせない模様。。

2019/1/19 11:15:39

sudoが使えない。。

2019/1/19 21:36:41

とりあえず別のポートで動かすことにした。そして動いた。。

2019/1/20 10:33:34

うーむ。手直ししてるといろいろ問題が発生してくるな。。まずはcssnextモジュールがdeprecateになっていた。古いモジュールはセキュリティ・リスクも高くなってるなあ。

「cssnext is dead. Long live to postcss-cssnext.」

No Image
Install & setup postcss-cssnext

2019/1/20 11:11:47

この辺って次世代のcssについて検討するような何かだったような気がするんだけど、なんかcssnextはやめたみたいなことが書いてあるなあ。。

No Image
Deprecating cssnext

2019/1/20 11:18:50

cssってちょっと機能不足なところがあって、それを補うようなライブラリがあるんだよな。sassとかlessとかの類がそう。今はsassが主流なのかな。まあsass/lessお立ち位置って「CSS拡張」なんだよね。それをトランスパイルしてcssに落とすんだな。

2019/1/20 11:20:38

でまあそういうライブラリの成果を逆にCSS規格に反映すればいいんじゃないの？みたいな感じでスタートしたのが「cssnext」だったような。

2019/1/20 11:26:12

今ってCSSレベル4ちゅうのがあるのか。まったく追っかけてなかったので全然ししらんなあ。。

PostcssとCSS Level 4の現状と今後のCSSプリプロセッサとの付き合い方を考える - Qiita
この記事では私が2年以上PostCSSを実務で利用してきた、CSS Level 4の状況を振り返ります。

## CSS4を使うための環境について

まず、PostCSSが出てからcssnextを使ってCSS Level 4を使えるよ...

2019/1/20 11:26:12

それでまあ、私はlessを少し前にページのデザインに使ってて、そしてそのあとちょっとsassを使って、post-css/cssnextに切り替えたんだよな。でまあ今回アップデートしたらレイアウトが崩れてしまったんだよな。。とほほ。。

2019/1/20 11:29:09

cssnextはdeprecateになったとすると、次は何を使うべしかなあ。。

2019/1/20 11:32:40

うーむ。

No Image
Farewell CSS

2019/1/20 11:41:27

CSSの記法って独特なんだよね。でいつからあのような記法になったのか一度調べたことがあるんだよな。

No Image

2019/1/20 11:45:11

構造と見た目を分離するためにCSSは生まれたんだよね。それまではHTMLタグで全部やってたんだな。まあその名残は今も互換性維持のために残ってるし、bとかはたまに使ったりする。今でも。でも今のbは「見た目のボールド」ではなく意味的な「強調」なんだけど。デフォルトのデザインがボールドなだけで

2019/1/20 11:46:08

なので<b>についてももれなくCSSでデザインを変更することができるわけだ。

2019/1/20 11:49:42

これが続きか。NCSA Mozaicとか懐かしいワードがたんまりですな。。

S.F. Blog:Cascading Style Sheetの記法はなぜあのような形になったのか。（２）
続き。https://blog.sfpgmr.net/entry/2016/03/06/120644前回CSSがほぼ今の形になったのは1995/11/1版だと言ったが、違っていた。1995/11/1はassignmentの属性と値を結びつける記号が'='だったのが':'に変わっただけだった。下の一覧はCSS Level 1が勧告となるまでの版を一覧である。ほぼ現在の...

2019/1/20 11:50:05

自分で書いた内容をすっかり忘れとる。。

2019/1/20 12:01:02

ちょっと内容的にわからんところがあるのだが、まあpost-cssがCSS Level 4の元ネタ？になってるのはそうなのかなと思った。

PostcssとCSS Level 4の現状と今後のCSSプリプロセッサとの付き合い方を考える - Qiita
この記事では私が2年以上PostCSSを実務で利用してきた、CSS Level 4の状況を振り返ります。

## CSS4を使うための環境について

まず、PostCSSが出てからcssnextを使ってCSS Level 4を使えるよ...

2019/1/20 12:01:02

CSSで足りないのは変数とネストだと私はあまり理解度が深くないのに勝手にそう思ってたが、だいたい合ってたわけですな。しかしcssnextはpostcss-preset-envに置き換えるだけで何も変わらないような感じなのだが、なぜレイアウトが崩れてしまったのか。。

2019/1/20 12:05:11

しかし以下のブログ記事に出てくるCSS-in-JSって何なのだろう？

No Image
Farewell CSS

2019/1/20 12:05:56

CSS-in-JSでググるとこんな記事が出てきたな。読むか。。

postd.cc/stop-using-css…

2019/1/20 12:07:24

Reactはあまり筋的に好みじゃないんで敬遠してるんだけど（Riot.jsとかのほうが好き）、その界隈のあれかな。。

2019/1/20 12:17:09

あかんやっぱりそうだった。内容が全然わからないな。

postd.cc/stop-using-css…

HTMLとJSが混在したような記法は私はやっぱりちょっとやだなあ。。多分Reactのメリットを理解するとまた見方も変わるんだと思うけど。。これってわかりやすいのだろうか。。

2019/1/20 16:43:45

この辺も読んで直すとするか。。

PostCSS - a tool for transforming CSS with JavaScript
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.

2019/1/20 17:17:40

とりあえずCLIでpostcssを動かすようにしよう。

GitHub - postcss/postcss-cli: CLI for postcss
CLI for postcss. Contribute to postcss/postcss-cli development by creating an account on GitHub.

2019/1/20 17:20:44

それより前にホストサーバーへコンテンツをポストするコードを直さないとな。ここが一番ダメダメだからな。。

2019/1/20 17:20:45

しかしまあ私のツール類のパッケージングのお作法はまったくといっていいほどnode.jsに倣っていないのもなんだかなあと思っている。知らん事をいいことに好き放題である。

2019/1/20 18:27:05

MathJaxのレンダリングがなぜだか猛烈に遅いんだよなあ。。

2019/1/20 18:39:41

KaTeXというのがあるみたいだなあ。差し替えるのが良いかも。といってもMathJaxとの互換性がどれくらいあるかなと。。

KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super-fast on all major browsers.

2019/1/20 18:40:04

日本語も通るようになってるみたいだし。。

KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super-fast on all major browsers.

2019/1/20 18:57:55

下のページが例なんだけど、Texの部分はMathJaxを使ってプリレンダリングしてるんだよね。つまりHTMLページを表示する前にsvg化されてるわけ。

S.F. Blog:ブレゼンハム・アルゴリズムの原典を読み、理解する - WebGLでレトロPCグラフィックスを楽しむ（２３）
さて、ブレゼンハム・アルゴリズムである。ブレゼンハム・アルゴリズムは整数化・加減算およびシフト演算のみで実装できるということでよく紹介されているけれども、ブレゼンハム・アルゴリズムやDDAの文献を読んでみて、実はそこがポイントではないのではないかと考えるようになった。離散座標系において理想直線に最も近い描画点を求めることができる点が、ブレゼンハム・アルゴリズムの優れたところなのだろうと今は思ってい...

2019/1/20 19:00:15

こうするとまあページ表示は早くなる。んだけどTexはHTML化したときに失われるので、テキストとしてのTexの意味合いは（つまりここは式だよという意味合い）は失われてしまうという欠点（かな？）があるかなあとか思ったりもする。

2019/1/20 19:02:08

とは言えTeXも式の見た目を整えるものなので、式としての意味をあらわしているかというと違うとは思う。なのでSVGにしたところで失うものはないといえなくもない。

2019/1/20 19:07:19

が今やTeXは数式を表現する言語の側面も持っていなくもないかなあとも思う。ただ装飾とごちゃまぜな構文となるからそこから意味を取り出すのはちょっと面倒化もしれんが、いまどきだとそれもたやすくできるかもしれん。検索されたときに数式としてみなされそうなのはTeX表記なのかなと。

2019/1/20 19:07:19

コンテンツ中ではTeXのままにしておけば検索エンジンが「ここはTeXで書いとるな」と認識される可能性を残すことができるということですわな。。

2019/1/20 19:19:01

しかしよく見ると（見なくても。。）TeX部分のレンダリング結果ちとおかしいなあ。

S.F. Blog:ブレゼンハム・アルゴリズムの原典を読み、理解する - WebGLでレトロPCグラフィックスを楽しむ（２３）
さて、ブレゼンハム・アルゴリズムである。ブレゼンハム・アルゴリズムは整数化・加減算およびシフト演算のみで実装できるということでよく紹介されているけれども、ブレゼンハム・アルゴリズムやDDAの文献を読んでみて、実はそこがポイントではないのではないかと考えるようになった。離散座標系において理想直線に最も近い描画点を求めることができる点が、ブレゼンハム・アルゴリズムの優れたところなのだろうと今は思ってい...

2019/1/20 19:19:19

特に日本語の文字間隔とか。。

2019/1/20 19:25:05

ただTeXそのまま書いてもMathJaxではだめだったりしたから、もしKaTexに乗り換えても数式の修正が必要になりそうなだなあ。。それはちょっと面倒だ。。

2019/1/21 5:48:37

KaTexを追加インストールして、katexというタグを新たに作ろうかな。。

2019/1/21 5:53:18

markdownのパーサはmarked.jsを改造して使ってる。TeX拡張とか独自記法をサポートするためだけど、中身見るとpegで書き直したくなってきたな。。

2019/1/21 5:55:40

今もバージョンアップされてるんだな。。

GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.
A markdown parser and compiler. Built for speed. Contribute to markedjs/marked development by creating an account on GitHub.

2019/1/21 6:04:20

私の改造版はこちら。独自拡張と同時にes6のclassとか使って書き直したんだよなあ。。確か。

webservices/marked.js at master · sfpgmr/webservices · GitHub
node.jsで作ったWebサービスたち. Contribute to sfpgmr/webservices development by creating an account on GitHub.

2019/1/21 6:08:45

いわゆる正規表現使うタイプのパーサなんだけど、正規表現も凝ってくると書いてあることを理解するのにものすごく苦労するんだな。私の正規表現力は並み以下だから理解できないのはそれも大きいが。pegで書き直すとかなりすっきりするかもしれないなあと。

2019/1/21 7:48:55

とりあえず修正版のコードをデプロイした。

2019/1/21 7:50:34

とりあえず動いてはいる。

S.F. Blog:S.F. Blog
IT技術や音楽に関する制作物の公開、情報発信を行っています。

2019/1/23 7:35:11

あとはコンテンツをデプロイするところの不具合潰しですな。。gitでコンテンツをpush→webhookで更新をホストに通知→それを受けてpullして更新部分のコンテンツをgzipで圧縮する部分ですわ。。

2019/1/23 7:40:49

ホスト側はnginx+nodeからnodeのみに去年移行したんだよね。expressでコンテンツをserveしてる。プロトコルはHTTP/2をサポートしてて、gzip圧縮転送も対応した。というよりそれができることがわかったのでnginxをやめたんだけどね。

2019/1/23 7:46:30

nodeだけでコンテンツを配信したかったからね。そこでちょっと構成も見直したんだけどそれが尾を引いてるという。。

2019/1/23 21:33:42

とりあえずコンテンツをデプロイできるところまで修正して、あとは成り行きだなあ。PEGちょっと理解したからそれ使ってmarkdownパーサを作ってみたい気もするし。今ならもう少し自由度の高い構文が作れるんじゃないかなーとか思ったりしてる。

2019/1/23 21:36:17

あとはAMPページのおかしなところの見直しとか。katexの導入とかね。デザインもリフレッシュしたいよなあ。。ああ、post-cssの件もあるよなあ。。うーむ。

2019/1/24 6:05:01

うーむ。webhookの受け側で413エラーが勃発。どうもデータサイズが100kbを超えてるからのよう。まあそれはそうか。

javascript - Error: request entity too large - Stack Overflow
I'm receiving the following error with express:

Error: request entity too large
at module.exports (/Users/michaeljames/Documents/Projects/Proj/mean/node_modules/express/node_modules/connect/

しかし上記のコメントをためしてみても解決できていない。。むむう。

2019/1/24 6:27:44

limitを増やす設定しても全然反映されてないかのようですな。。

2019/1/24 6:28:24

うーん。。

HTTP:413 Request Entity Too Large · Issue #235 · expressjs/body-parser · GitHub
app.use(bodyParser.json({limit: '50mb'})); app.use(bodyParser.urlencoded({limit: '50mb', extended: true})); i post more data,but happen error:HTTP:413 Request Entity Too Large. ps: ...

2019/1/24 21:03:35

ちゅうかexpressの理解度が低いなあ。。わたしって。。

2019/1/30 22:24:09

うーむ。HTTP 413 Errorの件はテスト環境（ちゅうかローカルWSL環境）では413にならんなあ。なぜかVPSの環境だけでなっちゃうみたいだ。さらに謎が深まった。でもまあそのあとのコードも動かんのだけど。。

2019/1/31 20:44:50

うーむ。非同期コードを書き直してたらますますExpressがわからなくなってきた。もう一回勉強しなおそう。これは。

2019/1/31 20:53:31

なんか手を入れるとエラーがまたポコって出てきて、今まで動いてたのが不思議。。みたいな感じに今なってる。async/awaitを入れ込みたいんだがなんかうまくいかんのよね。。

この辺とかも見てるんだけど。。

StrongLoop - Asynchronous Error Handling in Express with Promises, Generators and ES7

2019/1/31 20:55:56

そもそもExpressについてモヤっとした理解しかしとらんのがいかんのよ。。

2019/1/31 21:00:39

nginxのコンフィグのほうがわかりやすい気がしないでもない。。

2019/2/1 4:52:17

nginxのコンフィグとくらべるのはおかしいか。。

2019/2/1 6:04:29

このエラーが発生してたんだよな。。

Can't set headers after they are sent.で怒られた - Qiita
herokuにexpressをデプロイして別サーバからアクセスしたら

```
Origin http://〜 is not allowed by Access-Control-Allow-Origin.
```
といって怒られた。
...

2019/2/1 6:06:35

この情報で直りました。なんで今まで動いてたんだろうなと考えてたら、webhookのコードはExpressルータに改造する前はExpress使わず単独サービスとして動かしてたからだな。。ということはExpressにしてから一度も動いてないということですわ。。

2019/2/1 6:09:29

でまあwebhookのリクエストを受けて、シーケンシャルにアップデートする処理を書くのにqueueないとだめだなあと思って実装しようかなと思ったけど、ちょっとググったらasync.queueを見つけてこれを使うことにした。このasyncというモジュールすごいな。。

No Image
Page not found · GitHub Pages

2019/2/1 6:10:56

このqueueのインターフェースというかキューの実装の仕方がなんかすごいエレガントさを感じますわ。。自分で実装したらひどい代物になるところだった。。

2019/2/1 6:18:20

ちょっとだけwebhookのコードがきれいになったわ。。

webservices/webhook.mjs at 62714daf748543ebe440869c408ff0bf40c00702 · sfpgmr/webservices · GitHub
node.jsで作ったWebサービスたち. Contribute to sfpgmr/webservices development by creating an account on GitHub.

2019/2/1 6:20:05

次はこのエラーをつぶさないとけいけない。。

RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stderr maxBuffer length exceeded

2019/2/1 7:34:42

このエラーはchild_process.execのmaxBufferの値を調整すればよさそうなんだけど、この値を指定してもエラーがなくならないんだよなあ。。

No Image
Child Process | Node.js v13.2.0 Documentation

2019/2/1 8:29:41

よく見るとstdoutじゃなくてstderr のバッファだな。maxBuffer
はstderrのバッファサイズには影響しないのではというのがいまいまの推測。。

2019/2/1 8:30:46

とするとここはspawnを使うのが正解かもな。。

2019/2/1 18:20:44

いやいや、nodeのドキュメントには

maxBuffer <number> Largest amount of data in bytes allowed on stdout or stderr.

と書いてあって、stderrも対象になっとるな。そりゃそうだわな。。

2019/2/2 8:16:05

どうもパーミッションのせいでコマンドがうまく動作しなくてエラーが発生してstderrに吐こうと
したところでバッファがいっぱいとなってしまったようだ。

2019/2/2 8:19:30

公開しているディレクトリのパーミッションを適切なものに修正することで、コード自体は動くようになったが。。

2019/2/2 8:22:29

しかしandroidタブのおかげで、というかtermuxというアプリのおかげで外出先でもコード修正してタブレットのローカル環境でExpress動かして確認できるというのはほんとすごいな。。

2019/2/2 8:25:41

あとはペイロードの更新情報が大量であった場合に設定したバッファサイズ(limit)が有効になるかどうかだな。。ローカルの環境では有効であったが、果たしてVPSの環境ではどうなるだろうか。

2019/2/2 9:53:45

config周りもかなりいい加減だから、node-configでも使ってみることにするか。。

GitHub - lorenwest/node-config: Node.js Application Configuration
Node.js Application Configuration. Contribute to lorenwest/node-config development by creating an account on GitHub.