JavaScript の話題を扱います。イベントの登録、非同期処理、日時の扱い、ブラウザーの API、Node.js、セキュリティなどです。jQuery の時代のやり方を、今の標準の API で書き直す方法も紹介します。
カテゴリー
JavaScript
記事 (23 件)
- onclick 属性をやめて、イベントを JavaScript から登録する HTML の onclick 属性に処理を書く方法の問題点と、addEventListener でイベントを登録する書き方を、別ウィンドウを開くリンクを例に説明します。
- Photoshop のスクリプト (.jsx) で、フォルダー内の PSD をまとめて書き出す Photoshop を ExtendScript (.jsx) で操作して、フォルダー内の PSD ファイルをまとめて PNG などに書き出すスクリプトの書き方と、置き場所・実行方法、アクションのバッチや UXP など今の選択肢を説明します。
- mailto: リンクの件名と本文を文字化けさせない書き方 mailto: リンクに日本語の件名や本文を入れるときは、encodeURIComponent で UTF-8 のパーセント符号化をします。改行の書き方、文字化けが起きていた理由、問い合わせフォームとの使い分けも説明します。
- IE6 の透過 PNG 対策と、DD_belatedPNG で画像がずれる理由 IE6 で透過 PNG を表示するために使われた AlphaImageLoader と DD_belatedPNG の仕組み、描き直した画像の位置がずれる理由、今の画像形式 (PNG、WebP、AVIF、SVG) の選び方を説明します。
- Web Speech API でブラウザーにテキストを読み上げさせる ブラウザーの標準機能 Web Speech API の speechSynthesis と SpeechSynthesisUtterance で、テキストを読み上げる方法を説明します。声の選び方 (getVoices と voiceschanged)、言語・速さ・高さの指定、非公式の API を使わない理由も扱います。
- jQuery の書き方を標準の DOM API に置き換える対応表 jQuery が広く使われた理由を振り返り、要素の取得、class の操作、イベント、通信などを、querySelectorAll、classList、addEventListener、fetch といった標準の API で書く方法を対応表にまとめます。
- 処理の終わりを待ってから次へ ── コールバックから async/await まで ある処理が終わってから次の処理をしたいときの書き方を、コールバック、jQuery の Deferred、Promise、async/await の順に説明します。DOM の読み込みの待ち方、Promise.all、setTimeout で待ってはいけない理由も扱います。
- JavaScript で UNIX 時刻 (秒) を取得する方法と注意点 JavaScript で UNIX 時刻を秒で得るには Math.floor(Date.now() / 1000) と書きます。Date がミリ秒で数えること、ビット演算で切り捨てると 2038 年に壊れる理由、タイムゾーンとの関係、日時への戻し方を説明します。
- iframe の中のページには、親ページのスクリプトや CSS が効かない iframe で読み込んだページは別の文書なので、親ページの CSS やスクリプトは効きません。古い IE 向けの補正スクリプトの例を入口に、その仕組みと、今の iframe で気をつけること (title、loading、sandbox、同一オリジンポリシー) を説明します。
- iframe の中から親ページを操作する ── window.parent と postMessage iframe の中のページから親ページを操作する window.parent と window.top の使い方、同一オリジンポリシーによる制限、古い IE で起きていたエラー、オリジンが違うときに使う postMessage の安全な書き方を説明します。
- 表示中のページのフォントを Google Fonts に変えるブックマークレット ブックマークから JavaScript を実行するブックマークレットで、表示中のページに Google Fonts の CSS を読み込み、本文のフォントを変える例を紹介します。書き方の決まりと、Content Security Policy で動かない場合も説明します。
- 画像や PDF をブラウザーで開かずにダウンロードさせる方法 画像や PDF をブラウザーで表示させずにダウンロードさせるには、Content-Disposition: attachment ヘッダーか、a 要素の download 属性を使います。日本語のファイル名の指定方法と、ファイルのパスを入力から作るときの注意点も説明します。
- Node.js の始め方 ── インストールから最初の HTTP サーバー、npm まで サーバーや手元のパソコンで JavaScript を動かす Node.js の始め方を説明します。LTS 版の入れ方、node:http を使った最初の HTTP サーバー、npm init と package.json、パッケージの入れ方、ブラウザーの JavaScript との違いを扱います。
- URL の値をそのまま location.href に入れると XSS になる URL のパラメーターをそのまま location.href に代入すると、javascript: で始まる値でスクリプトを実行されるおそれがあります。仕組みと、URL を確かめてから移動する書き方を説明します。
- タップの反応が遅い ── モバイルブラウザーの 300 ミリ秒の遅れと今の対策 かつてのモバイルブラウザーでは、タップしてから click イベントが起きるまで約 300 ミリ秒の遅れがありました。遅れの理由、昔の回避策の問題点、viewport や touch-action を使った今の対策と、連打への備えを説明します。
- スマートフォンで音声を再生・シークできないときは、配信のしかたを疑う 音声ファイルが再生できない、途中から再生できないといった問題は、ブラウザーではなく配信する側が原因のことがあります。Range リクエストと 206 Partial Content、Content-Type、PHP で返すときの注意と、curl での確かめ方を説明します。
- iPhone の Safari で音を鳴らすときの制限と対処 iPhone の Safari で音を鳴らすときに知っておきたい制限 (タップがきっかけでないと再生できない、volume を変えられない、audio 要素を重ねにくい) と、Web Audio API を使った対処、play() の失敗の捕まえ方を説明します。
- Android のブラウザーで音声を再生する ── 自動再生の決まりと対応形式 Android のブラウザーで音声を再生するときの考え方を、昔の機種ごとの違いと今の状況、自動再生のポリシー、対応する形式と canPlayType() での確かめ方、audio 要素に複数の source を書く方法に分けて説明します。
- 「タッチ端末かどうか」ではなく、入力の種類で表示や処理を分ける 'ontouchstart' in window などでタッチ端末かどうかを判定する方法の問題点と、CSS の hover・pointer・any-pointer メディア特性、matchMedia、Pointer Events の pointerType を使って入力の種類ごとに分ける今の方法を説明します。
- スマートフォンの Web で音を鳴らす方法のまとめ スマートフォンのブラウザーで音を鳴らす方法を、audio 要素と Web Audio API の使い分け、自動再生のポリシー、対応する形式、iOS の音量の制限、マナーモードとの関係、かつての Flash との違いに分けて整理します。
- 音声の再生は、利用者の操作の中で始める 音声の再生が許されるのは、タップなどの操作に続く処理の中だけです。どこまでが操作に続く処理と見なされるのかを、ユーザーアクティベーションの仕組みと navigator.userActivation を使って説明し、確実に音を出せる書き方を紹介します。
- 画像をたくさん読み込むとスマートフォンのブラウザーが落ちる理由と対策 JavaScript で大量の画像や大きな画像を読み込むと、スマートフォンのブラウザーが落ちることがあります。原因になる画像のメモリの使い方 (幅 × 高さ × 4 バイト) と、srcset・遅延読み込み・参照の解放などの対策を説明します。
- 画面の向きの変化を知る ── orientationchange から screen.orientation へ スマートフォンの画面の向きが変わったことを JavaScript で知る方法を、昔の orientationchange イベントと window.orientation の問題、今の screen.orientation、matchMedia、resize を使った書き方、CSS で済ませる考え方に分けて説明します。