Skip to content

Commit 067fbc1

Browse files
nahokoxxxnahokoxxx
authoredMay 7, 2020
Merge pull request FrontEndFoxes#119 from ryamakuchi/translate-mini3-into-japanese
[translation] jp: 🌈🦄 3: Build a Rainbow/Unicorn Mobile App that Lights Up a Particle Photon Device
2 parents 3596b10 + 59a274a commit 067fbc1

File tree

2 files changed

+564
-1
lines changed

2 files changed

+564
-1
lines changed
 

‎.vuepress/config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,11 @@ module.exports = {
121121
sidebar: [
122122
{
123123
title: '🦴ミニワークショップ',
124-
children: ['/jp/workshops/vue/minis/mini1', '/jp/workshops/vue/minis/mini2'],
124+
children: [
125+
'/jp/workshops/vue/minis/mini1',
126+
'/jp/workshops/vue/minis/mini2',
127+
'/jp/workshops/vue/minis/mini3',
128+
],
125129
},
126130
{
127131
title: '👩‍🎓 ナノアクティビティ',

‎jp/workshops/vue/minis/mini3.md

+559
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,559 @@
1+
# 🌈🦄 Mini Workshop 3: Particle Photon デバイスをライトアップする Rainbow/Unicorn なモバイルアプリを作成する
2+
3+
| **プロジェクトのゴール** | NativeScript-Vue を作成して、Photon の組み込み LED がユーザーの選択に基づいて異なる色で点滅するようにします。 |
4+
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
5+
| **このワークショップで学ぶこと** | NativeScript と Vue.js でのモバイルアプリの作り方、Particle Photon をセットアップして構成する方法、そして 2 つを繋げてアプリがデバイスを制御する方法 |
6+
| **必要なツール** | Wi-Fi へのアクセス<br><br>Chrome のようなモダンブラウザ<br><br>[NativeScript Playground](https://play.nativescript.org) へのアクセス —バージョン管理のためアカウント作成を推奨します。iOS または Android のスマートフォンと NativeScript Playground、Preview アプリのインストール<br><br>プレイグラウンド用の 2 つの NativeScript コンパニオンアプリ（NativeScript Viewer と NativeScript Playground）Android の場合： [NativeScript Playground](https://play.google.com/store/apps/details?id=org.nativescript.play) と [NativeScript Preview](https://play.google.com/store/apps/details?id=org.nativescript.preview)。iOS の場合： [NativeScript Playground](https://itunes.apple.com/us/app/nativescript-playground/id1263543946) と [NativeScript Preview](https://itunes.apple.com/us/app/nativescript-preview/id1264484702)<br><br>[Particle Photon device](https://store.particle.io/collections/photon)。 |
7+
| **かかる時間** | 1 時間 |
8+
| **アプリケーションを試してみたいですか？** | [Playground アプリでこのリンクを開きます](https://play.nativescript.org/?template=play-vue&id=E9hBGf&v=21) |
9+
10+
# イントロダクション
11+
12+
## Photon をセットアップする
13+
14+
### 1. Photon を Wi-Fi に接続します：
15+
16+
このワークショップに付属のキットを開梱するか、用意しているあなたのデバイスを使用して、mini-USB コードを Photon とコンピューターの USB ポートまたは USB 対応の充電器に接続して、デバイスに電力を供給します。
17+
18+
- [Photon setup page](https://setup.particle.io/) にアクセスしてデバイスをセットアップします。ログインを求められますが、先に進み、Particle アカウントを作成します
19+
- アカウントを作成すると、デバイスのセットアップにリダイレクトされます。「Setup a Photon」と「next」をクリックして開始します。次のページにすべての要件がある場合は、「next」をクリックします。生成されたローカルファイルをコンピューターにダウンロードします。ブラウザで `photonsetup.html` ファイルを開きます
20+
- Photon の箱の裏面を見てどの Photon かを特定します。左側にデバイスの ID が記載されたステッカーがあります。その番号の最初の 6 文字は、コンピューターに表示される最初の Wi-Fi アドレスと一致します
21+
22+
![box](./images/box.jpg)
23+
24+
- リストされている手順に従って Photon の Wi-Fi ネットワークに接続します。接続すると、「青くピカピカ」するはずです（中央の青色のライトがゆっくりと点滅します）
25+
26+
![wifi](./images/wifi.png)
27+
28+
デバイスに名前をつけてセットアップを完了します。これで、Photon のコードを書くための特別な IDE である [Particle Build](https://build.particle.io) でデバイスを使用することができます。
29+
30+
::: tip 💡
31+
参加者は、Particle Build で Photon を見つけるのに苦労することがあります。IDE に表示されない場合は、手動で追加してください。
32+
33+
- デバイスがまだ青色に点滅していない場合は、メインステータス LED が濃い青色に点滅するまで Photon のセットアップボタンを押し続けます。これには約 3 秒かかります。
34+
35+
![setup button](./images/setup_button.jpg)
36+
37+
- 上記の手順に従って Photon の Wi-Fi に接続し、Web ブラウザで [http://192.168.0.1/device-id](http://192.168.0.1/device-id) を開きます。そのページには、次のような ID が表示されます：
38+
39+
```
40+
{"id":"30003F000347363339343638","c":"1"}
41+
```
42+
43+
- その ID をメモしてください。あとで使用します
44+
- [Particle Build](https://build.particle.io) を開き、「Add New Device」をクリックします
45+
46+
![Particle Build](./images/device_id.png)
47+
48+
- メモしておいたデバイス ID をボックスに入力します。これでデバイスが IDE で使用できるようになります
49+
50+
:::
51+
52+
### 2. Particle Build について学ぶ
53+
54+
Photon のアカウントはすでに作成しており、ログインしているはずです（ログインしていない場合は、[ここからログインしてください](https://login.particle.io/login)）
55+
これで [Particle Build](https://build.particle.io/build/new) に移動できます。左のバーの下部にある下から 3 番目のアイコンをクリックして、デバイスがリストされていることを確認します。スターがついていることを確認します（スターがついていない場合はスターをクリックします） —Wi-Fi 経由でこのデバイスにコードをフラッシュします。
56+
57+
Particle Build を見てみましょう。これはブラウザベースの IDE であり、ブラウザから左側で選択した Photon デバイスにコードを「フラッシュ」、つまり公開できます。
58+
59+
![Particle Build](./images/particle_build.png)
60+
61+
現在、この新しいファイルには、setup() と loop() 関数以外は何もありません。このファイルにコードを追加してみましょう。
62+
63+
::: tip 💡
64+
Photon は基本的に Wi-Fi 接続された Arduino であるため、Arduino 開発の経験があれば、このコードはなじみ深いものになります。Arduino の「スケッチ」、つまりハードウェアデバイスに書き込まれるファームウェアは、一般的に C または C++ で書かれています。はんだ付けや余分な配線を避けて、デバイスの中央の LED ライトを制御するための C++ コードを少し書きます。ただし、Particle キットにはいくつかの追加機能が付属しているので、後でもっと自由に探ってみてください！
65+
:::
66+
67+
現時点では、Photon は中央の LED が点灯しており、すべてが順調に進んでいる場合は、「青くピカピカしている」か、緑がかった青色のパルスを発しているはずです。いくつかのコードをフラッシュして、中央のライトを白くしましょう。
68+
69+
### 3. いくつかのコードをフラッシュする
70+
71+
Build IDE の右側に、いくつかのコード行を含む黒いウィンドウが表示されます。loop() 関数の波かっこ内に、次のコードを貼り付けます：
72+
73+
```js
74+
RGB.control(true);
75+
// 色を変える
76+
RGB.color(RGB_COLOR_WHITE);
77+
RGB.control(false);
78+
```
79+
80+
このコードは、Particle API を使用して中央の RGB LED の制御を取得し、その色を変更してから、制御を放棄します。
81+
82+
この新しいファイルは、Particle Build では「アプリ」と見なされます。アプリのコードをスター付きのデバイスにフラッシュする前に、左側のパネルで名前を付ける必要があります。
83+
84+
![build](./images/particle_build2.png)
85+
86+
Particle Build の左側のナビゲーションストリップにあるフォルダアイコンをクリックして、変更を保存します。その上にある、丸で囲まれたチェックマークをクリックして、コードを「確認」します。これは基本的にコードをテストして、コンパイルできることを確認しています。最後に、Photon にスターが付けられていることを確認し、上部の稲妻アイコンをクリックして、このコードをデバイスにフラッシュします。Photon が更新され、いくつかの色が数秒間点滅した後、中央の LED が白色に変わるはずです。コードをループ関数に配置しているので、白のままです。
87+
88+
このスニペットを少しいじってみてください。LED を赤くできますか？
89+
90+
### 4. Photon コードを完成させる
91+
92+
私たちのモバイルアプリでは、LED ライトの 3 つの「モード」を作成します —LED がレインボーシリーズを点滅させる「レインボーモード」、LED が青と白を交互に点滅させる「ユニコーンモード」、そして「停止」モードで LED が白色に留まります。
93+
94+
ご想像のとおり、これらのルーチンを loop() 関数に配置します。
95+
96+
このファイルの先頭に変数を追加し、初期のライトスタイルを 0 にリストします：
97+
98+
`int style = 0;`
99+
100+
次に、 loop() 関数で、追加したスニペットを次のコードで上書きします：
101+
102+
```js
103+
if (style == 0) {
104+
RGB.control(true);
105+
// 色を変える
106+
RGB.color(RGB_COLOR_WHITE);
107+
RGB.control(false);
108+
} else if (style == 1) {
109+
RGB.control(true);
110+
// 色を変える
111+
RGB.color(RGB_COLOR_RED);
112+
// 1秒遅らせる
113+
delay(500);
114+
RGB.color(RGB_COLOR_ORANGE);
115+
delay(500);
116+
RGB.color(RGB_COLOR_YELLOW);
117+
delay(500);
118+
RGB.color(RGB_COLOR_GREEN);
119+
delay(500);
120+
RGB.color(RGB_COLOR_BLUE);
121+
delay(500);
122+
RGB.color(RGB_COLOR_MAGENTA);
123+
delay(500);
124+
// 通常の操作を再開する
125+
RGB.control(false);
126+
} else if (style == 2) {
127+
RGB.control(true);
128+
// 色を変える
129+
RGB.color(RGB_COLOR_WHITE);
130+
// 1秒遅らせる
131+
delay(500);
132+
RGB.color(RGB_COLOR_MAGENTA);
133+
delay(500);
134+
// 通常の操作を再開する
135+
RGB.control(false);
136+
}
137+
```
138+
139+
このコードを検証し、デバイスにフラッシュします。何も変更されていないようです —スタイルが 0 に設定されているため、まだ白いままです。整数値を 1 に変更して、デバイスにフラッシュし、何が起こるかを見てみましょう。Rainbow が見えますか？
140+
141+
これでスタイルを 0 に戻すことができるので、LED は白で初期化されます：
142+
143+
`int style = 0;`
144+
145+
### 5. モバイルアプリで Photon の REST API を使用する準備をする
146+
147+
では、Photon のクールな REST API 機能を使用して、モバイルアプリが Photon を制御できるようにする必要があります。これを行うには、次の行を中かっこの間にある setup() 関数に追加します：
148+
149+
`Particle.function("launchMode",launchMode);`
150+
151+
モバイルアプリから利用できる `launchMode` という名前の Particle 関数を追加しました。これは、Photon のコードで同様の名前の関数を呼び出します。
152+
153+
loop() 関数の最後にその関数を追加します：
154+
155+
```js
156+
int launchMode(String mode) {
157+
style = 0;
158+
159+
if(mode=="rainbow"){
160+
style = 1;
161+
}else if(mode=="unicorn"){
162+
style = 2;
163+
}
164+
}
165+
```
166+
167+
これで、モバイルアプリは内部の `launchMode` 関数を呼び出す `launchMode` という Particle 関数を呼び出すことができ、LED フラッシュスタイルの制御に使用するモードを示す文字列を渡します。
168+
169+
保存して確認し、このコードをデバイスにフラッシュします。LED は白に戻ります。
170+
171+
### 6. 最終的な Photon コード
172+
173+
最終的なコードは次のようになります：
174+
175+
```js
176+
int style = 0;
177+
178+
void setup(){
179+
Particle.function("launchMode",launchMode);
180+
}
181+
void loop(){
182+
if(style == 0){
183+
RGB.control(true);
184+
// 色を変える
185+
RGB.color(RGB_COLOR_WHITE);
186+
RGB.control(false);
187+
}
188+
else if (style == 1){
189+
RGB.control(true);
190+
// 色を変える
191+
RGB.color(RGB_COLOR_RED);
192+
// 1秒遅らせる
193+
delay(500);
194+
RGB.color(RGB_COLOR_ORANGE);
195+
delay(500);
196+
RGB.color(RGB_COLOR_YELLOW);
197+
delay(500);
198+
RGB.color(RGB_COLOR_GREEN);
199+
delay(500);
200+
RGB.color(RGB_COLOR_BLUE);
201+
delay(500);
202+
RGB.color(RGB_COLOR_MAGENTA);
203+
delay(500);
204+
// 通常の操作を再開する
205+
RGB.control(false);
206+
}
207+
else if (style == 2){
208+
RGB.control(true);
209+
// 色を変える
210+
RGB.color(RGB_COLOR_WHITE);
211+
// 1秒遅らせる
212+
delay(500);
213+
RGB.color(RGB_COLOR_MAGENTA);
214+
delay(500);
215+
// 通常の操作を再開する
216+
RGB.control(false);
217+
}
218+
}
219+
220+
int launchMode(String mode) {
221+
style = 0;
222+
223+
if (mode=="rainbow") {
224+
style = 1;
225+
} else if (mode=="unicorn") {
226+
style = 2;
227+
}
228+
229+
}
230+
```
231+
232+
## アプリを Scaffold する
233+
234+
次に、JavaScript を使用してネイティブなモバイルアプリを作成します。NativeScript を使用してアプリを作成します。このアプリは、先ほどフラッシュしたコードを介して Photon と通信します。
235+
236+
[NativeScript Playground](https://play.nativescript.org) を開いてみてください。最初の訪問では、いくつかの「コーチマーク」が表示され、主要な機能がある場所が示されます。
237+
238+
「Play Now」をクリックして、メインエディタを開きます。QR コードが表示されます — NativeScriptPlay アプリでスキャンしてください。これにより、コーディング時にスマートフォンを自動的に更新できます。これで、NativeScript-Vue アプリを Scaffold する準備ができました！
239+
240+
![playground](./images/playground1.png)
241+
242+
デフォルトでは、最初のプレイグラウンドアプリは Angular を使用して作成されます。上部の「new」をクリックし、テンプレートとして「NS-Vue」を選択します。 別の QR コードを取得するので、そのコードをスキャンしてください。スマートフォンが更新され、基本のアプリが表示されます：
243+
244+
![base app](./images/playground2.png)
245+
246+
## ベースのマークアップを作成する
247+
248+
`template` で少しだけ XML マークアップを使って、ActionBar、ナビゲーション用の SegmentedBar、そしてタップされると変化するパネルを備えた SegmentedBar のシンプルなレイアウトを構築します。
249+
250+
::: tip 💡
251+
NativeScript レイアウトは、Web で作成した HTML とは異なります。GridLayouts や StackLayouts などのネイティブ UI に変換される NativeScript XML マークアップを使用しています。
252+
:::
253+
254+
`app/components/HelloWorld.vue` を開き、テンプレートの `<Page>` タグの間のすべてを削除して、以下を追加します：
255+
256+
```html
257+
<ActionBar class="action-bar" title="Awesome Photons!" />
258+
<StackLayout>
259+
<SegmentedBar
260+
color="white"
261+
backgroundColor="blueviolet"
262+
selectedBackgroundColor="hotpink"
263+
class="bar"
264+
:items="segmentedBarItems"
265+
v-model="selectedBarIndex"
266+
/>
267+
<StackLayout height="100%" :class="mode"></StackLayout>
268+
</StackLayout>
269+
```
270+
271+
バインドされた値 `:items` と `v-model` がまだ設定されていないため、SegmentedBar はまだ表示されていません。データブロック（テンプレートブロックの下、スクリプトブロック内）を見つけ、 `data()` メソッドを上書きして、SegmentedBar の値を追加します。また、デフォルトの SelectedBarIndex を設定し、 `mode` のプレースホルダー値を作成します。後者は、バーがタップされたときに UI を変更するために使われます：
272+
273+
```js
274+
data() {
275+
return {
276+
segmentedBarItems: function () {
277+
var segmentedBarModule = require("ui/segmented-bar");
278+
let rainbow = new segmentedBarModule.SegmentedBarItem();
279+
rainbow.title = "Rainbows";
280+
let unicorn = new segmentedBarModule.SegmentedBarItem();
281+
unicorn.title = "Unicorns";
282+
let stop = new segmentedBarModule.SegmentedBarItem();
283+
stop.title = "Stop!";
284+
return [rainbow, unicorn, stop];
285+
}(),
286+
selectedBarIndex: 2,
287+
mode: ''
288+
};
289+
},
290+
```
291+
292+
これで、SegmentedBar がうまく表示されるはずです！
293+
294+
## CSS を追加する
295+
296+
NativeScript は、UI のスタイルを設定するために、通常の CSS および SASS のサブセットをサポートしています。それを活用して UI を改善しましょう。
297+
298+
`<script>` タグの下に、 `<style>` タグがあります。このブロックの 2 つのスタイルを次のように上書きします：
299+
300+
```css
301+
.action-bar {
302+
color: white;
303+
background-color: blueviolet;
304+
}
305+
.bar {
306+
margin: 20;
307+
}
308+
.rainbow {
309+
background: linear-gradient(
310+
to bottom,
311+
red,
312+
orange,
313+
yellow,
314+
green,
315+
blue,
316+
purple
317+
);
318+
}
319+
.unicorn {
320+
background-image: url("~/images/unicorn.jpg");
321+
background-repeat: no-repeat;
322+
background-size: cover;
323+
background-position: center;
324+
}
325+
```
326+
327+
このプロジェクトに画像も追加する必要があります。この画像は、Unicorn SegmentedBarItem がタップされたときに表示されます。
328+
329+
「Explorer」という単語の横にある小さな「+」をクリックし、「images」というタイトルのフォルダを追加します。以下のファイルをローカルに保存し、「.jpg」ファイルとしてアップロードし、ドロップダウンで「Upload resources」ユーティリティを使用します。
330+
331+
::: tip 💡
332+
ファイル名を `unicorn.jpg` に変更し、アップロード後に保存してください。
333+
:::
334+
335+
![A beautiful unicorn!](./images/unicorn.jpg)
336+
337+
## メソッドの作成（1）
338+
339+
`Rainbows` 、`Unicorns` 、または `Stop!` をタップするかどうかに応じて、UI を変更します。
340+
341+
SegmentedBar の動作を管理するために、 `data` メソッドの最後のコンマのあと（まだない場合はコンマを追加します）に `methods` ブロックを作成します：
342+
343+
```js
344+
methods: {
345+
onSelectedIndexChange(args) {
346+
let segmentedBarIndex = args.object.selectedIndex;
347+
if (segmentedBarIndex == 0) {
348+
this.mode = 'rainbow'
349+
//this.launchMode(this.mode);
350+
}
351+
else if (segmentedBarIndex == 1) {
352+
this.mode = 'unicorn'
353+
//this.launchMode(this.mode);
354+
}
355+
else {
356+
this.mode = 'stop'
357+
//this.launchMode(this.mode);
358+
}
359+
}
360+
}
361+
```
362+
363+
::: tip 💡
364+
貼り付けで JavaScript を追加すると、NativeScript Playground がめちゃくちゃになる場合があります。修正するには、 `<command><X>` （切り取り）を押します。
365+
:::
366+
367+
次に、このメソッドを監視するために `<SegmentedBar>` 自体を編集します。@selectedIndexChange を `<template>` の `<SegmentedBar>` マークアップに追加します：
368+
369+
```html
370+
@selectedIndexChange="onSelectedIndexChange($event)"
371+
```
372+
373+
完成したテンプレートブロックは次のようになります：
374+
375+
```html
376+
<template>
377+
<Page>
378+
<ActionBar class="action-bar" title="Awesome Photons!" />
379+
<StackLayout>
380+
<SegmentedBar
381+
color="white"
382+
backgroundColor="blueviolet"
383+
selectedBackgroundColor="hotpink"
384+
class="bar"
385+
:items="segmentedBarItems"
386+
v-model="selectedBarIndex"
387+
@selectedIndexChange="onSelectedIndexChange($event)"
388+
/>
389+
<StackLayout height="100%" :class="mode"></StackLayout>
390+
</StackLayout>
391+
</Page>
392+
</template>
393+
```
394+
395+
これで、SegmentedBar をタップすると、UI が変更されます。
396+
397+
## Photon を接続する
398+
399+
これで、SegmentedBar をタップしたときに Photon が点灯するようになりました。
400+
401+
プレイグラウンドの `<script>` のすぐ下で、いくつかの `const` の値を設定します。
402+
403+
```js
404+
const http = require("http");
405+
const baseUrl = "https://api.particle.io/v1/devices/xxxxx";
406+
const token = "yyyyy";
407+
const endpoint = "launchMode";
408+
```
409+
410+
これらを見ていきましょう。まず、Particle の REST API に対して http 呼び出しを行う必要があるため、 `http` モジュールが必要です。
411+
412+
次に、REST API にどのデバイスを呼び出してトークンを送信するかを通知する必要があります。ここで 2 つの値を変更する必要があります。Particle Build IDE に戻り、下から 3 番目のアイコンをクリックします（ターゲットのように見えます）。デバイス ID は次のとおりです：
413+
414+
![Particle IDE](./images/particle1.png)
415+
416+
その値をコピーし、baseUrl const の `xxxxx` の値をデバイス ID に変更します。
417+
418+
次に、REST API 自体を使用するためのトークンが必要です。Particle Build の下部にある「歯車」アイコンをクリックし、アクセストークンの値をコピーして、 `yyyyy` をトークンに置きかえます。
419+
420+
![Particle IDE](./images/particle2.png)
421+
422+
追加した最後の値は、呼び出すエンドポイントの名前です。上で設定した Particle 関数を覚えていますか？これはモバイルアプリで呼び出す方法です。
423+
424+
## メソッドの作成（2）
425+
426+
`onSelectedIndexChange` 呼び出しの閉じかっこの後にコンマを追加し、REST API を呼び出すメソッドを追加して、Photon の色を変更します：
427+
428+
```js
429+
launchMode(mode) {
430+
http.request({
431+
url: `${baseUrl}/${endpoint}?access_token=${token}`,
432+
method: "POST",
433+
headers: { 'content-type': 'application/json' },
434+
content: JSON.stringify({
435+
mode: mode
436+
})
437+
}).then((response) => {
438+
console.log(JSON.stringify(response))
439+
}, (e) => {
440+
alert("error")
441+
});
442+
}
443+
```
444+
445+
ここでは、Particle 関数として設定したエンドポイントで baseUrl に http リクエストを送信し、文字列を渡して、フラッシュするカラーシーケンスを関数に伝えています。
446+
447+
最後に、SegmentedBar がタップされたときに実際に `launchMode` を呼び出す必要があります。 `onSelectedIndexChange` メソッドの `// this.launchMode(this.mode)` コメントコードを外してください。
448+
449+
HelloWorld.vue ファイル全体は次のようになり、個人用デバイスの ID とトークンが入力されます：
450+
451+
```js
452+
<template>
453+
<Page>
454+
<ActionBar class="action-bar" title="Awesome Photons!" />
455+
<StackLayout>
456+
<SegmentedBar color="white" backgroundColor="blueviolet"
457+
selectedBackgroundColor="hotpink" class="bar"
458+
:items="segmentedBarItems" v-model="selectedBarIndex"
459+
@selectedIndexChange="onSelectedIndexChange($event)" />
460+
<StackLayout height="100%" :class="mode"></StackLayout>
461+
</StackLayout>
462+
</Page>
463+
</template>
464+
465+
<script>
466+
const http = require("http");
467+
const baseUrl =
468+
"https://api.particle.io/v1/devices/<your device id>";
469+
const token = "<your token>";
470+
const endpoint = "launchMode";
471+
export default {
472+
data() {
473+
return {
474+
segmentedBarItems: (function() {
475+
var segmentedBarModule = require(
476+
"ui/segmented-bar");
477+
let rainbow = new segmentedBarModule
478+
.SegmentedBarItem();
479+
rainbow.title = "Rainbows";
480+
let unicorn = new segmentedBarModule
481+
.SegmentedBarItem();
482+
unicorn.title = "Unicorns";
483+
let stop = new segmentedBarModule
484+
.SegmentedBarItem();
485+
stop.title = "Stop!";
486+
return [rainbow, unicorn, stop];
487+
})(),
488+
selectedBarIndex: 2,
489+
mode: ""
490+
};
491+
},
492+
methods: {
493+
onSelectedIndexChange(args) {
494+
let segmentedBarIndex = args.object.selectedIndex;
495+
if (segmentedBarIndex == 0) {
496+
this.mode = "rainbow";
497+
this.launchMode(this.mode);
498+
} else if (segmentedBarIndex == 1) {
499+
this.mode = "unicorn";
500+
this.launchMode(this.mode);
501+
} else {
502+
this.mode = "stop";
503+
this.launchMode(this.mode);
504+
}
505+
},
506+
launchMode(mode) {
507+
http.request({
508+
url: `${baseUrl}/${endpoint}?access_token=${token}`,
509+
method: "POST",
510+
headers: {
511+
"content-type": "application/json"
512+
},
513+
content: JSON.stringify({
514+
mode: mode
515+
})
516+
}).then(
517+
response => {
518+
console.log(JSON.stringify(response));
519+
},
520+
e => {
521+
alert("error");
522+
}
523+
);
524+
}
525+
}
526+
};
527+
</script>
528+
529+
<style scoped>
530+
.action-bar {
531+
color: white;
532+
background-color: blueviolet;
533+
}
534+
535+
.bar {
536+
margin: 20;
537+
}
538+
539+
.rainbow {
540+
background: linear-gradient(to bottom, red, orange, yellow, green, blue, purple);
541+
}
542+
.unicorn {
543+
background-image: url('~/images/unicorn.jpg');
544+
background-repeat: no-repeat;
545+
background-size: cover;
546+
background-position: center;
547+
}
548+
</style>
549+
```
550+
551+
これで、正しいコードがフラッシュされた状態で Photon が Wi-Fi に接続されている場合、モバイルアプリでのジェスチャが Photon の中央の LED を点灯しているのを確認できます！
552+
553+
![rainbows unicorns](./images/rainbows_unicorns.gif)
554+
555+
NativeScript Playground でモバイルデバイス用の Vue.js アプリを作成することは本当に興味深いです。やり方がわかったので、他にどんなものを作れますか？このアプリを拡張して、さまざまな照明モードを作成できるのではないでしょうか？
556+
557+
## Author
558+
559+
Made with 📱❤️ by Jen Looper

0 commit comments

Comments
 (0)
Please sign in to comment.