diff --git a/404.html b/404.html index dc02ed3..6a7d2ca 100644 --- a/404.html +++ b/404.html @@ -8,13 +8,13 @@ - + -

404

That's a Four-Oh-Four.
+ - + diff --git a/assets/js/12.a78441fc.js b/assets/js/12.71fc6801.js similarity index 99% rename from assets/js/12.a78441fc.js rename to assets/js/12.71fc6801.js index 96c393f..de0a84e 100644 --- a/assets/js/12.a78441fc.js +++ b/assets/js/12.71fc6801.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{265:function(t,s,n){t.exports=n.p+"assets/img/playground1.ee80eaa6.png"},266:function(t,s,n){t.exports=n.p+"assets/img/playground2.a1940941.png"},382:function(t,s,n){t.exports=n.p+"assets/img/box.df3229a3.jpg"},383:function(t,s,n){t.exports=n.p+"assets/img/wifi.8bd17593.png"},384:function(t,s,n){t.exports=n.p+"assets/img/setup_button.e799b1b9.jpg"},385:function(t,s,n){t.exports=n.p+"assets/img/device_id.f843d7be.png"},386:function(t,s,n){t.exports=n.p+"assets/img/particle_build.72e09ea4.png"},387:function(t,s,n){t.exports=n.p+"assets/img/particle_build2.003c7d3c.png"},388:function(t,s,n){t.exports=n.p+"assets/img/unicorn.bddf5105.jpg"},389:function(t,s,n){t.exports=n.p+"assets/img/particle1.75ca9d9a.png"},390:function(t,s,n){t.exports=n.p+"assets/img/particle2.c2ae590c.png"},391:function(t,s,n){t.exports=n.p+"assets/img/rainbows_unicorns.a23880a7.gif"},481:function(t,s,n){"use strict";n.r(s);var a=n(14),e=Object(a.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"🌈🦄-mini-workshop-3-particle-photon-デバイスをライトアップする-rainbow-unicorn-なモバイルアプリを作成する"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#🌈🦄-mini-workshop-3-particle-photon-デバイスをライトアップする-rainbow-unicorn-なモバイルアプリを作成する"}},[t._v("#")]),t._v(" 🌈🦄 Mini Workshop 3: Particle Photon デバイスをライトアップする Rainbow/Unicorn なモバイルアプリを作成する")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[s("strong",[t._v("プロジェクトのゴール")])]),t._v(" "),s("th",[t._v("NativeScript-Vue を作成して、Photon の組み込み LED がユーザーの選択に基づいて異なる色で点滅するようにします。")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("strong",[t._v("このワークショップで学ぶこと")])]),t._v(" "),s("td",[t._v("NativeScript と Vue.js でのモバイルアプリの作り方、Particle Photon をセットアップして構成する方法、そして 2 つを繋げてアプリがデバイスを制御する方法")])]),t._v(" "),s("tr",[s("td",[s("strong",[t._v("必要なツール")])]),t._v(" "),s("td",[t._v("Wi-Fi へのアクセス"),s("br"),s("br"),t._v("Chrome のようなモダンブラウザ"),s("br"),s("br"),s("a",{attrs:{href:"https://play.nativescript.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Playground"),s("OutboundLink")],1),t._v(" へのアクセス —バージョン管理のためアカウント作成を推奨します。iOS または Android のスマートフォンと NativeScript Playground、Preview アプリのインストール"),s("br"),s("br"),t._v("プレイグラウンド用の 2 つの NativeScript コンパニオンアプリ（NativeScript Viewer と NativeScript Playground）Android の場合： "),s("a",{attrs:{href:"https://play.google.com/store/apps/details?id=org.nativescript.play",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Playground"),s("OutboundLink")],1),t._v(" と "),s("a",{attrs:{href:"https://play.google.com/store/apps/details?id=org.nativescript.preview",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Preview"),s("OutboundLink")],1),t._v("。iOS の場合： "),s("a",{attrs:{href:"https://itunes.apple.com/us/app/nativescript-playground/id1263543946",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Playground"),s("OutboundLink")],1),t._v(" と "),s("a",{attrs:{href:"https://itunes.apple.com/us/app/nativescript-preview/id1264484702",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Preview"),s("OutboundLink")],1),s("br"),s("br"),s("a",{attrs:{href:"https://store.particle.io/collections/photon",target:"_blank",rel:"noopener noreferrer"}},[t._v("Particle Photon device"),s("OutboundLink")],1),t._v("。")])]),t._v(" "),s("tr",[s("td",[s("strong",[t._v("かかる時間")])]),t._v(" "),s("td",[t._v("1 時間")])]),t._v(" "),s("tr",[s("td",[s("strong",[t._v("アプリケーションを試してみたいですか？")])]),t._v(" "),s("td",[s("a",{attrs:{href:"https://play.nativescript.org/?template=play-vue&id=E9hBGf&v=21",target:"_blank",rel:"noopener noreferrer"}},[t._v("Playground アプリでこのリンクを開きます"),s("OutboundLink")],1)])])])]),t._v(" "),s("h1",{attrs:{id:"イントロダクション"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#イントロダクション"}},[t._v("#")]),t._v(" イントロダクション")]),t._v(" "),s("h2",{attrs:{id:"photon-をセットアップする"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#photon-をセットアップする"}},[t._v("#")]),t._v(" Photon をセットアップする")]),t._v(" "),s("h3",{attrs:{id:"_1-photon-を-wi-fi-に接続します"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-photon-を-wi-fi-に接続します"}},[t._v("#")]),t._v(" 1. Photon を Wi-Fi に接続します：")]),t._v(" "),s("p",[t._v("このワークショップに付属のキットを開梱するか、用意しているあなたのデバイスを使用して、mini-USB コードを Photon とコンピューターの USB ポートまたは USB 対応の充電器に接続して、デバイスに電力を供給します。")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://setup.particle.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Photon setup page"),s("OutboundLink")],1),t._v(" にアクセスしてデバイスをセットアップします。ログインを求められますが、先に進み、Particle アカウントを作成します")]),t._v(" "),s("li",[t._v("アカウントを作成すると、デバイスのセットアップにリダイレクトされます。「Setup a Photon」と「next」をクリックして開始します。次のページにすべての要件がある場合は、「next」をクリックします。生成されたローカルファイルをコンピューターにダウンロードします。ブラウザで "),s("code",[t._v("photonsetup.html")]),t._v(" ファイルを開きます")]),t._v(" "),s("li",[t._v("Photon の箱の裏面を見てどの Photon かを特定します。左側にデバイスの ID が記載されたステッカーがあります。その番号の最初の 6 文字は、コンピューターに表示される最初の Wi-Fi アドレスと一致します")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(382),alt:"box"}})]),t._v(" "),s("ul",[s("li",[t._v("リストされている手順に従って Photon の Wi-Fi ネットワークに接続します。接続すると、「青くピカピカ」するはずです（中央の青色のライトがゆっくりと点滅します）")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(383),alt:"wifi"}})]),t._v(" "),s("p",[t._v("デバイスに名前をつけてセットアップを完了します。これで、Photon のコードを書くための特別な IDE である "),s("a",{attrs:{href:"https://build.particle.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("Particle Build"),s("OutboundLink")],1),t._v(" でデバイスを使用することができます。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),s("p",[t._v("参加者は、Particle Build で Photon を見つけるのに苦労することがあります。IDE に表示されない場合は、手動で追加してください。")]),t._v(" "),s("ul",[s("li",[t._v("デバイスがまだ青色に点滅していない場合は、メインステータス LED が濃い青色に点滅するまで Photon のセットアップボタンを押し続けます。これには約 3 秒かかります。")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(384),alt:"setup button"}})]),t._v(" "),s("ul",[s("li",[t._v("上記の手順に従って Photon の Wi-Fi に接続し、Web ブラウザで "),s("a",{attrs:{href:"http://192.168.0.1/device-id",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://192.168.0.1/device-id"),s("OutboundLink")],1),t._v(" を開きます。そのページには、次のような ID が表示されます：")])]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language- line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('{"id":"30003F000347363339343638","c":"1"}\n')])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br")])]),s("ul",[s("li",[t._v("その ID をメモしてください。あとで使用します")]),t._v(" "),s("li",[s("a",{attrs:{href:"https://build.particle.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("Particle Build"),s("OutboundLink")],1),t._v(" を開き、「Add New Device」をクリックします")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(385),alt:"Particle Build"}})]),t._v(" "),s("ul",[s("li",[t._v("メモしておいたデバイス ID をボックスに入力します。これでデバイスが IDE で使用できるようになります")])])]),t._v(" "),s("h3",{attrs:{id:"_2-particle-build-について学ぶ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-particle-build-について学ぶ"}},[t._v("#")]),t._v(" 2. Particle Build について学ぶ")]),t._v(" "),s("p",[t._v("Photon のアカウントはすでに作成しており、ログインしているはずです（ログインしていない場合は、"),s("a",{attrs:{href:"https://login.particle.io/login",target:"_blank",rel:"noopener noreferrer"}},[t._v("ここからログインしてください"),s("OutboundLink")],1),t._v("）\nこれで "),s("a",{attrs:{href:"https://build.particle.io/build/new",target:"_blank",rel:"noopener noreferrer"}},[t._v("Particle Build"),s("OutboundLink")],1),t._v(" に移動できます。左のバーの下部にある下から 3 番目のアイコンをクリックして、デバイスがリストされていることを確認します。スターがついていることを確認します（スターがついていない場合はスターをクリックします） —Wi-Fi 経由でこのデバイスにコードをフラッシュします。")]),t._v(" "),s("p",[t._v("Particle Build を見てみましょう。これはブラウザベースの IDE であり、ブラウザから左側で選択した Photon デバイスにコードを「フラッシュ」、つまり公開できます。")]),t._v(" "),s("p",[s("img",{attrs:{src:n(386),alt:"Particle Build"}})]),t._v(" "),s("p",[t._v("現在、この新しいファイルには、setup() と loop() 関数以外は何もありません。このファイルにコードを追加してみましょう。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),s("p",[t._v("Photon は基本的に Wi-Fi 接続された Arduino であるため、Arduino 開発の経験があれば、このコードはなじみ深いものになります。Arduino の「スケッチ」、つまりハードウェアデバイスに書き込まれるファームウェアは、一般的に C または C++ で書かれています。はんだ付けや余分な配線を避けて、デバイスの中央の LED ライトを制御するための C++ コードを少し書きます。ただし、Particle キットにはいくつかの追加機能が付属しているので、後でもっと自由に探ってみてください！")])]),t._v(" "),s("p",[t._v("現時点では、Photon は中央の LED が点灯しており、すべてが順調に進んでいる場合は、「青くピカピカしている」か、緑がかった青色のパルスを発しているはずです。いくつかのコードをフラッシュして、中央のライトを白くしましょう。")]),t._v(" "),s("h3",{attrs:{id:"_3-いくつかのコードをフラッシュする"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-いくつかのコードをフラッシュする"}},[t._v("#")]),t._v(" 3. いくつかのコードをフラッシュする")]),t._v(" "),s("p",[t._v("Build IDE の右側に、いくつかのコード行を含む黒いウィンドウが表示されます。loop() 関数の波かっこ内に、次のコードを貼り付けます：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_WHITE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br")])]),s("p",[t._v("このコードは、Particle API を使用して中央の RGB LED の制御を取得し、その色を変更してから、制御を放棄します。")]),t._v(" "),s("p",[t._v("この新しいファイルは、Particle Build では「アプリ」と見なされます。アプリのコードをスター付きのデバイスにフラッシュする前に、左側のパネルで名前を付ける必要があります。")]),t._v(" "),s("p",[s("img",{attrs:{src:n(387),alt:"build"}})]),t._v(" "),s("p",[t._v("Particle Build の左側のナビゲーションストリップにあるフォルダアイコンをクリックして、変更を保存します。その上にある、丸で囲まれたチェックマークをクリックして、コードを「確認」します。これは基本的にコードをテストして、コンパイルできることを確認しています。最後に、Photon にスターが付けられていることを確認し、上部の稲妻アイコンをクリックして、このコードをデバイスにフラッシュします。Photon が更新され、いくつかの色が数秒間点滅した後、中央の LED が白色に変わるはずです。コードをループ関数に配置しているので、白のままです。")]),t._v(" "),s("p",[t._v("このスニペットを少しいじってみてください。LED を赤くできますか？")]),t._v(" "),s("h3",{attrs:{id:"_4-photon-コードを完成させる"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-photon-コードを完成させる"}},[t._v("#")]),t._v(" 4. Photon コードを完成させる")]),t._v(" "),s("p",[t._v("私たちのモバイルアプリでは、LED ライトの 3 つの「モード」を作成します —LED がレインボーシリーズを点滅させる「レインボーモード」、LED が青と白を交互に点滅させる「ユニコーンモード」、そして「停止」モードで LED が白色に留まります。")]),t._v(" "),s("p",[t._v("ご想像のとおり、これらのルーチンを loop() 関数に配置します。")]),t._v(" "),s("p",[t._v("このファイルの先頭に変数を追加し、初期のライトスタイルを 0 にリストします：")]),t._v(" "),s("p",[s("code",[t._v("int style = 0;")])]),t._v(" "),s("p",[t._v("次に、 loop() 関数で、追加したスニペットを次のコードで上書きします：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_WHITE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_RED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1秒遅らせる")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_ORANGE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_YELLOW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_GREEN")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_BLUE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_MAGENTA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通常の操作を再開する")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_WHITE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1秒遅らせる")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_MAGENTA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通常の操作を再開する")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br"),s("span",{staticClass:"line-number"},[t._v("13")]),s("br"),s("span",{staticClass:"line-number"},[t._v("14")]),s("br"),s("span",{staticClass:"line-number"},[t._v("15")]),s("br"),s("span",{staticClass:"line-number"},[t._v("16")]),s("br"),s("span",{staticClass:"line-number"},[t._v("17")]),s("br"),s("span",{staticClass:"line-number"},[t._v("18")]),s("br"),s("span",{staticClass:"line-number"},[t._v("19")]),s("br"),s("span",{staticClass:"line-number"},[t._v("20")]),s("br"),s("span",{staticClass:"line-number"},[t._v("21")]),s("br"),s("span",{staticClass:"line-number"},[t._v("22")]),s("br"),s("span",{staticClass:"line-number"},[t._v("23")]),s("br"),s("span",{staticClass:"line-number"},[t._v("24")]),s("br"),s("span",{staticClass:"line-number"},[t._v("25")]),s("br"),s("span",{staticClass:"line-number"},[t._v("26")]),s("br"),s("span",{staticClass:"line-number"},[t._v("27")]),s("br"),s("span",{staticClass:"line-number"},[t._v("28")]),s("br"),s("span",{staticClass:"line-number"},[t._v("29")]),s("br"),s("span",{staticClass:"line-number"},[t._v("30")]),s("br"),s("span",{staticClass:"line-number"},[t._v("31")]),s("br"),s("span",{staticClass:"line-number"},[t._v("32")]),s("br"),s("span",{staticClass:"line-number"},[t._v("33")]),s("br"),s("span",{staticClass:"line-number"},[t._v("34")]),s("br")])]),s("p",[t._v("このコードを検証し、デバイスにフラッシュします。何も変更されていないようです —スタイルが 0 に設定されているため、まだ白いままです。整数値を 1 に変更して、デバイスにフラッシュし、何が起こるかを見てみましょう。Rainbow が見えますか？")]),t._v(" "),s("p",[t._v("これでスタイルを 0 に戻すことができるので、LED は白で初期化されます：")]),t._v(" "),s("p",[s("code",[t._v("int style = 0;")])]),t._v(" "),s("h3",{attrs:{id:"_5-モバイルアプリで-photon-の-rest-api-を使用する準備をする"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-モバイルアプリで-photon-の-rest-api-を使用する準備をする"}},[t._v("#")]),t._v(" 5. モバイルアプリで Photon の REST API を使用する準備をする")]),t._v(" "),s("p",[t._v("では、Photon のクールな REST API 機能を使用して、モバイルアプリが Photon を制御できるようにする必要があります。これを行うには、次の行を中かっこの間にある setup() 関数に追加します：")]),t._v(" "),s("p",[s("code",[t._v('Particle.function("launchMode",launchMode);')])]),t._v(" "),s("p",[t._v("モバイルアプリから利用できる "),s("code",[t._v("launchMode")]),t._v(" という名前の Particle 関数を追加しました。これは、Photon のコードで同様の名前の関数を呼び出します。")]),t._v(" "),s("p",[t._v("loop() 関数の最後にその関数を追加します：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("int "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("String mode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rainbow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"unicorn"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br")])]),s("p",[t._v("これで、モバイルアプリは内部の "),s("code",[t._v("launchMode")]),t._v(" 関数を呼び出す "),s("code",[t._v("launchMode")]),t._v(" という Particle 関数を呼び出すことができ、LED フラッシュスタイルの制御に使用するモードを示す文字列を渡します。")]),t._v(" "),s("p",[t._v("保存して確認し、このコードをデバイスにフラッシュします。LED は白に戻ります。")]),t._v(" "),s("h3",{attrs:{id:"_6-最終的な-photon-コード"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_6-最終的な-photon-コード"}},[t._v("#")]),t._v(" 6. 最終的な Photon コード")]),t._v(" "),s("p",[t._v("最終的なコードは次のようになります：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("int style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Particle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"launchMode"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("launchMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_WHITE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_RED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1秒遅らせる")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_ORANGE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_YELLOW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_GREEN")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_BLUE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_MAGENTA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通常の操作を再開する")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 色を変える")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_WHITE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1秒遅らせる")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB_COLOR_MAGENTA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通常の操作を再開する")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("control")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\nint "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("String mode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rainbow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"unicorn"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br"),s("span",{staticClass:"line-number"},[t._v("13")]),s("br"),s("span",{staticClass:"line-number"},[t._v("14")]),s("br"),s("span",{staticClass:"line-number"},[t._v("15")]),s("br"),s("span",{staticClass:"line-number"},[t._v("16")]),s("br"),s("span",{staticClass:"line-number"},[t._v("17")]),s("br"),s("span",{staticClass:"line-number"},[t._v("18")]),s("br"),s("span",{staticClass:"line-number"},[t._v("19")]),s("br"),s("span",{staticClass:"line-number"},[t._v("20")]),s("br"),s("span",{staticClass:"line-number"},[t._v("21")]),s("br"),s("span",{staticClass:"line-number"},[t._v("22")]),s("br"),s("span",{staticClass:"line-number"},[t._v("23")]),s("br"),s("span",{staticClass:"line-number"},[t._v("24")]),s("br"),s("span",{staticClass:"line-number"},[t._v("25")]),s("br"),s("span",{staticClass:"line-number"},[t._v("26")]),s("br"),s("span",{staticClass:"line-number"},[t._v("27")]),s("br"),s("span",{staticClass:"line-number"},[t._v("28")]),s("br"),s("span",{staticClass:"line-number"},[t._v("29")]),s("br"),s("span",{staticClass:"line-number"},[t._v("30")]),s("br"),s("span",{staticClass:"line-number"},[t._v("31")]),s("br"),s("span",{staticClass:"line-number"},[t._v("32")]),s("br"),s("span",{staticClass:"line-number"},[t._v("33")]),s("br"),s("span",{staticClass:"line-number"},[t._v("34")]),s("br"),s("span",{staticClass:"line-number"},[t._v("35")]),s("br"),s("span",{staticClass:"line-number"},[t._v("36")]),s("br"),s("span",{staticClass:"line-number"},[t._v("37")]),s("br"),s("span",{staticClass:"line-number"},[t._v("38")]),s("br"),s("span",{staticClass:"line-number"},[t._v("39")]),s("br"),s("span",{staticClass:"line-number"},[t._v("40")]),s("br"),s("span",{staticClass:"line-number"},[t._v("41")]),s("br"),s("span",{staticClass:"line-number"},[t._v("42")]),s("br"),s("span",{staticClass:"line-number"},[t._v("43")]),s("br"),s("span",{staticClass:"line-number"},[t._v("44")]),s("br"),s("span",{staticClass:"line-number"},[t._v("45")]),s("br"),s("span",{staticClass:"line-number"},[t._v("46")]),s("br"),s("span",{staticClass:"line-number"},[t._v("47")]),s("br"),s("span",{staticClass:"line-number"},[t._v("48")]),s("br"),s("span",{staticClass:"line-number"},[t._v("49")]),s("br"),s("span",{staticClass:"line-number"},[t._v("50")]),s("br"),s("span",{staticClass:"line-number"},[t._v("51")]),s("br"),s("span",{staticClass:"line-number"},[t._v("52")]),s("br"),s("span",{staticClass:"line-number"},[t._v("53")]),s("br"),s("span",{staticClass:"line-number"},[t._v("54")]),s("br")])]),s("h2",{attrs:{id:"アプリを-scaffold-する"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#アプリを-scaffold-する"}},[t._v("#")]),t._v(" アプリを Scaffold する")]),t._v(" "),s("p",[t._v("次に、JavaScript を使用してネイティブなモバイルアプリを作成します。NativeScript を使用してアプリを作成します。このアプリは、先ほどフラッシュしたコードを介して Photon と通信します。")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://play.nativescript.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("NativeScript Playground"),s("OutboundLink")],1),t._v(" を開いてみてください。最初の訪問では、いくつかの「コーチマーク」が表示され、主要な機能がある場所が示されます。")]),t._v(" "),s("p",[t._v("「Play Now」をクリックして、メインエディタを開きます。QR コードが表示されます — NativeScriptPlay アプリでスキャンしてください。これにより、コーディング時にスマートフォンを自動的に更新できます。これで、NativeScript-Vue アプリを Scaffold する準備ができました！")]),t._v(" "),s("p",[s("img",{attrs:{src:n(265),alt:"playground"}})]),t._v(" "),s("p",[t._v("デフォルトでは、最初のプレイグラウンドアプリは Angular を使用して作成されます。上部の「new」をクリックし、テンプレートとして「NS-Vue」を選択します。 別の QR コードを取得するので、そのコードをスキャンしてください。スマートフォンが更新され、基本のアプリが表示されます：")]),t._v(" "),s("p",[s("img",{attrs:{src:n(266),alt:"base app"}})]),t._v(" "),s("h2",{attrs:{id:"ベースのマークアップを作成する"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ベースのマークアップを作成する"}},[t._v("#")]),t._v(" ベースのマークアップを作成する")]),t._v(" "),s("p",[s("code",[t._v("template")]),t._v(" で少しだけ XML マークアップを使って、ActionBar、ナビゲーション用の SegmentedBar、そしてタップされると変化するパネルを備えた SegmentedBar のシンプルなレイアウトを構築します。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),s("p",[t._v("NativeScript レイアウトは、Web で作成した HTML とは異なります。GridLayouts や StackLayouts などのネイティブ UI に変換される NativeScript XML マークアップを使用しています。")])]),t._v(" "),s("p",[s("code",[t._v("app/components/HelloWorld.vue")]),t._v(" を開き、テンプレートの "),s("code",[t._v("")]),t._v(" タグの間のすべてを削除して、以下を追加します：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-html line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ActionBar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action-bar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Awesome Photons!"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("StackLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("SegmentedBar")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("backgroundColor")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("blueviolet"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("selectedBackgroundColor")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("hotpink"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("segmentedBarItems"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("selectedBarIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("StackLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100%"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br")])]),s("p",[t._v("バインドされた値 "),s("code",[t._v(":items")]),t._v(" と "),s("code",[t._v("v-model")]),t._v(" がまだ設定されていないため、SegmentedBar はまだ表示されていません。データブロック（テンプレートブロックの下、スクリプトブロック内）を見つけ、 "),s("code",[t._v("data()")]),t._v(" メソッドを上書きして、SegmentedBar の値を追加します。また、デフォルトの SelectedBarIndex を設定し、 "),s("code",[t._v("mode")]),t._v(" のプレースホルダー値を作成します。後者は、バーがタップされたときに UI を変更するために使われます：")]),t._v(" "),s("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),s("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[s("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("segmentedBarItems")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" segmentedBarModule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ui/segmented-bar"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rainbow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("segmentedBarModule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SegmentedBarItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rainbow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Rainbows"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unicorn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("segmentedBarModule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SegmentedBarItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n unicorn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Unicorns"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" stop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("segmentedBarModule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SegmentedBarItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n stop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Stop!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("rainbow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" unicorn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" stop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("selectedBarIndex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br"),s("span",{staticClass:"line-number"},[t._v("13")]),s("br"),s("span",{staticClass:"line-number"},[t._v("14")]),s("br"),s("span",{staticClass:"line-number"},[t._v("15")]),s("br"),s("span",{staticClass:"line-number"},[t._v("16")]),s("br")])]),s("p",[t._v("これで、SegmentedBar がうまく表示されるはずです！")]),t._v(" "),s("h2",{attrs:{id:"css-を追加する"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#css-を追加する"}},[t._v("#")]),t._v(" CSS を追加する")]),t._v(" "),s("p",[t._v("NativeScript は、UI のスタイルを設定するために、通常の CSS および SASS のサブセットをサポートしています。それを活用して UI を改善しましょう。")]),t._v(" "),s("p",[s("code",[t._v(" + diff --git a/de/workshops/react/index.html b/de/workshops/react/index.html index dd23247..b07afb1 100644 --- a/de/workshops/react/index.html +++ b/de/workshops/react/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@
GitHub (opens new window)
- + diff --git a/de/workshops/vue/full-day/appendix_1.html b/de/workshops/vue/full-day/appendix_1.html index 4ee4fb5..2b5c016 100644 --- a/de/workshops/vue/full-day/appendix_1.html +++ b/de/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ - + @@ -53,6 +53,6 @@

- + diff --git a/de/workshops/vue/full-day/ch1.html b/de/workshops/vue/full-day/ch1.html index 53a5c10..9a5f4c1 100644 --- a/de/workshops/vue/full-day/ch1.html +++ b/de/workshops/vue/full-day/ch1.html @@ -8,7 +8,7 @@ - + @@ -544,6 +544,6 @@ →

- + diff --git a/de/workshops/vue/full-day/ch2.html b/de/workshops/vue/full-day/ch2.html index ac9335b..f990106 100644 --- a/de/workshops/vue/full-day/ch2.html +++ b/de/workshops/vue/full-day/ch2.html @@ -8,7 +8,7 @@ - + @@ -585,6 +585,6 @@ →

- + diff --git a/de/workshops/vue/full-day/ch3.html b/de/workshops/vue/full-day/ch3.html index d65c4d0..d697cb1 100644 --- a/de/workshops/vue/full-day/ch3.html +++ b/de/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ - + @@ -226,6 +226,6 @@ →

- + diff --git a/de/workshops/vue/full-day/ch4.html b/de/workshops/vue/full-day/ch4.html index acc12b7..4984119 100644 --- a/de/workshops/vue/full-day/ch4.html +++ b/de/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ - + @@ -730,6 +730,6 @@ →

- + diff --git a/de/workshops/vue/full-day/ch5.html b/de/workshops/vue/full-day/ch5.html index bc58f30..f05a406 100644 --- a/de/workshops/vue/full-day/ch5.html +++ b/de/workshops/vue/full-day/ch5.html @@ -8,7 +8,7 @@ - + @@ -807,6 +807,6 @@ →

- + diff --git a/de/workshops/vue/index.html b/de/workshops/vue/index.html index e484a22..59638df 100644 --- a/de/workshops/vue/index.html +++ b/de/workshops/vue/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Vue Workshops

Vue Vixens

- + diff --git a/fr/index.html b/fr/index.html index ef12c9c..a5141e7 100644 --- a/fr/index.html +++ b/fr/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)
- + diff --git a/fr/workshops/react/index.html b/fr/workshops/react/index.html index 6b414a1..43bff7e 100644 --- a/fr/workshops/react/index.html +++ b/fr/workshops/react/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Ateliers React

React Renards

On arrive bientôt!

- + diff --git a/fr/workshops/vue/index.html b/fr/workshops/vue/index.html index d3f6d53..4a43acb 100644 --- a/fr/workshops/vue/index.html +++ b/fr/workshops/vue/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Ateliers Vue

Vue Vixens

- + diff --git a/fr/workshops/vue/minis/mini1.html b/fr/workshops/vue/minis/mini1.html index ab2b9bf..3248fa3 100644 --- a/fr/workshops/vue/minis/mini1.html +++ b/fr/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ - + @@ -1075,6 +1075,6 @@ transition: transform 0.5s; }
1
2
3
4
5
6
7

💡

Remarquez position: absolute sur les éléments qui partent ! C'est fait pour les retirer du flux naturel, déclenchant la transition de mouvement sur le reste des objets.

Maintenant, notre liste a une belle animation de mouvement après avoir supprimé un de ses éléments !

🎊 Vous avez terminé le supplément 2 ! 🎊

# Auteure

Fait avec ❤️ par Natalia Tepluhina, mis à jour par Jen Looper

- + diff --git a/index.html b/index.html index 3fce9ec..5a9056a 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -55,6 +55,6 @@

# About Our Workshops

Front-End Foxes

Front-End Foxes, formerly known as Vue Vixens, were initiatives created by Jen Looper, currently Head of Academic Advocacy at AWS. Our mission was to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We had chapters worldwide before closing the nonprofit in 2022. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.

These self-driven workshops have helped hundreds of women get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in this article (opens new window).

inaugural skulk in New Orleans

Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018

# FAQ

What's the difference between a Chapter, a 'Mini', and a 'Nano'?

This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.

Why are the chapters broken up into parts?

All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.

I'm a guy. Can I participate?

The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!

Want to contribute? Please make sure to check out our Code of Conduct as well as our Contributing instructions.

MIT Licensed | Copyright 2018-present Front-End Foxes Inc, a 501(c)(3) public charity
- + diff --git a/jp/index.html b/jp/index.html index ee6d613..34973ab 100644 --- a/jp/index.html +++ b/jp/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Vue Vixens のワークショップについて

Vue Vixens は、 Microsoft (opens new window) の Cloud Developer Advocate Lead である Jen Looper が始めた取り組みです。 Vue Vixens のミッションは、ワークショップを開催して女性に Vue.js をかっこよく・楽しく教えることです。Shmuela Jacobs が切り開いた Angular コミュニティ ng-girls.org (opens new window) のモデルに基づいています。 その Ng-Girls は Rails Bridge と Django Girls に影響を受けています。

ワークショップだけではありません

私たちは Full day ワークショップを開催するだけでなく、各カンファレンスのダイバーシティ関連のオファーも受けています。ご興味のある方は info@vuevixens.org にご連絡ください。また、世界中で支部を展開しています。（ VueVixens.org (opens new window) ）

# FAQ

男性は参加できますか？

このプログラムのゴールは、女性に Vue.js を使った Web・モバイルのプログラミングの概念に慣れ親しんでもらうことです。ただし経験豊富な Vue 開発者の方からの奨学資金支援、ワークショップへのメンター参加、コンテンツ提供は大歓迎です。私たちはあらゆる支援に感謝しています！

- + diff --git a/jp/workshops/react/index.html b/jp/workshops/react/index.html index f0186c5..9cd4a96 100644 --- a/jp/workshops/react/index.html +++ b/jp/workshops/react/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# React Workshops

React Renards

Stay tuned!

- + diff --git a/jp/workshops/vue/full-day/appendix_1.html b/jp/workshops/vue/full-day/appendix_1.html index 8029f02..1558091 100644 --- a/jp/workshops/vue/full-day/appendix_1.html +++ b/jp/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# 🤷 Appendix 1: Lost? Confused? Starting fresh?

Don't worry! At the beginning of each chapter, you are given a link to start fresh with a new sandbox. Below are instructions on how to create a new sandbox with this Github repo link.

All the chapter links are kept here (opens new window) - pick your chapter by saving its URL. For example, the downloadable link for Chapter 1 is https://github.com/frontendfoxes/projects/tree/main/chapter-1-end (opens new window).

💡

Ensure that you are logged into CodeSandbox.io so that you are able to keep your sandboxes in your account.

Step 1: First, create a new Sandbox in CodeSandbox.io by clicking 'Create New Sandbox' on the homepage and then clicking the 'import from Github' link at the bottom left.

Step 1

Step 2: Next, paste the URL of the appropriate Github repo from the VueVixens Projects folder into the top field.

Step 2

Step 3: Your sandbox will be scaffolded and ready to use!

Step 3

- + diff --git a/jp/workshops/vue/full-day/ch3.html b/jp/workshops/vue/full-day/ch3.html index a11bb94..e4b0447 100644 --- a/jp/workshops/vue/full-day/ch3.html +++ b/jp/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ - + @@ -267,6 +267,6 @@ ); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Now we initially see empty dog portraits and then images are loaded from the API. Progress!

