- 1. [初心者向け]IBM Cloud のKubernetesクラスタにNode.jsアプリをデプロイ
- 2. RTA in Japan 2019のNodeCGレイアウトを動かしてみる
- 3. electron, reactでツールを作ってみた時に役に立ったリンクまとめ
- 4. Docker-composeを使ってnode.jsの環境構築をしてみたのよ。
- 5. DialogflowでGoogle Homeの挙動をカスタムする
- 6. 比較的早く Svelte をセットアップする方法
- 7. 暇すぎて画像ダウンロードツールを作ってみた話
- 8. Reactプロジェクト環境の構築メモ
- 9. Node.js イベントループ
- 10. GoogleカレンダーAPIを用いて予定への出欠登録を行う
- 11. Express (Node.js) の Graceful shutdown
- 12. EnterpriseEthereum/Kaleidoをローカルtruffleからアクセスする
- 13. 「node.js」「npm」を使って「bootstrap」を導入するまでのまとめ
- 14. Mac で npm install すると Cannot find module ‘./lib/async’ が出るようになったので、Nodeとnpmを削除して、nodebew で node を再インストールした時のメモ
- 15. これから NestJS をはじめようとしている方へ
- 16. ウェブスクレイピング
- 17. 高解像度降水ナウキャストの画像をpuppeteerによってロボット的に取得
- 18. VuePress でテンプレートから記事生成
- 19. 年末の断捨離アプリをFirebaseでhostingしてみた話(webアプリが少しずつ良くなっていく過程編)
- 20. Electronで「要素の検証」を再現する方法
[初心者向け]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)# node
## file system
– [path: tilde expansion · Issue #684 · nodejs/node](https://github.com/nodejs/node/issues
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 =
Express (Node.js) の Graceful shutdown
基本的な実装の仕方と、実装した場合 / しなかった場合、で実際にどういう動作をするか〜、について書きます。
> Linux, Node.js 12.13.0, での話だけをします。
## Graceful shutdown ?
[Express] \(Node.js\) に限りませんが、Web サーバーを停止する際、クライアントから接続中のリクエスト (リクエスト受付してまだレスポンスしていない接続) はどうなるでしょうか?
Graceful shutdown とは一般的に以下の停止を指します。
* 停止指示後に、新しい接続を受付しない
* 残った処理中の接続が完了するのを待ってから、プロセスを安全に停止する## SIGNALs
そもそも Web サーバープロセスはどうやって停止するかというと、 [SIGNAL] を用いて停止します。
具体的には下表の通り、コマンド等によって [SIGNAL] を送信できます。
| SIGNAL | kill command | Linux Terminal | Kubernetes | 実装依存 | 説明 |
|:——
EnterpriseEthereum/Kaleidoをローカルtruffleからアクセスする
# What’s this?
パーミッションドのブロックチェーン勉強中です。
BaaS色々使いたいですが如何せんお金がかかります。
そんな中、EthereumベースのBaaS「Kaleido」は永久無料プランがあるのでそれは使いやすい、ということで勉強しています。あんまり情報ないですが、マルチリージョンとかにもできるしEnterpriseEthereumのBaaSとしてはかなり優秀なのでは、という印象です。
詳しくは下記をみてください。[「Kaleido」企業向けイーサリアム開発のフルスタックBaaSとは?](https://coinpost.jp/?post_type=column&p=118876)
今回はコンソーシアムを立ててコントラクトをデプロイ、ローカルのアプリケーションからパーミッションドアクセスできるところまでを確認します。
ここまでできればDAppが作れるはずです。# 環境
下記で検証
“`sh
$ sw_vers
> ProductName: Mac OS X
> ProductVersion: 10.14.5
> BuildVersion:
「node.js」「npm」を使って「bootstrap」を導入するまでのまとめ
# 1. はじめに
## 1.1. 背景
「node.js」でSPA(シングル・ページ・アプリケーション)を作りたい。
それにあたって、「bootstrap」を使いたい!## 1.2. 目的
「node.js」の「npm」を使って「bootstrap」を読み込むこと。# 2. 「npm」で「bootstrap」の導入
早速、「npm」コマンドでbootstrapをインストールします。
## 2.1. 筆者の開発環境の確認
bootstrapの導入にはCDNを使うのが一番楽です。
“`html:(なんらかのHTMLにて)CDNでの導入
Mac で npm install すると Cannot find module ‘./lib/async’ が出るようになったので、Nodeとnpmを削除して、nodebew で node を再インストールした時のメモ# はじめに
タイトルのように、npm install すると [Cannot find module ‘./lib/async’] と表示されてインストールが進まなくなって、色々調べて結果 Node.jsを削除して、再度インストールした時のメモです。自分のメモ書きなので特にまとめもありませんし、役立つ情報も無いかもしれませんが残しておきます。
# 現象
npm -g でインストールしたのに、依存ライブラリが無いと言われる。
node.js のパスがおかしい感じ。## ログ
“`
$ npm root -g
/Users/kazoo/.npm-global/lib/node_modules$ node
Welcome to Node.js v12.12.0.
Type “.help” for more information.
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.editor Enter editor mode
.exit
これから NestJS をはじめようとしている方へ
この記事は [NestJS アドベントカレンダー 2019](https://qiita.com/advent-calendar/2019/nestjs) の 25 日目の枠です。
## はじめに
NestJS の知名度は 2019 年を通して上昇したように感じられますが、まだまだ日本語情報が少ないという思いからこのアドベントカレンダーを開始しました。
まず、 NestJS とは何か、どういうユースケースにマッチするか、という紹介については以下のスライドにまとまっています。
What is NestJS? / @potato4d
[https://speakerdeck.com/potato4d/what-is-nestjs-number-nestjs-meetup](https://speakerdeck.com/potato4d/what-is-nestjs-number-nestjs-meetup)次に 1 日目 〜 7 日目では、 NestJS を触ってみてアプリケーションを作るまでの具体的な作法を、コードを交えて紹介しています。
8 日目以降は NestJS を使
ウェブスクレイピング
# 概要
CSVに記入したURL一覧からページの情報をスクレイピングします。
# ソース
## package.json
“`
{
“name”: “scraping”,
“version”: “1.0.0”,
“description”: “scraping”,
“author”: “”,
“devDependencies”: {
“cheerio”: “^1.0.0-rc.3”,
“csv-parser”: “^2.3.2”,
“fs”: “0.0.1-security”,
“json2csv”: “^4.5.4”,
“request”: “^2.88.0”,
“request-promise”: “^4.2.5”
}
}
“`– cheerio ・・・ 読み込んだページをjQuery形式でDOM操作できる
– csv-parser ・・・ CSV形式をJSONに変換
– fs ・・・ ファイル操作
– json2csv ・・・ JSON形式をCSVに変換
– request ・・・ HTTP通
高解像度降水ナウキャストの画像をpuppeteerによってロボット的に取得
# これは何ですか?
気象庁の降水レーダー画像を取得するスクレーパーです。今はこれもロボットと言えば言えるようです。長らくWatir + ChromeDriverで頑張ってきましたが、解析の困難なエラーが出るようになって、ChromeDriverがいくら更新しても直ってこないので、迂回策としてpuppeteerで書いてみたところあっさり動作した次第です。[高解像度降水ナウキャストの画像取得 by puppeteer/node.js](https://gist.github.com/59t9/4244463dd836d0fa5c322b622c8325e7)
習作以上の物ではございませんが、お役に立てれば幸いです。
VuePress でテンプレートから記事生成
最近 VuePress で[個人ブログの運用をはじめました](https://openjny.github.io/)。
ですが、VuePress 単体では記事の Markdown を自動で生成できないことに悩んでいたので、[{{ mustache }}](https://mustache.github.io/) を使った簡易的な記事生成スクリプトを作りました。
イメージ的には `hexo` の [new コマンド](https://hexo.io/docs/commands.html#new) のような感じです。
# 登場人物
`new-post.js` と `templates/*.mustache` を新規に追加します。
“`
$ tree vuepress
.
├── new-post.js <------------------------- スクリプト本体 ├── package.json ├── docs <-------------------------------- VuePress のプロジェクトフォルダ │ ├── .vuepress │ │
年末の断捨離アプリをFirebaseでhostingしてみた話(webアプリが少しずつ良くなっていく過程編)
# Firebaseのhostingを使ってReactのSPAアプリをデプロイした話
です。
結論だけ話すとそんな感じです。(domainをとっていないことをお許しください)
https://dan-syari.web.app/#/年末の短期休暇でアプリを1つ作ろうと考えていて、今回作りました。(開発期間は2日間)
## 今回作ったアプリについて
– タイトル: 「Dan Syari」
– 内容: 来年したい目標を3つ立て、それについて簡単な質問に答えるとその目標の中で重要なことがわかる
– 技術:
– React
– Typescript ☆
– React Hooks ☆
– Reduxを使わない状態管理 (Context) ☆
– Firebase (Hosting) ☆
– Firestore ☆
– Material UI ☆
– SPA ☆☆がついているものは著者は初めて使ったものです
洗い出して列挙してみると、結構挑戦してたことがわかります
## 本記事の対象者
– 意気揚々と壮大なアプリを
Electronで「要素の検証」を再現する方法
##本文
初投稿です。
Chromeで右クリックすると出てくる「検証(I)」。
押すとデベロッパーツール内でカーソル直下の要素にジャンプします。
Electron内でも使えると開発中なにかと便利なので、この機能を再現してみます。##openDevTools
Electronで単にデベロッパーツールを開く場合は`webContents.openDevTools([options])`を使います。
“`javascript
const { remote } = require(‘electron’)
const webContents = remote.getCurrentWindow()
webContents.openDevTools()
“`
modeオプションで表示位置の指定ができます。| mode |状態|
|:-:|:–|
|right|画面右に表示|
|bottom|画面下に表示|
|detach|別ウィンドウに切り離して表示|
|undocked|別ウィンドウに切り離すが画面内に戻すこともできる|
“`javascript
webContents.ope