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

Dec. 2, 2001 02:01

先日の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の写真を埋め込むことができました。