CIT経営開発ロゴ

サービス

AI導入支援

導入事例

インサイト

エンターテイメント

お知らせ

沿革･概要

お問い合わせ

お問い合わせ

Reskilling ❘ Programming

Robloxでプログラミング | APIと非同期処理

#リスキリング #レジリエンス #ICT教育 #ITスキル #プログラミング

RobloxでAPIと非同期処理を学ぼう
プログラミング

Robloxは知っていますか？

誰でも気軽にゲームを作ることができる便利なサービスです。

実はRobloxは外部のWebサイトと接続することができます。

実際のシステム開発でもよく使われる、APIと非同期処理について、Robloxを使って学んでみましょう。

  • 2015年

    創業

  • 120名

    従業員数

  • 2.3M

    月間UU

  • 1,800戸

    管理戸数

0. APIとはなんだろう？

APIとはなんでしょうか。

一言でいうと、API（Application Programming Interface）とは、「ソフトウェア同士が情報をやり取りするための窓口（インターフェース）」のことです。

わかりやすいように、レストランを例にして説明してみます。

1. レストランに例えると？

あなたがレストランでお客さんだとします。あなたはキッチンの奥でどうやって料理が作られているか詳しく知らなくても、メニューを見て「ウェイター」に注文を伝えれば、料理が運ばれてきますよね。

この関係をコンピューターの世界に当てはめると、次のようになります：

  • あなた（アプリ）： 情報を頼む側。

  • キッチン（サーバー）： 膨大なデータや複雑な仕組みを持っている側。

  • ウェイター（API）： 両方の間に入って、「リクエスト（お願い）」を受け取り、「レスポンス（お返し）」を届ける窓口です。

2. どうしてAPIが必要なの？

APIがあるおかげで、自分ですべてを作らなくても、他の人が作った便利な機能を自分のアプリで使えるようになります。

例えば、お店を紹介するアプリを作るとき、自分で世界中の地図を描くのは大変です。しかし、地図サービスが提供しているAPI（Google Maps APIなど）を使えば、簡単に自分のアプリに地図を表示させることができます。

3. APIはどうやって動くの？

APIとのやり取りは、主にインターネットを通じて、リクエストとレスポンスのキャッチボールで行われます。

  • リクエスト（お願い）： 「データをください（GET）」「新しく登録して（POST）」といったメソッド（命令）をAPIに送ります。

  • レスポンス（お返し）： APIが「はい、これです」とデータを返してくれます。このときによく使われるのが、人間にもコンピューターにも読みやすい「JSON（ジェイソン）」というシンプルなテキスト形式のデータです。

4. セキュリティも大切

APIは誰でも勝手に使えるわけではありません。大切な情報を守るために、「あなたは誰ですか？（認証）」と「あなたは何をしていいですか？（認可）」という確認の仕組みがあります。

多くの場合は、「APIキー」という専用のパスワードのようなものを使って、許可された人だけが使えるようになっています。

APIは、バラバラのソフトウェアやサービスをつなぐ「橋渡し」の役目をしています。私たちが普段スマホで天気予報を見たり、SNSでログインしたりできるのも、裏側でたくさんのAPIが働いてくれているおかげなのです。

1. APIを叩いてみよう

それでは、「天気情報API」のドキュメントを参考に、実際にAPIを「叩いて」みましょう。

プログラミングの世界では、APIを使って情報を取得することを「APIを叩く」と呼びます。やり方はとても簡単で、普段使っているブラウザ（Google ChromeやSafariなど）だけで試すことができます。

1. APIのリクエストURLを用意する

APIから情報を引き出すには、専用の住所のようなURLが必要です。今回の天気情報APIでは、以下のルールでURLが作られています。

  • ベースとなるURL： https://weather.tsukumijima.net/api/forecast

  • 場所を指定するID（city）： 地域ごとに決められた番号（例：福岡県・久留米は 400040）

これらを組み合わせると、情報を呼び出すためのURLが完成します。

久留米の天気を呼び出すURL： https://weather.tsukumijima.net/api/forecast/city/400040

2. ブラウザでアクセスしてみよう

作成したURLをコピーして、ブラウザのアドレスバーにそのまま貼り付け、エンターキー（Enter）を押してください。

すると、画面に文字がずらっと並んだ結果が表示されるはずです。これがAPIからの「レスポンス（お返し）」です。

3. 返ってきたデータを確認する

表示された文字の集まりは、「JSON（ジェイソン）」というコンピューターが読み取りやすいデータ形式で書かれています。よく見ると、次のような項目が見つかるはずです。

  • title：「福岡県 久留米 の天気」など、データのタイトル

  • forecasts：これからの予報データが入っている場所

  • telop：「晴れ」や「曇り」といった天気の名前

  • temperature：最高気温や最低気温

