読者です 読者をやめる 読者になる 読者になる

3章 はじめてのReact Native アプリケーション作成 #2

前回の続き...

kyaukyuai.hatenadiary.jp

iOSの依存関係

iOSのアプリを開発・リリースするために、iOSデベロッパーアカウントを獲得する必要があります。アカウント作成は無料で、開発にはそれで十分です。アプリをiOSのAppストアに公開する際に、ライセンスが必要になります。ライセンス料は年に99ドルほどかかります。
 
もしXcode IDEiOS simulators、iOS SDKを含めたXcodeのインストールが終わってないのであれば、ダウンロード・インストールをしてください。XcodeのウェブサイトまたはAppストアからダウンロードできます。
 
Xcodeのインストール後、ライセンスを取得すれば全てOKです。
 

新しいアプリ作成

新しいアプリ作成するために、React Nativeコマンドツールを利用します。下記のコマンドでReact Native、iOSAndroidの全てを含めたボイルプレートが作成されます。
 
react-native init FirstProject
 
結果的に下記の構造のディレクトリが作成されます。
 

f:id:kyaukyuai:20160221213424p:plain

 
ios/ と android/ のディレクトリには、それぞれのプラットフォームに関連したボイルプレートが含んでいます。React コードは、index.ios.js、index.android.js に配置されています。これらは、それぞれReact Applicationのエントリーポイントになります。通常、npm経由でインストールされたnodeモジュールは、node_modules/ フォルダに配置されます。
 

iOSのReact Nativeアプリを動かしてみよう

はじめに、React NativeのiOSバージョンを動かしてみましょう。シミュレータまたは実機のどちらでも動かすことができます。
 
ios/ ディレクトリに配置されている FirstProject.xcodeproj ファイルをXcodeでオープンしてください。左上にあるRunボタンを押すことで、アプリのbuildとrunを始まります。ここで様々なiOSシミュレータを切り替えることができます。
 

f:id:kyaukyuai:20160221213535p:plain

 
Runボタンを押すと、React packagerが自動的に新しいターミナルで開かれるはずです。もしエラーが出た場合は、npm installnpm startコマンドをFirstProject/ ディレクトリ以下で試してみましょう。

 

下記のスクリーンショットのようになるべきです。
f:id:kyaukyuai:20160221213658p:plain
 
packagerが準備されると、デフォルトのアプリがiOSシミュレータと共に起動します。下記のようになるでしょう。
 

f:id:kyaukyuai:20160221213802p:plain

 
アプリに変更を反映するために、packagerが常に起動している必要があります。もしpackagerがクラッシュした場合は、packagerをリスタートする必要があります。

3章 はじめてのReact Native アプリケーション作成 #1

この章では、React Nativeの開発環境のセットアップの仕方を紹介します。それから、簡単なアプリケーション作成の基礎を見ていきます。そして、それを実際のiOSAndroidの実機にデプロイできるでしょう。

 

開発環境のセットアップ 

開発環境をセットアップすることで、本誌の例に従うことが可能です。そして、自身のアプリケーションを作成することも可能になります。
 
React Nativeのインストール方法はオフィシャルページにも記載されています。オフィシャルサイトは、最も最新のリファレンスです。しかし本誌でも同様にインストール方法を記載していきます。
 
React Nativeの依存モジュールをインストールするために、OS Xの一般的なパッケージマネージャーであるHomebrewを利用する必要があります。本誌は、OS Xでの開発を前提としています。OS Xは、iOSAndroidの両方の開発をすることができます。
 
Homebrewをインストールしたならば、下記コマンドラインを実行します。
 
brew install node
brew install watchman
brew install flow
 
Reatc Nativeパッケージはnodeとwatchmanの両方を使います。将来的に、パッケージがトラブルを引き起こすのであれば、これらの依存関係をアップデートする必要があります。flowはFacebookのタイプチェッキングライブラリーで、React Nativeにも利用できます。(もしReact Nativeのプロジェクトでタイプチェッキングをしたいなら、flowを利用できます。)
 
もしエラーが発生したら、brewのアップデートといくつかのパッケージのアップグレードが必要かもしれません。(これらのコマンドは、少々時間がかかります)
  
brew update
brew upgrade

 

もしそれでもエラーが発生する場合は、ローカルのbrewのセットアップを確認する必要があります。brew doctor が可能性のあるissueを指し示してくれます。
 

React Nativeのインストール

nodeインストールが完了しているなら、npm(Nodeのパッケージマネージャー)をReact Nativeのコマンドラインツールをインストールするために利用できます。
 

npm install -g react-native-cli

  

これでReact Nativeのコマンドラインツールをシステムのグローバルにインストールできます。これが終われば、React Nativeのインストール完了です。おめでとうございます。
 
