Corredor

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

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

JavaScript

ウェブフォントを遅延読み込みする簡単な実装

ページの初回読み込み時から @font-face でウェブフォントを読み込もうとしていると、どうもレンダリングが遅くなる。font-display: swap もなんだか効いてない気がする。そこで、いさぎよく window.onload 以降にウェブフォントを遅延読み込みすることにし…

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

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

楽天ウェブサービス API を利用して楽天アフィリエイトの広告リンクコードを生成する

楽天アフィリエイトで生成できる広告 HTML コードが汚いので、何かイイカンジにできんかなーと思い、楽天ウェブサービスの API を試してみることにした。 楽天ウェブサービスに登録する お試しで API を叩いてみる JavaScript で API をコールしてみる 楽天…

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

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

Freenom ドメイン・Let's Encrypt 証明書の有効期限を確認・通知する仕組みを作った

最近、いくつかのサイトで Freenom で独自ドメインを取ったり、Let's Encrypt で証明書を取って HTTPS 化したりしている。 GCE https://neos21-gce.ga/ CentOS + Apache → Let's Encrypt を手動設定 OCI 1 https://neos21-oci.cf/ Oracle Linux + nginx → Le…

DOM イベントを破壊せずにテキストを置換する方法

Angular・Vue・React などの SPA サイトなんかで、 const elem = document.querySelector('.example'); elem.innerHTML = elem.innerHTML.replace((/HOGE/u), 'FUGA'); このように innerHTML を置換するようなブックマークレットを動かしたりすると、対象の…

MutationObserver で DOM 変更を監視する

Google 翻訳の Chrome 拡張機能がどうやって動いているのかなーとソースを追っていたら、MutationObserver なる API を発見した。 MutationObserver - Web API | MDN どうもコレで DOM の変更を監視できるようだ。 早速試してみた。以下の CodePen にアクセ…

curl で色んなリクエストをする方法・AWS Lambda や Netlify Functions での受け取り方まとめ

curl でこんなリクエストを投げたい、という時の簡単なまとめ。かつ、そのリクエストを AWS Lambda や Netlify Functions で受け取る時のやり方をまとめる。 URI エンコードした文字列をクエリ文字列として渡したい POST ボディを URI エンコードする JSON …

axios を使わず Node.js 標準モジュールの http・https だけでリクエストを投げる

request・request-promise・axios・node-fetch などに頼らず、Node.js スクリプトから外部 API をコールするリクエストを投げてみたくなった。 Node.js においては、http モジュールおよび https モジュールを利用すればリクエストを投げられる。 const http…

クエリ文字列を連想配列に変換する簡単なやり方 (URLSearchParams)

location.search で取得した ?hoge=fuga&foo=bar みたいなクエリ文字列をパースする時に、コレまでは npm の query-string パッケージを使ったりしていた。 参考:query-string - npm もしくは、次のように自分でパースしてみたこともあった。 // slice(1) …

Fire 7 タブレットを Echo Show っぽくするためにフルスクリーン表示する時計アプリを作った

2019年モデルの Fire 7 は、Alexa が使えるが、Echo Show モードが使えない。開発者オプションにて電源接続時にスリープにしない設定は出来るので、フルスクリーンで常時表示させられる何らかの画面が作れたら面白いかな?と思った。 Android OS および Fire…

正規表現の最短マッチを覚える

今さらながら正規表現の「最短マッチ」を紹介。 「HTML 文字列を対象に href 属性の値だけを正規表現で取得したいなー」 と思った時に、以下のように書いた。 const text = '<a href="index.html">Index</a>'; const match = text.match((/href="(.*)"/u))[1]; console.log(match); //…

Node.js スクリプトを CGI として動かしてみる

CGI という仕組みは、Perl・Ruby・PHP などの言語に限らず、標準入力と標準出力を扱える言語なら何でもいいらしい。ということは、Node.js をランタイムにした CGI も可能だと思われる。 と、ふと思い立って実際にやってみた。 前例がある:CGI-Node 前提条…

