Corredor

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

JavaScript

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 で実装するためのボイラープレートプロジェクトを作…

家族が生まれてから何日経過したかを計算する Web アプリを作った

自分は 30k という Chrome 拡張機能を入れている。コレは自分の生年月日を入れておくと、新規タブに「生まれてからの経過日数」を表示してくれるというモノだ。 参考:30k - Chrome ウェブストア 人生80年とよく云われるが、コレを日数に直すと、人間の一生…

GAS が V8 エンジンに対応したので let が使えるようになった

Google Apps Scripts が V8 エンジンに対応した、というニュースは2020年2月末頃に流れていたと思う。 参考:祝!Google Apps Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった 自分はレガシーな JavaScript も気にせず書け…

ブラウザオンリーで動く「ねむいガチャ.js」を作った

ちょっと前に、Python ベースに MeCab で形態素解析を行い、「ねむい」という単語を「ねむくない」に変換したり、しなかったりする「ねむいガチャ」というプログラムを作って紹介した。 github.com MeCab を用意しないといけないので環境構築が手間だし、ウ…

tiny-segmenter・kuromoji.js : JavaScript 製の形態素解析ツールを2つ使ってみた

形態素解析ツールというと MeCab が有名だが、コレはライブラリをマシンにインストールし、Python・Ruby・Java・Perl・Node.js 言語などにバインディングするライブラリを導入することで使える。機能的には十分便利だが、導入手順や言語の制約があり、ライブ…

使っていない iPhone を使って、トイレの電気が付けっぱなしの時に Slack 通知する光監視センサーを作ってみた

僕はよくトイレの電気を消し忘れる。そしてその度に妻が激昂する。 コレは仕組みでどげんかせんといかん、と思い、トイレの電気が付けっぱなしになっている時に知らせる仕組みを考えてみた。 仕組みと必要なモノを考える 実装方法を考える というワケで実装 …

Super キーで「全てのアプリケーション」の表示・非表示のみをトグルして Activities Overview 画面を封じる GNOME Shell 拡張機能を書いた

Ubuntu 18.04 にて。既存の GNOME Shell 拡張機能を書き換えることで、自分が求める動作を実現させた。 何が問題だったか 既存の GNOME Shell 拡張機能を書き換える extension.js を次のように直す Diff で表現 どうやって反映する? 何をどう実装しているの…

いまさらインクリメント・デクリメント時の前置と後置のおさらい

JavaScript で書いたが、Java や C でも同じはず。 インクリメントやデクリメントを行う時、++i と書く前置インクリメント (Pre Increment) と、i++ と書く後置インクリメント (Post Increment) がある。 一度理解してしまえば簡単で、前置は「インクリメン…

GitHub リポジトリのページと GitHub Pages を行き来するブックマークレット

https://neos21.github.io/about のような URL の GitHub Pages を閲覧中、このページに対応する GitHub リポジトリのページに飛びたいな、と思うことがある。URL としては https://github.com/neos21/about のように変換すれば良いので、頑張れば相互変換で…

iOS のホーム画面にメモ付きのアイコンを置ける「iOS Memo Icon Generator」を作った

「ショートカットメモ帳」というアプリがあり、このアプリの仕組みを見て似たようなモノを作った。 参考:‎「ショートカットメモ帳」をApp Storeで このアプリは、iOS の「ホーム画面に追加」機能と、DataURL の仕組みを利用して、「オリジナルのメモが書か…

動的に高さが変わる Sticky なサイドメニューの実装サンプル

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)作者:Mana出版社/メーカー: SBクリエイティブ発売日: 2019/03/16メディア: 単行本 Material for MkDocs というライブラリの GitHub Pages を…

JavaScript コードをブックマークレットコードに変換する「Bookmarkletify」を作った

ブックマークレットを作る時、エディタで JavaScript コードを書き、それを難読化して縮めつつ、先頭に javascript: とプロトコルを記載したり即時関数で囲んだりする。コレを自動化するツールを作った。その名も @neos21/bookmarkletify。 既に類似パッケー…

Instagram で自分がフォローしているユーザ一覧を取得したい

Instagram で自分がフォローしているユーザ一覧を取得したく、色々調べてみた。 Instagram はスクレイピングが難しく、ページ内の CSS クラス名もデタラメで分かりづらい。Selenium 的なツールでログインからフォロー一覧表示まで遷移するのは面倒臭くて諦め…

JavaScript のネストした連想配列に安全にアクセスするヘルパー関数を考える