続いて、プラットフォーム特有のセットアップの必要があります。モバイルプラットフォームの開発環境のために、プラットフォームの開発依存関係をインストールする必要があります。iOSAndroidのどちらかを選ぶこともできますし、両方を利用することもできます。

 

Learning React Nativeの翻訳

諸事情によりReact Nativeに興味を持ったので、

今年の1月にオライリーから発売された英書の翻訳に取り組んでいきたい。

翻訳の正しさは保証できませんが。。。

www.amazon.com

目次

kyaukyuai.hatenadiary.jp

kyaukyuai.hatenadiary.jp

kyaukyuai.hatenadiary.jp

1章 React Nativeとは?

1章 React Nativeとは?

React Nativeは、iOSAndroidのNativeモバイルアプリケーションを作成するためのJavaScriptフレームワークです。React Nativeは、FacebookJavaScriptライブラリのReactを基にしていますが、ターゲットがブラウザではなく、モバイルプラットフォームです。言い換えるのであれば、ウェブ開発者が既に慣れ親しんだJavaScriptライブラリからNativeモバイルアプリケーションを作成できるのです。そして、多くのソースコードをプラットフォーム間で共有できるので、React Nativeを利用すると、iOSAndroid両方のモバイルアプリケーションを簡単に作成できるのです。
 
ウェブでのReactと同様に、React Nativeアプリケーションは、JSXとして知られる、JavaScriptXML風のマークアップを利用して作成されます。そして、React Native "bridge"が、Object-C (for iOS)またはJava (for Android)のNativeレンダリングAPIを提供します。従って、作成したアプリケーションは、webviewではなく、本当のモバイルUI compontsを利用してレンダリングされます。React Nativeは、またプラットフォームAPIのためのJavaScriptインターフェイスも提供するので、phoneカメラや位置情報等のプラットフォームの機能も利用できます。
 
現在、React NativeはiOSAndroidの両方をサポートしていますが、他のプラットフォームをサポートしていく可能性もあります。本誌でもiOSAndroidの両方を対象とします。作成されたソースコードのほとんどがクロスプラットフォームで利用されます。製品レベルのモバイルアプリケーションをReact Nativeを利用して作成できます。例を上げれば、FacebookPalantirTaskRabbitのモバイルアプリケーションは既にReact Nativeを利用しています。
 
React Nativeの強み
 
React Nativeがホストプラットフォームの標準APIを利用してレンダリングする事が、既存のクロスプラットフォーム開発のための方法(Cordova、Ionic)とは卓越したものにしています。JavaScript、HTML、CSSを利用してモバイルアプリケーションを開発する既存の方法は、典型的にwebviewとしてレンダリングしています。この方法では、特にパフォーマンス周りで欠点が伴います。加えて、これらはホストプラットフォームが提供するNative UI elementsを利用することができません。これらが、native UI elementsを真似ようとしますが、それは妥当ではありません。リバース・エンジニアリング、特にアニメーション周りは多くの努力を要しますし、すぐに時代遅れになってしまいます。
 
その一方で、React Nativeはnative UI elementsに変換しています。加えて、Reactはmain UI threadとは分かれて動作しますので、性能を悪化させることなく高いパフォーマンスでアプリケーションを維持できます。React Nativeの更新サイクルは、Reactと同様です。つまり、props または state が変更された時に、ビューを再レンダリングします。React NativeとブラウザでのReactの大きな違いは、HTMLとCSSを利用するのではなく、ホストプラットフォームのUIライブラリを利用することです。
 
Reactでのウェブ開発に慣れ親しんでいる開発者は、慣れ親しんだツールを利用して、nativeアプリケーションの見た目や高パフォーマンスのモバイルアプリケーションを作成できるのです。また、React Nativeは今までのモバイル開発を超越する2点があります。開発者の経験とクロスプラットフォーム開発の可能性です。
 
開発者の経験
 
 
もし以前にモバイル開発を経験したことがあるのなら、React Nativeの使いやすさに驚くことでしょう。React Nativeチームは、エラーメッセージ周りの強力な開発者ツールをもっています。このツールを利用することは、開発経験のパートの一つになるでしょう。
 
たとえば、React Nativeは"just"JavaScriptであるため、変更を反映するためにrebuildする必要がないのです。代わりに、アプリケーションをリフレッシュするには、他のウェブページと同様にCommand+Rを叩くだけで良いのです。アプリケーションをbuildするために待っている時間は無駄です。React Nativeの素早いサイクルは本当に素晴らしいです。
 
加えて、React Nativeは有能なデバックツールやエラーレポートを利用させてくれます。もし、ChromeSafariの開発者ツールを好んでいるならば、モバイル開発のためにそれらを利用できるのです。同様に、JavaScriptの編集のために、好きなエディタも利用できます。React Nativeは、iOSの開発のためにXcodeを使うことを強制しません。Android開発のためのAndroid Studioに関しても同様です。
 
 
加えて、開発経験の毎日の改善自体が、React Nativeを利用した製品リリースサイクルにもポジティブな影響を与えます。
 
