2013年5月14日火曜日

日の丸ブラウザはIEコンポーネントという方向に・・


※このエントリは書いてる途中で変な方向に進んでるとわかっていながら書き進めたものになります。

企業内でIE6は使われ続けてもいい。ただアクセスを外に出さないでほしい。
http://bathtimefish.hatenablog.com/entry/2013/05/14/165411

というエントリーをふんふん。確かに出てかなければどうでもいいや。と読んでいたんだが、ある事実に気づいてしまった。
元ネタの記事は


双日システムズ、Windows XPから7/8への移行向けにIE6互換ブラウザを開発
http://news.mynavi.jp/news/2013/05/10/168/index.html

からであり、このニュースを超ポジティブに捉えてみよう。
ニュース記事からの抜粋のため内容は確実ではないが

Internet Explorer互換ブラウザを新規開発
自社開発ブラウザであるためユーザ環境やアプリケーションに合わせた改修も行うことができる
なんと!!新規開発ということはこれは双日システムズさんが

日の丸独自ブラウザを作った
※ただしIE6互換の

ということに他ならないということか!
これは一大事ですよ。

では、プレスリリースちゃんと見みてみよう。

双日システムズ、アプリケーション仮想化の専門組織を立ち上げ、Windows®XP からの移行支援サービスに本格参入
~独自のIE 互換ブラウザでWindows®7/8 へのアプリケーション移行をフルサポート~
https://security.sojitz-sys.com/virtualization/news/pdf/20130510.pdf
双日システムズでは、通常IE コンポーネントブラウザと呼ばれるIE 互換ブラウザを新規開発
 ぬぬ。


IEコンポーネントブラウザ - Wikipedia
http://ja.wikipedia.org/wiki/IE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6
IEコンポーネントに含まれるHTMLレンダリングエンジンの機能を使えるため、新たなHTMLレンダリングエンジンを開発するのに比べると容易にウェブブラウザの開発を行うことができる。
ぬぬ。

これをWebkitのブラウザ達と"文字列上"で比べてみよう。

[ IEコンポーネント ]を[ 利用 ]した[ 双日システムズのブラウザ ]
[ Webkit ]を[ 搭載 ]した[ NetFront Browser NX ]

これはぱっと見一緒ではないか。
やはり日の丸独自ブラウザができたと祝杯をあげるべきという事だな。

うん。
うん。


うん・・・・・・・・・・・・・・・・・。

違う・・。
これは世界に戦いにいけるものではない・・・。

2013年5月6日月曜日

HTML5ロゴに空気をいれて爆発させるアプリを作った

HTML5ロゴに空気をいれて爆発させて運動不足解消を狙ったアプリを作ってみた。
音声を出すようにしてもらえると、マサオ隊長から激励を聞く事ができ、やる気がどんどん出てくることでしょう。
HTML5ロゴを使ったクレイジーな何か。 に応募したものです。

HTML5PUMP
http://wakasa.org/project/html5pump/
※iPhoneでご覧ください。一部のAndroid端末では正しく動作しません。
※音声が出るコンテンツですので音を出してお楽しみください。


技術的に何をしてるかというと
  • three.jsを用いてロゴを3D変形させて膨らんでるような変形をさせる
  • 重力加速度を取得してある一定速度を超えたらイベントを発生
  • 一定の計算とランダムで応援音声を再生させる
という感じです。

苦労した点としては
  • ロゴが膨らんで破裂するというものを動的に絵を作成させる方法の検討
  • iPhoneでは音声データの読み込み制限があるため、バットノウハウで乗り越えた
という所でしょうか?
ちなみに、膨張してる絵を作るところは球体にテクスチャで貼付けています。
Canvasで生成したテクスチャを最初は小さく、カメラで拡大して表示し、どんどんカメラをひきながらテクスチャサイズを変えて変形させるという無理矢理な感じでアニメーションさせています。
本来ならオブジェクト自体を変形させれば良いのですが、計算上面倒な事が多々あったため、この方法を採用しました。

HTML5ロゴが来襲してくるというアプリを作った

HTML5は皆さんのすぐそばまで来てるというのを実感(嘘)するために、視覚化を考えました。
このアプリを使えばもう見るからにすぐ来てるというのが実感できるものです。
HTML5ロゴを使ったクレイジーな何か。 に応募したものです。

HTML5来襲
http://wakasa.org/project/html5attack/
※位置情報の提供を許可してください
※携帯端末で幹線道路とか付近で閲覧を推奨

※実際にはモザイクはかかっておりません。見る楽しみが減るので加工しています。

技術的に何をしてるかというと
  • 位置情報を取得して、最寄りのGoogleストリートビューがある緯度経度を探す
  • スマホが向いてる方位を取得し、Googleストリートビューを表示
  • Canvasを重ねてモノリス的なロゴと空を飛ぶアニメーションロゴ群を500ms毎に追加
という感じです。

