解説
「API」は、「Application Programming Interface」の略です。元々、OSやローカルアプリが提供していた、アプリケーションを作成するプログラミングのためのインターフェースで、現在ではWebの世界まで広がっています。Webを経由して利用できるAPIは、特にWeb APIと呼ばれたりしています。
APIでは、機能の提供とともに、機能の利用の仕方が提供されています。利用者は、この利用の仕方に従ってプログラムから機能を利用します。そのため、APIの提供側でプログラムを更新しても、利用の仕方が同じなら、利用側のプログラムは書き換える必要がないという利点があります。もちろん、有用な機能を、APIを使うたけで利用できるという利点も非常に大きいです。
Web APIが登場して流行した当時は、無料のものが多かったこともあり、マッシュアップという複数のWeb APIを組み合わせて、新しいサービスを作ることが流行しました。その後、サーバー負荷の理由などで有料のものが増えて、この流れは下火になりました。
とはいえ、Web APIは有用なもので、有料のものでも多くの場面で利用されています。
サンプル
「Web API」のサンプルです。
ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
141_js1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「Web API」のサンプル</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="vue-jsonp.js"></script>
<style>
#app {border-collapse: collapse}
#app th, #app td {border: solid 1px #888;}
</style>
</head>
<body>
<h1>ランダムWikipedia</h1>
<table id="app">
<tr>
<th>id</th>
<th>title</th>
</tr>
<tr v-for="dat in info">
<td>{{ dat.id }}</td>
<td><a v-bind:href="'https://ja.wikipedia.org/wiki/'+dat.title">
{{ dat.title }}
</a></td>
</tr>
</table>
<script>
Vue.use(vueJsonp)
new Vue({
el: '#app',
data () {return {info: null}},
mounted () {
this.$jsonp('https://ja.wikipedia.org/w/api.php',
{format: 'json', action: 'query', list: 'random',
rnnamespace: 0, rnlimit: 10})
.then(res => this.info = res.query.random)
.catch(error => console.log(error))
}
})
</script>
</body>
</html>
