JavaScript– tag –
-
LaravelでSSE（Server Sent Events）を利用してサーバから通知する
皆さん、SSE（Server Sent Events）をご存知でしょうか？Node.jsが有名過ぎて隠れてしまっていますが、双方向通信が必要なく、サーバーからクライアントへ一方向通信するなら、SSEの方が断然簡単です！今回はそんなSSEをLaravelに導入したいと思います。 ... -
animate.css＋wow.jsで手軽にかっこいいスクロールエフェクトを！
近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。スクロールする度にコンテンツがアニメーション付きで表示される手法です。しかもそのアニメーションはFlashや動画を使わず、CSSのみで... -
iOSにも対応したService Workerを使ってPWAの基礎を学ぶ
やっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web Apps）に対応しました！簡単に何ができるかと言うと、WEBアプリをオフラインでも動作するネイティブアプリのように振る舞うことができるようになりました。これを利用すると、Appleに開発者の年... -
Web開発者必見！iMacrosでブラウザの操作を自動化する
Web開発者として、避けては通れない試験を如何に早く楽に、そして確実に行うかは永遠の課題です。例えば、会員登録フォームを試験するとしましょう。名前や住所、電話番号やメールアドレスなど、たくさんの入力項目を毎回入力するのはかなりの手間です。か... -
画像を自由にトリミングできるjQueryプラグイン「Cropper」
よくWEBサービスで、プロフィールなどを作成する際にアバター画像をアップロードすることがありますが、親切なサイトだとその場でトリミング（切り抜き）ができることもあります。いつもは利用する側なのですが、今回は作る側として画像を加工できるjQuery... -
JavaScriptで画像アップロード時にサムネイルを表示させる方法
<input type="file">で画像をアップロードする際、特に複数ある場合にサムネイルがないと、正直何をアップロードしようとしているのか確認できません。そこで、JavaScriptとWeb APIのFileReaderオブジェクトを使用して、画像をBase64エンコードして... -
jQueryでHTML要素の存在を確認する5つの方法
jQueryでHTML要素があるかないか存在を判定する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、書き方や処理速度（パフォーマンス）を比較しているサイトをまとめましたので、選定する基準として参考になれ... -
非推奨になったAjaxの同期通信によるブラウザの警告を対策する
Ajaxの同期通信について、かなり前から非推奨になっていることは皆さんご存知だと思いますが、最近古いコードを発見するまで忘れていた、と言うより意識していなかったので、この機会に過去へ振り返って概要と対策を記事にし思います。 【同期・非同期とは... -
Chart.jsで棒グラフの目盛りを変更して上下を逆にする方法
以前紹介した、グラフの描画が簡単にできるチャートライブラリ「Chart.js」で、今回は少し変わった使い方をご紹介します。最終的に何がしたいかというと、棒グラフを表示する際に縦軸の目盛りをカスタマイズして、上下を逆さまにしたいと思います。つまり... -
シンプルで高機能な管理画面テンプレートは「AdminLTE」で決まり！
今回は管理画面のデファクトスタンダードと言えるテンプレート「AdminLTE」を紹介します。AdminLTEとは、jQueryやBootstrapのような管理画面の定番中の定番です。世の中には、これ使っておけば間違いないものって、たくさんありますよね？それが、デファク...