React-Nativeでウェブサイトを表示するだけ（WebView）iOSのアプリを作る

posts_photo

Getting Started · React Native

そんなに興味無かったんですが最近Reactを少しだけ勉強しまして。
React-NativeっていうのでiOSもAndroidも簡単なアプリなら作れるようになると聞き、少し興味が湧いたので試しにすごく簡単なアプリ制作に挑戦してみました。

僕がメインで使っているのがMacなので今回はiOS版の内容になります。

React-Nativeのインストール

こちらの公式ページに従ってReact-Nativeの開発環境を整えます。
Getting Started · React Native

まずReact-Nativeを使うと言ってもiOSアプリの開発にはXcodeが必要なので、なければインストールしてください。App Storeで無料配布しています。
※ただXcode非常に重いので通信環境によってはこれだけで凄く時間かかります。

次にNode.jsとWatchmanをインストールします。僕もWatchmanてなんだろう？ってくらいのレベルですがとりあえず言われた通りにします。

brew install node
brew install watchman

次にReact-Nativeをグローバル環境にインストールします。

npm install -g react-native-cli

これで環境設定はだいたい完了です。
この後はcdで作業ディレクトリに移ってからプロジェクト作成に入ります。TestAppの部分は任意の名前で大丈夫です。

react-native init TestApp
cd TestApp

これでプロジェクトの作成も終了です。
もうコード書くのに入っても良いんですがアプリを確認したい場合は下記のコードを実行するとXcodeが立ち上がってiOSシミュレーターが開きます。

react-native run-ios

詳しくはちょっとわからないんですが、作業中これ開きっぱなしにしてれば良いのかな…？
シミュレーターでコマンド+Rを押すと再描画してくれるので、この状態でコード書いて、再描画して、の繰り返しで開発するものなんでしょうか。なんか自動化もできそうな気配ですけど。

WebViewをimportして使用する

React-Nativeではウェブサイトを表示できるWebViewというコンポーネントがあるらしいので、それを使って任意のサイトを表示してみたいと思います。
WebView・React Native

initで作成したディレクトリ内にあるApp.jsをまるっと下記に書き換えます。uriのとこには好きなアドレス入れてみてください。

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'http://arakaze.ready.jp/'}}
        style={{marginTop: 20}}
      />
    );
  }
}

書き換えて保存したらシミュレーターでコマンド＋Rで更新してみます。
はい、基本的にこれだけでWebViewはお試しできます。

が、ここでエラーになった人もいることでしょう。それが下記のエラーの場合、
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Error Loading Page
Domain: NSURLErrorDomain
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

原因は表示させたいサイトがSSLじゃないことです。iOSのアプリはセキュリティ厳しいので初期設定ではSSL以外のサイトは表示出来ない仕様とのこと。
次はその解決策を書いていきます。

iOSでのWebViewはデフォルトだとSSLのサイト以外は表示できない

古いものはガンガン切り捨てるAppleさんとはいえ、さすがにSSL以外は絶対に表示できないなんてことはないだろうと調べてみたらこちらの参考サイトを見つけました。
Opening non HTTPS sites in WebView in React Native

こちらのサイトに書いてある通りにやってけば出来るかと思いますが、英語読むのが面倒な方向けにやること箇条書きにしていきます。
・/TestApp/ios/TestApp.xcodeprojのファイルをXcodeで開きます。
・Info.plistファイルを選んで、表示された項目の中で「App Transport Security Settings」のトグルを開く
・Exception Domeinsのトグルを開く。
・ここにSSLじゃなくても表示を許可するURLを書いてくので、最初からあるlocalhostを参考に希望のURLを追加する。
・「react-native run-ios」でビルドする。
・SSLじゃなくても表示される！

Xcodeの操作がわからない人でも、参考リンクの画像見ながらやれば多分できます。

以上がReact-NativeでWebView使うときの簡単ステップでした。
iOSアプリを公開するにはアップルで有料デベロッパー登録が必要なので、僕は自分で公開は出来ませんがアプリが作れると思うとちょっとテンションが上がりますね。

”React”タグの他の記事を見る

    このタグの他の記事はありません。