React Native用のWeb PlaygroundサービスExpo Snackを試してみる

         

はじめに

Webエンジニアやデザイナーであれば、CodepenやJSFiddleといったサービスには大分お世話になっているのではないでしょうか。僕も大好きなサービスです。

さくっとデザインやコードを試したい時に、一々プロジェクトを作成して云々というのは面倒なので、オンラインのブラウザ上で開発が出来るWeb Playground系のサービスはとても便利です。

今回はReact Native用のPlaygroundサービスであるExpo Snackを使ってWebブラウザ上でReact Nativeアプリの開発をしてみます。

動作環境

• macOS Sierra Version 10.12.6
• Expo v20.0.0
• Expo Snack (2017/09/02時点)

Snackエディタを使ったReact Nativeアプリ開発

まずはExpo Snackにアクセスします。

最初にClient用のQRコードが表示されますが、取りあえず閉じて先に進みます。

するとReact Nativeのメインコードが表示されます。
現在の仕様だと使用できるコンポーネントに制限がありますが、ビルトインのコンポーネントをオンラインエディタにドラッグ&ドロップしながらコーディングしていくという流れになります。

右に表示されているのが、ビルトインのコンポーネント群です。
コンポーネントは表示/非表示を切り替えることが出来ます。

Button Component

右のリストからButtonコンポーネントを挿入したい箇所にドラッグ&ドロップします。
するとエディタ上でReact Nativeのコードとして出力されます。

フッターメニューからプレビューモードに切り替えることで、右ペインにプレビュー画面が表示されます。

プレビュー画面上でリアルタイムにコードの動作確認が出来ます。
これは便利！

MapView Component

MapViewだとこんな感じになります。

ちなみにMapViewを配置したときのコードはこんな感じ。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, MapView } from 'expo';

export default class App extends Component {
  state = {
    mapRegion: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }
  };

  _handleMapRegionChange = mapRegion => {
    this.setState({ mapRegion });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <MapView
          style={{ alignSelf: 'stretch', height: 200 }}
          region={this.state.mapRegion}
          onRegionChange={this._handleMapRegionChange}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

流石に細かい設定はGUIでは操作できないですが、吐かれたコードをベースに自分でカスタマイズすることが出来るので、実装の参考にするにはちょうど良いんじゃないかなと思います。

ImageView Component

ImageViewだとサンプルのGif画像が表示されます。

エディタのカラーを切り替える

また、申し訳程度の機能としてエディタのテーマを変更することが出来ます。
現状できるのはDark themeのみですが今後種類は増えるかもしれませんね。(増えないかもしれません)
Dark themeの方が好みです。

プロジェクトのタイトルを変更する

コーディングが一通り終わったらタイトルと説明を変更しましょう。
左上のタイトルをクリックすることで変更出来ます。

Webサイトにコードの埋め込み

ヘッダーメニューの[Embed Code]からサイト埋め込み用のコードを取得することが出来ます。
この辺はWeb Playgroundサービスっぽい機能ですね。

モバイル端末で動作確認

ヘッダーメニューの[QR Code]からQRコードが表示されるので、モバイル端末のExpo Clientアプリでスキャンすればモバイル(iOS/Android)で動作確認することが出来ます。

ちなみに端末のExpo Clientアプリを使ってリアルタイムに動作確認をする時は、PC端末とモバイル端末が同一ネットワーク上に存在している必要があるので注意してください。

XDEでプロジェクトを開く

ヘッダーメニューの[Export to XDE]からプロジェクトをZip形式でダウンロードできます。
ダウンロードが完了したら、Zipを解凍して適当なディレクトリに配置してください。

次にExpo XDEでプロジェクトを開きますが、この時プロジェクトのルートディレクトリで以下のコマンドを実行してプロジェクトを初期化して下さい。

$ npm install

初期化できたら、今度はデスクトップのExpo XDEアプリを立ち上げ、初期化したプロジェクトを開きます。

XDEのインストールについてはこちら

XDEからプロジェクトが起動できたら、iOS Simulatorで動作確認しましょう。
XDEのiOS Simulatorからプロジェクトを開くことが出来ました。

Expo XDEの[Publish]からExpoプラットフォーム上で公開すれば、実装したアプリを全世界に共有することも出来ます。

まとめ

ブラウザ上で全て完結するので、さくっとプロトタイピングしたい時やデザインを確認したいときに便利に使えると思います。

個人的にはせっかくExpoチームによる開発なので肝心のXDEとの連携機能がもっとあると尚良くなると感じました。(アカウントに紐付けてプロジェクトを管理できるとか)

あと使えるコンポーネントもっと増やして欲しい笑

鋭意開発中なので今後の進化に期待！

参考

• Expo開発者ブログ
  Snack — A Playground for React Native