このように、APIを叩くことで、アプリの裏側でやり取りされている「生（なま）のデータ」を自分の目で見ることができます。

APIのドキュメントを読み、正しいURLを作ってアクセスする。たったこれだけで、世界中の便利なサービスとつながることができます。

今回はブラウザで確認しましたが、このURLをプログラムから呼び出すようにすれば、「自動で今日の天気を教えてくれる自分専用のアプリ」も作れるようになるのです。

2. APIで簡単なアプリを作ってみよう

それでは、APIを使って実際に簡単なアプリを作ってみましょう。

いきなりアプリを作るのは難しいので、まずはHTMLでAPIを叩くところからはじめてみましょう。

ソースコードは以下をコピーして使ってみましょう。

ですが、以下のコードは一部あえて記載していません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Step 1: コンソール確認</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

    <h1>Step 1: コンソールでデータを確認しよう</h1>
    <p>ボタンを押して、ブラウザの「デベロッパーツール（コンソール）」を見てください。</p>

    <button id="btn">データを取得してログに出す</button>

    <script>

    </script>
</body>
</html>

まだ埋められていない部分は<script>タグの中身です。

以下が最終的な完成形のコードのスクリーンショットですので、自分で処理を書き映してみましょう。

3. 非同期処理とはなんだろう？

実際のアプリ開発ではプログラムを使って自動的にデータを取得します。

その際、必ずと言っていいほどセットで登場するのが

「非同期処理（ひどうきしょり）」という考え方です。

なぜAPIを叩くときに非同期処理が必要なのでしょうか？

1. 非同期処理とは何か？

APIにリクエストを送ってからデータが返ってくるまでには、インターネットを通るため少し時間がかかります。この「待ち時間」にアプリが固まってしまわないよう、「裏側でデータを取ってきてもらいつつ、表側では他の動きを続ける」のが非同期処理です。

2. なぜAPIとあわせて使うの？

APIの処理には時間がかかることがあります（目安として1秒以上かかる場合など）。もし非同期処理を使わずにAPIを叩くと、データが届くまでの間、画面が真っ白になったりボタンが押せなくなったりして、「このアプリ、壊れたのかな？」とユーザーを不安にさせてしまいます。

アプリをスムーズに動かし続ける（即時性を保つ）ために、非同期処理は欠かせない技術なのです。

3. どんなときに使うのか？

  • 処理時間が長いとき

  • バックグラウンドで動かしたいとき

4. 便利なライブラリ「Axios（アクシオス）」

JavaScriptには、標準で非同期処理を行う仕組み（fetchなど）が備わっています。しかし、より簡単で便利にAPIを叩くために、「Axios」というライブラリ（便利な道具箱のようなもの）がよく使われます。

Axiosを使うと、複雑な設定を省略して、短いコードで「データを取ってくる（GET）」といった命令を書くことができます。また、エラーが起きたとき（通信失敗など）の処理も書きやすいため、プロの現場でも広く使われています。

4. もっとアプリっぽくしてみよう

先ほど作ったWebアプリは、コンソールに結果を出力するだけでしたね。

今度は、取得した情報から必要な個所を取り出して、ユーザーが使う画面に反映させてみましょう。

ソースコードは以下をコピーして使ってみましょう。

今回も以下のコードは一部あえて記載していません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Step 2: 画面反映</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

    <h1>Step 2: 取得したデータを画面に表示しよう</h1>
    <button id="btn">天気を表示する</button>

    <div id="display">
        <p id="city">（ここに地名が出ます）</p>
        <p id="weather">（ここに天気が出ます）</p>
        <div id="icon"></div>
    </div>

    <script>

    </script>
</body>
</html>

まだ埋められていない部分は<script>タグの中身です。

以下が<script>タグの中身の完成形ですので、自分で処理を書き映してみましょう。

5. Robloxの準備をしよう

それでは、Robloxの準備をしていきましょう。まずはRoblox Studioを立ち上げてください。

・新規バーチャル空間、をクリック

・セキュリティからhttpsの有効化

1. 敵のモデルを準備する

まず、出現させたい敵（ゾンビなど）を1体用意します。

  1. Toolboxから好きなNPC（「Zombie」など）を探してWorkspaceに置きます。

  2. その敵のモデルを ReplicatedStorage というフォルダの中にドラッグ＆ドロップして移動させます。

  3. ToolboxからClassicSwordを選択してStarterPackに入れる（ポップアップで自動で入るかもしれません）

  • 理由：Workspaceに置いておくと最初からゲーム内に存在してしまいますが、ReplicatedStorageに入れておけばスクリプトで必要な時だけ呼び出せます。

PrimaryPart（基準点）を設定する

  1. ReplicatedStorage の中に入れた敵のモデル（Zombieなど）をクリックします。

  2. Properties（プロパティ） ウィンドウを見て、「PrimaryPart」 という項目を探してください。

  3. そこが空欄（Blank）になっていたら、空欄をクリックしてから、モデルの中にある 「HumanoidRootPart」（または Head や Torso）を直接クリックして指定してください。

