- 1. 【JavaScript】String配列の要素をキーとするオブジェクトを作成する方法
- 2. YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみた
- 3. Puppeteerで日本語文字化けを防ぐRTA
- 4. Vue.js+Node.jsを利用したチャットアプリの作成
- 5. 【node.js】process.env.{変数名}
- 6. Javascript で RDSの起動・停止を制御して節約する
- 7. Twitter API v2 でキーワードから直近1週間分ツイートを収集する
- 8. Cloud Toolkitを使用したECSインスタンスへのNode.jsアプリケーションのデプロイ
- 9. Nodebrewでnodeのversionの変え方
- 10. 【LINEWORKS API】新機能!BOT でファイルを送受信!
- 11. Arduino Due✖️Ethernet shield2をつかってNode.js✖️ExpressでAPIをたたく
- 12. Amazon Linux2 で Puppeteer/Chrome headless ブラウザが動かない
- 13. Kotlin/JSでもサーバーサイドしたい!
- 14. 【Gatsby】node最新バージョンでyarnするとエラーが出るのでnodeのバージョンを変えてyarnしてみた
- 15. 【Node.js】LTSバージョンのコードネームの意味
- 16. EXPOフォトフレーム -人類の進歩とロゴとの調和-
- 17. Azure Bot Service を node.js で作ってスクリプトで自動更新する方法
- 18. gulp を使用したSCSS(SASS)環境の構築
- 19. Nuxt.jsの動的ルーティングでQiitaっぽい構成を作ってみるメモ
- 20. Nuxt on Dockerでpuppeteer使ってスクレイピングする。
【JavaScript】String配列の要素をキーとするオブジェクトを作成する方法
# はじめに
ループしながら、配列内の要素をキーとするオブジェクトを作成する方法を紹介します。
# 方法
“`javascript
const array = [‘key1’, ‘key2’, ‘key3’,]const createObj = (array) => {
const obj = new Object();
array.forEach(item => (Object.defineProperty(obj, item, {
enumerable: true, // ループのために必要!
value: ‘ここに値’
})));
return obj;
}console.log(createObj(array));
// {key1: ‘ここに値’, key2: ‘ここに値’, key3: ‘ここに値’}
“`オプションとして設定する、`enumerable: true`が重要です。
これがないと動きません。# まとめ
配列内の要素をキーとするオブジェクトを作成することができました。
YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみた
#はじめに
YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。
JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、
今回はURLを直打ちする形で実装しました。GET URLやJSONの仕様は下記を参照しました。
https://developers.google.com/youtube/v3/docs環境は下記になります。
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7#コードと実行結果
コードは下記になります。
“`youtube.js
const request = require(‘request’);const URL_YOUTUBE_API=’https://www.googleapis.com/youtube/v3/’;
const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;
const MY_YO
Puppeteerで日本語文字化けを防ぐRTA
たぶんこれが一番早いと思います
“`Dockerfile
FROM buildkite/puppeteer:5.2.1ENV LANG ja_JP.UTF-8
RUN apt-get update && \
apt-get -y install locales fonts-ipafont fonts-ipaexfont && \
echo “ja_JP UTF-8” > /etc/locale.gen && locale-gen
“`“`shell
$ docker build . -t puppeteer_ja
“`# 実行
“`javascript:qiita.js
const puppeteer = require(‘puppeteer’);(async () => {
const url = ‘https://qiita.com/’;const browser = await puppeteer.launch({
args: [
‘–no-sandbox’,
Vue.js+Node.jsを利用したチャットアプリの作成
## はじめに
最近Node.jsの勉強をしたので、何かしらのアウトプットを行おうとチャットアプリを作成しました。その備忘録です。
機能としては、簡単なログイン・ログアウト機能、チャット機能を実装しました。## 成果物
![sample_other.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555434/b4506835-2333-fce3-dc79-a7e40ce44321.gif)## 利用したライブラリ
– Vue.js
– VueCLI…Vue.js向けのアプリケーション開発環境セットアップなどの機能を提供するCLIツール
– vuetify…Vueのアプリケーションのデザインを容易に整えてくれるライブラリ
– vuex…vue全体で利用できるデータストアを管理できるライブラリ
– vuex-persistedstate…vuexの値をローカルストレージに保存するプラグイン
– socket.io-client…socket.ioでサーバへ接続
【node.js】process.env.{変数名}
大抵の場合、環境変数はハードコードされていて、
“`js
process.env.ENVNAME
“`たまに必要になってぼちぼち忘れてしまうので、メモ
“`js
process.env[ENVNAME]// ユースケース(条件によって環境変数を出し分けたい時)
const env1 = ‘ENV1’;
process.env[env1]; // process.env.ENV1 と同じ
“`こんな感じ。:sunglasses:
Javascript で RDSの起動・停止を制御して節約する
# やったことまとめ
RDSの起動・停止するスクリプトを書いて、cronで営業時間の間だけ起動するように制御しています
## なぜやろうと思ったか?
開発環境を業務時間外の時間で稼働させるとお金がもったいない
reactを勉強しててjavascript が思ったより面白かったから何か作りたくなった## やってみた感想
dash というスニペットツールで課金すると 公式ドキュメントが簡単に見れて文言で検索できたのがすごく便利でドキュメントを探す手間がかなり省けたので助かりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222463/f483b906-df11-2c2d-1c3b-e34c0ef317bf.png)javascript の書き方を理解し切れていないけれど、今後 react を触る過程で慣れたいな、、
## 実装した内容
### 事前準備※ RDSを制御可能な権限を持った iam の認証情報を使います
“`~/.aws/credent
Twitter API v2 でキーワードから直近1週間分ツイートを収集する
8月12日(米現地時間)、Twitter API v2 がアーリーアクセスで正式リリースされました。
https://developer.twitter.com/en/docs/twitter-api/early-accessそこで早速、直近1週間分のツイートのキーワード検索ができる `recent search API` でツイート集計・保存するコードを作ったので、一例として共有します。
### ソースコード
“`node.js
‘use strict’const fs = require(‘fs’);
const axios = require(‘axios’);
const Qs = require(‘qs’);
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));// Set target query
const target_query = ‘qiita.com’;// Format nested params correctly
axios.intercepto
Cloud Toolkitを使用したECSインスタンスへのNode.jsアプリケーションのデプロイ
この記事では、Cloud Toolkitを使って**Alibaba Cloud ECSインスタンス**に**Node.js**アプリケーションをデプロイする方法を紹介します。
*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/deploying-a-node-js-application-to-an-ecs-instance_594819)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*
前回の記事では、Alibaba Cloud [Elastic Compute Service (ECS) ](https://www.alibabacloud.com/ja/product/ecs)インスタンスに直接ローカル Java アプリケーションをデプロイする方法について説明し、読者から多くのフィードバックをいただきました。そこで、読者からの質問に答えるために、今回の記事ではさらに、Alibaba Cloud ECSインスタンスにNode.jsアプリケ
Nodebrewでnodeのversionの変え方
## Nodebrewでnodeのversionの変え方
####1. Nodebrewをインストールする
“`
brew install nodebrew
“`####2. 環境変数を追加
vi ~/.bash_profileで、以下を追加。“`
export PATH=$HOME/.nodebrew/current/bin:$PATH
“`#### 3. bash_profileを更新して設定を反映させる。
“`
source ~/.bash_profile
“`#### 4. セットアップ。これやらないとインストールできない。
“`
nodebrew setup
“`####5. バージョン指定してnodeをインストールするために、インストール可能なバージョンを確認
“`
nodebrew ls-remote
“`#### 6.nodeのインストール(versionを指定する)
“`
nodebrew install-binary
“`#### 7. 現在自分でインストールしたnodeのver
【LINEWORKS API】新機能!BOT でファイルを送受信!
ver 2.9 で(個人的に)待望の BOT でのファイル受信が追加されました!ヾ(´∀`)ノ
[[リリース] アップデートのお知らせ (8月25日)](https://developers.worksmobile.com/jp/notice?lang=ja&detailUrl=https%3A%2F%2Fjp1-notice.worksmobile.com%2Fview%2F%23%2Fdetail-view%2F497%3Fusess%3D1%26serviceType%3D12%26serviceLanguage%3Dja_JP)ではではさっそく使ってみましょう!
# ngrok を使って Callback を受信
おなじみ ngrok さんの登場です!
もう 2年の付き合いになりますか…長いような短いような。
本当に色々助かっております。今回もよろしくお願いしますね!・・・え、ngrok さんを知らない!?Σ( ゚Д゚)
ngrok さんはローカル PC の外部公開用 URL を取得してくれるステキモジュールなんですよ!
細かい設定は、過去の記事になりますがこちらの
Arduino Due✖️Ethernet shield2をつかってNode.js✖️ExpressでAPIをたたく
# はじめに
最近は、ESP32でWiFi通信をして何か作ってばかりです。
そういえば有線LANにつないでインターネット接続したことがあまりありませんでした。
なので、有線LANをつなぎNode.jsとExpressをつかったAPIをArduino Dueからたたいてみます。# 必要なもの、環境
– Arduino Due(Ethernet shield2がつかえれば良いのArduino Unoでも構いません)
– Ethernet shield2
– Node.js (v12.13.0)
– Express# プログラム
## Node.js側のプログラム
node.jsをインストールしている前提です。
適当なディレクトリに下記を実行します。そしてプログラムはindex.jsに書きます。“`
npm init
npm i express
touch index.js
“`“`javascript
var express = require(‘express’);
const bodyParser = require(‘body-parser’);
var htt
Amazon Linux2 で Puppeteer/Chrome headless ブラウザが動かない
## はじめに
Amazon Linux2 上で、Puppeteer から Chrome を起動しようとしたところ、起動しなかった。ググったところ、こうすれば動く!みたいなものはいくつか出てきたが、「なんで?」が不明なものが多かった。先に結論として、Chrome を起動するために必要なライブラリが足らなかったのが原因で、それは、yum install では、すんなり入らない(ものがある)ので、調べて入れる必要がある。
## 実行環境
“`
$ node -v
v14.9.0
$ npm -v
6.14.8
“`## Chrome のインストール
[puppeteerを使ってCentOSでheadless chromeを動かす](https://qiita.com/isante-kishiyo/items/309296e64ed34d3ee7b8)ここに書いてある通り。
以下を追加
“`/etc/yum.repos.d/google.chrome.repo
[google-chrome]
name=google-chrome
baseurl=http://dl.g
Kotlin/JSでもサーバーサイドしたい!
こんにちは、マヤミトです。
今回はKotlin/JSとkotlinx-nodejsを使ってサーバーを立てる簡単なサンプルを作ってみました。# kotlinx-nodejsの紹介
kotlinx-nodejsは、Node.jsのAPIのKotlin/JS向けの型定義を提供します。TypeScriptでいう `d.ts` ファイルがまとまっていると考えるとわかりやすいかもしれません。
https://github.com/Kotlin/kotlinx-nodejs# 導入
`build.gradle` に依存を追加し、targetをnodejsにします。
“`gradle:build.gradle.kts
repositories {
mavenCentral()
jcenter() // 追加
}dependencies {
implementation(kotlin(“stdlib-js”))
implementation(“org.jetbrains.kotlinx:kotlinx-nodejs:0.0.7”) // 追加
}
【Gatsby】node最新バージョンでyarnするとエラーが出るのでnodeのバージョンを変えてyarnしてみた
gatsby.jsのテーマをcloneして使おうとした時に“`yarn“`の時点でエラーが出たのでnodeのバージョンを変えて挙動を確認しました。
## Nodeバージョン
* v14.9.0(最版)
* v12.18.3 (LTS:長期サポート版)
* v10.22.8 (LTS:長期サポート版)
* v8.17.0 (LTS:長期サポート版)yarn、gatsby、Macのバージョン
“`
% yarn -v
1.22.4
% gatsby -v
Gatsby CLI version: 2.12.87
% sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.6
BuildVersion: 19G2021
“`## 検証に使ったGatsbyテーマ
[GitHub](https://github.com/niklasmtj/gatsby-theme-julia)
***gatsby-theme-julia***とういうテーマを“`git clone“`して使いました。## 検証方法
* gatsbyのテー
【Node.js】LTSバージョンのコードネームの意味
## LTSバージョンのコードネーム
“`nvm alias“`で確認すると
**lts/<コードネーム> -> <バージョン>**
とそれぞれNode.jsのLTS(長期サポート)バージョンにはコードネームが割り振られています。アルゴン、カーボン、、うすうす規則性は見えてきますが気になったので調べました。![nodecodename.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692347/e354890b-c49e-80a0-d1fe-7255405eece6.jpeg)
>* v4.9.1 → argon(アルゴン:原子番号18、元素記号はAr。)
* v6.17.1 → boron(ホウ素:原子番号5、元素記号はB。)
* v8.17.0 → carbon(炭素:原子番号6、元素記号はC。)
* v10.22.0 → dubnium(ドブニウム:原子番号105の元素、元素記号はDb。)
* v12.18.3 → er
EXPOフォトフレーム -人類の進歩とロゴとの調和-
# はじめにから、おわりにの一歩手前まで…
> 逃げない、はればれと立ち向かう、それがぼくのモットーだ
…どうも僕です。
最近の注目のニュースといえば大阪・関西万博ロゴマークの決定ですね。
そう!あの「いのちの輝きくん」です。![logo_expo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218189/56746f51-b25d-332d-c977-6bfebf1b876c.png)
> 引用元: [公益社団法人2025年日本国際博覧会協会](https://www.expo2025.or.jp/)皆さんはどんな印象でしたでしょうか?
twitterでも話題になったようですが賛否両論あるみたいですね。そして、最近はこんなニュースも出ていました。
[つかみはOK、大阪万博ロゴ 賛否両論も……創作意欲かき立てる?](https://www.itmedia.co.jp/news/articles/2008/31/news036.html)
ロゴをモチーフにして、パンや
Azure Bot Service を node.js で作ってスクリプトで自動更新する方法
Microsoft Bot Framework(node/JavaScript) v4 で作成した BOT を、スクリプトで Azure Bot Service に自動デプロイする方法を調べました。
Azure Pipeline とか Visual Studio 2019 とかに載ってしまえば楽なのかも知れませんが、自力で自動化したい場合の情報が探しづらくて苦労しました。## 0. 準備するもの
– コマンドプロンプトか PowerShell(Core) か Bash など
cURL を使うだけなので Windows でも macOS でもどちらでもOKです(私は Windows を使っています)。
## 1. Bot Service を作る(JS Echo bot)
こちら、
– [AzureでLINEのbotを作ってみる | cloud.config Tech Blog](https://tech-blog.cloud-config.jp/2019-10-17-azure-bot-service/)
を参考に、Azure に Bot を作成します。言語は node
gulp を使用したSCSS(SASS)環境の構築
普段はvsvcodeの拡張機能「Live Sass Compiler」を使用しているが、gulpを使用する機会があったので覚え書き
**事前準備**
Node.js [https://nodejs.org/ja/](https://nodejs.org/ja/)
※インストール方法は@sefoo0104さんが紹介してくれているのでそちらを参照
・[Node.jsをインストールする](https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b)gulp(ガルプ)について詳しく知りたい方は公式サイトもしくはCodeGridを参照
・gulp [公式サイト](https://gulpjs.com/)
・CodeGrid [現場で使えるgulp入門](https://app.codegrid.net/entry/gulp-1)**モジュール**
Node.jsの設定が終わったら以下のモジュールをインストール
※今回はカレントディレクトリにインストール一人で開発する場合(“devDependencies“)
“`ruby:
Nuxt.jsの動的ルーティングでQiitaっぽい構成を作ってみるメモ
Qiitaと同様の構成を作ってみたメモです。
## 通常のNuxt.jsの動的ルーティング
こんな構成にすると
“`
pages/
–| users/
—–| _id.vue
–| index.vue
“``https://ドメイン/users/<ユーザー名>` みたいな構成を作ることが出来ます。
> https://ja.nuxtjs.org/guide/routing#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0
このユーザー名の部分がURLにアクセスした際の値で動的に変わります。
## Qiitaっぽい構成って?
(2020年9月時点)Qiitaの記事は以下のような構成です。
“`
https://ドメイン/<ユーザー名>/items/<記事ID>
“`例: `https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d`
先ほどの`ユーザー名`だけが動的な場合と違って、
Nuxt on Dockerでpuppeteer使ってスクレイピングする。
# はじめに
あーあ、スクレイピングしたいな。ということで Nuxt on Docker でスクレイピングします。
node系だと[puppeteer](https://github.com/puppeteer/puppeteer)というライブラリがスクレイピングするのにおすすめっぽかったので、NuxtのserverMiddlewareからサクッとスクレイピングします。あまり人に迷惑をかけてはいけないと言われて育ったので、スクレイピングは自分のサイトにします。(ログイン不要だよ。ぜひ使ってみてね♪)
[toribure | ひとりでもチームでも使えるシンプルイズベストなブレストツール](https://toribure.herokuapp.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254216/f72c8d79-2328-92bf-08cf-5e71695f1363.png)やや宣伝ですね。トップページにかわいい鳥(いらすとや)の画像があります。今回はこれをス