Posted at

React Studioを使ってQiitaの記事一覧アプリを作成してみる

More than 1 year has passed since last update.


はじめに

前回の記事で大きな反響を頂いたので、本記事では、

簡単なQiitaの記事一覧アプリの作成を通して、手順を説明したいと思います。

完成版はこちら

https://neonto.cloud/u/yuxiotest/

Screen Shot 2018-01-21 at 7.01.13 PM.png


プロジェクトの作成

ReactStudioを開き、「Create new project」をクリックします。

1.png

プロジェクト画面が開かれます

Screen Shot 2018-01-21 at 6.18.01 PM.png

アプリのタイトルの設定をします

Screen Shot 2018-01-21 at 6.18.34 PM.png

アプリ全体のスタイルを決めます

Screen Shot 2018-01-21 at 6.19.15 PM.png

プロジェクトマップから「Screen」を選択します

Screen Shot 2018-01-21 at 6.19.57 PM.png


必要なコンポーネントをあてはめる

ナビゲーションバーを入れる場合、

nav barにチェックを入れます。

2.png

カードを入れます

3.png

コンポーネント化させます

1.png

コンポーネントさせると以下のようにプロジェクトマップに反映されます

2.png

カードのコンポーネントを選択し、

テキストとボタンを入れます

ダブルクリックして、

テキストに「記事のタイトル」

ボタンに「この記事を読む」と変更します

3.1.png

ボタンをクリックし、

Elementで色を変更します

Screen Shot 2018-01-21 at 6.30.25 PM.png

WEB上で一度確認してみましょう

「Open in Web Browser」をクリックします

5.png

ローカルサーバが立ち上がり、

コンパイルされたものが開かれます

Screen Shot 2018-01-21 at 6.32.48 PM.png


画面の要素の位置を整える 

画面の要素を真ん中や左や右に整えたい時は、keylineを使用します。

「add keyline」を選択します。

6.png

表示されたkeylineをクリックします

7.png

Fromの中から「Left」「Middle」「Right」を選択します。

今回は、真ん中に揃えたいのでMiddleを選択します。

8.png

その後、コンポーネントのカードをクリックすると

alignが出てくるので

「center on keyline」を選択します

9.png

ブラウザで確認すると真ん中になりました

Screen Shot 2018-01-21 at 6.35.52 PM.png


リストを作る

カードのコンポーネントを選択→「Make list」→「Create Data Sheet」を選択

カードがずれていたら、真ん中にドラッグして移動させて調整します

10.png

11.png



Screen Shot 2018-01-21 at 6.50.16 PM.png

プロジェクトマップのScreenに戻り、

リストがずれているので真ん中に戻し、

alignをクリック→「center on keyline」をクリックします

「open web in browser」で

ブラウザで確認すると以下のような感じです

Screen Shot 2018-01-21 at 6.38.35 PM.png


要素にデータを入れる

ReactStudioでは、値を取得して表示させることができます。

jsonでデータも取得できますが、今回は入力したデータを

取ってくるようにします。

プロジェクトマップに行き、「Data」を選択します

12.png

「list data 1」を選択

「add column」をクリックします

Screen Shot 2018-01-21 at 6.39.11 PM.png

columnをリネームします

今回は、Qiitaの記事を持ってくるので、titleとlinkという名前にします

Screen Shot 2018-01-21 at 6.39.59 PM.png

表示させたい記事のタイトルを入力します

Screen Shot 2018-01-21 at 6.44.20 PM.png


データを表示させる

Screen Shot 2018-01-21 at 6.46.05 PM.png

リストをクリックし

DataのList data 1であることを確認します

カードのコンポーネント(comp2)を選択します

14.png

「記事のタイトル」をクリック→「Data」→

「Text」をクリックし「title List data 1」を選択

ボタンをクリック「data」→「Enabled」→

「link list data 1」→をクリック

「Interact」を選択「Script」→「Edit Script」→

「Window.open・・・」のコードを入力

Screen Shot 2018-01-21 at 6.58.35 PM.png

プロジェクトマップから

List item1を選択

0TtZLh57.png

コンポーネントを選択し、

「Data」をクリック

その後、「title」に title List data 1

「Link」に link list data 1を選択します

Screen Shot 2018-01-21 at 10.02.17 PM.png

これで完成です!

Screen Shot 2018-01-21 at 7.01.13 PM.png


アプリのビルド

完成したものをビルドしましょう

「Publish to Web」をクリックします

Screen Shot 2018-01-21 at 9.44.50 PM.png

site name(URL)をつけます

Screen Shot 2018-01-21 at 7.00.12 PM.png

「Publish now」を選択します

Screen Shot 2018-01-21 at 7.00.50 PM.png

「Copy URL to Clipboard」をクリック→「OK」

完成品にアクセスします

Screen Shot 2018-01-21 at 7.01.00 PM.png

こんな感じに表示されます

Screen Shot 2018-01-21 at 7.01.13 PM.png

https://neonto.cloud/u/yuxiotest/


プログラムの確認

自動生成されたプログラムは、「Code glance」で見ることができます

Screen Shot 2018-01-21 at 9.51.44 PM.png

Screen Shot 2018-01-21 at 7.01.57 PM.png

コードをエクスポートする時は、「Export React Code」でエクスポートできます

Screen Shot 2018-01-21 at 7.02.19 PM.png


おわりに

慣れると30分でここまですることができました

サンプルがすでに用意されているのでこれを使えば、ポートフォリオをはじめ、色々なものが作成できます

Screen Shot 2018-01-21 at 9.54.50 PM.png

Screen Shot 2018-01-21 at 9.55.09 PM.png