JavaScript の仕様上よくやりがちな、TypeError: Cannot read property 'HOGE' of undefined` エラーに関して。 問題は何か ネストの深いプロパティにも安全にアクセスしたい 値が取れなかった時にどう動くべき? 対象のプロパティが存在しなければ undefine…

例外が発生しても異常終了しない log4js のロガーを作る

Node.js でロギングする際は log4js をよく使っているのだが、以前、ロギング処理自体に問題があってエラーを起こしてしまった。 そのコードは以下のようなコードだった。 let result = null; try { // API をコールしてデータを取得するテイ result = await…

リポジトリごとの GitHub Pages でルート相対パスを使うには

GitHub Pages でルート相対パスを使う時の荒業。 ルート相対パスとは? GitHub Pages におけるルート相対パス User Site の場合 Project Site の場合 base 要素でも直せない JavaScript でなんとかしてやろう… 以上 ルート相対パスとは? HTML から画像やス…

Google Apps Script を使って Slack から Twitter 投稿を行うスラッシュコマンドを作る

Slack のスラッシュコマンドを作ってみる第2弾。今回は、Slack から Twitter 投稿が行えるスラッシュコマンドを作ってみよう。 前提条件 GAS プロジェクトにライブラリを追加する GAS のスクリプトを実装する GAS プロジェクトを公開する Twitter API のコー…

Windows 向けの共有サーバのファイルパスを MacOS 向けに置換する

Windows 環境で共有サーバのファイルパスを取得すると、 \\127.0.0.1\Some\Path\To\File.txt file:///127.0.0.1/Some/Path/To/File.txt こんな感じのパスが取得できることが多い。 2つ目の file:/// プロトコルはまだ扱いやすいが、1つ目のバックスラッシュ…

辞書に照らし合わせて指定文字列を変換する JavaScript

フォーム上の入力値 (ラジオボタンの選択項目など) を REST API に送る際、画面と API の名称や値に関する仕様の差異を吸収するため、「hoge と入力されたら fuga、foo と入力されたら bar といった文字列を送信する」といった実装を組み込む必要が出てしま…

サブウィンドウの二重起動を防ぐ JavaScript

懐かしいコードが出てきたので紹介。 確か IE で window.open() しようとした時に、既に開いているウィンドウを無視して同じページを別ウィンドウで開いてしまうのが気になって、それをなんとかするために作ったモノ。だから変数宣言が var だったりする。 /…

Chrome 拡張機能のベースを作ってみる

自分がよく見るページにちょっとした加工をしてみたくて、Tampermonkey とかでユーザスクリプトを書いても良かったんだけど、試しに Chrome 拡張機能を自作してみたので、その時の実装を基に、ベースとなるファイルを載せておく。 自作の拡張機能を使うため…

開いているページのタイトルと URL をクリップボードにコピーするブックマークレット

Twitter 投稿やメール送信用に、開いているページのタイトルと URL をコピーしたいことがあったので作った。 いきなりだがブックマークレットは以下のとおり。 javascript:((d,e)=>{e=d.createElement('textarea');e.textContent=d.title+' '+d.URL;d.body.a…

Express サーバを80番ポートで動かすには

Express サーバを80番ポートで動かそうとした。 const express = require('express'); const app = express(); router.get('/', (req, res) => { res.send('Hello World'); }); app.listen(80, () => { console.log('Server Started'); }); 実行してみたら、…

ESLint で async 関数を使用した class が誤判定される件の対処法

ESLint を使い始めて困ったちょっとしたこと。 以下のように、class 構文の中で async を使った関数を定義した。 class MyClass { async doSomething() { const result = await anotherMethod(); return result; } } このような JS ファイルを ESLint にかけ…

Oracle Object Storage API を操作する Node.js スクリプトを日本語圏向けに微修正

唐突に Oracle Object Storage の話をする。 オブジェクトストレージとは Oracle Object Storage API サンプルコードのバグ サンプルコードを Promise 化して使いやすくしてみた 以上 オブジェクトストレージとは Object Storage とは、ファイルを「オブジェ…

今見ているページの Archive.org や Google Cache を一発で開くブックマークレット

Cached View というウェブサイトを見付けて触発された。 Google Cached Pages of Any Website - CachedView URL を入力してボタンを押すと、「Archive.org」か「Google Web Cache」のいずれかでキャッシュされたページが見られる、というモノ。 コレが大変便…

文字化けを復元する Web アプリ「Garbler」を作った

文字化け研究の一環として、「もじばけらった」インスパイアの Web アプリを作ってみた。その名も Garbler。 Garbler … デモページ GitHub - Neos21/garbler: Garbler : 文字化けを復元したり、文字化けさせたりします。 … GitHub リポジトリ 利用技術 文字…