Comment作ってみた最近のサイトでは1つのソースでPCとスマホの両方に対応することが当然のようになっています。静的なサイトでは比較的容易に作成できるのですが、演出に動きのあるサイトでは作成できるか不安でした。スマホアプリの紹介PC/スマホ両方のレイアウトに対応。PCでウインドウサイズを変えて確認してね。矢印キーやスワイプでもコントロールできます。説明しにくいので動画にしました。動画では紹介できていないけれどマウスホイールでも操作可能になっています。ハッシュでブックマーク動画で利用しているブラウザのsafariではURLが表示されないので確認しにくいのですが、アプリ毎にハッシュを切り替えて個別にブックマークできるようにしています。画像のようにtitleも変更しています。実際に右のリンクをクリックして3番目のコンテンツである「弾幕の檻」に移動できることを確認してください。→参考:http://www.designdrill.jp/newSiteData/sp_apps/index.html#3javaScript制作動機の1つにjQueryに頼らないサイト作りというのがありました。モダンブラウザでは「ブラウザ間のjavaScriptの差がほとんど無くなった」と聞いて確かめてみたかったのです。演出にはアニメ系のライブラリ「anime.js」を利用しました。svgの操作も可能なのでマイクロインタラクションもできます。今回のサンプルではメニュー部分のアイコンを変更する演出で利用しています(動画:00:20〜)。何に注力していくかjavaScriptの可能性は以前に増して広くなっていて、無計画に学習を進めると器用貧乏になってしまいそう。私は演出系(マイクロインタラクション/webGLなど)に絞って学んでいこうと思います。Instagramのマイクロインタラクション実例をGIFアニメで載せてくれているので、とても分かりやすい。過去2件の記事も合わせて読むと良いと思います。去年、three.jsを少し学んでみました。派手な演出が可能ですが、そのぶん使いどころが難しそうです。個人的には下記リンク先の「Herix」のようなメインの邪魔にならない奇妙な背景素材が好きです。webGL主にthree.jsの習作です。スマホでも閲覧可能ですが、コンテンツによっては少し重いです(mirrorとか...)。JavaScriptのまとめES6~8の概要を手短に学ぶことができます。IE11はほとんどES6に対応していないのですね...CSSjavaScriptと異なりcssでは少しブラウザ間の仕様の違いに躓きました。いっても想定より少なく印象に残ったのは以下の2つだけ。描画速度を上げるための仕様ブラウザはページの表示速度を上げるため、重要性の低い処理を省くことがあります。今回は「マスクされた画像のアニメーション」で問題に遭遇しました。具体的には動画(00:14〜)のメニューでマウスオーバー時に画像を拡大している箇所です。動画は修正後のコンテンツなので問題は確認できないのですが、safari(mac)とEdgeにおいてアニメしている間だけマスクが解除される(アニメ終了時にはきちんとマスクされる)という問題がありました。これは描画速度を上げるための仕組み(バグではなく仕様)なので今後も修正されないと思います。いうことで諦めて下記のようにjavaScriptで対応しました。cssならシンプルに記述できるので、safariとedgeがとても恨めしく感じました...。use」を利用して対応状況を確認しながら制作しました。見やすく便利なサイトなのですが緑でも対応していないプロパティがあったりします。上の表はflex-boxのjustify-contentについて調べた結果です。issue(下図)」を確認すると最下段に「space-eventlyはfirefoxしか対応していません」みたいなことが書かれています。この問題は疑似要素のbefor,afterを利用したspace-betweenで対応しました。Resources」も確認しておこうという自省です。アニメはjavaScriptとcssのどちらを使うべきか?css3では簡単な記述で要素をアニメさせることができます(今回は利用しませんでしたがキーフレームを利用したアニメも可能です)。プログラム言語ではないのでインタラクションをデザインするのは難しいと思います(できるのはhoverくらい?)。方針としては「可能な限りcssでアニメを設定し、javaScriptでcssのクラスを着脱してインタラクションを実装」するのが良さそう。今回のコンテンツでは下端メニューの入出に利用しています。→参考:youtube参考動画(0:27~)cssは以下のようになっており、thumbAreaにアニメ設定をしておきます。アニメを実行する為のclassとしてfadeDown(200px下げる)を用意しました。transform:translateY(200px);}でjavaScript側で以下のように、条件によってfadeDownを着脱すること演出を実現しています。前回の記事でvue.jsを覚えることにしたので、演出に関連しそうな箇所を確認しておきました。vue.js自体には最低限の演出しか用意されていませんが、cssアニメやアニメ系のjsライブラリ(Velocity.js)などとも連携できるので応用性は高そうです。アイテムが追加、更新、削除されたときにトランジション効果を適用するための方法を複数提供しています。上記のページ以外にも、下記のページが参考になります。サンプルもあって分かりやすいです。状態のトランジションウォッチャを利用すると特定のプロパティの変化をアニメに反映させることができます。上手く使うとインタラクティブな演出もできそうです。svgアニメも擬似的に外部に配置?今回のサンプル用に作成したsvgアニメがあります。下記リンク先でstartボタンを押してみてください。anime.anime.jsを利用するとsvgのストロークアニメが簡単に作成できます。外部リンクのsvgには対応していません。上記の演出は現サンプルのloading(疑似)の代わりに利用するつもりでした。そのためにはsvgタグとしてhtml内に記述する必要があるのですが、svgタグとしては量が多いため断念しました(機能的には問題ないのですが、ソースが煩雑になるので...)。vue.jsを利用すれば外部にsvgデータを配置してDOMとして読込めば制御できるとおもうのです。マイクロインタラクションはsvgに頼ることが多くなりそうなので、この使い方ができればソースの可読性を維持したまま「存分に」svgが使える気がします。おしまいtwitterを本格的に初めてみた。ブログの更新記事をつぶやくのがメイン。あとCocos2dやUnity、その他アプリ開発に関連するツイッターの方をフォローして情報も集められたらなぁと思います。コメントをキャンセルメールアドレスが公開されることはありません。