ラベル プログラミング の投稿を表示しています。 すべての投稿を表示
ラベル プログラミング の投稿を表示しています。 すべての投稿を表示

2022年9月30日金曜日

【副業に? 簡単スマホ・アプリ製作入門01】 お手軽・簡単にスマホアプリを開発しよう!

  さてみなさんこんにちは。

 

 ふだんは三線を弾いたり、作ったり、いろんなものづくりをしている左大文字ですが、今年の夏はうちの小学生の息子がプログラミングで「ゲーム作り」 に励んでいたので、そのお手伝いをしていました。


 その様子は、過去のブログ記事にまとめています。


【夏休み 小学生 自由研究】 プログラミングして、ゲーム機を作ろう!01

 https://sanshinism34.blogspot.com/2022/08/blog-post.html 



 うちの息子の場合はゲームを作っていたのですが、そのノウハウを流用すると、かなり簡単に

 

「アプリ製作体験」

 

ができるので、そのやり方をまとめてみようと思います。大人の自由研究ですね!

 

==========

 

 

 今回から実践するのは、iphoneやAndroid向けの「アプリ」を、かなーり敷居の低い感じで作っていこう!というものです。

 小学生でも使っているツールを使って作るので、まさしく小学生でもアプリ開発ができると思います。

 

 使うのは、スクラッチ (SCRATCH)

 


 https://scratch.mit.edu/ 


です。いわゆるコードを書かない「ノンコード」のプログラミング環境としては、こども向けながらものすごいポテンシャルを秘めているので、ぜひ活用したいところ。


 いろんなものが作れるので、実用的なアプリが製作できたら、「副業」でアプリ開発などに発展させてもよいと思いますよ~。


※ スクラッチは無料で利用できます。アカウントを取得する必要があるので、メールアドレスなどをご用意ください。


必要環境

デスクトップ

Chrome (バージョン63以上)

Edge (バージョン15以上)

Firefox (バージョン57以上)

Safari (バージョン11以上)

Internet Explorerはサポートされていません。

 

OS:

Windows 10 バージョン1709以上

MacOS 10.13以上

ChromeOS 

Android 6.0以上 (タブレットのみ)

 

========


 さて、実際の製作に入る前に、ハードウエアがらみの選定をしておきましょう。いちおうスマホなどで動作するアプリを想定していますが、ハードによって多少の制約があります。

 


<iOSの場合>

 iPhone・iPadどちらでも動作させることができますが、iOSの仕様上、「インターネット上にあるプログラム」を動かす形になります。

 そのため、ネットに繋がっている状態、が必須になりますのでご注意ください。

 Safari11以降のブラウザで動作します。


<Androidの場合>

 Androidバージョンが5.0以降の機種が望ましく、スマホやタブレット内に保存したアプリを動作させることができます。開発はタブレットのみ。

 Android4.4でも動作実績がありますが、すべての機種とはいかないようです。実際にはHTML5とWebGLの動作環境によって、動くか動かないかが分かれるようです。

 Chrome63以降のブラウザで動作します。



==========


 それでは実際にアプリを開発してゆきましょう!


 Scratchのアカウントを取得したら(←簡単です)

 

◆ 上部の「作る」のボタンを押す

 

ことからはじめましょう。おなじく上部のメニューに

 

◆ チュートリアル

 

があるので、さらっとみておいても構いません。基本的な考え方としては

 

◆ 左の列(倉庫みたいなもの)から動作させる命令ブロックをもってくる

◆ 中央の空白のところでブロックを組み立てる

◆ 右の上部に実際の動作画面が表示されている

◆ 右の下部で動かせるスプライトを選ぶ・コントロールする

◆ 最右部で背景を選ぶ・コントロールする

 

という感じです。

 

 言葉で書いていてもわかりにくいので「世界で一番簡単な実用アプリ」を作ってみました。

 

 ラーメンタイマー

 

です。3分しか計れません。

 

3分タイマー

https://scratch.mit.edu/projects/735283905/ 

 



 緑の旗をクリックするとプラグラムが動き始めます。「押す」のボタンを押すと、3分後にアラームサウンドが鳴る、というプログラムを書いています。



