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種類のパッケージで構成されています。- react-native-cli
- 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'
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/
npm adduser --registry http://localhost:4873/
4-2.react-native-cliパッケージの登録
以下のコマンドを1行ずつ実行し、「react-native-cli」パッケージを登録します。
cd react-native/react-native-cli
npm publish -force
npm publish -force
4-3.react-native-cliパッケージの登録
以下のコマンドを1行ずつ実行し、「react-native」パッケージを登録します。
cd ..
npm publish -force
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
git clone https://github.com/justinmcp/node-haste
以下のように、ソースコードがダウンロードされます。
5-2.node-hasteのインストール
以下のコマンドを1行ずつ実行し、node-hasteをインストールします。
cd node-haste
npm install
npm install
5-3.Sinopia設定ファイルの編集
「Sinopia」設定ファイルの「packages」セクションに、以下の内容を追記します。
'node-haste':
allow_access: $all
allow_publish: $all
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'
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
react-native init TestApp
7-2.ファイルの生成
次に以下のコマンドを1行ずつ実行します。
cd TestApp
react-native ubuntu
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
./build.sh
8-3.React Nativeパッケージャーの開始
「端末」を新たに起動し、その「端末」で以下のコマンドを1行ずつ実行し、React Nativeパッケージャーを開始します。
cd ~/react/TestApp/ubuntu
npm start
npm start
8-4.アプリの起動
「2.」の端末に戻り、以下のコマンドを実行します。
./run-app.sh --live-reload
以下のように、アプリが起動します。
