- 投稿日:2021-05-03T18:59:07+09:00
Discord BOTを特定チャンネルで呼びかけると反応するようにするメモ
久々にDiscrod BOTを触ってみてます。なんか前にも同じようなメモ書いた気もしてる... こんな感じにユーザーが発言したチャンネルによって処理のハンドリングをさせたいってメモです。 基本 自分用おさらいとしてメモ残しておきます。 Discord.jsのトップページのサンプルと一緒ですが、 サンプルの方はパッと見トークンをどこに入れれば良いのか分からないので注意。 Discrod.js const Discord = require('discord.js'); const client = new Discord.Client(); client.on('ready', () => { console.log(`Logged in as ${client.user.tag}!`); }); client.on('message', msg => { if (msg.content === 'ping') { msg.reply('Pong!'); } }); client.login(`アクセストークン`); client.login()の箇所に取得したアクセストークンを指定して起動すればOKです。 Webhook URLなど指定せずにローカルで試せます。 まずはこれでping/pongを試せます。 チャンネルの取得をしてハンドリング msg.channel.idでチャンネルのIDを指定するか、msg.channel.nameでチャンネル名を指定するかが良さそうです。 チャンネルIDの場合 チャンネルIDでハンドリングしたい場合はmsg.channel.idを利用します。 Discordのチャンネルを開いてる時のURLは以下のような形式です。 https://discord.com/channels/XXXXXX/YYYYYY このXXXXXXXの部分がサーバーごとのIDになり、YYYYYYの部分がチャンネルごとのIDになります。 ちなみにDMの場合は以下のような形式になります。 https://discord.com/channels/@me/YYYYYY URLの最後のYYYYYYがチャンネルIDになるので以下のようにハンドリング出来ます。 //省略 //特定の部屋での発言 if(msg.channel.id === 'YYYYYY'){ msg.channel.send('今日の会議の議事録はこちらです! https://hogehoge.com'); } //それ以外の部屋では反応しない else{ msg.reply('この部屋で設定されている会議はありません。'); } //省略 チャンネル名の場合 チャンネル名でハンドリングしたい場合はmsg.channel.nameを利用します。 ↑のように表示されてる名前です。ただ、この場合名前が合ってればという判定なので、運用で部屋の名前を変更した際などに想定している動作にならなくなるので注意が必要そうです。 //省略 //特定の部屋での発言 if(msg.channel.name === 'n0bi-playground'){ msg.channel.send('今日の会議の議事録はこちらです! https://hogehoge.com'); } //それ以外の部屋では反応しない else{ msg.reply('この部屋で設定されている会議はありません。'); } //省略 コード全体 const Discord = require('discord.js'); const client = new Discord.Client(); client.on('ready', () => { console.log(`Logged in as ${client.user.tag}!`); }); client.on('message', msg => { if (msg.content === 'ping') { msg.reply('Pong!'); } if(msg.content === '会議URL教えて'){ if(msg.channel.id === 'YYYYYY'){ msg.channel.send('https://hogehoge.com/hugahuga'); }else{ msg.reply('現在の部屋では設定されてるURLがありません。'); } } }); client.login(`アクセストークン`); 補足: 発言させるmsg.channel.sendとmsg.reply どっちもBOTを発言させるときですが、以下の違いがあります。 msg.channel.sendを使うとそのチャンネルでBOTが発言 msg.replyで発言者にリプライ付きでBOTが返信
- 投稿日:2021-05-03T16:04:21+09:00
(基本)HerokuにNodeJsアプリをデプロイする際に確認すべき4つのポイント
1.ポート設定 index.js const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log("Server up!!") }) 2.使用中のNode,NPMバージョンの指定 package.json "engines": { "node": "使用中のバージョンを記載(14.15.0など)", "npm": "使用中のバージョンを記載(7.7.6など)" } 3.開始スクリプトの指定 package.json "scripts": { "start": "node index.js" } 4.gitignoreファイルの作成 .gitignore node_module etc..
- 投稿日:2021-05-03T16:04:21+09:00
HerokuにNodeJsアプリをデプロイする際に確認すべき4つのポイント
1.ポート設定 index.js const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log("Server up!!") }) 2.使用中のNode,NPMバージョンの指定 package.json "engines": { "node": "使用中のバージョンを記載(14.15.0など)", "npm": "使用中のバージョンを記載(7.7.6など)" } 3.開始スクリプトの指定 package.json "scripts": { "start": "node index.js" } 4.gitignoreファイルの作成 .gitignore node_module etc..
- 投稿日:2021-05-03T14:11:16+09:00
LineBotのUIを整えて完成~テレ〇限定・今日のドラマ再放送は何やるの?LineBotを作ろうと思う
LineBotの作り方を教わったので、「14時くらいから17時までの「テレ朝 ドラマ再放送ゴールデンタイム」の番組タイトルを教えてくれるLineBotを作ってみる!」にチャレンジしています。今回は前回からの(LineBotに組み込む)の続きであり、完結編です。 LineBotとして必要な機能は準備できたので、今回は操作性や見た目をなどを整えます。 Lineのインターフェースを設定する このBotに期待しているのは「当日」のゴールデンタイムの番組一覧を教えてほしいだけなので、1アクションで動作してくれるのがシンプルで望ましいです。 そこで、Lineの画面にボタンを設置し、それを押したら番組情報を返してくれるようにします。 「リッチメニュー」と呼ばれるもので、下のようなボタンです。 作り方はとても簡単でLineのオフィシャルアカウントマネージャーで設定します。 公式ページに設定の仕方が出ています。簡単に設定できるので公式ページの説明でも十分作成できます。 Lineのアプリを作る際には、「LINE Developers」と「LINE OfficialAccountManager」の両方でいろいろ設定が必要です。ちょっと迷うところかもです。 今回は、ボタンを押下したら、「今日は、何を放送するのかな?」とメッセージを送信するように設定しました。フォームに設定するだけで簡単に作成できました。 Botの機能をレベルアップさせる 番組表を返すだけだとちょっとつまらないので、日の入り時刻を取得するAPIを使って一層便利なBotにします(笑) 具体的には、保育園のお迎え(17時)まで、ドラマを観ていられるか?をアドバイスしてくれる機能!!! うちは、17時には保育園にお迎えに行かないといけませんが、冬場は17時より前に暗くなってしまいます。お迎えは暗くなる前に行きたいところですので、その情報を教えてもらいます。つまりは、17時までドラマを観ていられませんよ!を教えてくれるわけです。便利便利(笑)。 必要に応じて録画とか対策を講じることができます。便利便利(笑) 日の出・日の入りWEBAPIを利用する 日の入り時刻が必要なので、WEBAPIを利用して取得します。 今回は、Sunset and sunrise times APIを利用しました。 hinoiri.js const hinoiriFunction = async (event) => { let pushText = ''; // axiosで日の出日の入り時刻のAPIを叩きます(少し時間がかかる・ブロッキングする) const res = await axios.get('https://api.sunrise-sunset.org/json?lat=34.6959484&lng=135.4927352'); //経度緯度を必要に応じて修正 // 取得できるのはUTCなので日本時間(+9時間)になおす const utc_time = res.data.results.sunset; // '時', '分', '秒 PM' に分割する const tm_split = utc_time.split(':'); // '時' を9時間進める const jp_hour = Number(tm_split[0]) + 9 ; const time_string = `${jp_hour}時${tm_split[1]}分`; if(jp_hour <= 17 ){ pushText = `今日の日の入りは${time_string}です。最後まで視聴すると、保育園のお迎えに差支えますよ!`; }else{ pushText = `今日の日の入りは${time_string}です。最後まで視聴していても保育園のお迎えに差支えはありません!`; } //非同期がうまくいかないので、とりあえず2秒待つ// const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); await _sleep(2000); //非同期がうまくいかないので、とりあえず2秒待った あとでちゃんと勉強しよう// // 「プッシュ」で後からユーザーに通知します return client.pushMessage(event.source.userId, { type: 'text', text: pushText, }); お迎え時刻の17時を基準に判定して、メッセージを出しわけます。 相変わらずウェイト処理を入れています・・・ 完成! ついに「テレ〇限定・今日のドラマ再放送は何やるの?LineBot」が完成しました! 動作イメージ↓ 今日は祝日(月)なので、ゴールデンタイムあり!科捜研の女をやるようだ。やったね!科捜研大好き。 これは絶対便利!(笑) まだプロトタイプであり、ローカルPCで稼働している状態です。 コードも直して(非同期のところとか)、機能のレベルアップとか(「100の資格を持つ女」が入っていたら、おめでとうメッセージを出す機能の追加とか)したうえで、herokuなどのサーバで稼働させたいなぁと思います。 最後に このような実践的な(?)アプリが、ほんの数時間で作れてしまいました。 コードとして問題がありますが、プロトタイプとしては十分と思います。 まったくすごい世の中になったものです。引き続きいろいろプロトアウトしてみたいなと思います。
- 投稿日:2021-05-03T14:11:16+09:00
【完成!!】LineBotのUIを整える~テレ〇限定・今日のドラマ再放送は何やるの?LineBotを作ろうと思う
LineBotの作り方を教わったので、「14時くらいから17時までの「テレ朝 ドラマ再放送ゴールデンタイム」の番組タイトルを教えてくれるLineBotを作ってみる!」にチャレンジしています。今回は前回からの(LineBotに組み込む)の続きであり、完結編です。 LineBotとして必要な機能は準備できたので、今回は操作性や見た目をなどを整えます。 Lineのインターフェースを設定する このBotに期待しているのは「当日」のゴールデンタイムの番組一覧を教えてほしいだけなので、1アクションで動作してくれるのがシンプルで望ましいです。 そこで、Lineの画面にボタンを設置し、それを押したら番組情報を返してくれるようにします。 「リッチメニュー」と呼ばれるもので、下のようなボタンです。 作り方はとても簡単でLineのオフィシャルアカウントマネージャーで設定します。 公式ページに設定の仕方が出ています。簡単に設定できるので公式ページの説明でも十分作成できます。 Lineのアプリを作る際には、「LINE Developers」と「LINE OfficialAccountManager」の両方でいろいろ設定が必要です。ちょっと迷うところかもです。 今回は、ボタンを押下したら、「今日は、何を放送するのかな?」とメッセージを送信するように設定しました。フォームに設定するだけで簡単に作成できました。 Botの機能をレベルアップさせる 番組表を返すだけだとちょっとつまらないので、日の入り時刻を取得するAPIを使って一層便利なBotにします(笑) 具体的には、保育園のお迎え(17時)まで、ドラマを観ていられるか?をアドバイスしてくれる機能!!! うちは、17時には保育園にお迎えに行かないといけませんが、冬場は17時より前に暗くなってしまいます。お迎えは暗くなる前に行きたいところですので、その情報を教えてもらいます。つまりは、17時までドラマを観ていられませんよ!を教えてくれるわけです。便利便利(笑)。 必要に応じて録画とか対策を講じることができます。便利便利(笑) 日の出・日の入りWEBAPIを利用する 日の入り時刻が必要なので、WEBAPIを利用して取得します。 今回は、Sunset and sunrise times APIを利用しました。 hinoiri.js const hinoiriFunction = async (event) => { let pushText = ''; // axiosで日の出日の入り時刻のAPIを叩きます(少し時間がかかる・ブロッキングする) const res = await axios.get('https://api.sunrise-sunset.org/json?lat=34.6959484&lng=135.4927352'); //経度緯度を必要に応じて修正 // 取得できるのはUTCなので日本時間(+9時間)になおす const utc_time = res.data.results.sunset; // '時', '分', '秒 PM' に分割する const tm_split = utc_time.split(':'); // '時' を9時間進める const jp_hour = Number(tm_split[0]) + 9 ; const time_string = `${jp_hour}時${tm_split[1]}分`; if(jp_hour <= 17 ){ pushText = `今日の日の入りは${time_string}です。最後まで視聴すると、保育園のお迎えに差支えますよ!`; }else{ pushText = `今日の日の入りは${time_string}です。最後まで視聴していても保育園のお迎えに差支えはありません!`; } //非同期がうまくいかないので、とりあえず2秒待つ// const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); await _sleep(2000); //非同期がうまくいかないので、とりあえず2秒待った あとでちゃんと勉強しよう// // 「プッシュ」で後からユーザーに通知します return client.pushMessage(event.source.userId, { type: 'text', text: pushText, }); お迎え時刻の17時を基準に判定して、メッセージを出しわけます。 相変わらずウェイト処理を入れています・・・ 完成! ついに「テレ〇限定・今日のドラマ再放送は何やるの?LineBot」が完成しました! 動作イメージ↓ 今日は祝日(月)なので、ゴールデンタイムあり!科捜研の女をやるようだ。やったね!科捜研大好き。 これは絶対便利!(笑) まだプロトタイプであり、ローカルPCで稼働している状態です。 コードも直して(非同期のところとか)、機能のレベルアップとか(「100の資格を持つ女」が入っていたら、おめでとうメッセージを出す機能の追加とか)したうえで、herokuなどのサーバで稼働させたいなぁと思います。 最後に このような実践的な(?)アプリが、ほんの数時間で作れてしまいました。 コードとして問題がありますが、プロトタイプとしては十分と思います。 まったくすごい世の中になったものです。引き続きいろいろプロトアウトしてみたいなと思います。
- 投稿日:2021-05-03T13:19:54+09:00
Nuxt.jsが流行っているらしいので使用してみた件
Nuxt.jsが流行っているらしいので使用してみた件 最近でもないのかな?JS由来のフレームワークやらライブラリやらがフロントエンドの主流になってきてるらしいですね。 なので今回、自分自身学習のアウトプットも兼ねてQiitaで情報発信していこうと思います。 不慣れなところもあるとは思いますが、何卒よろしくお願いします。 そもそもNuxt.jsってなんすか。 vue.jsの機能をふんだんに盛り込んだフレームワークという認識でいいと思います。 (SEO対策に強いとかSSRとかいろいろあるけど詳しくは公式ドキュメントを見てね) Nuxt.js公式サイト 実際に動かしてみよう。 Nuxt.jsで開発を進めていくにあたってNode.js環境が必須なので、インストールがまだの方はこちらの記事を参考にされてみてください。 本当の初心者のためのNode.js超入門 ~環境構築編~ インストールが終わったら、下記のコマンドをお手元のCLI(Mac:コンソール, Win:コマンドプロンプト)にて実行してみましょう。 Iterm2 npx create-nuxt-app <namespace> //namespaceは任意の文字 対話形式でいろいろ聞かれます。 プロジェクト名 使用する言語(TSは言語認識か微妙なところ)JS or TS Yarn or npm(高速なyarnが推奨!どうしてもnpmがいい人はそれでも問題はないです。) UIフレームワーク(個人的にはnoneでおk。後々でも追加はできます。) Axios(http通信)かPWA(モバイルapp)かCMS(WordPressなどをいじりたい人)か。Webappを作るならaxios推奨 Lint tool(コードを綺麗に整形してくれる便利なやつ。ESlintで問題ない。) Testing frameworkの選択 無難にjestにしましょう。 SSRかSPAか。個人的にはSSRがオヌヌメです。 Serverかstaticか。これはserverで問題ないです。staticを作りたくなったらそれ用のコマンドがあります。 あとの項目はEnter連打で大丈夫です。 Server Side Rendering(SSR)のメリット SEO対策に効果的! ページの表示が爆速! OGの設定が容易! Server Side Rendering(SSR)のデメリット サーバーへのデプロイがやや大変。(人によっては致命的) Single Page Application(SPA)のメリット 実装が容易 サーバーの準備が比較的簡単 ページ遷移が爆速 Single Page Application(SPA)のデメリット 初期表示が遅い。。。 OGの設定が詳細にできない。 などがありますので、これらを踏まえた上で選択してみてください。 ここまでくればやや時間を要しながら、appの作成が完了したと思います。 iTerm2 cd <namespace> //自分のappの名前 でディレクトリに入り、 iTerm2 yarn dev //npmの人は npm run dev で実行します。(正式には開発モードと言ってローカルで変更した値を即時にビルドして実行してくれる便利なやつ。) デフォルトではポート3000番が開かれてますのでwebブラウザからlocalhost:3000にアクセスしてみましょう。 しっかり表示されてますね。ひとまず安心。 作成したディレクトリに入ると様々なフォルダが作成されていると思います。 何が何だかわからなくて挫折してしまいそうになりますが、グッと堪えてざっくりと概要を理解していきましょう!! ディレクトリの紹介 .nuxt 自分たちが書いたコードをえっちらおっちら実行可能なコードに直してくれているところ。 assets 今後cssなどを入れるためのところ components vue.jsは基本的にコンポーネント(部品)で管理していきます。その部品を記述するところです。コンポーネント指向がいまいちわからないよ。という方向けに下に参考文献貼っておきます。 layouts ページ全体の共通部分をここに記述します。(eg. header footer) middleware レンダリングされる前に実行したい関数の置き場所(認証されてないユーザーへのlogin画面へのリダイレクトなど。) node_modules 先人たちのありがたい知恵が詰まった場所。yarn add xxxとかするとここに入るよ。 pages これが本当に便利。この中に新しくファイルを作ると、そこに勝手にパスを通してくれる。 plugins 全体を通して使用したい関数などを記述する。 static faviconや画像などをここに置いておく。 store アプリケーションを通してのデータの保持。login情報などに主に使用される。 test テストに関する記述がある。 参考文献: Vuejsのちょっと便利なコンポーネント機能 【Nuxt.js】 middleware is 何? Nuxt.jsのpluginsにaxiosの共通部品を実装する とまあこんな感じでゆるっと理解しておけば、いずれ役に立つかと思います。 こんな感じでどしどし開発を進めてみてください。 これから機能ごとに記事をいくつかアップしていこうと考えてます。 もしよければそちらも参考になさってください。 ご視聴ありがとうございました(_ _)