初めてのReact Studio #002

クロスプラットフォーム

初めてのReact Studio #002

2018年5月22日

目次Category

★ Screen の作成 ★
★ プロジェクトのエクスポート ★
★ エクスポートされたコードを確認する ★

過去の記事

スクリーンショット 2018-04-10 17.24.31

★ Screen の作成 ★

React Studioを起動後に、“Mobile-First Web App”を「Create new project」ボタンで新規作成した後に、下図のようにScreenをクリックします。
ログイン画面として作成するため、画面右側にあるScreenのName項目を「login」に変更します。

001

続いて、Screenをダブルクリックすることで、Screenの編集画面を表示します。
下図のように画面上部にある「Add Keyline」をクリックすると、画面上に「Keyline 1」と表示されます。
「Keyline 1」をクリックすると、画面右側に編集画面が表示されるので、以下のように数値を入力します。
At : 10.0 %
From : Left

002

同じやり方で「Keyline 2」を右からマイナス10%の位置にも設定します。
At : -10.0 %
From : Right

003

次に画面タイトルとして、文字列を画面上に設定したいので、画面中央にあるElements列から「Expanding text block」をドラッグ＆ドロップします。

004 - コピー

設定したElementには初期値として、「New text. Double-click to edit」が設定されていますので、画面上でダブルクリックして、編集モードにした後に、新しく文言を設定します。

007

画面右側にあるElementタブを開くと「Localiz. key」という項目があり、初期値が設定されています。
この値は、先ほど設定した文言を、エクスポートしたコード上で扱う際の“変数名”になります。
こちらに分かり易い名前を設定しておきます（例. login_text_title）

004

文字色を変更するためには、Elementタブの「Color」ラジオボタンを「Base text」から「Custom」に変更した後に、カラーピッカーで好きな色を設定します。
また、文字サイズを変更するために、同じElementタブのText Settings項目にある「Style」ラジオボタンを「Base text」から「Custom」に変更し、Custom fontの「Size」の数値を変更します。

005

Elementの画面上での表示位置を設定するためには、画面右側にあるLayoutタブをクリックします。
今回、画面上に配置した画面タイトルの位置は、画面の上部から10%の位置、また幅は、左右に設定したKeylineに合わせます。
Align Edges項目に、以下のように設定します。

008

最後に、Elementの名前を初期値から変更します。
ここで設定する名前は、プロジェクトをエクスポートした際に、エレメントを表す変数名になりますので、分かり易い名前（ここではtext_title）を設定しておきます。

009

★ プロジェクトのエクスポート ★

それでは、ここまでに作成したScreenをエクスポートした際に、コード上でどのように表現されているかを確認しておきます。

まずは、App SettingsのNameを設定します。
ここで設定した名前が、コードに出力する際のフォルダ名になりますので一意になるように指定します。
今回は、アプリケーション名を「CloudsupApp」に設定します。

010

次に画面右上にある「Export React Code」をクリックして、プロジェクトをエクスポートします。

011

ソースコードを出力するフォルダが、先ほど設定したアプリケーション名称になっていることを確認して、問題なければ「Export」ボタンをクリックします。

012

Success画面が表示されることを確認します。

013

★ エクスポートされたコードを確認する ★

ReactStudioの出力フォルダ（React Studio/Exported Projects/CloudsupApp）を確認して、どのような構成になっているかを確認します。

014

先ほど作成した「login」画面のソースコードは、srcフォルダの下にLoginScreen.jsとして出力されています。
どのようなコードになっているかを確認します。

	import React, { Component } from 'react';
	import './App.css';


	export default class LoginScreen extends Component {

	// Properties used by this component:
	// appActions, deviceInfo

	render() {
	// eslint-disable-next-line no-unused-vars
	let baseStyle = {};
	// eslint-disable-next-line no-unused-vars
	let layoutFlowStyle = {};
	if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
	baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
	}
	if ( !this.props.atTopOfScreenStack) {
	layoutFlowStyle.height = '100vh';
	layoutFlowStyle.overflow = 'hidden';
	}

	const style_background = {
	width: '100%',
	height: '100%',
	};
	const style_background_outer = {
	backgroundColor: '#f4f4f4',
	pointerEvents: 'none',
	};
	const style_text_title = {
	fontSize: 34.4,
	fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif',
	color: '#0a99c0',
	textAlign: 'center',
	};
	const style_text_title_outer = {
	pointerEvents: 'none',
	};

	return (
	<div className="AppScreen LoginScreen" style={baseStyle}>
	<div className="background">
	<div className='appBg containerMinHeight elBackground' style={style_background_outer}>
	<div style={style_background} />

	</div>

	</div>
	<div className="layoutFlow" style={layoutFlowStyle}>
	<div className='elText_title' style={style_text_title_outer}>
	<div style={style_text_title}>
	<div>{this.props.locStrings.login_text_title}</div>
	</div>

	</div>

	</div>
	</div>
	)
	}
	}

view raw LoginScreen.js hosted with ❤ by GitHub

React StudioのElementタブで設定したスタイルが、31行目から「style_text_title」として出力されています。
そして52行目のdivタグのstyleエレメントに指定されています。

また、React Studioでダブルクリックして入力した文字列は、Localiz.key項目に設定した「login_text_title」という変数名で53行目に表示されています。

実際に設定した文言は、srcフォルダの下にあるDataSheet_localizationSheet.jsに設定されています。
DataSheet_localizationSheet.jsには、ReactStudioのDataタブに記載されているものが出力されます。
Dataタブには、Elementをドラッグ＆ドロップした際の初期値などが自動保存されるため、プロジェクトをエクスポートする際に整理した方が良いと思います。