JavaScript

1/2ページ

slider.jsでサムネ付きスライダーを作る

今回は、slider.jsでECサイトなどでよく見かける小さい画像をクリックしたら、大きな画像が表示され、さらに大きい画像をクリックするとポップアップで画像が表示される機能を実装したいと思います。 サムネ生成 sliderには、customPagingというオプションがあり$(slider.$slides[i])で各スライダーのjqueryオブジェクトを取得できるようです。 [crayon-5ba […]

jsでpull to refreshを実装する

Twitterなどで採用されているスマホを下に引っ張ったときに更新する機能「pull to refresh」をjsを使って実装する方法です。 let _startY; const inbox = document.querySelector(‘#inbox’); [crayon-5ba818d76f504608337065/] 実装方法は、いたって簡単です。 まず、タッチ開 […]

Win10でiOS Safariのconsoleを確認する方法

Win10でiOS safariのconsoleを確認する方法です。 先日、ローカル環境で構築したサイトのService Workerが上手く動かった問題もiOSのconsoleのログをこの方法で確認することができたので原因究明することができました。 PCで発生せず、スマホやiOS端末のみで発生するバグなどの解決に際にsafariのconsoleを確認できることはかなり早く問題を解決へ導いてくれる […]

動きの参考サイト

どうも中野です。 今日は動きの参考サイトを紹介したいと思います。 このサイトのココが良い!ってよくあると思うのですが、そうではなく、一覧で見やすくまとめてくれているサイトを今回は紹介したいと思います。 1.Photoshopvip http://photoshopvip.net/88174 ブログをよく参考にさせてもらっているのですが、その記事の中に「ホバーエフェクト」の記事がとても見やすかったの […]

ajax関数 HTTPステータスコード チートシート

jQueryのajax関数のHTTPステータスコード チートシートです。 ajax関数は、HTTPステータスコード200~299,304でsuccess。 それ以外はerrorになります。 HTTPステータスコードの意味はWikipediaを参考にしています。 HTTPステータスコード 意味   ajax 100 継続 error 101 プロトコル切替え error 102 処理中 e […]

Github風芝生をブログに設置する

今回は、cal-heatmap.jsを使って、Githubのプロフィールページにある芝生(contributions)を実装してみたいと思います。 使い方 今回は、CDNを使って必要ライブラリを読み込みます。 html [crayon-5ba818d77147a265918626/] [crayon-5ba818d771485964924318/] [crayon-5ba818d77148b264 […]

jsでQRコードを読み取り、簡易出席管理システムを作る

今回は、WEBカメラを使ってQRコードを読み込み、その結果を利用して簡易出席管理システムを作成したいと思います。 1. QRコードを生成する まず初めに、カメラで読み込むためのQRコードを作成していきます。Google Chart APIなどのAPIを活用するもの手ですが、今回は、jsでQRコードの生成を行います。 使用ライブラリ jquery.qrcode.js 使用方法 HTML [crayo […]

Gmail APIでメールを取得する

下準備 Google Developpers Consoleでプロジェクトを作成を行ってください。 メールの取得 メールの取得は一度、メール一覧を取得して、個別IDを取得します。その後、そのIDを用いて、メールの本文や件名を取得していきます。 [crayon-5ba818d7765ee256288473/] [crayon-5ba818d7765fe767374845/] メールの絞り込み メール […]