ネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題の解決数量用
1.ソフトウェアについて2.ソフトウェアの基本操作
1.ソフトウェアについて
ソフトウェアの立ち上げ。 . .本テキストでは[smalruby3]を使用してコンテンツの制作を行います。 Webブラウザを開いて下記URLにアクセスし、[smarluby3]を立ち上げてください。 ●ソフトウェアURL https://www.artec-kk.co.jp/dl/smalruby/サポートOS: Windows10/Chromebook/iPadOSインターネット接続環境が必要です。 ※上記URLで提供している[smalruby3]は、アーテックオリジナルバージョンです。当社によるサポート対象は上記バージョンのみとなります。ブロックパレット：センサーやアクチュエータへの命令が表示されます拡張プロック：各種拡張プロックが追加されますスクリプトエリア：命令をつないでプログラムをつくることができますスクリプトとは？・・・・5ページ参照スプライトリスト：プログラム内で使用するキャラクターが表示されますスプライトとは？・・・・4ページ参照
2.ソフトウェアの基本操作
①スプライトの追加
スプライトの追加をする場合は、スプライトエリア右下部の[スプライトを選ぶ]からスプライトを追加します。
△スプライトをアップロード
ファイル参照画面が開きます。ファイル保存先を参照してファイルを選択してください。
Bサプライズ
ソフトウェアに標準で準備されている画像の中からランダムにスプライトが追加されます。
日描く
ペイントエディターが開きます。
国スプライトを選ぶ
ソフトウェアに標準で準備されている画像の中からスプライトを選択します。 C Dスプライトとは・・・。コンピュータの画面上で画像や図形を動かす表現を実現する仕組みのひとつで、各画像を背景と別に作成し、それらを合成する仕組みです。この仕組みを使って表示される各画像のこともスプライトとよびます。スプライトは主に、コンピュータゲームなどで用いられている手法です。 ②プログラムの作成方法■スプライトの切り替えプログラムはスプライトごとに作成します。スプライトエリアの各スプライトをクリックすることで、ここに表示されているスプライトのプログラムがスクリプトエリアに表示されています。スクリプトとは・・・。簡易的なプログラムとして用いられる用語で、スクリプトを作成するための言語を[スクリプト言語]と呼びます。スクリプト言語は機械語への翻訳を必要とせずにプログラムを実行することができ、特定のアプリケーションの動作など簡単なプログラムに用いられています。用途を限定しているため、構造自体も本格的なプログラミング言語よりも簡単に作成できます。
◆プログラムの作成
ブロックパレットにある命令をおもちゃのブロックのようにつなぐことでプログラムをつくります。
◆ブロックの削除
削除するブロックをブロックパレットにドラッグ＆ドロップします。
◆ブロックの複製
つながっているブロックを複製できます。つなげたブロックの一部分だけ複製したい場合は、その部分を抜き出して同じ操作を行います。
◆取り消し
スクリプトエリアで右クリックをして表示されるメニューから取り消しを押すことで、一つ前の状態に戻すことができます。
◆プログラムの保存方法
① [ファイル]から[コンピュータに保存する」を選択します。双方向性のあるコンテンツとは情報通信ネットワークの構成と仕組み

コンテンツとは・・・
英語で[内容]を意味する言葉で、情報の世界ではディジタルで取り扱うことができる情報の内容のことをさし、 [文字、図形、色彩、音声、動作もしくは映像もしくはこれらを組み合わせたもの]があげられます。
双方向性のあるコンテンツ
テレビ番組のようにメディアから視聴者へ向けて一方向から発信されるコンテンツに対して、テレビゲームのように操作(入力される情報)によってその場その場で発信されるコンテンツが変化するようなものを双方向性のあるコンテンツといいます。近年ではインターネットの登場により､情報の発信者は一度に多くの人に情報発信するということが可能となったのと同時に、ネットワークを通じて情報の受け手から反応を確認するといった、発信者と受信者の間における「双方向性」のある情報のやり取りが容易にできるようになりました。例えば、ディジタル番組での視聴者参加型コンテンツのように閲覧者からの入力情報に応じて必要な情報を配信するなど双方向で必要な接点を持つことができることがネットワークを利用した双方向性のあるコンテンツの大きな特長です。受け取るだけではなく、発信もされる情報-方向のコンテンツと双方向のコンテンツの例を考えよう

ネットワークとは・・・
複数のコンピュータやプリンタなどの機器を接続し、お互いに通信できるようにした状態のこと。接続する方法にはケーブルを使用して接続する有線接続と電波などを利用した無線接続があります。

情報通信ネットワーク
テレビや電話、パソコンなど様々な機器が接続され、情報を相互にやりとりできるネットワークのことを情報通信ネットワークといい、近年ではエアコンなどの家庭用電気製品も情報通信ネットワークに接続できるようになってきています。
LANとWAN
LAN (ラン)とは、Local Area Network (ローカルエリアネットワーク)の頭文字をとったもので、家庭や学校などの限定された範囲を接続したネットワークのことです。 WAN (ワン)とは、Wide Area Network (ワイドエリアネットワークの頭文字をとったもので、電話回線または専用回線などを使いよりLAN同士をより広い範囲で構成されたネットワークのことです。
インターネット
インターネットもWAN (ワン)のひとつで、世界中のコンピュータ同士がクモの巣のようにつながった大きなネットワークになります。
IPアドレス
手紙を送るときに相手の住所がわからないと正しい送り先に手紙を届けられないのと同様に、コンピュータ等の情報機器がネットワーク上でデータをやりとりするときも住所に相当する識別番号が必要になります。インターネットに接続されている全ての情報機器にIPアドレスという識別番号が割り当てられています。 IPアドレスはインターネットに接続された他の機器と重複しないように割り当てられます。現在広く使われているlPv4という方式では0 ～ 255の数字4組を[.]で区切った数値として表現されます。 (近年lPv4で表現できるIPアドレスでは足りなくなってきており、IPv6方式へ移行が進んでいます。)同一LAN内でも下図のように[192.168.・・・]というように同一LAN内で接続された情報機器が重複しないようにIPアドレスが割り当てられます。須数のPCをネットワークで1.ネットワークをつなぐ(メッシュのホストになる) 2.ネットワークをつなぐ(メッシュに参加する) 3.メッセージブロックをつかってお互いに信号を送る4.変数をつくってネットワークで共有する
①画面左下の[拡張ブロック]をクリックし、 [メッシュ]を選択します。 ②メッシュのホストになる【※※※※】が表示されたら[接続する]を選択します。 ※※※※※ににはランダムな文字列が表示されます。 ③下図のように[Mesh]とよばれる新しいブロックがブロックパレットに追加されます。ネットワークにうまく接続できない場合は次の方法を試してみてください。表示されているURL http://app.artec-kk.co.jp/smalruby/の後に[?mesh=(任意の半角英数字10文字以下) ]を入力してください。例) http://app.artec-kk.co.jp/smalruby/?mesh=password15通信させたい端末それぞれ共通の半角英数を追加してください。例:この場合、[?mesh=password15]を付けたiPad同士でのメッシュのホストに参加できます。 URLに[?mesh=(半角数字で10文字以下)]を入力すると、ローカルネットワークに接続された端末以外の外部のネットワークの端末で設定されたホストにも参加できるようになります。授業で使用する場合は同時に使用している他の学校のホストに参加してしまわないように、郵便番号や電話番号など、重複しにくい文字列を設定してください。
①ローカルネットワーク接続された別の端末、もしくは新たに別のブラウザ画面を立ち上げて、 smalruby3を起動させてください。 ②画面左下の[拡張ブロック]をクリックし、[メッシュ]を選択します。 ③以下の画面が表示されたら、[メッシュに参加する]の[接続する]を選択してください。 ※この時、[メッシュのホストになる]を選択すると、新たなホストができます。 ④下図のように[Mesh]とよばれる新しいブロックがブロックパレットに追加されます。ここを選択すると、ネットワークの情報が表示されます。 Smalruby3では、ネットワークをつなぐことにより、以下のことが可能になります。
参考変数ってなに？
変数は数字を入れて保存しておくことができる箱と考えることができます。箱に名前を付けておくことで色々なところで中身を取り出して確認することができます。箱の数字を変えるだけで、たくさんの式を一度に変更できます。
ネットワークでつながれた複数のコンピュータでお互いに信号を送る方法を確認しましょう。 ①一方のPC (送信側)でイベントカテゴリから　 (gt-s)・ sso をスクリプトエリアにならべましょう。 ②ネットワークでつながれた別のPC (受信側)で以下のようなプログラムを作成しましょう。メッセージ1の名前は任意に設定できますが、必ず受信側と送信側のブロックの名前は同じにしてください。メッセ-シリ・ exs をクリックするとネットワーク経由でメッセージ(信号)が送られ、 ③送信側PCの受信側PCの「 … →  … ………以下につながれたプログラムが実行されます。ここでは受信側PCのスプライトが信号を受け取る度に15度ずつ回転します。
4.変数をネットワークで共有する
変数を作成し、ネットワークでつながれた複数のコンピュータで変数を共有する方法を確認しましょう。 ①一方のPC (送信側)で変数カテゴリで[変数を作る]をクリックして表示されたウインドウで新しい変数名をしていして作成します。 ②作成した名前の変数が使用できるようになります。(ここでは[テスト1]という変数名を用いています。)ステージには変数の値が表示されます。初期値は0となっています。チェックマークが付いている変数の値がステージに表示されます。 ③下図のブロックに任意の値(文字列でもよい)を入力してクリックすると変数の値が変化することを確かめてください。 ④ ①〜②と同じ手順でネットワークでつながれた他のPC (受信側)でも任意の変数を作成してください。 (ここでは[テスト2]という変数名を用いています。) ⑤ PC (受信側)に以下のようにMeshブロックをならべて、変数ブロックに[テスト2]、 Meshブロックに「テスト1」を選択します。 ⑥ ⑤で作ったブロックをクリックして実行すると、③で送信側で設定した変数の値が、受信側の変数に反映されます。デャットアプリの
1.アクティビティ図2.アクティビティ図に対応したプログラミング(送り手側のPC) 3.アクティビティ図に対応したプログラミング(受け手側のPC) 4.繰り返しメッセージを送るプログラムへの改良5.双方向コミュ二ケーションの実現発展課題①　チャットアプリの改善点を考えよう発展課題②　グループチャットができるプログラム発展課題③　グループチャット内で特定のメンバーにダイレクトメッセージを送るネットワークを利用して複数のPC間でメッセージのやり取りを行えるチャットアプリのプログラミングを学習しましょう。
1.アクティビティ図
プログラムを作成する基になるアクティビティ図を作成しメッセージの送信手順を分解しましょう。
アクティビティ図とは・・・・
フローチャートとは違い、[並列処理]が表現できる。凡例
：出力に関する処理：入力に関する処理：並列、非同期の処理開始(Fork node)と終了(Join node) 2.アクティビティ図に対応したプログラミング(送り手側のPC) ①送り手側のプログラムを作成するために、好きなスプライトを選びます。 □  □   ※ ②調べるカテゴリからあなたの名前は何ですか？」と聞いて待つをスクリプトエリアにドラッグし、「文章は？」と入力します。文章は？と聞いて待っ③変数を作成します。ここでは変数名を[メモ用紙]にします。 ※ [すべてのスプライト用]として変数を作成してください。このブロックを使うと入力欄が表示され、ステージ上で好きな文章を入力できるようになります。入力した文章は「答え」に格納されます。 ⑤動作を確認してみましょう。並べたブロックをクリックして実行すると、スプライトから[文章は?]と吹き出しが出ます。入力欄に入力した文章が「メモ用紙」変数の値として格納されます。ここまでが、アクティビティ図の[1]のプログラムになります。 [1]自分のメモ用紙に書く文章は？と聞い物つの下につなげ、調べるカテ④変数[メモ用紙]をゴリから（愛）をドラッグして、変数の中に挿入します。 ⑥ [イベント]カテゴリからメッセージ1・）を起るをドラッグしてプログラムの下につなげ、新しいメッセージを作成します。ここでは「入力した文章」としています。この部分がアクティビティ図の[2]のプログラムになります。 [2]書いたことを伝達する⑦ [イベント]カテゴリから…がクリックされたときをドラッグしてプログラムの上につなげることで、    をクリックしたらプログラムが動作するようになります。
3.アクティビティ図に対応したプログラミング(受け手側のPC)
①ネットワークでつながれた別のPCを受け手側としてプログラムを作成します。送り手側と同じスプライトを作成しましょう。をスクリプトエリアにドラッグし、送り手側で作成した② [イベント]カテゴリからメッセージ1 ・を受け取ったときメッセージとまったく同じ文字を入力して新しいメッセージを作成します。 ※アルファベットの全角・半角が異なったり、漢字変換の際に異なる漢字に変換されていないか注意。この部分がアクティビティ図の[3]のプログラムになります。 [3]伝達を受けるこんにちは）と言うをドラッグして入力した文章・・を受け取ったときの下につなげます。この部分がアクティビティ図の[4]のプログラムになります。 [4]書いた人のメモ用紙を読む
メッセージの送信プログラムの完成イメージ
4.繰り返しメッセージを送るプログラムへの改良
5.双方向コミュニケーションの実現
ここまでのプログラムでは一方が送り手側、もう一方が受け手側となっています。お互いでメッセージをやり取りする双方向コミュニケーションを実現できるように、それぞれのPCに送り手側と受け手側のプログラムを追加しましょう。 ①プログラムを作成するために、新しいスプライトを追加します。スプライトの名前の変更方法スプライトの名前はここで変更できます。ここではそれぞれ「田中」「鈴木」と設定しています。 ②以下のようにそれぞれ送り手側･受け手側のプログラムを作成します。それぞれの変数名・メッセージプロック文算は？）と聞いて待つ（こ答え）を挿入することで、自分が入力した文章(送った③送り手側のプログラムのメッセージ)を表示できるようになります。
チャットアプリの完成イメージ
発展課題①　チャットアプリの改善点を考えよう●チャットでメッセージをやり取りする中で、問題点や改善点を見つけて、どのような機能があると、より安全で便利か考えましょう。例①
特定のメッセージを受け取ったときにのみ表示させるスプライトを作成する。 ①絵文字として表示したいスプライトを追加します。 ②以下のように絵文字のスプライトを特定のメッセージ(ここでは[ハート])を受け取ったときのみ表示するプログラムを作成します。 o 1ここでは1秒間だけ表示させて消えるようにしています。 ③受け手側のスプライトに、以下のようなプログラムを追加します。
送り手側のスプライトに以下のようなプログラムを追加します。プログラムを実行すると、以下のようにメッセージが表示されます。
②自分(ここでは田中)のスプライトには送り手側のプログラムを、他のスプライトには、それぞれの生徒の受け手側のプログラムを作成します。田中以外のグループメンバーのPCもどうように、自分のスプライトには送り手側のプログラム、他のスプライトにはそれぞれの生徒の受け手側のプログラムを作成して、ネットワークでつなぐことで、グループチャットができます。 ①人数分のスプライトを作成しましょう。 (ここでは3人グループを想定して3つのスプライトを作成します。)
①送信するかしないかを決めるための変数を作成します。田中から佐藤へ田中から鈴木へ②自分(ここでは田中)のスプライトに右図のようにそれぞれの変数値を指定するプログラムを追加します。 ③他のスプライトに以下のように相手に送信するかどうかの選択用のプログラムと、相手からのメッセージを受け取るかどうかを決めるプログラムを作成します。 ! !　メッセージを受けるかどうかの判定プログラムは受け手側で作成する必要がある。 - - - 043499   K0222