Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

npm

静的サイトジェネレータの Hexo を使ってみる

Node.js 製の静的サイトジェネレータ、Hexo を使ってみた。Gatsby.js が覇権を握るまでは、Ruby に抵抗がなければ GitHub Pages でも使われている Jekyll か、フロントエンドエンジニアなら慣れ親しんだ Node.js だけで扱える Hexo か、という感じで人気だっ…

Node.js スクリプトをシングルバイナリにできる boxednode を試してみた

単一の Node.js スクリプトファイルを、Node.js 本体込みのシングルバイナリにビルドできる boxednode というツールを見つけたので試してみる。 github.com $ echo "console.log('Hello World');" > example.js $ npx boxednode -s example.js -t example $ …

Vercel CLI 使ってみる

以前の Zeit Now は Vercel に名前を変更して動いている。Vercel が提供する Vercel CLI を使ってみたのでメモ。 Download Vercel CLI – Vercel まずは Vercel CLI をインストールする。npm でグローバルインストール。 $ npm install -g vercel 続いて、コ…

Rehype-Prism を Fork して言語のエイリアスに対応させてみた

昨日の記事で、@mapbox/rehype-prism という Rehype プラグインを紹介した。Prism.js というシンタックスハイライトのライブラリを適用してくれえるモノなのだが、言語名のエイリアスを指定できなかったので、自分で Fork 版を作ってみた。それが @neos21/re…

Remark・Rehype を使って Markdown から HTML に変換する

Gatsby.js を使っていて、Markdown ファイルをブログ記事として投稿できる gatsby-transformer-remark というパッケージを使ってみた。 gatsby-transformer-remark | Gatsby プラグインを入れていくと、Frontmatter と呼ばれる YAML テンプレート部分を解釈…

Amazon アソシエイト・楽天アフィリエイトの商品を検索して独自の広告コードを生成する Web アプリ「Affi Code Generator」を作った

コレまで、 Amazon アソシエイト向けの Amazon Product Advertising API v5.0 楽天アフィリエイト向けの Rakuten Web Service API を調査してきた。これらを使って、 「はてなブログ」に組み込まれているような商品検索の仕組みと、 独自の広告 HTML コード…

Amazon Product Advertising API v5.0 を Node.js で動かしてみた

「カエレバ」的な Amazon アソシエイトの広告コードを自分で作ってみたいと思い調べてみたところ、Amazon Product Advertising API v5.0 という API で作れるらしいことが分かった。早速やってみる。 アクセスキー・シークレットキーを発行する Node.js SDK …

複数 SNS に一括投稿する Netlify Functions コード例を上げる

かつて使っていたモノを短くまとめて Gist に上げた。 Cross Post · GitHub そのまんまでは動かないので、適宜調整して欲しい。 ブックマークレットとして呼び出せばブラウジング中に一括投稿できるし、Slack や IFTTT と連携するようにしておけば色んなとこ…

XREA サーバで最新の Node.js を使う

以前紹介したとおり、ちょっと頑張れば SSH 接続ができる XREA。 neos21.hatenablog.com XREA サーバにはデフォルトで Node.js と npm が入っているのだが、少々バージョンが古い。 $ /usr/bin/node -v v6.17.1 $ /usr/bin/npm -v 3.10.10 そこで、最新の No…

セルフホスティングの IFTTT 代替。n8n.io を使ってみた

IFTTT が実質有料化してしまったので、代替ツールを探していた。前々から自分のサーバにホスティングする IFTTT っぽいツールに興味があったので、今日はその一つである n8n.io というモノを試してみる。 n8n.io - Free and Open Workflow Automation Tool …

Selenium Webdriver ではなく Puppeteer を使ってみる

最近とんと聞かなくなった Selenium Webdriver。最近は Puppeteer というヤツが流行っているらしい。なんか綴りが難しいな。w Puppeteer の概要 インストールと実装 実行時のオプション解説 ブラウザの実行パスを指定する ユーザプロファイルを指定する 操…

Node.js でプライベートファイルエクスプローラ CGI を作ってみた

かつて存在した CGI 配布サイト「すえぽんさいと」で、「Xplorer」「Web Editor」という2つの CGI が配布されていた。 Xplorer は、サーバ上の指定のディレクトリ配下のファイルツリーを表示し、Web Editor はさらにファイル編集も出来るシロモノだった。 す…

wsl-open:WSL で xdg-open する

デスクトップ環境を持つ Linux において、MacOS の open コマンドに相当することをやる際は、xdg-open というコマンドが使える。 一方、WSL を CUI でのみ使っている場合は、xdg-open では Windows 側の GUI アプリでファイルを開けない。 そこで使えるのが …

イマドキは Webpack じゃなくて Rollup だ!Terser とともに Rollup を使ってみる

Webpack なんかと同じビルド・バンドルツールの Rollup を使ってみる。 Rollup と Webpack の違い Transpiler と Minifier との区別 Rollup を試してみる Rollup の設定ファイルを作る Terser を組み込む : rollup-plugin-terser Rollup と Webpack の違い …

イマドキは Uglify JS じゃなくて Terser だ!Terser を使ってみる

JavaScript の圧縮・難読化で知られる uglify-js は ES2015 に対応しておらず、別ブランチで開発されていた ES2015 対応版の uglify-es は開発終了しているらしい。 そんな uglify-es を Fork して誕生したのが、terser というツールだ。 terser - npm $ npm…

