IchigoJam Advent Calendar 2019 - Day 3
Google Cloud Platform Advent Calendar 2019 - Day 3

ふうせん🎈 Fu-sen. と申します。
一番使っているプログラミング言語は IchigoJam BASIC です。
……ええ、BASIC です。本当に。

IchigoJam と IchigoJam BASIC

イチゴジャム レシピ という IchigoJam 関連のサイトを運営しています。
2020年2月で運営 5 周年です。IchigoJam そのものは 2019年4月で 5 周年でした。

IchigoJam 公式サイトもリンクしておきます。

記事の段階で IchigoJam の最新基板 IchigoJam S はこんな外観です。
※ 白いネジと足になっているスペーサーは商品に付いていません

IchigoJam S

これにキーボードとテレビなど(ビデオ端子)を接続すれば、使えてしまうのです。

「1500 円」とありますが、最新基板(IchigoJam S)では半田付けが難しく、
通常は 1750 円のハーフキットでいくつかのパーツを半田付けするか、
2000 円の完成品ですぐに使える状態にできます。

IchigoJam BASIC

本当に BASIC です。行番号付です。えっ? 知らない? お父さんが知ってるかも。


MixJuice

IchigoJam はインターネットに接続できません。
だからネットに接続されて大変な事をされてしまう心配はありません。
でもインターネットに接続したい場合もあります。
……はい、あるんです。インターネットに接続できる拡張機器が!

MixJuice を上に乗せる

MixJuice というものです。IchigoJam の上に重ねて接続します。
これで Wi-Fi 接続できてしまうんです。
最も使われる方法はプログラムのダウンロードですが、
いろいろ機能追加されて、ネット経由で様々な事を実現できつつあります。


MixJuice 短縮 URL 15jm.li

MixJuice で見る Web サイト……はい、もちろんあります!
でもサイトを参照するためには ?“MJ GET サイト や ?“MJ GETS サイト と
手入力する必要があります。 http://サイト や https://サイト に同等です。
(BASIC を知っている人であれば…… ? は PRINT の短縮です)
なので、URL が長いと入力するのが大変ですし、エラーになる可能性もありますね。
それを解決する手段、短縮 URL というものがあります。
でも MixJuice は一般的に Web サイトで使われている短縮 URL を処理できません。
ならば MixJuice 専門の短縮 URL を作れば良いんですよね。

15jm.li

こうして作られた MixJuice 専門の短縮 URL が 15jm.li です。
?“MJ GET 15jm.li/ と入力して上画面を表示します。
イチゴジャム レシピ MixJuice コンテンツであれば
?“MJ GET 15jm.li/R と入力すれば良いのです。
上画面では ?“MJ GET 15jm.li/ まで表示されているので、R のみを入力します。


15jm.li で採用されている Google App Engine

……はい、Google Cloud Platform 使いの皆様、お待たせいたしました。
この 15jm.li は Google App Engine を採用しています。

Google App Engine を用いた場合に
古いバージョンの MixJuice で GETS(https 相当)が正常に参照できた事、
また、大文字・小文字の区別なく処理できるようにするため、
それをサーバ側で動的処理させて出力させる必要がありました。
MixJuice はテキストのみで、一つのデータで大きくても数 k バイトしかありません。
これならクラウドサービスを使ってしまっても高額料金の恐れは少なくなります。
実際 2019年11月 の請求額は 0 円でした。請求発生しませんでした。ええ。

2019年11月の合計額は 0 円

というか、まだ Google Cloud Platform で請求が発生した事はありません。
この調子だとしばらくは 0 円~数円という事になりそうですね。

Google App Engine ではいくつかのプログラミング言語を選択できるのですが、
PHP であれば、<?php ~ ?> で囲まないところはそのまま HTML などを出力できます。
シンプルに Web サイトを運営する目的でも Google App Engine が使われるケースもあります。
(今だったら Google 系クラウドの Firebase Hosting を使う方が便利でしょうか?)
これらの考慮で PHP を採用しています。


ソースの解説

MixJuice のコンテンツを増やしたい、ということもありまして、
運用しているソースすべてを GitHub で公開してあります。
おおっ、GitHub~~~🤩🤩🤩←はい、何人か目が光りましたね~~~😆

構成ファイルを細かく説明していきます。

app.yaml

https://github.com/fu-sen/15jm.li/blob/master/app.yaml

動作するプログラミング言語などを入れるのですが……

runtime: php73

この 1 行だけです。
runtime: php55 だとここにいろいろ加える必要がありましたが、
PHP 7 系では最低でもこの 1 行になってしまいました。

ちなみにこの記事を入れている段階で正式版は PHP 7.2 です。
PHP 7.3 はベータ版の扱いとなっています。

runtime: php72

https://www.php.net/supported-versions.php