これらの機能で確保できた時間やエネルギーを興味の分野やプロダクティブな分野に利用できるのです。
 
コードの再利用と知識共有
 
 
React Nativeを利用することで、モバイルアプリケーションをbuilidするために要求されるリソースが劇的に削減できます。React コードの書き方を知っている開発者は誰でも、今のスキルセットのままで、ウェブ、iOSAndroidをターゲットにできます。React Nativeは、チームのイテレーションを効率的にして、さらに知識やリソースを効率的に共有させてくれます。
 
加えて、コード自身も共有され得るのです。全てのコードがクロスプラットフォームになるのではなく、また必要としている機能によっては、Object-CやJavaを利用しなければなりません。(幸いにも、これは悪いことではなく、native modulesと呼ばれるものの使い方も7章で触れます) しかし、React Nativeでクロスプラットフォームでコードを再利用することは驚くほど簡単です。例えば、React Eurpo 2015のkeynoteによると、Facebook Ads Managerアプリケーションは、iOSバージョンのコードの87%をAndroidバージョンで共有しています。本誌の最終アプリケーションである、フラッシュカードアプリケーションでは、iOSAndroidで全てコードの再利用をします。これは本当に素晴らしい!
 
リスクと欠点
 
React Nativeを利用することは、欠点なしではありません。そして、React Nativeがチームに合うかどうかはあなたの状況次第です。
 
最も大きなリスクは、プロジェクトが比較的若いことによるReact Nativeの成熟度です。iOSのサポートは、2015年3月で、Androidのサポートは2015年9月です。ドキュメンテーションの改善の余地があります。そして、進化し続けます。いくつかのiOSAndroidの機能が以前サポートされてません。そして、コミュニティはベストプラクティスを探っている最中です。良いニュースとしては、あなた自身で足りていないAPIをサポートすることも可能です。それに関しては、7章でカバーします。
 
React Nativeはプロジェクトに異なるレイヤー提供しているため、デバックが大変になる可能性があります。特にReactとホストプラットフォームの交差する箇所です。8章で、React Nativeのデバックに関して深くカバーします。そして、多くの問題に対して取り組みます。
 
React Nativeは若い、そして新たなテクノロジーを利用することはリスクです。ただ、リスクに勝る利益を本誌で紹介できるでしょう。
 
要約
 
React Nativeはエキサイティングなフレームワークであり、ウェブ開発者に、JavaScriptの知識を利用して、ロバストなモバイルアプリケーションを作成することを可能にします。そして、素早いモバイル開発・ウェブ、iOSAndroidをクロスした効率的なコードの再利用、また、エンドユーザのアプリケーションの質や経験を阻害することもありません。トレードオフは、React Native自身が新しいこと、進化中であることです。もしチームが新しいテクノロジーに立ち向かえるなら、そして複数のプラットフォームに対してアプローチしていきたいなら、React Nativeを利用してみるべきであろう。
 
次の章では、ブラウザでのReactとReact Nativeの違いと幾つかのキーコンセプトに関して触れます。もし開発自体に触れたいならスキップすることも可能ですので、3章に飛んで下さい。3章では、開発環境のセッティングと最初のReact Nativeアプリケーションの作成に取り組みます。

WEBデザイン/配色/グラフィック

普段エンジニアとして働いている自分にとって、

Webサービスを作成していて、一番迷う、困る、時間を使うパートはこれ。

デザイン・配色・グラフィック

そんな時に役立ったサイト/記事を紹介しようと思う。

 

1. Webデザイナー向け配色ガイド!

キャッチーなタイトルと共に、その配色を利用したサービス、そしてカラーコードまで載せてくれている。ただ見ているだけでワクワクするし、自分が作ろうとしているサイトイメージと比較しながら見ると、発想力が豊かになってきたかのように錯覚する。この記事は、かなりオススメである。

photoshopvip.net

2. 注目Webデザイントレンド

今のデザイントレンドが知りたい、トレンドに付いていきたい、今時のサイトを作りたいと思っているあなた。Please check it!!!

photoshopvip.net

3. http://automagic.fm/

Web業界で有名なデザイナー長谷川恭久さんによるPodcast

筆者自身は、宮川達彦さんのrebuild.fmのファンであるが、

こちらも是非押さえておきたい一つである。

automagic.fm

初日

最近、友人とウェブサービスの作成を初めて、

色々と知識が溜まってきたので、備忘録のついでにブログに綴っていこうと思う。

 

Twitter bot作成からデザイン、heroku、railsアフィリエイト、、、

とりとめのない形になりそうだが、できる限り更新していきたい。

 

ちなみに作成しているサービスは、

生活に猫の癒やしを与えるためのサービス - mewmevv(ミャオミャオ) -

coneco.cat2.pics

です。

宜しくお願いします。