MixJuice 向けコンテンツの作成と公開


HTML などを公開できる Web サーバに MixJuice で参照・ダウンロードできるようコンテンツを公開する手順です。

 

単にプログラムを公開する目的であれば、Kidspod; で容易にアップロード・公開が可能です。

公開用にサーバを用意する必要もありません。

 

MixJuiceでKidspod;と通信しよう! | Kidspod;

 

IchigonQuest は MicJack を用いる事で Kidspod; のアップロード・ダウンロードに対応しています。

 

MixJuice/MicJack


コンテンツの作り方

簡単に MixJuice コンテンツの生成方法を紹介しています。

MixJuice コンテンツのつくりかた。| ふうせん🎈 Fu-sen.


MixJuice コンテンツ公開サーバ

汎用的な Web サーバを用います。HTML・画像 などをファイル単位で公開できるサーバであればどの環境でも構いません。

Web サイトをブラウザやアプリから生成・編集できる Google サイト・Jimdo・wix・Webnode などは

特定のテキスト(HTML)のみを出力できないため、適していません。

無料レンタルサーバの場合、広告を付加する場合があり、
MixJuice ではこれが多くのタグ出力になり、まともに使えない状態となる事があります。

 

アドレスが手入力になるため、できるだけアドレスが短くわかりやすくなるのが理想的です。

これには独自ドメインが効果的ですが、ドメイン費用を別途要する問題があります。

 

現在サーバは常時 SSL の対応が行われつつあります。
公開アドレスは完全に https://~ となる場合、MixJuice では GETS・POSTS での参照になりますが、

サーバによって GETS・POSTS は MixJuice 1.2.2 以降 または MicJack に更新しないと参照できない場合があります。

MixJuice 1.2.1 以前で参照できないのは主に HTTP/2 対応済みのサーバ・サービスが該当します。
HTTP/2 対応は順次行われているため、今後 MixJuice 1.2.1 以前で参照できないサーバは増えてきています。

更に https ではコンテンツを gzip・Zstandard・Brotli で圧縮している場合もあり、
この場合 MixJuice は最新版でも参照できません。

HTTP/2 は多くの場合 https(MixJuice では GETS・POSTS)での参照に限定され、

http(MixJuice では GET・POST)では HTTP/1.1 参照のままになっている事が多いです。
そのため、http 参照が可能なサーバなどでは、MixJuice の古いバージョンでも参照できる可能性が高くなりますので、

http で公開できるサーバが MixJuice 向けサーバとして一基準となります。

https(GETS)は MixJuice で不可でも、http(GET)は MixJuice で使用できるサーバが最近増えてきました。

運営者の経験上、Web サーバの直接ファイル参照はできないけど、PHP を経由すると参照可能、というケースもありました。

 

パソコン等の Web ブラウザでは正常でも MixJuice で文字化けする場合もありますので、

コンテンツ構築前に MixJuice で正常に表示されるかテストする事をおすすめします。

 

MixJuice と MicJack で異なる動作をするサーバもありますので、ご注意下さい。


GET・GETS コマンドと URL

http:// を外した URL が GET コマンドで含めます。? 以降のパラメータもそのまま含める事が可能です。

 

 http://fusen.ddns.net/15jam/basic/index.html
  → ?"MJ GET fusen.ddns.net/15jam/basic/index.html (IchigoJam BASIC)
  → echo MJ GET fusen.ddns.net/15jam/basic/index.html> uart;cat uart (IchigoLatte)

 

もし SSL を含めた URL https:// の場合は代わりに GETS コマンドにして下さい。

常時 SSL のサーバを使用する場合は必ず GETS を使用して下さい。

 

 https://fusen.ddns.net/15jam/basic/index.html
  → ?"MJ GETS fusen.ddns.net/15jam/basic/index.html (IchigoJam BASIC)
  → echo MJ GETS fusen.ddns.net/15jam/basic/index.html> uart;cat uart (IchigoLatte)

 

パラメータが多い場合、IchigoJam からデータを送出する前提の場合は POST・POSTS を用いる事になります。

現在のところ、Kidspod; のプログラム投稿で POST が使われています。


コンテンツの内容

サンプル MixJuice コンテンツソースを GitHub で公開しています。
GitHub Pages が有効のため、MixJuice で参照しながらソースと照らし合わせて参照してみて下さい。

 

