JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー
YouTube Player API・・。簡単にプレイヤーの設定が可能で、カスタマイズもしやすく本当便利ですよね。 今回は、そんなYouTube APIとスライダー・カルーセルUIを絡めたスニペットです。 是非、最後まで …
JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示
今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。 比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。 目次.indexOf() …
JavaScriptの.prependでページ遷移時に丸い背景が縮小していくオーバーレイを表示
ページ遷移時に、フルスクリーンで出すオーバーレイを少し丸くしてみます。 丸くするだけで、比較的大人しく、親しみやすい雰囲気を出すには向いている印象になります。 今回は、ページ遷移時に丸い背景が縮小していくオーバーレイを表 …
JavaScriptの.addEventListenerのanimationendでアニメーションさせながら画像を時間差で表示
CSSの記述だけでも、いろんな表現やアニメーションもできるようになりました。 そんなCSSで使う animation プロパティに、JavaScriptの .addEventListener の animationend …
JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示
複雑な定量のデータは、チャートやグラフを使えば視覚的に分かりやすく直観的に理解できますよね。 そんな時に便利なのは、JavaScriptのライブラリ「Chart.js」です。 かなりメジャーなライブラリなので、既にご存知 …
JavaScriptのdataTransfer.setData()で要素をドラッグして順番の並び替え
今やパソコンを使う時に当たり前の操作となっている「ドラッグしてファイルをフォルダに入れる」のような、ドラッグ操作で並び替えが可能なUIをネイティブなJavaScriptで作ってみます。 是非、最後までご覧いただけると嬉し …
JavaScriptのopenBDでISBNから検索をして書籍の情報を表示
やや思いつきに近いですが、Qiitaの記事にあるopenBDのjQueryのコードを、ネイティブなJavaScriptに置換してみます。 関連するopenBDについてもご紹介していくので、是非最後までご覧いただけると嬉し …
JavaScriptのGrid.jsでテーブルにソートや検索機能を追加
テーブル（表組み）を使い、複数の情報を一覧で表示することで、データを見やすく・かつ効率よく比較することができます。ですが、そんなテーブルを、イケてないUIで作ってしまうと、逆に見づらく・なんかダサい感じになりやすくもあり …
JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生
スマホでは「マウスオーバー」の概念がないので、複数のYouTube動画が並び再生ボタンタップで再生される普通のものになります。 是非、最後までご覧いただけると嬉しいです。 目次YouTube Player APIマウスオ …
JavaScriptの.childrenで指定要素の子要素にclass名を一括付与
要素が階層になっている「親要素・子要素・孫要素」で、JavaScriptを使って子要素に一括でclass名を付与します。 こんな時、.children プロパティが便利です。 是非、最後までご覧いただけたら嬉しいです。 …