# Final result

chapter 3 result

- + diff --git a/jp/workshops/vue/full-day/ch4.html b/jp/workshops/vue/full-day/ch4.html index 519a8fa..a0eb986 100644 --- a/jp/workshops/vue/full-day/ch4.html +++ b/jp/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ - + @@ -726,6 +726,6 @@ →

- + diff --git a/jp/workshops/vue/index.html b/jp/workshops/vue/index.html index 22da00d..686ae6b 100644 --- a/jp/workshops/vue/index.html +++ b/jp/workshops/vue/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Vue Workshops

Vue Vixens

- + diff --git a/jp/workshops/vue/minis/mini1.html b/jp/workshops/vue/minis/mini1.html index 1bc5d48..58a03ac 100644 --- a/jp/workshops/vue/minis/mini1.html +++ b/jp/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ - + @@ -1124,6 +1124,6 @@ →

- + diff --git a/jp/workshops/vue/minis/mini2.html b/jp/workshops/vue/minis/mini2.html index 5c189e1..719397f 100644 --- a/jp/workshops/vue/minis/mini2.html +++ b/jp/workshops/vue/minis/mini2.html @@ -8,7 +8,7 @@ - + @@ -331,6 +331,6 @@ →

- + diff --git a/jp/workshops/vue/minis/mini3.html b/jp/workshops/vue/minis/mini3.html index 8d7000d..a26ff67 100644 --- a/jp/workshops/vue/minis/mini3.html +++ b/jp/workshops/vue/minis/mini3.html @@ -8,7 +8,7 @@ - + @@ -572,6 +572,6 @@ →

