HTML・CSS、JavaScript、PHP、Apache の設定、スマートフォン向けの Web など、Web 制作でつまずきやすい点と、その解決方法をまとめています。
古いブラウザーに合わせるために生まれたやり方には、今では必要のなくなったものも少なくありません。記事では、問題が起きる仕組みを説明したうえで、今の Web 標準に沿った書き方を紹介します。
Web 制作とプログラミングの技術メモ
カテゴリー
記事一覧
記事は、いちばん主なカテゴリーごとに並べています。
ActionScript・Flash 2 件
- XML に書かれた順番どおりに画像を並べる XML に書いた順に画像を並べたいのに、読み込みの終わった順に並んでしまう問題の原因と解決策を、ActionScript 3 の例と今の JavaScript (fetch、DOMParser、Promise.all、先に枠を作る方法) で説明します。
- Flash Player 11 の標準の JSON クラスと as3corelib の名前の衝突 Flash Player 11 と AIR 3 で ActionScript 3 に標準の JSON クラスが加わり、as3corelib の同じ名前のクラスを使うコードがコンパイルできなくなることがありました。名前がぶつかる理由と解決のしかた、JavaScript の JSON との違いを説明します。
Apache・XAMPP 3 件
- WordPress をサブディレクトリに置いてトップで表示する方法と mod_rewrite の基本 WordPress の本体を /blog/ などのサブディレクトリに置いたまま、サイトのトップで表示する公式の手順と、そこで使われる Apache の mod_rewrite の基本、設定を誤って管理画面に入れなくなったときの戻し方を説明します。
- www 付きと www 無しの URL を 301 リダイレクトで 1 つにそろえる www 付きと www 無しの両方で同じページが見られる状態を、.htaccess の mod_rewrite で 301 リダイレクトしてそろえる方法を説明します。HTTPS への転送とまとめる書き方、DNS の設定、canonical も扱います。
- SSI を拡張子 .html のファイルでも使えるようにする (Apache・XAMPP) Apache の SSI (mod_include) で共通のヘッダーなどを読み込むとき、拡張子を .shtml にせず .html のままで有効にする設定を、XAMPP の httpd.conf と .htaccess の例で説明します。XBitHack や注意点も扱います。
CSS 5 件
- zoom: 1 の落とし穴 ── hasLayout と番号付きリスト 古い Internet Explorer 向けに使われた zoom: 1 と hasLayout の仕組み、すべての要素に付けたときに番号付きリストの番号が崩れる理由、今の CSS での考え方を説明します。
- overflow の基本と float を囲む効果 ── IE6 との違いと display: flow-root overflow の各値の意味と、visible 以外にするとブロック整形文脈ができて中の float を囲める仕組み、古い IE でこの効果が出なかった理由、今の display: flow-root を使った書き方を説明します。
- IE6 の透過 PNG 対策と、DD_belatedPNG で画像がずれる理由 IE6 で透過 PNG を表示するために使われた AlphaImageLoader と DD_belatedPNG の仕組み、描き直した画像の位置がずれる理由、今の画像形式 (PNG、WebP、AVIF、SVG) の選び方を説明します。
- iframe の中のページには、親ページのスクリプトや CSS が効かない iframe で読み込んだページは別の文書なので、親ページの CSS やスクリプトは効きません。古い IE 向けの補正スクリプトの例を入口に、その仕組みと、今の iframe で気をつけること (title、loading、sandbox、同一オリジンポリシー) を説明します。
- data URI で小さな画像を埋め込む ── スマートフォンで効いた理由と今の使いどころ data URI で小さな画像を CSS や HTML に埋め込む書き方と、回線の遅いスマートフォンで効果が大きかった理由、サイズやキャッシュの欠点、HTTP/2 以降での使いどころを説明します。
HTML 3 件
- DOCTYPE とレンダリングモード ── 標準モード・互換モードと X-UA-Compatible DOCTYPE の書き方でブラウザーの表示の仕方 (標準モード、互換モード、ほぼ標準モード) が切り替わる仕組みと、古い IE 向けの X-UA-Compatible、今の書き方と確かめ方を説明します。
- mailto: リンクの件名と本文を文字化けさせない書き方 mailto: リンクに日本語の件名や本文を入れるときは、encodeURIComponent で UTF-8 のパーセント符号化をします。改行の書き方、文字化けが起きていた理由、問い合わせフォームとの使い分けも説明します。
- IE9 から Edge へ ── Microsoft のブラウザーの移り変わりと対応状況の調べ方 Internet Explorer 9 で Web 標準への対応が大きく進んでから、Chromium を使う Edge と IE のサポート終了に至るまでの流れと、今ブラウザーの対応状況を確かめる方法 (MDN の互換性の表、Baseline、Can I use) を説明します。
JavaScript 10 件
- onclick 属性をやめて、イベントを JavaScript から登録する HTML の onclick 属性に処理を書く方法の問題点と、addEventListener でイベントを登録する書き方を、別ウィンドウを開くリンクを例に説明します。
- Photoshop のスクリプト (.jsx) で、フォルダー内の PSD をまとめて書き出す Photoshop を ExtendScript (.jsx) で操作して、フォルダー内の PSD ファイルをまとめて PNG などに書き出すスクリプトの書き方と、置き場所・実行方法、アクションのバッチや UXP など今の選択肢を説明します。
- 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 で動かない場合も説明します。
- 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 を確かめてから移動する書き方を説明します。
PHP 9 件
- file_get_contents で PHP ファイルを読むと、ソースが返るときと実行結果が返るとき file_get_contents で PHP ファイルを読むと、パスではソースが、URL では実行結果が返ります。その理由と、処理結果を使いたいときの require や関数を使う書き方、URL で自分のサーバーを読む欠点を説明します。
- OAuth の基本 ── パスワードを渡さずにアクセスを許可する仕組み OAuth は、パスワードを渡さずに、ほかのアプリへ自分のデータへのアクセスを許可する仕組みです。登場人物とアクセストークン、OAuth 1.0a と 2.0 の違い、今の主流の認可コードと PKCE を説明します。
- OAuth 1.0a の署名 (HMAC-SHA1) でつまずきやすいところ OAuth 1.0a の HMAC-SHA1 署名が合わないときに確かめたい点を、署名のもとになる文字列の作り方、パラメーターの並べ替え、rawurlencode による符号化、二重の符号化、タイムスタンプと nonce の順に説明します。
- PHP の関数の前に付く @ (エラー制御演算子) と、使わずに済ませる書き方 PHP で関数の前に付ける @ は、その式で出るエラーメッセージを表示しない演算子です。エラーが無くなるわけではない理由と PHP 8 での変更点、戻り値の確認や例外を使った代わりの書き方を説明します。
- API の URL のわずかな違いで、OAuth の署名が合わない・転送される http と https、www の有無、末尾の / といった URL のわずかな違いで、OAuth 1.0a の署名が合わなくなったり、転送で認証の情報が落ちたりする理由と、署名に使う URL の正規化、API の URL の扱い方を説明します。
- XAMPP に Imagick を入れたら Apache ごと落ちる ── 組み合わせの確かめ方 Windows の XAMPP に PHP の拡張機能 Imagick を入れると、Apache が起動しなくなることがあります。原因になりやすい組み合わせの不一致と、phpinfo() で確かめる項目、本番と同じ環境を用意する今のやり方を説明します。
- 画像や PDF をブラウザーで開かずにダウンロードさせる方法 画像や PDF をブラウザーで表示させずにダウンロードさせるには、Content-Disposition: attachment ヘッダーか、a 要素の download 属性を使います。日本語のファイル名の指定方法と、ファイルのパスを入力から作るときの注意点も説明します。
- PHP の rmdir で中身のあるディレクトリが消せないときの対処と安全策 PHP の rmdir は空のディレクトリしか削除できません。中身ごと消すための RecursiveDirectoryIterator を使った書き方と、シンボリックリンクや消す場所の確認などの安全策、Windows で消せないときの原因を説明します。
- Imagick で PNG を書き出すと「No IDATs written into file」が出るときの調べ方 PHP の Imagick で PNG を書き出すときに出る「No IDATs written into file」は、画像のデータが書かれなかったことを示す libpng のエラーです。意味と起こりうる原因、書き出す前の確認と原因の絞り込み方を説明します。
Ruby 1 件
WordPress 1 件
スマートフォン向けの Web 11 件
- メディアクエリの orientation は、端末の向きではなく表示領域の形で決まる メディアクエリの orientation は、端末の向きではなくビューポートの幅と高さで決まります。デバッグ用の表示やキーボードで縦向きのまま landscape になる理由と、端末の向きの調べ方、今の iPhone のデバッグ方法を説明します。
- タップの反応が遅い ── モバイルブラウザーの 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・遅延読み込み・参照の解放などの対策を説明します。
- iOS 5 の position: fixed から考える、スマートフォンの固定表示とスクロール iOS 5 の Safari で position: fixed と、要素の中の 1 本指のスクロールが使えるようになったことを入口に、今のスマートフォン向けの固定表示とスクロールの書き方 (sticky、dvh、safe-area) を説明します。
- 画面の向きの変化を知る ── orientationchange から screen.orientation へ スマートフォンの画面の向きが変わったことを JavaScript で知る方法を、昔の orientationchange イベントと window.orientation の問題、今の screen.orientation、matchMedia、resize を使った書き方、CSS で済ませる考え方に分けて説明します。
デザイン・画像 2 件
作業の効率化 6 件
- テキスト展開ツールで、よく使う定型文を略語から呼び出す 短い略語を打つと、登録した定型文に置き換わるテキスト展開ツールの考え方と使いどころ、略語の決め方を説明します。日本語入力のユーザー辞書やエディターのスニペットで代用する方法も紹介します。
- よく書く CSS を VS Code のユーザースニペットに登録する メディアクエリやレイアウトのひな形など、よく書く CSS を VS Code のユーザースニペットに登録する方法を説明します。prefix・body・description の書き方と、$1 や ${1:既定値}、$0 によるカーソル位置の指定も扱います。
- 正規表現で半角の記号をまとめて検索・置換する エディターの正規表現で、半角の記号 (ASCII の記号) だけをまとめて検索する文字クラスの書き方と意味を説明します。全角の記号との違い、Unicode の文字の種類による指定、置換の例と注意点も紹介します。
- Zen Coding から Emmet へ ── HTML を省略記法ですばやく書く HTML を短い省略記法から展開する Zen Coding は、今は Emmet という名前で VS Code などのエディターに組み込まれています。子・兄弟・繰り返し・番号・属性・文字などの基本の書き方を、展開結果とあわせて紹介します。
- メールソフトが同じメールを何度も受信するときの原因と直し方 POP3 でサーバーにメールを残す設定のとき、メールソフトが同じメールを何度も受信してしまう原因を、UIDL による受信済みの記録の仕組みから説明します。Thunderbird の popstate.dat の扱いや、IMAP への切り替えも紹介します。
- Fiddler の AutoResponder で、正規表現のルールがクエリ付きの URL に一致しないとき デバッグ用のプロキシ Fiddler の AutoResponder で、REGEX: のルールがクエリ付きの URL に一致しない原因と、正規表現の直し方を説明します。一致の確かめ方や、ブラウザーの開発者ツールで代わりに使える機能も紹介します。