fu-sen/ij.skr.jp | GitHub - MixJuice コンテンツ サンプル

 

また、イチゴジャム レシピ で公開しているコンテンツのほとんどは GitHub プロジェクト でソースも公開しているので、

こちらも参考にして下さい。(PHP を使用しているコンテンツは www/ 内が実際に表示するファイルです)

 

MixJuice/コンテンツ → イチゴジャム レシピ 運営者 によるコンテンツ 内

 

IchigoJam BASIC と IchigoLatte で考慮すべき内容が異なります。

 

最小限の構成を Glitch で公開しています。プロジェクトを Remix(複製)して動作確認可能です。

ログインしないまま編集もできますが、5 日で抹消されます。必要な場合はアカウント登録して下さい。

 

fu-sen/m-j.glitch.me | GitHub - MixJuice コンテンツ。画面上でファイル編集できます。

 

IchigoJam BASIC・IchigoCake BASIC

記載内容がそのまま BASIC で受け取られます。これはシリアルで受信している状態に同等です。

  • 行番号がなければダイレクトモードでの動作になります。CLS・NEW などを実行できます。
  • 行番号があれば、それはプログラムの入力になります。そのままプログラムを転送できます。
  • 単に文字列を表示させたい場合は行頭に ' を付けて下さい。BASIC ではコメント文の扱いとなり、これを無視します。

BASIC のカナはシフト JIS(Shift_JIS)の半角カナに共通します。

そのため文字コード Shift_JIS で制作するとカナを使用できます。

 

IchigoJam BASIC 1.1 以降(含む IchigoCake BASIC)では
CLS・LOCALE・SCROLL で特定のコントロールコードをシリアルに送出します。

MixJuice は通常これらを無視しますが、
例えば CLS 直後の PRINT"MJ〜 は CLS のコントロールコードによってコマンドを処理しない場合があります。
コマンドの前に改行を含めたり(PRINT)、UART 1 などで送出しないように設定して下さい。

 

IchigoLatte

echo MJ GET(S) アドレス>uart;cat uart >. でファイル内容は丸ごとエディタへ入ります。

プログラムとして実行されるべきでない内容は行頭を // にしてコメント化して下さい。

 

IchigoLatte の改行コードは LF です。CR+LF でも実行はできますが、CR コードは ■ で表示されます。

終了時に Ctrl+D(16進数コード 04)を入れるとコマンドを終了させ、lash へ戻す事ができます。

 

IchigoLatte の ひらがな はシフト JIS(Shift_JIS)の半角カナに共通します。

そのため文字コード Shift_JIS で制作すると ひらがな を使用できます。

ただし Ichigolatte では かな の手入力が容易ではない事にご注意下さい。

 

ファイルの作成・編集

MixJuice コンテンツ向けのファイル製作におすすめの方法は
IJUtilities を用いて製作・編集する方法です。

IchigoJam BASIC 各バージョンと IchigoLatte のフォントに対応し、

直接編集ができ、実際の表示と同じ表示で編集ができます。

更に固有のキャラクターコードも簡単に入力できます。

キャラ/数字カタカナ ボタンで表示できます)

ただしファイル末尾に改行を必ず含めるため、
場合によってバイナリーエディタで削除が必要です。

 

IJUtilities

 

通常のテキストエディタを用いる場合、

#20~#7F は通常の ASCII コードに共通します。

(最新 OS では #5C は半角 \ で、UTF-8 に共通しています。
 Shift_JIS は半角 ¥ です)

また IchigoJam BASIC のカタカナ、IchigoLatte のひらがなは

Shift_JIS の半角カナに共通しています。

#00~#1F の一部はコントロールコードとして使われ、

そうでない場合も IchigoJam BASIC 1.1 以前・1.2 以降で

表示が異なるため、使用をおすすめしません。

 

特定のキャラクターコードをすでに含めたファイルを編集する場合、

通常のテキストエディタでは

キャラクターコードを変換させてしまう場合があります。

IJUtilities からファイルを開いて編集するか、

バイナリーエディタを用いて編集をして下さい。

 

テキストアートをしたい場合、次のツールを用いて制作し、
IJUtilities で出力内容を出しながら IchigoJam BASIC で実行させて一度ファイル保存し、
ファイルを開き直して行頭 ' の追加・行末空白の削除などを微調整する方法もあります。

