双方向チャット作成アプリ チャットラン

目次

シミュレーションモード

P2Pでの送受信プログラム①
双方向ネットワーク

チャットランとはシミュレーションモードについて
クライアント1の送受信プログラムの作成

P2Pでの送受信プログラム②
クライアント1の受信プログラムの作成
クライアント2送信・受信プログラムの作成

P2Pでの送受信プログラム③
メッセージの送信・受信
クライアント1

送信先の番号の指定・文字の編集をする

P2Pでの送受信プログラム④
送信ボタンを押したら入力フォーム内の文字を送信。その後入力フォームの文字を削除させる

P2Pでの送受信プログラム⑤
スタンプ・画像を送信するプログラム

P2Pでの送受信プログラム⑥
メッセージ、スタンプ、画像を受信するプログラム

P2Pでの送受信プログラム⑦
P2P通信

クライアントの送受信のまとめサーバを介した送受信プログラム①

サーバの起動方法
サーバのメッセージ・スタンプ・画像を更新を通知するプログラム
サーバを介した送受信プログラム②
サーバを介したクライアントの送受信プログラム

まとめ
クライアント・サーバのプログラム例

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム①
双方向ネットワーク

シミュレーションモード

チャットランとはブロックを組み合わせてプログラムを作り、チャットアプリを作ります。
クライアント役はメッセージや画像、スタンプを別のクライアントやサーバへ送ります。
サーバ役はクライアント役から受信したメディアを接続中のクライアントへ転送します。

シミュレーションモードについて

シミュレーションモードは、PC1台でクライアント役を2名、サーバ役を1名で同時に動作させるモードです。正式版のクライアント役、サーバ役を割り振る場合には、それぞれのモードで起動して通信を行ってください。

クライアント1の送受信プログラムの作成①イベントカテゴリにある「開始ボタンを押したら」を②右の領域へドラッグ＆ドロップする。

1
2③処理カテゴリにある④「0番にテストとメッセージを送信」を「開始ボタン押したら」の下にくっつける。

3
接続可能な場合に黄色い線が表示されます

4

双方向チャット作成アプリ チャットラン

双方向ネットワーク チャットラン 使い方
シミュレーション
シミュレーションモード
P2Pでの送受信プログラム②モード②
クライアント1の受信プログラムの作成①イベントカテゴリから②「クライアントがメッセージを受信したら」を右の領域に配置する。

1

2③処理カテゴリから④「チャット画面の表示を更新する」を右の領域に配置する。

3

4「画面の表示を更新する」は「表示を新しくする」という意味です。新しい言葉が届いたら表示が新しくなります。

クライアント2送信・受信プログラムの作成⑤「クライアント2」のタブを選択し、クライアント2にもクライアント1と同様のプログラムを作成する。

5

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム③

シミュレーションモード

クライアント1 送信先の番号の指定・文字の編集をする
通信するクライアント2の「生徒番号」を入力。（クライアント2は初期設定で生徒番号は「3」）※番号入力は半角数字で入力する。

「テスト」をクライアント2に送りたい文字に変更する。

※クライアント2の送信先はクライアント1になるので、「生徒番号」には「1」を入力してください。
（クライアント1は初期設定で生徒番号は「1」）〈設定タブ〉について設定タブ生徒番号の確認・変更が行えます。
その他、アイコンの変更、クライアント名の変更が行えます。

メッセージの送信・受信

開始ボタンを押すと、チャット画面が表示されるとともにクライアント2に文字が送信されます。
（クライアント2でも同様に開始ボタンを押すとチャット画面が表示され文字がクライアント1へ送信されます）

開始ボタンが緑色になればプログラムが実行されています。

送信 5
受信

チャットの実行画面

チャットの送信・受信のプログラム

次に文字を送信する場合は、開始ボタンを押してOFF（グレー表示）にした後に文字を変更し、再度開始ボタンをクリックし実行します。

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム④

シミュレーションモード

送信ボタンを押したら入力フォーム内の文字を送信。その後入力フォームの文字を削除させる〈プログラム例〉<チャット画面>

3

1

