IchigoJam Advent Calendar 2018 - Day 9

Kidspod; を見てみると、
液晶モニタの画面をスマートフォン等で撮影しているようで、
光って一部が見えなくなっている画像が見られました。
そこで今回は IchigoJam 画面の画像を撮る方法を紹介します。
(画面キャプチャ・スクリーンショット画像を撮る)

モニタをスマートフォンで撮影してみる

試しに IchigoJam ではよく使われている 4.3 インチモニタの表示を
スマートフォンで撮影してみます。すると……

モニタをスマートフォンで撮影

う~~~ん……うまく撮れません。何枚かとってこれでも良い方です。
起動画面が表示されているのは分かりますが、
IchigoJam の c はこれだと o にも見えますね。
この画面でプログラムを表示させたら誤って入力する可能性がありそうです。

モニターによっては光沢があります。
もしかしたらよく見ると、構えている何かの姿がうっすら……
キャァ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~!!

この方法は電子工作メインの場合など、
他のものと一緒に写すならまだ良いのですが、
画面を公開する目的であれば、おすすめできません。

ビデオキャプチャ

EasyCap

これが汎用的で最も理想的に使用できる手段です。
EasyCap が安物ですが、実は対応が多くなっていて、
付属している CD は Windows 用ですが、他の OS でもアプリが出ています。
最近販売されている EasyCap は初期のものとチップが異なります。
なので、以前入手している人も買い直してみても良いかもしれません。
海外だとチップ名も明記されて売られていて、チップ名で検索すると
OS の対応状況などもある程度把握できます。Android アプリ対応も出てきてます!
EasyCap の名称でなくても、同じ形状であれば同等製品です。
アプリからのキャプチャはボタンやショートカットがあるでしょう。

もちろん EasyCap の品質を気にする人は、周辺機器メーカーが出している
Windows・macOS 向けの USB 接続キャプチャを入手しても良いです。安心、確実。

EasyCap でキャプチャ

Windows でのキャプチャをそのまま掲載しました。720×480 ピクセルになっています。
IchigoJam の OS は 256×192 ピクセル+周辺です。ビデオ出力なので、
よく見ると細くなっている部分もあったりしますが、何が表示されているかは十分分かります。
この大きさはキャプチャをしたアプリによって異なります。
4:3 ではないんですね。なので自分はいつも 720×540 ピクセルに修正しています。
よく使われている 4 インチの液晶モニタ、7 インチの DVD プレーヤーもワイド画面なので、
そのままでも違和感ない人が多いかもしれません。

この方法はビデオ出力が可能であれば何でも使えます。 IchigoJam BASIC RPi とか。
PanCake はチップによって表示がおかしくなったりする場合があります。

IchigoJam web by WebAssembly

IchigoJam web

IchigoJam web という素晴らしいものを福野さんが公開してくれています。
Web ブラウザ上で IchigoJam BASIC が動きます。

下のテキストボックスにプログラムを入れ、import を押すと
IchigoJam BASIC の画面にプログラムが入ります。
そうしたら full screen を押して下さい。

IchigoJam web

画面いっぱいに IchigoJam BASIC の画面が表示されました。
このまま全画面キャプチャすれば良いですね。
これにより大きな解像度でキャプチャできるので、
縮小しても十分読める画像にできますし、
余計な表示も出ていないので、そのまま画像を公開できてしまいます。

全画面キャプチャ(スクリーンショット)のボタンは分かっていると思いますが……
一応入れておきます。

OS キー
Windows Print Screen
macOS(Mac の標準 OS) command ?+shift+3
Chrome OS(Chromebook など) Ctrl+□||(f5)

そうそう、IchigoJam web は Chrome OS でも使用できるんです!

CloudReady で IchigoJam web

ブラウザが Google Chrome ですから。これは CloudReady、Chromium OS 派生です。
Google Chrome は 4 色メインですが、Chromium なので青・水色系のアイコンになっています。

IchigoJam ap

IchigoJam BASIC の Windows・macOS アプリ、IchigoJam ap も使用可能です。

IchigoJam ap

テキストエディタからプログラムをコピーしておき、
IchigoJam の画面ではないウインドウで Ctrl+V すると入ります。
IchigoJam の画面に切り替えて、最大化します。

IchigoJam ap

この方法ではタイトルバーとタスクバー・Dock が残ってしまいますので、
画像のトリミング(切り取り)を行う必要があるでしょう。

IchigoJam ap

Windows 10 だと ペイント 3D、macOS は プレビュー で行えますね。
わざわざ画像編集アプリを探す必要はありません。OS の標準アプリで行えます。

LattePlayer

IchigoLatte でも方法があります。

KidSpod; に Web ブラウザ上で動作する LattePlayer が内蔵されています。
「非公開で投稿」ができるので、Kidspod; 公開目的でなくても使用可能です。

LattePlayer を動かすようにするのは通常とは違う編集が必要です。
プログラムの投稿 画面で「ソースコードを投稿」は空白にしたまま一度投稿します。
そして一度投稿した状態から「投稿を編集」(または一覧から「編集する」)で
再度編集画面を表示します。
すると「ソースコードを編集」の右に 2 行表示が増えます。

Kidspod; 1

このコーヒーカップ側の URL(末尾 :il で終わる方)の URL をコピーして、
ブラウザのアドレス部に貼り付けて参照して下さい。

Kidspod; 2

「IchigoLatte のソースコードの投稿」という画面になれば OK。
ここにプログラムを貼り付けます。
これで投稿画面に「LattePlayer で遊ぶ」が表示されます。

Kidspod; 3

「LattePlayer で遊ぶ」をクリックすると動作します。

Kidspod; 4

このままキャプチャでは上下に残るのでトリミング(切り取り)が必要です。
ブラウザによっては最大化で良い感じに表示できるでしょう。

Kidspod; の投稿であれば、画像を入れずに一度投稿し、
その後再度再度編集にして、キャプチャした画像を追加すれば OK です。
一覧のサムネイル画像(縮小画像)は時間が経過すると反映されます。

画像を一覧させましょう

Kidspod; ふうせん Fu-sen. 投稿一覧

自分が入れている Kidspod; での一覧画面。
縦横比が違うものがありますが、全てキャプチャ撮影してます。
(IchigoJam BASIC の L チカのみ、IchigoJam 本体のボタン画像です)
すごい事をしているのに、プログラムだけ掲載して反応がないケースもあります。
ちゃんとした画像があると印象が変わってきますので、
入れておきたいところです。

注意事項

IchigoJam web by WebAssembly は カナ の扱いに問題があります。
(今の Web サイトは文字コード UTF-8 が主流なので……)

LattePlayer は使用するキャラクターコードやコマンドによって
動作に問題が発生する事があります。


IchigoJam Advent Calendar 2018