Corredor

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

JavaScript

今見ているページの 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 リポジトリ 利用技術 文字…

2色のコントラスト比を導く Compare Colour Contrast Ratio を作ってみた

見やすい色の組み合わせかどうか。 WCAG2.0 (Web Content Accessibility Guidelines) という、ウェブアクセシビリティに関するガイドラインがある。 参考:Web Content Accessibility Guidelines - Wikipedia この中で、文字色と背景色とのコントラスト比を…

Promise と async・await でリトライ処理を実装する

通信処理なんかが Promise で実装されている時に、自前でリトライ処理をやらないといけなくなった。 巷にはどんなやり方があるのか、Promise のまま扱う場合と、async・await で扱う場合とを調べてみた。 実行環境は、特にトランスパイルなど行わず、素の No…

JavaScript で文字列のバイト数を求める (POST・PUT リクエストやレスポンスの文字列が途中で切れる問題)

Node.js の組み込みモジュールである http モジュールを使用して、POST メソッドや PUT メソッドでデータを送信する処理があったのだけど、どうも送信データの末尾20バイトぐらいが欠損してしまっていた。 一連のデータ送信処理は海外のサイトからいただいて…

今更だけど ESLint を始めてみたら簡単に始められた

コレまで、誰かが作った js-beautify の設定ファイルを引き継いで開発したり、Angular CLI で生成される TSLint 設定ファイルを手直ししたりしたくらいだったので、今回は ESLint をゼロから始めてみることにした。 ESLint - Pluggable JavaScript linter TS…

Twitter Developer Platform に登録して Twitter API を使ってみた

Node.js スクリプトを書いて、Twitter API を叩いて、自分のツイートを収集・分析してみようと思った。 Twitter API は、Twitter Developer Platform という開発者用のプログラムに登録しないと使えないようで、この登録には審査が必要だ。少々手間だが、時…

Windows・Chrome で游ゴシックフォントを少しだけ太く見せる JavaScript と CSS

以前、「ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解」という記事を書いた。 neos21.hatenablog.com おかげさまで、はてブで77ブクマ (本稿執筆時点) いただき、皆様もこの件について苦労なさっていることが伺い知れた。 今回はこの続…

コマンドラインで動作する簡易パスワードマネージャ「Neo's Password Manager」を作った

Node.js でコマンドラインツールを作る勉強として、簡易的なパスワードマネージャを作ってみた。その名も「Neo's Password Manager」。パッケージ名は @neos21/npm。Neo's Password Manager の頭文字を取って NPM と称しているが、コマンド名は np とした。 …

JavaScript の sort() 関数をお勉強 : 複数のプロパティを見てソートする方法

JavaScript の Array.prototype.sort() を使って、連想配列の複数のプロパティを見てソートする方法を勉強した。 対象データ sort() 関数の比較ロジックは自作できる まずは製品名だけでソートする 複数の項目を見てソートするには? 以上 対象データ 対象と…

Node.js で selenium-webdriver と chromedriver を使って Chrome ブラウザを自動操作してみる

Angular に組み込まれている、Protractor という E2E テストツールを通じて、Selenium Webdriver を少し触ってきていた。今回はテストツールとしてではなく、ウェブスクレイピングを行うための手段として、Selenium Webdriver と、Chrome を操作するための C…

Columnify を使って Node.js スクリプトのコンソール出力をテーブルっぽく整形する

Node.js スクリプトでコンソール出力を整形する際、最も手軽なのは console.table() だろう。 $ node -e "console.table([ { id: 1, name: 'testA' }, { id: 2, name: 'testB' } ]);" ┌─────────┬────┬─────────┐ │ (index) │ id │ name │ ├─────────┼────┼─…

Node.js スクリプトをコマンドのように使えるようにする方法

2019年、あけましておめでとうございます。今年も宜しくお願い致します。 今日は、Node.js で書いたちょっとしたスクリプトを、コマンドとして使えるようにする手順をまとめる。大きく2種類のやり方があるのでそれぞれ紹介する。 試した環境は macOS Mojave…

サイトに CSS・JS が効いていない時にミラーの CSS・JS ファイルを読み込んでフォールバックさせるスクリプトを作った

このブログ Corredor で、iPhone から閲覧している場合に時々発生していたのだが、ブログの CSS・JS ファイルが読み込めずにレイアウトが崩れていることがあった。 このブログの CSS と JS ファイルは、GitHub Pages でホスティングしているモノを「はてなブ…

iOS Safari でダブルタップによるズームを防ぐには touch-action: manipulation が一番簡単

iOS Safari で見せる Web サイトをネイティブアプリ風に見せるための演出の一つとして、「適当なところでダブルタップした時にズームしない」ことを実現したい。 Twitter や Instagram を iOS Safari で見るとそのような動きが実現されているので、何かやり…

JavaScript 関数を AJAX で仕入れて実行する。関数の API 化というアイデア

