YAZエンジニアが運営するメディア

★ Screen の作成 ★

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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をドラッグ＆ドロップした際の初期値などが自動保存されるため、プロジェクトをエクスポートする際に整理した方が良いと思います。

長くなってきたので、今回はここまでにします。
次回は、もう少し複雑な画面を生成してみたいと思います。

過去の記事

初めてのReact Studio #001 ～ React Studioの導入