JavaScript関連の記事一覧



20160726-jQueryでiframeの高さを自動調整-01

Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。

このiframeは高さが決まった高さなら、CSSで高さ(height)を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。


そこで、JavaScript(jQuery)を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。



記事の続きを読む




20160619-SliderPro-クリックできない問題を修正-00

画像をウェブページ上でスライドのように切り替えるスクリプトは、いわゆるスライダーと呼ばれます。



●高機能スライダースクリプト「Slider Pro」

このスライダーを使うためのスクリプトとして有名で高機能なスクリプトに「Slider Pro」があります。

Slider ProはjQueryと一緒にロードして使うタイプのスライダーのスクリプトです。

20160619-SliderPro-クリックできない問題を修正-02

画像出典:Slider Pro - Elegant and Professional Sliders



Webサイト制作に役立つ情報を発信しているサイト「コリス(Coliss)」でも紹介されていましたね。

Slider Proの特徴

Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro( コリス)


実際に制作したSlider Proを使ったスライダーはこんな感じ。

20160619-SliderPro-クリックできない問題を修正-01

画像出典:相談できる印刷会社 吉田印刷所

記事の続きを読む



20150530-IEの条件付きコメントをJavaScriptに置き換える-01

今回紹介するのはWeb制作の中でInternet Explorer(IE)の条件付きコメントが使用できない場合(禁止されている場合)にJavaScriptで対応する方法です。


●条件付きコメントとは?

条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

簡単な例としてはIE6だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

<!--[if IE 6]>
 ここはIE 6だけが読み込みます
<![endif]-->

なお、この機能は、便利な機能ですがIE10で廃止されました。



●条件付きコメントをJavaScriptで置き換える

たとえば、IE8(Internet Explorer 8)以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。

記事の続きを読む



20150406-JavaScriptでIEのバージョン判定-01

タイトルの通りですが、Internet Explorer(以下IE)のバージョンをJavaScriptで判定するコードです。(User Agentは使用しません)

それでは早速コードを紹介します。

//IEの判定 via https://w3g.jp/blog/tools/js_browser_sniffing
var _ua = (function(){
    return {
        lte_IE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        lte_IE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        lte_IE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        lte_IE9:document.uniqueID && typeof window.matchMedia == "undefined",
        gte_IE10:document.uniqueID && window.matchMedia ,
        eq_IE8:document.uniqueID && document.documentMode === 8,
        eq_IE9:document.uniqueID && document.documentMode === 9,
        eq_IE10:document.uniqueID && document.documentMode === 10,
        eq_IE11:document.uniqueID && document.documentMode === 11,
//        eq_IE10:document.uniqueID && window.matchMedia && document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !window.ActiveXObject,
        Trident:document.uniqueID
    }
})();


記事の続きを読む



今回もフォームの最適化について書いていこうと思います。


先日の「【Web制作】フォームの最適化しようと、いくつか表現を変えてみたテスト【初心者向け】(画像あり)」という記事の引用の中で紹介した「こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由」(マミオン有限会社)のページで以下のアドバイスが書かれていました。

シニアのフォーム入力操作を観察していると、誤ってページから離脱してしまい、再びフォームのページに戻ったら最初から全部やりなおし…という悲しいシーンによく遭遇します。フォームからフォーカスが外れた状態なのに気付かず、文字を修正しようとしてbackspaceキーを押してしまうのです。

こうした悲劇を防ぐためには、上記のHOME’S介護のように確認メッセージを出す方法がよいでしょう。実装方法も簡単なので、費用対効果が高い対策ですね。

[jQuery] ページを離れる際に確認メッセージを出す方法(18th Tech Note)

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

なるほど。Backspaceキーが「前のページに戻る」のショートカットキーになっていることに気がつかずに、または、意図せずショートカットキーの機能が有効になってページを移動してしまうというわけですね。


これは確かにストレスになります。


早速紹介されていたページを見て、jQueryのスクリプトを見てみました。

これはこのままでも使えるので、皆さん使ってみると良いと思います。

ページを移動しようとすると、以下の様な「このページから移動しますか? 入力したデータは保存されません。[このページから移動する][このページに留まる]」という確認用のダイアログが出てきます(画面はFirefox)。

20141218-jQueryでフォームページを移動する時に確認する-01


ですが、個人的な見地から、もう少し修正すると更に良くなると考えたので、修正版を公開します。

