S.F. Blog

StringオブジェクトとString型

2020-03-15T09:21:26Z

JSの文字列これはJSを嗜むものにとって当たり前のことかもしれないが。let literal = &ීaaa&ී;let obj = new String(&ීaaa&ී);という2つの変数を定義する。このときliteral instanceof String;の結果はどうなるだろうか。結果はfalseである。また、obj instanceof St...

ejsのincludeにおける不可解なエラー

2020-03-05T22:21:46Z

ビルド環境を構築中に、ejsのコンパイルのテストしていたところ、includeで不可解なエラーに遭遇した。<% data = {title:&ීlogin&ී};-%> <%...

ビルド環境を整える

2020-03-02T12:28:21Z

簡単なCMSを作るにあたり、ビルド＆テストを行う環境構築を行っている。一応以下のものを使って作りはじめている。UIのコンポーネント作りはriot.jsでここはメジャーなReactでと言いたいところだが、なぜか昔からriot.jsに惹かれており、これでUIパーツを作ろうと思っている。riot.jsは設計がHTMLとJSの範疇からあまり飛び出してなく自然な感じがよいと思っている。これとEJS・bulm...

CMSもどきを作ろうとしている

2020-02-29T02:32:52Z

ブログコンテンツ用のパーサ・レンダラを作ろうと思って開発環境を整えていたが、その間いろいろ思うことがあって簡単なCMSもどきを作ってみようと思い立った。が何かこう画期的なアイデアが浮かんでいるわけでもない。単純にCMS的な何かを作ってみたくなったのだ。今まではHTMLを直書きするか、ベースで文書を書いて静的ブログジェネレータを使ってHTMLに変換していた。機能的におおむね問題はない。がなんとなく今...

markdown.plを読む

2020-02-18T22:18:15Z

パーサ・レンダラを作るのであれば原典のソースコードであるを読まないといかんだろうということでぼちぼち読んでいる。拡張子が示す通り、で書かれていて、2004年にさんが作ったコードである。Perlという言語を知ったのは確か1996年あたりである。当時勤め先のWebは上のだった。まだもリリースされて間がないころで、企業のWebサーバーはNetscape社製が多かった。Netscape Enterpris...

Markdownのパーサー・レンダラの自作

2020-02-18T12:42:47Z

Webサイトリニューアルの一環として、ベースのオリジナル・ドキュメントのパーサ/レンダラをで作りはじめた。が、まだはっきりと「これ」で進めると決めているわけでもなく、markdownに関する知識を得たい欲求もあるので手を止めて情報を集めたりしている。githubのreadme.mdもmarkdownで書けるわけだが、これは正確にはmarkdownではなく(GFM)というmarkdownの拡張書式で...

Webサイトリニューアルに関するここまでの活動について

2020-02-11T09:14:36Z

はじめにWebサイトリニューアルに関する活動は「思いつくくまま・気の向くまま・行き当たりばったり」でやっている。方向性はまだ完全には定まっていないがここでいったんいいままでの状況や今後に関してメモっておこうと思った。トップページのリニューアルの状況今使っているSNS（//）へのキュレーション・ページにしようとまず考えた。そしてサンドボックス・ページを試しに作ってみたりした。このページはデザインの検...

CSSの詳細度(Specificity)が引き起こすトラブルとその解決策について

2020-01-30T21:24:58Z

