Corredor

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

JavaScript

辞書に照らし合わせて指定文字列を変換する 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 リポジトリ 利用技術 文字…

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 テキストエリアに変換させたい文章を入れて、検索文字列に正規…