React NativeとExpo SDKのモジュール群で、プラットフォームの機能を便利に使う

ExpoとEASで始める快適モバイルアプリ開発 第3回

Expo SDKのモジュール

　第1回でも触れましたが、デバッグ用アプリであるExpo Goには、Expo SDKがネイティブ機能にアクセスするためのJavaやObjective-Cのコードが含まれています。このため、自作のExpo製プロジェクトにJavaScript側のモジュールインストールや実装を行うだけで、ネイティブ機能を扱うアプリをExpo Goで動作確認できるようになります。この時、事前にExpo Goにネイティブ機能のコードが組み込まれていることが重要です。React Native向けのオープンソースライブラリでネイティブ機能を扱うものは、Expo Goでは概ね動かないことに注意してください。

　Expo Goで動かないオープンソースライブラリが多い、というと不便そうに聞こえるかもしれませんが、案外とそうでもありません。まず、JavaScriptコードのみで構成されており独自のネイティブ機能を持たないライブラリであれば、特に問題なく利用できます。そして、Expo SDKで提供されているモジュールの数は、かなり豊富です（図4）。

図4：Expo SDKの機能は豊富

　図4の「Expo SDK」の項に並んでいるモジュールは、基本的にすべてExpo Goで動作します。バージョン52の時点で、100件程度のモジュールがあるため、アプリ開発における広範なニーズを満たすことができるでしょう。

Expo SDKのモジュールをインストールする

　Expo SDKのモジュールは、個別のNPMパッケージとして提供されているため、利用するためにはまずインストールする必要がありますが、ここで考慮すべきことがあります。インストールするライブラリのバージョンが、ExpoやReact Nativeのバージョンと噛み合うようにしなければいけません。これはとても大変な確認作業になりそうですよね。

　しかし、ExpoとExpo SDKを使う限りは、バージョンの整合性を確認することは非常に簡単です。Expo SDKをインストールするためのコマンドが整備されているからです。

　例えば、スマートフォンのデバイス名や製造元を取得できるexpo-deviceをインストールするためには、リスト4のようにコマンドを実行します。

［リスト4］

$ npx expo install expo-device

　すると、扱っているExpoのバージョンに対応したexpo-deviceがインストールされます。これはとても便利ですね。また、将来のアップデートでExpoのバージョンを上げたときには、リスト5のようにexpo-doctorコマンドを実行して、新しいExpoではどのバージョンのライブラリをインストールすべきかを確認できます。

［リスト5］

$ npx expo-doctor

　これらのコマンドを利用することで、Expoのバージョンとライブラリのバージョンの整合性を維持できるため、バージョンの管理がとても楽になります。

Expo SDKのモジュールを使う

　それでは、Expo SDKのモジュールをいくつか使ってみましょう。特別な準備が必要ないモジュールの例として、次のライブラリをインストールしてみます。

• expo-device：スマートフォンのデバイス名や製造元を取得できる
• expo-application：アプリのバージョンやビルド番号を取得できる
• expo-clipboard：クリップボードにテキストをコピーできる
• expo-web-browser：アプリ内ブラウザを開く

　まずは、モジュールをインストールします（リスト6）。

［リスト6］

$ npx expo install expo-device expo-application expo-clipboard expo-web-browser

　次に、リスト7のようにコードを実装します。

［リスト7］src/screens/ExpoSDKExample.js

import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import * as Device from 'expo-device';
import * as Application from 'expo-application';
import * as Clipboard from 'expo-clipboard';
import * as WebBrowser from 'expo-web-browser';
import { useState } from 'react';

