kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。

UbuntuでReact Nativeが利用可能に

「Ubuntu」で「React Native」が利用可能になりました。


UbuntuとReact Native

Web技術を利用したモバイル及びデスクトップ向けのアプリケーション開発に「React Native」を利用して新しいアプリが開発できるようになりました。

「Canonical」の「Webapps」チームは、開発者にとって効果的なフレームワークの調査に日々焦点を当てており、例えば「Cordova framework」はそのフレームワークの一つです。

Cordova framework」は「Ubuntu」が持つAPIとの親和性に優れており、開発者に多くの便利な機能や仕組みを提供し、開発者を牽引するフレームワークです。

この取り組みをWebアプリ開発にも展開し、「React Native」のサポートを決定しました。
「ReactJS」が持つWebと親和性のあるプログラミングモデルや、強力なUIコンポーネントシステムをベースに、「React Native」はOSのUIコンポーネントやOSのAPIを使用してOSの環境と深く連携したインターフェースをユーザーに提供します。

今や「Ubuntu」は「React」の開発コミュニティーの一部となります。
開発者は、「Ubuntu」の「React Native」フレームワークを使用し、同様に「React Native」を使用して開発された既存のiOSやAndroid向けのアプリを、「Ubuntu」へ移植できるようになりました。

sanpもサポート

開発ツールは「Snap」を完全にサポートし、「sanpパッケージ」の作成や「Snappy Store」への公開、及び「Snappy Store」を通じて簡単にユーザーにソフトウェアを配布することができます。

従って開発したソフトウェアは、モバイルにもデスクトップにもIoTにも横断的に提供することができます。

1つのソースコードで異なるプラットフォームをサポート

「React Native」を利用した「Ubuntu」アプリの開発において特筆すべき点の一つは、「収束」です。
上記でも記述したように、モバイルにもデスクトップにもIoTにも横断的に開発したソフトウェアを提供することができます。

現在Ubuntuが動作しているデバイスでは、様々なディスプレイやインターフェース及び入力デバイスをサポートしています。

「React Native」で開発されたソフトウェアを「Ubuntu」へ移植すれば、期待通りに動作します。
デスクトップ向けに提供されている「Ubuntu Deskop」でも、「Ubuntu Phone」や「Ubuntu Tablet」向けに提供されている「Ubuntu Touch」でも、それらのアプリが利用できます。

「Ubuntu」は現在使用されているディスプレイに適合するようにアプリを表示し、アプリにデスクトップ環境で使用されているインターフェース(見た目)を適用します。

React Nativeのソースコード

「Ubuntu」向け「React Native」のソースコードは、以下から入手できます。


UbuntuにReact Nativeをインストールするには

「Ubuntu」向け「React Native」のインストール方法は、以下に記述されています。


サポート状況について

現在「Ubuntu」向け「React Native」は、「Ubuntu Deskop」と「Ubuntu Touch」をサポートしています。
サポートしている開発環境の「Ubuntu」のバージョンは、「Ubuntu 16.04」です。

Ubuntu Touch向けに開発を行う場合

「Ubuntu Touch」向けに開発を行う場合、デバイスの開発者モードを有効にしておいてください。
また、デバイスと開発を行うPCは、同じローカルネットワークに接続されている必要があります。

1.事前準備

まず「git」と「node」と「node」のパッケージマネージャーをインストールします。
「端末」を起動し、以下のコマンドを実行します。

sudo apt-get install -y git nodejs-legacy npm


2.React Nativeのダウンロード

「React Native」のソースコードをダウンロードします。
事前にソースコードをダウンロードするフォルダーを決めておくと良いでしょう。
ここでは例として、「~/react」フォルダーにソースコードをダウンロードします。

カレントディレクトリーを「~/react」フォルダーに移動し、以下のコマンドを実行します。

git clone https://github.com/CanonicalLtd/react-native -b ubuntu


以下のように、ソースコードがダウンロードされます。


React Nativeを構成するパッケージ

「React Native」は、以下の2種類のパッケージで構成されています。

  1. react-native-cli
  2. react-native

「react-native」パッケージには、「React Native」フレームワークのコードが含まれており、ローカルにインストールするパッケージです。

3.Sinopiaのインストールとセットアップ

「React Native」を利用したアプリ開発を始めるに辺り、必要なパッケージをローカルパッケージリポジトリーへ登録する必要があります。

3-1.Sinopiaのインストール

「Sinopia」は、ローカル環境で動作するnpmリポジトリーです。
このリポジトリーにユーザーが作成したパッケジを配置することができます。
まず「Sinopia」をインストールするため、以下のコマンドを実行します。

sudo npm install -g sinopia


3-2.Sinopiaの起動

以下のコマンドを実行し、「Sinopia」を起動します。

sinopia


