paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

Raspberry Pi PicoをJavaScriptで制御できるWeb開発環境「Kaluma」を使ってみた!

f:id:paiza:20220202105700j:plain

どうも、まさとらん(@0310lan)です!

今回は、Raspberry Pi Picoを純粋なJavaScriptで制御可能な無料のWebサービスをご紹介します。

OSやデバイスを問わずRaspberry Pi PicoをUSBに挿すだけで、あとはブラウザから専用のWebエディタにアクセスしてプログラミングできるのが大きな特徴です(Chromebookからも利用可能)。

Raspberry Pi Picoは、一般的にC/C++かPythonでの開発が主流なのですが、今回ご紹介するサービスを活用すればJavaScriptをフルに活用できるのでご興味ある方はぜひ参考にしてください。

Kaluma

f:id:paiza:20220202105752j:plain

■「Kaluma」の使い方

それでは、「Kaluma」をどのように使えばいいのか詳しく見ていきましょう!

「Kaluma」は、簡単に言うとマイコン向けのJavaScriptランタイムを提供するサービスです。現在はRaspberry Pi Picoにも搭載されている「RP2040」というマイコンチップを搭載したボードをサポートしています。

「Kaluma」を利用するには初回のみ初期設定が必要です。といっても作業は簡単で、UF2形式のファイルで配布されているファームウェアをRaspberry Pi Picoにドラッグ&ドロップするだけです。


そこで、まずはサイトにアクセスして【Download】ボタンをクリックしましょう。

f:id:paiza:20220202105816j:plain


続けて【Download UF2】ボタンをクリックします。

f:id:paiza:20220202105829j:plain

「Kaluma」のファームウェアが入ったUF2形式のファイルが自動的にダウンロードされます。

あとはRaspberry Pi Picoに書き込むだけです!


Raspberry Pi PicoはUSBで簡単にPCなどへ接続できます。ただし、今回はファームウェアを書き換えるため、「BOOTSEL」ボタンを押したままUSBに接続しましょう。

f:id:paiza:20220202105845j:plain


接続先はPCで問題ありませんが、Raspberry Piでも可能です。

f:id:paiza:20220202105900j:plain

(※接続したら「BOOTSEL」ボタンを離しても大丈夫です)


「RPI-RP2」という名称のストレージデバイスとして認識されます。

f:id:paiza:20220202105916j:plain


さきほどダウンロードしたUF2ファイルを、Raspberry Pi Picoのストレージへドラッグ&ドロップしてください。

f:id:paiza:20220202105936j:plain

Raspberry Pi Picoは自動的に再起動してファームウェアが書き込まれます。

これで準備は完了です!


さっそく「Kaluma」が提供しているWebエディタを利用してみましょう。以下のリンクからアクセスしてください。

<参考リンク>

f:id:paiza:20220202110011j:plain

このエディタでJavaScriptを使ったプログラミングが実行できるようになります。

■Webエディタの基本的な使い方

「Kaluma」のWebエディタを利用するには、まず最初にRaspberry Pi Picoとの通信設定を行う必要があります。

画面右上の「Disconnected」と表示されている箇所をクリックしてください。

f:id:paiza:20220202110031j:plain


ポップアップが表示されて、接続するデバイスのリストが表示されます。そこで、Raspberry Pi Picoを選択して【接続】ボタンをクリックしましょう。

f:id:paiza:20220202110043j:plain

(※もし、Picoがリストにない場合はもう1度USBの再接続を試してください)


接続に成功したらターミナルにログが表示されます。

f:id:paiza:20220202110059p:plain


Webエディタのメイン画面は、大きく2つに分けることができます。

f:id:paiza:20220202110111j:plain


コードエディタは実際にJavaScriptでプログラミングを行う画面であり、設定からフォントサイズ、インデント、行番号、Lintingを調節可能です。

f:id:paiza:20220202110120j:plain


ターミナルは簡易的なものですが、あらかじめよく使われるコマンドをいくつか提供しています。

f:id:paiza:20220202110132j:plain

ただし通常のコマンドと少し違い、例えばファイルのリストを表示するには「ls」ではなく「.ls」のように「.」を先頭に付与する点に注意しましょう。

「Kaluma」のWebエディタはこのままでも利用可能ですが、無料のユーザー登録をするとプログラムの保存やプロジェクトの公開などが出来るので便利です(※ユーザー登録をしなくてもプログラムを書いて実行することはできます)。


ユーザー登録を行う場合は画面上部にある【Sign In】ボタンをクリックします。

f:id:paiza:20220202110148j:plain


ログイン画面が表示されたら、【Sign up】のリンクをクリックしましょう。

f:id:paiza:20220202110214j:plain


ユーザー名、メールアドレス、パスワードを設定してからボタンをクリックします。

f:id:paiza:20220202110228j:plain

登録したメールアドレス宛に認証用のリンクが送付されるので、それをクリックすればユーザー登録は完了です。

■JavaScriptでLチカをやってみよう!

それでは、「Kaluma」のWebエディタを利用して簡単なJavaScriptプログラムを書いてみましょう。内容はお馴染みの「Lチカ」で、Raspberry Pi Picoに搭載されているLEDを1秒間隔で点滅するプログラムを作成します。

まず大前提として、Raspberry Pi PicoのLEDを点灯させる方法について解説しておきます。

LEDは「GPIO25」に電気を流すと点灯するのですが、プログラムの書き方としては最初に出力モードにしておく必要があります。