2<プログラム動作>① 「開始ボタン」を押すとチャット画面が表示されます。
② 入力フォームにメッセージを入力してください。
③ 「送信ボタン」を押すとメッセージが送信されます。
送信したメッセージが表示されます。
④ 送信したメッセージが削除されます。

3

4

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム⑤

シミュレーションモード

スタンプ・画像を送信するプログラム〈スタンプを送信するプロブラム〉<スタンプを送信するプログラムの操作手順>① 「スタンプ選択ボタン」を押す。
② スタンプが表示されます。スタンプを選択。
③ 送信したスタンプが表示されます。

〈チャット画面〉

2

3

1〈画像を送信するプログラムの操作手順〉① 「画像添付ボタン」を押す。
②
画像が保存してあるフォルダを表示し、画像を選択。
③
送信した画像が表示されます。

〈チャット画面〉

2
3

1

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム⑥

シミュレーションモード

メッセージ、スタンプ、画像を受信するプログラム

各送信プログラムの作成を行ったら、受信プログラムも作成してください。

「チャット画面の表示を更新する」は「表示を新しくする」ようにプログラムを作ります。新しい文字、スタンプ、画像が届いたら表示が新しくなります。

〈メッセージを受信するプログラム〉〈スタンプを受信するプログラム〉〈画像を受信するプログラム〉〈各メディアの送受信画面例〉

メッセージの送受信画面例

スタンプの送受信画面例

画像の送受信画面例

双方向チャット作成アプリ チャットラン

P2Pでの送受信プログラム⑦
P2P通信

シミュレーションモード

クライアントの送受信のまとめ〈クライアント1〉〈クライアント2〉

クライアント1とクライアント2のみの通信(P2P通信)を行う場合は上図のようなプログラムを互いに作成する必要があります。

双方向チャット作成アプリ チャットラン

サーバを介した送受信プログラム①

シミュレーションモード

サーバの起動方法①②③

サーバのタブの開始ボタンをクリック。
開始ボタンが緑になればサーバが起動します。
ログエリアが表示されます2

1

3

サーバのメッセージ・スタンプ・画像を更新を通知するプログラム※「クライアント全員に更新を通知する」というのは、クライアント全員の「表示画面を新しくする」という意味です。新しい文字、スタンプ、画像がサーバに届くとクライアント全員に送信されると同時に、サーバのログエリアにその情報が記録されていきます。
〈サーバ プログラム例〉

双方向チャット作成アプリ チャットラン

サーバを介した送受信プログラム②

シミュレーションモード

サーバを介したクライアントの送受信プログラム

送受信〈P2P型〉
P2Pはクライアント同士の直接の通信なので、送信と受信のプログラムを両方ともクライアントに対してプログラムしてました。

〈サーバクライアント型〉
これから作成するプログラムは、サーバがクライアントの送受信を管理するプログラムです。複数人のクライアントがサーバに対してアクセスし、情報が新しくなっていれば(更新されていれば)それを画面に表示する仕組みです。

〈送信プログラム〉P2P通信時には「〇番に〇〇を送信する」といったブロックを使用していましたが、サーバを介した通信では、「サーバに〇〇を送信する」に置き換わります。

〈受信プログラム〉P2P通信時には「クライアントが〇〇を受信したら」といったブロックを使用していましたが、サーバを介した通信では、「サーバから更新の知らせが届いたら」に置き換わります。
これでクライアント間のメッセージ、スタンプ、画像の受信を行います。

双方向チャット作成アプリ チャットラン

まとめ

シミュレーションモード

クライアント・サーバのプログラム例〈クライアント1,2〉

メッセージ、スタンプ、画像の送信の他に、メッセージに「重要度」、「暗号化」の設定が行えます。

〈サーバ〉

メッセージ、スタンプ、画像の受信の他に、「禁止ワード」を条件にしたプログラムなども作成が可能

シミュレーション版はオフラインでクライアント同士、サーバクライアントの通信が体験できます。
正式版では、実際のネットワークを使用し、クライアント役、サーバ役に割り振り、複数人でのチャットが行えるようになっております。