JavaScript

1/2ページ

Bootstrap4製のマテリアルデザインのダッシュボード

Material Dashboardは、MITライセンスのBootstrap4製マテリアルデザインのダッシュボード用フレームワークです。 Demo サイドメニューやカードデザインが主な機能ですが、一覧画面や詳細画面なども作成可能です。 もちろん、Bootstrapベースなので、Bootstrapを使った構築も可能です。 管理画面などにおしゃれなサイドメニューを使えるだけで激アドだと思いました。 使 […]

select2を画面サイズ変更に対応させる

Select2は、セレクトボックスで沢山の項目を表示するときにかなり便利にしてくれるライブラリで好きなのですが… 生成されたフォームが最初に読み込んだ時の幅で固定されてしまいます。 CSSでwidth: 100% !important;と指定してもいいんですが、これだと長めの項目が入ってきたときにはみ出してしまったりしてしまうので 画面がリサイズされたときにJSで幅の調整をさせてやらないといけませ […]

JSでスマホのジャイロセンサーを扱う

スマホのジャイロセンサーは、JSで簡単に取得することができます。 対応状況 スマホは、ほぼ対応していますが、iOSはiframe越しに使用できないので、CodePenなどのサイトでは動作しない点に注意が必要です。 ソースコード ジャイロセンサーの変化はdeviceorientationイベントで取得できます。ジャイロセンサーの値を取得後、何かしらイイ感じの処理を設計してあげましょう。 [crayo […]

最小構成のPWA

最小工数でPWAに対応する設定です。 HTML manifest.jsonの読み込み [crayon-5bec6a2c0ed25488640006/] iOSが完全にPWAに対応していないので、iOS用の設定が必要です。 [crayon-5bec6a2c0ed2b663579056/] Service Workerに対応していれば、Service Workerを読み込む設定。 [crayon-5b […]

ポルポテストを作ってみた

ジョジョの奇妙な冒険は見たことなんですけど、Twitterで見かけてアイディアとして面白いと思ったので、自分でもポルポテストを作成してみました。 デモ こちらで動作確認できます。 See the Pen jojo-polpotest by mizusawa (@webty_mizusawa) on CodePen. ポルポテストの主な機能 ポルポテストの主な機能は、以下の4つがあげられます。これら […]

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

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

jsでpull to refreshを実装する

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

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

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

動きの参考サイト

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