インターネットにはたくさんのコンピュータがつながっています。その中には,私たちに有益な情報を提供してくれるコンピュータもあります。その有益な情報をなでしこで利用してみたいと思います。

プログラムを作りながら,ネットワーク上の情報を利用する仕組みネットワークの仕組み情報セキュリティについて理解しよう。

4-1. ネット上の情報を受信しよう

まずは,次のサンプルプログラムを実行してみてください。実行して少し待っていると,たくさんのカワイイ動物たちに出会えます! 何度も実行してみてください。

クリック

サンプル1 イヌ

サンプル2 キツネ

サンプル3 ネコ

このプログラムは,次のように動作しています。それぞれ,プログラムの何行目で処理しているか,考えてみよう。

  • インターネット上で情報を提供するサービス(API)から,情報を受信する。
  • 受信した情報を解析(デコード)して,変数に格納する。
  • 変数の中に入っているデータを利用して,目的の処理をする。今回はイヌやキツネの写真を表示しています。

4-2. APIを使って情報を受信する

インターネットとは,世界中の小さなネットワーク同士をつなげて作られた,世界規模の巨大なネットワークです。そこには,たくさんのコンピュータが接続されており,それぞれのコンピュータには多くの情報が保存されています。

しかし,それぞれのコンピュータに保存されている情報を,私たちが自由に使うことはできません。そこで,私たちにとって有益な情報を提供してくれるプログラムがAPIです。

