6月のテーマは？　使えると得をする「REST API」！！

Silicon Valley Super Ware

2020年5月29日


6月のテーマは？　使えると得をする「REST API」！！

5月も終わりになりました。今年度は、「Webサービスを使ったビジネス」を テーマに活動しています。4月と5月は別のやり方で「お問合せフォーム」の Webサービスの制作をお伝えしてきました。
6月の話題は「REST API」を取り上げる予定です。
何か難しそうな感じがしますが、言葉の定義とかいろいろな詳細には触れません！ 実際に利用するのにその中身や定義はそれほど重要ではないからです。
APIも同様です。

一言で言えば、「データをサーバーとやり取りするための取り決め」です！

合言葉というのが一番分かり易いかもしれません。 「山」と言ったら「川」と返すようなそんなイメージです。

もう少し詳しくREST　APIを！

APIというのは、一般的にプログラムが別のプログラムやモジュールとやり取りする 取り決めです。REST（Representational State Transfer）もこのAPIの決め方の一つです。
インターネットで検索すると、いろいろ難しい説明が出てきますが、 今日多く使われている物は特定のリンク（URL/URI）にアクセスすると特定の処理や データをやり取りできるという物です。
「http://www.abcd.com/users」にHTTP GETでアクセスすると 登録されている全ユーザーの情報が取れる。とうような使いかたをします。

どのURLで何ができるかが分かれば、簡単に利用できます！

説明を読むと難しそうですが、実際に使う分にはそれほど難しい事はありません。
どのURLにアクセスすると、決まった事をやってくれるという仕組みです。

何故APIが必要？

APIはデータのやり取りや処理を行うためのやり取りの仕組みです。 つまり、やり取りを行わなければ必要ありません。
例えば山に籠って一人で生活する場合、言葉を話す必要はありませんよね？ それと同じで、あなたが作るプログラムが完全にあなたのプログラムだけで 全ての動作を行う場合無くても良いものです。
しかし、別のプログラムと一緒に何かをやる場合には必要になるものです。

Webサービスの場合は、殆どの場合一つのプログラムという事はありません。
多くの場合は、ブラウザーとサーバーで別々のプログラムが動いています。
そうなるとお互い「話」をする必要があるのでAPIを決める必要があります。

お互いのコミュニケーションに使うので、両方のプログラムで同じように 「取り決め」を守るように作る必要が出てきます。

WebサービスとREST API

Webサービスを作る場合どのような場合にREST APIを使うかというと 「他のWebサービス」をあなたのWebサービスに組み込んだりする場合に 必要になります。
具体的な例を挙げると、オンラインで支払い受付（決済）をする場合 自分では決済できない場合が殆どなので、決済のサービスをしている 業者を使って決済するのが普通です。
このような場合、決済のサービスは別のサーバーで動いているので APIを使ってやり取るする必要があります。

REST APIは他のWebサービスを自分のサービスに取り込むときに便利！

以前紹介したように、自分で作ると大変なサービスでも既存のWebサービスを 利用すれば、簡単に自分のWebサービスに取り込むことができます。
良く利用されるのが、決済やメール配信（メルマガ配信）などは、 APIを利用すると簡単に自分のサービスに取り込む事ができます。
「Vue.js」や「React」のように、使えるとWebサービスの開発が楽になる という点で、REST APIもWebサービスを作る場合に知っていると強力な 武器になります。

6月は「REST APIを体験する！」がテーマです

いきなり、他のWebサービスを組み込んでも良いのですが、 まずは、REST APIを使ってみるというのをテーマにしようと思います。 基本的には「コマンド」代わりに、URLに「HTTP」のアクセスをする というのが、使い方です。
具体的にやる事は
  • Vue.jsを引き続きUIに利用！
  • 4月・5月は触れなかったVUEXも導入
  • REST APIを使ってデータのやり取りを行う
Vue.jsは引き続き利用して使いかたをさらにマスターします！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。


Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む