苦労した点としては
  • 空を飛んでくというアニメーション計算が非常にしんどいし、実際作り込み失敗。
  • iPhoneで0.1とか移動させてもうまく移動してくれないのでカクカクするのを回避で妥協する箇所が多い
  • 最寄りのストリートビューを探すというのがAPIの性質上、何度も叩かないと取れない
  • 最寄りを探すのがある程度の範囲内のストリートビューなので、どこかわかりにくいのでUI作り・・なおす気力なし。
とかかな・・いろいろ問題ある状態ではあります。

ちなみに、最初はバイファムの最終回からインスピレーションを得て
  • 紙飛行機を飛ばして地図上に飛行距離を出す
  • みんなで飛ばしたものをシェアして紙飛行機が飛び交うのを見る
という幻想的できれいなアプリだったのですが、作ってる最中に"飛ばす"というアクションが無くなり、地図上のプロットも無くなるという、完全に原型を留めていないものになりました。(涙)
おかしいな・・・・。
※4分30秒付近からのイメージ

2013年5月5日日曜日

HDDの容量が足りなくなって調べたらAdobeさんが確信犯だった件

ディスクの空き容量も見なくて使ってたら、いきなり容量が足りないと言われた。
残り1GB・・だと!?!?
それも何で気づいたかというと、iPhoneのiOSのアップデートかけようとしたら容量足りないって、iOSの方がか?と思ったら自分のHDDだったという悲しすぎるオチ。

とりあえず、容量が足りないと言われた時にまず疑うのがキャッシュ系。
そのキャッシュ系はユーザーライブラリにあることが多い。
うーむ・・と探したら、さすがAdobeさん。

ハードディスクの空き領域が徐々に減っていく (Premiere Pro/Encore)
http://helpx.adobe.com/jp/x-productkb/multi/cpsid_84648.html
問題点 (Issue)
Adobe Premiere Pro や Adobe Encore を使用していると、ハードディスクの空き領域が自然に減っていきます。
やっぱりお前か・・・。力強く仕様ですが何か?とドヤ顔で書いてやがる。
自分で悪いと思ってるのか対処方法が公開されていた。
解決方法 (Solutions)
この問題を解決するには、以下の場所にあるキャッシュデータを、作業終了後に削除します。
やはり力強い。自分では消さないので消してくれと。
ほいほい。わかった。消せばいいのね。
と思っても、OSX 10.7以降はユーザディレクトリにはライブラリが存在しないと思っていたらその対処法もあった。
さすがAdobeさん。確信犯。

非表示のユーザーライブラリフォルダーにアクセスする方法(Mac OS X 10.7 以降) http://helpx.adobe.com/jp/x-productkb/global/cpsid_91195.html

とりあえず表示してないと何かと面倒なので、表示する設定をターミナルから流し込む。
で、Adobeフォルダみたら・・ 50GB 超え。
おぃ。俺のHDDの半分もっていってやがる!!
※HDDの容量は120GBです。

で、さっくりここの対処方法から削除してやっと復活。

他にもいろいろクリーニングしたいけど、クリーニングアプリの良さげなものをもわからず一旦これで終了。

みなさんもAdobe製品にはお気をつけを・・。

2013年5月1日水曜日

HTML5ロゴを愛する人のためのChrome機能拡張を作った

HTML5ロゴが好きで好きでしょうがない人のためのChromeの機能拡張を作った。
HTML5ロゴを使ったクレイジーな何か。 に応募したものです。

● We Love HTML5 LOGO! more. ●
https://chrome.google.com/webstore/detail/we-love-html5-logo-more/ipldhmeiifmgbfdjkonnpjcgegilpmmk?hl=ja

これを入れるとあら不思議。
すべてのWebページに 5HTML5 という文字があったらHTML5ロゴになります。



!注意!
サイトの作りによっては適応されない場合があります。
例:amazon.com、google.com

上記が少々使いにくいと感じたり、普通にサイトを使いたいという方用に抑えたフォントサイズのものもご用意してあります。

● We Love HTML5 LOGO! ●
https://chrome.google.com/webstore/detail/we-love-html5-logo/dccieefclmgoommkpjjdppmdpbpgecim?hl=ja

!注意!
かなり自然に溶け込むサイズにしたため、忘れてこのまま画面キャプチャを送って大惨事にならないようにお気を付けください。

技術的に何をしてるかというと
  • HTML5ロゴのSVGデータをSVGフォント用に変換
  • Chrome機能拡張でロードされた時に「SVG FONTが含まれるSVG」と「bodyに対してfont-familyを適応するcss」を追加
だけです。

細かい情報はあまりないので以下を参考に試行錯誤して微調整しました。
http://www.w3.org/TR/SVG/fonts.html
アイコンをFireworksでSVG出力してWebフォントに対応させる方法

ちなみに苦労したのがSVG FONTの作り方で、普通のSVGをFONTとして使うにはかなり厄介でIllustratorなどから吐き出した複雑な図形のSVGだとpathタグで吐き出されるためそのまま使えません。
SVG FONTの場合、svgのパスで d アトリビュートで作れる図形じゃないとだめなようで、変換が必要でした。
最悪手動で作ろうかと思ってたのですが、 IcoMoon App というサイトでうまいこと変換してくれるというのを知ってそこで変換しました。