きっかけ 最近、GDPR（EU一般データ保護規則）と騒がれ日本語のサイトでも見かけるクッキーの同意文。 わざわざそのためにレイアウト作るのが面倒な方に、テンプレート埋めればCookieの同意文が書けるJavaScript。 完成形 See the Pen CookieContept by haikyoiko (@haikyoiko) on CodePen. 上記を完成させるのは、スリーステップで必要な記述が完成。 ステップ１：以下のURLを開く ステップ２：Configureで必要な設定を埋める 以下の画面よりボタンの配置、レイアウト、配色、LearnMoreの遷移先などを設定 ステップ３：CopyCodeを選択 ラスト：自身のサイトに埋め込めば完成！（ の前に置く） ※ 他にも以下にいろいろサンプルがある 注意 上記の対応はただのCookieの同意文のみを表示させている。 本格的にCoo
![[GDPR] 海外サイトによくあるCookieの同意文を表示させるJavaScript - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a057d57fe0170dad4cd91eba62f9b459d305e8fa/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCR0RQUiU1RCUyMCVFNiVCNSVCNyVFNSVBNCU5NiVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MyU4OCVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MSU4RiVFMyU4MSU4MiVFMyU4MiU4QkNvb2tpZSVFMyU4MSVBRSVFNSU5MCU4QyVFNiU4NCU4RiVFNiU5NiU4NyVFMyU4MiU5MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5NSVFMyU4MSU5QiVFMyU4MiU4QkphdmFTY3JpcHQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQ1ZThiODczOGUzYWI0NzU2MTVhNmZjNmExMDExODJl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGFydXRvMTY3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYzg3Y2RiM2E5Y2RlN2YyYWUxYzM4YTNlYTk2ZGZkNw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D32b4243f5f7439244a15d5fdd3a7a758)
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
アニメーションは、もはやホームページを作る上で必須の要素と言えます。 単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。 一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。 今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。 10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。 ぜひ使いやすいライブラリを見つけてみてください。 ホームページにアニメーションを実装するライブラリ＆プラグイン12選 1. Animate.css https://daneden.github
ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。
![[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/73c5f616116e59d40f567ed5c484ab9ef70b0605/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017052401-01.png)
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
今回は、画面幅いっぱいのダイナミックなスライド表示が出来る、コンテンツスライダーの使い方のご紹介です。 利用するスライダーなんですが、作者様が日本人の方などで、ご自身のサイトでも詳しく説明もしてありますし、サンプルファイルのダウンロードも下記リンク先より出来ます。 こちらのスライダーは、レスポンシブ対応・スピード調整・自動スライド・フリックオプション設定も可能です。 また、デフォルトではページネーションは、CSSで装飾されていますが、カスタマイズすれば、サムネイル表示も可能です。 その辺の、カスタマイズ方法も今回は、ご紹介したいと思います。 実際にFullWide Sliderを実装したデモサイトもご用意しましたので、ご参考頂ければと思います。 デモサイト 実際にデモサイトで使用した感想ですが、シンプルで使いやすいなーという印象を受けました。 HTML・CSS側でも複雑なコードを記述する必
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
とても便利な wp_enqueue_script WordPressにはjQueryがインストールされています。 また、jQueryプラグインや自作スクリプトなどを使う際には、wp_enqueue_scriptを上手に使 … 続きを読む »
このサイトのテーマはtwentyfourteenの子テーマなのですっかり普通にJQueryが使えるような気がしてしまっていました。普通に、というのは $( とかの書き方でなのですが… 自作のPluginにDatepickerを使いたくて試していたら、普通にJQueryを動かすまでちょっと手間がかかったので書いてみます。 WordPressにはJQueryが既に読み込まれている ググって調べると ・WordPressにはJQueryが既に読み込まれている ・だけど、それを使わずにgoogleのJQueryを使った方がいい という記事が多数見つかりました。なぜ？と思ったのでちょっと実験してみました。 なにもしなくてもJQueryが動くかどうか 使っている子テーマの header.php を開いて <?php wp_head(); ?> の後に、 <script type="text/javas
jquerymobile(ジェイクエリモバイル)を利用している場合は、ページ内リンク（ページ内ジャンプ、ページ内アンカー）が効かないようです。 jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、 ページ内アンカーするときには「＃」が無効化されてしまうようです。 みなさんがいろいろ対応するためのjavaスクリプトを作成してくれているんですが、複数のページ内リンクにも対応しているスクリプトがこちらでした。 １、リンクにイベント用のクラス名をつける リンク用のaタグに、class=”anchor”という名前をつけました。 名前付け用のaタグはいつも通りnameやidに名前をつけます。 <a href="#aaa" class="anchor">アンカー１</a>｜ <a href="#bbb"
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
個人的にjQueryプラグインを探す 時に結構時間が掛かっている のでどうにかしたいと思っていま したが、なかなか素敵なサイトが ありましたのでシェア。プラグイン のデモをサムネイルでギャラリー 形式にして紹介しています。 デモから探せるので、Webデザイナーさんには重宝されそう。量もなかなか揃っているのでここから探す癖を付けようかと思うくらいです。どこかで見たけどブクマし忘れた、なんてときに見るのもいいかもしれませんね。 こんな感じでデモのキャプチャがズラッと表示されていますよ。上と下は広告です。 個別ページにはデモとソース、DLのリンクが用意されています。 カテゴリもメニューやギャラリー、チュートリアルなどが用意されていますよ。 タグクラウドでより絞り込める。 APIの確認も出来る。 情報量も300ほどあるのでなかなか重宝しそうです。今後益々増えてくれると嬉しいですね。久々にRSS登録
Webページ上にある小さな画像（サムネイルなど）をクリックすると、画像が拡大表示される — Ajaxを使った、そんなUI（ユーザーインターフェース）をご覧になったことがある人は多いと思います。たとえば、以下のような感じです（eコマースサイトの例）。 【ページ1】商品一覧の中から、興味のある商品を選びます。 【ページ2】上記で選んだ商品について、拡大してみたい画像を選びます。 【ページ2'】拡大画像が表示されます。 なお、このページを【ページ3】ではなく【ページ2'】と記しているのは、上記【ページ2】からページが切り替わっていないから（URLが同じだから）です。 潜んでいる問題点 Ajaxを使うと、上記のようにクールに（かっこよく）画像を拡大することができるので、自分のWebサイト（ホームページ）でも採り入れようと考えているウェブマスターの方も多いことでしょう。ただしこのAjaxによる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