IchigoJam用画像コンバータを使用する場合、

IchigoJam BASIC 向けでは通常一番左に ' を入れる必要があるため、1 文字分空けておく必要があります。

また 1 行毎に改行するのがおすすめです。そのためには右にも 1 文字必要です。

従って左右 1 文字分(2 ピクセル)を空けた横幅 30 文字(60 ピクセル)で作成するのが理想です。


ファイル名とアドレス

MixJuice で Content-Type は無視されます。そのため、拡張子を .txt にしておく必要はありません。

例えばアドレスを省略する目的で index.html などを用いる事が可能です。

index.html などでアドレスを省略する場合、コマンド送出するアドレスは / で終わらせて下さい。

/ を省略するとエラーになります。 (下のとおり、この場合 Web サーバは redirect 処理を発生させます)

ただし MicJack は / を省略しても参照可能です。

 ?"MJ GET ij.skr.jp/index.html
  → ?"MJ GET ij.skr.jp/ → 参照可能
  → ?"MJ GET ij.skr.jp → MixJuice はエラー・MicJack は参照可能


動的コンテンツ生成

PHP・Perl・Ruby・Python・next.js などの動的コンテンツも使用できます。出力がテキストになっていれば良いです。

必ず Content-Type を出力させる必要がある場合は Content-Type: text/plain にすると良いでしょう。(.txt ファイル)

MixJuice は Content-Type を無視するので、.html で使われる text/html はそのまま出力して問題ありません。

 

サーバから特定の値を IchigoJam へ渡す

特定の数値を複数個渡す場合、サーバは数値を改行区切りにして出力すると、
IchigoJam BASIC のプログラムはその行数の INPUT を実行する事によって変数・配列に入れる事ができます。

IchigoJam BASIC 1.2 以降は文字列に対応しています。"" で囲った文字列を入れて下さい。文字列の先頭アドレスを返します。

 

日時を出力するサーバ側の PHP datetime.php

左の datetime.php を実行した出力結果例

2020

5

12

12

34

2020年5月12日 12時34分 で実行した時の出力結果

各行末尾には改行コードが含まれます。

 

左のソースでは Content-Type を含めていますが、
MixJuice は無視するので、入れなくても動作します。


MixJuice 経由で得る IchigoJam BASIC プログラム

10 CLS
20 PRINT
30 PRINT "MJ GET <サーバアドレス>/datetime.php"
40 INPUT Y
50 INPUT M
60 INPUT D
70 INPUT H
80 INPUT N
90 PRINT
100 PRINT Y;"/";
110 IF M<10 PRINT "0";
120 PRINT M;"/";
130 IF D<10 PRINT "0";
140 PRINT D;" ";
150 IF H<10 PRINT "0";
160 PRINT H;":";
170 IF N<10 PRINT "0";
180 PRINT N

左のプログラムを MixJuice+IchigoJam で実行した例

MJ GET <サーバアドレス>/datetime.php
?2020
?5
?12
?12
?34

2020/05/12 12:34
OK
Ə

※ PHP の分表示 date("i") は 0 を含めた 2 桁にしますが、

  IchigoJam BASIC はこの場合でも正常に処理します。


 上のプログラムを実際に Kidspod;さくらのレンタルサーバ へ入れています。

 

MixJuice・MicJack ダウンロード
 ?"MJ GET kidspod.club/mj/685

 ?"MJ GKP 685 (MixJack 専用)

 ?"MJ GET 15J.RUN/D (短縮 URL・GET の代わりに GETS も使用可能) 

 

PHP ソース - GitHub→さくらのレンタルサーバ

IchigoJam BASIC ソース - Kidspod;

 

古籏一浩さんが MixJuice 向けの日時データをサーバ公開しています。

このサーバを用いる事で IchigoJam BASIC プログラムのみで同等の動作を実現可能です。

 

IchigoJam + MixJuice用 日付&時間データ | IchigoJamを楽しもう

MixJuice・MicJack はコマンド実行から数秒レスポンスがない場合「'Client Timeout !」を表示し、処理を中断させます。

そのため、処理に時間がかかる場合は「'....」などを表示させる必要があります。

 

プログラムをサーバへ送る

次のコマンドで現在存在しているプログラムをサーバへ送る事ができます。
サーバは動的に処理する必要があります。

 

