すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
『JavaScript でキーボード入力を代行させる / JavaScript』
キーボード入力をスクリプトに代行させる ブラウザ上で実行されるアプリ（アメブロの編集画面や管理画面等）に対して、「キー入力した」と同等の事を代行させることが JavaScriptでは可能です。 スクリプトのプログラムは、ユーザーのブラウザ上の殆どの操作を、代行する事が可能と思われます。 悪用すれば危険な仕様と誰も想像出来ますが、実際にその様です。 しかし、ネットに多くの情報がありますが、半分以上の情報は「使えない」という壁に当たりました。 そこには、旧いIEの仕様の問題や、Firefox Chrome等と仕様が異なる問題、ハードウエアに関連する問題など、JavaScriptのコードが統一出来ず現在に至った背景がある様です。 この問題と、私のコードの扱いの不慣れが重なり、なかなか実際にキー入力が実現せずに苦労しました。 ここでは、「Chrome」と「Tampermonkey」の環境で、入力を
Dialog - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
解説 高機能なダイアログウィジェットです。 dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。 デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。 コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。 書式 依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.position.js jquery.ui.draggable.jsオプション jquery.ui.resizable.jsオプション 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
ブラウザだけで Excel 向け日本語 CSV ファイルを作る方法 - do_aki's log
※ ただし IE を除く ブラウザで表示しているデータをCSV ファイルにしてダウンロードしたかったので調べてみると File API の Blob + createObjectURL でさくっとできるっぽい。 *1 だけど、日本語が utf8 になってしまう。 そのまま Excel で開くと文字化けてしまうので、どうしたもんかと悩んでいたら、 BOM をつければ 中身が utf8 でも開けるという情報を得たのでBOM 付きでダウンロードできるようにしてみました。というお話。 実際のHTMLは https://dl.dropbox.com/u/12062013/excel_csv/download.html で試せます。 (1) BOM の用意 数値のArray ([0xEF, 0xBB, 0xBF]) をそのまま Blob に渡すと数字文字列に変換 ("239,187,191")されて出
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
[ASP.NET][C#][JavaScript] 特定のファイルをブラウザにキャッシュさせなくしたい
js や css ファイルを修正して, ブラウザで試すときに, ブラウザにキャッシュされてしまっており修正が反映されないことがままあります. 私はこれでハマりました. それで, そのファイルだけキャッシュさせなくしたい. そのための方法を, C#(ASP.NET)版と 生のhtmlに JavaScript を埋め込む版 の2つ描きました. C#(ASP.NET)版 これを <!-- 修正中のjsファイル --> <script src="/scripts/test.js"></script> こうじゃ! <!-- 修正中のjsファイル --> <script src="/scripts/test.js?timestamp=@DateTime.Now.Ticks.ToString()"></script> こうするとhtmlでは <script src="/scripts/test.js?t
![[ASP.NET][C#][JavaScript] 特定のファイルをブラウザにキャッシュさせなくしたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/abdd56b3ab2666b0122ca49c0399014ffe842d98/height=288;version=1;width=512/https%3A%2F%2Fchomado.com%2Fwp-content%2Fuploads%2F2016%2F01%2Fcropped-aSdLGr6h_400x400.jpeg)
静的サイトで JS/CSS のキャッシュを防ぎつつレポジトリをキレイに保つ
「ABOUT」のページをリニューアルしました。 １つ前のデザインのままだったものを、現在のデザインに沿って作りなおして、ついでに文章やレイアウトなども整えました。 公開したものの問題発生 意気揚々と公開してみたのですが、１つ問題が見つかりました。 ページを公開したあと、本番環境を表示するとデザインが崩れていました。そのあと、ページをリロードすると期待通りの結果になりました。 原因は CSS がキャッシュされていた ことでした。 たとえページが更新されていたとしても、JavaScript や CSS は古いキャッシュを使い続けてしまうことがあります。 で、この問題に対処しようとしたのですが、「静的生成」「生成結果を GitHub で管理」「キャッシュ問題への対策」の 3 つのいいとこ取りをしようとすると、意外に複雑でした。 その話をいまからします。 キャッシュ問題の一般的な解決策 よく見る解
Ajaxで通信を強制停止させる方法 | システムエンジニアの戯言
Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか？ 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー
動画と音声のコンテンツ - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
ページ離脱防止のためにJavaScriptでアラートを表示する
フォームの入力中に途中で離脱されないようにするには、アラートを出すことが効果的です。 ぼくは途中でよくフォーム入力を諦めることがあるのですが、アラートを出されるとたびたび引き止められて、ページを離脱するのを踏みとどまります。 なので個人的にはこのアラートはすごい力を持っていると思ってます。 ※このページにコードを仕込んであります。リロードしたりブラウザバックで戻ったりしてみてください。 beforeunloadイベントを使う ブラウザの window オブジェクトには onbeforeunload というイベントが用意されています。 このイベントハンドラに関数を設定すればよいのです。 window のリソースの unload 直前に発生するイベントに対応する処理を設定します。 文書が未だ可視状態であり、イベントが未だキャンセル可能 (event.preventDefault) なタイミング
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
正規表現チェッカー PHP: preg_match() / JavaScript: match()
GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:
TM - WebTools
html5shiv - Project Hosting on Google Code
JavaScript の Date は罠が多すぎる - Qiita