はじめにSVGのプレゼンテーション属性を生かすためのCSS設定を行ったところ、他の要素のスタイルが変化してしまった。その原因を探ったところ詳細度(Specificity)が変化したためだということがわかった。この記事ではトラブルの内容・原因究明について述べる。トラブルの内容前回で、SVGのtext/tspan要素に設定したフォントに関するプレゼンテーション属性を生かすため、*セレクタを:not(t...

インラインSVGのAMP対応における問題、プレゼンテーション属性で指定したスタイルが反映されない問題への対応

2020-01-28T20:30:19Z

はじめにWebサイトリニューアルの一環として、AMPページにおけるエラーの修正をぼちぼち行っている。いろいろなエラーが出ているのだが、今回はインラインSVGでエラーが出ているコンテンツを修正した顛末、プレゼンテーション属性で指定したスタイルが反映されない問題への対応についても書いておく。インラインSVGにおけるAMPの対応AMPはインラインSVGもサポートしているが、制約があって使ってはいけないタ...

AMPページのエラーを修正する

2020-01-27T12:41:05Z

このサイトのブログ部分は自作の静的ブログ・ジェネレータを使って出力している。コンテンツはMarkdown+独自記法で書いて、素のHTMLコンテンツとAMP HTMLコンテンツの2種類にレンダリングしている。AMPはモバイルページにおいてパフォーマンス向上をはかるためきつい制約を設けている。そのため自由にHTMLを使って書いている過去のページをAMPに適合させるのがとても面倒である。

Webサイトのリニューアルを進めている

2020-01-21T21:01:59Z

はじめに久しぶりにWebサイトのリニューアルに取り組んでいる。去年もそこそこいじったのでその振り返りと今やっていること、そして今後について書いておこうと思った。ブログを更新するのもMarkdownで文章を書くのも久しぶりである。。去年行ったことnginxからexpress.jsへ移行正確には２０１８年の暮れからになるのだが、Pure JSなWebサーバー環境構築をしたくてWebサーバーをnginx...

mwasmのプリプロセッサを作っている

2019-05-26T06:06:10Z

wasmのテキスト・モードではメモリのオフセットアドレスにラベルを付けることができない。なので可読性が著しく下がる。(module (memory $memory 1 ) (export "memory" (memory $memory)) (func $test (i32.load (i32.const 1024 ));; <-- メモリオフセットは定数で...

RYDEENのカバー曲をパソコンで作り始めて35年経過した～ここに至るまでの変遷をまとめる（２）

2019-04-16T21:15:54Z

はじめに35年を経過したこのカバー曲つくり。ここに至るまでの変遷と現状についてここで一つまとめておこうと思った。の続き。1つ前のエントリはこちら。きっかけの続き1983年:MZ-700購入最初に手にしたパソコンはMZ-700だった。おそらく1982年の終わりころだったと思うんだよなあ。。PC6001にするかどうか悩んだんだけど、PC6001はメモリの少なさが気になって買わなかった。ゲームと音楽演奏...

RYDEENのカバー曲をパソコンで作り始めて35年経過した～ここに至るまでの変遷をまとめる（１）

2019-04-15T12:11:57Z

はじめに最近になってまたYMOのRYDEENのカバー曲つくりを再開している。ちょっと飽きてきた感はあるんだけど。。BASICのPLAY文で打ち込み、ダブルラジカセでピンポン録音しはじめたのが17歳ころじゃないかなと思う。そこから数えると今年でちょうど35年目である。現在はWin10+REAPER+UR22MkII＋AKAI MPK miniで作っている。35年を経過したこのカバー曲つくり。ここに至...

帯状疱疹

2019-04-14T11:15:09Z

先週あたりから、右胸の下あたり虫刺されのような発疹ができた。ちょっと市民の森を散歩して藪の中に入ってしまったので、ブヨだかアブだかに刺されたのかな？と思っていた。最初はちょっとかゆい感じがした。翌日になると今度は発疹の部分が痛み出した。表面が服に触れるとピリピリした痛みが走る。痛みがあるとするとハチとかなのかな？と思いつつ、市販の軟膏を塗るとすごく痛い。これはおかしいなと思いつつも様子を見ることに...

binarien/binaryen.jsのwasm化やwasmのテキストフォーマット変更対応。- オレオレ言語を作る -

2019-03-09T22:46:47Z

はじめに少し前にwasm版 binaryen.jsを再ビルドしたときにオレオレ言語のコードジェネレータが動かなくなってハマった。原因はwasmのテキストフォーマットでのインストラクションの記述フォーマットが変わったためだった。binaryen.jsオレオレ言語はwasmバイナリ出力をbinaryen.jsというライブラリに依存している。binaryen.jsはbinaryenをemscripten...

オレオレ言語のこれまでと今後

2019-02-18T20:48:36Z

はや1年2018年2月ころから作り始めた「オレオレ言語（sgl2）」は1年を経過したが、やはりストレートに成果物を作るというわけにはいかず、紆余曲折し中途半端なところで止まっているところである。そもそも静的型付け言語のglslと動的型付けのJSとのデータのやり取りのオーバーヘッド（実装コスト＆実行時の型変換のオーバーヘッド）が気になってしょうがないことや、コルーチンの言語サポートを動機としてオレオ...

静的サイトジェネレータのアップデート（nginx→express）

2019-02-10T03:16:11Z

はじめに去年からWebサーバをnginxからexpressにアップデートした。途中放置気味であったがようやくまとも動くようになったので、テストを兼ねてこの記事を書くことにする。約8か月振りのブログ更新となる。静的サイト・ジェネレータ私が今使っているServers Man VPSは月額467円のエントリープラン、メモリ1GB/HDD50GBのものを使用している。最初はメモリ256MBであったがだんだ...

binaryenをwasmでコンパイルしなおす

2018-05-03T21:07:04Z

今作っているオレオレ言語はbinaryen.jsというライブラリでwasmバイナリを出力している。これを使うことによってJS上でwasmオペコードを編集・バイナリ出力・テキスト形式出力などが簡単にできる。https://github.com/AssemblyScript/binaryen.jsbinaryen.jsはbinaryenをemscriptenでコンパイルしたjsファイルである。これを今...

オレオレ言語開発はそこそこ進めている

2018-04-30T19:12:55Z

ゲームを作るための言語を作っている。glslをJSにトランスパイルするglsl-transpilerがすでにあって、それをベースにすれば容易に作れそうな気がしたが、そもそも言語開発というものをしたことがないので、ソースコードを読んでもなかなか理解できず、先に進まない。このトランスパイラは内部でglsl-parserを使ってASTを作っている。でこのparserはベースとしてはpratt parse...

ゲーム用のオレオレ言語を作るためにPratt Parserを勉強している

2018-03-11T02:04:46Z

ゲーム製作も佳境に入っているといいたいところだが、全然進んでおらず、むしろ完成からかなり遠のいている。なぜならば、ゲームを作るためのオレオレ言語を今作っているからである。動機WebGLを念頭においてゲームコードをJSで書くとどうしても型の問題にぶち当たる。WebGLはわりと厳密に型を要求するし、バイト単位のオフセット指定なども必要なので、JSでは普段気にしない変数型やメモリ配置に気を遣わなくてはな...

WebAssemblyとAssemblyScriptの導入を考える

2018-02-12T03:30:47Z

2Dスプライトエンジンもとりあえず完成し、続いて元のゲーム・コードに統合しようかなと思ったが、WebAssemblyがメジャーブラウザでは既定で有効化されていることを知り、使えないか少し掘り下げて調べていた。WebAssembly(wasm)WebAssemblyはWebにおけるバイナリ・フォーマットの標準案であり、目指しているのはコードの事前コンパイルによるコード・サイズの圧縮、サーバーとUA間...

ポイントスプライトを使って2Dスプライトを描くコードを書く

2018-02-03T01:24:28Z

以前three.jsベースでポイントスプライトを使った2Dスプライト描画コードを書いたが、WebGL2.0で書き直すことにした。GPUで2Dスプライトを描画するのは私ができるくらいなので非常に簡単である。過去何度か4頂点・三角形2枚を使ってスプライトを描くコードを書いたが、少し前に点の描画で、点の大きさが指定でき、点の描画にテクスチャが使用できることを知り（ポイント・スプライト）、素のWebGL2...

twglの利用もやめ、素のWebGL 2.0でレンダリングコードを書きなおす

2018-01-18T12:11:37Z

twglを使ってコードを書きなおしたが、結局素のWebGL2.0で書き直すことにした。理由としてはtwglは初期設定を楽にする代わりに、レンダリング時の処理が複雑になっていて、パフォーマンス的に気になるtwglはインターリーブ配列に対応していない興味本位の3点である。3番目が比重としては一番大きい気がする。インターリーブに興味を持ったのは以下の記事を読んだから。https://qiita.com/...

WebGL 2.0で作り直し始める。そのためにthree.jsの利用をやめ、twglを使うことにする。

2017-12-28T02:39:05Z

シューティングゲームつくりは入力関係のコードを書き、テキスト表示をGLSLで書き直し、マップエディタを作り始めるところまできた。が、ここにきてWebGL2.0をどうしてもいじりたくなり、three.jsの利用をやめ、twglを覚えながらコードを書き直しているところである。three.jsの利用をなぜやめたかといえば、WebGL2.0のサポートがthree.jsにはまだないからである。https:/...

Gamepad APIを研究して入力部分を作り直す

2017-12-03T00:25:24Z

もう12月か。。4月からシューティングゲームを作ると宣言してはや8か月が経過している。シューティングゲームばかりやっていたわけではなく、はてなブログの引っ越しとか、Overpass APIをいじっていたりしてたりとかしてたから、実質いじっている時間はトータルすると1か月も満たないかもしれない。だけど遅々として進まないのはいつもの通り。でも最近は割と集中してコードを書いている。なのでBlog更新は...

Point Spriteによる2Dスプライト・エンジンについて

2017-11-15T12:18:35Z

Blenderでモデリングしている合間に、three.jsのShader MaterialとPoint Spriteを使って、2Dスプライト・エンジンを作ってみた。動機としては、以前作った2Dスプライト・エンジンは、処理的に無駄が多いので。ちょっとポイントスプライト+GLSLで2Dスプライト・エンジンを作ったみたりもしたけど、これはお蔵入りかも。 pic.twitter.com/Rv1tzIelU...

Blenderでキャラクターを作り、ゲームの構想を練る

2017-11-07T12:35:58Z

Blenderによるモデリングはかなり慣れてきた。といってもシューティング・ゲームで必要なキャラクターをローポリで作れるレベルだが。頭にこのイメージがあってその通りに作れるわけではなくて、立方体をこねくり回しているうちになんとなくできたレベルでもある。ただこういうモデリングに必要なコマンド・ショートカットは一通り覚えることができた。しかし気が付くと触り始めてから2週間くらい経ってるな。。歳をとると...

Blenderを学びながらキャラクターを作る

2017-10-29T07:21:02Z

シューティング・ゲームのコードをいじっているうちに、やっぱり最終的には２Ｄ縦スクロールにもっていきたい思いが強くなってきた。ただ一番の問題はグラフィックである。自機をはじめ敵キャラクターを量産せねばならない。しかし私には絵心がない。なのでDOGA-CGAのキャラクターをBlenderに持ってきて、それをthree.jsで表示することを試したりした。がやっぱりいちからキャラクターデザインを行いたい欲...

スプライン曲線（Rounded Nonuniform Spline）を描く

2017-10-15T09:16:43Z

ここのところ仕事が忙しかったり、風邪をこじらせて家で寝まくっていたりであまりゲーム作りに時間をかけることができなかった。が、ようやく体調が戻ってきたのでコードの見直しとか、お題のスプライン曲線を描いたりしていた。スプライン曲線とは、いくつか座標を与えるとその点を通る曲線をコンピューターがいい具合に補完して描いてくれるというものである。これを使えば、敵の移動軌跡を簡単に作ることができるので何とか実装...

平成29年度第70回秋季千葉県高等学校野球大会準決勝を観てきた

2017-09-30T18:40:57Z

私は高校野球を観るのが好きである。特に県大会を観るのが。私は近所に習志野高校があるので、習志野びいきではあるが。。県大会は年に3回行われている。各大会は全国大会（選抜・選手権）につながる重要な意味を持っているが、勝ち上がることによって得られるものが違っている。春季県大会は選手権予選のシード権を争う。ベスト4はAシード、ベスト8はBシード、ベスト16はCシードの権利を得る。シード権を得ると強豪校と...

ゲームの方向性やelectronで敵エディタの続きを作るなど

2017-09-30T00:54:52Z

ゲームの方向性ぼちぼちとシューティングゲームの続きを作っている。ゲームとしては一応完成しているのだが、敵配置が各面同じで、難易度（敵の攻撃頻度や弾数）がステージを追うごとに増していくだけなので、すぐ飽きる。お手本にしているギャラガを今プレイしても多分すぐ飽きると思う。でも同じレベルの面白さかというとそうではない。敵の動きの滑らかさ・配置の巧妙さ・ゲーム性は私のものはオリジナルに全く及ばない。そ...

シューティングゲームの続きを作りはじめる

2017-09-23T13:11:34Z

ここ1週間はブログ・コンテンツを修正していた。ちょっと前に作ったギャラガもどきも動きが怪しいので直していたら、続きが作りたくなってきたので、作ることにした。ブログを引っ越す前もシューティングゲームを作りかけていたが、それはちょっと置いておくことにした。といってももう相当放置しているが。。ちょっと前にゲームセンター仕様に近いゲームコントローラーを中古で買った。PS3用らしいのだが、PCでも使えるとの...

d3をESM対応してみた話

2017-09-17T17:10:54Z

このブログのカテゴリページをもう少し見やすくすべく、「Force Dragging III - bl.ocks.org」のコードをベースにカテゴリをd3で視覚化してみることにした。試した結果はいまいちだったが、そのコードをESMで書き換えてみようと思った。併せてフォールバックも実装して理解を深めておこうかなと。まずはWebサーバーのMIME Type &ීapplicattion/ja...

node 8.5.0 Windows版でESMを実行しようとすると「AssertionError [ERR_ASSERTION]: An invalid error message key was used: ERR_INVALID_PROTOCOL.」がでる件

2017-09-16T22:23:34Z

node.js 8.5.0でオプション付きでes modulesがサポートされた。なので試してみることにした。テストプログラムは以下のような簡単なものである。// test.mjsimport fs from 'fs';const file = fs.readFileSync('./test.mjs','utf-8');console.log(file);これを--experimental-mod...

node 8.5.0で--experimental-modules付きだがESMが使えるようになった

2017-09-14T21:37:56Z

node.js 8.5.0でオプション付きでes modulesがサポートされた。Add support for ESM. This is currently behind the --experimental-modules flag and requires the .mjs extension. node --experimental-modules index.mjs �フ...

amp-iframeにおけるallow-same-originの取り扱いと、Let's Encryptで証明書にAlternative Nameが追加できない件

2017-09-10T01:01:40Z

はじめにamp-iframeの「amp-iframe origin policy」についての対応の続き。AMPにおける「Origin of must not be equal to container 」エラーとIframe origin policy 、さらにはのsandboxについておさらいamp-iframeは下記ドキュメント...

Chrome 61でes6 moduleが使えるようになったので試してみた

2017-09-07T20:49:34Z

Chrome 61で