?"MJ POST START サーバ.name/実行プログラム.ext":LIST:?"MJ POSTS END (IchigoJam BASIC)

 

 

echo MJ POSTS START サーバ.name/実行プログラム.ext> uart:cat . > uart:echo MJ POSTS END> uart (IchigoLatte)

サーバからレスポンスが得られる場合は ;cat uart を末尾に加えて下さい。

 

POST メソッドで送られますが、パラメータは付いていません。
そのためサーバ側のプログラムでは標準入力(stdin)で渡したデータ全体を取り込む必要があります。

例えば PHP の場合は $_POST ・ $_REQUEST を用いるのではなく、php://input で取り出します。

 

MicJack では MJ POST END・MJ POSTS END 後の受信内容を表示せず ’POST OK! のみを表示するため、表示できません。

 

POST・POSTS で送信した結果を GET・GETS で得るなど、考慮が必要になります。

 

PHP のサンプルプログラム - IchigoJam BASIC 向け。IchigoLatte では一部修正が必要です。

 

上のプログラムを実際に動作させています。若干修正を入れています。

  • 使い方を表示
    ?"MJ GET fusen.ddns.net/upload/
    ?"MJ GET 15J.RUN/P (短縮 URL)
  • プログラムのアップロード
    (MicJuice) ?"MJ POST START fusen.ddns.net/upload/":LIST:?"MJ POST END
    (MicJack) ?"MJ POST START fusen.ddns.net/upload/":LIST:?"MJ POST END":?"MJ GET fusen.ddns.net/upload/last
    使い方を表示した時に送信するコマンドが表示されます。行頭 ' を外してすぐにアップロードできます。
    コマンド実行前にプログラムがある事を忘れないで下さい。
  • アップロードしたファイルを表示
    ?"MJ GET fusen.ddns.net/upload/ファイル名
    アップロード後に表示されます。参照すると CLS→NEW→プログラム→' OK と表示されます。

動作サンプルのため、セキュリティの考慮上アップロードされたファイルは後に削除する可能性があります。ご了承下さい。

確実なプログラムの公開は Kidspod; へアップロードし公開・共有して下さい。


Not Found の処理

Not Found(http ステータス 404)で特定のファイルを表示できるようにできる場合、

通常は HTML を出力するため、余計なタグが表示されてしまうため、
Not Found 向けのコンテンツ表示も生成しておく事をおすすめします。

404.html が多いです。最低限次の 1 行だけを入れたファイルで構いません。

 

'Not Found

 

末尾に改行を入れて下さい。

 

頭に ' があるのは、IchigoJam BASIC の考慮ですが、IchigoLatte で出力しても問題はありません。 

 

MicJack は完全にこのコンテンツを表示します。MixJuice は 'Error: 404 とする場合があります。

 

Apache Web Server で使用できる .htaccess では次を入れて使用できますが、
もちろん 404.html 以外のファイル名でも構いません。

 

ErrorDocument 404 /404.html


転送(IchigoJam BASIC)

MixJuice は Location・redirect(http ステータス 301・302)を処理できません。

エラーコードを返すか、転送を促す HTML が表示されます。

このため、Web サイト向けの短縮 URL(bit.ly など)は使用できません。

 

http ステータス 301・302 で特定のファイルを表示できる場合、

引っ越しした際のトップページ(通常 index.html)で転送処理したい場合は

単に GET または GETS コマンドを出力します。
通常は IchigoJam BASIC 向けに PRINT または ? を含めます。

 

?"MJ GET (転送先アドレス)

 

または

 

?"MJ GETS (転送先アドレス)

この 1 行を入れておくだけです。改行を出力する事でコマンドは自動実行されます。


User Agent

MixJuice は User Agent(HTTP_USER_AGENT)の値を次の内容にします。

 

MixJuice-バージョン

MixJuice-1.2.2

 

これは MixJuice 以外の環境から実行するのを防止し、MixJuice 専用に処理するために有効です。

特にネットからサーバ処理するプログラムの場合、他の環境から意図しない実行を受けてプログラムを悪用されないよう

セキュリティ対策として User Agent による MixJuice の判別は行って下さい。

 

MicJack はバージョンによって異なります。

MicJack 1.0.0b5 までは対応している MixJuice バージョンで返します。MicJack のバージョンは含めません。

 

MixJuice-互換元バージョン

MixJuice-1.2.2

 

