2021-02-10
無線LANでつないで楽しい、IchigoJamとパソコン。
MixJuiceとパソコン上で作るウェブサーバーをつないでみましょう!

まずはサーバープログラムの準備。JavaScriptでプログラムする環境、Deno(ディーノ)をインストールします。
Windowsの人は、PowerShellを起動して次のコマンドを実行

iwr https://deno.land/x/install/install.ps1 -useb | iex

Macの人は、ターミナルを起動して次のコマンドを実行

curl -fsSL https://deno.land/x/install/install.sh | sh

コマンドプロンプトや、ターミナルで deno とタイプ、エンターで次のような画面がでたらインストール成功!

Deno 1.7.2 exit using ctrl+d or close() >

Ctrl+d で Deno を終了し、ウェブサイドプログラムづくり hello.js (serveWebの中身はservest)
Windowsの人(書き終わったら Ctrl+Z、エンター)

copy con hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

Macの人(書き終わったら Ctrl+D、1行目以外は一緒です)

cat > hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

動かしましょう

deno run -A hello.js

ブラウザで http://localhost/ を開くと、hello! と表示されるはずです。
Ctrl+C でサーバープログラムを止めて、hello.js の文字列を好きな文字に変更して、また動かして確認しましょう。

次に IchigoJam web を使ったパソコン上での実験です。

「I/O」ボタンを押し「MixJuice」をチェックして、バーチャルMixJuiceをIchigoJam webに接続します。

IchigoJam web上でMixJuiceのコマンドを使って、アクセスしてみます。

?"MJ GET LOCALHOST MJ GET LOCALHOST OK hello!

などと表示されたら成功です。つながりました!

ひとまず、シンプルなサーバーにどんどん書き込めるチャットサービスを作ってみましょう。

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; let data = ""; serveWeb(80, (from, path, query) => { if (query) { data = data + "'" + query + "\r\n"; return "'OK\r\n"; } return data; });

IchigoJamからquery(クエリー)として送られてくる文字列をどんどん足し算して貯め、クエリーなしで全部表示する、というJavaScriptのプログラムです。 なんとなく読めますね?

このサーバーを動かしておき、IchigoJam web から試してみましょう。

?"MJ GET LOCALHOST/?HI! ?"MJ GET LOCALHOST/?HELLO ?"MJ GET LOCALHOST/

クエッションマーク(?)に続く文字列がサーバーでクエリーとして送られます。発言内容、見えましたか?

最後に、実IchigoJam+MixJuiceからつないでみましょう!

インターネットにつながるコンピューターには、IPアドレスが振られます。192.168.や172.で始まる4つの数字、普通の家ではローカルエリアネットワーク(LAN)用のIPアドレスが振られていることが多いです。 まずは自分のパソコンのIPアドレスを確認します。
Windowsの人

ipconfig

Macの人

ifconfig

192や172で始まるIPアドレスらしきものを探してください。

MixJuiceをつないだIchigoJamで、MJ APCを使ってアクセスポイントに接続して、次のようなコマンドで通信!

?"MJ GET 192.168.1.10

つながりましたか?

サーバーで二乗するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.pow(parseFloat(query), 2); });

サーバーでルートを計算するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.sqrt(parseFloat(query)); });

そのフォルダを開いちゃうプログラム(コマンド起動)

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { const open = Deno.build.os == "darwin" ? "open" : "start"; Deno.run({ cmd: [open, "."] }); return open; });

どの端末からアクセスがあったか、どういうクエリーか見たいとき

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { console.log(from, path, query); return "ok"; });

IchigoJamからパソコンコントロールし放題。
DenoやJavaScriptを調べて、いろいろ遊んでみましょう!

コンソール(コマンドプロンプトやターミナル)に慣れていない人は、まずはこちらなどを参考に!
コンピューターと深く話そう! Macのターミナル入門とNode.jsでつくるwebサービスはじめのいっぽ

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS