![プログラミング]()
![Polygon]()
プログラミング
Nuxt.js+Netlifyを使って初心者でもできるwebサイト構築
こんにちは．初めまして．小石こはです．
#ショート記事週間3日目（のっかりました）
今回はNuxt.jsとNetlifyを使用して自身のポートフォリオwebサイトを作りました．
この記事では，Node.jsのインストールから実際にサイトを公開するまでの流れを紹介します．
Node.jsをインストールしよう！まずはNuxt.jsを使うために，Node.jsをインストールしていきましょう！
Node.jsのインストールはこちら→ https://nodejs.org/ja/download/
Node.jsをインストールできたら，プロンプトで以下のコマンドを使って，Node.jsが正常にインストールでき，使えることができるか確認しましょう．node.exe --version
npm -version以上の2つのコマンドを実行し，現在のバージョンが表示されればOKです！
Nuxt.jsでプロジェクトを始めよう！npmコマンドが正常に使えることを確認したら，プロジェクトを作成したいディレクトリに移動し，以下のコマンドでNuxt.jsのプロジェクトを作ります．npx create-nuxt-app (プロジェクト名)すると以下のようにいろいろと聞かれるので，適当に答えます．create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in (プロジェクト名)
? Project name: (プロジェクト名)
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA)
? Linting tools:
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Depend
abot (For auto-updating dependencies, GitHub only)
? What is your GitHub username? (GitHubのusername)
? Version control system: Git
🎉 Successfully created project (プロジェクト名)
To get started:
cd (プロジェクト名)
npm run dev
To build & start for production:
cd (プロジェクト名)
npm run build
npm run start
Webサイトのデザインを考えるWebサイトのデザインを考えていきましょう．
以下のような案がでました．
が，暗すぎると指摘され，自分でもそう思ったので，
最終的に以下のデザインに決定しました．
（このサイトのデザインを少し参考にしました．）
もろもろの準備次はIDE（統合開発環境）でプロジェクトディレクトリを開きましょう．今回はWebStormを使用していきます．
WebStormのインストールはこちら→ https://www.jetbrains.com/ja-jp/webstorm/
Nuxt.jsで作ったプロジェクトのディレクトリ構造は以下のようになっています．（今回の例ではプロジェクト名をkohaにしています）
まずはnuxt.config.jsを編集していきます．
以下のような記述を追加してください．export default{
head:{
link:[
{rel:"stylesheet", href:"https://fonts.googleapis.com/css2?family=Geo&display=swap"}
],
},
target:'static',
}
Google Fontを使用しています．
Google Fontはこちら→ https://fonts.google.com/
また，画像を使用したいので，プロジェクト名のディレクトリの下にassetsというディレクトリをつくり，その中に画像を入れていきます．
次に，componentsのディレクトリの中にSidebar.vueというファイルを作ります．
Vueファイルの中身をつくっていくでは，Sidebar.vueの中身を書いていきましょう．
Sidebar.vueの中身は以下の通りです．（ロゴはこのサイトを使用しました．）<template>
<div class="back">
<div class="menu">
<div class="toTitle">
<img src="~/assets/logoN.png" alt="ロゴ"/>
</div>
<ul>
<li>PROFILE</li>
<li>WORKS</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
name: 'Sidebar',
}
},
}
</script>
<style scoped>
.back {
position: relative;
background-color: #f5f5f5;
}
.menu {
position: absolute;
background-color: #2e8b57;
width: 230px;
height: 640px;
left: 65px;
}
.toTitle {
width: 200px;
height: 20px;
}
ul {
list-style: none;
padding-top: 170px;
padding-right: 68px;
text-align: right;
}
li {
padding: 15px;
font-size: 25px;
font-family: 'Geo', sans-serif;
color: #f5f5f5;
}
li:hover {
letter-spacing: 5px;
opacity: 0.8;
}
</style> また，pagesディレクトリの中にあるindex.vueの中身は以下の通りです．<template>
<div class="back">
<Sidebar/>
<div class="image"></div>
</div>
</template>
<script>
export default {
data: function () {
return {
title: 'index',
}
},
}
</script>
<style>
.back {
position: relative;
background-color: #f5f5f5;
}
.image {
position: absolute;
width: 1174px;
height: 783px;
top: 80px;
left: 245px;
background-image: url('~/assets/my.png');
}
</style>WebStormのターミナルで以下のコマンドを実行して，ローカルホストに接続してうまくいっているか確認してみましょう．npm run devこのあといろいろと調整しますが，とりあえずこれで完成です！
では，ビルドをするために以下のコマンドを実行しましょう．（このコマンドでdistディレクトリがつくられます）npm run generate次に以下のコマンドを実行し，ローカルサーバーが立ち上がるので，うまくできたか確認しましょう．npm run start
GitHubのリポジトリにあげる次はGitHubのリポジトリにあげるために，WebStorm上でCommitしましょう．
Commitできたら，GitHubのWebサイト上で新しいリポジトリをつくります．
新たなリポジトリを作ったときに表示されるGitHubのガイドに沿って，WebStormのターミナルで以下のコマンドを実行します．git remote add origin https://github.com/(GitHubのaccount name)/(リポジトリ名).git
git branch -M main
git push -u origin main
Netlifyにデプロイするいよいよ終盤です．
Netlifyにデプロイしていきましょう．
Netlifyはこちら→ https://www.netlify.com/
Netlifyのダッシュボードで，「New site from Git」というボタンをクリックします．
Continuous DeploymentでGitHubを選択します．
先ほど作ったリポジトリを選択し，各項目は以下のように設定し，「Deploy site」のボタンを押します．
以下の画像のように，「Published」と表示されれば成功です！
緑色のURLで全世界にWebサイトが公開されています．
以上です．簡単にWebサイトが構築できるので，みんな気軽に作ってみよう！
ありがとうございました．
![>]()
内容を見る
![プログラミング]()
![Polygon]()
プログラミング
Minecraftでプレイヤーの参加をツイートするbotの作り方
こんにちはさしぐめです。初投稿の今回はマインクラフトとTypeScriptを使ったbotについて書こうと思います。
Twitterアプリを申請する
Developer PortalでTwitterアプリの申請をしましょう。この時、botとして使いたいアカウントで申請するのがベストです。
間違えてメインアカで申請しちゃった場合は、OAuth1.0aを使ってサブアカのトークンを発行しましょう。(手順は割愛)
また、アプリの権限はRead & Write にします(DM権限は使いません)。
APIを用意する
Webhookの受け皿にはCloud Functions for Firebase (実質GCP)を使います。
Herokuでもいいんですが、個人的に
ログが見やすいサーバーレスかつ応答が早いFirestore等と連携できる外出先で確認できるアプリがある
という理由で選びました。
https://firebase.google.com/pricing/
なお、従量制プランを選択する必要があり、処理時間と回数が膨大になると請求される可能性もありますのでご注意ください。
ステップ1: 認証情報を用意
Firebaseプロジェクトを用意して、開発環境を用意します。ここの手順は日々変わるので割愛します。
また、Cloud Functions for Firebaseでは.env ではなくCLIで一つづつ環境変数を設定していきます。
後述するWebhookプラグインはリクエストのヘッダーをカスタマイズできません。仕方なくbodyでパスフレーズを送って認証します。
まずはオレオレパスフレーズを作ります。OAuthでもなんでもないただのパスワードなので、個人用途以外で使わないでください。$ cd functions/
# 32桁のオレオレパスフレーズを生成
$ openssl rand -base64 32
# configに登録
$ firebase functions:config:set minecraft.auth="(オレオレパスフレーズ)"
もっといい生成方法があったら教えてください＞＜
アプリの申請が通ると以下のキーが手に入ります。これらを全部コンフィグに登録します。コンシューマキーコンシューマシークレットユーザのトークンユーザのシークレット
$ firebase functions:config:set twitter.key="(コンシューマキー)"
$ firebase functions:config:set twitter.secret="(コンシューマシークレット)"
$ firebase functions:config:set minecraft.auth=(ユーザのトークン)"
$ firebase functions:config:set minecraft.auth="(ユーザのシークレット)"
# エミュレータ用ファイルを生成
$ firebase functions:config:get > .runtimeconfig.json
{
"twitter": {
"user_secret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"user_token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"secret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
},
"minecraft": {
"auth": "(オレオレパスフレーズ)"
}
}.runtimeconfig.json がこんな感じになります。これがローカルでテストする時の環境変数代わりになります。
functions/models/AdminConfig.d.tsexport interface AdminConfig {
twitter: {
key: string;
secret: string;
user_token: string;
user_secret: string;
};
minecraft: {
auth: string;
};
}TypeScriptの場合、こんな感じで型を作っておくと自動補完が楽です。
ステップ3: APIのエンドポイントを用意
さあいよいよAPIを作ります。
$ npm i twitter-api-clienttwitter-api-client というライブラリを使います。
FirebaseなのでFirebaseが用意しているfunctions.https.onRequest を使いますが、別にexpressでもいいです。
functions/src/twitter/post.tsimport * as functions from 'firebase-functions';
import { AdminConfig } from '../models/adminConfig';
const config = functions.config() as AdminConfig;
import { TwitterClient } from 'twitter-api-client';
const client = new TwitterClient({
apiKey: config.twitter.key,
apiSecret: config.twitter.secret,
accessToken: config.twitter.user_token,
accessTokenSecret: config.twitter.user_secret,
});
const post = functions.region('asia-northeast1').https.onRequest(async (request, response) => {
if (request.method !== 'POST') {
response.status(405).json({
message: `POSTメソッドを使ってください`,
});
return;
}
const body: {
// マイクラサーバーのplugins/SimpleWebhooks/config.ymlで内容は定義してある
tweet?: string;
// コンフィグで定義
auth?: string;
// テスト用
test?: boolean;
} = request.body;
functions.logger.debug(`Received body: ${JSON.stringify(body)}`);
if (Object.keys(body).length == 0) {
response.status(400).json({
message: `bodyはJSONオブジェクトにしてください`,
});
return;
}
if (body.auth !== config.minecraft.auth) {
response.status(401).json({
message: `認証できませんでした`,
});
return;
}
let tweet = body.tweet;
if (!tweet) {
response.status(422).json({
message: `ツイート本文を指定してください`,
});
return;
}
// testがtrueならツイートはしない
if (body.test) {
response.status(200).json({
message: `テスト成功`,
...body,
});
return;
}
// 以下、Twitter APIと通信する
try {
await client.tweets
.statusesUpdate({
status: tweet,
})
.then(async (apiResponse) => {
// https://developer.twitter.com/en/docs/twitter-api/v1/tweets/post-and-engage/api-reference/post-statuses-update
// レスポンスにcreated_atがあればツイート成功
if (apiResponse.created_at) {
response.status(200).json({ message: `ツイート成功`, ...apiResponse });
functions.logger.info(`Successfully tweeted: ${tweet}`);
} else {
response.status(500).json(
apiResponse ?? {
message: `Twitter APIからの応答がありませんでした`,
}
);
}
})
.catch((e) => {
response.status(500).json({
message: `Twitter API呼び出し中のエラー: ${JSON.stringify(e)}`,
});
});
return;
} catch (e) {
response.status(500).json({
message: `その他のエラー: ${JSON.stringify(e)}`,
});
}
return;
});
export default post;
ステップ3: フォルダにまとめる
expressならこんなことしなくて良いですが、Firebaseの書き方だとこうやってエンドポイントを整理します。
functions/src/index.tsconst twitter = require('./twitter');
exports.twitter = twitter;
functions/src/twitter/index.tsexport { default as post } from './post';
こうすることで、エンドポイントが /twitter-post になります。
ステップ4: テストとデプロイ
$ npm run serve
Firebaseのエミュレータが立ち上がり、 http://localhost:5001/(プロジェクト名)/asia-northeast1/twitter-post でテスト可能になります。
curl --location --request POST 'http://localhost:5001/(プロジェクト名)/asia-northeast1/twitter-post' \
--header 'Content-Type: application/json' \
--data-raw '{
"tweet": "テストツイート",
"auth": "(オレオレパスフレーズ)",
"test": true
}'
こんな感じのリクエストを送ればテストできます。
$ npm run deploy
デプロイすると https://asia-northeast1-(プロジェクト名).cloudfunctions.net/twitter-post にAPIが公開されます。
マイクラサーバー側の設定
あとはマイクラサーバーからWebhookを送るだけです。
Webhookプラグインを入れる
https://github.com/Akenland/SimpleWebhooks
SimpleWebhooks プラグインを使います。PaperMCの1.16.5で動作を確認しました。
プラグインの設定
$ vi plugins/SimpleWebhooks/config.yml
config.yml webhooks:
join:
twitter-join:
url: https://asia-northeast1-(プロジェクト名).cloudfunctions.net/twitter-post
json:
tweet: "{PLAYER_DISPLAYNAME}が{SERVER_MOTD}に参加しました！"
auth: "(オレオレパスフレーズ)"
こんな感じで、URLと送信するJSONを設定してください。YAMLマジで苦手。
豆知識: Cyberduckなら、サーバー上のファイルをローカルのように編集できます。宗教的こだわりがない場合は例えばVSCodeで開いて編集しましょう。
動作確認
YAMLを保存したら、マイクラサーバー側でwebhookをリロードします。
> webhooks reload
サーバー再起動の必要はなく、このコマンドを実行するだけです。
プレイヤーが参加すると、Firebaseの管理画面にログが出るはずです。
.sasigumeが自由にサバイバル！に参加しました！#mc_asobinon 参加方法はこちら→ https://t.co/N1cU2977TQ— アソビノン - 誰でも編集できる攻略サイト (@asobinon) July 23, 2021
うちのサーバーではこんな感じでツイートしています。
---
以上、マイクラサーバーと連携するbotの作り方でした。
![>]()
内容を見る
