React-Native( Expo )を使って作るアプリ開発の導入方法

アプリのインストール

まず初めに、Expoを使うのでスマホにExpoの公式アプリをインストールする。
インストールしてアプリを起動すると、アカウントを作るように言われるのでアカウントを作成する。

アプリのひな型を作成

作成したら次に、コンソールでnpmを使ってcreate-react-native-appをインストールする。


$ > npm i -g create-react-native-app

次に任意のフォルダーに入って、react-nativeのひな型を作成


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名

typescriptを使う場合は、以下を実行


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名 --scripts-version=react-native-scripts-ts

アプリを実行

上記で、ひな型を作成したら作成されたフォルダーに入って npm start をする。
するとコンソール上QRコードが出てくるので、それをスマホのカメラを使ってスキャンする。


$ > cd 任意のプロジェクト名
$ > npm start
/*
* ここのQRコードをスマホのカメラを使ってスキャンする
*/

QRコードをスキャンするとさっきインストールしたExpoのアプリが起動するので、そこでcreate-react-native-appで作成されたアプリを実行することができる。

デバッグ方法

デバッグなどは、スマホを振ると管理画面が出てくるので一番下にあるDebug Remote JSをクリックするとPC側でブラウザが起動するのでそこでデバッグすることができる。

設定や便利なnpmモジュール

vsCode

React Native Tools

npmモジュール

react-map-glのPopup

1.Popupをインポート

import {Popup} form ‘react-map-gl’;

2.使い方

hoge(){

return (

<Popup

tipSize={5} //座標を指すチップのサイズ。

anchor=”top” //座標に対するポップアップの位置を示す文字列。オプションはtopbottomleftrighttop-lefttop-rightbottom-leftbottom-right

longitude={~~~}

latitude={~~~}

onClose={function}

>

<div>{~~~~~}</div>

</Popup>

);

}

Facebookページのフェードをホームページに表示

前回のfacebookページとホームページを連携の準備に続いて、フィードを取得してホームページに表示する方法のメモです。

1.アクセストークンをゲット
https://developers.facebook.com/tools/accesstoken/

2.「アプリにアクセストークンを取得するアクセス許可を与えてください。」からアクセス許可をしてトークンを表示します。

3.Bodyの頭に、

window.fbAsyncInit = function() {
FB.init({
appId : ‘ここにappid’,
xfbml : true,
version : ‘v2.8’
});
//ここにapiの実行を記述
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

こんな感じ非同期でapiのjsを読み込む

4.GraphAPIのリクセストを書く


FB.api(
'/myfacebookpage/feed',
'get',
{access_token : 'ここにアクセストークン'},
function(response) {}
);

最後に注意事項としては、はじめに作ったトークンは1時間で期限切れするので、Facebook Debugerのアクセストークンタブを開いて、Extend Access Tokenボタンを押すと60日延長したトークンをゲットできるので、それをコピペすればOK

Blender でベイクする手順

Blenderは翌日には使い方を忘れるのでとりあえず手順をメモ

UV展開

1.UV展開 : モデル選択して、エディットモードにして全ポリゴンを選択し、左メニューのshading/UVs > unwrap > Smart UV Project

2.UVにテクスチャを適用:左下のメニューの3D ViewをUV/Image Editerに変更し、切り替わった画面の下の+ボタンでベイク用のテクスチャを新規に作成

Worldの設定

1.右のインスペクター内の地球のアイコンのworld設定を選択

2.Ambient OcclusionとEnvironment Lightingにチェック、適当な数値を入れる

ライトの設定

1.光源のモデルを選択して、右のインスペクター内の太陽っぽいアイコンを選択

2.Lamp > Energy で明るさを調整

3.Shadow > Samples で影の正確さ、Shadow > Soft Size で影のぼかし具合を調整

各マテリアルの設定

1.モデルを選択して、右のインスペクター内のマテリアルアイコンを選択

2.Shading > Ambient でアンビエントを設定

3D Viewでの設定

1.3D View で「N」を押して別のインスペクターを表示

2.Shading 内のmultitexture を GLSLに変更

3.Shading内のAmbient Occlusionにチェック、色を調整

ベイク

1.ベイクしたいモデルを選択

2.右のインスペクターのレンダリングアイコンを選択

3.Bake > Bake mode > Full Render

4.Bakeボタンを押す