「Sinopia」の設定ファイルが生成されるので、「Ctrl + C」キーを押して「Sinopia」を終了します。

3-3.Sinopiaの設定

「~/.config/sinopia/config.yaml」ファイルをテキストエディターで開き、以下の内容を記述します。

storage: ./storage

auth:
  htpasswd:
    file: ./htpasswd

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  'react-native':
    allow_access: $all
    allow_publish: $all

  'react-native-cli':
    allow_access: $all
    allow_publish: $all

  '*':
    allow_access: $all
    proxy: npmjs

logs:
  - {type: stdout, format: pretty, level: http}

max_body_size: '50mb'

3-4.Sinopiaの起動

再度以下のコマンドを実行し、「Sinopia」をバックグラウンドで起動します。

sinopia&

バックグラウンドで動作している「Sinopia」は、以下のコマンドで停止できます。

kill $!

4.パッケージの登録

新規にローカルリポジトリーを作成し、そのローカルリポジトリーに「React Native」の2種類のパッケージを登録します。

4-1.ローカルリポジトリーの作成とユーザーの追加

以下のコマンドを1行ずつ実行し、ローカルリポジトリーの作成とユーザーの追加を行います。

npm set registry http://localhost:4873/
npm adduser --registry http://localhost:4873/


4-2.react-native-cliパッケージの登録

以下のコマンドを1行ずつ実行し、「react-native-cli」パッケージを登録します。

cd react-native/react-native-cli
npm publish -force


4-3.react-native-cliパッケージの登録

以下のコマンドを1行ずつ実行し、「react-native」パッケージを登録します。

cd ..
npm publish -force


5.node-hasteのインストールとセットアップ

「Ubuntu」プラットフォームを検出するため、「node-haste」が必要になります。
「node-haste」をインストールします。

5-1.node-hasteのダウンロード

カレントディレクトリーを「~/react」フォルダーに移動し、以下のコマンドを1行ずつ実行します。
「node-haste」のソースコードをダウンロードします。

cd ~/react
git clone https://github.com/justinmcp/node-haste


以下のように、ソースコードがダウンロードされます。


5-2.node-hasteのインストール

以下のコマンドを1行ずつ実行し、node-hasteをインストールします。

cd node-haste
npm install


5-3.Sinopia設定ファイルの編集

「Sinopia」設定ファイルの「packages」セクションに、以下の内容を追記します。

  'node-haste':
    allow_access: $all
    allow_publish: $all

全体的な設定ファイルの内容は、以下のようになります。

storage: ./storage

auth:
  htpasswd:
    file: ./htpasswd

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  'react-native':
    allow_access: $all
    allow_publish: $all

  'react-native-cli':
    allow_access: $all
    allow_publish: $all

  '*':
    allow_access: $all
    proxy: npmjs

  'node-haste':
    allow_access: $all
    allow_publish: $all

logs:
  - {type: stdout, format: pretty, level: http}

max_body_size: '50mb'

設定ファイルを変更したら、設定を反映するため「Sinopia」を再起動してください。

6.React Native CLIのインストール

以下のコマンドを実行し、「React Native CLI」をインストールします。

sudo npm install -g react-native-cli


以上で作業は完了です。

7.React Nativeアプリを作る

React Nativeアプリを作ってみます。

7-1.プロジェクトの作成

ここでは例としてアプリのプロジェクトを「~/react」フォルダー内に作成してみます。
以下のコマンドを1行ずつ実行し、「TestApp」プロジェクトを作成します。

cd ~/react
react-native init TestApp


7-2.ファイルの生成

次に以下のコマンドを1行ずつ実行します。

cd TestApp
react-native ubuntu


これでプロジェクトが作成されました。


後は「index.ubuntu.js」ファイルを元に、開発を行うと良いでしょう。

8.Ubuntu Desktopでアプリを起動する

上記で作成したアプリを「Ubuntu Desktop」で起動してみます。
もし「Ubuntu Phone」など「Ubuntu Touch」上でアプリを起動したい場合は、「Targeting a device」を参考にしてください。

8-1.依存パッケージのインストール

以下のコマンドを実行し、アプリの実行に必要なパッケージをインストールします。

sudo apt-get install -y cmake qt5-default qtdeclarative5-dev


8-2.アプリのビルド

以下のコマンドを1行ずつ実行し、アプリをビルドします。

~/react/TestApp/ubuntu
./build.sh


8-3.React Nativeパッケージャーの開始

「端末」を新たに起動し、その「端末」で以下のコマンドを1行ずつ実行し、React Nativeパッケージャーを開始します。

cd ~/react/TestApp/ubuntu
npm start


8-4.アプリの起動

「2.」の端末に戻り、以下のコマンドを実行します。

./run-app.sh --live-reload

以下のように、アプリが起動します。



関連記事一覧
オプション