(12)M5GOとUIFlowでプログラミング - 画像対応
じゃんけんプログラムでは、現在、グー、チョキ、パーの文字を表示させていますが、これを画像に対応させます。
事前準備
本当は、画像の表示にはUIFlowの画面から画像をM5GOに転送させたりしなければならないのですが、最初のM5GOのファームウェアの更新の際にampy経由で使用予定の画像についてはあらかじめ転送してあります。
まだ転送していないようであれば、必要に応じて、UIFlowをM5GOと接続し、DeviceFileManagerの「Add Image」からプログラムで使用する画像を転送してください。
UI部分への画像の追加
まずは、ImageをUI部分に追加し、位置を調整します。
Imageの詳細画面では、デフォルトの画像を設定することができます。
初期状態ではdefault.jpgです。
著作権について
ちょっと脱線しますが、大切な話ですので記載しておきます。
記事の最後に動作画面を掲載して動作イメージを示していますが、授業で利用する画像は「いらすとや」さんからじゃんけんの画像をお借りし、リサイズして使用しました。
授業の中で使用する分には著作権法上の例外（３５条）に該当するので法的に問題なく使用できるのですが、授業の中での使用以外では著作権法により著作者の権利が守られます。
私が再加工した画像ファイル自体をここで公開することは「いらすとや」さんの利用規約によりできませんので、ご了承ください。私は３５条適用対象の、教員という身分ではありますが、この記事自体は「授業の外」の扱いになり、３５条の適用外です。
なお、記事の最後、動作画面でいらすとやさんの画像を使用したものが出ているのは、著作権法上の例外「映り込み」に該当すると思われますので適正利用の範囲内だと考えています。（30条の２）
このように、個人利用の場合は問題ないでしょうが、今回に限らず、一般的に他者が作成した画像の使用時（特に公開を伴う場合）には利用するサイト等の利用規約に従い、著作権にご注意ください。
（ちなみに私が言うまでもないですが「いらすとや」さんの利用規約は、かなり利用者の裁量を大きくしてくれています。通常ではありえないくらいです。）
個人的な見解であり、精神論にはなってしまいますが、結局は他者の著作物を「使わせてもらっている」という著作者に対する敬意を忘れないことが大切なのではないかと思っています。
また、この辺りの話を授業で丁寧に行い、どのような場合にどのように適正利用ができるかを生徒に正しく理解させることも大切だと考えています。
学校の授業での利用は３５条により、著作権法による著作物の保護が強力に免除されている部分が大きいです。学校では、まとめとか、発表とかで他者の著作物を生徒が利用する場面も多いですし、教員も、授業で他者に著作権のある画像をバンバンつかいます（３５条適用）。
こんな状況ですから、ともすると生徒はネット上にある画像は勝手に使ってよいものだと認識しがちです。生徒には「あくまで、教育目的のために、授業の中で使用する分には免除されているんだよ」ということを教える必要があります。そう、あくまでも免除です。
さて、じゃんけんゲームの画像対応に話を戻しますが、使用する画像は、ご自分で用意するか、以下の画像を使用してください。
記事で公開するにあたり、自分で撮影した自分の手の写真をもとにした画像を作成しています。著作権は放棄しておりませんが、ご利用は自由に行ってもらって構いません。というか、一般の方の私的利用の範囲か、多分授業での利用になると思うので私の作成した画像にも例外が適用され、原則私の許諾なしで利用できると思います。解像度等をM5GOでの利用に合わせたものの公開とお考えください。
授業では、私は、この画像は、可愛くないので使用しておりません（笑）。あくまで、記事の公開にあたり、「画像は自分で作ってね」だと、「ちょっと突き放しすぎかなぁ」と思って作成したものです。
著作権法上の例外での使用とはいえ、授業で使用させていただくにあたり、「いらすとや」さんには感謝しかありません。ありがとうございます。
配布画像
画像への対応（プログラム部分）
前回、関数化しているので、処理の変更は、関数の中身を変更することになります。
まずは、最初から相手の手が表示されていては困るので、「初期化」関数の中で、「画像を隠す」ブロックで、相手の手の画像を隠します。
「相手の手を表示」関数を、相手の手に応じた画像表示をするように変更します。画像の重なりを防ぐため、一旦非表示にしてから再表示します。
「手を変更」関数も同様に変更して自分の手も画像で示すようにします。
これで、画像への対応が完了しました。
動作画面は以下のとおりです。
一区切り
授業としては、ここまでで「ネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題解決」で自分が思う「この程度は欲しいかな…」という最低条件は満たすかな、と思っています。
「ネットワーク」部分は広くはUIFlowや、ESPNowで、
「双方向性のある」は、じゃんけんゲームにおけるじゃんけんの手の送受信で、
「コンテンツ」部分は、じゃんけんゲーム、文字による手の表示、画像による手の表示
が該当すると思います。
このあとは、細かいプログラムの修正になり、概念的にはM5StickC Plusで行ったものとほぼ変わらないものとなります。
あくまで、この「M5GOとUIFlowで～」シリーズは「M5StickC Plus」で行った来た実践をもとに
LocalUIFlowも使用できるようになり（v.1.13.4に固定できるように）、
「M5StickC Plus」で行った実践の知見を踏まえ（画像への対応を後回しにするなど）、
現状のUIFlow1.0に合わせて（UIFlowの仕様が頻繁に変わる、特にESPNowの通信関係、今回は日本語変数の扱いがシリーズ途中で変わった…）、
M5GOでの実践に焼き直し（今年度M5GOで実践する機会を得た）
たものになります。
このあとは、本当に「じゃんけんゲームとしてどうか」というプログラムの内容の改善に移っていき、これはこれで生徒にやらせるとプログラミングとして本当に面白い部分になっていくと思いますが、授業時数の関係もあって難しいかもしれません。
…ということで、一旦このシリーズは一区切りとさせていただきたいと思います。ありがとうございました。
一応、今後、応用していくなら…ということで、M5StickC Plus版を再掲しておきます。