- 1. 未経験からWebエンジニアになる為の4つの課題
- 2. 【C++】Flaskみたいにサーバーを立てられるclaskなるものを試してみた
- 3. node-webrtcのサンプルを動かしてみる
- 4. 0からNestJSを組もう(AWS Lambda)
- 5. JavaScriptを使った便利ツール
- 6. LINEオウム返しbotに、Node.jsでWebスクレイピングしたデータを追加する
- 7. Browserify を試す(node.jsのrequireメソッドをブラウザで使う)
- 8. Lambdaで値を返す方法まとめ
- 9. Express.js ファイルアップロード (express-form-data 編)
- 10. Express.js ファイルアップロード (multer 編)
- 11. Node.js で Excel ファイルをパースしてデータ抽出するときの備忘録
- 12. VSCodeの拡張機能を作ってみる その1 導入編
- 13. あなたの夏のgit commit、見てみませんか？
- 14. Javascriptにおける ”this” とは？
- 15. Node.jsでApatchTikaを使用して文字抽出を行う
- 16. Integrate AEM and IDS via Node.js
- 17. Guildシステムの設計
- 18. GrayBot-Voiceの環境を構築する方法
- 19. imageminでディレクトリ構成を維持する方法
- 20. Node.js: 一定時間毎に udp 送信を行う
未経験からWebエンジニアになる為の4つの課題
未経験から４つの課題を完成させるのは少し難しいですが、エンジニアになれば**「高給、テレワーク、残業なし」**の好条件で働けるのでおすすめです。
私は未経験からエンジニアになって、「こんな楽な仕事でこんな金もらえんのかい」と思いました。
##課題1：Todolist
https://qiita.com/hamaguri/items/476e75e6a29276ad1ba7**※こちらの記事はHTMLの基本知識があるのが前提です。
わからないところは無料サイトで調べながらアプリ作成して基本を学びましょう。**個人的おすすめ
[クリエイタークエスト](https://creatorquest.jp/lessons/html/html-intro/)
[ドットインストール](https://dotinstall.com/)##課題2 ：クイズアプリ
https://qiita.com/hamaguri/items/7e382077da95e824ad3ahttps://qiita.com/hamaguri/items/36d7c3b39850b2c961f6
::
【C++】Flaskみたいにサーバーを立てられるclaskなるものを試してみた
#きっかけ
これまではC++をやっていて最近はFlaskとNode.jsを触っていて
ちょうどこんな記事を見かけたので…https://mattn.kaoriya.net/software/lang/c/20200617121706.htm
C++でサーバーがpythonみたいに書けるだと？？
これはやってみなければ#サンプルを試してみる
まずは[GitHub](https://github.com/mattn/clask)からダウンロード“`shell
$ git clone https://github.com/mattn/clask.git
$ cd clask
$ ls
CMakeLists.txt LICENSE README.md clask cmake compile_flags.txt example main.cxx picotest test.cxx
“`CMakeを使うようなのでインストール&ビルド
“`shell
$ sudo apt install cmake
$ cmake .
“`picotest/pi
node-webrtcのサンプルを動かしてみる
# 環境
– Windows 10
– node-v16.8.0-x64.msi
– コマンドプロンプト
– Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)## 注意
– node.jsがLTS版の node-v14.17.5-x64.msi だと `npm install` Windowsのアクセス違反のエラーが出て動作しなかった
– LTS版の方が安定していると信じこんでいて、少しはまってしまった“`
npm ERR! code 3221225477
“`# 背景
– 様々な環境で動作するWebRTCのライブラリを探している
– ブラウザなしで、気楽に通信テストを行いたい
– 候補の１つとして、`node-webrtc` を触ってみる# node-webrtc とは
> Node.js Native Addon that provides bindings to WebRTC M87.
– 「Node.js のネイティブのアドオンで、WebRTC M87準拠」と捉えれ
0からNestJSを組もう(AWS Lambda)
NestJSが少し前にV8になったというのもあり、確認も含め１から構築してみました。
基本的に公式通り組んでます。# 環境
| PC | OS |
|-|-|
| mac | m1 Big Sur 11.4|| tool | version | |
| – |-|-|
| nodejs|v16.8.0| ※ここは14に合わせる方が良いかと。|
|aws-cli| 2.2.21|||aws|version|
|-|-|
|Lambda|node v14.x||deploy|
|-|
|Serverless Framework|# Nestプロジェクトの作成
## 事前準備
パッケージ管理はお好きなもので。
nodeは今の最新で。
プロジェクト内はyarn使います。
## node※後述してますが、LambdaのNodeのruntimeが最新v14だったので、それに合わせた方が無難です。
“`bash
asdf global nodejs 16.8.0node -v
> v16.8.0npm i -g npm
npm i -g yarn
npm i
JavaScriptを使った便利ツール
# はじめに
自身のオリジナルアプリの作成により、JavaScriptを取り入れることで、「高機能なWebページ」を実装できることができました。
今回は、JavaScriptの「ライブラリ」と呼ばれる便利ツールのようなものを紹介したいと思います。
あくまで紹介のみですので、詳細や環境構築の説明は行いません。
実際の開発現場でよく使用するライブラリが中心であるため、今後開発を進める上での自身の備忘録としてここに記します。私は初学者のため、間違いがございましたらお手数ですがご指摘いただけますと幸いです。
#jQuery （ジェークエリー）
https://jquery.com/
現在は下火傾向になるようですが、手軽に扱えることから今でも十分根強い人気があります。
## 特徴
### ① HTMLの取得 & 追加削除がしやすい
DOM操
LINEオウム返しbotに、Node.jsでWebスクレイピングしたデータを追加する
Node.jsの勉強をする中で、[LINE Messaging APIの公式チュートリアル](https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/)に触れる機会がありました。
このチュートリアルはBotへの投稿に対して特定の返事をするだけですが、せっかくなので以下の機能を追加してみました。+ テキストが投稿されたらオウム返しする。テキスト以外が投稿されたら「テキストを入力してください」と返す。
+ オウム返しするときに、ついでにWebスクレイピングしたデータも返す。#オウム返しBotの作成
[LINE Messaging APIの公式チュートリアル](https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/)の通りに進めたうえで、Webhookイベントオブジェクトのプロパティを確認し、テキストが送信されたときには`req.body.events[0].message.text`（送信されたテキストそのもの）を、それ以外が送信され
Browserify を試す(node.jsのrequireメソッドをブラウザで使う)
# 経緯
– node-webrtc のサンプルコード解析して、サーバーサイドのnode.jsのJavaScriptなのか、ブラウザ用のJavaScriptなのか、混乱した
– node-webrtcについては別途めとめる予定
– node-webrtcのサンプルでは、Browsersを用いて「node.js用のJavaScript」を「ブラウザ用のJavaScript」に変換していることがわかった
– node-webrtcコードを解析できるように、Browsers の最低限の知識を身に着けるためにまとめるhttps://github.com/node-webrtc/node-webrtc
# 環境
– Windows 10
– node v16.8.0
– npm 7.21.1## npm
– node-webrtcで使っているnode-fetchのバージョンに合わせている
– 詳細は下部にあるソースコードを参照ください“`
+– browserify-middleware@8.1.1
+– browserify@17.0.0
+– exp
Lambdaで値を返す方法まとめ
# 結論
handlerをasyncにして普通にreturnで99.9%くらいOK
## async + return
最も普通な方法です.
“`js
exports.handler = async (event) => {
const response = {
statusCode: 200,
body: JSON.stringify(‘Hello from Lambda!’),
};
return response;
};
“`### async + returnでsetTimeoutする
“`js
exports.handler = async (event) => {
const response = {
statusCode: 200,
body: JSON.stringify(‘Hello from Lambda!’),
};setTimeout(() => {
console.log(“1000ms後”);
Express.js ファイルアップロード (express-form-data 編)
#はじめに
Express.js でファイルアップロードする場合、multer と呼ばれるミドルウェアがしばしば使用されます。
しかし、ファイルアップロードに対応するミドルウェアは他にもいろいろあって [express-form-data](https://www.npmjs.com/package/express-form-data) もその１つです。
express-form-data は単なるファイルアップロードのためのミドルウェアではなく、JavaScript の FormData オブジェクトを Express.js で扱うためのミドルウェアです。Express.js では POST データはフォームから submit されたデータと JSON にのみ標準で対応しています。このため、Fetch API で FormData を POST してもリクエストボディが undefined になってしまい処理が続行できません。
そこで、[express-form-data](https://www.npmjs.com/package/express-form-data) をミド
Express.js ファイルアップロード (multer 編)
#はじめに
[multer](https://www.npmjs.com/package/multer) はファイルアップロードでよく使われる Express.js ミドルウェアです。サンプルや関連記事も多くて安定した人気です。multer ではファイルアップロードに関して次のことが可能です。
* 単一ファイルのアップロード
* 単一エレメントからの複数ファイルのアップロード
* 複数エレメントからの複数ファイルのアップロード[npmjs.com](https://www.npmjs.com/package/multer) のサンプルや説明は簡単な物しかなかったので、上の3つのケースについて簡単に試してみました。
その前に multer の基本ですが次のようにします。
– multer モジュールをロードする。
const multer = require(‘multer’);
– multer オブジェクトを初期化する。
const upload = multer({dest:updir}); // updir はアップロード先のフォルダ(フルパス
Node.js で Excel ファイルをパースしてデータ抽出するときの備忘録
覚えておきたいことだけ書く。
# リファレンス
https://www.npmjs.com/package/xlsx# セルの指定方法
‘A1’, ‘A2’ と指定するのが基本。
隣のセルとかを指定するには、セルをエンコードして操作する。> Cell and cell address manipulation:
> – format_cell generates the text value for a cell (using number formats).
> – encode_row / decode_row converts between 0-indexed rows and 1-indexed rows.
> – encode_col / decode_col converts between 0-indexed columns and column names.
> – encode_cell / decode_cell converts cell addresses.
> – encode_range / decode_range converts cel
VSCodeの拡張機能を作ってみる その1 導入編
# VSCodeの拡張機能を作ってみよう
## モチベーション
仕事をする上で欠かせないものとなりつつあるVSCode。
自分なりにカスタマイズして使ったりもしているけれども。
拡張機能を利用すればどんなことまで出来るのかという事を知っておくと、
より使いこなす事が出来るかなと思いチュートリアルを試してみる事に。
### 参考
https://code.visualstudio.com/api
# 前準備
## Node.jsのインストール
チュートリアルに入る前にnpmを叩けないといけないので、Node.jsをインストール1. Node.js公式からLTS版をダウンロード
https://nodejs.org/ja/
1. msi を実行してインストール
1. コマンドの実行確認“`
>node -v
v14.17.5>npm -v
6.14.14
“`## 作業フォルダの作成
今回はWindows環境で作業するので、以下のフォルダを作業フォルダとして準備“`
C:\code_extention
“`# Your First Extensio
あなたの夏のgit commit、見てみませんか？
楽しい時は短いもので、なんともう夏も終わってしまいます。
そこで私は思いました、**「私はこの夏、何をしたのだろう？」**と・・・
ということで、コミットを一覧にするマクロを作ってみました！##デモ画像
##使い方
以下のコマンドを、調べたいリポジトリの親ディレクトリ(workspaceなど)で実行してください[^1]“`bash:terminal
git clone https://github.com/WTomoharu/git-commit-viewer.git
cd git-commit-viewer
node index.js
“`そして、`localhost:3000`にアクセスすれば、
あなたのコミット履歴を見ることができます！##詳細
リポジトリは[https://github.com/WTomoh
Javascriptにおける ”this” とは？
# はじめに
Reactやコンポーネント思考を利用するには必須といっていいほどの__”this”__について何となくでいつも使ってましたが、今回しらべるふと意味を調べられずにはいられなくなったので備忘録として残したいと思います。
*内容に不備や言葉足らずなところがあるかと思いますがご了承ください。## thisとは？
__”this”__ってなんだ？
みんな大好きWeblio辞書で調べてみました。
> 主な意味：
>この、ここの、こちらの、こういう、(たった)今の、現在の、今…、当…、ある(一人の)
>__(空間的，時間的，心理的に話し手の近くにある対象を指す)__
>引用 : https://ejje.weblio.jp/content/thisほぉ～・・・だよね。って思いましたがカッコ内にある内容がJavascriptととしての”this”の意味合いと
マッチしており（注：個人的主観）おおおおおおっ！となりました！！### Javascriptとしての”this”
では早速本編に入っていきます。下のコードを見てください。
特に何の変哲もない一般的なオブジェクト宣言と
Node.jsでApatchTikaを使用して文字抽出を行う
# はじめに
様々な文書の文字抽出を行うことができる**[Apache Tika](https://tika.apache.org/)**(以降Tika)
ソースはJavaで書かれており、jarファイルから使用することができる。
今私の中でNode+TypeScriptが熱く、
Node.jsからこのTikaが使用できればいいなと思い、試行錯誤して何とか使用できるようになりました。
それまでの経緯を残したいと思います。# 環境
– Node v14.17.0
– Typescript 4.3.2
– java 1.8.0_131 (jdk)
– npm 6.14.9
– Windows 10 Pro
– Python 2.7.12
– Visual Studio 2017# Apatch Tikaのダウンロード
[ダウンロードサイト](https://tika.apache.org/download.html)から`Mirrors for tika-app-2.1.0.jar`をクリックしダウンロード# npmを使用してモジュールをインストール
NodeプログラムからJa
Integrate AEM and IDS via Node.js
[前回 Dynamic Deck を試用](https://qiita.com/o2346/items/4fbb20eac80c22623c66) しましたが、これだけでは不足に感じるようになってきました。単純に画像を抽出してはめ込んでいくだけならいいのですが、より複雑な要件に対応する POC を開発する必要が出てきた次第です。具体的にやりたいのは:
* Content Fragment(以下CF) 単位でアイテムを取得・配置していきたい
* CF に関連付けられた JCR 上の関連画像を、それぞれの CF の文脈内に配置したい
* 画像のパスは CF がプ
Guildシステムの設計
#初めに
この記事は何かプログラミングについて有用なことを書いてありません。というか誰かにとって有用なものではなくて、僕がGuildについて思考を、もしくは設計をまとめたいから書くだけのものです。
お気をつけくださいな。今回紹介するwebサイトはまだまだ開発段階なので、時々アクセス出来ないでしょうし、エラーコードがまんま出てくることもあると思います。
https://guild.click/message
#概要
Guildシステムは僕が暇つぶし感覚で開発しているwebサイトです。言語はnode.js、使用しているデータベースはMongoDB。
それぞれのバージョン(現在2021/8/28)
・node.js v15.11.0
・mongodb 4.4.6初めは依頼掲示板と銘打ってシステムを組もうと思っていたところ、しかしオンラインでの取引は何が不安かと考えると、相手の信用度と理解度が不安なんだと考えて、そこを補完したシステムを考えました。
それがGuildシステムです。Guildシステムの根幹を成す機能は以下の通り。
・Level機能
・Stamina
GrayBot-Voiceの環境を構築する方法
#はじめに
こんにちは。WhitePaper所属デベロッパのたぽと申します。
WhitePaperより先日発表された、GrayBot Projectのひとつ、Discord通話読み上げサービスの環境構築方法を詳しく解説します。
読み上げる方法は2つあります。自分にあった方法を使ってみてください。
①自分でプログラムを動かして、自分でオリジナルのボットを作る。
②用意されたボットをサーバーに導入する
#自分でプログラムを動かす方法
本項目は以下の条件を満たしている前提で執筆します。
1.Node.js(v14.15.0動作確認済み)がインストールされていて、動作させることができる環境がある
2.コマンドプロンプト・シェルをある程度使える
##ダウンロード
[GitHub](https://github.com/WhitePaper-Network/GreyBot-Voice)からプログラムをZipでダウンロードして、解凍して任意の場所に移動する
 ですが、吐き出した際にディレクトリ構成を無視してしまうという問題があります。例えば、
“`
img
├─pc
│ └─pc1.png
└─sp
└─sp1.png
“`というディレクトリ構成でimgフォルダを指定すると、出力は
“`
pc1.png
sp1.png
“`となってしまいます。
消えたpcフォルダとspフォルダ…issueにも上がっていますね。
https://github.com/imagemin/imagemin/issues/191issueを読む限り内部修正がもうすぐマージされそうな気配なので、
それまでのつなぎとしての処置を考えます。## 解決方法
ディレクトリを精査して、再帰的にimageminをかけていきます。
(上記issueの@brothatruさんのコードを元に一部調整しています。)“`javascript
const imagemin = require(‘
Node.js: 一定時間毎に udp 送信を行う
こちらにある udpclient.js を改造しました。
[Telegraf の入力データフォーマットを JSON にする](https://qiita.com/ekzemplaro/items/780090ca15cfdebc5f1d)“`js:udp_plural.js
#! /usr/bin/node
// —————————————————————
//
// udp_plural.js
//
// Aug/30/2021
// —————————————————————
‘use strict’// UDP 接続先
const host = “localhost”
const c_port = 8092
var dgram = require(“dgram”)
var client = dgram.createSocket(“udp4”)// ———————-