========

 

 

 スクラッチでは「中を見る」というボタンでプログラムの内部がどうなっているか見ることができます。また自分で改造することも可能です。


 ごく基本的なプログラムなので解説します。まず右から見てゆきます。



<ステージ>

 背景を設定しています。スクラッチのサンプルから選びました。

 動きはなにも設定していません。

 

<スプライト>

 実際に何か動作するものは「ボタン」ひとつです。ボタンのイラストをサンプルからもってきており、そのボタンが押されるとプログラムが動きます。


 このボタンはプログラムが動く前と後とでデザインが変わるようにしています。


 <コード>

 コード・コスチューム・音とタグが名らんでいますが、

 

 コード → 動き

 コスチューム → ボタンやキャラクターの形状

 音 → つけるサウンド

 

と思ってください。自由に組み立てることができます。

 

 コード、つまり本体のプログラムはとてもシンプルです。

 

1) 緑の旗が押されると準備に入る。つまり、ボタンが準備状態になる

2) ボタンが押されると180秒カウントする

3) 180秒後に、ボタンの表示を変更して音を鳴らす

 

というものです。



==========

 

 こうやって実際に作ってみると、たしかに「3分タイマー」はそのように動き、アプリとして使えるわけですが、3分のうち「どこまで時間が進んだか」などがまったくわからず、

 

「実用的じゃない」

 

ことも同時に見えてくると思います。そうなんです!世の中に出回っているアプリやソフトは、そういう部分、不親切な部分も極力無くして、「使いやすいように」作られているわけです。

 

 では、同じスクラッチで、かなり実用的な3分タイマーを作っておられる人がいるので、それも参考に動かしてみてください。

 

 カップヌードルを食べるためのタイマー

 https://scratch.mit.edu/projects/236511374/ 

 

 この方の作品は、きちんと秒数までカウントダウンするようになっています。中を見るとわかりますが、数字の各桁を毎秒書き換えるようにプログラムされており、とてもめんどくさいことをやっていることがわかると思います。

 

 その手間の分だけ、使う人にとってはやさしいアプリになる、ということですね。

 

 

(つづく)

 



2022年8月27日土曜日

【夏休み 小学生 自由研究】 プログラミングして、ゲーム機を作ろう!02 ハードの選定


 

 さてみなさんこんにちは。 


 前回から引き続いて、「夏休みの自由研究でゲームを作る」というネタをやったうちの息子ですが、学校でもなじみがある


 スクラッチ

https://scratch.mit.edu/

 

 

を使って開発したい!ということで、ご自由に作っていただきました。父はプログラムの作成についてはノータッチです。

 

 ソフトウエア設計は息子におまかせでしたが、ハードウエアとのすり合わせはいろいろと制約もあるので、お手伝いをしました。

 

 その細かなTipsを残しておきます。

 

 

<1 スクラッチをスマホやタブレットで動かす>

   スクラッチを動かす、スクラッチが動くとは2つの意味があります。

 

まず、「スクラッチ開発環境が動き、そのハードウエアの上でスクラッチでプログラムが組める」、という意味。

そして、 「開発はそのハード上ではできないけれど、作品は動作する」という意味です。


 スクラッチの公式見解では、基本はブラウザ上で動作しますから、


デスクトップ

Chrome (バージョン63以上)

Edge (バージョン15以上)

Firefox (バージョン57以上)

Safari (バージョン11以上)

Internet Explorerはサポートされていません。

 

ということになります。 これで、いわゆる通常のパソコン、PCやiPad上で開発ができる、ということになるでしょう。(キーボード必須)

 

 なおかつ、

 

OS:

Windows 10 バージョン1709以上

MacOS 10.13以上

ChromeOS 

Android 6.0以上 (タブレットのみ)

 

とあるので、これらのハードでも「開発」ができます。 


 うちの子の場合は、学校でChromeBookを使っているので、それに似たPCでのブラウザ環境で製作しました。


結局 「Linux mint」のノートパソコンと「iPad 第7世代+キーボード」を併用しながら作っていたようです。



=========


 今度は「動かす」場合です。これも考え方がいろいろあって、


◆ ネットに繋がっていて、ネット上の作品を動かす場合

