More than 3 years have passed since last update.

【初心者向け】API利用の基本テクニック(ローディングの描画と標準時間の変換について)

Posted at 2020-09-12

背景とこの記事の目的

この度、TwitterAPIを利用したWEBアプリを構築しました。
その際に、「あーこの技術は今後も間違いなく活用するだろうなー」と思ったものがいくつかあったので、備忘として残します。
便利なライブラリもあったのでそちら紹介も兼ねます。
※フロントはvueで作っていますので、その前提で以下のトピックを紹介していきます。

//scriptタグ内の記述
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

export default {
  name: 'app',
  data(){
    return {
      isLoading: false,
      fullPage: true,
    }
  },
  components:{
    "loading":Loading
  },
methods:{
      getTimeline:function(){
        alert('Timelineを取得します');

        //overlayの処理
        let self = this;
        self.isLoading = true;

        axios
          .get('APIのURL',
            {
              headers: {
                //必要に応じて記載
              },
              params:{
               //必要に応じて記載
              }
            })
          .then(response => {
            // handle success
            self.isLoading = false;
          })
          .catch(function (error) {
            // handle error
            self.isLoading = false;
            console.log(error);
          })
    },
    onCancel:function() {
      console.log('User cancelled the loader.')
    }
//以下略

App.vue

<!-- templete内の記述 -->
<loading :active.sync="isLoading" :can-cancel="true" :on-cancel="onCancel" :is-full-page="fullPage"></loading>
<button v-on:click="getTimeline" class= "btn btn-primary"> Timelineを取得 </button>

APIのレスポンスの中にある時刻を日本時間に変換する

TwitterのAPIのレスポンスの中に
"created_at": "Thu Apr 06 15:28:43 +0000 2017"
こういうものがありました。
APIのレスポンスには、必ずと言っていいほど時間に関する情報が入っています。そして日本のサービス出ない限り、大抵は標準時で入っています。
これを日本時間に変換する処理をする際は「Moment.js」というライブラリが便利です。

詳しい使い方は下記が参考になります。
https://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953
https://momentjs.com/

実際の例としては以下の通り

App.vue

const moment = require('moment');
require('moment-timezone');

//略(APIの処理)
.then(response => {
let obj = JSON.parse(response.data);
moment.tz.setDefault('Asia/Tokyo'); //日本時間に合わせる

for(var t=0; t<obj.length; t++){
   obj[t].created_at = moment(obj[t].created_at,'dd MMM DD HH:mm:ss ZZ YYYY','en').format('YYYY-MM-DD_HH:mm:ss');
}

日付の記法は地域（というか国？）によってほんとに様々あるようで、それに応じてコーディングも微妙に変える必要があるようですね。

まとめ

実際に作ってみるといろいろと細かいテクニックが必要になることがよくわかりました。
ボタンの活性・非活性の制御、モーダルウィンドウ（子画面）の作り方、無限スクロールの実装の仕方などなど
上げればキリがないのですが、有用そうなものは時間があるときに記事にして残そうと思います

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【初心者向け】API利用の基本テクニック(ローディングの描画と標準時間の変換について)

背景とこの記事の目的

目次

非同期通信の際のローディングでぐるぐるさせるやつ（スピナー、インジケーター）

APIのレスポンスの中にある時刻を日本時間に変換する

まとめ