PHP 7.2 はアクティブサポートが 2019年11月30日 で切れていて、
セキュリティサポートは 1 年後の 2020年11月30日 となっています。
PHP 7.1 のサポートが終わって、代わりに PHP 7.4.0 が公開されています。

別に複雑なコードを使っているわけでもないので、
ベータ版の PHP 7.3 にしても、特に悪影響はなかったのです。

index.php

https://github.com/fu-sen/15jm.li/blob/master/index.php

PHP 5.5 では URL に応じた遷移を app.yaml で処理していたのですが、
PHP 7 系では代わりに必ず index.php を参照する仕様となりました。
(index.php の代わりに public/index.php も使用可能)
従って index.php で URL を処理する事になります。

<?php

$ua = isset($_SERVER['HTTP_USER_AGENT'])? $_SERVER['HTTP_USER_AGENT'] : '';

if (stripos($ua, 'MixJuice') === false)
{
    header("Location: https://github.com/fu-sen/15jm.li", true, 301);
    exit;
}

MixJuice では User Agent に MixJuice の文字列が含まれています。
でも独自ドメインを使用している事もあり、
関係ないアクセスも当然やってくる事が想定されます。
アクセスが多くなるほど、それは料金に反映されてしまいます。
なので、MixJuice に関係ない参照があったら、それ以上参照させないようにします。
普通に考えると、パソコンやスマートフォン、タブレット端末での参照となるので、
ここでは 15jm.li の説明が入っている
GitHub のプロジェクトページへ http ステータス 301 で転送させてしまってます。
転送であれば、レスポンスとして送出するのも少ない情報にできます。

$path = @parse_url($_SERVER['REQUEST_URI'])['path'];
if ( substr ( $path , -1 ) === "/" )
{
    $paths = $path . 'index';
}
else
{
    list($t, $file, $data) = explode('/', $path, 3);
    $paths = "/" . strtolower ( $file );
}

$files = __DIR__ . "/www" . $paths;

if ( file_exists($files) && is_file($files) )
{
    require $files;
}
else
{
    require "404.php";
}

つづき。 URL を解析して、参照するファイルを決めています。
15jm.li/ であれば index、そうでなければ / 区切りで分割してます。
15jm.li/K/593 であれば、$file が k、$data が 593 となり、
$file 部分が参照するファイルとなります。$data はその参照先での処理です。
これは 15jm.li 特有の処理で、単に / 下のファイルを参照するのであれば……

$path = @parse_url($_SERVER['REQUEST_URI'])['path'];

if ( substr ( $path , -1 ) === "/" )
{
    $path .= 'index.html';
}

$paths = strtolower ( $path );
$files = __DIR__ . "/www" . $paths;

if ( file_exists($files) && is_file($files) )
{
    require $files;
}
else
{
    require "404.php";
}

これで良いわけです。
(通常の HTML などを出力する前提で index.html にしています)

これらのファイルはディレクトリ www 下に実態のファイルがあります。
ここで strtolower ( $file ) とする事で大文字を小文字にしているので、
大文字 K はファイル名 k を参照する事になります。
これで大文字・小文字の区別をなくしています。
(IchigoJam BASIC は通常大文字で入力するので、その考慮です)
最終的に $files に入り、そのファイルを require で参照しますが、
ファイルが存在しない場合は代わりに 404.php を参照します。
404.php が Not Found の出力という事になります。

ディレクトリ www 下のファイル

index.php で記載していたとおり、
ディレクトリ www 下のファイルが出力するファイルそのものです。
PHP 処理させる必要がなければ、このファイルが公開ファイルそのものになります。
Apache だと public_html、最近だと public のケースが多いでしょうか?
つまり、通常は HTML やテキストファイルを置く場所になりますが、
今回は IchigoJam+MixJuice なので、ここでは IchigoJam BASIC で書かれています。

?“MJ GETS 15jm.li/ で参照した時は index.html を参照する事になっていました。

https://github.com/fu-sen/15jm.li/blob/master/www/index.html

ソースをそのまま見ても文字化けしていてわからないですね。
もう一度 IchigoJam の画面を出してみます。OK から下の表示が index.html の出力です。

15ja.li メニュー

英数に加えてカナは Shift_JIS の半角カナに共通です。
従ってここまではテキストエディタでも直接編集できます。
でもそれ以外でも IchigoJam の独自キャラクターが使ってあるので、
このファイルを編集するのはテキストエディタでは難しくなってきています。
IchigoJam 関連のツールだったり、バイナリエディタだったり、……

行頭 ' は REM の省略で、コメントです。
なにも処理しません。つまり、この部分は単に表示させているだけです。
最後の行 ?“MJ GET 15jm.li/ は MixJuice のコマンドですが、
この行は行末に改行がないので、 ?“MJ GET 15jm.li/▉ の状態になります。
末尾に入力して、メニューを選択する仕様です。