これで「ここを基準に移動させるよ」という目印ができるので、スクリプトが動くようになります。

2. 出現場所（スポナー）を作る

敵がどこから現れるかを決めます。

  1. Workspaceに新しい Part（パーツ） を作成します。

  2. 名前を「Spawner」に変更し適当な位置へ移動させます。

  3. Anchored（アンカー） をオンにして動かないようにします。

3. スクリプトを書く

「一定時間ごとに、敵をコピーして、スポナーの位置に出現させる」という命令を記述します。

  1. 先ほどの Spawner パーツの中に Script を追加し、以下のコードを貼り付けてください。

Workspace / Spawner

に作成するScript

-- 設定
local enemyModel = game.ReplicatedStorage:WaitForChild("Zombie") -- 敵の名前
local spawner = script.Parent
local spawnInterval = 10 -- 何秒ごとに湧くか

-- 無限ループ
while true do
	task.wait(spawnInterval)

	-- 敵をコピー（複製）する
	local enemyClone = enemyModel:Clone()

	-- 出現位置をスポナーの場所に設定する
	enemyClone:SetPrimaryPartCFrame(spawner.CFrame)

	-- Workspace（ゲーム画面）に出現させる
	enemyClone.Parent = game.Workspace
end

4. APIを叩くスクリプトを作る

ServerScriptService、に新しくScriptを作成して、以下のコードを貼り付けて下さい。
※APIのパスワードを入力する箇所がありますが、学習の際に口頭でお伝えします。

ServerScriptService

に作成するScript

local HttpService = game:GetService("HttpService")
local Players = game:GetService("Players")

-- ここに叩きたいAPIのURLを記述（GETパラメータもここに含める）
local apiUrl = "https://script.google.com/macros/s/AKfycbxxJLoSnbLThfYuzlGAiWBF7bP4HJEgmA7Pzk7GlVjWnN6uKB-gX772IJKLXrF2HGgY/exec?password=****&text=太郎が死亡"

-- プレイヤーが入室したときの処理
Players.PlayerAdded:Connect(function(player)
	-- キャラクターが出現（スポーン）したときの処理
	player.CharacterAdded:Connect(function(character)
		local humanoid = character:WaitForChild("Humanoid")

		-- 死亡（体力0）を検知
		humanoid.Died:Connect(function()
			
			-- 外部APIへのリクエスト実行
			local success, result = pcall(function()
				return HttpService:GetAsync(apiUrl)
			end)

			-- 結果の確認（デバッグ用）
			if success then
				print("APIリクエスト成功:", result)
			else
				warn("APIリクエスト失敗:", result)
			end
		end)
	end)
end)

6. アレンジしよう

おおまかな流れは理解できたでしょうか？プレイヤーや敵をツールボックスから選択して配置、そして各種設定を行ったり、Scriptを追加してゲームを作り上げていくことができます。

外部との通信もできます。APIを使って自分なりにアレンジしたRobloxを作ってみましょう！

アレンジする際は、チャットAIをフル活用してください。Robloxは設定項目が多いので、どこになにを設定したらよいか？もきいてみてくださいね。

・本講座の制作
CIT経営開発事務所

・監修
CIT経営開発事務所　代表
井上 隆寛（いのうえ・たかひろ）

IT･事業コンサルタント
IT･開発エンジニア
行政書士R6合格者未登録

大手システム開発会社にてSE兼Webデザイナーとして従事。2021年にコンサルタントとして独立し、企業に対するITコンサルティング・ソリューション導入支援事業を開始。2023年にはイベント企画・運営事業を新たに展開、2024年には行政書士試験に合格。現在はIT・AIコンサルティング、システム開発、エンターテイメントの3事業を柱に、企業の技術顧問や講師としてICT教育やプログラミング授業も手がける。

公開中のリスキリング体験授業・学習教材

リスキリングに役立つ学習教材や体験授業を公開しています。ご自身の学習にお役立てください。

  • 2015年

    創業

  • 120名

    従業員数

  • 2.3M

    月間UU

  • 1,800戸

    管理戸数

イベント

イベント

タレント

タレント

制作素材

制作素材

レジリエンス

レジリエンス

リスキリング

リスキリング

お問い合わせはこちら

ご不明点やご相談はお気軽にご連絡ください。
専門コンサルタントが丁寧にサポートいたします。

採用について

共に挑戦し、成長し合える仲間を求めています。
少しでも興味を持っていただけたら、まずは気軽にご連絡ください。

TOP

サービス

エンターテイメント・リスキリング講座

INSIGHTS セミナー･情報提供

導入事例

お知らせ

概要・沿革

お問い合わせ

お問い合わせ