Technical Information/GR-CITRUS

Edit  

VSCode版Rubicの導入方法

2017/05/30

【お知らせ】 2017/10/05
正式リリースの直前バージョンの情報がたろサさんのブログでまとめられています。下記のリンクを参照してください。

mruby搭載ボードGR-CITRUSでRuby言語を使っみよう
1.初めてのRubyプログラム

  1. 1.1.Visual Studio Codeのインストール
  2. 拡張機能 Rubicのインストール
  3. 初めてのRubyプログラム
    1. 新規Rubyプログラムの開始
    2. GR-CITRUSのセットアップ
    3. RubyプログラムをGR-CITRUSで動かす

【お断り】

ここで紹介しているRubicは正式発表前のバージョンですので、カタログやライブラリなどがプレビュー版のままです。とにかくすぐにVSCode版Rubicを使ってみたい!という方のための説明ですのでご注意ください。 Windows7 Pro 32bit, Windows10 Pro 32bit のPC環境で動作を確認済みです。

  1. VSCodeをインストールします。
  2. Rubic をインストールして初期設定を行います。
    • VSCodeを起動し、メニューバーより「拡張機能」をクリックします。
      WS000254.PNG

    • 検索ダイアログに「Rubic」と入力し、拡張機能を検索します。カタログに現れた Rubic をインストールします。
      WS000255.PNG

    • 再度読み込みボタンを押して、Rubicを有効にします。
      WS000256.PNG

    • ダイアログが表示されるので、「ウィンドウの再度読み込み」を押します。これでRubicが有効になります。
      WS000257.PNG

    • mrubyのプロジェクト用に空フォルダを作ります。ここでは、D:\codes\mruby\test01 とします。
    • VSCodeで、「ファイル」-「フォルダを開く」とし、上記で作成したフォルダを開きます。
      WS000259.PNG

      WS000260.PNG

    • ファイル-基本設定-設定を開き、settings.jsonの中のRubicをクリックします。
      WS000261.PNG

      WS000262.PNG

    • 表示される設定項目の中で、
      "rubic.catalog.showPreview": false,
      の行を、 trueに変更します。具体的には、右のペインに表示されているsettings.jsonに、
      "rubic.catalog.showPreview": true
      と入力します。最後に、「ファイル」-「保存」を選択し、この設定ファイルを保存します。(保存しないと、設定が反映されません)
      WS000263.PNG

    • F1を押し、「Rubic」と入力し、検索された「Rubicボードカタログを開く」をクリックします。
      WS000265.PNG

    • 「Rubicボードカタログ」タブを右クリック→「カタログを更新する」をクリックすると、ハードウェアのカタログが更新され、ボード一覧が表示されます。「カタログが更新されました」とメッセージが表示されますので、「閉じる」を押してメッセージを消します。
      WS000267.PNG

      WS000302.PNG

    • 使用したいボードをカタログ内のリストから選択してください。ここでは、GR-CITRUSを選択します。ボードのアイコンの左側に緑色のバーが表示され、選択が反映されます。
      WS000303.PNG

    • 続いて、リポジトリを設定します。現状ではwrbb-v2lib-firmのプレビュー版のみがリストアップされますので、これをクリックして選択します。
      WS000304.PNG

    • つづいて、リリースを選択します。これも Test PreRelease の一つのみリストアップされますので、クリックして選択します。
      WS000305.PNG

    • 続いて、バリエーションを選択します。現状では、 GR-CITRUS と WRBB4 がリストアップされます。CITRUSを使いますので、GR-CITRUSを選択します。
      WS000306.PNG

    • ここまでくると、VSCodeの画面の上側に「ボード構成が変更されました。保存しますか?」とメッセージが表示されるので、「はい」をクリックします。すると、ファームウェアが自動的にダウンロードされ、画面が「接続先とファームウェア」に移行します。
      WS000307.PNG

    • PCのUSBポートにGR-CITRUSを接続したのち、「接続先未選択」のボタンをクリックします。VSCodeの画面の上側に「どのGR-CITRUSを使いますか」とメッセージが表示され、その下に利用可能なCOMポートの一覧が表示されます。GR-CITRUSのCOMポートを選択します。
      WS000309.PNG

      WS000310.PNG

    • 「接続先」に選択したCOMポートが表示されますので、右側の「接続テスト」ボタンを押します。
      WS000311.PNG

    • デバッグコンソールが自動的に開き、テスト結果が表示されます。正常に通信できると、GR-CITRUSのファームウェアバージョンが表示されます。また、VSCodeの画面上にテスト結果のメッセージが表示されます。「閉じる」ボタンを押して、メッセージを消します。(失敗した場合は、COMポートの接続を見直します)
      WS000312.PNG

    • ファームウェアの書き込みもできます。「接続先」の下の「ファームウェア」の項目に「ファームウェアをボードに書き込む」ボタンがありますので、これをクリックします。
      WS000313.PNG

    • VSCodeの画面の上側にメッセージが表示されるので、これに従い書き込み作業を行います。
      WS000314.PNG

      WS000315.PNG

      WS000317.PNG

    • 成功すると、「ファームウェアは正常に書き込まれました」とメッセージが表示されますので、確認後メッセージを消します。以上で開発準備ができました。
      WS000318.PNG

  3. GR-CITRUSにプログラムをダウンロードしてデバッグします。
    • ソースコードを作成してプログラムをGR-CITRUSに書き込みます。まずは、VSCodeで開いたフォルダの直下(ここではTEST01)に、main.rbを作成します。(この場所以外はNGです)具体的には、左サイドのメニューで「エクスプローラー」をクリックしてディレクトリを表示させ、開いているディレクトリ(この例では TEST01 )の上にマウスをフォーカスさせ、「新しいファイル」アイコンをクリックし、ファイ名「main.rb」を入力します。
      WS000319.PNG

      WS000320.PNG

      WS000321.PNG

    • 自動的にmain.rbタブにフォーカスが移動しますので、コードを入力します。
      WS000322.PNG

      #!mruby
      10.times do
          led 0
          delay 500
          led 1
          delay 1000
      end
    • 「デバッグ」-「デバッグの開始」とすると、ソースコードが自動的に保存され、自動コンパイル→自動ダウロード の流れになります。 なお、新規にプロジェクト(TEST01フォルダ)を作成した場合は、「環境の選択」メッセージがVSCode画面上に表示されるので、「Rubicデバッガ」を選択します。その後、もう一度「デバッグ」-「デバッグの開始」の操作をすると、自動コンパイル→自動ダウロードが行われます。
      WS000323.PNG

      WS000324.PNG

    • ダウンロードに成功するとデバッグコンソールが自動的に開き、プログラム終了までデバッグ状態が続きます。プログラムを停止したい場合は、■(停止)ボタンを押します。
      WS000326.PNG

      WS000327.PNG

    • 最終的なプロジェクトフォルダの内容は以下のようになっています。
      WS000301.PNG



    • デバッグは左サイドのメニューからも開始できるみたいです。また、ウィンドウ下部のステータスバーの「GR-CITRUS」をクリックするとRubicボードカタログが表示され、「COMxx」をクリックすると接続先が変更できます。他にもいろいろ機能が隠れていそうです。正式版のリリースが楽しみですね。  以上

トップ   リロード   一覧 単語検索