- 0.0.1. Electronをバージョンアップしたらjsのネイティブモジュールが読み込めなくなった話
- 0.0.2. create-react-appを使用したReactの環境構築
- 0.0.3. 【Node.js】dotenvを使用して環境変数を設定&設定した環境変数をHerokuにも適用する方法
- 0.0.4. YouTubeから動画をダウンロード（youtube-dl）
- 0.0.5. 【Node.js】JSON文字列をCSVファイルとして吐き出す
- 0.0.6. Node.jsで扱うよく扱うデータ形式の基礎知識
- 0.0.7. Macのターミナルからhttp-serverコマンドを使って Webサイトを検証できるようにした
- 0.0.8. Sequelize で名前を指定してmigrationをrollbackする
- 0.0.9. マネーフォワードクラウド請求書から案件データぶっこ抜いて、Exmentに突っ込み簡易SFA/CRMを行う
- 0.0.10. 同僚の作成したdockerコンテナをbuildする際にコケたポイントメモ
- 0.0.11. え！？ わずか3分でローカルにTypeScriptの実行環境を！？
- 0.0.12. 無料でSSR・ホスティング・API鯖を立てれるVercel。GitHub Actionsで自動デプロイ。
- 1. hello
- 1.0.1. MATERIAL-UIのMultiple SelectでChipから選択を解除する
- 1.0.2. 社内ネットワークからIBM Watsonにつながらない
- 1.0.3. 【AWS】【Lambda】 SalesforceのREST APIを呼び出す
- 1.0.4. デプロイコマンドを実行する際に対話形式で確認
- 1.0.5. いまさらNode.js入門
- 1.0.6. JSエコシステムぶらり探訪(2): Node.jsとCommonJS modules
- 1.0.7. nodejsでスクレイピング入門[阿部寛]
- 1.0.8. YOLP の WebAPI で1時間以内の降水予想と雨雲レーダー地図画像を取得する
Electronをバージョンアップしたらjsのネイティブモジュールが読み込めなくなった話
Electron9にバージョンアップしたところ、
途中でアプリの画面が動かなくなってしまう(windowになにも表示がされない)障害が発生しました。## 原因
* Electron9から、[appallowrendererprocessreuse](https://www.electronjs.org/docs/api/app#appallowrendererprocessreuse)のパラメーターがデフォルトで true になってた
* これによって２回目に読み込まれた時に、jsのネイティブモジュールが読み込めなくなっていた## appallowrendererprocessreuse とは
([公式サイト](https://www.electronjs.org/docs/api/app#appallowrendererprocessreuse)より) Boolean値。trueのときは、レンダラープロセスが確実に再起動されるように、Electronが設定しているオーバーライドを無効にする。このプロパティは、レンダラープロセスで使用できるネイティブモジュールに影響する
との
create-react-appを使用したReactの環境構築
# はじめに
久々、環境構築をしたのでまとめました。
今回はcreate-react-appを使用してreactの環境構築をしていきます
どなたかの参考になれば。# 環境
まずは作業を始める段階でのバージョンです。
homebrewは入っている前提で作業を進めていきます。|名前|version|補足|
|—|—|—|
|MacOS|10.15|Catalina|
|homebrew|2.5||
|node.js|12.9||
|yarn|1.22|stable|
|create-react-app|3.4||以下、今回インストールする物のバージョンです。
|名前|version|補足|
|—|—|—|
|nodebrew|1.0||
|node.js|14.10|stable 更新します|
|yarn|1.22|stable|
|create-react-app|3.4||## nodebrewのインストール
まずhomebrewを使用して、nodebrewをインストールしていきます。
既にnode.jsが入っているので必要ないといえ
【Node.js】dotenvを使用して環境変数を設定&設定した環境変数をHerokuにも適用する方法
node.jsで環境変数を設定する場合、
「dotenv」を使用すれば楽に設定することができる
色々と遠回りというか勘違いをして時間がかかってしまったのでメモ#手順
1. ルートディレクトリに「.env」という名前のファイルを作成
2. ターミナルにて“ $npm install dotenv –save “を実行
3. 1で作成した.envに環境変数として使用したいkey&valueを以下のように記載“`js:.env
NODE_USER_ID=12345678
NODE_PASSWORD=abcdefgh
“`
4.環境変数を使用したい箇所に以下のように記載“`js:app.js
require(‘dotenv’).config();
let userId = process.env.NODE_USER_ID;
// 12345678
console.log(userId);
“`以上の手順で環境変数を設定できます。
※.gitignoreに .envを追記するのを忘れないようにしてください。
記載済みであれば大丈夫です。あくまでもローカル上での設
YouTubeから動画をダウンロード（youtube-dl）
この方法はかなり安定して動画のダウンロードができます。動画ダウンロードサービスで四苦八苦するよりこちらがおすすめです。
コマンドラインで動作するためプログラムの機能として組み込むのも比較的容易です。
##youtube-dlとは
[youtube-dl](https://github.com/ytdl-org/youtube-dl) は、YouTube.com やその他のサイトから動画をダウンロードするための**コマンドライン**プログラムです。Pythonインタプリタ、バージョン 2.6、 2.7、 3.2+ が必要で、プラットフォームに依存しません。UnixでもWindowsでもmacOSでも動作します。パブリックドメインに置かれているので、変更したり、再配布したり、好きなように使うことができます。
##youtube-dlの使い方
コマンドラインで使います。“`shell:書式
youtube-dl [OPTIONS] YouTube動画のURL [URL…]
“`“`:使用例
$ youtube-dl https://www.youtube.c
【Node.js】JSON文字列をCSVファイルとして吐き出す
### 要件
・DBに格納されているデータをCSVでダウンロードできるようにする
・データはユーザーが回答したアンケートの結果### 使用したモジュール
・json2csv
https://www.npmjs.com/package/json2csv## 開発
### 1. データの成形今回は、ユーザーが回答したアンケート結果をCSVとして出力したいと思いますので、表示する項目を`ユーザー名`、`メールアドレス`、`アンケート設問`、`回答結果`とします。
“`js:データを成形する
// DBから出力したいデータを取得する
const data = await getData.getUserData(user_id);// データをJSON型に整える
const groupData = data.reduce((result, current) => {
// user_idごとにデータをまとめる
const element = result.find((p) => {
return p.i
Node.jsで扱うよく扱うデータ形式の基礎知識
##JSON
ご存知、[JSON(JavaScript Object Notation)](http://json.org/json-ja.html)形式。
[JSONオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON)は、標準ビルトインオブジェクトなので特別な準備なしで手軽に扱うことができる。###サンプル
“`javascript:JSONの例
{
“browsers”: {
“firefox”: {
“name”: “Firefox”,
“pref_url”: “about:config”,
“releases”: {
“1”: {
“release_date”: “2004-11-09”,
“status”: “retired”,
“engine”: “Gecko”,
“engine_version
Macのターミナルからhttp-serverコマンドを使って Webサイトを検証できるようにした
Macが突然壊れたので新しいMacを購入した。
現在、Webサイトを運営中でそれの更新作業を新しいMacでしようとした時に、ローカル環境で検証できないようになっていた。具体的には、ターミナルでhttp-serverコマンドを打ってもエラーが出てくる。
新しいMacを購入してから環境構築をして無いねんから、そりゃ当然ですね。とうことで、環境構築をすることにしましたが、ちょこちょこ詰まったので、ここに残しておきます。
主にこちらの記事を参考にさせていただきました。
https://qiita.com/standard-software/items/1afe7b64c4c644fdd9e4#とりあえずhttp-server コマンドのインストール
とにもかくにも、まずインストールを試みる“`
% npm install http-server -g
“`しかし、下記応答が。。。
“`
zsh: command not found: npm
“`#command not found: npmと出た時の対処
npmコマンドが使えないよ。とのことなので、以下の
Sequelize で名前を指定してmigrationをrollbackする
“`
sequelize db:migrate:status // でmigration nameの一覧表示
sequelize db:migrate:undo –name// rollback
“`
マネーフォワードクラウド請求書から案件データぶっこ抜いて、Exmentに突っ込み簡易SFA/CRMを行う
SaaSのサービスをAPI同士で繋いで、業務改善アプリ的なものをつくるのが近年の趣味な筆者です。こんにちは。
## マネーフォワードクラウド請求書 is 何？
マネーフォワードクラウドは、freeeと人気を二分する、中小企業やフリーランス向けのSaaS会計システムです。筆者は会社勤務の傍ら副業もしてますので、マネーフォワードクラウド確定申告というのを使って、毎年確定申告をしています。また、関連サービスとしてマネーフォワードクラウド請求書（以下MFクラウド請求書）というサービスもあり、これを使って見積書と請求書を発行しています。
本稿とは別の余談になりますが、なかなかよく出来たサービスですので、請求書発行のサービスを探しておられる方は一度トライアルされてみてはいかがでしょうか。
## Exment is 何？
Exmentは、OSSのWeb DBシステムです。SaaSではありませんが、筆者はLightSail + Dockerというクラウド環境で試験運用しています。
詳しくは下記記事をご参照ください。
– [kintoneクローン？ OSSWebDBのExmentをLig
同僚の作成したdockerコンテナをbuildする際にコケたポイントメモ
## 初めに
同僚が作成してくれたnodeのdockerコンテナをbuildする際に何点かコケたポイントがありましたのでメモしてみます。
同様のケースで嵌っている方がいたら参考になれたらと思います！## 前提
__コンテナを作成してくれた人のPC__
Mac Pro
こちらの環境では一発`docker-compose up –build`を流せばbuildとupが通る
__私のPC__
Windows10 Pro
npm –version
6.14.5
数回コケる
__コンテナの構成__
Node→image: node:latest
MySQL→image: mysql:5.7
Nginx→image: nginx:latest## Cannot create container for service mysql: Conflict
ということでローカルにTypeScriptの実行環境を作ります。すぐできます。
TypeScriptを使うだけなら、[TypeScript playground](https://typescript-play.js.org/)等を使えばいいと思うのですが、「○○のパッケージを試したい。ついでだからTypeScriptも使いたい」という欲張りさんはローカルに環境構築したくなることもあるでしょう。え？ codesandbox? 知らんなぁ。
とにかくローカルにTypeScriptの実行環境を作っていきます。ゴールは「コンパイルして出来たjsファイルをnodeコマンドで実行するところ」までです。
# 事前準備
以下は事前に準備できてるとします。出来てない方は適当にググってください。– node, npm(yarn)
# ローカルにTypeScriptの実行環境を作成
ここから本題です。
あと私はyarn派なのでyarnを使います。## プロジェクトの作成
プロジェクトディレクトリを作成して、package.jsonを作りましょう。“`bash
無料でSSR・ホスティング・API鯖を立てれるVercel。GitHub Actionsで自動デプロイ。
あらかじめローカルでプロジェクトを作っておく
## 環境変数
VECEL_TOKEN → コンパネのSettings→Tokens
VECEL_ORG_ID → .vercel/project.jsonに書いてる
VECEL_PROJECT_ID → .vercel/project.jsonに書いてる## ソースコード
デプロイするファイル
“`public/index.html
Document
hello
“`“`..github/workflows/main.yml
# 何でもいいから名前をつける。今回はCI
name: CI#
MATERIAL-UIのMultiple SelectでChipから選択を解除する
#はじめに
React + Typescript + MaterialUIでフロントエンドを作成していたときに実現したいことができなかったので参考程度に投稿します。##実現できなかった原因
Chipの×ボタンを押してもSelectのメニューが出てきてしまう##実現したいこと
MaterialUIの公式ドキュメントに書かれていた「[Multiple Select](https://material-ui.com/components/selects/#multiple-select)(Chip)」でChipの×ボタンからも選択を解除したい！
#結論
Chipコンポーネントに以下プロパティを追加“`react
onMouseDown={(event) => {event.stopPropagation();}}
“`#前提条件
社内ネットワークからIBM Watsonにつながらない
#はじめに
社内ProxyのおかげでIBM WatsonのAPIが通らかったので対処法を記載します。
(今回はWatson Discoveryです)#結論
node-sdkのところに書いてありました。:open_hands:
[Use behind a corporate proxy](https://github.com/watson-developer-cloud/node-sdk#use-behind-a-corporate-proxy)“`
npm install tunnel
“`#前提条件
+ Node v10.16.3
+ npm v6.9.0
+ IBM CloudのWatsonDiscoveryのサービスが既にあり、collectionが作成済みであることDiscoveryについてはこちらの記事が参考になると思います。
Discoveryってなんぞ？という方はまずこちらの記事を見ることをおすすめします。
[【2019/2月 全面更新!】Watson Discovery Serviceが日本語対応したので、触ってみた【SDUやってみた】編](htt
【AWS】【Lambda】 SalesforceのREST APIを呼び出す
– 表題の通り、LambdaからSalesforceのREST APIを呼び出してみます
– Lambdaの言語はNode.jsを使用します## Salesforce接続アプリケーションの設定
– 外部サービスとSalesforceを接続する際にOAuth認証を使います
– OAuthの設定をするには、Salesforceで接続アプリケーションの設定を行います### 設定方法
– Salesforceにログインした後、[設定]>[アプリケーション – アプリケーションマネージャ]と選んで
– [新規接続アプリケーション]ボタンをクリックします
– 以下を入力します
– 接続アプリケーション名
– 適当に「AWS Lambda」とでも
– API参照名
– 自動入力されます
– 取引先責任者メール
– とりあえずシステム管理者のアドレスにしておきましょう
– OAuth設定の有効化
– チェックします
– コールバックURL
– 今の所は適当に
– 選択
デプロイコマンドを実行する際に対話形式で確認
デプロイのコマンドを実行する際に、環境ごとで確認をするためのスクリプトを書きます。
指定された入力があれば、そのあとの処理を続けて実行、指定と違えばそこで終了します。“`json:package.json
{
“scripts”: {
“deploy”: “sh confirmation.sh STG && node deploy”
}
}
“`“`shell:confirmation.sh
#!/bin/bashENV_NAME=$1
function ConfirmExecution() {
echo “${ENV_NAME}環境のスクリプトを実行しますか？”
echo “実行する場合は${ENV_NAME}と入力してください”
read inputif [ -z $input ]; then
ConfirmExecution
elif [ $input = ${ENV_NAME} ]; then
echo “スクリプトを実行します。”
else
echo “スクリプトを終了します。”
いまさらNode.js入門
## 記事概要
環境構築まわりは誰か出来る人ひとりがやってしまえば
触る必要がない（むしろ触らないほうが良いくらい）ので
なかなか知識が付きにくい。
という事で少し勉強してみた事をまとめてみました！—
## Node.js とは
—
そもそも[Node.js](https://nodejs.org/ja/)とは何ぞやというところですが、
めちゃくちゃ簡単に言うと、サーバーサイドで動くJavaScript環境の事です。と言葉で聞いてもピンと来ないので、実際にどういう事か
次のスライドで見てみましょう。—
やっている事の説明は次のスライドで行っています。
—
## 前のスライドでやっている事
1. `test`を出力するスクリプトを作成
2. スクリプトファイルをダブルクリックで実行しようとすると
JSエコシステムぶらり探訪(2): Node.jsとCommonJS modules
JSエコシステムの進化を語るにはNode.jsを避けて通ることはできません。Node.jsと、それ自身の持つモジュール機能について歴史的な背景を踏まえつつ説明します。
[←前](https://qiita.com/qnighy/items/fc19f328cf36fc28658c) [目次](https://qiita.com/qnighy/items/16fdd8e58309a1f706a0)
## Node.js
Node.jsは非同期I/Oを備えたサーバーサイドJavaScriptのための実行環境として2009年に登場しました。[^server-side-js-before-node] 現在はサーバーサイドJavaScriptだけではなく、JavaScriptのビルド環境として無くてはならないものになっています。
[^server-side-js-before-node]: [Wikipediaの記述](https://en.wikipedia.org/wiki/Node.js#History)によると、それ以前にもサーバーサイドJavaScriptの技術自体は存在してい
nodejsでスクレイピング入門[阿部寛]
# はじめに
卒研でいろいろあって、nodejsでスクレイピングやりそうになってきましたのでそれのメモです、
入門ということで[阿部寛のHP](http://abehiroshi.la.coocan.jp/)から阿部寛の画像をとっていきたいと思います、# スクレイピングとは？
そもそもスクレイピングってなんだろってなるから調べました。
意味はHPから情報を抽出するということらしいでした、
使い道としては、サイトに載ってる情報が欲しいとか、APIがないけどもHPならあるとかだったときはスクレイピングで情報分捕る感じかと、# 阿部寛ってだーれ？
日本の俳優、テルマエ・ロマエとかに出ているお方、上田次郎、日本科学技術大学理工学部教授、何故ベストを尽くさないのか？
よくHPが情報系の実験ネタ(?)に扱われるほどすごい[公式サイト](http://abehiroshi.la.coocan.jp/)をもっているお方# できること
nodejsから阿部寛のサイトにある阿部寛の写真と取得できる# つかったもの
– nodejs
– yarn# できたもの
## 最初はHTMLデータ
YOLP の WebAPI で1時間以内の降水予想と雨雲レーダー地図画像を取得する
## 概要
– YOLP (Yahoo! Open Local Platform) の Yahoo!ジオコーダAPI + 気象情報API + Yahoo!スタティックマップAPI を使用して1時間以内の降水予想と雨雲レーダー地図画像を取得する
– 動作確認環境: Node.js v14.9.0 + node-fetch 2.6.1## node-fetch のインストール
“`
$ npm i node-fetch
“`## サンプルコード
“`js
‘use strict’const fs = require(‘fs’)
const qs = require(‘querystring’)
const fetch = require(‘node-fetch’) // window.fetch 互換 Fetch API// アプリケーションID
const APPID = ‘YOUR_APPLICATION_ID’// テキストにマッチした住所情報を取得する
async function getAddressLocation(text) {// U