- + diff --git a/jp/workshops/vue/minis/mini4.html b/jp/workshops/vue/minis/mini4.html index fdd016a..3bfe07e 100644 --- a/jp/workshops/vue/minis/mini4.html +++ b/jp/workshops/vue/minis/mini4.html @@ -8,7 +8,7 @@ - + @@ -323,6 +323,6 @@ →

- + diff --git a/jp/workshops/vue/nanos/nano2.html b/jp/workshops/vue/nanos/nano2.html index 6a521a3..7351c04 100644 --- a/jp/workshops/vue/nanos/nano2.html +++ b/jp/workshops/vue/nanos/nano2.html @@ -8,7 +8,7 @@ - + @@ -282,6 +282,6 @@ →

- + diff --git a/jp/workshops/vue/nanos/nano3.html b/jp/workshops/vue/nanos/nano3.html index 4d13fe6..3eec336 100644 --- a/jp/workshops/vue/nanos/nano3.html +++ b/jp/workshops/vue/nanos/nano3.html @@ -8,7 +8,7 @@ - + @@ -124,6 +124,6 @@ →

- + diff --git a/jp/workshops/vue/nanos/nano6.html b/jp/workshops/vue/nanos/nano6.html index 08a1606..c748d66 100644 --- a/jp/workshops/vue/nanos/nano6.html +++ b/jp/workshops/vue/nanos/nano6.html @@ -8,7 +8,7 @@ - + @@ -286,6 +286,6 @@