記事の続きを読む



jQuery .hover()

画像出典:.hover()(jQuery API Documentation)


●jQuery 1.7以降の.onを使っていますか?

jQueryの1.7以降では、.onという要素にイベントを追加する命令(メソッド)が使えるようになっています。今まで.bindで書いていたものから置き換えて使えるようです。

といっても私は.bindすら使っていませんでしたが…(.hover()や.click()だけで事足りていたので…)。

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()

.on() | jQuery API Documentation


.onの詳しい話は「jQuery の on() と off() を理解する(tacamy.blog)」に書かれているので、詳しく知りたい方はそちらを読んで欲しいのですが、.onは引数のひとつめにイベントを複数書けるのでとても簡単な書き方になります。便利そうですよね。

on() のひとつ目の引数を、スペース区切りで複数指定することで、どのイベントが発生しても同じ処理をさせることができます。

$('.foo').on('click blur', function(){...});

jQuery の on() と off() を理解する - tacamy.blog


●hoverをイベントとして引数に書いても反応しない

ということで、早速使ってみようと思いました。

$(".foo").on("click",function(){...});

とclickイベントが付いている要素へ、追加でマウスカーソルが要素に掛かっても(要素にホバーしても) function(){...} を実行できるようにしようと、

$(".foo").on("click hover",function(){...});

と書いたら動作しないわけですよ。


いつもマウスカーソルが要素に掛かる(ホバーする)時には次のように書いていて、

$(".foo").hover(function(){...});

これが動作するのになぜ…と思ったら、重大な勘違いをしていました。

記事の続きを読む



このブログは画像拡大表示の動作(lightbox)には prettyPhoto というjQueryのプログラムを使用しています。

複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。(下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます)

20140428-prettyPhotoカスタマイズ-01

画像出典:jQuery lightbox(No Margin For Errors)


このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。

  1. Create a link (<a href="#">).
  2. Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
  3. Change the href of your link so it points to the full size image.

jQuery lightbox for images, videos, YouTube, iframes, ajaxStephane Caron ? No Margin For Errors

実際これはこれで問題ないのですが、毎回「<a href="画像のファイル名" rel="prettyPhoto">」と「rel="prettyPhoto"」をaタグに追加して書くのは面倒ではないですか?

私は面倒です。

また、このブログは最近デザインをリニューアルしましたが、過去の画像のリンクに「rel="prettyPhoto"」と加えるのは現実的に無理です。


なので、楽をしましょう。

記事の続きを読む



以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。

モヤモヤを抱えたままだったので自分なりに考えてみました。


今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。(インストールはこちらから

Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。

20140202-window-jQueryについて-08

画像出典:Firebug



この機能を使って「window.jQuery ||  document.write('<script src="●●"><\/script>') 」の動作を調べてみます。


記事の続きを読む



20130717-Google-Adsense-非同期コード-00


ということで、「Google Adsense 非同期コードの提供開始 読み込みの高速化が可能に!」(+PlusOneWorld)の記事を見て、早速ライブドアブログでも設定してみました。


Google AdsenseのJavaScriptの非同期ロード版のコードは、まず、通常のコードを取得する方法と同じく「Google Adsenseの広告ユニット」の「コードを取得」をクリックします。
20130717-Google-Adsense-非同期コード-02


次に「コードタイプ」で「非同期(ベータ版)」を選択して「広告コード」に表示されるコードを貼り付けるだけです。
20130717-Google-Adsense-非同期コード-01


非同期ロードになると、何が良いのでしょうか?

記事の続きを読む



20130423-ビブロスフォントからOTFへ変換スクリプト-00

みなさん、ビブロスフォント(Biblos Font)使っていますか?

って使っている人はもはや古いQuarkXPressユーザーだけか…。
私も以前はお世話になりました。


ビブロスフォントですが、,澆燭い粉歐字が100まで使えて当時は「すげー」と思いました。
そのビブロスフォントを使ったデータを今度InDesignで組み直すときに、ビブロスフォントの丸数字をそのまま使うわけにはいかないので、Open Type Font(OTF:オープンタイプフォント)に置き換えようと思いました。

こんなの「検索と置換」で何とかなるかと思いましたが、なかなかうまくいかないのでInDesignのスクリプト(ExtendScript・JavaScript)を書くことにしました。

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索