応用情報技術者試験に出たUSER-AGENT、WEBSOCKET、マッシュアップ、メディアクエリの違いを徹底解説！

こんにちは、皆さん！システムエンジニアとして日々の仕事をしながら、こうしてブログを書いています。今日は、高校生の皆さんにもわかるように、ちょっと難しそうな「USER-AGENT」「WEBSOCKET」「マッシュアップ」「メディアクエリ」について一緒に勉強していきましょう！応用情報技術者試験を目指している人にとっても役立つ内容になっているので、ぜひ最後まで読んでくださいね。

USER-AGENTとは？

まずは「USER-AGENT（ユーザーエージェント）」について解説します。USER-AGENTとは、ブラウザやアプリが自分のことをサーバーに紹介するための名刺みたいなものです。インターネット上であなたが使っている端末の情報をサーバーに伝える役割をしています。

例えば、パソコンでGoogle Chromeを使っている場合、USER-AGENTは「この人はWindowsでGoogle Chromeを使っていますよ」とサーバーに教えてくれるんです。サーバー側ではその情報をもとに、あなたの使っている端末に最適なページを表示します。

USER-AGENTのサンプルコード

以下のコードは、JavaScriptでUSER-AGENTの情報を取得する例です。

console.log(navigator.userAgent);

実行結果:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

これを見ると、使っているブラウザやOSの情報がわかりますね。例えば、「Windows NT 10.0」はWindows 10を意味し、「Chrome/116.0.0.0」はGoogle Chromeのバージョンを示しています。

WEBSOCKETとは？

次に「WEBSOCKET（ウェブソケット）」についてです。WEBSOCKETは、ブラウザとサーバーの間で「リアルタイム通信」を実現する技術です。普段使うインターネットの通信は、リクエストとレスポンスのやり取りが一回一回行われる「HTTP通信」が一般的です。でも、これだとリアルタイムでのやり取りには向いていないんです。

WEBSOCKETを使うと、一度接続が確立された後は、サーバーとブラウザが自由にデータを送り合えるようになります。これにより、チャットアプリやオンラインゲーム、リアルタイムで株価を更新するようなアプリがスムーズに動作するんです。

WEBSOCKETのサンプルコード

以下は、JavaScriptでWEBSOCKETを使って「Hello, World!」とサーバーに送る例です。

const socket = new WebSocket('ws://echo.websocket.org');

socket.addEventListener('open', (event) => {
    console.log('WebSocket接続が確立しました');
    socket.send('Hello, World!');
});

socket.addEventListener('message', (event) => {
    console.log('サーバーからのメッセージ:', event.data);
});

実行結果:

WebSocket接続が確立しました
サーバーからのメッセージ: Hello, World!

このコードでは、ws://echo.websocket.orgというテスト用サーバーを使って、メッセージを送信しています。サーバーがメッセージをそのまま返してくれるので、リアルタイムでの通信を簡単に体験できますね。

マッシュアップとは？

続いて「マッシュアップ」について説明します。マッシュアップとは、複数のサービスやデータを組み合わせて、新しいサービスを作ることです。例えば、Google MapsのAPIを使って、地図上に自分のデータを表示するアプリを作ると、それはマッシュアップの一種です。

マッシュアップを使えば、既存のサービスの良いところを組み合わせて、独自のアプリやサービスを作ることができるんです。Webアプリ開発の世界では、APIを使ってデータを引っ張ってきたり、他のサービスと連携することで、アイデアを形にすることがよくあります。

マッシュアップのサンプルコード

以下は、Google MapsのAPIを使って、地図上にピンを表示する簡単なマッシュアップの例です。

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API サンプル</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
        function initMap() {
            const location = { lat: 35.6895, lng: 139.6917 };
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: location
            });
            const marker = new google.maps.Marker({
                position: location,
                map: map
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="map" style="height: 500px; width: 100%;"></div>
</body>
</html>

実行結果: 東京の地図が表示され、そこにピンが立つ

このコードを実行すると、Google Maps上に東京の位置が表示され、ピンが立ちます。もちろん、YOUR_API_KEYには自分のAPIキーを入力してくださいね。

メディアクエリとは？

最後に「メディアクエリ」について説明します。メディアクエリは、Webページのデザインをデバイスのサイズに合わせて変えるための技術です。例えば、パソコンでは大きな画面用のレイアウト、スマホでは小さな画面用のレイアウトに切り替えることができます。

メディアクエリを使うと、同じWebページでもデバイスごとに見やすいデザインを作ることができるんです。これは、レスポンシブデザインと呼ばれる手法の一部です。

メディアクエリのサンプルコード

以下は、メディアクエリを使って、画面の幅が600px以下の時に背景色を変えるCSSの例です。

body {
    background-color: lightblue;
}

@media (max-width: 600px) {
    body {
        background-color: lightcoral;
    }
}

実行結果: - パソコンで表示: 背景が水色 - スマホで表示: 背景が薄い赤色

このコードでは、画面の幅が600px以下になると、背景色が水色から薄い赤色に変わります。スマホやタブレットで見るとデザインが変わることがわかりますね。

おわりに

というわけで、午前試験　問５０の答えは、メディアクエリですね