Googleトレンドに見る2016年人気のCSS・JavaScript・タスクランナー - Qiita
(2016/05/23 追記) 記事内で取り扱っている技術で、はてぶコメント等で質問の多かった「webpack」についての解説記事を書きました。 最新版で学ぶwebpack入門 – JS開発のモジュールバンドラ - ICS MEDIA Web技術はよく技術の進化が早いと言われます。多くの技術が現れては消える中で、どの技術を学ぶべきかを選択するのは重要です。選択するポイントの1つに「技術の将来性・人気があるかどうか？」があります。今回は基本的なフロントエンド技術である「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」の3つについて、それぞれの人気をGoogleトレンドで調べてみました。 CSSコーディングの流行り CSSは、SassやLESSに代表される「CSSプリプロセッサー」を使ってプログラミングすることで、品質と効率を大きく向上させることが可能
Windowオブジェクト | JavaScript プログラミング解説
Windowオブジェクトは、JavaScriptコードが動作しているWebブラウザのウィンドウまたはフレームを表します。 クライアントサイドJavaScript オブジェクト Webブラウザで実行されるJavaScriptは、クライアントサイドJavaScriptと呼ばれます。 Windowオブジェクト … ドキュメントを表示するウィンドウ Documentオブジェクト … HTMLドキュメント グローバル変数 (global variable) クライアントサイドJavaScriptでは、Windowオブジェクトはグローバル オブジェクトです。そしてすべてのグローバル変数は、Windowオブジェクトのプロパティとなります。 つまり、 var a = 0; とグローバル変数を定義することと、 window.a = 0; とすることは同義です。 メソッド print window.print
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ - JavaScript TIPSふぁくとりー
《2018年2月9日 2:30 PM 公開/更新》 ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ [イベント] JavaScriptを使って、ウェブページの読み込み完了と同時に何らかの処理をしたい場合など、ページの読込動作とタイミングを合わせて処理を実行したいことがあります。このとき、「ページの読み込み前」・「HTMLの読み込み直後」・「ページの読み込み完了後」など実行タイミングは複数あり、それぞれでJavaScriptの書き方はいくつかあります。それらの記述方法を解説してみます。 ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ 3(完了後): ウェブ上のあらゆるオブジェクトの読み込みがすべて完了した後で処理をする方法 (A) HTMLでbody要素に「onload」属性を指定することで、読み込み完了時に処理をする方法 (B) JavaScript
DOMContentLoaded周りの処理を詳しく調べてみました - Qiita
利用者が一定数いるIE6,7,8を除いて、現在利用されているほぼ全てのブラウザで標準仕様として扱えるようになっています。2006年ごろから登場したjQueryの$(document).readyは有名ですが、この存在もDOMContentLoadedが正式に取り入れられるきっかけの1つになっています。 2. jQueryのreadyとの違い HTML5で定義されているDOMContentLoadedとjQueryの$(document).readyは、DOMツリーの構築が完了したことを判定するという点で役割は一緒といえます。ただ、jQueryは古いバージョンのブラウザをサポートするためにDOMContentLoadedを使わないready判定の実装を行っていました。 1. jQuery Core 1.0のready判定（1.0から1.2.1まで） jQyer Core 1.0を見るとIE/
jQueryでクリックイベントで処理を実行する：on(), click()
ある要素をクリックしたらある処理を実行するというのは、JavaScriptでは定番のコーディングです。 jQueryを使わずに、以下のようにonclickを使い記述することもありますが、最近ではHTMLとJavascriptが混在しているのはあまり良いコーディングとはされていません。 「デザイン(CSS)と構造(HTML)は分離させること」はJavaScriptも同じです。
JavaScript実行済みのDOMをHTMLファイルとして保存するブックマークレット - 無駄と文化
この記事の公開後に noromanba 様から「DOMのテキスト変換はXMLSerializerを使えば一撃でいけるよ！」的なご指摘を頂いたので追記しました。 本当にありがとうございます。 スクレイピングネタです。 クローリング+スクレイピングするにあたってパスワード認証の掛かったページから情報を取得するのはなかなかに厄介な課題ですよね。 スクレイピングのフレームワークによっては認証のための機能が備わっていたりしますが、それが無い場合には自分でHTTPのレスポンスをフックしてCookie食わせたりなんだりともう大変。 しかも、100ページ超のページを対象にスクレイピングしたいならばいざ知らず、5, 6ページとかそこいらのページから情報取りたいだけで、パスワード認証のための下準備をするなんて発狂しそうになりませんか？ そんなときに新しいソリューション、パスワード認証の突破はあなたの手とあなた
【CSS/JS】ファイルを圧縮する三大手法 - Qiita
自分の使い方 自分はフロントは個人の趣味で開発することが多いので、「2. Sublime Text使っているならならコレ」で紹介しているように、Sublime Text 3に、有名なYUI Compressorをいれて圧縮しちゃっています。 ただし、中規模以上の開発であったり、中長期的な開発であれば、個人の場合でもGruntを使用するので、「自動でやりたいならコレ」で紹介している手法を用います。ただし、Gruntは結構自分のPCのマシンパワーでフルに使うと重かったりするので、公開するプラグインを作成している場合や、ブログといった場合などには使いますが、チュートリアルや、ちょろっとしたティザーサイトなどはYUI Compressorで済ませちゃっています。 1. オンラインならコレ Online JavaScript/CSS Compressor ブックマークにしておいて損はないと思います。
document.evaluate でXPATH する具体的サンプル - それマグで！
javascript でノードを拾うのCSSセレクタ(document.querySelector/querySelectorAll)だけなく、Xpathも使いたいよねってこと。DOM Level3も使えるし。 jQueryは使われすぎてバージョンHellで・・・ DOM の Evaluete/Xpath は今後はどうなるかわからないけど使えなくなるってのはなさそうだし 具体的サンプルの前に。 ブラウザでXpathを手軽に実行できる、document.evaluate 関数ですが、理屈が分からないと使いにくいので、document.xpathを紹介します。 document.evaluate でXPATH 実際にノードを探して使うサンプル document.evaluate('//input[@value="削除"]',document,null,XPathResult.ANY_TYPE,
確認ダイアログ／入力ダイアログ／アラート（警告）表示｜Windowオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
windowオブジェクトのconfirmメソッドは、OKボタン、キャンセルボタンの付いた確認ダイアログを表示します。 ダイアログが表示されている間は、ブラウザを操作できません。 OKボタンがクリックされた場合にTRUEを返します。 キャンセルボタンまたはブラウザの［×］ボタンがクリックされた場合にFALSEを返します。 メッセージ内で改行するには、\n（2行分改行するなら\n\n）、タブを入れるには\tを挿入します。 オブジェクト名 windows 省略可。 サンプルを見る <script> /** * 確認ダイアログの返り値によりフォーム送信 */ function submitChk () { /* 確認ダイアログ表示 */ var flag = confirm ( "送信してもよろしいですか？\n\n送信したくない場合は[キャンセル]ボタンを押して下さい"); /* send_flg
[Chrome Extensions（機能拡張）開発] localStorageを使って異なるスコープ間でデータのやり取りを行う方法
Chrome Extensions（機能拡張）の開発でちょっとハマった部分です。あるWebサイト上のデータを取得して、それをlocalStorageに保存して、それをChrome Extensions上で取得して利用しようと思ったのですが、localStorageの仕様上別のスコープとなりそれが無理だということがわかりました。調べてみると、Chrome ExtensionsのAPIを使ってbackground.js上でlocalStorageを使うことで解決できることがわかりました。今回は、その辺りのことをまとめておきます。 localStorageとはまず最初にlocalStorageについて説明します。すでにlocalStoregaについて把握されている方は読み飛ばしてください。 ブラウザは、Web Storageというクライアントサイドのストレージ（記憶装置）を持っています。loca
![[Chrome Extensions（機能拡張）開発] localStorageを使って異なるスコープ間でデータのやり取りを行う方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/b659588c6f4b76f66003b5ff2447138aa4c0489b/height=288;version=1;width=512/https%3A%2F%2Fmae.chab.in%2Fwp-content%2Fuploads%2F2016%2F03%2Fchrome.png)
DOM ElementからのXPath取得関数を作ってみた - Qiita
Firebugの"XPathをコピー"と互換性があります。 いわゆるこれ↓ 要素を右クリックして、"XPathをコピー"した場合と同じ文字列を取得できます。 実装 /** * エレメントノードからxpathを構築します。 * * @param Node element_node xpath構築元のelement node * @returns element nodeまでのxpath */ function getXpathByElementNode (element_node) { var NODE_TYPE_ELEMENT_NODE = 1; if (element_node instanceof Array) { element_node = element_node[0]; } if (element_node.nodeType != NODE_TYPE_ELEMENT_NODE)
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
Greasemonkeyで永続的に外部スクリプトを利用する - 技術メモ帳
GM_setValue / GM_getValue + unsafeWindow.eval を使って 永続的に外部スクリプトを利用する方法を考えてみた。 わざわざ DOM で script要素 を毎回注入するよりも 速いんじゃないかと思う。 Greasemonkeyには、GM_setValue / GM_getValue というのがあって、 GM_setValue("キー", "値") 上記のように入力してあげる事によって、たとえ、 Firefoxを終了させたとしても消えないデータを作成する事が出来る。 そして、それを利用して、 初回のみ XmlHttpRequest で外部スクリプトデータを取得して、 GM_setValue でスクリプトデータを永続化しておき、 二回目以降は、それを GM_getValue して eval するようにした。 以下は、永続的に prototype.js を
Latest topics > 拡張機能におけるeval()の5つの間違った使い方 - outsider reflex
Latest topics > 拡張機能におけるeval()の5つの間違った使い方 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Firefox 3.5 + Glasser + Aeroの環境でやっておきたい設定 for Glasser 3.5 Main 仏陀再誕 The REBIRTH of BUDDHA » 拡張機能におけるeval()の5つの間違った使い方 - Nov 28, 2009 以下、Adblock Plus and (a little) more: Five wrong reasons to use eval() in an extensionのいいかげんな訳です。XUL/Migemoのバージョンアップ時のエディタによるレビュー
少しだけjQueryらしくなるようにGreasemonkeyスクリプトを改造してみた - Bouldering & Com.
cookie内にマイリスト登録するGMスクリプトの修正 - Bouldering & Com.に更新版あり ニコニコ動画でcookieにマイリスト登録するGreasemonkeyスクリプト - Bouldering & Com.で書いた、cookie内にマイリスト登録するGMスクリプトをちょっとだけjQueryぽく替えてみた。 けど、今回の変更加えたら、urchin.jsがexception起こすようになったのと、あいかわらず微妙な実装なので使わないほうがいいと思う。 http://www.ne.jp/asahi/shrkw/shrkw/add_in-cookie_my-list.user.js 適用させると、こんな感じになる。 変更点のソース *************** *** 85,100 **** if (parsed_cookie.length == 0) { return;
Node.jsを手軽に試せるJavaScript統合開発環境「Cloud9 IDE」、クラウドでの提供開始
Node.jsを手軽に試せるJavaScript統合開発環境「Cloud9 IDE」、クラウドでの提供開始 オープンソースとして開発されているJavaScript統合開発環境の「Cloud9 IDE」が、クラウド上のサービスとして提供開始されました。Cloud9 IDEサービスを立ち上げたのは、Cloud9 IDEの開発元でもあるAjax.org。 Cloud9 IDEは、Node.jsが動作するサーバの上にWebアプリケーションとして実装された、Node.js対応のサーバサイドJavaScriptのための統合開発環境です。Node.js上に実装されたということはつまり、Cloud9 IDE自身もJavaScriptで記述されています。 Node.jsを試してみたいけれど、自分でインストールしたり環境を構築するのは面倒、という人にちょうどいいのではないでしょうか。 Cloud9 IDEサー
Mozilla Developer Center
オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。 ウェブ開発者ガイド ウェブ開発者ガイドは、ウェブ技術を実際に使用して、やりたいことや必要なことを実現するために役立つハウツーコンテンツを提供しています。 ウェブ開発者向けチュートリアル HTML、CSS、JavaScript、Web API の学習を段階的に進めるためのチュートリアルです。 アクセシビリティ ウェブサイトを使用する人に何らかの制約があっても、できるだけ多くの人が使用できるようにすることです。 パフォーマンス コンテンツをできるだけ早く利用できるように、操作できるようにすることです。 セキュリティ データ漏洩やデータ盗難、サイドチャンネル攻撃、クロスサイトスクリプティング、コンテンツインジェク
ECMAScript 2016の言語仕様をECMA Internationalが承認。正式版として公開
ECMAScript 2016の言語仕様をECMA Internationalが承認。正式版として公開 ECMA Internationalは、いわゆるJavaScriptの最新の言語仕様となる「ECMAScript 2016」（ECMA-262 7th Edition）を、6月14日に行われた第111回総会（The 111th General Assembly）で承認、仕様を発表しました。 JavaScriptは1995年に最初のバージョンがNetscape Navigator 2.0で実装され、1997年にはECMA Internationalによる最初の標準化仕様となるECMAScript 1st Editionが登場。1998年にECMAScript 2nd Edition、1999年に3rd Editionとバージョンアップを重ねてきましたが、4th Editionの標準化に失敗
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FormMemorize フォームの値を記憶するGreasemonkeyスクリプト - 実験と娯楽
2017年にReact、Angular、Vueから期待されること