knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

javascript

Canvasでの認証エラー

toDataURL, getImageDataなど、Canvasで画像のピクセルデータを取得したり保持しているピクセルデータを出力する際、画像を格納しているディレクトリにBASIC認証がかかっていると認証エラーを起こします。 その際はCanvasで操作するimageオブジェクトにcross…

Photoshopのような画像合成はフロントエンドでどこまで可能か

モダンブラウザに限定すれば実装は容易 Photoshopには描画モードという機能があり、例えば「乗算」「オーバーレイ」「スクリーン」などの描画モードを用いることでデザインの表現を大きく広げることが可能になります。 これまで描画モードを利用した表現はブ…

SVGアニメーション はじめの一歩

前提 SVGの埋め込み方法はいくつか用意されています。 img要素のsrc属性による埋め込み object要素のdata属性による埋め込み embed要素のsrc属性による埋め込み CSSプロパティ(背景画像や擬似要素)による埋め込み インラインSVGによる埋め込み 基本的にSVG…

Canvasのレスポンシブ対応

Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由につい…

YouTubeの埋め込み再生で、警告メッセージが出る

モバイルでは自動再生は行わない YouTube Iframe Player APIを使用して、埋め込み動画を動的生成したところ、「すぐに再生が開始しない場合は、端末を再起動してください。」というメッセージが表示されるとともに、動画のローディングが終わらないという現…

チェックボックスをreadonlyにする

チェックボックスは「見た目上」readonlyにならない フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります(disabledとは違います、念のため)。 ところがチェックすボックスやラジオボタンにreadonly属性を…

n秒づつ遅らせてクラスを追加する

