Atomで.pugファイルを.jadeファイルとして認識させる

そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。

  1. file-types packageをインストール
  2. Preferences/Open Config Folder .atom/config.csonを開く
  3. "file-types"を追加
"*":
  "file-types":
    pug: "source.jade"

最後にAtomを再起動して終わり。

iPhoneでマナーモードにしてても音がなってしまう

iPhoneでマナーモードにしてても音がなってしまう現象。
調べたのでわすれないようにメモ。

qiita.com

webaudioAPI単体なら問題ないが、HTMLAudioを一回でも使うとマナーモード無視で音が鳴ってしまう。今回はhowler.js使っててこのライブラリの場合どうやらライブラリ内でfallbackする際に使われてる模様。(たぶんAPIの存在チェックでnew Audio()とかやってる)
けれど、一発で解決できるグローバルパラメータあったので解決。
そんなものはなかったので、howler.jsちょいいじった

ここをコメントアウトして、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L209-L214

この行の前で、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L232

こんな感じで強制return

self._codecs = {
  mp3: true
}
return self;

※今やってるのはwebAudioAPI非対応のIE11も対応するので、上記のコメントはiOSのみの場合に限定した。こんな感じで。

var isiOS = /iPhone|iPad|iPod/i.test(self._navigator && self._navigator.userAgent);
if(!isiOS) {
  try {
    var test = new Audio();
    if (test.muted) {
      self.noAudio = true;
    }
  } catch (e) {}
}

【仕事】 MOZZ TOKYO

mozztokyo.jp


MOZZ TOKYOコーポレートサイトのフロントエンドを担当いたしました。
レスポンシブでありながらスマートフォンとPCで別々のUIを実装したTOPページ(もちろんワンソース)や、使いやすさと見た目のバランスを考慮した最低限の演出など、シンプルですが丁寧な実装を心がけました。
ぜひ両端末でご覧ください。

/*

クレジット :
Producer:小坂大輔 (EPOCH)
Project Manager:湊さおり (EPOCH)
Art Direction/Designer:浅野南
HTML/CSS:池田亮
CMS:西塚豪

f:id:ikeryou:20161227155353j:plain
f:id:ikeryou:20161227155400j:plain
f:id:ikeryou:20161227155406j:plain
f:id:ikeryou:20161227155409j:plain

【仕事】 ジオ・コスモス The Searching Planet 検索する地球

日本科学未来館で展示されています、地球ディスプレイ「ジオ・コスモス」の新コンテンツである「The Searching Planet 検索する地球」のWebGLプログラミングを担当いたしました。

f:id:ikeryou:20161006152707j:plain

www.miraikan.jst.go.jp

www.miraikan.jst.go.jp

日本科学未来館の地球ディスプレイに投影させるには、下記のような正距円筒図法で表した2:1の映像を用意する必要があります。

正距円筒図法 - Wikipedia

この映像の一部にWebGLが使われており、主に下記のような部分はWebGLで作られています。

  • 国、地域毎に分けられた地図のアニメーション
  • 地図上にプロットされているアイコンのアニメーション
  • データに基づいたアイコンの位置、数の調整
  • アイコンの位置によっては正距円筒図法に対応するための歪み補正

もうすこし具体的に説明すると、映像素材用に、地図上に検索量データに基づいたアイコンがアニメーションしている4096×2048の連番画像を用意しており、もちろん負荷的にそのサイズではブラウザでまとめに動かないので1フレームずつ4Kサイズのcanvasに描画してはローカルに画像として保存、という処理をしています(1万枚以上あったりするのでこのあたりの処理は全部自動でやってくれるのを作っています)。

※ 映像チームに渡す前の連番画像の一部

正距円筒図法に合わせた歪み補正はこんな感じのツールを作って変換してます。(緯度経度を指定するとそれにあわせて歪み補正する)

このようにして作った連番画像を最終的に映像チームに渡して調整をしてもらい、地球ディスプレイに投影しています。

主にブラウザ上で動くものをつくるために使うWebGLですが、このような使い方は非常に珍しく(4Kのcanvasとか画像にして連番画像作るとか)、とてもチャレンジングでいい経験になりました。webインタラクティブ好きとしては新たなWebGLの可能性を見出せたこととても嬉しく思います。この経験を活かせるような案件またやってみたいです。

ぜひ日本科学未来館で実物をご覧下さい。

 

Credit

Client:Google Japan
Agency : 株式会社BOXX
Production:株式会社EPOCH

< ALL PROJECT >
Creative Director : 辻野ユタカ(株式会社トラベリングオフィス)
Art Director : トーマス光ビルクハーン(株式会社トーマス)
Planner/Director : 六反孝幸(株式会社無重力)
Designer : 押見健太郎
Account Executive/Producer : 林賢太郎(株式会社無重力)

< Movie >
Producer:小坂大輔(EPOCH)
Motion Director:bait(EPOCH)
Project Manager:中原菜摘(EPOCH)
Graphic Designer・Illustrator:YUKI YAMADA / 渡辺明日香
WebGL Developer:池田亮(SONICJAM)
Programer:宮西涼子(SONICJAM)
Editor : 千代達也
Motion Grapher:bait(EPOCH)/ 山地康太 / 大石直樹( ビッグ株式会社 ) / 中村佑人( MARUKAJIRI INC. ) / 森澤玲 / 株式会社ティー・ワイ・オー モンスター事業部 / 株式会社オムニバス・ジャパン
Music: 福島節(Ongakushitsu Inc.)