イマドキは 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…

Node.js で ES Modules 記法を動かしてみる

ブラウザ上で JS を import するための仕組みとして、ES Modules という仕組みができた。コレを Node.js 上でも動かせるということで、やってみた。 前提条件 ES Modules を有効にするための条件がある 必須:import 文にファイル拡張子を必ず書く 必須:実…

Webpack 入門 その3:Babel による ECMAScript のトランスパイル・TypeScript のトランスパイル

Webpack を勉強しながら Browserslist の効果を確認するシリーズ企画第3弾。 今回は初めに ECMAScript を Babel でトランスパイルしつつ、Browserslist の効果を確認。さらにその後、TypeScript もトランスパイルできるようにしてみる。 使用するツールと適…

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

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

ローカルから Heroku Postgres に接続する際は SSL 通信にする

拙作の Neo's Hatebu は Node.js 製。Heroku 上にデプロイしており、pg パッケージと sequelize を使って Heroku Postgres と接続している。 github.com このアプリをローカルで開発する際、ローカルサーバから Heroku Postgres の DB に接続したかったのだ…

Neo's Hatebu に利き手モード、アクセスキー、件数表示機能を付けた

自分だけが使っている、オレオレはてなブックマーク閲覧アプリの Neo's Hatebu。 neos21.hatenablog.com 久々に機能追加をしたので、紹介していなかった過去分と合わせて紹介する。コード全量は以下で確認できる。 github.com 利き手モード切り替え アクセス…

Instagram 保存ツール @neos21/igsv をより使いやすくするブックマークレット2つ

Instagram の画像・動画をダウンロードする、拙作の CLI ツール @neos21/igsv。 www.npmjs.com github.com npm 製なので、次のようにグローバルインストールすると、igsv コマンドが使えるようになる。 $ npm install -g @neos21/igsv コマンドの引数に Inst…

GitHub アカウントの全リポジトリ情報を一覧表示する Vue アプリ「List Repos」を作った

最近 Vue.js をちまちまイジってたので、簡単なアプリを作ってみた。その名も「List Repos」。 GitHub アカウント名を指定すると、そのユーザのリポジトリが一覧表になって表示されるモノで、簡単なテーブルソートもできるようになっている。 デモサイトは以…

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

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

WebRTC でビデオチャットアプリを作ってみた

リモート会議をやる機会が増えて、Google Meet、Microsoft Teams、Zoom などを利用している。ビデオチャットとか面白いなー、WebRTC とかいうヤツがあったと思うけど触ったことないなー、と思ったので、作ってみることにした。 成果物とデモサイト 参考にし…

Bootstrap 5 Alpha を Parcel で使ってみた

Bootstrap 5 Alpha が出たらしいので、Parcel でサクッと素振り環境を作ってみる。 Bootstrap 5 alpha! | Bootstrap Blog Bootstrap · The most popular HTML, CSS, and JS library in the world. Bootstrap5 - 世界で最も人気のあるフロントエンドフレーム…

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

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

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

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

Chrome ブラウザで Web Bluetooth API を試してみる

Web Bluetooth API というモノがある。Bluetooth が内蔵されたノート PC なんかで、Chrome ブラウザを使って Bluetooth デバイスとの接続ができるらしい。コレを使えば「Cordova-Plugin-BluetoothLE」のような Cordova プラグインを使ってアプリ化せずとも、…

OpenCV.js : JavaScript で実装・ブラウザオンリーで OpenCV を使う

Python や Java で利用することが多い OpenCV。ビルドやインストールが面倒臭いのがタマにキズなのだが、今回 OpenCV.js という JavaScript 版を見つけたので紹介。 公式のガイド ライブラリファイル 実装サンプル・デモ 読み込み方・初期処理 ウェブカメラ…

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

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