Instagramの写真埋め込みスクリプトをVueにしてみました。

2020-01-22 21:46

先日のInstagram Graph APIを使用したWebサイトへのInstagramの写真埋め込みスクリプトのJavaScript部分をVueに変更してみました。

Vue.jsとは

Vue (発音は /vjuː/、view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。 他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。 中核となるライブラリは view 層だけに焦点を当てています。 そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。 また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 Vue.js

まずは、環境を構築していきます。

環境構築

当Webサイトは、Webpackを導入しているものの「特にこうする為に必要だった」などはなく、少しづつ勉強していく為にただ、Webpack化した。でした。

バージョン

現時点でのバージョンは、

  • node.js 12.10.0
  • webpack 4.41.5

Vueのインストール

まずは、下記のコマンドでVueをインストールします。

npm i -D vue

続いて、Vueの単一ファイルコンポーネント(SFC)を扱うためのWebpackのローダーをインストールします。

# 基本ローダー
npm i -D vue-loader vue-template-compiler

# トランスパイル系ローダー
npm i -D babel-loader @babel/core @babel/preset-env

続いて、インストールしたローダーを環境に組み込みます。

webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { ... module: { rules : [ { test: /¥.vue$/, loader: 'vue-loader' }, { test: /¥.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueLoaderPlugin() ], resolve: { extensions: [ '.vue', '.js' ], alias: { 'vue$': 'vue/dist/vue.esm.js' } } };

これで、Vueアプリを開発する環境が整いました。

Promiseのインストール

以前から、サーバーサイドとやり取りを管理する為に、Promiseを使用しようと考えてました。
今回は、Instagram Graph APIとのやり取りにPHPを使用しています。 そのPHPとのやり取りにPromiseを導入してみます。

まずは、下記のコマンドでPromiseをインストールします。

npm i -D es6-promise

これで、今回のVueを使用したアプリを開発する環境が整いました。

Vueアプリの開発

今回は、コンポーネントやテンプレートといった機能は使用せずに、Vueのライフサイクルフックmountedで、Instagram Graph APIからデータを取得し、Vueの初期化が完了した時点で、HTMLを更新する。 という簡単な流れになります。

JavaScript

例として、Webpackのエントリポイントとなるjsファイルに直接書くことにします。

src/app.js
import Vue from 'vue'; const Promise = require('es6-promise').Promise; let app = new Vue({ el: '#instagram', data: { items: null }, mounted: function() { let promise = () => { return new Promise(( resolve, reject ) => { let request = new XMLHttpRequest(); request.open( 'GET', '/api/instagram.php', true ); request.responseType = 'json'; request.onload = () => { if( request.status === 200 ){ resolve(request.response.media.data); }else{ reject( new Error(request.statusText)); } }; request.send(null); }); }; promise().then(( data ) => { this.items = data; }).catch(( error ) => { console.log(error); }); } });

HTML

続いて、HTMLファイルを下記のような構造にします。

index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Sample</title> </head> <body> <div id="instagram"> <ul> <li v-for="item in items"> <a v-bind:href="item.permalink"> <img v-bind:src="item.media_url" v-bind:alt="item.caption"> <span>{{ item.like_count }}</span> <span>{{ item.caption }}</span> </a> </li> </ul> </div> <script src="js/app.js"></script> </body> </html>

<div id="instagram"/>がVueインスタンスのel要素になります。

Vueインスタンスのdata.items配列をリストアップするには、v-forディレクティブを使用し、item in items形式の構文を用いてリストレンダリングさせます。 itemは配列要素が反復されているエイリアスです。

Vueでは、HTMLに値を埋め込むには、{{ value }}構文(二重中括弧)を用いて値を展開します。 また、タグの属性値に値を埋め込む場合は、属性名にv-bindディレクティブを付加します。

これで、ページにInstagramの写真を埋め込むことができました。