Corredor

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

JavaScript

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

完全にネタとして。 以前も紹介したが、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 時のアニメーションを有効にする」方法について触れた。 タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、<body ontouchstart=""> と書けば実現できるようだ。 参考:タッチデバイスでCSSの:activeや:hoverを機能させ</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弾。「あなた…

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

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

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

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

アンケートサイトで使える!ドラッグ・アンド・ドロップで選択した範囲を一括でクリックするブックマークレット

成功するポイントサービス 1万人の生活者から見る今あなたの会社がすべきこと [ 岡田祐子 ]ジャンル: 本・雑誌・コミック > ビジネス・経済・就職 > その他ショップ: 楽天ブックス価格: 1,512円 ドラッグ・アンド・ドロップで選択した範囲を一括でクリックす…

Node.js の機能だけでシンプルな HTTP サーバを作ってみる

Nodeクックブック作者: David Mark Clements,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/02/23メディア: 大型本購入: 2人 クリック: 4回この商品を含むブログ (5件) を見る Node.js でサーバを立てるというと、Express というパッケージを…

カラーコードと RGB 表記を相互変換する ccc : Colour Code Converter を作った

NPMな彼女デス?ニッポン萌えな彼女デス?アーティスト: クロエ・ルメール(CV:丹下桜)出版社/メーカー: ポニーキャニオン発売日: 2017/07/19メディア: MP3 ダウンロードこの商品を含むブログを見る Webデザイン 色の辞典 魅せるWebサイト 売れる配色作者: 高坂…

メインサイト Neo's World のデザインを変更した

メインサイトといいつつ、開設開始からの日数が一番長いだけという Neo's World だが、2018年2月4日にデザインを変更した。今回はその詳細を書き留めておく。 伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール作者: 高橋佑磨,片山な…

onerror イベントで img・script 要素の読み込みエラーをうまく検知できなかったら

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん作者: たにぐちまこと出版社/メーカー: マイナビ出版発売日: 2017/03/27メディア: 単行本(ソフトカバー)この商品を含むブログを見る img 要素や script 要素に対し、onerror 属性を設定した…

JavaScript で月間カレンダーを作った (Bootstrap4 でデザイン)

HTML5+CSS3でつくる! レスポンシブWebデザイン作者: 大串肇,齋木弘樹,清野奨,嵩本康志,松尾祥子,松尾慎太郎,宮崎優太郎,吉澤富美出版社/メーカー: ソーテック社発売日: 2016/03/17メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る Bootst…

TextEncoder・TextDecoder を初めて知った

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)作者: 矢野啓介出版社/メーカー: 技術評論社発売日: 2010/02/18メディア: 単行本(ソフトカバー)購入: 34人 クリック: 578回この商品を含むブログ (129件) を見る Ja…

JavaScript で和暦取得できたのね…

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2016/09/30メディア: 大型本この商品を含むブログを見る 生の JavaScript で、toLocaleDateString() を使うと和暦が取得できた…