- 0.0.1. kintone プラグイン開発メモ バージョンの書換え
- 0.0.2. Node.jsでmongodb特有のIDを使う
- 0.0.3. MongodbのfindOneで特定の要素だけ取り出す方法
- 0.0.4. Codesandboxがうんともすんとも言わなくなったときの対応
- 0.0.5. 超簡単!Mock API開発:json-serverを試す
- 0.0.6. 【GAS】clasp pushコマンド実行時に出たエラーの対処
- 0.0.7. node.js + mysql (2021)
- 0.0.8. node.js超入門ノート6(データベース CRUD編)
- 0.0.9. node.js超入門ノート5(データベース データ表示編)
- 0.0.10. Electron + React + Django REST Framework でlocal GUI アプリを作る
- 0.0.11. 【2021年】Gulp4 インストールとSass,EJSの環境設定までの手順メモ
- 0.0.12. htmlタグ、を表示されないようにしたい【Node.js】【 Express】【 ejs】
- 1. そのまま表示されるのを直したい
- 2. そのまま表示される
- 3.
kintone プラグイン開発メモ バージョンの書換え
kintone プラグインの開発で、一つのプラグイン毎に製品版、試用版等全部で4つを作成している。
バージョンを管理している manifest.json も4つあり、バージョンアップの際にまとめて書き換える処理を作ったのでメモしてきます。# 概要
プラグインファイルで、バージョンに関係しているものが下記で、バージョンアップ時にいちいち変更が必要。たまに忘れたり、間違えたりもする。
面倒なので、shelljs の sed を使って、書き換える。– 製品版、試用版等で、少しづつ構成が異なり、manifest.json が4つある
– package.json で、プラグインをパッケージする kintone-plugin-packer の出力先のプラグインファイル名にバージョンを付与している。# sed とは
unix コマンドで、テキストファイルの文字列を正規表現で書き換える定番のツール。
node で使える sed を調べたら、[shelljs](https://github.com/shelljs/shelljs/blob/master/README.md) があったの
Node.jsでmongodb特有のIDを使う
#はじめに
Mongodbには_idというMongoDB特有のIDがあります。これを自分から定義するのには、MongoDBshellで扱う場合ですらObjectId()という風にしなくてはいけません。ともかくMongoDBにおける_idの方はstringのような型ではなくて特殊な型をしているようです。node.jsおよびそこから別のプログラムに運び出した際に、エラーの原因になったので、これを解説していきます。##バージョン
・Node.js 15.11.0
・MongoDB 4.4.6
・MongoDBドライバ 7.6.2#ほんぶん
例えばリレーショナルデータベースと同様にデータを最小化するために正規化する場合もあります。そうした場合ですけど、なぜだか_idがstring型に直っている場合があります。そうした場合、if文での評価でtrueになることがありません。そこで使えるメソッド紹介です。
##toString()“`javascript
//id1をObjectId
//id2をstringとします
id1 = id1.toString()
if
MongodbのfindOneで特定の要素だけ取り出す方法
#初めに
ずいぶん前に質問していた内容を自己解決していたのにクローズし忘れていたということに今頃(数カ月後)になって気がついたため、折角だしその解決法を記事にまとめようと書いております。回答して下さった@anonymouさんほんとごめんなさい。それと回答してくれてありがとうございます!##バージョン
・Node.js 15.11.0
・MongoDB 4.4.6
・MongoDBドライバ 7.6.2
#問題点
そもそもの問題はfindOneの第2パラメータに値をセットしてみてもなぜだか動作しないというお話でした。“`javascript
let result = await col.findOne({_id:~~~},{username:1});
//colにはdb.collectionでインスタントを定義済み。
//awaitはasync関数の中で実行しているという前提です。
“`このプログラムの実行結果はusernameだけが表示されるというものです。もし仮にconsole.logした場合が以下の通り
“`javascript
//間違い
Codesandboxがうんともすんとも言わなくなったときの対応
[Codesandbox](https://codesandbox.io/)。node.jsベースのサーバサイドコードも手軽に実行できるすごくいいサービスなのですが、大きな難点があるため実は最近あまり使わなくなっていました。
それは、
**サーバサイド系は不安定で事実上使い物にならない**
という状態だったからです。
Codesandboxの各種テンプレートでは裏でnodemonが動作しているようで、コードの変更を検知して自動的に状態を更新してくれるのですが、node.jsテンプレートとかで一定の変更を加えると全く反応してくれなくなります。
100歩譲って動かなくなるのはいいのですが、そうなってしまうとそれ以上対応するすべがなくプロジェクトを破棄して新しく作り直すしか方法がなかったのです(しかも、新しいプロジェクトもなにかの拍子に動かなくなるという・・・)。
が、解決方法が見つかったので紹介します。
手順は、下記の通りです。
* 開発ブラウザデベロッパツールを表示しApplicationストレージを削除(Clear site data)
* Codesandboxから
超簡単!Mock API開発:json-serverを試す
今更ながらjson-serverを試します。
## 準備
node.jsが必要な以外は特にありません。
作業場作って(どこでもいいです)、json-serverをインストール。“`bash
cd
mkdir mock-api
cd mock-apinpm install -D json-server”
“`## API定義(実装)
### 定義ファイル生成
jsonなら名前とかは何でもいい。
“`bash
touch api.json
“`### サンプルデータを実装
基準となるデータを入れる。
“`json:api.json
{
“users”: [
{
“id”: 1,
“name”: “hoge”,
“age”: 11
},
{
“id”: 2,
“name”: “foo”,
“age”: 22
}
]
}
“`### 実行
これでREST APIサーバが起動します。
“`bash
npx json-server a
【GAS】clasp pushコマンド実行時に出たエラーの対処
## User has not enabled the Apps Script APIというエラー
GASをローカルで開発する際に便利なCLIであるclasp導入時に発生したエラー。
初期設定として`clasp login`が完了しているにも関わらず、`clasp push`を実行すると下記エラーメッセージが表示されて、pushに失敗する。“`
GaxiosError:User has not enabled the Apps Script API.
Enable it by visiting then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
“`
結論、開発で使用するGoogleアカウントの設定で`Google Apps Script API`の利用をオンに設定してあげる必要があった・・・。下記のリンクから設定可能。https://script.google.com/home/us
node.js + mysql (2021)
最近は[mysql2](https://www.npmjs.com/package/mysql2)というパッケージを利用するのがいいらしい。
特にasync/awaitを利用するときには。## 準備
“`bash
cd
mkdir mysql2-test
cd mysql2-testnpm install mysql2
touch index.js
“`## 実装
“`js:index.js
const mysql = require(“mysql2/promise”);(async () => {
try {
//内容は各自の環境に合わせて変える
const con = await mysql.createConnection({
host: “localhost”,
user: “root”,
password: “root”,
database: “testdb”
});await con
node.js超入門ノート6(データベース CRUD編)
# 準備
viewsフォルダの中にhelloフォルダを作成します。
その後hello.ejsをhelloフォルダに移動し、index.ejsに名前を変更します。
hello.jsを以下のように修正します。“`javascript:routes/hello.js
// 変更前
res.render(‘hello’, data);
// 変更後
res.render(‘hello/index’, data);
“`# レコードの新規作成
以下のファイルを追加します。“`javascript:views/hello/add.ejs
<%= title %> node.js超入門ノート5(データベース データ表示編)# 導入(データベース構築)
データベースを導入します。
今回はSQLite3を使用するので以下のコマンドでインストールします。“`
apt -y update
apt -y install sqlite3
“`
次にファイルを作成します。“`
sqlite3 mydb.sqlite3
“`次のコマンドでテーブル、カラムを作成します。
“`
create table mydata(id integer not null primary key autoincrement unique, name text not null, mail text not null,age integer);
“`
次のコマンドでデータを挿入します。“`
insert into mydata values(1, ‘taro’, ‘taro@yamada’, 39);
insert into mydata values(2, ‘hanako’, ‘hanako@flower’, 28);
insert into mydata values(3, ‘sachiko’, ‘sac
Electron + React + Django REST Framework でlocal GUI アプリを作る
## Electron+react+django REST framework
Local GUIアプリを作成する必要が出た際、言語の候補としては C#,python,Java などが上がってくることと思います。ただし、GUIの見た目がほぼWindows95時代のアプリのごとくいけていない。。。
そこでFrontをreactで、BackendをDjangoRESTFramework で実装しElectronを使ってdesktop app 化することにしました。
情報が少なく、苦労したので、個人メモがわりに残しておきます。参考にさせていただいたサイト:
① [Wijmo(ウィジモ)」とElectron、Reactを組み合わせて、Web技術でデスクトップアプリをつくろう] (https://codezine.jp/article/detail/13182)
② [Reactアプリから Django Rest API を叩いてみる](https://qiita.com/sand/items/80a67da0a44b042f0bc3)方針:
1. 最初にElectron+React
【2021年】Gulp4 インストールとSass,EJSの環境設定までの手順メモ
こんにちは、デザイナーの [kanna ](https://twitter.com/white_raichi) です。
この記事はWEB制作の環境構築に初挑戦して学んだことをまとめています。__Gulp4__についての内容になります。
バージョンの違いによって書き方が変わる部分があるのでご注意ください。【環境】
・macOS Big Sur v11.4
・VScode v1.59.0
・zsh#そもそもGulpって何?
gulpはNode.jsをベースとしたタスクランナーの一つです。タスクランナーとは、Webサイト構築に必要な処理をタスクとして自動化してくれるプログラムのことで、「どのファイルを」「どのように加工して」「どこに出力するか」などをタスクとして設定できるツール全般のことを指します。* [現場で使えるgulp入門|第1回 gulpとは何か | CodeGrid](https://www.codegrid.net/articles/2014-gulp-1/)
* [Gulp公式サイト](https://gulpjs.com/)#gulpで実現したいこ
htmlタグ、
を表示されないようにしたい【Node.js】【 Express】【 ejs】
#htmlタグが表示されてしまう
`Node.js` `Express` `ejs`を使って、Webアプリを作成していた際、`request.render()`で飛ばした文字列が、そのまま表示されてしまった。
htmlと認識されるようにしたい。###ブラウザにこんな感じでhtmlタグが表示されてしまっている。
“`
そのまま表示される
のを直したいそのまま表示されるよぉ〜
“`
###現在のコード( cssとかは割愛)
“`app.js
const express = require(‘express’);
const app = express();app.use(express.static(‘public’));
app.get(‘/’, (req, res) => {
const result = [{comment:”そのまま表示される
“},{comment:”
そのまま表示される
“}];
res.render(‘index.ejs’,{tests:re
node.js超入門ノート4(データを扱う機能編)
# クエリーパラメーターを扱う
routesのhello.jsを以下のように修正します。“`javascript:routes/hello.js
var express = require(‘express’);
var router = express.Router();/* GET home page. */
router.get(‘/’, (req, res, next) => {
var name = req.query.name;
var mail = req.query.mail;
var data = {
title: ‘Hello!’,
content: ‘あなたの名前は、’ + name + ‘。
‘ + ‘メールアドレスは、’ + mail + ‘です。’
};
res.render(‘hello’, data);
});module.exports = router;
“`
以下のアドレスにアクセスします。
?以降はクエリーパラメーターになります。http://loc
node.js超入門ノート3(Webページ追加編)
# Webページの追加
まずはテンプレートファイルを作成します。
viewsフォルダに以下のファイルを追加します。“`html:hello.ejs
<%= title %>
<%= title %>
[TypeORM] jsconfig.jsonエラー
##はじめに
VSCodeでTypeORM使ってコード実装してるときに、jsonconfig.jsで原因不明のエラーが発生したのでメモ?##エラー内容
#####File ‘/home/filename/node_modules/source-map/source-map/’not found.The file is in the program because: Root file specified for complication
not foundって怒られてるけど、/home/filename/node_modules/source-map/source-map/にファイルはある。
##対処方法
VSCodeを再起動したら直った
React とか Vue とか Webpack とかで混乱している人のための現代フロントエンド開発入門
## 序論
本稿は [元市役所職員がWEBプログラマに転職するまでのロードマップ](https://qiita.com/amenoyoya/items/3b63a3fead17bc656f34) の連載記事の一部です。
本稿は、Node.js ベースの現代的フロントエンド開発についてまとめた入門記事です。
主に以下のような方を対象としています。
– HTML, CSS, JavaScript を使った基本的なWebフロントエンド開発ができる方
– Node.js ベースの最近のフロントエンド開発について、情報が多すぎてよく分からなくなっている方
– React や Vue といった最近のフロントエンドライブラリを使った開発に興味のある方## Webフロントエンド開発の歴史
1991年に Web (World Wide Web) がインターネット上に誕生した当初、Web は文書閲覧のためのものでした。
そのため、現在我々が利用するような SNS や Google Maps のようなインタラクティブコンテンツ(ユーザと Web が対話的にやりとりするようなコンテンツ)は存在
Node.js モジュール?なにそれおいしいの?
駆け出しエンジニアのNode Tutorial学習メモです。
解説するより見て学べ!というニュアンスのまとめとなりました。
実際にコードを読み解いていくと感覚的に理解できるはずです。
学習に使ったサイトはこちら!
→[Node.js Tutorial – W3Schools](https://www.w3schools.com/nodejs/)##目次
[1.ダウンロードからHelloWorldまで](https://qiita.com/Nakazawa-musc/items/de4f1733504ab27cc86e#1%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89helloworld%E3%81%BE%E3%81%A7)
[2.モジュールとは?](https://qiita.com/Nakazawa-musc/items/de4f1733504ab27cc86e#2%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A8%E3Google Nest Hubに、WebRTCで映像配信してみた
Google Nest Hubは、Googleが提供するスマートディスプレイです。
「OK Google」ができる上に、ディスプレイがついているので、いろいろ役に立ちそうです。ということで、ディスプレイがついているので、映像配信をしてあげようと思います。映像配信と言えば、最近はやりのWebRTCを使います。
Googleのスマートディスプレイで、WebRTCを配信するために、以下を試してみました。
①Googleスマートホームのカメラとして実装する。
②GoogleアシスタントのInteractive Canvasを使う。①が、もともとやりたかったことです。
Smart Home CameraStream Trait Schema
https://developers.google.com/assistant/smarthome/traits/camerastream?hl=ja
上記のページを見ると、スマートホームのトレイトであるCameraStreamがWebRTCに対応しているではないか。。。。
結論からいうと、うまく動きませんでした。
対応デバイスとして、smubuntu 20.04でnpmがaptで導入できない場合の対処方法
# はじめに
Ubuntu20.04にてReactの環境を再度構築しようとして、[Ubuntu20.04に最新のnode.jsとTypeScriptをインストールする方法](https://qiita.com/reoring/items/a91959eaccd74d058f1f)あたりを参考に`apt get`してみたが、以下のように`npm`導入でエラーになる事があってInstallできなかった。ちょこっと調べて解決したので、備忘録として残しておく。
“`bash:aptでnpmをInstall
sudo apt-get install npm
パッケージリストを読み込んでいます… 完了
依存関係ツリーを作成しています
状態情報を読み取っています… 完了
インストールすることができないパッケージがありました。おそらく、あり得
ない状況を要求したか、(不安定版ディストリビューションを使用しているの
であれば) 必要なパッケージがまだ作成されていなかったり Incoming から移
動されていないことが考えられます。
以下の情報がこの問題【npm】キャッシュが壊れてnpm installに失敗する
# はじめに
久しぶりにcreate-react-appを叩いたら、失敗しました。
調べたことを簡単にメモメモ。
※認識間違っている所があれば、ご指摘お願いします。# 現象
下記コマンド実行時にエラーが発生。
コマンド:
`npx create-react-app {プロジェクト名} –template typescript`エラー:
`ERR! cb() never called!`環境は以下の通り。
・OS :Docker上のUbuntu:20.04
・nvm :0.38.0
・node:14.17.4
・npm :6.14.14# 原因
[まとめてくださっている記事](https://qiita.com/holdout0521/items/ebf836fc11e864177628)によると、どうやらnpmのキャッシュの不具合らしい。(キャッシュが壊れている?)
この現象は`create-react-app`に限ったものではなく、`npm install`でも発生するそうです。#### npmのキャッシュとは?
[npmのDoc](https://docs.関連する記事
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた