Diary

@ssig33

22/May/2019 (Wed) 07:45

React で Android 向けとそれ以外でインタラクションを分ける

コンセプトとしては

const Android = ({children})=>(
  isAndroid() ? children : null
)

const NotAndroid = ({children})=>{
  isAndroid() ? null : children
}

というようなコンポーネントを用意しておいて

<Android>
  <アニメーションとか使わない地味なインタラクション>
    <HogeFuga>
      <Nanika />
    </HogeFuga>
  </アニメーションとか使わない地味なインタラクション>
</Android>

<NotAndroid>
  <豪華なインタラクション>
    <HogeFuga>
      <Nanika />
    </HogeFuga>
  </豪華なインタラクション>
</NotAndroid>

とかこんなん。まあ Android と NotAndroid の中身は適当に想像してください。

なんでこんなことをしたいかというと、

  • iOS 端末については年々 GPU が進歩している
  • Windows についても Intel の IGP すらわりと進歩している
  • 一方で Android 低価格機の GPU はショボいまま

という問題があるので。 Windows 環境でも若干そういう傾向はあるが、特に Android 機において低価格機の GPU は「表示できれば十分でしょ」から進歩しない。なんでこんなことになってんだと思うけど、もうそういうものとして考えていくしかないと思う。

とすると、 Android にだけアニメーションとかを適用しないショボいバージョンを見せる、という選択肢がでてくると思う。 React を使っている場合、しっかりコンポーネントを設計していれば、↑のような感じでそれなりによろしく書いていったりできるんじゃないかな、、、という考え。

実際に現時点でこんなことを実務でやっているわけではないです。今は全体にたいしてなるべくアニメーションとか使わないようなものを出していこうという方針でものを作っています。

ただ、エフェクトの有無が UX に影響するみたいなことが分かってきたら、なるべく多くの環境向けにエフェクトを出そうとかなると思うし、そうなると↑みたいな対処になるのかなーとか。

みんなこういうのどうしてるんだろう。

https://scrapbox.io/shokai/CSS%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92SPA%E3%81%A7%E4%BD%BF%E3%81%86%E3%81%A8%E7%A0%B4%E6%BB%85%E3%81%99%E3%82%8B からインスパイアされてこんなことを考えています。