【仕事】 DESCENTE 2017SS特設サイト

ss2017.descente.jp

DESCENTE(デサント) 2017SS特設サイトTOPページのフロントエンドを担当いたしました。
シンプルな構成ではありますが、WebGLを使った商品切り替えエフェクト、ページ全体のトランジションなどを工夫し、単調になりすぎずユーザーが特別感を感じられるように心がけて実装しました。
PC、スマホと同じ演出となっていますのでぜひ両端末でご覧ください。

Webサイトリニューアル

ikeryou.jp

僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表示されます！)。PCとSPどっちも見れるのでよかったらぜひ！

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：西塚豪