JavaScript に関する記事です。
タグ
#JavaScript
記事 (21 件)
- 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 の中から親ページを操作する ── window.parent と postMessage iframe の中のページから親ページを操作する window.parent と window.top の使い方、同一オリジンポリシーによる制限、古い IE で起きていたエラー、オリジンが違うときに使う postMessage の安全な書き方を説明します。
- 表示中のページのフォントを Google Fonts に変えるブックマークレット ブックマークから JavaScript を実行するブックマークレットで、表示中のページに Google Fonts の CSS を読み込み、本文のフォントを変える例を紹介します。書き方の決まりと、Content Security Policy で動かない場合も説明します。
- XML に書かれた順番どおりに画像を並べる XML に書いた順に画像を並べたいのに、読み込みの終わった順に並んでしまう問題の原因と解決策を、ActionScript 3 の例と今の JavaScript (fetch、DOMParser、Promise.all、先に枠を作る方法) で説明します。
- 画像や 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 を使った今の対策と、連打への備えを説明します。
- 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 を使って入力の種類ごとに分ける今の方法を説明します。
- 音声の再生は、利用者の操作の中で始める 音声の再生が許されるのは、タップなどの操作に続く処理の中だけです。どこまでが操作に続く処理と見なされるのかを、ユーザーアクティベーションの仕組みと navigator.userActivation を使って説明し、確実に音を出せる書き方を紹介します。
- 画像をたくさん読み込むとスマートフォンのブラウザーが落ちる理由と対策 JavaScript で大量の画像や大きな画像を読み込むと、スマートフォンのブラウザーが落ちることがあります。原因になる画像のメモリの使い方 (幅 × 高さ × 4 バイト) と、srcset・遅延読み込み・参照の解放などの対策を説明します。
- 画面の向きの変化を知る ── orientationchange から screen.orientation へ スマートフォンの画面の向きが変わったことを JavaScript で知る方法を、昔の orientationchange イベントと window.orientation の問題、今の screen.orientation、matchMedia、resize を使った書き方、CSS で済ませる考え方に分けて説明します。