概要
Vue.jsで作成してVercel（旧now）とfreenomで独自ドメインのサイトを作るというものです。
他で作った猫カメラの写真がGyazoにたまっているので、GyazoのAPIを使ってWEBサイト（Vue.js）でもみれるというものです。
できたもの
2020/05/23 動いたのでソースコード修正しました！！！vue.jsでnekoBotで表示する写真をパラパラと見れるものを作った。
— 3yaka (@3yaka4) May 20, 2020
Deployしたら動かなくなったけど。。。https://t.co/ifiicmRP6b#protoout pic.twitter.com/bzu9fOOGHg
環境
macOS Catalina
Visual Studio Code 1.45.1
Node.js: 12.8.1
構成
api(vercelはapiフォルダにメインで使うJSをいれるらしい)
- server.js
public（staticファイルはpublicフォルダの中へ）
- index.html
- style.css
package.json
vercel.json
package-lock.json
node_modules
コード
<html>
<head>
<title>Hello My WebSite!</title>
<link rel="stylesheet" media="all" href="style.css">
</head>
<body>
<div id="app" class="waku">
<h1>3yakaさん家のにゃんこはなにしてる？</h1>
<p>猫カメラが撮った写真の最新１０件がランダムに表示されるよ</p>
<button id="testbutton" v-on:click="getData()"></button>
<p class="mes"> {{ message }}
<img class="imgsiz" v-bind:src="src" /><!-- データバインディングの場合はカッコをくくらなくて呼び出せます -->
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
src:'https://i.gyazo.com/9360a06096a20ab93a79a4793f7670dd.jpg'
},
methods: {
getData: async function(){
let e;
const response = await axios.get('/api')
for (var i = 0 ; i < 9 ; i++){
e = Math.floor(Math.random () * 10);
}
const date = new Date(response.data[e].created_at);
let datef = date.toLocaleString();
this.message = `この写真を撮った時間は${datef}だよ`;
this.src = response.data[e].url; // 取得した画像差し替え
console.log(response.data[e].url);
},
},
mounted: function(){
this.getData();
}
})
</script>
</body>
</html>
node.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const Gyazo = require('gyazo-api');
const gyazoclient = new Gyazo('***');
// axiosライブラリを呼び出す
const axios = require('axios');
// ローカルでもサーバー上でもみれるようにする
app.use(express.static(__dirname + '/../public'));
app.get('/api', async function(req, res) {
let response;
try {
response = await gyazoclient.list();
} catch (error) {
console.error(error);
}
//結果をJSONに割り当てる
res.json(response.data);
});
//vercelでかきかた
(process.env.NOW_REGION) ? module.exports = app : app.listen(PORT);
console.log(`Server running at ${PORT}`);
vercel特有のフォルダ構成とかに悩まされた