‘プログラム’ カテゴリーのアーカイブ

ES6の実装状況を見てみる

 プログラム
 公開日:2015年10月22日

 先日、とあるJavaScriptなソースを見ていたら、
const
=>
`(バッククォート)
などの記述に出くわしました。
なんじゃこれは?
と思ったので調べてみました。
どうやらES6で使えるようになったヤツっぽい。

ときに、
いわゆるJavaScriptというのは、
標準化されたECMAScriptの実装の一つだったりします。
WebブラウザはECMAScriptの仕様にしたがって実装する感じになっています。
現在の最新バージョンは6となっていて、
通称というか略してES6とか呼んだりするようです。

 ES6には便利な機能とか色々あるようなのですが、
(例えばこちらこちらな感じ)
ブラウザによって実装状況がまちまちなので、
あらかじめ調べておく必要がある感じです。

 実装状況はこちらで参照できるようです。
何気なく使ってた typed array ってES6な仕様だったのね(^_^;)
最新の Firefox ver41, Chrome ver46 あたりで対応が進んでいる項目なら、
ES6で書いてしまってもPC向けでは問題ないかも?

 個人的には、
テンプレートリテラル(Template Strings)がうれしい。
こちらこちらに詳しく書かれています。
いわゆるヒアドキュメントが使えないのが至極残念に感じていたのですが、
テンプレートリテラルを使えばばっちり解決。
しかも変数展開の機能まであるし。
こりゃ便利!!!

 具体的には、
WebGLでGLSLコードをベタ貼りできるようになったり、
CSSファイルを使わないでスクリプトだけでCSS追加とかに使えそう。
例えばCSS追加なら以下のように書けそうです。
見た目に分かりやすくなりますね。

Google Maps API 3.22

 プログラム
 公開日:2015年9月17日 / 更新日:2016年2月16日

 4年以上も前に作った「現在位置取得してGoogleMap表示」。
Geolocation の学習のために Google Maps API を使ってやりました。
当時の本家GoogleマップのUIの使い勝手を
個人的に気に入っていたので、
似たようなレイアウトになるように作ったのを覚えています。

 2014年3月頃に本家GoogleマップのUIは大きく変わりましたが、
APIを使って作った方は大きな変化はなかったように思います。
新しくなった本家のUIは嫌いじゃないですが、
以前の使い勝手の方が好きなので、
むしろ自作の方を多用していたりしました。

 ところが最近見た目が変わっていることに気づきました。
どうやらAPIのバージョンが3.22になった影響のようです。
UIコントロールの配置をカスタマイズして
調整しようかとも思いましたが、
個人的にどうもシックリ来ない感じなので(^_^;)
APIのバージョンを3.21に固定して
以前のような見た目と使い勝手にするようにしました。
APIのバージョンを指定するにはこちらのようにやります。

 ちなみに、私が作ったやつはこちらです。

★2015年9月18日追記。
v3.21とv3.22とで見栄えがどう変わったのかはここに出ています。

★2016年2月16日追記。
旧UIになるようにバージョン指定してるのに
何故か新しい方のになってしまっている?
こちらに書かれているように
google.maps.controlStyle = 'azteca'
とやったら旧UIになってくれました(^_^;)

JavaScript→PNG

 プログラム
 公開日:2015年6月18日 / 更新日:2016年12月22日

★2016-12-22追記。
ツールが動かなくなっていたことに気づいたので修正しました。
よく分からないけど、
以前のやり方だとダメになったっぽい・・・。

 先日、
JavaScriptのコードをPNGに偽装!?」というのを書きましたが、
最近のブラウザはヘッダに
Accept-Encoding: gzip, deflate, sdch
とか付けてサーバーに要求してたりするので、
サーバー側が対応していればGZIP圧縮転送とかになっているようです。

 そんなわけで、
あえてPNGに圧縮しても実際には有用性はあまり無いのかもしれません。
むしろ、コードを展開するコスト(時間やメモリ)が掛かりそう。
こちらのページでも、
容量制限されたニッチな分野での利用を想定している模様です。

 とは言え、
なんか面白いので自分もやってみることにしました(^_^;)
先のページでは自己解凍までやってたりするのですが、
そこまでやると大変なので素直な実装でやってみました。
ただ、

JS のコードは 128 種類の文字で構成されており、

と書かれている点については、ほとんどの場合で問題なさそうなのですが、
コード中に日本語とかの文字が含まれている場合はうまく行かないので、
String.prototype.charCodeAt()で取り出した値は、
符号なし16ビット値として扱うように変えました。
サロゲートペアになっていても順に詰め込むので問題ないはず。

 ということで作ってみたツールはこちらです。
あらかじめClosure Compiler等で短縮しておくと、
サイズをより小さくできると思います。
また、出力されるPNGは1ピクセルあたり24ビットな感じになるようなので、
さらに最適化の余地があります。
ScriptPNG の Lossless High で最適化すると、
さらにサイズを小さくできると思います。
くれぐれも Lossy で最適化しないように。元に戻せなくなります(^_^;)

 ちなみに拙作のMMDビューワーでは
読み込んでいるscriptが17個もあったりするので(^_^;)
それらを全てまとめてPNG化した版も作ってみました。こちらです。
コードを展開するため起動に時間がかかりますが、
HTMLにscriptタグが1個も無いです!
(勝手に挿入されるCloudFlareとかGoogle Analyticsのscriptは除きます)

three.jsで遊んでみる(33)

 プログラム,
 公開日:2015年5月28日 / 更新日:2016年8月15日

 今まで、MMDモデルとかのデータをチェックする際は、
1)ソースをちょっといじって読み込むファイルを変更。
2)対象ファイルを適正な場所に配置。
3)Webサーバーをローカルに立ててチェック。
という手順を踏んでいました。
大した手間じゃないので特に気になっていたわけではないのですが、
ファイルをドロップするだけでチェックできたらもっと楽になるなと思い、
今回ちょっとしたビューワーを作ってみた次第です。

 ファイルをドロップする方式にすれば、
ファイルの読み込みはクライアント側だけで処理できるので、
つまり、サーバー側にファイルを置かずに済むので、
楽曲ファイルの再生にも対応することにしました。
今までデモで楽曲を鳴らさなかったのは、
著作権的によく分からなかったということもありますが、
使用している無料のホスティングサービスである
@PAGESの規約に抵触しそうなので・・・。
というか基本的に踊らせるのが目標だったので、
音楽とかは無しでも良いかな
というのが大きな理由だったりしましたが(^_^;)

 サポートしているファイル形式は、
モデルはPMX、モーションはVMD、楽曲はMP3です。
モデルについては必要なテクスチャをまとめる必要があるので、
ZIPに対応しています。
テクスチャ形式については、
Webで標準的に使えるBMP,GIF,JPG,PNGの他に、
TGAとDDSも一応サポートしています。

 なお、PMX仕様のうち、モーフは頂点モーフのみに対応しています。
ボーンやマテリアル等の他のモーフには対応していません。
また、頂点blending方式の一つであるSDEFにも対応していません。
BDEF2相当として扱われますのでご注意ください。

 いくつかのモデルやモーションのファイルを使って
動作確認をしてありますが、
あらゆる組み合わせを試したわけではないので、
うまくいかない場合があるかもしれません。
また、読み込むファイル量が多かったり、ZIPを展開するなどした場合は、
ローディングに時間がかかる場合があるかもしれません。
その辺りはご了承のほどお願いします。

 それから、WebGLなアンチエイリアスにも対応しました。
ただしグラボの性能がそれなりに必要となるようです。
自分のノートPCではFPSが半分くらいに落ちる感じ・・・(^_^;)
WebGLのコンテキスト作成時にしか指定できないので、
動的にON/OFFできないのがちょっと残念。

 ということで作ったViewerはこちらから試せます。

★2016年8月15日追記
audioコントローラの見栄えがブラウザによって違ったり、
バージョンアップで変更されたりするっぽいようなので、
こちらを導入してみました。
整合性をとるのに手間取ったけど(^_^;)

★2015年11月16日追記
対象が複数ある場合はラジオボタンで排他的に選択できるようにしました。

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

表示関係のチェックを全て外し、輪郭線の太さをゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

JavaScriptのコードをPNGに偽装!?

 プログラム
 公開日:2015年5月13日

JavaScript を PNG に圧縮する

 これは面白い!
難読化というかステルスなJavaScriptとして使えそうです(^_^;)
DOM生成とかも全てJavaScriptでやれば、
一つのhtmlファイルだけで完結するアプリとか作れちゃいそうですね。
サーバー側の仕組みとか無しで、
クライアント側だけで出来ちゃうのがポイントですね。
仕組みとしては以下の様な感じのようです。
1)JSコードの文字列をcanvasのimagedataとして詰め込む。
2)自己解凍なコードをチャンクとして埋め込んでPNGにエンコードする。
3)拡張子をhtmlにしたファイルとして生成する。
JSコードに戻すには上記の逆をやれば良いことになりますが、
PNGのデコードはブラウザの方でやってくれるので、
1)の逆だけで済みますね。

 特定の公開フォルダに置いたPNGのMIMEがtext/htmlとして解釈されるように
サーバーの設定とか出来れば、画像が置かれているだけのように見えますね。
といってもサーバー管理者以外に意味なさそうですが(^_^;)

 自己解凍の仕組みがスゲー巧妙&トリッキー!
バイナリであってもHTMLとして解析できれば動いちゃうのですね(^_^;)
こちらのデモでダウンロードした、png.html を png.png にリネームすると、
ちゃんと画像として表示できます。

 ときに、自己解凍のコードに (1,eval)(e) とあるのが気になりました。
そういえば自分は eval とか使ったこと無いなぁ。
こちらによると、間接のeval呼び出しはグローバルスコープで実行されることが保証されているそうです。
以下のようなコードを実行すると、

↓こんな結果になるそうです。一つ勉強になりました。

 それにしても、もともとは読み込み時間を短くするために、
Closure Compiler とかを使ってJavaScriptコードを圧縮するわけですが、
意図せずしてコードの難読化にもなっていたりします。
とは言えテキストなので読もうと思えばナントカ読めます。
しかしバイナリ圧縮までされるともう読む気が失せますね(^_^;)
というか最近は Emscripten で変換したコードとかあって、
もはや人間が読めるような代物でないのもありますが(^_^;)

 ちなみに、jQueryは↓こんな画像になるようです。