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


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

 

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

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

 

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

 

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

 

MixJuice/MicJack


MixJuice コンテンツ公開サーバ

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

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

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

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

 

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

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

 

現在サーバは常時 SSL の対応が行われています。今後を考えると常時 SSL 対応済みのサーバがおすすめです。
世界規模で提供され、利用者もいるサーバは、ほぼ常時 SSL 対応を終えていますが、

一般的なレンタルサーバでは無料提供での常時 SSL 対応が遅れている状況です。

公開アドレスは完全に https://~ となる場合、MixJuice では GETS・POSTS での参照になりますが、

MixJuice 1.2.2 以降 または MicJack に更新しないと参照できない場合があります。

 

MixJuice 1.2.1 以前で参照できないのを確認できているサーバは次のとおりです。

調査の結果 HTTP/2 対応済みのサーバ・サービスが該当するようです。順次対応されているので、今後も増えると思われます。

日本向けに提供されている SSL 対応済みのレンタルサーバは、HTTP/2 も対応済みのケースが多いようです。

MixJuice を最新版へ更新するか、MicJack に更新する事で参照できます。
http 参照可能な場合は MixJuice 1.2.1 以前でも GET で参照できます。(2019年10月現在)

サーバ・サービス名 割当 URL(+独自ドメイン) 補足
Amazon CloudFront ~.cloudfront.net AWS の CDN。Amazon S3 直接などは参照可
Bitbucket ~.bitbucket.io  
Firebase Hosting ~.firebaseapp.com Firebase Cloud Functions(~.cloudfunctions.net)は参照可
GitHub Pages ~.github.io/~ GitHub Gist (gist.githubusercontent.com/~)は参照可
My.DropPages ~.droppages.com  
Netlify ~.netlify.com  
WebARENA SuiteS・SuiteX

独自ドメインのみ

NTTPC 提供。SuiteS・SuiteX 提供サブドメインは https 非対応
さくらのレンタルサーバ ~.sakura.ne.jp  
スターサーバー StarServer ~.stars.ne.jp StarServer Free(無料)は https 非対応

 

サーバの対応状況により変化するため、他のサーバも後に参照できなくなる恐れがあります。

(Netlify は 2018 年春頃から、Bitbucket は 2018年秋~冬頃から)

 

MixJuice 1.2.2 以降 および MicJack でも参照できない・表示がおかしくなるのを確認できているサーバは次のとおりです。
調査の結果、Web サーバに Apache・nginx 以外を使用するサーバ・サービスが該当するようです。

現在のところ、これらのサーバで MixJuice コンテンツを公開しないで下さい。
ただし http で使用できる場合は GET で参照できる場合があります。(2019年10月現在)

サーバ・サービス名 割当 URL(+独自ドメイン) 補足
Cloudflare 独自ドメインのみ

CDN サービス。SSL 化・キャッシュ・DNS など

DriveHQ FirstCloudIT ~.firstcloudit.com 頭に数文字付加されて出力されてしまう
DriveToWeb ~.drv.tw  
GitLab Pages ~.gitlab.io

独自ドメイン使用時は参照可能な場合あり

IBM Cloud ~.mybluemix.net など いくつかのサービスを試したが GETS は出力なし
Microsoft Azure Blob ストレージ ~.web.core.windows.net  
Microsoft Azure Functions ~.azurewebsites.net 通常の App Service は参照可
Neocities ~.neocities.org  
ZEIT Now ~.now.sh  

 

パソコン等の Web ブラウザでは正常でも MixJuice で文字化けする場合もありますので、
コンテンツ構築前に MixJuice で正常に表示されるかテストする事をおすすめします。

 

運営者が SSL(GETS・POSTS)対応済みで使用できる Web サービス(レンタルサーバ・クラウドサービスなど)を用いた

MixJuice SSL テストを公開しています。
 

MixJuice SSL テスト - fu-sen/mj.15j.run | GitHub

 

Web サーバを建てている場合、Apache や Nginx は正常のようですが、

IIS および小規模用途で運用できるサーバは MixJuice で出力に問題が発生する場合があります。

GET・POST と GETS・POSTS および MixJuice と MicJack で結果が変わる場合があります。


GET・GETS コマンドと URL

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

 

 http://fu-sen.github.io/15j.run/basic/index.html 
  → ?"MJ GET fu-sen.github.io/15j.run/basic/index.html (IchigoJam BASIC)
  → echo MJ GET fu-sen.github.io/15j.run/basic/index.html> uart;cat uart  (IchigoLatte)

 

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

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

 

 https://fu-sen.github.io/15j.run/basic/index.html
  → ?"MJ GETS fu-sen.github.io/15j.run/basic/index.html (IchigoJam BASIC)
  → echo MJ GETS fu-sen.github.io/15j.run/basic/index.html> uart;cat uart (IchigoLatte)

 

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

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


コンテンツの内容

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

 

fu-sen/ijmj.eu.org | GitHub - MixJuice コンテンツ サンプル

 

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

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

 

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

 

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

 

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 15j.run/index.html
  → ?"MJ GET 15j.run/ → 参照可能
  → ?"MJ GET 15j.run → 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 を実行した出力結果例

2018

12

1

13

25

2018年12月1日 13時25分 で実行した時の出力結果

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

 

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


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

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

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

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


 上のプログラムを実際に Kidspod; と Google App Engine (Google Cloud Platform) へ入れています。

 

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

 ?"MJ GKP 685 (MixJack 専用)

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

 

PHP ソース - GitHub→Google App Engine

IchigoJam BASIC ソース - Kidspod;

 

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

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

 

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

 

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

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

 

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

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

 

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

?"MJ POSTS START 15_jam.com/upload.php":LIST:?"MJ POSTS END (例-実在しません)

 

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

echo MJ POSTS START 15_jam.com/upload.php> uart:cat . > uart:echo MJ POSTS END> uart (例-実在しません)
サーバからレスポンスが得られる場合は ;cat uart を末尾に加えて下さい。

 

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

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

 

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


Not Found の処理

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

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

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

 

'Not Found

 

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

 

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

 

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


転送(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 を Google App Engine (Google Cloud Platform) で動作させています。

 

MixJuice・MicJack コマンド
 ?"MJ GET i-j-m-j.appspot.com/ua (GET の代わりに GETS を使用可能)

 ?"MJ GET 15j.run/U (短縮 URL・GET の代わりに GETS を使用可能) 

 

PHP ソース - GitHub→Google App Engine

 

具体的な例として、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]

 

サーバや取得方法によっては 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 系で運用されています。これらの OS はファイル名の大文字・小文字を区別します。

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

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

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