- + diff --git a/workshops/CODE_OF_CONDUCT.html b/workshops/CODE_OF_CONDUCT.html index f277b67..94d97dc 100644 --- a/workshops/CODE_OF_CONDUCT.html +++ b/workshops/CODE_OF_CONDUCT.html @@ -8,7 +8,7 @@ - + @@ -51,6 +51,6 @@ (opens new window)

# Code of Conduct

# 1. Purpose

This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.

We invite all those who participate in Front-End Foxes activities to help us create safe and positive experiences for everyone.

# 2. Open Source Citizenship

A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.

Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.

If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know.

# 3. Expected Behavior

The following behaviors are expected and requested of all community members:

# 4. Unacceptable Behavior

The following behaviors are considered harassment and are unacceptable within our community:

# 5. Consequences of Unacceptable Behavior

Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.

Anyone asked to stop unacceptable behavior is expected to comply immediately.

If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event).

# 6. Reporting Guidelines

If you are subject to or witness unacceptable behavior, or have any other concerns, please fill out this form: https://forms.gle/RWsQQMbG2rGHG9Wh7

Our Code of Conduct committee members are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. Please reach out to us directly at coc@frontendfoxes.org.

# 7. Addressing Grievances

If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify community organizers with a concise description of your grievance by email via coc@frontendfoxes.org. Your grievance will be handled in accordance with our existing governing policies.

# 8. Scope

We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business.

This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members.

# 9. Contact info

Reach out to us directly at coc@frontendfoxes.org with any questions. To report an incident, please us this form: https://forms.gle/RWsQQMbG2rGHG9Wh7 We abide by our community Accountability Ladder: https://github.com/frontendfoxes/accountability-ladder/blob/main/README.md

# 10. License and attribution

This Code of Conduct is distributed under a Creative Commons Attribution-ShareAlike license (opens new window).

Portions of text derived from the Django Code of Conduct (opens new window) and the Geek Feminism Anti-Harassment Policy (opens new window).

Retrieved on November 22, 2016 from http://citizencodeofconduct.org/ (opens new window)

- + diff --git a/workshops/TEAM.html b/workshops/TEAM.html index 1ba080a..7541ef9 100644 --- a/workshops/TEAM.html +++ b/workshops/TEAM.html @@ -8,7 +8,7 @@ - + @@ -48,7 +48,7 @@ 日本語 GitHub - (opens new window)

# Contributors ✨

Thanks goes to these wonderful people (emoji key (opens new window)):


Jen Looper
📖
Natalia Tepluhina
📖
Marina Mosti
📖
Egwuenu Gift
📖
Victoria Bergquist
📖
Robert Willemelis
📖
Mary
📖