例えば,私たちは次のようなAPIを利用することができます。

  • 自分のコンピュータのIPアドレスを取得するAPI(https://api.ipify.org)
     →これを使ったサンプルはこちら
  • 各地の天気予報を取得するAPI(https://api.aoikujira.com/tenki/week.php?fmt=json)
     →これを使ったサンプルはこちら
  • 各地の天気予報を取得するAPI(https://weather.tsukumijima.net/)
     →これを使ったサンプルはこちら
  • 郵便番号から住所を取得するAPI ※当サイト限定
     →これを使ったサンプルはこちら
  • 新型コロナウィルスの新規陽性者数を取得するAPI ※当サイト限定,厚生労働省のオープンデータを利用しています。
     →これを使ったサンプルはこちら。応用編はこちら。作り方の解説はこちら
  • かわいいイヌの写真を取得するAPI(https://dog.ceo/api/breeds/image/random)
     →これを使ったサンプルはこちら
  • かわいいキツネの写真を取得するAPI(https://randomfox.ca/floof/)
     →これを使ったサンプルはこちら
  • かわいいネコの写真を取得するAPI(https://aws.random.cat/meow)
     →これを使ったサンプルはこちら
  • 他にも,インターネット上にはたくさんのAPIがあります。

APIを利用するときは,次のプログラムのようにそのアドレス(URIやURL)を指定してAJAX受信という命令を使います。

!非同期モード
API=「https://api.ipify.org」。  // #1 IPアドレスを取得するAPI
APIからAJAX受信。                 // #2
対象を表示。

#1 … 変数APIに,利用するAPIのアドレス(URI)を代入します。

#2 AJAX受信 … 指定したAPIから情報を受信して,対象という変数に格納します。

4-3. 受信した情報を利用しよう

受信した情報は,ほとんどの場合は文字の情報です。そのまま利用できるときもあれば,少し加工が必要なときもあります。

先ほどの,自分のIPアドレスを取得するプログラムの場合は,対象という変数にIPアドレスの文字列(xxx.xxx.xxx.xxxという形式)が入っています。

他に,文字の情報がグループ分けされて返ってくることがあります。例えば,キツネの写真を取得するAPIを実行すると,次のような情報が返ってきます。

{
  "image" : "https://randomfox.ca/images/**.jpg",
  "link"  : "https://randomfox.ca/?i=**"
}

このように,文字の情報が分類されて返ってくる形式をJSON形式と呼んでいます。これは最近のインターネット上で多く用いられる形式です。JSON形式で情報を受信したとき,なでしこではJSONデコードという命令を使って,プログラムで扱いやすい形式(辞書型配列)に変換します。

次のプログラムは,キツネの画像を取得するプログラムです。読み解いてみよう。

!非同期モード
API=「https://randomfox.ca/floof/」。
APIからAJAX受信。

対象をJSONデコードしてSに代入。    // #3

S@["image"]を絵追加。              // #4

Sを反復                            // #5
  「{対象キー}:{対象}」を表示。
ここまで。

#3 JSONデコード … 受信した情報(対象という変数に入っているデータ)はJSON形式なので,これを辞書型配列形式に変換して,変数Sに格納します。

#4 S@[“image”] … 変数Sに入っているデータを使うときは,このように(アットマーク)と[ ](角カッコ)を使って取り出します。この例ではimageというキーを指定してS@[“image”]と書くと,対応するデータである https://randomfox.ca/images/**.jpg を取り出せます(上の緑色の枠の中をよーく見てください)。

#5 … この3行で,JSONデコードされた変数Sの内容( 上の緑色の枠の中と同じ情報)を,全て画面に表示します。どんな情報を利用できるのかを,このように調べてから,どんなプログラムを書こうかなと考えればよいと思います。

他のサンプルプログラムでも,同じ方法で情報を利用しています。ぜひ,サンプルプログラムを開いて,プログラムを読み解いてみてください。

そして,仕組みが分かったらプログラムを改良して,自分の目的に合う情報を利用してみよう!


4-4. 情報セキュリティって何だろう?

インターネット上にある情報には,インターネットにつながっている(接続されている)コンピュータの中に保存されているファイルや,そのコンピュータで実行したプログラムが処理した結果などがあります。上の例でみたキツネの画像も,そのコンピュータに保存されている画像ファイルでした。

では,みなさんのコンピュータに保存されている写真を,プログラムで絵追加してみましょう。

クリック

(1) なでしこパッドの下方にある[メディアのURL]というボタンをクリックします。

(2) 画像を選ぶダイアログが表示されるので,表示させたい画像を1つ選びます。

(3) なでしこパッドに,不思議な文字列が入力されます。ファイル名じゃないぞ…??

(4) その文字列の後ろに を絵追加。 と入力して実行すると…。選んだ写真が表示されました!

(5) [△LSに一時保存する]ボタンをクリックして,このプログラムを一時保存します。

(6) なでしこパッドをリロード(再読込)します。

(7) 先ほど一時保存したプログラムを読み込みます。

(8) 読み込んだプログラムは,先ほどと同じものですよね。実行してみると…,今度は画像が表示されません! なぜだろう??

なぜ,このような面倒な仕組みになっているのだろう? その理由を「他のコンピュータへ侵入しようとする人の立場」で考えてみよう

4-5. インターネットを安全に利用するために

インターネットはいつでも,どこでも,だれでも,自由に利用できるから便利だよね。でも,不正利用される危険もたくさんあるから,こうやって情報セキュリティの技術が利用されて,みんなのコンピュータや情報が守られているんだよ。上で利用したキツネの画像や,様々なAPIは,誰でも安全に利用できるように用意されているんだね。

他にはどんな情報セキュリティの技術があるのか,どんな役割を果たしているのか,調べてみよう。

そして,みんながインターネット上に情報を発信したり,インターネット上の情報を受信して利用したりするときに,どんなことに気を付けたらいいか,考えてみよう。

4-6. 分かったかな?

ここまで上手くいったか,プログラムを実行して確かめてみましょう。

  • APIを利用して,インターネット上のコンピュータから情報を受信できたかな。
  • 受信した情報を利用して,絵や文字を表示させることができたかな。
  • 4-4にある情報セキュリティの体験は,うまくできたかな。

次の項目についてふり返ろう。

  • インターネット上のコンピュータから情報を受信する AJAX受信 という命令の使い方が分かったかな。
  • 特別な変数 対象 から,受信した情報(データ)を取り出す方法が分かったかな。
  • 不正アクセスを防ぐために,情報セキュリティ技術が利用されていることが分かったかな。

目次にもどる