delayはアニメーションのみ このような要件を実装するためによく使われるのは、以下のようにdelayを利用したロジックです。 [ex].200ミリ秒づつ遅らせてフェードインする var $targets = $('.fade'); var delay = 200; $targets.each(function(i){ $(this).d…

Androidデフォルトブラウザでviewportが無視される

たとえば下記のようなページを想定します。 ビジュアルが表示幅ぴったりに広がっており、とても洗練されたデザインですね。 今回はこのデザインを横幅320pxに最適化して表示する際の問題について書きたいと思います。 横幅320pxに最適化とは 横幅320px固定の…

関数内でその関数自身を取得実行する

関数内で、その関数自身の情報を得たいなと思っていました。 次の方法で可能となります。 var functionA = function(){ console.log(arguments); } argumentsというオブジェクトは、本来名前の通り関数に渡された引数を参照できる配列に似たものです。 もし…

transitionのコールバックを実装する

transitionが終了したら実行されるようにしたい CSS3のプロパティであるtransitionを用いてアニメーションをさせるとき、transition終了時にコールバックを実装したいときがあります。 jQueryのanimateメソッドならば、簡単にコールバック関数を指定できるの…

Android 2.3でスクロールを実装する

Android2.3デフォルトブラウザにはiframeに関連するバグだけでなく、他にもスクロールにまつわるバグがあります。 今回はoverflow:scrollにまつわる現象について、その解決方法をご紹介したいと思います。 要素からあふれた部分を表示するoverflowプロパティ…

水平方向のスクロール量を取得する

jQueryを用いた場合 垂直方向はscrollTopで取得できますが、水平方向のスクロール量はscrollLeftによって取得します。 var scrollLeft = $(ELEMENT).scrollLeft(); 引数に数値を与えれば、その数値だけ水平方向にスクロールします。 たとえば左に200pxスクロ…

空白・全半角を判定するロジック

※inputValという変数に、チェック対象の文字列が代入されていると仮定します。 空白チェック 空文字、半角スペース、全角スペース、タブを検知。 if(inputVal == '' || inputVal.match(/^[\s\u00A0\u3000]+$/g)){ console.log('空白'); }else{ console.log('…

iOS版Safariでフォーム入力時に自動ズームしてしまう

iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。 予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。 この現象に対する対策はいくつかあるため、ご紹介いたします。 font-sizeを大きく設定する i…

IE8で透過PNGのフェードが汚れる

以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過PNGがフェードインする要件だったのですが、IE8で表示したときに透過チャンネルの部分が黒く汚れてしまいました。 フェードしているので分かりにくいかもしれません…

ワイルドカードで要素を取得すると親要素をさかのぼり続ける

イベントのバブリングに注意 たとえば、ページ内の任意を場所をクリックしたとき、クリックした場所にある要素のタグ名を出力するという事例を想定します。 まずタグ名は次のように取得可能です。 var target = /* DOMオブジェクト */ var tagName = target.…

nullを参照してしまったら

try~catchを活用 たとえば、ユーザーエージェントからIEのバージョンを判別します。 var ua = window.navigator.appVersion.toLowerCase(); var appVersion = parseFloat(ua.match(/msie(\s)?(\d+)/i)[2]); String.matchメソッドの戻り値は、正規表現の後方…

Ajaxの文字化け対策

UTF-8の外部ファイルを、Shift-JISのページに読み込むと想定します。 当然ながら文字コードが異なるので、文字化けします。 overrideMimeTypeを用いる $.ajax({ type: 'GET', url: 'hogehoge.xml', dataType: 'xml', success: function(data) { /* do someth…

iframeと親ウィンドウ間の相互アクセス

親ウィンドウからiframe内の要素を操作したり、その逆を行いたいときの方法です。 jQueryに依存しない書き方ももちろんあるのですが冗長になってしまうので、ここではjQueryを用いたアクセス方法をご紹介します。 親ウィンドウ → iframe内の要素にアクセス …

日付を比較する

過去・未来を判別する 難しいロジックを考える必要はありません。 Dateオブジェクトの特徴を利用すればシンプルなコードで判別できます。 getTimeメソッドで世界協定時 1970年1月1日00:00:00 からの経過ミリ秒が取得できるので、それを用いて比較します。 ※…

入力フォームでコピー&ペーストを禁止する

copyイベント / pasteイベントに紐づける 以前、画像のダウンロードを禁止する際にcontextmenuイベントの紹介をしましたが、同様の考え方になります。 今回はjQueryでの書き方を紹介しますが、バニラなjavascriptでも動作します。 [ex.ペーストによる入力を…

空要素のDOMオブジェクトを取得できない

要素取得系メソッドは、ページ読み込み後に実行する 空要素を取得して、JSで動的にコンテンツを出力したいときがあります。 jQueryを使用していないページの場合、要素の取得はgetElement系メソッドに頼るしかないのですが、それが空要素の場合にエラーが発…

イベント発火元がどの要素の中に存在するか調べる

要素を含むかどうかを調べるのは、$.contains( ) たとえばスクロールイベントを想定してみます。 特定の要素上でスクロールされたときのみ、任意の処理を止めることが可能です。 文字列を含むかどうかの判定は:containsフィルターを使えばよいのですが、ある…

動的生成された要素に確実にバインドする

onメソッドを再確認 動的に生成された要素にイベントをバインドするには、現行のjQueryではon/offを用います。 ところが、頻繁に生成・削除が繰り返されるような要素であったり、Ajaxによって生成にタイムラグが発生する要素の場合、うまくバインドできない…

要素からあふれた部分も含めた幅を求めたい

jQueryには適切なメソッドはなし 百聞は一見にしかずということで、まずはこちらをご覧ください。 white-spaceにpreが指定してあるため、文章は改行せずに、あふれてしまいます。 ここで求めたいのは矢印で示された領域です。 もしもoverflow:hiddenが指定さ…

非同期読込みをキャッシュさせない

非同期読み込みの際は注意 HTMLやCSSがキャッシュされてしまい、変更が反映されないということはよくありますが、もちろんJSもキャッシュされます。 特にAjaxなどを用いた非同期読み込みの際はキャッシュされることがあるので注意です。 $.ajaxを用いた場合 …

画像の読み込みに失敗したら

IE8以下のみで失敗する場合 IE8以下は、すでにブラウザがキャッシュをしている場合、onloadメソッドが走りません。(最新のブラウザではキャッシュをしていても走ります) var img = new Image(); img.src = hoge.jpg'; img.onload = function(){ //IE8以下…

正規表現の後方参照まとめ

使用するメソッド 置換などで活躍する正規表現ですが、サブマッチ文字列を参照して利用する(後方参照)場面も時おりあります。 個人的にも理解が曖昧な部分があったため、整理がてらまとめました。 正規表現によるマッチングを行うには、RegExp.exec とStri…

DOMオブジェクトとjQueryオブジェクトの相互変換

jQueryオブジェクト → DOMオブジェクト getメソッドの戻り値を参照します。jQueryオブジェクトの集合に対してgetメソッドを実行するとDOM オブジェクトの配列が返されます。 id名で指定したときなど一つしかない場合は0番目を、クラス名で指定したときなど複…

CSSを動的に追加する

要素を動的に生成し、headの子要素として追加する head内にCSSを記述するのと同じ結果になります。 jQueryのcssメソッドとは異なり、要素そのものにスタイルは直書きされません。 パフォーマンス向上のため、ページ読込み後に意図的に特定のスタイルシートを…

クロスドメインでiframeを扱う

以前、iframeについていくつか記事を書かせて頂きましたが、その続編です。 iframeで別ページを読み込む際、同じドメインでないとエラーが発生し、iframe内の要素にアクセスすることができなくなってしまいます。 一例ですが、子ページと同じ大きさにiframe…

画像のダウンロードを禁止する

右クリックを禁止する 右クリックは、contextmenuイベントで捕捉することができます。 コンテキストメニューが出ないようブラウザのデフォルトの動作を中止させます。 $('img').on('contextmenu', function(e) { e.preventDefault(); }); 関数内にalertを書…

iframeのキャッシュが強すぎる

iframeで外部HTMLを呼び出す際、iframe内のキャッシュが強すぎて意図しない挙動をすることがあります。 たとえば、同じページのみを呼び出し続ける等。 metaでキャッシュを残さないこともできますが、レギュレーション上できない場合があります。 そんなとき…