- 1. Angularで簡単アニメーション:左からフェードイン編
- 2. 各種 Web Application Framework メモリ使用量比較調査 (Go, Ruby, Python, Node.js, Java)
- 3. npm コマンドでグローバルインストールされたパッケージを表示する
- 4. 試しに「OpenID Connect Provider Certification」を通してみた
- 5. AWS+NodeJSでサーバレスな環境構築④
- 6. AWS+NodeJSでサーバレスな環境構築③
- 7. node.jsでAbemaをダウンロードする
- 8. 4年ぶりにエンジニアに戻った人の話
- 9. AWS+NodeJSでサーバレスな環境構築②
- 10. LINEトークをwindows10(NODE.js+google-home-notifier+Firebase)経由でgooglehomeに話させる(2019.12 )
- 11. [初心者向け]IBM Cloud のKubernetesクラスタにNode.jsアプリをデプロイ
- 12. RTA in Japan 2019のNodeCGレイアウトを動かしてみる
- 13. electron, reactでツールを作ってみた時に役に立ったリンクまとめ
- 14. Docker-composeを使ってnode.jsの環境構築をしてみたのよ。
- 15. DialogflowでGoogle Homeの挙動をカスタムする
- 16. 比較的早く Svelte をセットアップする方法
- 17. 暇すぎて画像ダウンロードツールを作ってみた話
- 18. Reactプロジェクト環境の構築メモ
- 19. Node.js イベントループ
- 20. GoogleカレンダーAPIを用いて予定への出欠登録を行う
Angularで簡単アニメーション:左からフェードイン編
犬クジラです。
初投稿の今回はAngularで簡単なアニメーションを動かす内容について投稿します。
これまで多くのWEBアニメーションはCSSを使って動かしていますがAngularでも簡単に作ることができます。
手順公開のため[Stackblitz](https://stackblitz.com/)上にて作業を行っています。# 今回の完成デモ
![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561833/fe60d602-31ef-b838-d7a6-a95e28009797.gif)# app.module.tsにAnimationsモジュール追加
Angularでアニメーションを利用するにはBrowserAnimationsModuleが必要なので追加します。
モジュールの追加インストールが必要な場合は追加してください。“`typescript:app.module.ts
import { NgModule } from ‘@angular/core’;
import
各種 Web Application Framework メモリ使用量比較調査 (Go, Ruby, Python, Node.js, Java)
## 概要
– 「Hello World な HTML を返す程度の Web アプリケーション」または「それぞれの公式ドキュメントに載っているチュートリアルの初期状態に近いもの」を作成してメモリ使用量を比較する
– Web アプリケーションサーバは現時点でよく使われていると思われるものを使用する
– テンプレートエンジンはフレームワークのデフォルト設定またはフレームワークが推奨しているものを使用する
– macOS Catalina 上でメモリ使用量を計測
– メモリ使用量の計測には ps コマンドの RSS 値を使う (複数のプロセスを使うものはRSS値を単純に足したものをメモリ使用量とした。メモリ共有部分については考慮していないため、もう少しメモリ使用量が少ないかもしれない)## 調査結果
メモリ使用量が少ない順に並べる。
– 7MB: Go 1.13 + Gin 1.5
– 10MB: Go 1.13 + Revel 0.21
– 24MB: Ruby 2.7 + Sinatra 2.0 + Puma 4.3
– 40MB: Python 3.8 + Flask 1.1
npm コマンドでグローバルインストールされたパッケージを表示する
次のコマンドを実行することで、グローバルインストールされたパッケージが表示される。
“`sh
npm ls -g –depth=0
“`– `npm ls` : インストールされているパッケージを表示する
– `npm ls -g` : グローバルインストールされているパッケージをする
– `npm ls –depth=0` : トップレベルのパッケージのみを表示する
試しに「OpenID Connect Provider Certification」を通してみた
以前、なんちゃってOpenID Connectサーバを立ち上げました。( [なんちゃってOAuth2/OpenID Connectサーバを自作する](https://qiita.com/poruruba/items/042adba2ac9a34839546) )
それはそれで役に立っているのですが、OpenID Connectに準拠しているかどうかを確認するためのTest Suite があったので、物は試しで通してみました。
結果は、散々でした。Optional機能は実装していないので当然ではありますが。Conformance Testing for OPs
https://openid.net/certification/testing/# テストの準備
まずは、準備として、テスト対象のエンドポイントのURLやサポートする機能を指定します。
https://op.certification.openid.net:60000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.c
AWS+NodeJSでサーバレスな環境構築④
# はじめに
今回は[前回](https://qiita.com/isacRU/items/b4ab67d12f2d2377aea8)の続きで、DELETE(対象ユーザーの削除), GET(全ユーザーの取得) PATCH(対象ユーザーの更新)を作っていきます。# DELETE(対象ユーザーの削除)
指定されたidを元に、対象のユーザーが削除されるようにしていきます。
### Lambda関数の作成と設定
ソース
“`javascript:index.js
‘use strict’;
const AWS = require(‘aws-sdk’);
const myRegion = “us-east-2”;AWS.config.updat
AWS+NodeJSでサーバレスな環境構築③
# はじめに
[前回の記事](https://qiita.com/isacRU/items/f5a16683331779805a1b)ではDynamoDBのテーブルと項目作成、Lambda関数で使うロールやインラインポリシーの設定を行いました。今回はその続きで、API Gateway(REST APIでCRUD実装)をトリガーにし、Lambda(NodeJS)関数呼び出して、DynamoDBに参照や更新をできるようにします。
表現等が不適切の場合はご指摘いただければ、幸いです。
※サーバレスに関してよくわからない方は、[こちら](https://qiita.com/isacRU/items/fe4751603d3da32b2daf)をご覧いただければと思います。# アーキテクチャ図
![serverless.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43096/d77beb25-d5cd-0908-9502-7645b2c76bdb.png)# 流れ
– ソースで直接(Api gatewa
node.jsでAbemaをダウンロードする
### [これを見よ](https://ysok2135.hateblo.jp/entry/2020/01/04/022105)
4年ぶりにエンジニアに戻った人の話
こんにちは、Qiita初投稿です。
色々あって昨年末に4年間勤めていた外資系のゲーム会社でのプロデューサー業を辞めてエンジニアに戻りました。
前職ではエンジニアではなく、翻訳やアカウントマネージメント系の仕事などをやっていました。
エンジニアブログを書く前に、今回は元エンジニアが4年間経ってエンジニアに戻って世界が一変していた、浦島太郎のような話をしたいと思います。## 経歴:
### 2011年: 大手企業に新卒でエンジニア就職
秋入社というのもありまさかの**新卒唯一の日本人**、まわりは中国人とインド人ばっかり。入社一日目でエンジニア職人気なさすぎオワタと思う。まわりのエンジニアが毎月行われれていた深夜作業に駆り出されていくのを怯える毎日(結局一度もその作業をすることはなかったが)### 2013年: ベンチャー企業へ転職
前職ではテスト業務しか触れず、いつの間にかポジションもQAエンジニアになってしまったのでエンジニアらしいことがしたいと一念発起して、当時黎明期だったモバイルアプリ業界へ転職。たまたま入社直後にアプリがヒットし、会社が急成長。カスタマーサポート担当→Q
AWS+NodeJSでサーバレスな環境構築②
# はじめに
[前回の記事](https://qiita.com/isacRU/items/fe4751603d3da32b2daf)ではAPI Gateway+Lambda(NodeJS)を組み合わせてWEBページを表示するというアウトプットでした。今回はDynamoDBのテーブルと項目作成、Lambda関数で使うロールやインラインポリシーの設定を載せていきます。サーバレスに関しては個人的に興味があるとのと、次の案件で用いるからその予習になります。自身も初めてということもあり、表現がわかりにくいところもあるかもしれません。その場合は容赦無く、コメントで指摘していただければ幸いです。
※サーバレスに関してよくわからない方は、前回の記事をご覧いただければと思います。# DynamoDBってなぁに?
簡単に言ってしまうと、AWSがマネージドサービスとして提供しているNoSQL(非リレーショナル)データベースになります。「値」とそれを取得するための「キー」だけを格納するというシンプルな機能を持った「Key-Valueストア」です。**一般的なユースケース**
・ミリ秒単位のアクセスレ
LINEトークをwindows10(NODE.js+google-home-notifier+Firebase)経由でgooglehomeに話させる(2019.12 )
# はじめに
windowsPCでLINE投稿内容をgooglehomeを話させてみました。先人達の記載の内容を参考にさせていただきました。ありがとうございます。
node v12.13.1
npm v6.12.1
google-home-notifier v1.2.0
windows 10pro# windowsにNODE.js環境
下記を参考にNODE.js環境を構築して、googlehomenotifierを導入します。
[Windows PCを使ってGoogle Homeを喋らせてみた](https://qiita.com/t_watari/items/8f7ec603a0fe1a3a35da)すべてを[C:\Program Files\nodejs]下でインストール。
作業フォルダ配下にするべきでしたが、やりなおす気にはなれず。。
warningがたくさん出ましたが気にせず、進みました。# googlehomenotifier修正
下記を参考に修正
①[google-home-notifierで”Error: get key failed from goo
[初心者向け]IBM Cloud のKubernetesクラスタにNode.jsアプリをデプロイ
# はじめに
年が明けまして2020年を迎えましたが、皆様いかがお過ごしでしょうか。2020年代は5Gの整備が完了し、IoTや自動運転技術が大いに浸透する10年であると言われていますが、2010年代も激動の10年でした。
特に、2013年ごろから開発が始まったKubernetesがようやくGA段階となり、各クラウドベンダーでマネージドサービスとして展開されたことが大きかったと思います。
これによってコンテナ技術やマイクロサービスがより管理しやすくなり、これから様々なサービスが生まれ進化してくことでしょう。今回は、初投稿ではありながら、これからKubernetesを触ってみたい!という方のために、私がいろんな文献や技術書を読み漁って勉強した、
Kubernetesでアプリケーションを外部公開する手順
を、IBM Cloudを用いて紹介しようと思います。
※なお、筆者も勉強し始めで、詳しい技術や論理は理解している途中でございますので、深く知りたい!という方はこの後の参考資料をご覧ください。
この記事はあくまでアプリを開発してKubernetesにデプロイする
RTA in Japan 2019のNodeCGレイアウトを動かしてみる
# はじめに
[RTA in JapanのNodeCGレイアウトを動かしてみる](https://qiita.com/pasta04/items/d676d9c2fb716176f665)で起動までの道のりを解説しましたが、RTA in Japan 2019 Online以降のバージョンでセットアップ手順が変わったのでその解説です。
なお、差分以外の説明は適当なので前回の記事も参照してください。## この記事の目標
ローカル環境でRTA in Japan 2019のNodeCGレイアウトを動作させる。# 事前に用意するもの
前と同じなので省略。Node.jsとyarnくらいは入れておいてください。# gitからダウンロード
コンソールで以下を実行。“`
git clone https://github.com/RTAinJapan/rtainjapan-layouts.git
“`git入れてない人はZIPファイルで直接ダウンロードしてもよいです。
![git.png](https://qiita-image-store.s3.ap-northeast-1.am
electron, reactでツールを作ってみた時に役に立ったリンクまとめ
# Electron
## memory leak
– [node.js – possible EventEmitter memory leak detected – Stack Overflow](https://stackoverflow.com/questions/9768444/possible-eventemitter-memory-leak-detected)## chrome extension
– [MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron](https://github.com/MarshallOfSound/electron-devtools-installer)## module
– [app.getAppPath() problem · Issue #7094 · electron/electron](https://github.com/electron/electron/iss
Docker-composeを使ってnode.jsの環境構築をしてみたのよ。
#Docker-composeを使ってnode.jsの環境構築をする。
こちらが前回の記事。
[Dockerについて基本的なことなぞってみたのよ](https://qiita.com/art_porokyu/items/bb96db922bf1e5742036)
こちらでDockerの基本的なことをなぞったので今回はdocker-composeを使っていこうと思います。##docker-composeとDockerfileどう違う?
docker-composeはdocker-compose.ymlの記述を`docker-compose`コマンドを使ってdockerイメージを作成します。
Dockerfileは`docker build`コマンドでdockerイメージを作成します。**Dockerfile**・・・docker image作成手順
**docker compose**・・・複数のコンテナのアプリケーション定義を記述でき、それぞれのコンテナのdocker imageを作成できる。まずDockerの考え方として
![messageImage_157795353
DialogflowでGoogle Homeの挙動をカスタムする
#目的
先日、YouTube Premium特典でGoogle Nest Miniを無料で頂いちゃいました!
早速ルンバやら電気やら色々連携して楽しんでいたのですが、やはり挙動をカスタムしてみたくなりまして…。
Dialogflowを使えばそこそこ簡単にできそうだったので、備忘録として残します。注記:DialogflowはちょこちょこWebページのUIが変わるっぽくて、ネット上の記事を漁っていても全然違う画面で大変でした。これを読む頃にはまた変わっているかもしれません!
#やりたいこと
2つのことをやってみたいと思います。* DialogflowのIntent機能を使って簡単なレスポンスを構築する
こちらに関してはほぼコーディング不要です。* DialogflowのIntent機能+Webhookで簡単なレスポンスを構築する
上とやりたいことは同じですが、あえてコードを書きます。これによって外部サービスを呼び出すなど、幅が広がるでしょう。#前提
* Google Home(またはGoogle Home mini、Google Nest mini、Google
比較的早く Svelte をセットアップする方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107158/e126eb62-134c-8ce7-8d0f-61005edfbf20.png)
[The State of JavaScript 2019](https://2019.stateofjs.com/front-end-frameworks/) にて突然出現した **Svelte**
その setup 手順を、[official page](https://svelte.dev/) を参考にまとめてみました?## 前提条件
* Node.js : 8.x or later
* npm package manager## インストール
“`bash
$ npx degit sveltejs/template 1st-svelte-project
$ cd 1st-svelte-project
$ npm i
“`## 起動
“`bash
$ npm run dev
“`## 確認
> http://loc
暇すぎて画像ダウンロードツールを作ってみた話
年末年始暇ですね。
暇つぶしに何か作ろうと思ったんですが、何も思いつかず。。。
普段AngularやNestJSでTypescriptばっかり書いてますが、たまにはJavascriptでも書いてみようと思いました。とりあえずWebページのスクレイピングってやったことないからJavascriptで書いてみるかーということでしょうもないツールを作ってみました。
# 作ったもの
WebページのURLを指定すると、そのページ内のimgタグの写真をすべてダウンロードするコマンドラインツールです
[img-downloader](https://github.com/teracy55/img-downloader)## 使い方
– nodeコマンドで`img-downloader.js`を実行します
– 引数に対象のWebページURLを指定します“`
npm install
node img-downloader.js {web-page-url}
“`## 結果
– `output/{YYYYMMDDhhmmss}`ディレクトリに画像が出力されます
## 実行
Reactプロジェクト環境の構築メモ
freeCodeCamp の [How to set up & deploy your React app from scratch using Webpack and Babel](https://medium.com/free-code-camp/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4) より、余計なパッケージ等が多く付属されてしまう `create-react-app` とは別の方法でのセットアップだそうだ。
1. [nvm で node と npm のインストール](#1-nvm-で-node-と-npm-をインストール)
2. [プロジェクトの初期化](#2-プロジェクトの初期化)
3. [npm パッケージのインストール](#3-npm-パッケージのインストール)
4. [package.json の設定](#4-packagejson-の設定)
5. [webpack.config.js の設定](#5-webpackconfigjs-の設
Node.js イベントループ
#Node.js とは
* Node.jsはChromeのV8 JavaScriptエンジンをベースに作られたJavaScriptランタイムです。
* Node.jsはevent-driven、non-blocking I/O modelデザインなので軽量で効率的です。# Blocking vs Non-Blocking
この二つの違いは、リソースをプロセスに集中すべきか否かです。**Blocking** (synchronous)
このオペレーションを処理する場合は、そのプロセス処理を終了するまで次のオペレーションに移ることが出来ません。例えば、お茶を飲むという行動はBlockingオペレーションです。
> 1. カップを口までは運ぶ 2. お茶を飲む 3. カップをテーブルに置く 4. 完了お茶を飲んでいる間は、お茶を飲むことに集中していると思います。
**Non-Blocking** (asynchronous)
このオペレーションを処理する場合は、とりあえずプロセス処理を開始します。
I/Oオペレーション等でリソースを使わない割に時間がかかりそうだったら、一旦
GoogleカレンダーAPIを用いて予定への出欠登録を行う
# はじめに
明けましておめでとうございます。早いもので令和2年(2020年)になりました。
なかなか投稿できておらず、久々の投稿となってしまいました。
2020年も気軽に投稿していければなと思っています。
今回は、前回の記事「[GoogleカレンダーAPIを用いてカレンダー一覧を取得する](https://qiita.com/kenbou/items/0fc85fa787db15c8b807)」に続き、
GoogleカレンダーAPIに関する記事です。## やりたいこと
+ Googleカレンダーに登録されてされている予定に対して出席・欠席の登録をAPI経由で行う私はこのAPIをAlexaスキルに組み込んで、共有カレンダーに対して音声経由で出欠登録できるようにしてみました。
## 実装
“`registEvent.js
‘use strict’;
const url = require(‘url’);
const https = require(‘https’);const HTTP_RESPONSE_OK = 200;
const ACCESS_TOKEN =