2018年3月5日

プログラミング

React NativeでiOS用の17デバイス判定処理を作る【2018年2月版】

目次

  1. はじめに
  2. iOSの判定メソッド
  3. OSやデバイスを特定する
  4. SafeAreaView
  5. まとめ

はじめに

スマホアプリ開発において大変なのが、各OSやデバイスに対応することです。
特に新機種などで大きくサイズが異なった場合に、表示されてほしいところが表示されなかったり、見切れてしまうなど問題が発生することがあります。
React Nativeでは%やFlexなど相対値を使用することでこの問題は起きにくいですが、どうしても絶対値を指定したい場面は出てきます。
そんなときには、各デバイス毎の判定処理を行うと便利なので、ご紹介していきます。

iOSの判定メソッド

Androidはデバイスが有りすぎる為、ここではiOSのデバイス別判定処理をご紹介します。

判定処理の考え方

まず、こういった判定処理はどのような形式が良いか考えてみます。
これはiPhoneXですか?のように真偽値を返してくれる形式が良さそうですね。
また、React Nativeにおいては共通コンポーネント化してしまい、そちらを必要なコンポーネントでimportし使用する形が良さそうですね。
例えばisIPhoneXのような名前だとわかりやすそうです。
汎用的なコンポーネントということでlib配下などにwindowsize.js などの名前で格納しておくのも良いかもしれません。

また以前の記事にも解説した、const { width, height } = Dimensions.get('window'); のような形で高さや幅が取得できます。

レイアウトを整える【これからはじめるReact Native】

 

では、一気にiOSの17デバイス向け判定コンポーネントをご紹介していきます!

コンポーネント

lib/windowsize.js

import { Platform, Dimensions } from 'react-native';

const X_WIDTH = 375;
const X_HEIGHT = 812;
const EIGHT_PLUS_WIDTH = 414;
const EIGHT_PLUS_HEIGHT = 736;
const EIGHT_WIDTH = 375;
const EIGHT_HEIGHT = 667;
const SE_WIDTH = 320;
const SE_HEIGHT = 568;
const IPAD_PRO_129_WIDTH = 1024;
const IPAD_PRO_129_HEIGHT = 1366;
const IPAD_PRO_105_WIDTH = 1112;
const IPAD_PRO_105_HEIGHT = 834;
const IPAD_PRO_97_WIDTH = 768;
const IPAD_PRO_97_HEIGHT = 1024;


// iPhone X対応
export const isIPhoneX = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === X_WIDTH && height === X_HEIGHT)
  );
}

// iPhone 8 Plus対応
export const isIPhoneEightPlus = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === EIGHT_PLUS_WIDTH && height === EIGHT_PLUS_HEIGHT)
  );
}

// iPhone 8対応(iPhone 6s Plus、iPhone 6 Plus、iPhone 7、
//              iPhone 6s、iPhone 6)
export const isIPhoneEight = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === EIGHT_WIDTH && height === EIGHT_HEIGHT)
  );
}

// iPhone SE対応
export const isIPhoneSe = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === SE_WIDTH && height === SE_HEIGHT)
  );
}

// iPad Pro 12.9-inch対応
export const isIPadPro129 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_129_WIDTH && height === IPAD_PRO_129_HEIGHT)
  );
}

// iPad Pro 10.5-inch対応
export const isIPadPro105 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_105_WIDTH && height === IPAD_PRO_105_HEIGHT)
  );
}

// iPad Pro (9.7-inch)対応(iPad Air 2、iPad Mini 4)
export const isIPadPro97 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_97_WIDTH && height === IPAD_PRO_97_HEIGHT)
  );
}

使い方

import { isIPhoneX } from '../lib/windowsize';
使いたいところでimportをします。

そしてこのように三項演算子などでスタイルやJSロジック部分までbooleanで返ってくるメソッドなのでどこでも使えそうですね。
height: isIPhoneX() ? 40 : 20

OSやデバイスを特定する

ちなみに、OSの特定はPlatform.OSで判定できます。
import { Platform } from 'react-native';
こちらでPlatformをインポートした後、Platform でデバイス情報を取得することができます。
Platform.OS === 'ios' や !Platform.isPad といった具合です。
また、Platform.Version === 25 と記述することでAndroidのバージョンを判定することが可能です。

SafeAreaView

iPhone X用にはSafeAreaViewというコンポーネントを使用することができます。
公式リポジトリ
React Nativeのバージョン0.50.0以上が対象となりますが、iPhone X 用のセーフエリア対応がこのコンポーネントを使用することだけで実現可能です。(デバイス上部の出っ張っているエリアなどにかからないように対応)

まとめ

このようにデバイスサイズをまとめて共通ライブラリとすることで、判定がとてもやりやすくなります。
気をつけていただきたいのが、OSも判定条件につけないとAndroidで同サイズの機種が出てきたときに意図せぬ動きをすることがあります。(意図してiOSだけの判定の場合)
最新のサイズが異なるデバイスが発売されたら、都度こちらの記事は更新していきます。

React Nativeのお仕事に関するご相談

Bageleeの運営会社、palanではReact Nativeに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP