ネットワークプログラム
導入テキストチャットアプリを作ろう！
＜基本編＞

１章. ソフトの説明とアプリ作成手順·············· 3
１-1. ソフトウェアを起動する ···················· 3１-2. 画面説明 ········································ 4１-3. アプリ作成の手順 ····························· 6２章. チャットアプリ作成の準備 ··················· 8２-1. 画面の作成 ····································· 8２-2. プログラムの作成 ····························· 9２-3. アプリを実行する。 ························ 11３章. 通信プログラムの作成 ······················· 12３-1. プログラムの作成 ··························· 12４章. ネットワークの設定 ·························· 17４-1. サーバを起動する ··························· 18４-2. サーバに接続する ··························· 19５章. チャットアプリを実行する ················· 22

1

ソフトの説明とアプリ作成手順

１章. ソフトの説明とアプリ作成手順
コロックルソフトではネットワークを利用したアプリをかんたんに作ることができます。
このテキストではかんたんなチャットアプリを作る方法を解説します。

ネットワークアプリ作成画面

ネットワークアプリ実行画面

１ -1. ソ フ ト ウ ェ ア を 起 動 す る① 「CLOCK」 フ ォル ダ を ダブ ル クリ ッ クし

② 下図 の アイ コ ンを ダ ブル クリ ッ クし まて開 き ます 。

す。

ダブルクリック

ダブルクリック③ 「ネ ッ トワ ー ク」 の 「フ ロー チ ャー ト 」④ 作成 画 面が 表 示さ れ ます 。

をク リ ック し ます 。

クリック

3

ソフトの説明とアプリ作成手順

１ -2. 画 面 説 明
ネットワーク画面は大きく「コンテンツ作成エリア」と「プログラミングエリア」に分かれています。
また、ネットワーク通信を設定する専用画面があります。
プログラミングエリア

コンテンツ作成エリア

ネットワーク設定画面

4

ソフトの説明とアプリ作成手順

コンテンツ作成エリア
アプリの操作画面を作るエリアです。
機能一覧から色々な機能をコンテンツ作成エリアに配置して、位置や大きさ、色などを編集してアプリの画面をデザインします。
ボタン機能：マウスでクリックできるボタンを配置します。
テキスト表示機能：テキストを表 示 でき る エリ ア を配 置し ま

リスト表示
エリア

す。
リスト表示機能：テキストをリスト表示できる機能です。表示方法の違う 3 種類があります。

ボタン(チャット風など)
入力バー：最初から配置されている機能です。文字の入力に使用します。

プログラミングエリア
プログラムを作成するエリアです。
プログラムは配置した機能ごとにフローチャートで作成します。
文字を表示する
プログラム

ボタンがクリックされたときのプログラム5ソフトの説明とアプリ作成手順

１ -3. ア プ リ 作 成 の 手 順
1. どんなアプリを作るか決める
先ず、どんなアプリを作るかを考えます。

どんなアプリを作ろうかな…

（このテキストでは簡単なチャットアプリを作ります。）

2. どんな機能が必要かを考える
考えたアプリに必要な機能は何かを考えます。

どんな機能が必要かな…

（チャットアプリには「入力した文字を送信する機能」「文字を受信して表示する機能」が必要です）

3. アプリの操作画面をデザインする考えたアプリに必要な機能をコンテンツ作成エリアに配置して操作画面をデザイン(作成)します。
（今回はリスト C を配置して文字を吹き出しで表示する簡単なデザインにします。）

4. プログラムを作る
画面の作成が終わればアプリのプログラ

文字を送信するプログラム

ムをフローチャートで作成します。
プログラムは配置した機能ごとに作成します。
（今回は入力バーの中に「入力した文字を送信するプログラム」、リスト C の中文字を表示する
プログラムに「文字を受信して表示するプログラム」を作成します。）

6

ソフトの説明とアプリ作成手順

5. ネットワークを設定するネットワーク通信を行うための設定を行います。
コロックルソフトでは校内 LAN の中にコロックル専用のネットワークを作ることが出来ます。
ネットワークの中心となるサーバと、サーバにつながるクライアントの設定を専用画面で簡単に行えます。
サーバ

6. アプリを実行する作成したアプリを実行します。
ツールバーの実行ボタンをクリックするとアプリが実行(実行画面が表示)されます。

チャットアプリの実行画面

7

クライアントチャットアプリ作成の準備

２章. チャットアプリ作成の準備
ここからは実際にチャットアプリを作っていきます。
先ずは準備として入力した文字を画面に表示させるプログラムを作成してみましょう。

クリック

２ -1. 画 面 の 作 成
最初にチャットアプリの画面を作成します。
画面はボタンやリストなどの機能をコンテンツ作成エリアに配置して作成します。
今回は入力した文字が吹き出しのように表示される画面にします。
コンテンツ作成エリア

機能一覧① コン テ ンツ 作 成エ リ アに リス ト C を ドラ ッ グし ます 。
ドラッグ
リスト C を配置するとエリアが青くなります。

リストは文字を改行して表示する機能です。Ａ、Ｂ、Ｃの 3 種類あり、リストＣは吹き出しのように文字を表示します。

8

チャットアプリ作成の準備

２ -2. プ ロ グ ラ ム の 作 成
次にプログラムを作成します。プログラムは機能ごとに作成していきます。
ここでは入 力バ ーの中に入力文字を表示するプログラムを作成します。

入力バーのプログラム① 入力 バ ーを ク リッ ク しま す。

タブ が 入力 バ ーに な るこ とを 確 認し ま す。

プログラミングエリアは選択した機能ごとに切り替ります。タブの表記でどの機能のプログラムなのかを確認することができます。
クリック
入力バー

入力バーは最初から表示されている機能です。
実行画面で文字を入力するのに使用します。

② 表示 ブ ロッ ク を配 置 しま す。

ドラッグ

表示ブロックは画面に文字を表示させる命令ブロックです。ここではリスト C に文字を表示させる為に使用します。

9

チャットアプリ作成の準備③ 表示 ブ ロッ ク をダ ブ ルク リッ ク する と 設定 ウ ィン ドウ が 開き ま す。 「 リス ト」 「 リス ト １」
「表 示 する 」 「入 力 変数 」を 選 択し て OK ボ タ ン をク リ ック し ます 。
ダブルクリック

入力変数とは入力バーに入力された文字を一時的に保管しておく場所の事です。

注意 リストなどの機能は同じ種類を追加するごとに末尾の数字が増えて行きます。一度追加すると削除しても番号が戻る事はありません。
上記では「リスト１」となっていますが、リストを一度削除して新たに追加した場合「リスト２、３…」となっている場合があります。
配置したリストをクリックして、タブに表示されている番号を確認しましょう。

④ ブロ ッ クを 接 続し ま す。
クリック

ドラッグ

クリック
ドラッグ

プログラムの流れ
このプログラムは入力バーへの文字の入力が確定した時点で動作します。
文字入力が確定すると動作する。

10

チャットアプリ作成の準備

２ -3. ア プ リ を 実 行 す る 。
① ツー ル バー の 実行 ボ タン をク リ ック す ると 実 行画 面が 表 示さ れ ます 。
クリック

実行画面

② 入力 バ ーに 文 字を 入 力し て確 定 ボタ ン を ク リ ック しま す 。
クリック③ 入力 し た文 字 が表 示 され る事 を 確認 し ます 。

④ 確認 が でき れ ば画 面 右上 の×を ク リ ック し て実 行 画面 を 閉じ ま す。
クリック

今回のように｢文字入力が確定した｣プログラムが実行される“タイミング”ですなどのタイミングで動作するプログ
ラムを｢イベント駆動型プログラム｣といいます。また、このタイミングの事をイベントと呼び、コロックルでは文字入力確定の他に｢ボタンがクリックされたとき｣や｢プログラムが実行されたとき｣など、色々なイベントがあります。
イベントはイベントブロックで設定します。

11

通信プログラムの作成

３章. 通信プログラムの作成
ネットワークにつながったほかのパソコンとデータの送受信をしましょう。ここでは 2 台のパソコンでコメントを送りあうプログラムを作成します。

ネットワーク通信のしくみ
コロックルではネットワーク通信を行う為に独自のサーバを起動します。このサーバを介してデータを共有することができます。
コロックルソフトが※ネットワーク通信を行う場合は、サーバ役が必ず必要です。

起動したサーバ

サーバ

クライアントクライアントクライアント３ -1. プ ロ グ ラ ム の 作 成
先ほど作った「文字を表示するプログラム」を、「データを送受信して表示するプログラム」に変更します。

入力バーのプログラム
入力バーのプログラムの内容を変更します。

① 入力 バ ーを ク リッ ク しま す。
クリック

12

通信プログラムの作成② 表示 ブ ロッ ク を削 除 し、 送受 信 ブロ ッ クを 配 置し ます 。

送受信ブロックはサーバと通信する為の命令ブロックです。
ここではサーバに入力した文字を送信する為に使用します。

