Web技術の最近のブログ記事

MicrosoftがWebGLをIE11でサポートすることを正式に明らかにしました！
「Internet Explorer 11 Preview提供開始、WebGLやMPEG DASHに対応」（engadget日本語版より）

この時をどれほど待ち望んでいたことか！

これで、エマステのＲＰＧゲームもIEで動作させることができます。

いやー、ついにほぼ全てのＰＣブラウザ上でリアルタイム３Ｄコンテンツを表示できる時代がやってきました。

IE11以降のシェアが十分に普及したら、エマステの通常のページにもWebGLを色々取り入れてみようと思います。

面白くなってきたヨー！

In English:
Microsoft brought out preview version of Internet Exproler 11 which supports WebGL!

I waited anxiously for this day.

So My RPG Game can now support IE.

Well, The times when almost all PC Web Browser show realtime 3D contents come over at last.

If versions after IE11 spread enough, I will use WebGL in pages of EMASTATION.

Things are starting to heat up!

WebGLであるゲームの開発をやっているんですが、テクスチャ関連で以下のエラーが出てくるんですよ（ちなみにブラウザはChrome）。

RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

もうね。何かと思って。テクスチャサイズは256x64だし、フィルタリングの指定も間違ってないし。色々ググったり試行錯誤して辿り着いたオチが……。

「テクスチャ画像の読み込みが完了していない状態でレンダリングを行ったから」

あー、たしかに or is not 'texture complete' って書いてあるけどさ……。
ふつー、non-power-of-2の方に注目しちゃうだろ。
おいら、まさかなーあるわけないよなーとか考えながらも画像サイズを256x256に変えてみたりとかアホみたいなことしちゃったじゃまいか。

何が ~ or ~ だ。どっちの原因なのかそこまでちゃんとチェックして、適切にエラーを出せ、と。

WebGLの画像ファイル読み込みは非同期なので、ちょっと横着して、テクスチャの読み込みが完了する前に描画命令しちゃうのはよくある事だと思うのですよ。

そういうケースも考えて、シンプルに「まだロード完了してないよん」とか言ってくれればいいのに、「non-power-of-2」とかいうからもう誤解しちゃったじゃんよ。

こういう「原因は〜〜〜かもしれないし〜〜〜かもしれません」的なエラーって設計した人はどういうつもりで作ったんだろう。
仕様的に判断が難しいというのは考えづらい気がするんだよなー。

やべぇ……asm.jsといい、コレといい、最近のMozillaは本気だ。

Unreal Engine 3がWebGLに移植されるようで……。今のWebGLの仕様的に制限はないんでしょうかね？　それがちょっと気になりますが。

まぁ、こうやってどんどんWebGLが商業ゲームに使われるようになれば、IEもいずれはWebGLに対応せざるをえなくなるでしょう。やーいざまーみろ、みたいなｗ

さぁ、負けじと例のプロジェクトを急いで進めねば……。

4Gamerではもっと詳しく解説が載ってますね。
http://www.4gamer.net/games/032/G003263/20130328081/

前回の書き込みしかり、最近、メールで知人や知らない人からプログラムの質問を受けることがよくあります。

ちょっと面白かったのが、Web開発初心者の方で、「ネットに公開しているWebアプリなんですが、プログラムミスにより、パスワードのハッシュが外部から見れる状態になってしまっていました。」
「でも、ハッシュだから、パスワードそのものでないし、大丈夫ですよね？」

思わずのけぞってしまいました。まぁ、初心者さんだとセキュリティの勉強まであまり手が回らないのかもしれませんが。

当然のことながら、パスワードハッシュが漏れるのは、かなり危険です。

ハッシュ化につかった関数が何かバレてしまえば、パスワードの総当たり式で次々にハッシュを作成して、漏れたハッシュと一致するものが見つかれば、それがユーザーが使っているパスワードということになります。

また、総当たり式にしなくても、レインボーテーブルと呼ばれるものを利用することで、もっと高速にパスワードを特定することも可能です。

まぁようするに、ハッシュを見た人間が悪意をもっていて多少の知識があれば、簡単にパスワードがバレてしまうのです。

ということで、その人にはパスワードを再設定するよう、伝えておきました。

実は、かくいう私も、
セキュリティの勉強、まだまだ不十分です。
大々的に宣伝をしていないとはいえ、私もあるWebノベルツールをはじめとしたWebサービスを開発・運用しているので、こうしたことに関しては常に勉強を続けなければなりません。

まー、あまりやってて楽しい分野ではないんですけどねw

素晴らしいiPhone/iPadアプリを見つけてしまいました。

その名も「Puffin Browser」。なんと、Flashサイトを閲覧できてしまうWebブラウザアプリです。
標準では、iPhone/iPadはFlashに対応していない（Appleの方針による）のですが、このアプリは独自にFlashプレイヤーを実装しているんでしょうか？　複雑なFlashゲームをのぞき、大抵のFlashサイトに対応しています。

で、試しにWebノベルツールが動くか試してみたんですよ。
そしたら、動いたよ！。ママン！

すばらしいｗ　セーブ＆ロードにも対応してます。残念ながら画面最大化ボタンは機能しないとか、若干動きが重たいとかはありますが、今までiPhone/iPadではうんともすんとも言わなかったWebノベルツールが動く姿が見れただけで感動ｗ

皆さんも、iPhone/iPadお持ちの方は、ぜひ試してみてください。
「Puffin Browser」の価格は２０１３年１月現在、250円ですが、無料版の「Puffin Brouser Free」もあります（こちらは、Flashの再生機能が使用開始後２週間に制限されています）。