GitHub Actions から FTP 転送する

自分のメインサイト Neo's World は GitHub で管理しているが、ファイルの FTP 転送は手動で行っていた。 github.com 一応 npm スクリプトを用意してコマンドラインから FTP 転送したりできるようにはしていたが、完全自動化したくなり、GitHub Actions でコ…

GitHub Actions の進行状況を CLI で確認できる hukum を使ってみる

またもや GitHub Actions の話。 GitHub Actions の動作を確認したくて、git push した直後に GitHub の画面を開いたりするが、もっとサクッと見たいところ。 そこで、GitHub Actions の進行状況を CLI で確認できる hukum を試してみた。 GitHub - abskmj/h…

npm publish を自動で行う GitHub Actions の作り方

npm publish を自動で行う GitHub Actions を作ったので、その作り方を紹介する。 npm のトークンを取得する GitHub の Secrets に npm トークンを登録する npm publish する GitHub Actions Workflow npm のトークンを取得する GitHub Actions から npm pub…

GitHub Package Registry に npm パッケージを Publish してみた

普段 npm パッケージを利用する際は、registry.npmjs.org という npm 公式のレジストリからダウンロードしている。 参考:npm-registry | npm Documentation npm レジストリは npm 公式以外にも存在し、GitHub にも GPR : GitHub Package Registry というレ…

「n」を使って Ubuntu 環境で Node.js をバージョン管理する

Node.js 本体のバージョン管理ツールとして、自分は Windows では Nodist MacOS では Nodebrew を使い続けている。 neos21.hatenablog.com Nodebrew は Linux にも対応しているので、WSL2 Ubuntu や CentOS で使っても良いだろう。 GitHub - hokaccha/nodebr…

package.json から拾った URL をブラウザで開く npm パッケージ「@neos21/opu」を作った

Node.js 開発をしていて、「この作業ディレクトリに対応する GitHub リポジトリをブラウザで開きたいなー」とか、「このプロジェクトの GitHub Pages を直接開きたいな」とか思うことがよくある。 GitHub リポジトリの情報は、大抵 package.json の homepage…

Node.js で Git 操作。simple-git を使ってみた

Node.js プログラムの中で Git 操作をする必要が出た。そのようなライブラリはいくつかあるようだが、simple-git というライブラリが手っ取り早そうだったので紹介する。 simple-git - npm GitHub - steveukx/git-js: A light weight interface for running …

Node.js アプリを無料でデプロイ出来る Glitch を試してみた

Node.js アプリをデプロイ出来るサービスといえば、Heroku だったり、Azure App Service なんかの PaaS が有名であろう。しかし、Azure は有料だし、Heroku の無料枠は起動時間に制限があったりして少々使いづらい。 GitHub Pages は静的ページのみでサーバ…

Node.js で排他制御。async-lock を使ってみた

Express サーバのとあるリクエストについて、同時にリクエストがあっても順に処理する必要が出た。すなわち、排他制御をかけ、同時に処理が行われないようにしたかったのだ。 それを実現してくれる async-lock というライブラリを見つけたので、使い方を紹介…

axios でエラーレスポンスを取得するにはどうしたらいいの?

非同期通信を簡単に実装できる npm パッケージ「axios」。 axios - npm 通常、レスポンスデータを取得する際は次のように実装する。 import axios from 'axios'; (async () => { const response = await axios.post('/api/login', { /* リクエストボディ */ …

TypeScript で ORM。TypeORM を使って PostgreSQL とやり取りしてみた

Node.js 上で使える O/R マッパーというと、以前 Sequelize というモノを紹介した。 neos21.hatenablog.com neos21.hatenablog.com コチラも MySQL や PostgreSQL など、色々な DB と接続できるマッパーだった。 今回見つけた TypeORM という O/R マッパーは…

TypeScript で Express サーバを実装するためのボイラープレートを作った

サーバサイド JS であれば、個人的には TypeScript がなくても書けるのだが、複数人で開発するとなると、型チェックを導入できた方が安全な実装になる。 ということで今回は、Express サーバを TypeScript で実装するためのボイラープレートプロジェクトを作…

Netlify Functions を使って複数の SNS にマルチポストする Function を作った

AWS Lambda とほぼ同等の機能を無料で利用できる、Netlify Functions。 今回はコレを使って、ブックマークレット形式で呼び出せる Function と、Slack の Slash Command として呼び出せる Function を2つ作ってみた。 どちらも、「オレオレマイクロブログ」…

無料で使える AWS Lambda:Netlify Functions を使ってみた

任意の関数をリクエスト単位で実行できる FaaS。最も有名なのは AWS Lambda だと思うが、コレとほぼ同じ機能を無料で利用できる Netlify Functions というモノを使ってみた。 Netlify に登録する Netlify Functions を使ってみる Git リポジトリを連携して N…

Create React App + TypeScript + SCSS 環境を構築してみる

2016年に create-react-app 単体で試したことがあった。 neos21.hatenablog.com あれから3年半が経過。React がもてはやされていた中で「Angular はちょっと重たいよねー」「とはいえ React も難解になってきたよねー」とか言っていると Vue.js の手軽さで S…