③ 追加 し た送 受 信ブ ロ ック をダ ブ ルク リ ック し て開き、 「 送信 す る」 「 サー バの 【 (S)デ ー タ１ 】 に【入 力 変数 】 を送 信 する 」と な って い るこ と を確認し て OK ボ タ ンを ク リ ック し ます 。

④ メッ セ ージ ブ ロッ ク を配 置し ま す。 イ ベン ト →送 受信 → メッ セ ージ → 終了 の順 に ブロ ッ クを接続 し ます 。

メ ッ セ ー ジ ブ ロ ッ ク は他のプログラムに｢メッセージ｣という信号を送ります。このメッセージという信号は他のプログラムを動かすタイミングを指定する為に使います。
イベント
ブロック

後に続く命令を実行する

13

通信プログラムの作成

リストのプログラム
配置したリストに新たにプログラムを作成します。

① 配置 し たリ ス ト C をク リッ ク しま す 。

クリック② イベ ン トブ ロ ック を ダブ ルク リ ック し て開 き 、「 メッ セ ージ を 受け た 時」 ｢メッ セ ージ 1｣に設定 し て OK ボ タン を ク リッ ク しま す 。
ダブルクリック

14通信プログラムの作成③ 送受 信 ブロ ッ クを 配 置し ます 。

「受 信 する 」 を選 択 し、 「ク ラ イア ン トの 【(C)デー タ １】 に サー バ の【 (S)デー タ１ 】 を受信 す る」 と して OK ボ タン を クリ ッ クし ま す。
ダブルクリック④ 表示 ブ ロッ ク を配 置 しま す。

「リ ス ト」 「 リス ト １」 「表 示 する 」 「 (C)デ ー タ１ 」 に設 定 しま す 。
ダブルクリック※リストの番号はタブを見て確認してください。

⑤ イベ ン ト→ 送 受信 → 表示 →終 了 の順 に ブロ ッ クを 接続 し ます 。

15

通信プログラムの作成

プログラムの流れ
入力 バ ーとリス トのプログラムが、メ ッ セー ジの信号により連動して動作します。

リストのプログラム

入力バーのプログラム①文字を入力して確定する④メッセージを受ける②サーバに文字を送信する⑤サーバから文字を受信する③メッセージを送信する⑥受信した文字をリストに表示する

ここまでで作ったプログラムを保存しましょう。
このプログラムは「発展編」でも使用します。
名前を付けて保存しておいて下さい。

次の項では通信をするためにネットワークの設定を行います。

16

ネットワークの設定

４章. ネットワークの設定
ネットワークにつながった他のパソコンと通信する為にはそれぞれのパソコンをサー バ、ク ライ ア ント に設定する必要があります。

サーバとクライアントについてサーバとはネットワークにつながったパソコンに様々なデータを提供するコンピュータ、またはソフトウェアのことです。一般的なサーバには、データファイルの共有や保管に使うファイルサーバ、プリンタの共有管理をするプリントサーバ、電子メールを管理するメールサーバなど様々な種類があります。
コロックルではネットワーク上のパソコンに専用のサーバを起動させ、独自のネットワークを構築する事ができます。
サーバにアクセスするパソコンをクライアントといいます。クライアントはサーバにアクセスしてデータの読み書きをする事ができます。
コロックルソフトが起動したサーバ

サーバ

クライアントクライアントクライアントネットワークの設定は専用の設定画面で行います。
メニューバーの【ネットワーク】→【サーバ／クライアント設定】を選択して設定画面を開きます。

17

ネットワークの設定

４ -1. サ ー バ を 起 動 す る
2 人でペアを組み、2 台のパソコンのうち 1 台でサーバを起動します。
サーバを起動するサーバ

クライアント① サー バ 、ク ラ イア ン トの 「サ ー バ」 を 選択 し ます 。

①② ユー ザ 名設 定 欄に ユ ーザ 名を 入 力し ま す。

（ユ ー ザ名 は サー バ 名と 兼用 と なり ま す。 ）

③

④
②
⑤

③ ｢サー バ の起 動 」ボ タ ン を「 ON」に し ます 。

④ ｢サー バ とし て 起動 中 」 と表 示 され ま す。

⑤ 自身 の ユー ザ 名が ク ライ アン ト 名と し て表 示 され ます 。

18

ネットワークの設定

４ -2. サ ー バ に 接 続 す る
もう一台のパソコンをクライアントとしてサーバに接続します。
サーバに接続するサーバ

クライアント① サー バ 、ク ラ イア ン トの 「ク ラ イア ン ト」 を 選択しま す 。

①

⑤

④

② ユー ザ 名設 定 欄に ユ ーザ 名を 入 力し ま す。

（ユ ー ザ名 は クラ イ アン ト名 と なり ま す。 ）

②

③

⑥

③ 接続 す るサ ー バを 選 択し ます 。
サーバ名の一覧には教室内で起動しているサーバが全て表示されます。

④ 「サ ー バへ 接 続」 ボ タン が「 ON」に な りま す 。

自分が接続するサーバ名を選んで接続ボタンを ON にしてください。

⑤ ｢クラ イ アン ト とし て 起 動中｣と 表示 さ れ ま す 。

⑥ 設定 が 終了 す れば｢OK ボ タン｣を クリ ッ クし て 設 定画 面 を閉 じ ます 。

サーバ名が表示されない場合画面右上の「更新」ボタンをクリックしてください。

19

ネットワークの設定

サーバでのクライアント接続の確認
サーバの設定画面に接続されたクライアント名があるか確認します。
※サーバを起動したユーザ名もクライアントとして表示されます。
サーバ機の設定画面接続されているクライアントの一覧（自身もクライアントとして表示される）クライアント名が表示されない場合クライアント側の画面でサーバへの接続をやり直してください。

接続設定が終了すればサーバ機の設定画面を閉じてください。

20

ネットワークの設定

通信チェック画面での確認
2 台のパソコンで通信が行える状態になっているか確認します。

① メニ ュ ーバ ー の「 ネ ット ワー ク(N)」 →｢通 信 チェ ック(C)｣をク リ ック し て 通信 チ ェッ ク 画面を開 き ます 。 （2 台 と も ）クリック② どち ら か一 方 の画 面 の OK ボタ ン を クリ ッ クし ま す。 ボ タン を クリ ッ クし た画 面 では｢送 信OK｣、 も う一 方 の画 面 で は「 受 信 OK」 と 表示 さ れる こ とを 確 認し て くだ さい 。
また 、 送信 者 の IP アド レス が 一致 し てい る かも 確認 し てく だ さい 。

クリック

③ 確認 が 終了 す れば こ の画 面は 閉 じて く ださ い 。
クリック

21

チャットアプリを実行する

５章. チャットアプリを実行する① ツー ル バー の 実行 ボ タン をク リ ック し て実 行 画面 を表 示 しま す 。
クリック

実行画面

② 入力 バ ーに 文 字を 入 力し て確
定ボ タ ンを ク リッ ク します。

クリック

③ 入力 し た文 字 が表 示 され る事 を 確認 し ます 。

｢リスト C｣では、自分が送った文字は画面の右から、自分が送った文字相手が送った文字は画面の左から表示されます。

相手が送った文字④ 確認 が でき れ ば画 面 右上 の×を ク リ ック し て実 行 画面 を 閉じ ま す。
クリック

22

チャットアプリを実行する

まとめ
リストのプログラム

入力バーのプログラム

データの流れ

①

サーバ

PC1

③

サーバ

② メッセージを送る

入力した文字をサーバに送信する※メッセージはネットワークにつながっている全てのパソコンのプログラムに届く

PC2

PC1

④ 受信したデータを表示する

サーバのデータを受信する※送信側、受信側、どちらにも同じデータが表示される。

※メッセージを受けると受信側のプログラムが動く

PC1

PC2

PC2

PC1

23

PC2

チャットアプリを実行する

ネットワークの構築に付いてここでは 2 人だけ通信しましたが、3 人以上でもネットワークを構築して通信する事ができます。
この場合、1 台のパソコンでサーバを起動し、その他のパソコンはクライアントとして起動したパソコンに接続させます。
起動したサーバ

サーバ

クライアントクライアントクライアントまた、サーバは教室内に複数起動させる事ができます。
それぞれのサーバにクライアントを接続することで教室内にいくつものネットワークを構築する事ができ、例えば班ごとにグループを作り、そのそのグループの中でチャットを行うなどの使い方ができます。
※クライアントが接続できるサーバは 1 つだけです。

クアイアントサーバ

ネットワーク１

ネットワーク 2
クアイアント

クアイアント

クアイアントサーバ

クアイアント

クアイアント

クアイアントサーバ

ネットワーク 3

ネットワーク 4
クアイアント注意

クアイアント

1 台のサーバに多くのクライアントを接続するとサーバのパソコンに負荷がかかり動作が不安定になる場合があります。

【→ 発展編に続く】

24