jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
はてな風のブログカードをブックマークレットから作ってみよう！
こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。 テキストリンクで貼ったりスクリーンショットと一緒に貼ったりと見せ方はその時々によりますが、はてなブログでは他にも「ブログカード」と呼ばれるリンクの形式があることをご存知でしょうか？ ヘルプにはこのように紹介されています。 「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。 実際の投稿画面から試してみました。掲載したいページのURLを指定するだけで、きれいなブログカードを埋め込むことができます。便利！ シンプルなテキストリンクだけよりも断然かっこいいので「はてなブログじゃない場所でも使いたいな〜」と思いますよね。 そこで、1クリックでそれらしきブログカードを生成できるブックマークレット
Vanilla Javascript Parallax Library — Rellax
or if you're old school like us, download and insert rellax.min.js file in your project folder.
Webfontの使い方 - Qiita
Webフォントを使うためのベストプラクティス（最もパフォーマンスがよい、遅延が少ない）をGoogle Fontsの利用を中心に考えてみたいと思います。 形式 EOT・TTF・WOFF・WOFF2・SVG等ありますが、2019年12月現在、ほとんどのブラウザでWOFFとWOFF2がサポートされていますので、この2つを読み込めばOKです。 ※但し、案件ごとのターゲットブラウザは確認しましょう。 Google FontsのCDN利用 Google Fontsをタグで読み込んで使う場合、複数フォントを読み込むと以下のようなタグが発行されます。 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&display=swap&subset=japanese" rel="styles
webfontloaderでWebフォントの読み込みを行う
JavaScriptのライブラリ「webfontloader」で、Webフォント読み込み時のコントロールを追加してみます。 webfontloaderを使用しない場合 まずは普通にWebフォントを設定してみます。 HTML <p class="genshinGothic">源真ゴシック</p> CSS @font-face { font-family: 'GenShinGothic'; src: url('GenShinGothic-Regular.eot'); src: url('GenShinGothic-Regular.eot?#iefix') format('embedded-opentype'), url("GenShinGothic-Regular.woff") format('woff'), url('GenShinGothic-Regular.ttf') format('t
GoogleTagManagerから画面追従バナーをサイトに追加する方法｜and_a
今回はそれの亜種ということでカスタムHTMLを利用して「PCとSPで画像の切り替えが行われる画面追従バナー」をサイトに設置してみたいと思います。 期間限定でのキャンペーンページへの誘導などに利用できるかと思いますので、もしよかったら利用してみてください。 前提条件 ・サイトにGTMが設置されていて、稼働していること ・GTMの編集権限を持っていること カスタムHTMLについて 以下が今回のカスタムHTMLとなります。 前回と同様、以下のコードをWebサイトに合わせて調整を行なった後、追従バナーを出したいページでカスタムHTMLを発火させる形となります。 <script> !function(html){ var imageURL = 'https://placehold.jp/200x100.png', spImageURL = 'https://placehold.jp/300x50.p
ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方
今回お届けするのは、「localStorage（ローカルストレージ）」について。 HTML5から導入されたAPI、Web Storageの一種で、その仕組みはcookieによく似ています。 Web Storageと一体どのような違いがあるのか、今回はその概要と使い方を見ていきましょう。 ブラウザにデータを保有してどうするの？ cookieもWeb Storageもクライアント側（ブラウザ）にデータを保有する機能ですが、なぜそのような仕組みが登場したのでしょうか？ その答えは、HTTPが「ステートレスな（=状態をもたない）プロトコル」であることに関連しています。少しだけおさらいしてみましょう。 HTTP通信は「リクエストを投げる→レスポンスを返す」の一往復のやりとりで完結します。 全通信のひとつひとつが全く別のリクエストとして扱われるため、例えば再訪問かどうかを判断することは不可能で、同じク
JavaScript var/let/constによる変数宣言 - Qiita
プログラム未経験の知人にJavaScriptを教えていた所、「varとletとconst、何が違くて、どう使い分ければいいのかわからない」と言われ、私なりにもう一度深く調べたので、上記についてまとめます。 var(変数) 再宣言・再代入が可能で、古いブラウザでも動く(ES5以下でも動く)。 スコープは関数スコープで、以下のようなコードが書ける。 function (){ var x = 0; console.log(x); //0が出力 var x = 1; console.log(x); //1 x = 2; console.log(x); //2 if (true){ console.log(x); //2 x = 3; var y = "a"; } console.log(x); //3 console.log(y); //a } function (){ console.log(x
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
アラビア数字→漢数字変換(桁付き)する JavaScript
フォームに入力されたアラビア数字に適切な桁を付与して表示する JavaScript を組んで欲しいと依頼されたので作りました。 ついでなので桁付きの漢数字変換も実装しておきました。作りましたと言うよりは一部移植しましたって言う方が正確です。まずもってロジックを考えるのが面倒だと思いました。と同時に思い出しました。(☆ε☆ ) 幸い Perl には Lingua::JA::Numbers なんてすばらしいモジュールがあったりします。 Lingua::JA::Numbers - Converts numeric values into their Japanese string equivalents and vice versa まずはサンプルです。金額を半角数字で入力して、適切に桁を挿入する用途です。 アラビア数字に対して４桁毎に桁文字（億とか万とか）を挿入入力 出力 アラビア数字→漢数字
外部サイトのRSSを取得する - 第3章 応用・JavaScript関連技術 - [SMART]
RSS（RDF Site Summary）概要 RSSは、ニュースやブログサイトなどのヘッドライン情報（タイトルや要約）を効率的に配信するために開発された文書フォーマットです。ドキュメントの見出しやリンクなどのリストを共通の書式で記述するために特化されているので、サイトの目次や更新情報などを効率的に配信することができます。既にニュースやウェブログのヘッドライン配信で多く利用され、標準的配信方法としての地位を確立しています。RSSは書式の規格なので、扱うコンテンツは何でもよく、個人的なブログやレビューなどもなんの問題もなくRSSとして扱えます。 RSSの活用方法 RSSはXMLで記述します。例えば、WordPressが自動出力するブログのRSSは下記のようなものになります。 SMARTで配信しているRSSの一部抜粋 <?xml version="1.0" encoding="UTF-8"?>
![外部サイトのRSSを取得する - 第3章 応用・JavaScript関連技術 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
ブラウザ側で日時指定で表示・非表示を切り替えるスクリプト - Qiita
某所より要望があったので作りました。 ソースと使い方 ソースです。jQueryは別途用意してください。 $(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowD
【JS】google feed APIを代替する方法 | Mobile First Marketing Labo
google feed API遂に廃止か？！ サポート部の山本です。 先週大きなニュースがありました。 google feed APIが動かなくなっているということです。。。 正確には、廃止したのかはわかりませんが以前にも一旦廃止され、その後復旧するということがありました。 復旧するかもしれないという可能性に懸けるのも一つですが この際別の方法で実装するのが良いかと思います。 ということで今回は代替方法をご案内します！ HTMLとJSを使い実装していきます。 コピペしていただくだけで、ブログなどのフィードを表示させられます。 wordpressのアイキャッチに設定している画像も出せます。 以下実装方法をご案内します。 表示させる条件として、サイトとブログなどのドメインが同じであることと Wordpressをお使いいただいていることがございますので、ご注意ください。 別のドメインや複数表示さ
WordPress のステータスと公開状態の違い
WordPress® の各記事（投稿や固定ページ。以降、単に「ページ」と記載）には、ステータスと公開状態の二つの属性があります。 これらの設定値（及びその日本語訳）がわかりづらいため、ここに整理します。 WordPress の投稿や固定ページには、ステータスと公開状態の二つの属性があり、用語として似ているためわかりづらくなってしまっています。 公開状態 英語では Visibility （ビジビリティ） となっており、「ページの可視性」あるいは「保護状態」を表す項目です。 tune 公開 （特別な保護なく）誰でも閲覧可能なページです。 tune パスワード保護 パスワードで保護されているページです。パスワードの入力欄が表示されたページまでは誰でも閲覧可能ですが、本文やコメントの内容はパスワードを正しく入力したユーザーにしか表示されません（例え管理者であってもパスワードの入力なしに閲覧すること
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
JavaScript : 日本語入力時のキーイベント
日本語入力時に発生するキーイベントのテスト 下のテキストボックスに文字を入力すると、右側に発生したキーイベントが表示されます。 ブラウザごとの挙動をまとめたブログ記事は → コチラ。 ユーザエージェント = - キャプチャをクリアする
日付から年齢を自動計算 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
日付から年齢を自動計算する方法をご紹介します。 ※ 古いブラウザに対応する書き方をしています。 デモ JavaScript var formObj = ''; /** * 数値のゼロ埋め（桁を揃える） * @param {number|string} number 対象の数字 * @param {number} digit 桁数 * @return {string} ゼロが埋められた数字を返す */ var zeroPadding = function(number, digit) { var numberLength = String(number).length; if (digit > numberLength) { return (new Array((digit - numberLength) + 1).join(0)) + number; } else { return num
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 - ウェブ企画ラボ
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 「使いやすいサイト」に必要不可欠なのがお問い合わせフォームの使いやすさじゃないかと思います。そこで今回は、お問い合わせフォームを使いやすくする為のカスタマイズを色々試してみました。 お問い合わせフォーム関連のjsは色々あるのですが、今回は導入してみて個人的に使いやすいなと思ったものを厳選して4つご紹介いたします。全てDEMO付きですので是非チェックしてみてくださいね。それではどうぞ！ 1.間違いがあったらアラートを出してくれる！：validetta.js わりと基本的な機能ですが、外せないのがこれ。入力フォームに間違いがあった場合、送信時にアラートを出してどこがどう間違ってくれるかを教えてくれます。 この「validetta.js」は、必須項目や数字、○文字以上、○文字以下など設定で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Emergence.js
今どきのスムーズスクロール(2019年版) - to-R Media
