MixJuice コンテンツのつくりかた。

IchigoJam が 6 才になりました～！👏ﾊﾟﾁﾊﾟﾁ…
状況が状況だけに例年より控えめな 4月1日 でありましたが、
そんな中、福野さんがこんなモノを公開してくれまして。

---

こどもパソコン通信！ 😲

IchigoJam BASIC では、MixJuice を接続する事で、
Wi-Fi でインターネット通信ができるのですが、
これを用いてパソコン通信のような表示を実現できていたんですね。
はやい段階で公開されていたのですが、開発者自身が公開してしまいました。😁😆😄

でも、まだまだ MixJuice コンテンツは少ない！ 😫
そこで、MixJuice コンテンツの作り方を紹介します。

---

MixJuice は通常の Web サーバを使用できます。
レンタルサーバと言った方が良いでしょうか？
ホームページ（Web サイト）を公開する領域をそのまま使えます。

気をつけないといけないのは、最近のサーバは常時 SSL 対応になっているのですが、
この場合、MixJuice は MixJuice 1.2.2 以降で参照可能という制限が発生する場合があります。
（HTTP/2 対応済みのサーバが該当します）
また、MixJuice で一切参照できないサーバも存在します。
（圧縮が効いている場合や珍しい Web サーバを用いている場合）
日本のレンタルサーバはほぼ HTTP/2 対応済みです。

なかなか MixJuice 全バージョンで動作する環境を探すのは大変ですが……
一つ良い環境をご紹介します。

この Glitch ですねぇ。

ファイルの編集が Web でできるんです。
上にファイル一覧とエディタが表示されていると思うのですが、
この画面でそのまま編集できてしまうんです。
なお、上の画面でもファイルの切り替えができます。
README.md は説明ファイルです。GitHub などでも使われています。

パソコンでは https://(プロジェクト名).glitch.me/ なので
https://m-j.glitch.me/ で参照できます。

そのまま MixJuice でも参照できます。
IchigoJam BASIC＋MixJuice の環境で

?"MJ GET m-j.glitch.me/

これを入力すると

'Hello World!

表示されます。
index.html を参照すると

'Hello World!

そのまま表示してます。末尾 / に何もなければ index.html が表示されます。
これを編集するだけです。では、行ってみましょうか。

---

https://glitch.com/edit/#!/m-j で全画面の編集画面にします。

左上のアイコンを選び Remix Project を選択します。

同じプロジェクトを GitHub リポジトリ でも公開しています。
こちらで表示されている Remix on Glitch でも可能です。

左上に表示されていた「m-j」が変化します。プロジェクトがコピーされました。
しかし、名前が長いので、短くわかりやすい名前にします。
ここでは mixjuice-test としました。赤く表示されている場合はすでに使われています。
URL や左上の表示も変化します。

これで 👓Show で参照すると……

表示されます。この時の URL が変更された名前になっています。
もちろん MixJuice でも参照できます。

?"MJ GET mixjuice-test.glitch.me/
'Hello World

ここでファイル一覧から index.html を選び、「‘Hello World!」を変更します。

確認してみましょう。

?"MJ GET mixjuice-test.glitch.me/
'MixJuice

気をつけないといけないのは、
IchigoJam BASIC は受け取った内容をそのままコマンド・プログラムにします。
なので、頭に ' を付けてコメント（何もしない）にします。

また、カナを Glitch 画面上で使用すると文字化けします。英数のみ使用して下さい。

---

ファイルを追加します。

New File を選択し、ファイル名を入力します。
ここでは test.txt とします。Add This File をクリックし、
一覧に追加されている事を確認します。

ファイルを編集します。行頭に ' を付けるのを忘れないで下さい。

MixJuice では後ろにファイル名を付けて参照できます。

?"MJ GET mixjuice-test.glitch.me/test.txt
'test

パソコンも同様に / の後ろにファイル名です。
.txt を付けたので、パソコンでも正常に参照できますが、
これがない場合は、ファイル保存画面になるでしょう。拡張子がないためです。
MixJuice は拡張子に関係なく表示できます。test とかでも良いのです。

これで複数のページが作成できますね。

---

この Glitch、Node.js に対応しています。
なんと福野さんが公開した IchigoJam club がこの Node.js で作られてあるんです。

Glitch は GitHub のインポートができます。

Glitch で動かせるようにするため、修正が必要です。
package.json を作って Node.js を動作するようにしています。
起動させるのは server.js ですね。

{
  "name": "ichigojamclub",
  "version": "0.0.20200402",
  "description": "IchigoJam club",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "request": "^2.88.2"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/ichigojamclub"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch"
  ]
}

Glitch ではポート 3000 で listen する仕様なので、
server.js の最終行を変更します。

server.listen(3000)

これだけです。まず 👓Show で確認します。

MixJuice でも確認してみます。

?"MJ GET ichigojamclub.glitch.me/
'=============================
'
'   Welcom to IchigoJam club
'
'+++++++++++++++++++++++++++++
'
' 1 Anti-Coronavirus Dashboard
' 2 IchigoJam Q&A
' 3 link to 15jm.li
'
?"MJ GET ichigojam.club/

ファイルは編集していないので ichigojam.club のままですが、
表示できていますね。

この投稿時点では、単にファイルを出力しています。（static/ 内の .txt ファイル）
でもわざわざ Node.js で処理して表示させているので、
後に動的に処理させるつもりでいるのかもしれません。

---

MixJuice コンテンツのより詳細な情報はこちらを参照して下さい。

MixJuice コンテンツの一覧は イチゴジャム レシピ で公開しています。
もしコンテンツを作成しましたら、ここに追加しますので、教えて下さいね。

Glitch についてはこちらで説明しています。

なお、パソコン通信、懐かしいなぁ～～～という方、今でも運営されています。

---

Glitch はログインしなくてもプロジェクトを作成できますが、
この場合 5 日間だけ維持され、その後抹消されます。
もし、残しておきたい場合は、アカウントを作成して下さい。無料で使用できます。