John Papa
📖
Marjorie Roswell
📖
elstamey
📖
Stanimira Vlaeva
📖
Sara Vieira
📖
Jennifer Bland
📖
madelynpapa
📖

Matija Komorcec
📖
Vivek Patel
📖
Tara Z. Manicsic
📖
Tsvetelina Ivanova
📖
Burton
📖
Radhika Morabia
📖
Novella C.
📖

Rik de Groot
📖
Gloria Morales
📖
Anett Gesierich
📖
Nayara Alves
📖
Super Diana
📖
Vanessa Böhner
📖
arienlys
📖

Elke Heymans
📖
Lady Mashiro
📖
Max Gfeller
📖
Nahoko Matsui
📖
rry
📖
chisaco
📖
Kazumi OHIRA (@dz_)
📖

Mary
📖
Dylan Broussard
📖
Farhia
📖

This project follows the all-contributors (opens new window) specification. Contributions of any kind welcome!

- + (opens new window)

# Contributors ✨

Thanks goes to these wonderful people (emoji key (opens new window)):


Jen Looper
📖
Natalia Tepluhina
📖
Marina Mosti
📖
Egwuenu Gift
📖
Victoria Bergquist
📖
Mary
📖

Marjorie Roswell
📖
elstamey
📖
Stanimira Vlaeva
📖
Sara Vieira
📖
Jennifer Bland
📖
Matija Komorcec
📖

