Webデザイン学科 授業資料

2022前期

2022後期

About

後期集中授業
アプリ使用技術（API）

Web アプリを制作する場合、Web サイト制作するための HTML や CSS,JavaScript 以外の技術を利用する場合も多いです。
よく利用する技術を紹介します。

Google Maps API

Google マップを利用し、経路や位置を地図上に表示させることができます。
カラーやロゴの配置など、見た目のカスタマイズも可能です。
Google マップをカスタマイズするための API は大きくわけて「モバイル API」「ウェブ API」「ウェブサービス API」の 3 つがあり、Web アプリでは、主に「ウェブ API」「ウェブサービス API」の 2 つを利用します。

ウェブ API JavaScript API Google Maps をウェブサイトに表示することができます。
Static Maps API 地図画像を高解像度で表示します。
Street View Image API ストリートビュー画像を高解像度で表示します。
ウェブサービス API Directions API 最適化された経路検索を自動で行うことが可能です。
Distance Matrix API 複数の始点・終点の組み合わせルートの「距離」「時間」を求められます。
Roads API 道路に沿ったスムーズなパスを取得します、また制限速度情報を返します。
Geolocation API GPS 機能が無い環境でユーザーの位置情報を特定します。
Places API 施設検索の API、一億件以上の詳細情報を検索・表示できます。
Geocording API 住所を緯度・経度（または緯度経度を住所）に変換します。
Elevation API ある地点の標高（高さ）を取得します。
Time Zone API ある地点のタイムゾーン（時間帯）を取得します。

参考：【初心者向け】Google Maps API の全体像を徹底解説！｜ Google Maps Platform ｜ゼンリンデータコム法人向けサービス

Google Map API 使用時の課金

Google Map API を使用する場合、登録時にクレジットカードの登録が必要になります。
Map API は、他にもMapboxやOpenStreetMap(OSM)がありますが、信頼性や技術的情報が多いのはやはり Google Map となります。
クレジットカードを持っていないや登録が怖い人は、OSM を利用し、Google Map API を使ってみたいと思っている人は、無料プログラムでクレジットカードを登録して、課金の制限設定をすることで、課金を避けましょう。

位置情報 API (Geolocation API)

スマートフォンや PC の GPS 機能を使って、現在の緯度経度を取得します。
Google Maps API など地図 API と連携して利用することが多いです。
このように複数の API を組み合わせることをマッシュアップといいます。

位置情報の許可ボタンは必要になります。

<button id="find-me">Show my location</button><br />
<p id="status"></p>
<a id="map-link" target="_blank"></a>
function geoFindMe() {
  const status = document.querySelector("#status")
  const mapLink = document.querySelector("#map-link")

  mapLink.href = ""
  mapLink.textContent = ""

  function success(position) {
    const latitude = position.coords.latitude
    const longitude = position.coords.longitude

    status.textContent = ""
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`
  }

  function error() {
    status.textContent = "Unable to retrieve your location"
  }

  if (!navigator.geolocation) {
    status.textContent = "Geolocation is not supported by your browser"
  } else {
    status.textContent = "Locating…"
    navigator.geolocation.getCurrentPosition(success, error)
  }
}

document.querySelector("#find-me").addEventListener("click", geoFindMe)

ブラウザからカメラにアクセス（MediaDevices API）

HTML5 では、MediaDevices API など、デバイスハードウェアにアクセスできる API を導入しています。
この API により、オーディオやビデオなどのメディア入力デバイスへのアクセスができます。
※この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

面白法人カヤックのエンジニアブログにブラウザ（Safari）からのアクセス方法と Canvas に書き出す方法があります。Canvas に書き出すとモノクロにしたり、映像を加工しやすくなります。

3DCG（WebGL）

WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。

Three.js

WebGL、特に 3DCG を扱う場合は、手軽に 3D コンテンツを制作できる商用利用可能な JavaScript ライブラリThree.js を利用します。
Three.js を使えば JavaScript の知識だけで簡単に 3D コンテンツが作成できるため、手軽に扱えるようになります。

3D データを取得

Three.js を利用すれば、Blender など 3DCG ソフトで作成したデータを読み込み表示させるだけでなく、インタラクティブな操作をすることができます。

テクスチャを貼ったり、切り替えたりすることができます。

毎年、卒業制作で WebGL を使った 3DCG 作品を作る学生がいるのですが、年々、作品のアイデアが単純になってきています。
Web デザイン学科で最初に WebGL で作品を作った学生は「オリジナルキャラを 3DCG でモデリングして、クリックするとキックをするアニメーション」まで作っていました。
Three.js もバージョンが上がり、手軽に高度なことができるようになってきました。興味がある人は、ぜひ、面白いアイデアの作品に挑戦してみてください。

通知 API（Notifications API）

iPhone では、まだ残念ながら Safari から通知（プッシュ通知）をすることはできません。
Android の Chrome からは、利用することができます。

Push.js

こちらもPush.jsを使うことで、手軽に実装できますが、ブラウザの通知許可、OS の通知許可の設定が必要です。

その他の API

その他にも既存の Web サービスや、組織が API を提供しています。

各種 API を集めたプラットフォームRapidAPIなどもありますので、こういったデータがほしいと思ったら、調べてみるといいかもしれません。

バイブレーション（Vibration API）の操作など iOS では開放されていません。
センサー系などにアクセスする場合は、ネイティブアプリの API にアクセスできるMonacaなどを使って開発します。

REST API

REST API (RESTful API とも言います) は、REST アーキテクチャスタイルの制約に従い、RESTful Web サービスとの対話を可能にするアプリケーション・プログラミング・インタフェース (API または Web API) です。
REST は REpresentational State Transfer の略で、コンピュータ・サイエンティストの Roy Fielding によって作られました。

REST の 4 原則

この REST の 4 原則は、HTTP を設計した中心人物である Roy Fielding 氏が 2000 年に提唱したもので、

  1. 統一インターフェース
  2. アドレス可能性
  3. 接続性
  4. ステートレス性

の４つです。

Web における REST の４原則

  1. HTTP 通信で,JSON 形式でやりとりするよ【統一インターフェース】
  2. この URL の情報くださーい【アドレス可能性】
  3. ハイパーリンクを含んだページをあげるよ【接続性】
  4. さっきの情報をくださいと言われても〜【ステートレス性】

参考：REST API とは？ざっくりと理解してみる【初心者向け】 - Wiz テックブログ

REST API を作成

REST API の仕組みを作成しようとする場合、バックエンドプログラミングやデータベースの知識が必要になります。PHP で同じ仕組みを作るのには、かなり技術力を要します。
PHP で作成する場合、一般的にはLaravelやCakePHPなどのフレームワークを利用して作成します。

ヘッドレス CMS

「ヘッドレス CMS」は新しいタイプの CMS です。
従来型の CMS はコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレス CMS はヘッド（表示面）がなく、API によってコンテンツを配信するのが特徴です。
最初から REST API のシステムになっているので、時間がない時などはこちらを利用する。

ヘッドレス CMS 一覧

よく聞くヘッドレス CMS をあげました。
日本製で、ドキュメントや情報が豊富な microCMS がオススメです。

© 2023, Hideo Kawaguchi in Trident Web Design Department with Gatsby