2018年3月12日

プログラミング

WebViewを使ってみる 【これからはじめるReact Native】

目次

  1. はじめに
  2. WebViewを使ってみる
  3. まとめ

はじめに

前回はReact Nativeのアニメーションについて解説しました。

アニメーションをつける【これからはじめるReact Native】

今回はWebViewコンポーネントについてご紹介します。

WebViewとはその名前の通り、Webページとして表示できるコンポーネントです。
例えばメディアアプリでよくある構成として、記事一覧ページをサーバからAPI経由で取得し、記事の詳細ページはAPIから取得したURLを元にWebView表示するというものがあります。

また、利用規約や外部リンクを表示したいケースなどはWebViewを使用することが多く、とても重宝するコンポーネントです。

POINT!!

以前はiOSでもWebViewのみ、また構成の大部分をWebViewが占めるアプリが多く存在しました。
例えばメディアアプリやYouTubeなどの動画まとめアプリなども多くありました。
しかし、それでは実態としてはあまりWebサイトと変わりませんね。またそのアプリの外からWebに出てしまうことで安全性の担保が取れないなどの理由もあります。
そこでAppleはリジェクト(審査却下)の強化を行い、最近ではアプリの構成要素としてWebViewが主なアプリはリジェクトされる可能性が高くなってきました。

WebViewを使ってみる

では、実際にWebViewを使用してみましょう。

完成イメージとしてはこちらです!
といっても、bageleeをWebViewで表示しただけです。
bagelee

こちらを実現しているのはこんなシンプルなソースコードです。

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

export default class App extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://bagelee.com/'}}
        style={{marginTop: 20}}
      />
    );
  }
}

とてもシンプルなコードですが、解説していきます。

import { WebView } from 'react-native';

こちらでWebViewコンポーネントをインポートしています。

      <WebView
        source={{uri: 'https://bagelee.com/'}}
        style={{marginTop: 20}}
      />

こちらでWebViewを表示させています。
source Propsのuriに表示したいサイトのURLを設定します。
当然こちらでuriを変更することで別のサイトが表示されます。

では、いくつかイベントを設定してみましょう。

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

export default class App extends Component {
  _onLoad() {
    console.log('onLoad');
  }
  _onLoadEnd() {
    console.log('onLoadEnd');
  }
  _onLoadStart() {
    console.log('onLoadStart');
  }

  render() {
    return (
      <WebView
        source={{uri: 'https://bagelee.com/'}}
        style={{marginTop: 20}}
        onLoad={this._onLoad}
        onLoadEnd={this._onLoadEnd}
        onLoadStart={this._onLoadStart}
      />
    );
  }
}

onLoad~ というPropsはローディング時のイベントを発動します。
ここではログを出力しています。

ちなみにExpoのログはExpoの左下の画面で確認できます。
ログ

まとめ

シンプルな機能ですが、WebViewはアプリには欠かせないものです。
ですが、こちらをメインにしてしまうとAppleからはリジェクトされる可能性が高く、あくまでも補助的なものだと覚えておいてください。

0

0

AUTHOR

eishis

Eishi Saito 総務

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

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

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

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

CONTACT PAGE TOP