では、実際に入力したという前提で次の処理を見ていきます。
?“MJ GETS 15jm.li/K を例にします。小文字に変換されて、ファイルは k です。

https://github.com/fu-sen/15jm.li/blob/master/www/k

<?php
if (empty($data))
{
   echo "?\"MJ GET kidspod.club/mj/";
}
else
{
   echo "?\"MJ GET kidspod.club/mj/{$data}\n";
}

require をしているので、ここも PHP で処理できます。
行っているのは $data があるかどうかを見て、
MixJuice コマンド GET・GETS を送出しているだけです。
GET・GETS コマンドは http・https 相当という話はしていました。

?“MJ GETS 15jm.li/K であれば K の後ろにないので、$data は空です。
if 文が正しいので ?“MJ GET kidspod.club/mj/ が出力されますが、
\n が末尾にないので、?“MJ GET kidspod.club/mj/▉ の状態になり、
ここで末尾に追加入力できるようになっています。

?“MJ GETS 15ja.li/K/593 であれば $data は 593 が入っているので、
if 文は else になり ?“MJ GET kidspod.club/mj/593 が出力されます。
末尾に \n も付いているので、そのままコマンドが実行される事になります。

いずれにしても kidspod.club/mj/~ を参照先とするようになります。
K 以外の場合でも仕組みは一緒です。

この kidspod.club というドメインは Kidspod; というプログラム投稿サイトです。
MixJuice などの IchigoJam 周辺機器を作っている、ナチュラルスタイルの運営です。

なので MixJuice によるプログラムのダウンロードなどにも対応しています。

?"MJ GET kidspod.club/mj/593

とフルで入力するよりは、

?"MJ GET 15jm.li/K/593

の方がちょっとは短くて良いでしょう?


Google App Engine での公開

公開はこれだけですね。

gcloud app deploy --project=プロジェクト名

Cloud Build で GitHub で push されたのを自動でビルドできますが、
そのための設定ファイル cloudbuild.yaml を入れています。

https://github.com/fu-sen/15jm.li/blob/master/cloudbuild.yaml

steps:
- name: 'gcr.io/cloud-builders/gcloud'
  args: ['app', 'deploy']

Cloud Build 関連の記事が後にあるようのですので、
気にしている人はお楽しみにお待ち下さい。

GitHub に Push する前提であれば
GitHub Actions で自動ビルドする選択肢もありますね。
GitHub Actions の Advent Calendar も今年はできています。

GitHub Actions Advent Calendar 2019


その他

単に独自ドメインを用いて Web サイトを表示する目的であれば
Firebase Hosting がありますし、
サーバ名部分が長くなっても良く、シンプルなレスポンスであれば、
Cloud Functions が選択肢になりますね。
(Firebase にも Cloud Functions for Firebase があります)
今年は更に Cloud Run という選択肢もできました。
そのため、わざわざ Google App Engine を使用する必要もなくなっていますが、
用途によってはまだ GAE の選択肢もあります。
Firebase の Advent Calendar ができています。その 2 まであります。

Firebase Advent Calendar 2019 #1
Firebase Advent Calendar 2019 #2

Google Cloud Platform としては毎月無料枠があるおかげで
課金がほとんど発生していなくて、
独自ドメインによるドメイン費用の方が高く付いているのが実態です。

次の MixJuice コンテンツも公開しています。
こちらも Google App Engine を使用し、この記事で紹介した方法にほぼ同じです。


追加 2019/12/12

MixJuice 1.2.1 以前では、いくつかのサーバが GETS で参照できなくなっていて、
その多くは HTTP/2 対応済みのサーバが該当する事が分かっています。
日本のレンタルサーバはほぼ対応済みで、
Google Cloud Platform でも最近正式提供開始となった Cloud Run は
常時 SSL となっていて、
いずれも GETS は MixJuice 1.2.2 以降(または互換システム MicJack)での
動作になる事を確認できています。

MixJuice 1.2.1 での参照

上は実際に MixJuice 1.2.1 で参照してみています。
~.run.app が Cloud Run、~.sakura.ne.jp がさくらのレンタルサーバです。
さくらのレンタルサーバは SSL なしでも参照できるので、GET は正常に参照できます。
(index.html は ' ~.sakura.ne.jp で、これが出力されています)

更に Apache・Nginx 以外のサーバでは、
最新の MixJuice でも参照できないケースもあります。

(2019年12月現在の記載であり、後に仕様が変わる可能性があります)


追加 2020/04/27

HTTP/2 対応が Google App Engine でも行われたため、
どこでサーバを稼働しても同じ状況になりつつあります。
どこで、15jm.li を含む MixJuice コンテンツを
さくらのレンタルサーバ へ引っ越ししました。


IchigoJam Advent Calendar 2019

IchigoJam Advent Calendar 2019 | Qiita


Google Cloud Platform Advent Calendar 2019

Google Cloud Platform Advent Calendar 2019 | Qiita