サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
shinimae.hatenablog.com
beforeunloadイベントを利用して実装 先日、とあるCMSの管理画面にて、記事入力途中・画像入力途中でのページ離脱防止機能の実装を行いました。 要件としては、Google Chromeのみで、離脱時にアラートを表示するというものでした。 ページ遷移前に発火するbeforeunloadというイベントを利用した実装を行なったのですが、僕自身このイベントに真正面から向かい合って実装に取り組んだことがなかったので、ところどころ小さな落とし穴があったため、その備忘録としてこの記事を書かせていただきます。 ちなみに、beforeunloadイベントの詳細はこちらを参照ください。 developer.mozilla.org テストは必ず入力フィールドのあるページで とても基本的な落とし穴ですがテストは必ず入力フィールドのあるページで行なってください。 Google Chrome公式でもRequi
関数内で、その関数自身の情報を得たいなと思っていました。 次の方法で可能となります。 var functionA = function(){ console.log(arguments); } argumentsというオブジェクトは、本来名前の通り関数に渡された引数を参照できる配列に似たものです。 もし関数に3つの引数が渡されたなら、arguments[0], arguments[1], arguments[2]という具合に参照ができます。 arguments.callee さて、argumentsにはlengthとcalleeというプロパティがあり、lengthは引数の数、calleeは現在実行している関数の関数本体を示します。 今回用いるのは、まさしくこのarguments.calleeというプロパティです。 このarguments.calleeにはいくつかプロパティがあり、関数名など
1ページあたりの表示件数を指定するposts_per_pageですが、もし指定しないとデフォルトで10件しか表示されません。 全件表示する際は、-1を指定するそうです。 下記はカスタムポストタイプ「works」を全件取得するクエリです。 $args = array( 'post_type' => 'works', 'posts_per_page' => -1 ); $myQuery = new WP_Query( $args );
ファイル中にマルチバイト文字があるか確認 gulp-sassモジュールを利用してsassをコンパイルしていると、以下のようにscssファイル中に文字コードを指定していても削除されてしまうことがあります。 @charset "UTF-8"; scssファイル中にマルチバイト文字があるかどうか確認してください。 どうやらgulp-sassはマルチバイト文字が存在するファイルにのみ文字コード指定を出力するようです。 ですので、コメントに日本語を記入してしまえばこのようなことにはならないのですが、このような理由で運用上ルールを追加するのはナンセンスです。 そこで、gulpの他モジュールの力を借りてこれを解決します。 使用するのはまず、gulp-headerモジュールです。 このモジュールは対象となるファイルの先頭に任意の文字列を挿入する機能を持っています。 こちらを用いて、以下のようなタスクファイ
以下のようなディレクトリ構造になるようgulpを用いてSassのコンパイルを行います。 devディレクトリがSassファイルを格納する開発用、destディレクトリがコンパイル後のCSSファイルを格納する納品用ディレクトリです。 root │ ├─ dev │ ├─ scss │ │ ├─ top │ │ │ └─ top.scss │ │ └─ products │ │ └─ products.scss │ │ │ └─ gulpfile.js │ └─ dest ├─ top │ └─ top.css └─ products └─ products.css Sassのコンパイルをするタスクとして、以下のようなサンプルがオーソドックスな例としてよく紹介されています。 var gulp = require('gulp'); var sass = require('gulp-sass'); g
Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由について整理してみると、 属性値でサイズを指定するため、CSSでのサイズ指定ができない【こちらを参照】 画像描画の場合、素材となる画像から切り出すサイズ・開始座標を絶対値で指定してCanvasに描画するという考え方である【こちらを参照】 主にこの2点により、レスポンシブデザインやRetina対応ではセオリーとなっている「width:100%」などといった、親要素を基準としたサイズ指定ができないことが難易度を高くしているゆえんとなっています。 ただし、いくつかのテクニックやメソッドを組み合わせることでこれらに対応することが可能となります。 ちなみ
borderを指定していなければCSSのみで見せかけられる 下図のような事例を想定します。 ここで、赤枠で囲まれた部分の高さを揃えたいという要望があったと仮定しましょう。 グレーのエリアは、両方ともfloatが指定されています。 高さを揃える方法はjsを用いる方法などありますが、今回のような要望はCSSのみで対応可能だったので、方法をご紹介します。 まず、サンプルのHTMLは以下のような構造をしています。 今回は背景色だけを敷けばよいので、高さを揃えるように見せかけるため、floatした要素にpadding-bottomを設定します。 .float-item{ padding-bottom: 32767px; margin-bottom: -32767px; } こうすることで、次のような状態になります。 paddingと同じ数だけマイナスマージンをかけることで、余計な空白が生まれないよう
このような矢印です。 Chrome/Safari/FireFoxならば、次の方法で非表示にすることが可能です。 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } ところが、IEではこの矢印のみが残ってしまいます。 IE10以上になってしまいますが、次の指定をすることで非表示にすることができます。 select::-ms-expand { display: none; }
以前、iframeについていくつか記事を書かせて頂きましたが、その続編です。 iframeで別ページを読み込む際、同じドメインでないとエラーが発生し、iframe内の要素にアクセスすることができなくなってしまいます。 一例ですが、子ページと同じ大きさにiframeをリサイズすることができなくなってしまいます。 対処法をまとめます。 postMessageを使う 親ページ→子ページへのアクセスは禁じられていますが、window.postMessage()メソッドを用いて子ページ→親ページへメッセージを受け渡すことは可能になっています。 モダンブラウザ、IE8で実装済みです。 子ページ側(メッセージを送る側) parent.postMessage('hello','*'); 第一引数は送りたいメッセージ、第二引数には対象ドメインを指定します。 ここでは対象ドメインに「*(すべて可)」を指定して
このページを最初にブックマークしてみませんか?
『knowledge base』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く