最近、サーバレスアーキテクチャの一環で、FaaS (Function as a Service) とかいって、特定の関数を必要な時にだけ WebAPI 経由で実行する、というのが流行っているらしい。AWS Lambda ってのが有名。 ひとかたまりの処理を関数としてまとめ、それをクラウド…

ウェブサイトの GitHub リポジトリから最新のコミット ID を取得し、カラーコードに利用してウェブサイトに表示する

なんのこっちゃ?というタイトルになってしまったが、Hail2u の ながしまきょう さんがブログで話していたアイデア。 コミットのSHA-1ハッシュ……先頭6文字はそのまま色として扱えることに思い至った。 例えばこのウェブサイトのリポジトリーでは、v8.9.4が#a…

スマホを傾けても中身は水平なままのページを作ってみたい

完全にネタとして。 以前も紹介したが、DeviceOrientationEvent を利用すると、モバイル端末の傾きを JavaScript で検知できる。コレを利用して 3D のオブジェクトが動くインタラクティブな仕掛けを作ったりできるが、その流れで思いついたネタ。 端末の傾き…

ラジオボタンやチェックボックスをランダムにチェックするブックマークレットを作った

答える気が失せるほどのラジオボタンやチェックボックスがひしめくアンケートサイト。イチイチ文章を読んでチェックを入れるのもダルいので (爆)、ランダムにチェックを入れるブックマークレットを作った。 動作サンプルは以下。「Exec」ボタンを押すと、そ…

WebAPI サーバと通信テストをするための Node.js スクリプトを作ってみる

Express で WebAPI サーバを作って、実際にデータをやり取りできるかテストするために、Node.js スクリプトを作ってみた。 今回の Node.js スクリプトで使用するのは、Node.js 組み込みの http モジュールのみ。依存パッケージがないのでシンプルかと。 ベー…

JavaScript : Promise の挙動をおさらいする

普段は決まった書式で非同期処理を書いているのだが、Promise の仕様を押さえるため、思い付きで変な書式を試してみたりした。 今回紹介するサンプルコードは、全て promise-test.js というファイル名で保存し、Node.js で実行した結果を確認している。 同期…

iOS Safari で、タップ時に :hover や :active を有効にする方法 詳細調査

前回の記事で、「スマホで :hover 時のアニメーションを有効にする」方法について触れた。 neos21.hatenablog.com タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、<body ontouchstart=""> と書けば実現できるようだ。 参考:タッチデバイスでCSSの:ac</body>…

雑な文字列置換の REPL ツールを Angular で作った

今回も Angular Utilities に追加したツールの話。今回は、String#replace() を動的に試せる画面を作った。いわゆる REPL (Read-Eval-Print Loop) なツールである。 Angular Utilities - RegExp テキストエリアに変換させたい文章を入れて、検索文字列に正規…

js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。 Angular Utilities - JavaScript Beautifier … JSON 整形にも対応 …

JavaScript で配列の中から最大値・最小値を求める : 異常値を省きつつ…

JavaScript で配列の中から最大値・最小値を求めるには、Math.max.apply() もしくは Math.min.apply() という構文が使える。 Math.max.apply(null, [0, 3, 10]); Math.min.apply(null, [0, 3, 10]); しかしこれは、言語仕様上、null・undefined・NaN が混じ…

import・export を利用している TypeScript コードを HTML 上で動作させる方法

前回の続き。TypeScript コード内で import や export を用いていると、デフォルトの設定ではブラウザ上でそのコードが利用できないことを話した。 neos21.hatenablog.com 今回はこの対応方法を紹介する。 なお、今回の目的は「TypeScript の素振り環境とし…

JavaScript のモジュール管理の仕組みをおさらいする:TypeScript をトランスパイルして HTML 上で利用するための前段

tsc を利用して TypeScript をトランスパイルする素振り環境を作ってみた。最初はコンソール上でコンパイルした JS ファイルを $ node example.js のように動かして満足していたのだが、コンパイルした JS ファイルを HTML で読み込んで動かそうとしたら、im…

JavaScript の配列の追加・削除操作まとめチートシート

個人的チートシート。splice() の使い方の整理に近い。 追加・削除操作のチートシート 追加・削除操作に関するメソッド 参考 追加・削除操作のチートシート まずは結論だけ。 やりたいこと コード 先頭に追加 array.unshift('First')array.splice(0, 0, 'Fir…

Node.js や TypeScript で使える O/R マッパーライブラリを探してみたが、イマイチなので自前でやってみたり

最近、 Node-SQLite などを用いて Node.js スクリプトから DB を操作してみたり、 TypeScript で JSON データを受け取って DTO 的なクラスに突っ込んでみたり、 といったことをやっている。 Java でいう POJO なクラスを用意しておいて、MyBatis (古くは iBa…

JavaScript の関数を短縮しようとしたら Illegal invocation が出た

ブックマークレットを作るため、以下のように関数を別変数にしたら短縮して書けるんじゃないかな?と思って書いてみたところ、Illegal invocation なるエラーが出た。 const getId = document.getElementById; // → Uncaught TypeError: Illegal invocation …