見出し画像

補足 開発環境インストール(画像編③新)

eclipse からvisual code editorになり、プロジェクト作成についてもだいぶ仕様が変わったので、こちらに環境開発の一部として書きおきます。
ちなみに、公式の通りにやると動きません。

前回。

せっかくなので、一緒にやってくれる人がいたらと思いプロジェクト作成を書きます。

インストールする手順を一つずつ画像に撮ってみました。
環境はM1 Mac mini Monterey12.2.1 です。

画像1

⌘ Shift P。コマンドパレットを開きます。適当な名前(今回はTestWatchFaceとしてみました)をつけてEnter。

今回は試しでWatchFaceにします。templateはsimpleで。APIは3.1.0にしました。この辺は公式と同じです。

画像2

スクリーンショット 2022-02-16 19.39.43

スクリーンショット 2022-02-16 19.47.55

スクリーンショット 2022-02-16 19.49.09

スクリーンショット 2022-02-16 19.49.33

プロジェクトを保存するフォルダを選択します。私はMonkeyCCodingという名前のフォルダを作ってその中にいろいろなプロジェクトを全てしまうことにしました。

スクリーンショット 2022-02-16 19.49.58

そうするとこういう画面になるはずです。プロジェクトが作れました!

スクリーンショット 2022-02-16 19.58.06

さてここからが問題です。公式通りそのままCtrl+F5を押しても

You don't have an extension for debugging XML. Should we find a XML extension in the Marketplace?

画像9

とエラーが出ます。これは初期設定だとどこで(どのブラウザで)動かすか設定を記述したファイルが作られないためです。Monkey Cでテストを動かしますよ、とVC Editorに教えてあげる必要があります。

スクリーンショット 2022-02-16 19.56.22

Run > Add Configuration > Monkey Cと選択します。「launch.json」というファイルが作られたのがわかるはずです。

スクリーンショット 2022-02-16 19.58.31

これで走らせて以下のエラーが出た場合は、

No devices available to build for TestWatchFace. Download devices using the SDK Manager.

スクリーンショット 2022-02-16 19.58.50

SDKを使ってきちんとデバイスをインストールできていることを確認したら(全部インストールしてある必要はないです。)

画像13

コマンドパレット(⌘+Shift+P)からMonkeyと入力して、

Set Products by Product Category

を選びましょう。

スクリーンショット 2022-02-16 20.04.08

スクリーンショット 2022-02-16 20.08.37

そうすると、manifest.xml上に<iq:products>という項目があり、
その中身が増えていることがわかるでしょうか。

スクリーンショット 2022-02-16 20.09.05

これでやっとRunできます。Ctrl+F5かコマンドパレットからRun Testで

画像18

試してみたいデバイスの名前を選択します。私はVenuSQを使っているのでこちらを。

画像17

しばらく待ちますが、以下のようなシミュレーション画面が出ればおっけーです!

スクリーンショット 2022-02-16 20.12.19

お疲れ様でした。

この記事が気に入ったらサポートをしてみませんか?