Greasemonkeyでサイト既存CSSの影響を受けないポップアップパネルを作る方法
Greasemonkeyは各サイトでユーザースクリプトを実行できて便利ですが、ある要素を挿入したときにそれがサイトに元々書いてあるCSSの影響を受けてしまうことがあります。 一つのサイトならまだしもhttp*で動くようなものだと対応仕切れないのでiframeを使いサイトに書いてあるCSSの影響を受けないパネルを作る。 iframeの中はそのサイトにあるCSSの影響を受けないので、iframe内にGreasemonkeyで表示したいものを置けば影響を受けないものが作成できる。 makeFrameというのが今回の主題。 makeFrame(gotFrame1); makeFrame(gotFrame2); function gotFrame1(iframe, win, doc) { iframe.height = "350"; iframe.width = "500"; iframe.styl
エンコードマニアックス - 各種エンコードやハッシュを一発作成
SHA-256 e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 SHA-384 38b060a751ac96384cd9327eb1b1e36a21fdb71114be07434c0cc7bf63f6e1da274edebfe76f65fbd51ad2f14898b95b SHA-512 cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e
GreasemonkeyからScriptishへ環境設定を移行する
GreasemonkeyからScriptishへの環境移行メモです。 ScriptishについてはScriptish wiki!やScriptish （Greasemonkey フォーク版） キタ━━━ヽ(ﾟ∀ﾟ)ﾉ━ – hogehoge @teramakoを見るとよいです。 簡単にまとめると、使えるAPIが増えた(開発者的にうれしい)、管理画面の設定項目がGreasemonkeyより豊富(Greasemonkey0.9で削られたinclude,excludeの設定もGUIからできます)、UIが日本語化されてる(ちょっと分かりづらい訳だけど…) Greasemonkeyからフォークしてるので、Greasemonkey向けに書かれたスクリプト自体の互換性は問題ないです。 逆にScriptishの新APIを使ったものはGreasemonkeyでは動かない事があるぐらいだと思います。 環境の移
AutoPagerize Wiki: Home
About This Wiki AutoPagerizeに関するWikiです。ページの追加/編集は、気にせずどんどんしてください。 Documents About SITEINFO (ja) SITEINFOについて how to write siteinfo (ja) SITEINFOの書き方入門 siteinfo introduction (en) SITEINFO introduction in English APIs (ja) APIについて xpath cookbook XPathクックブック siteinfo request 要望リスト Links userscripts.org: http://userscripts.org/scripts/show/8551 source code: http://github.com/swdyh/autopagerize/tree/ma
HTML/CSS/JS製の小さなスライドツール『kyubey』をつくったよ - ✘╹◡╹✘
説明 タイトルはほとんど釣りです。奇跡も魔法もありません。最近よく勉強会をしているという話を前回のエントリで少ししましたが、プレゼンするのにいちいちKeynoteやPowerPointを開いていては骨が折れるし、参加出来なかったメンバーが後からWeb上でスライドを見たいということもあるので、自分でHTMLで手早くスライドを作るためにツールを作りました。jQueryやその他ライブラリが頑張って働いてくれたのでJS部分は実質100行弱のコード量でした。*1 kyubeyはjQueryを利用して作った小さなスライドツールです。作ったばかりなので機能はほとんどありませんが、小さいが故にコードの理解や拡張がしやすいかと思います。Githubに公開しているので良ければお使いください。ちなみに下記サンプルとソースコードを見て頂ければ大体理解出来るかと思います。機能要望があれば今後拡張していくつもりです。
モテるJS系女子力を磨くための4つの心得 - KAYAC Engineers' Blog
1. あえてECMAScript3.0以前の実行環境を使う あえてECMAScript3.0の実行環境を使うようにしましょう。そしてATNDで好みの男がいたらLT参加を告知し、わざとらしく発表準備段階でコンソールを出していじってみましょう。そして「あ～ん！ この実行環境本当にマジでチョームカつくんですけどぉぉお～！」と言って、男に「どうしたの？」と言わせましょう。言わせたらもう大成功。「ECMAScriptとか詳しくなくてぇ～！ ずっとコレ使ってるんですけどぉ～！ Object.keysが使えないんですぅ～！ ぷんぷくり～ん（怒）」と言いましょう。だいたいの男は新しい実行環境を持ちたがる習性があるので、ECMAScript5の実行環境を使っているはずです。 そこで男が「新しい実行環境にしないの？」と言ってくるはず（Object.prototypeの拡張を勧める男はその時点でガン無視OK）。
Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
Webのバグを燃やしまくるFirebugと、そのアドオン7選
Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
第4回 JavaScriptでオブジェクト指向プログラミング ― ＠IT
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
Greasemonkeyスクリプト全体を無名関数で囲う意味 - prog*sig
よくGreasemonkeyスクリプトを見ると全体を無名関数(匿名関数)で囲っているものを見ることがあると思います。 (function(){ // 処理内容 })(); 何でこのような記述をしているかというと、歴史を掘り返すのは面倒なので簡潔に 昔はトップレベルに宣言した変数が外部に影響を出してしまっていた? 今はevalInSandboxで実行されているので無名関数で囲わなくても問題はない。 (この(function(){)()}自体がどういう動作をするかはfunction についてを読むといい) Greasemonkey extension のコードから実行時のスコープを調べる « ku Greasemonkeyの小話 - FFFF - 0x つまり、今は囲まなくても問題はない。(ただしGreasemonkeyに限る) でも、実際のスクリプトでは囲んでいる場合が多いと思うので
JavaScript の無名関数に引数を与える
1. 無名関数は名前がないだけの普通の関数 JavaScript で、最初に 「何だ？この書き方は。」 と思ったのが、無名関数を定義し、すぐにその関数を実行する記述。 無名関数と言えば、 JavaScript ではブロックスコープを実現するために用いられる。 cf. JavaScript のブロックスコープ - Java, Ruby との比較 2. 無名関数の定義 無名関数を定義し、すぐにその関数を呼び出すには、以下のように記述する。 (function(){alert("hoge")})() 無名関数の中で変数を定義すれば、その変数のスコープは関数の中に限定される。そのため、無名関数をブロックと見なすことができる。 上記の無名関数に、引数を与える。 (function(str){alert(str)})("hoge") 引数を二つ与える場合は、 (function(a,b){alert(
ユーザスクリプトを (function(){ ... })(); で囲むことについて - mallowlabsの備忘録
末尾に追記アリ 自分の中では GreaseMoneky や Opera の User JavaScript を書くときに (function(){ // 処理を普通に書く })(); とクロージャで書いてスコープを切ることが常識だと思っていた｡ 野良スクリプトでこういう風に書いてないと「勉強不足なのねー」とか 思っちゃってたわけだけども、よく調べたみたら 自分が勉強不足だったことが判明したのでまとめてみる｡ なぜ必要か（と思っていたか） ユーザスクリプト内でグローバル変数を書いた場合に 対象サイトのスクリプトのグローバル変数と衝突する可能性があるため｡ 例えば、対象サイトで config という変数を使っているときに ユーザスクリプトでそれを知らずに config という変数を宣言したりすると 意図しない動作をする場合がある｡ というかそれでハマった↓ Googleにブログ検索とコード検索
2行でJavaScriptを高速化する方法 - rand's
id:amachangさんの 一行で IE の JavaScript を高速化する方法 - IT戦記 に対して、id:uupaaさんが http://d.hatena.ne.jp/uupaa/20081230/1230604575 でIE以外でも使える色々な方法を提案なさっています。でも、 「正直documentを_docに置き換えるの面倒＞＜」 そこで、たかがreplace(/document/g, '_doc')の手間を惜しむ皆様のために用意した、2行でJavaScriptを高速化する方法がこちら： script全体を(function(document){と})(document)で囲む これだね！ ベンチマーク uupaaさんの記事にあるB系のソースを使わせていただきました。 ブラウザ B0 B1 B2 B3 B4 B5 b6 IE 6 10281 4938 10844 4672
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
NavigationRing
NavigationRingは、リングコマンドをWebページに取り付けるサービスです。 試しにこのWebページをタブルクリックしてみてください。グローバルリンクのNavigationRingが起動します。 NavigationRingはJavascriptで実装されており、一般的なWebページやBlogに少々変更を加えるだけで、 ここにあるようなリングコマンド機能を追加することができます。 グローバルリンクタイプのリング以外にも、機能を特化させたリングコマンドを何種類か提供しています。 blogパーツページのサンプルを見てみてください。 リングに使うアイコンイメージやカーソルの画像、タイトルのデザインは設定により変更することができます。 また、ダブルクリック以外の呼び出し（マウスオーバーやボタンクリックでの起動）にも対応予定です。 マニュアル強化月間 NavigationRingの使い方記
5分で作るOpera エクステンション
Opera11が発表されましたが、皆様いかがお過ごしでしょうか。 開発者でない人でも、簡単に作れるOpera エクステンション。 作成するファイルは僅か5つ。 ・index.html ・background.js ・popup.html ・test.png ・config.xml 早速、作ってみましょう。 用意するものOpera 11 あと、圧縮ツール。zip圧縮出来るならば、何でも良いです。 実際に作ってみようまず、index.htmlを作りましょう。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyTest</title> <script charset="UTF-8" src="background.js" type="text/javascript"></script> </head>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
Under Translation of ECMA-262 3rd Edition