と

◆ ネットから切り離れていて、オフラインで作品を動かす場合

 

の2つがあるでしょう。

 

 

 

<2 スクラッチをPC上で動かす>

 ゲームを作りました!という作品づくりにおいて、結局「PC」上で動かす場合は、あまり制約がありません。

  作品をスクラッチのサイトに公開しておいて、それをもって作品提出、とするのであれば、けっこう簡単に課題終了です。

 

 というのも、スクラッチのプログラミングは基本的にはキーボードがあり、そのキーボードを叩いてコントローラとするので、いわゆるふつうのパソコンで動かす場合は、簡単なのです。

 

 

 

<3 スクラッチをスマホやタブレットで動かす>

  基本動作がキーボード必須ということは、タブレットなどで動かす場合は

 

◆ タッチパネルを使う

か

◆ 外部コントローラを使う

 

かの選択が生まれます。

 

 タッチパネルを使う場合は、プログラム内のマウスの動き(位置)とボタン押下を判定して、それをタッチにみたてる仕組みを書き込みます。

 

(これは作例がいろいろ載っているので、ググってみてください)

 

 今回うちの子は、画面上に上・右・左ボタンを表示させて、そこのタップを入力としているようです。

 

※注意※ 

  設計ベースがマウスなので、「マルチタッチ」が効きません。これはスクラッチの仕様と思われます。

 なので、右ボタンを押し続けながらジャンプ!とかができないことになります。瞬時に右と上を切り替えながら押す必要があります。難易度高め。

 

  外部コントローラを使う場合はMicrobitが使えるので、マイクロビットが使える状態にしてプログラムを組んでやれば、無線コントローラになります。

 

 ニンテンドースイッチっぽいことができる、というわけです。

 

マイクロビットとの接続法

 https://scratch.mit.edu/microbit

 



<4 ネットのある・なしで動作法が異なる>


 できた作品を「Wifi環境があるおうちとか、学校で楽しんだり披露したりする」のであれば、

 

◆ スマホ タブレット iPhone iPad (ブラウザ経由)

 

などで動かすことができます。 いわゆる、スクラッチのサーバー上にある作品を、そのままブラウザで動かすという方法なので、シンプルです。

 Wifiにさえ繋がっていれば、スマホでもタブレットでもiPhoneでもiPadでも動かせます。


 しかし、提出する学校がWifi環境になく、また持ち込んだハードをWifiに繋げないなどの制約がある場合は、「ハードの内部に、ファイルとして作品を持っておく、記録しておく」必要があります。

 いわゆるオフライン動作、スタンドアロン動作をさせる、ということです。

 

 この場合は

 

◆ アンドロイドのスマホ・タブレット  WindosMobileの最終版スマホ(HTML経由)

 

でしか動かせません。

 

 どういうことかというとiOSでは、内部ファイルとして作品を保存し、持って置けないので、エラーが出るのです。実際にファイルとして保存しても、動きません。

 アンドロイドと、最終版Windows10Mobileのものでは動作確認しました。 もう、WindowsMobileは終了しているので、古いスマホがある場合は、ゲーム機として使えます。


 スクラッチの実行ファイルは、TurboWarp というスクラッチのファンである有志のサイトで変換できます。

 

【スクラッチで作品づくり】→【公開】→【ターボワープサイトで変換】→【HTMLファイルをダウンロード】


という流れです。


ターボワープ

https://turbowarp.org/

 

 


<5 古いスマホやタブレットでも動く>

 おうちにある古いスマホやタブレットを使う場合、考え方は以下のとおりです。


◆ iPhone系 → ネット環境があれば動く。ブラウザSafari11以上(iOS11)

◆ Android系 → アプリ版スクラッチを動作させるにはAndroid6以上

◆ Android系 → HTML化すればAndroid5以上(Chrome63以上が動くから)

◆ Windows10Mobile → OSが最終版であれば動く可能性大(1703・1709)


※Android4以下は動かないです。



=========


最終的にできた作品は

 

丹波篠山巡り

https://scratch.mit.edu/projects/723422409/

 

です。スクラッチのサイトにあります。

 

 

2022年8月26日金曜日

