※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー
長いスマホ商品ページでも購入導線をわかりやすく表示し離脱を防ぐ 画像やテキストで商品が訴求された長い商品ページは商品の情報が充実していてるのですが、いざ買おうと思ったときに「どっから買うたらええねん」となってしまうことがあります。特にスマートフォンでは画面が小さい分注意。 そうなってしまわないように、今回は商品ページでユーザーにを迷わせないようにカートボタンへの固定ボタンを表示させます。
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
こんにちは、つばさ（@tsubasa123）です。 すべてのカスタマイズをオリジナルにするという目標に向けて一歩ずつ頑張っております。今日は簡単な奴、ページのトップへ戻るボタンを自作しました。 とりあえず全部コピペでいけるようにしております。まだ導入していない方、よろしければお試しください。 設置は基本的にはコピペだけ HTMLとJavaScriptの追記 CSSの追記 細かい調整はCSSを修正してどうぞ さいごに 関連記事 設置は基本的にはコピペだけ PC、スマホ（Pro契約が必要）の両方に対応しています。どちらもダッシュボードからコピペしていただければ、ある程度スクロールしていくと、このページの右下にあるようなボタンが出てきます。 こんなやつです。 HTMLとJavaScriptの追記 <div id="page-top-area"> <a id="page-top-button"><
【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！ シェア つぶやく ブックマーク LINE Pocket この記事をご覧いただいた方の中には既にお気付きの方もいらっしゃると思いますが、「この記事のタイトルとURLをコピー」するボタンを実装いたしました。 一度試すとスグにわかりますが、単純に「記事タイトルとURLをコピー」するという、たったそれだけのボタンです。しかしとても便利なボタンを実装したのではないかと考えています。特にブログ運営者の方は、きっと拡散の手助けとなる（？）オススメなボタンです！ なぜこのボタンを作ったのか とある10代後半〜20歳前半の女の子をターゲットとするクライアント様へのリニューアルの提案時にソーシャルボタンはあったほうがいいかどうか、といったことが社内で議題に挙がりました。 記事を少しでもシェアしてもらうために
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
JavaScriptというかjQueryのお勉強。 練習がてらコンテンツスライダーを作ってみました。 この手のものはチュートリアルもプラグインも山ほどありますが、必要な機能だけあって好きに使えるものが欲しかったので1から作りました。 プラグインをお求めの方は「jQuery.simpleLoopSlider.js」をどうぞ。 欲しかった機能シンプルに動くコンテンツスライダー。ループ機能。最後の次は最初、最初の前は最後、という感じで動く。進む、戻るナビゲーション。自動でページネーションを設置。これをやります。 デモとダウンロードは以下からどうぞ。 jQuery Simple Loop Slider DEMO デモファイルをダウンロード HTMLとCSS<div id="slider"> <div class="slider-view"> <div class="slider-container
toggle() で開いた時と閉じた時にそれぞれ別のアクションを実行したい。しかし toggle() にそのような機能はないため、click() 時に要素の display プロパティの値を取得して、それを比較していろいろなアクションを実行することにしました。 というわけで特定の CSS プロパティの値を取得するコード。
お題の復習 まずは前回出したお題を復習しましょう。前回のお題は以下のようなHTMLがあったときにマウスオーバーでサブメニューを表示するようなUIをjQueryを使って書くというものでした。 お題（連載第二回目） お題（連載第二回目） - jsdo.it - share JavaScript, HTML5 and CSS たくさんforkしていただいてありがとうございました。今回は回答編ということでみなさんにこのお題をforkしてもらった作品を紹介しながらjQueryを使ったマウスオーバーでのメニュー表示機能を解説していきます。やってみてわからなかった人は模範解答を参考にしてみてください。 模範解答 ではまず模範解答を見ていきましょう。他にもよくできていた作品はたくさんありましたが、模範解答の例として以下の作品を紹介します。 forked from: お題（連載第二回目） - jsd
雪が降ってるってマジですか？nakamura です。 そうしょっちゅうはないと思いますが、ユーザに何かしらの評価をさせるシステムってあると思います。UI の選択肢も様々ですが、今日はそんな中から iTunes っぽい星アイコンでレイティングの機能を実現する jQuery Star Rating Plugin をご紹介します。 ダウンロード ダウンロードはこちらから。Download のタブから star-rating.zip を落としてきてください。 jQuery Star Rating Plugin 設置 落としてきた zip を解凍するとたくさんファイルが出てきますが、必要なのは以下の 4 つです。 jquery.rating.js jquery.rating.css delete.gif star.gif また別途 jQuery の本体が必要です。star-rating.zip に付
twitter facebook hatena google pocket 画像にマウスオーバーした際にひと工夫したい。 そんな時にはjQuery Glossです。 キラーンとさせますよ、キラーン★ sponsors 使用方法 jQuery Glossからファイル一式をダウンロードします。 <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="gloss.1.0.js" type="text/javascript"></script> <script> $(document).ready(function(){ $.gloss(); }); </script> あとは画像を記述すれば完成です。 <div class="gloss" style="width:画像サイズ幅px;heigh
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
MyjQueryPlugins : jRating - Ajax rating system with jQuery 使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」。 デザインは次のように、綺麗な星のデザインになっており、個性が強すぎず、弱すぎずという感じで汎用に使えそうです。 isDisabledオプションを true にすると、星だけ表示して投票禁止にすることも出来るので、ログインユーザのみに限定したい場合なんかにも使えそうです。 更に次のような小さな星にすることも出来ます。 次のように、成功、失敗時のイベントハンドラを設定することも可能。 $(".exemple6").jRating({ onSuccess : function(){ jSuccess('Success : your rate has been saved :)',{ Horiz
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと
Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table. But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, filte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