「Kaluma」にはあらかじめ便利なJavaScriptの関数が提供されており、例えば出力モードを設定するにはpinMode()という関数を次のように記述します。

pinMode(25, OUTPUT);

第1引数に対象となるGPIOの番号を指定し、第2引数に出力モードを意味する定数のOUTPUTを設定すればOKです。


そして、GPIO25に電気を流すにはdigitalWrite()という関数を次のように記述します。

digitalWrite(25, HIGH);

こちらも第1引数にGPIOの番号を指定し、第2引数に定数のHIGHを設定するだけです(※LOWを設定するとLEDは消灯します)。

このコードを実行すればRaspberry Pi PicoのLEDは点灯しますが、今回の目的はLEDを1秒間隔で点滅させることでした。


そこで、まずは一定の間隔で繰り返し処理を実行させるようにプログラムを変えてみましょう。これは簡単で、フロントエンドのJavaScriptでもよく使うsetInterval()を次のように記述します。

pinMode(25, OUTPUT);


setInterval(() => {


    // 繰り返し処理


}, 1000);

上記のように記述すれば、繰り返し処理の中でLEDのON / OFFを切り替えればいいですね。


さきほど利用したdigitalWrite()関数を使ってもいいのですが、もっと便利に使える関数が提供されています。それがdigitalToggle()という関数で、引数にGPIOの番号を設定すると現在の状態を逆にしてくれます。

つまり、実行されるたびにLEDをON / OFFしてくれるというわけです。

最終的なソースコードは次のようになります。

pinMode(25, OUTPUT);


setInterval(() => {
    digitalToggle(25);
}, 1000);


わずかなコードですが、これでRaspberry Pi PicoのLEDは1秒間隔で点滅してくれます。

f:id:paiza:20220202110428j:plain


コードを書いたらエディタ上部にある【Upload】ボタンをクリックしましょう。

f:id:paiza:20220202110441j:plain


プログラムがRaspberry Pi Picoに書き込まれて以下のように実行されます。

f:id:paiza:20220202110454g:plain


また、ログインしている状態であればプログラムを保存できるので、オプションから【Save】を選択してみましょう。

f:id:paiza:20220202110516j:plain


好きなプロジェクト名を入力して【Create】ボタンをクリックします。

f:id:paiza:20220202110529j:plain

これでパブリックなプロジェクトとして保存されます(※自動でMITライセンスの扱いになります)。


ソースコードを保存すると、新しいパネルが表示されます。

f:id:paiza:20220202110544j:plain

ここから新規にファイルやフォルダを作成したり、package.jsonやREADME.mdを編集できるようになります。

また、「DEPENDENCIES」の項目では、「Kaluma」で提供されているパッケージをインストールできます。インストールすることでさまざまな機能を追加できるので、IoT開発をさらに便利にしてくれます。


現在公開されているパッケージはまだ少ないですが、独自のツールやゲームなどを手軽にJavaScriptで開発できるように工夫されています。

以下のリンクからサンプルプロジェクトの事例をチェックできるので参考にしてください。


<参考リンク>
「プロジェクトの一覧|Kaluma」

f:id:paiza:20220202110617j:plain

「Kaluma」を活用すれば、Raspberry Pi PicoをUSBに接続するだけで、すぐにでもブラウザ上から開発を行えるのは大変便利です。

しかも、普段からよく使うJavaScriptをフル活用できる環境をいくつでも作成でき、そのまま1クリックでプログラムを書き込めるのは重宝します。ぜひみなさんも、Raspberry Pi Picoをフル活用してオリジナル作品を作って公開してみましょう。

SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て公開中!

20220118154007

paizaでは先日プログラミングゲーム『SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て』を公開いたしました!

新種の軍事プログラミングで戦場に【銀の弾丸】を打ち込め!

世界中でIT化が加速し、プログラミングも生存のために重要なスキルのひとつとなった近未来の戦場。ミリタリーインテリジェンスから最前線へと飛び出した我々は、軍事プログラミングを駆使して自軍を勝利へと導く任務を負った。

平和をもたらす【銀の弾丸】を見つけることはできるのか!?

プログラミング問題を解くと拠点を制圧できるだけでなく、新たな武器や装備を獲得できます。武器イラストは、エアソフトガンメーカーの東京マルイの製品をベースにデザイン。実在するアイテムを装備することもできます。お気に入りの装備で、新たな拠点制圧に向かいましょう。

f:id:paiza:20220116230033j:plain

各拠点を制圧するには、それぞれに設定されているプログラミング問題をクリアしなければなりません。各拠点には問題の難度に応じてS、A、B、C、Dのランクが付与されているので、自分のスキルに応じて挑戦する拠点を選びましょう。拠点を制圧(クリア)したり、特定のミッションをクリアしたりすると、アイテムを獲得できます。

f:id:paiza:20220116194911j:plain

アイテムを充実させて、自分だけの装備を作り上げ、さらなる拠点の制圧を目指しましょう!

youtu.be

■まとめ

今回はRaspberry Pi PicoをJavaScriptで制御できるWebエディタをご紹介しました。

「Kaluma」はまだ新しいサービスなので、現在もさまざまなアップデートや新機能の開発が進められています。今後も便利なパッケージやサンプル事例などが増えていくはずなので、今のうちに使い方に慣れておくといいでしょう。

みなさんもRaspberry Pi Picoが持つ機能をJavaScriptから制御して、ユニークなツールやゲームなどを開発してみてはいかがでしょうか。


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.