export const ExpoSDKExample = ({ onBack }) => {
  const [clipboardStatus, setClipboardStatus] = useState('');

  // (3) expo-clipboardのサンプル
  const handleCopyText = async () => {
    await Clipboard.setStringAsync('Expoのサンプルテキストです！');
    setClipboardStatus('テキストをコピーしました');
    // 3秒後にステータスをクリア
    setTimeout(() => setClipboardStatus(''), 3000);
  };

  // (4) expo-web-browserのサンプル
  const handleOpenBrowser = async () => {
    try {
      await WebBrowser.openBrowserAsync('https://example.com');
    } catch (error) {
      console.error('ブラウザを開けませんでした:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Expo SDKサンプル</Text>

      <ScrollView style={styles.scrollView}>
        {/* (1) expo-deviceのサンプル */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Device Info</Text>
          <Text>デバイス名: {Device.deviceName}</Text>
          <Text>ブランド: {Device.brand}</Text>
          <Text>OSバージョン: {Device.osVersion}</Text>
        </View>

        {/* (2) expo-applicationのサンプル */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Application Info</Text>
          <Text>アプリ名: {Application.applicationName}</Text>
          <Text>バージョン: {Application.nativeApplicationVersion}</Text>
        </View>

        {/* expo-clipboardのサンプル */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Clipboard</Text>
          <TouchableOpacity style={styles.button} onPress={handleCopyText}>
            <Text style={styles.buttonText}>テキストをコピー</Text>
          </TouchableOpacity>
          {clipboardStatus ? (
            <Text style={styles.status}>{clipboardStatus}</Text>
          ) : null}
        </View>

        {/* expo-web-browserのサンプル */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Web Browser</Text>
          <TouchableOpacity style={styles.button} onPress={handleOpenBrowser}>
            <Text style={styles.buttonText}>ブラウザを開く</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>

      <TouchableOpacity style={styles.backButton} onPress={onBack}>
        <Text style={styles.buttonText}>戻る</Text>
      </TouchableOpacity>
    </View>
  );
};
// (略)

　リスト7を実際に動かしてみると、図5のように表示されます。

図5：Expo SDKのサンプル

　（1）のexpo-deviceは、スマートフォンのデバイス名や製造元を取得できるモジュールです。 Platformと似ていますが、より細かくデバイスの情報を取得できる点が異なります。（2）のexpo-applicationは、アプリのバージョンやビルド番号を取得できるモジュールです。今回はExpo Goで動作しているのでExpo Go名義ですが、今後解説するEAS Buildなどで自分のアプリをビルドした場合には、 app.jsonに設定したアプリ名やバージョンが返されます。

　（3）のexpo-clipboardは、クリップボードにテキストをコピーできるモジュールです。ボタンを押してテキストをクリップボードにコピーしたら、別のメモアプリなどでテキストをペーストしてみてください。「Expoのサンプルテキストです！」の文字が貼り付けられるはずです。（4）のexpo-web-browserは、アプリ内ブラウザを開くモジュールです。ボタンを押すとブラウザが開き、図6のようにhttps://example.comにアクセスできるはずです。

図6：expo-web-browserのサンプル

　expo-web-browserは、iOSのSFSafariViewControllerやAndroidの ChromeCustomTabsのように、WebViewではなくブラウザの機能の一部を借りてWebページを表示できる、ネイティブ機能を簡便に扱えるモジュールです。Web上に配置しているプライバシーポリシーの表示などで重宝するでしょう。

　このように、Expo SDKのモジュールは、プラットフォームの機能を扱うためのツールとして、強力かつ便利です。本連載では解説しきれませんが、音声再生や動画再生、ファイルの読み書き、バックグラウンド処理、バッテリー状態の取得など、さまざまなネイティブ機能を扱うためのモジュールがあるので、ぜひ調べてみてください。

まとめ

　プラットフォームの機能を扱うためのモジュールを、Expo Goで扱える範囲でいくつか解説しました。他にも魅力的なツールはたくさんありますので、ぜひご自身で調べてみてください。

　次回は、今回よりもさらにプラットフォームに近づいて、ユーザーの許可（パーミッション）が必要な機能の扱い方を解説します。お楽しみに。