Vivek Patel
📖
Tara Z. Manicsic
📖
Tsvetelina Ivanova
📖
Burton
📖
Radhika Morabia
📖
Novella C.
📖

Rik de Groot
📖
Gloria Morales
📖
Anett Gesierich
📖
Nayara Alves
📖
Super Diana
📖
Vanessa Böhner
📖

Elke Heymans
📖
Lady Mashiro
📖
Max Gfeller
📖
Nahoko Matsui
📖
rry
📖
chisaco
📖

Mary
📖
Dylan Broussard
📖
Farhia
📖
Kazumi OHIRA (@dz_)
📖

This project follows the all-contributors (opens new window) specification. Contributions of any kind welcome!

+ diff --git a/workshops/index.html b/workshops/index.html index a39a511..9e60c11 100644 --- a/workshops/index.html +++ b/workshops/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# About Our Workshops

Front-End Foxes

Front-End Foxes and its sub-group, Vue Vixens, are initiatives created by Jen Looper, a Cloud Developer Advocate Lead at Microsoft (opens new window). Our mission is to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We have chapters worldwide; find us at FrontEndFoxes.org (opens new window). Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.

These self-driven workshops are designed to help people get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in this article (opens new window).

inaugural skulk in New Orleans

Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018

# FAQ

What's the difference between a Chapter, a 'Mini', and a 'Nano'?

This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.

Why are the chapters broken up into parts?

All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.

Where can I register for a skulk?

Workshop attendees and mentors can register for events at FrontEndFoxes.org (opens new window). Keep an eye on our Twitter feeds @vuevixens (opens new window) and @frontendfoxes (opens new window) for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.

I'm a guy. Can I participate?

The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!

Want to contribute? Please make sure to check out our Code of Conduct.

- + diff --git a/workshops/react/index.html b/workshops/react/index.html index db6d009..69ac876 100644 --- a/workshops/react/index.html +++ b/workshops/react/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# React Workshops

Stay tuned!

- + diff --git a/workshops/react/minis/ecommerce.html b/workshops/react/minis/ecommerce.html index 14428c8..c210031 100644 --- a/workshops/react/minis/ecommerce.html +++ b/workshops/react/minis/ecommerce.html @@ -8,7 +8,7 @@ - + @@ -719,6 +719,6 @@ export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# Conclusion

Awesome, there you have it! You have just created a e-commerce React application listing products on from an API backend! The next steps would be to add cart and checkout functionality to your application. Stay tuned for follow up workshops!

# Author

Made with ❤️ by Jaeriah Tay

- + diff --git a/workshops/react/minis/mini1-react.html b/workshops/react/minis/mini1-react.html index ccf8f69..2680bf9 100644 --- a/workshops/react/minis/mini1-react.html +++ b/workshops/react/minis/mini1-react.html @@ -8,7 +8,7 @@ - + @@ -1241,6 +1241,6 @@ Made with ❤️ by Natalia Tepluhina, updated by Jen Looper and migrated to React by SuperDiana!
1
2
3
4
5
6
7
8
9
10
- + diff --git a/workshops/react/minis/mini2-react-hooks.html b/workshops/react/minis/mini2-react-hooks.html index c60c158..586ad76 100644 --- a/workshops/react/minis/mini2-react-hooks.html +++ b/workshops/react/minis/mini2-react-hooks.html @@ -8,7 +8,7 @@ - + @@ -1187,6 +1187,6 @@ Copy
1
- + diff --git a/workshops/templates/mini_template.html b/workshops/templates/mini_template.html index 4d3d7dd..7329046 100644 --- a/workshops/templates/mini_template.html +++ b/workshops/templates/mini_template.html @@ -8,7 +8,7 @@ - + @@ -114,6 +114,6 @@ } }).$start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Add a screenshot of the final result

The final app looks like this:

(your screenshot here)

# Conclusion and challenge

# Author

Made with ❤️ by your name

- + diff --git a/workshops/templates/nano_template.html b/workshops/templates/nano_template.html index 1dd3af5..e0baa27 100644 --- a/workshops/templates/nano_template.html +++ b/workshops/templates/nano_template.html @@ -8,7 +8,7 @@ - + @@ -114,6 +114,6 @@ } }).$start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Add a screenshot of the final result

The final app looks like this:

(your screenshot here)

# Conclusion and challenge

Add a challenge at the end so the student can go home and continue working

# Badge

Add the badge image here, available for download

# Author

Made with ❤️ by your name

- + diff --git a/workshops/vue/full-day/appendix_1.html b/workshops/vue/full-day/appendix_1.html index dd24012..b77104f 100644 --- a/workshops/vue/full-day/appendix_1.html +++ b/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ - + @@ -57,6 +57,6 @@ →

- + diff --git a/workshops/vue/full-day/appendix_2.html b/workshops/vue/full-day/appendix_2.html index 5eb6000..a8ad052 100644 --- a/workshops/vue/full-day/appendix_2.html +++ b/workshops/vue/full-day/appendix_2.html @@ -8,7 +8,7 @@ - + @@ -57,6 +57,6 @@ →

- + diff --git a/workshops/vue/full-day/ch1.html b/workshops/vue/full-day/ch1.html index 0603bdb..5705f3d 100644 --- a/workshops/vue/full-day/ch1.html +++ b/workshops/vue/full-day/ch1.html @@ -8,7 +8,7 @@ - + @@ -542,6 +542,6 @@ →

- + diff --git a/workshops/vue/full-day/ch2.html b/workshops/vue/full-day/ch2.html index 858184b..14c32a7 100644 --- a/workshops/vue/full-day/ch2.html +++ b/workshops/vue/full-day/ch2.html @@ -8,7 +8,7 @@ - + @@ -583,6 +583,6 @@ →

- + diff --git a/workshops/vue/full-day/ch3.html b/workshops/vue/full-day/ch3.html index f9158e7..c0df9fa 100644 --- a/workshops/vue/full-day/ch3.html +++ b/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ - + @@ -275,6 +275,6 @@ →