【夏休み 小学生 自由研究】 プログラミングして、ゲーム機を作ろう!01 自作ゲーム機まとめ


 


 

 さてみなさんこんにちは。

 

 大人のお盆休みはとっくに終わり、いよいようちの小学生の子供たちの夏休みも残すところ数日です。

 

 コロナ禍なので、海やら山やらと飛び回るわけにもいかず、どちらかというとインドアで過ごしたうちのj家族ですが、今年は小学5年生の息子が

 

 プログラミング ゲーム機づくり

 

に挑戦しました。 その備忘録です。

 

 小学生の子供たちにとって、特に男の子なんかには「ゲームを作る」というのは夢の工作ですが、 古くはMSXでBASICを走らせたりしたものです。(古いわ)

 

 わたくし左大文字は昭和49年生まれなので、かろうじてMSXを知っていますが、昔はカセットテープにゲームを保存したり、そりゃあもう、アナログなんだかデジタルなんだか。

 

 

 しかし、昨今はゲーム機づくりの環境も、「めちゃんこ整って」います。整いすぎて、何をどうしていいかわからないくらい!!

 

 ラズベリーパイ(Raspberry Pi)を使ったものなどは、 性能が高いので、アーケードゲームを移植して動かせたりします。

 

 

Game HAT

 

GPi case

 

 ↑これらのように、けっこういろんな会社からゲームコンソールが出ていますが、どちらかというとプログラミングして自分の好きなゲームを作るというよりは、「すでにある名作ゲームを自作機で動かす」という用途が主になるでしょう。

 

 

==========

 

 さて、8ビット系のレトロゲームのクローンをプログラムしたり、あるいはすでにあるコードを修正してみたりする場合は、比較的動作が複雑でない「Arduino」系のゲーム機を自作するのがいいかもしれません。

 

 

Arduino 系自作ゲーム機 総まとめ

https://kotaro-yoshiie.blogspot.com/2021/11/arudino-tinyjoypadarduboy.html


 こちらは、電子工作寄りです。コンピュータとしては基礎的ながら、ハンダ付けなどの作業が主になり、小学生では難易度が高いかもしれません。

 その代わり、ハードウエア設計の自由度が高いと思います。
 


========


 小学生向きなのは、いわゆる「プログラムを書く」「コードを書く」という作業のない、ビジュアルブロックでプログラムを組んでゆくシリーズでしょう。

 

マイクロソフト ゲームコードアーケード

https://arcade.makecode.com/ 



 このシリーズは開発環境が「Make Code Arcade」で、実際に走らせるハードは数社から発売されています。


↑ 写真のものは「Meowbit」というハード。このほかにも「Brainpad Arcade」とか「GameGo」といった互換機ハードがいろいろあります。

 

========

 

 ハードとソフトのシームレスな融合という意味では、マイクロソフトのシリーズを使うのがベターかもしれませんが、小学校レベルのプログラミング現場ではやっぱり

 


 「スクラッチ」

 https://scratch.mit.edu/

 

が人気です。基本的にはPC上で動作させるのですが、作例が山ほどあり、かつ学校現場でもスクラッチであれば取り組んでいるところがたくさんあるので、とっつきやすいと思います。

 

 

 そこで、今回のうちの子の「ゲーム機づくり」は

 

◆ 開発環境はスクラッチで

◆ 動作環境はスマホまたはタブレットで

 

という形にしました。他のプログラミング環境では、ハードを別に買ってこないといけないのですが、おおむねハードの値段が6000円~10000円します。

 

それに対して、スマホやタブレットで動かせるのであれば、本来のハードの価格は高いですが、すでにおうちで使われなくなったものがあったり、家にある通常のスマホなどで実行ができるので、

 

「とりあえずは、よけいなお金をかけなくて済む」

 

というメリットがあります。 ニンテンドースイッチが19800円から出ているのに、10000円も払ってレトロゲーム機を作るというのも、コスト的にどうかな?という部分もあるでしょう。


(まあ、ハード作りは体験なので、体験を買うと思えば高くないのかもしれませんが)

 

 



 というわけで、タブレット対応の「タッチパネルで動かせる」ゲームを開発した経緯を引き続きまとめてゆきます!