MicJack 1.0.1b1 より MicJack バージョンも含めるようになりました。

 

MixJuice-互換元バージョン MicJack-バージョン

MixJuice-1.2.2 MicJack-1.0.1b1

 

この仕様により、MicJack 文字列の有無で MicJack の使用を判別できるようになりました。

イチゴジャム レシピ で公開している一部のコンテンツではこの方法を用いて

MixJuice 以外の参照は GitHub プロジェクトページへ転送するように処理しています。

 

User Agent を取り出す PHP を さくらのレンタルサーバ で動作させています。

 

MixJuice・MicJack コマンド(MixJuice 1.2.2 以降は GET の代わりに GETS も使用可能)
 ?"MJ GET ij.skr.jp/ua.php

 ?"MJ GET 15J.RUN/U (短縮 URL) 

 

PHP ソース - GitHub→さくらのレンタルサーバ

 

具体的な例として、Apache Web Server で使用できる .htaccess で Rewrite を使用し
MixJuice・MicJack 以外の参照があった場合に
https://転送先.URL/ へ HTTP ステータス 301 転送をするのは次のようになります。

 

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} !(MixJuice) [NC]

RewriteRule .* https://転送先.URL/ [R=301,L]

 

Apache 2.4 だと次の記載も可能です。(mod_rewrite 無効の場合でも動作可)

 

<If "! %{HTTP_USER_AGENT} =~ /MixJuice/">

    RedirectMatch .* https://転送先.URL/

</If>

 

サーバや取得方法によっては User Agent の値を得られない場合があります。
User Agent が全く出力されない場合はパソコンなどで参照し確認してみて下さい。


その他ヒント

IchigoJam 向けのコンテンツで最後の行をコマンドにする場合、改行の有無で動作が変わってきます。

  • 改行あり = そのコマンドが自動的に実行されます。
     ?"MJ GET 15JM.LI/K
     ▉ ↑このコマンドが実行されます。
  • 改行なし = 末尾でカーソルが停止します。コマンドの末尾に追記して入力させたり、Enter(return) 待ちが可能です。
     ?"MJ GET 15JM.LI/K/▉ ←ここでカーソルが止まるので、後ろに追記入力できます。

無料ホームページスペースなどでは拡張子が制限されています。その場合は末尾の入力を INPUT で受け付けします。
.html や .txt の拡張子であれば多くのホームページスペースは問題なく使用できるでしょう。

 

INPUT N:?"MJ GETS web_site.com/";N;".html

 

BASIC では、上の場合、例えば 1 を入力すれば、1.html を参照できます。
N*100 として 100.html を読み込む、という処理も可能です。

INPUT は数字なので、未入力は 0 が返ります。 

 

1 画面で表示できない場合はファイルを分割し、最後に次の画面を表示するコマンドを改行なしで出力するか、

INPUT"Enter=ツヅキ>",変数 として Enter キーで続きを表示できるようにします。

 

無料ホームページスペースの一部は広告を含めますが、
HTML タグの存在しない MixJuice では広告タグが入らない場合があります。

(例えば <body> や </body> を確認し、その前後に広告タグを加えるように処理しています)

 

MixJuice で IchigoJam BASIC へ転送する場合、必ずしもプログラムにする必要がありません。

ダイレクトモードでコマンドを実行可能です。

これによって IchigoJam BASIC のプログラム容量に制限されず処理を行えます。

 

簡単な処理を行えるコマンド・プログラムは Kidspod; で公開するのも手です。 

代わりに Pastebin も使用できますが、

Pastebin.com は末尾の改行をカットするため、最後のコマンド・行が入らない問題が発生します。

また GitHub Gist なども含めて、ランダムな文字列を含む URL になるため、手入力が難しくなります。

 

多くのサーバは UNIX 系で運用されています。
UNIX 系の OS はディレクトリ(フォルダ)・ファイル名の大文字・小文字を区別します

一方 Windows・macOS は大文字・小文字の区別がありません。
(macOS はファイルシステム によって区別するようにも可能です)

ローカルサーバによる動作確認を行った際など、ファイル名による動作の違いにご注意下さい。

イチゴジャム レシピ の一部コンテンツは PHP で小文字変換する事で、大文字・小文字に関係なく処理できるようにしています。

ドメイン名は大文字・小文字を区別しません。IchigoJam BASIC 向けに大文字表記もできます。