- + diff --git a/workshops/vue/full-day/ch4.html b/workshops/vue/full-day/ch4.html index 8241f8c..75bcedf 100644 --- a/workshops/vue/full-day/ch4.html +++ b/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ - + @@ -729,6 +729,6 @@ →

- + diff --git a/workshops/vue/full-day/ch5.html b/workshops/vue/full-day/ch5.html index 4a31316..29a0c3d 100644 --- a/workshops/vue/full-day/ch5.html +++ b/workshops/vue/full-day/ch5.html @@ -8,7 +8,7 @@ - + @@ -806,6 +806,6 @@ →

- + diff --git a/workshops/vue/half-day/half-day1.html b/workshops/vue/half-day/half-day1.html index f22bb6a..94e2a59 100644 --- a/workshops/vue/half-day/half-day1.html +++ b/workshops/vue/half-day/half-day1.html @@ -8,7 +8,7 @@ - + @@ -2079,6 +2079,6 @@ →

- + diff --git a/workshops/vue/index.html b/workshops/vue/index.html index 1119c96..ceb7b67 100644 --- a/workshops/vue/index.html +++ b/workshops/vue/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ GitHub (opens new window)

# Vue Workshops

- + diff --git a/workshops/vue/minis/mini1.html b/workshops/vue/minis/mini1.html index adec629..d49a4b6 100644 --- a/workshops/vue/minis/mini1.html +++ b/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ - + @@ -1080,6 +1080,6 @@ →

- + diff --git a/workshops/vue/minis/mini2-vue2-options.html b/workshops/vue/minis/mini2-vue2-options.html index 9f45f22..4584354 100644 --- a/workshops/vue/minis/mini2-vue2-options.html +++ b/workshops/vue/minis/mini2-vue2-options.html @@ -8,7 +8,7 @@ - + @@ -1030,6 +1030,6 @@ →

- + diff --git a/workshops/vue/minis/mini2-vue3-composition.html b/workshops/vue/minis/mini2-vue3-composition.html index f9ef5af..6b5058d 100644 --- a/workshops/vue/minis/mini2-vue3-composition.html +++ b/workshops/vue/minis/mini2-vue3-composition.html @@ -8,7 +8,7 @@ - + @@ -964,6 +964,6 @@ →

- + diff --git a/workshops/vue/minis/mini3.html b/workshops/vue/minis/mini3.html index bef87ff..679d309 100644 --- a/workshops/vue/minis/mini3.html +++ b/workshops/vue/minis/mini3.html @@ -8,7 +8,7 @@ - + @@ -331,6 +331,6 @@ →

- + diff --git a/workshops/vue/minis/mini4.html b/workshops/vue/minis/mini4.html index e9cc794..4afc4dc 100644 --- a/workshops/vue/minis/mini4.html +++ b/workshops/vue/minis/mini4.html @@ -8,7 +8,7 @@ - + @@ -565,6 +565,6 @@ →

- + diff --git a/workshops/vue/minis/mini5.html b/workshops/vue/minis/mini5.html index 5abdd19..6cee07c 100644 --- a/workshops/vue/minis/mini5.html +++ b/workshops/vue/minis/mini5.html @@ -8,7 +8,7 @@ - + @@ -323,6 +323,6 @@ →

- + diff --git a/workshops/vue/minis/mini6.html b/workshops/vue/minis/mini6.html index 654a311..16c6838 100644 --- a/workshops/vue/minis/mini6.html +++ b/workshops/vue/minis/mini6.html @@ -8,7 +8,7 @@ - + @@ -57,6 +57,6 @@ →

- + diff --git a/workshops/vue/minis/mini7.html b/workshops/vue/minis/mini7.html index dec60de..aa7dbfc 100644 --- a/workshops/vue/minis/mini7.html +++ b/workshops/vue/minis/mini7.html @@ -8,7 +8,7 @@ - + @@ -1442,6 +1442,6 @@ } // ...
1
2
3
4
5
6
7
8
9
10
11
12

# Achievement

That's it!

You've completed your very first Harry Potter movie quiz app with Vue.js!

Well done 😃

Score

# Author

Made with ❤️ by Mary Vokicic with support from Ilithya and Steffanie Stoppel

# Appendix 2: Add your CodeSandbox to your Github account.

If you login to CodeSandbox using your GitHub account, you can save your project to a new repository and keep it in sync with CodeSandbox.

# Instructions

Step 1: In CodeSandbox, click the Github icon in the sidebar, and grant permissions if necessary.

Step 2: Enter a name for your repository.

Step 3: Click create repository.

- + diff --git a/workshops/vue/nanos/nano1.html b/workshops/vue/nanos/nano1.html index 685d6b0..4898d16 100644 --- a/workshops/vue/nanos/nano1.html +++ b/workshops/vue/nanos/nano1.html @@ -8,7 +8,7 @@ - + @@ -339,6 +339,6 @@ →

- + diff --git a/workshops/vue/nanos/nano2.html b/workshops/vue/nanos/nano2.html index 090027b..9b7b08e 100644 --- a/workshops/vue/nanos/nano2.html +++ b/workshops/vue/nanos/nano2.html @@ -8,7 +8,7 @@ - + @@ -280,6 +280,6 @@ →

- + diff --git a/workshops/vue/nanos/nano3.html b/workshops/vue/nanos/nano3.html index 0804429..8726252 100644 --- a/workshops/vue/nanos/nano3.html +++ b/workshops/vue/nanos/nano3.html @@ -8,7 +8,7 @@ - + @@ -121,6 +121,6 @@ →

- + diff --git a/workshops/vue/nanos/nano4.html b/workshops/vue/nanos/nano4.html index ce84f8c..6cb7991 100644 --- a/workshops/vue/nanos/nano4.html +++ b/workshops/vue/nanos/nano4.html @@ -8,7 +8,7 @@ - + @@ -249,6 +249,6 @@ →

- + diff --git a/workshops/vue/nanos/nano5.html b/workshops/vue/nanos/nano5.html index ebeeb02..e323bd8 100644 --- a/workshops/vue/nanos/nano5.html +++ b/workshops/vue/nanos/nano5.html @@ -8,7 +8,7 @@ - + @@ -175,6 +175,6 @@ →

- + diff --git a/workshops/vue/nanos/nano6.html b/workshops/vue/nanos/nano6.html index 29bd284..5765d6e 100644 --- a/workshops/vue/nanos/nano6.html +++ b/workshops/vue/nanos/nano6.html @@ -8,7 +8,7 @@ - + @@ -284,6 +284,6 @@

- +