Corredor

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

JavaScript

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 …

Wikipedia の短縮 URL を取得するブックマークレットを作ってみた

Wikipedia には短縮 URL というか、ページ ID を指定して参照できる URL が用意されていることを知った。 参考:WikipediaのURLを短縮する方法 - おねむゲーマーの備忘録 たとえば「World Wide Web」のページの URL は以下のようになっている。 https://ja.w…

HTML ファイルだけで Markdown を Wiki 風に表示できる「MDWiki」を試してみた

HTML ファイル1つだけで Markdown ファイルをパースして表示してくれる、MDWiki というツールを試してみた。 Markdown ファイルをパースして HTML 表示してくれるツールというと GitBook などがあるが、HTML ファイル1つだけという最強の手軽さが売り。早速…

JavaScript の配列やオブジェクトは参照渡しになる…バグを生む落とし穴

JavaScript において、配列やオブジェクトは参照渡しになる。コレが思わぬバグを生むことに繋がるので、紹介しておく。 今回、「参照渡し」「値渡し」「参照の値渡し」などの議論は避けるが、オブジェクトを代入する際、以下のような挙動をすることは覚えて…

キーコードを調べるツール作った

キーボードの押下したキーを調べる JavaScript ツールを作った。その名も KeyCode Checker。 See the Pen KeyCode Checker by Neos21 (@Neos21) on CodePen. 画面上でキーを押下すると、そのキーの情報を表示する。 普通に event.key などの値を取得・表示し…

JavaScript でループをゆっくり回す

JavaScript 第6版作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 一気に処理させたくない Ajax 通信だとか、デバッグのために処理中の様…

アンケートサイトの色々な回答に一気に答えるブックマークレットを作った

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ 収益・集客が1.5倍UPするプロの技79 [ 亀山ルカ ]ジャンル: 本・雑誌・コミック > ビジネス・経済・就職 > アフィリエイトショップ: 楽天ブックス価格: 1,706円 これまで…

アンケートサイトで使える!性別のラジオボタンを自動選択するブックマークレット

入門者のJavaScript 作りながら学ぶWebプログラミング (ブルーバックス) [ 立山秀利 ]ジャンル: 本・雑誌・コミック > 文庫・新書 > 新書 > その他ショップ: 楽天ブックス価格: 1,058円 アンケートサイトで使えそうなブックマークレット、第4弾。 neos21.h…

アンケートサイトで使える!テキストボックスに年齢を自動入力するブックマークレット

Excel VBAでIEを思いのままに操作できるプログラミング術 Excel 2013/2010/2007/2003対応作者: 近田伸矢,植木悠二,上田寛出版社/メーカー: インプレス発売日: 2013/04/19メディア: 単行本(ソフトカバー)この商品を含むブログ (7件) を見る アンケートサイ…

アンケートサイトで使える!都道府県セレクトボックスを自動選択するブックマークレット

基礎から徹底的に学ぶJavaScript作者: 鶴田正信発売日: 2016/08/12メディア: Kindle版この商品を含むブログを見る アンケートサイトで使えそうなブックマークレット、第2弾。 neos21.hatenablog.com よくある「あなたがお住いの都道府県を選択してください」…