Webブラウザのプッシュ通知を簡単に実装！「Push.js」の使い方を徹底解説
スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー
CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）
今回はjQueryを使わずに、CSSだけでアコーディオンをサクッと実装する方法を紹介します。どれもレスポンシブ対応です。なお、後半では矢印アイコン付きのものも載せています。コピペして使って頂いてOKです。
【jQuery入門】replaceを使って文字を置換、削除する方法 | プログラミング教育ナビ
JavaScriptのreplace関数を、以下のような方法で使う場合があると思います。 * replace()を使って文字列を置換する * replace()を使って文字列を削除する 今回はjQueryでの使って行う方法を下記のHTMLを使って紹介したいと思います。 “` <h1>jQuery Replace関数のサンプル</h1> <div> これはjQueryのReplace関数の使い方についてサンプルページです。<br/> 関数の使い方についてここで説明します。 </div> “` 1.replace()を使って文字列を置換する 下記のHTMLのサンプルを使って説明をします。 ``` <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script text="text/javascript"> $
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
jQuery Snippets #10 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第10弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 ul要素内のli要素を分割する ul要素内にあるli要素を指定した数に分割するという動きを実装するもので、何分割するかはul要素に記述してあるdata-colsというdata属性で指定します。 下記サンプルコードのHTMLをそのまま使用した場合は「li要素を3つのul要素に分割させる」という動きになり、1〜4がひとつ目、5〜7がふたつ目、8〜10がみっつ目として分割されて、それぞれが異なるul要素で括られます。 また、jQueryの一番下ではもともとあったul.split-l
jQuery Snippets #9 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第9弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 セレクトボックスを連動させる 地域選択のセレクトを選択すると都道府県のセレクトが選択可能になり、さらに地域選択で選択されたものによって都道府県選択の中身を変更するという動きを実装する方法です。 ブラウザによっては単純にdata属性の値をチェックして.show()と.hide()使って表示・非表示の切り替えとかで実装できるのですが、Safariなど一部ブラウザではそれだと実装できない（不要な項目を非表示にできない）ので、下記のようにわざわざデフォルトの値を取得したり.remove
jQuery Bracket
jQuery Bracket library [server] jQuery bracket is a jQuery plugin that lets users create and display single and double elimination brackets for tournament play. NEWNeed a tool for round-robin tournament groups? Check out the new jQuery Group library that's under development! Installation and project sources You can use npm or bower to install the library as a dependency to your project. npm instal
jQueryで特定の要素が存在するかどうかを判別する処理｜BLACKFLAG
スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
jQuery：タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法 - NxWorld
レスポンシブサイトでタブ切り替えを実装する際、ウィンドウサイズが大きい場合はそのままタブ切り替えの見栄えで、ウィンドウサイズが小さくなったときには表示幅などの兼ね合いで違った見せ方にすることがあります。 そのような時に見かけるのが多いものとしては、ウィンドウサイズが小さいときはタブ切り替えではなくアコーディオンに変化させたり、他にはSmartNewsなどで採用されているようなタブの見栄えはそのままにしつつタブ部分をスワイプ（スクロール）できるようにしたものなどありますが、それらとは違った見せ方としてウィンドウサイズが小さいときは切り替えにselect要素を用いるという動きを実装することがあったので、実装方法を備忘録兼ねて紹介します。 先にざっくりとした動きを説明すると、表示・非表示の切り替えは単純にCSSのMedia Queriesを用いて、jQueryではそれぞれのナビが切り替わったタイ
レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers
<ph type="x-smartling-placeholder">で確認できます。 このルールは、HTML でブロックが参照されていることを PageSpeed Insights が検出した場合にトリガーされます ページのスクロールせずに見える範囲に 外部の JavaScript ファイルを配置します 概要 ブラウザは、ページをレンダリングする前に、HTML マークアップを解析して DOM ツリーを構築する必要があります。 このプロセスでは、パーサーがスクリプトを検出するたびに、スクリプトを停止して実行する必要があります。 HTML の解析を続行できません。外部スクリプトの場合、パーサーは リソースのダウンロードを待機することになります。これにより、1 つ以上のネットワーク ラウンドトリップと ページが最初にレンダリングされるまでの時間を遅らせる。 <ph type="x-smartl
Pikabu – Flexible Framework for Off-Canvas Flyout Panels | Mobify
Pikabu A speedy, flexible framework for off-canvas flyout panels. Simple markup Few containers and classes means implementation is a breeze. Native scrolling Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don’t support it. Customization No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs. Compatibility This thing works
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechAcademy [テックアカデミー]![TechAcademy [テックアカデミー]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c295330d4f51d6ba69336c6835b47fb606bfd53/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechacademy.jp%2F_nuxt%2Fogp%2Fog-image.jpg)
jquery.gracket.js - A JQuery/Canvas approach to creating single elimination tournament brackets
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/nth-child%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
Responsive Sidebar Navigation | CodyHouse
まとめーたー
Hammer.JS - Hammer.js