あ、ちなみにAndroid版もあるようです。
Androidについても、今後標準のFlashプレイヤーは提供されなくなるようなので、入れておいて損はないですね。

追記：
Webノベルツールのバージョン２では、ゲームプレーヤーの実装をFlashからJavaScriptに切り替える予定です。これにより、iPhone/iPad/Androidともに、標準のWebブラウザでWebノベルツールで遊べるようになります。
お楽しみに！

プログラミングコーナーに新作記事「複数のバージョンのNode.jsを管理 ＆ CoffeeScript導入方法」を掲載しました。

はい、みんな見ないよねｗ

プログラミングコーナーのコンテンツ第３弾、Ruby on Rails「Rails開発環境の構築（rbenvでRuby導入からBundler、Rails導入まで）」を公開しました。

Ruby環境、Rails環境、導入するのは……ただ何も考えずそのまま導入するのは簡単なんですが、
異なるバージョンのRailsのプロジェクトをいろんなところに作ったりすると、それらを管理するためには、かなりのノウハウが必要です。
Rubyのバージョンによっては動かないプロジェクトがでてきたり、Gemsの構成・バージョンも違うと動かないし、もう阿鼻叫喚ですw

そこで、
・rbenvを使って複数のRubyバージョンの管理・切り替え
・Gemは$GEM_HOMEではなく、Railsプロジェクト内にインストールする
という原則を取ることで、こうしたバージョンの問題を解決することができます。

手間はかかりますが、長い目で見ると、この方法で環境構築をすることで、幸せなRails開発ライフが送れることでしょう。

で、やっぱりこんなコンテンツ、エマステのみんなは誰も読まないだろうなー、という……orz

えー、プログラミングコーナーのコンテンツ第２弾、Ruby on Rails「特定のコントローラーに対応したCSS、JavaScriptのみ読み込む方法」を公開しました。

Railsの初期状態では、どのコントローラーのページでも、アセットディレクトリ内の全ての（つまり、他のコントローラーのも含んだ）CSS/JavaScriptファイルが読み込まれてしまいます。
あるコントローラーのページについて、そのコントローラーに対応するCSS/JavaScriptのみを読み込む方法です。

え？　わけが分からない？　気にしないでorz

ちなみに、WebノベルツールはこのRuby on RailsというWebアプリケーションフレームワークで作られています。だからこういう情報は個人的に重要なのです。

でもまー、エマステの常連さん、こんなページ誰も読まないだろうな……w

皆さんご存じの通り、現在のエマステはフレーム構造になっておりまして、そのせいでブラウザをリロードすると最初のブログページに戻っちゃったり、SEO的にもあまりよろしくなかったりと、デメリットが多いものでした。よって、フレーム構造を廃すべく、サイト全体をMovableTypeかWordPressで構築し直すという計画を２〜３年ほど前から企てていたんですが……。

挫折しました（笑）

いや、結構敷居が高いというか、以下のような問題があったのですよ。

• テンプレート（Webページのレイアウト）作りが難しい。　←エマのスキル不足が原因


• 今までの全ての静的HTMLファイルを全て手作業でブログに移していかないといけない。


• 万が一データベースのデータが失われたら、エマステのWebデータが全部おじゃんになる可能性が。←定期的にバックアップを取って、さらにHTMLを静的出力すれば良い話だが、なんか生理的に心配。

というわけで、現在ではブログシステムを使ったエマステの再構築はあきらめまして、静的HTMLに対して画面上部のヘッダーと画面下部のフッターをSSIで読み込む、という原始的な対応策でいくことになりました。まぁこれでもフレーム構造は廃止できるしね。全部のHTMLファイルにSSIコードを入れる作業がめんどいんだけど。
すでに主要なページについては、SSIコードを入れており、それらのページをフレームから外に出して閲覧すると、ヘッダーやフッターが付いていることに気づかれた方もいらっしゃるかと思います。まだ各小説のページには入れてないのですが、来年の春頃までには全部入れるつもりです。それが完了したら、いよいよフレーム構造とはおさらばです。

まぁ、将来的にはブログやCMSベースにしたいなーとは思うんですが、あと少なくとも５年くらいはSSIベースでいくでしょうｗ

おいらのWebデザイン能力って、ほんとヘタレだなぁ（泣）

前の記事で言及したとおり、Macはバージョン10.8(Mountain Lion)から、Webページに設置されたMIDI音楽が鳴らないという、エマステ的にかなり致命的な仕様になってしまいました。

そこで、下のkeim_at_Siさんという方がかなり実用的なFLASH製MIDIプレーヤを作っておられたので、
http://wonderfl.net/c/4IH3
ライセンスもMIT Licenseということなので、ありがたくこれを使わせていただくことにしました。

OSのバージョン判定がめんどいので、10.8に限らず、全てのMacで、このFLASH製MIDIプレーヤーを使ってエマステのWebページのMIDIを鳴らすようにしました。

このプレーヤー、万能ではなく、MIDIファイルによってはフリーズして音が再生されなかったり、音が鳴ってもサウンドがチープだったりする（FM音源方式だからしょうがない）んですが、まぁ背に腹は代えられません。鳴らないよりはいいということで。

Appleが方針を変えて、MIDIのサポートを再開してくれるのが一番なんですけどねぇ……。望み薄そう。

うーん、Macが一気にエマステの閲覧非推奨ＯＳになってしまったな。マカーとしては残念でならない^^;