javascript一覧

NicoCache_nl + Proxomitron 環境の自動プロキシファイル

NicoCache_nl + Proxomitron

NicoCache_nlProxomitronflvplayer_wrapper を併用しているニコ厨です。

ref.: 『NicoCache_nl』 ニコニコ動画ファン必携の便利ツール : 亜細亜ノ蛾

上記の環境で、少し困ったことが あります。それは、

NicoCache_nl が起動していないと、ニコニコ動画のサムネイルが見られないこと。サムネイル部分が、「プロキシに接続できません」とか何とか──。

下記ページを参考に「自動プロキシ設定」を おこなった場合、サムネイルも NicoCache_nl 経由になるのが原因ですね。

[nicolist.net] プロキシ設定ファイルの例

そこで、まだ煮込み足りませんが、自分の自動プロキシファイルを晒します。

続きを読む


「(X)HTML + CSS だけで Web デザイン」時代の終わり?

前回の続き

プログラマへ質問: こんなプログラム言語があったら── : 亜細亜ノ蛾の続きです。

CSS で「できること」「できないこと」

CSS という言語は、「できること」(文字装飾など)と、「できないこと」(サーバ通信 など)を覚えるまでは簡単です。

できることが わかっていれば、「やりたいこと」の答えは検索で すぐに見つかります。できないことも、あっさり諦められる。

問題なのは、「できなさそうで できること」(リンクに特定のアイコンを表示)と、「できそうで できないこと」(リンクに favicon を自動取得して表示)を覚えるのが やっかい。

さらに、「全てのブラウザで同じように表示させたい!」と禁断の、いや ごく普通の願いが、地獄への道しるべ。CSS 魔のダンジョンへ、ようこそ──。

「CM 入りまーす」

そこで──、すべての Web デザイナ・CSS ファン・ブロガ必見、現在絶賛発売中のホップ本(飲み口は柔らかいが辛口、のどごしスッキリ)を熟読するわけです。

これでアナタも、CSS と (X)HTML に関しては一人前だ!

photo

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉 福島 英児 望月 真琴
九天社 2007-02

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 できる大事典 HTML & CSS (できる大事典) Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト スタイルシート・デザイン XHTML + CSSで実践するWeb標準デザイン講座 Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

by G-Tools , 2008/01/10

──のだけれど、厄介なのは これから。

続きを読む


Google Analytics に新機能、トラッキング・コードも一新

Google Analytics の新機能

Analytics analysis: Google

Google 製のアクセス解析ツール、Google Analytics の新機能が 2007/12/13 に リリースされました。

Analytics 日本版 公式ブログ: [グラフの複数データ表示機能] と [新しいトラッキングコード用の JavaScript ] をリリースしました

詳細は、こちらのページが大変わかりやすい! 「ページの読み込み時間」の解析、面白そうですね。

Googleアナリティクス、様々なイベントやアクションを取得可能に|WEBマーケティングブログ

もちろん、より詳しい説明は Google のドキュメントを読むと良いでしょう。まだ英語版しかないですが……。

Welcome to Google Analytics – Google Analytics Custom Tracking – Google Code(英語)

続きを読む


userChrome.js 用の切り替え可能なスクリプト・ローダ

MTOS がいじりたい!

世間では MTOS(Movable Type オープンソース・プロジェクト)で盛り上がっています。

MTOS: Movable Type オープンソース・プロジェクト | MovableType.jp

──ので、自分も いじり倒したい!(ブログ書いている時間で)

──のを グッとガマンして……。

Firefox の異次元拡張機能(明らかに他の拡張と違う)、userChrome.js ネタです。

Firefox 使い必携の userChrome.js で「それ UC」 : 亜細亜ノ蛾

今回は、「スクリプトの有効・無効」を切り替え可能な、スクリプト・ローダの紹介です。

続きを読む


「JavaScript ファイルの縮小(Minify)」が なぜ難しいか?

JavaScript を縮小・圧縮したい!

PHP の勉強も兼ねて、

「JavaScript ファイルを自動的に縮小(Minify)して、(gzip)圧縮する」

というスクリプトを作っています──と何度も書いて来ましたが、

結論: \(^o^)/ 無理

という、残念な結果に終わりそうです(8 割方 予想が付いていたけど)。

今回は、それがなぜ難しいのか という話と、/packer/ は やっぱり凄い! という話です。

目標

やりたいこと:

  • PHP4 で作る
  • 自動で処理する
  • JavaScript ファイルから
    • コメントを削除
    • 余分な空白・改行を削除

たったこれだけのことですが、じつは ものすごく難しいです。ちなみに、「PHP4」で、というのは、ただ単に ここのサーバで動いているのが PHP4 だから、というだけの理由です。PHP5 だと、類似のスクリプトはいくつかあるのですが……。

「そんなの、2 分でできるよ」というひと向けに、下記の(わざとらしい)"sample.js" をどうぞ。

/***/
/**
*  comment
*  // comment
*/
/*@cc_on
//  http://d.hatena.ne.jp/amachang/20071010/1192012056
var doc = document;          // comment
eval('var document = doc');  // comment
@*/
/*@cc_on document.write('"IE!"\n'); @*/     // comment
var hoge = "/* hoge */\n";
var fuga = '"/* fuga */"\n';
var foo  = "//* foo *//\n";
var bar  = '"\'//* bar *//\'"\n';
document.write(hoge + fuga + foo + bar);

上記のコードを Minify すると、こうなるはずです。──そんなスクリプト、書けますか?

/*@cc_on var doc=document;eval('var document = doc');@*//*@cc_on document.write('"IE!"\n');@*/var hoge="/* hoge */\n";var fuga='"/* fuga */"\n';var foo="//* foo *//\n";var bar='"\'//* bar *//\'"\n';document.write(hoge+fuga+foo+bar);

続きを読む


Firefox 拡張機能「NoScript」でサックサクにしてやんよ

NoScript

“noscript”と聞くと HTML タグを思い浮かべる人も多いと思いますが、今回紹介するのは、Firefox の拡張機能(Add-on: アドオン)です。

これは、多機能なセキュリティ対策ツールで、

「基本的にすべてのサイトの JavaScript(など)を実行させない」

というのがメインの機能です。

JavaScript を実行させたいサイトをドメイン単位で許可する、というホワイトリスト法になっています。

設定方法と使い方

詳しい設定方法、使い方は、下記ページが図解入りでわかりやすいです。

NoScript – 拡張機能のおぼえがき –

Greasemonkey, UserChrome.js は?

気になるのが Greasemonkey や UserChrome.js への影響ですが、ページ内の JavaScript とは独立しているせいか、制限されません。

唯一 問題になるのが SBMCommentsViewer ですが、これは NoScript を使いながらでもコメントの取得ができます。

silog – script/SBMCommentsViewer

Flash, iframe もブロック

面白いのが、許可していないサイトは、Flash や iframe も制限できること。

うざったいブログパーツや、「なんとかランキング」の読み込みがダルいサイトも、軽快に表示されます。

読み込み制限した Flash や iframe は、ワンクリックで表示可能(オプション次第)なのが、たいへん便利です。

自分の使い方

基本的に、いつでも JavaScript が動作して欲しいサイトは限られています(LDR, Google , 自分のサイトなど)。許可しないサイトは、Flash も iframe も、プラグインもすべて制限しています。

これらを止めていると問題になる場合でも、「一時的に許可」ができるので、あまり困ることはありません。

まとめ

ようするに、エ■サイト巡回が日課の人には欠かせない拡張機能。

[これが言いたかっただけ][以前に比べて軽くなった?][ひろみちゅ先生に怒られそうなこと書いてないだろうか……]


gzip 圧縮した JavaScript ファイルに問題はないのか?

gzip 圧縮 JavaScript

prototype.jsを10KBにする方法 : 亜細亜ノ蛾 でおなじみ! の asiamoth(オレ)ですが、ずっと気になっていることがありました。

それは、

gzip 圧縮は対応しているが、gzip 圧縮の JavaScript に対応していないブラウザはないのか?」

ということです(いまさらながら)。

prototype.jsを10KBにする方法の続き(.htaccessをスマートに使う) : 亜細亜ノ蛾 という続編記事で書きましたが、

「圧縮した JS へのリクエストに Content-type: application/x-javascript を正しく返せば OK」

というのが、一応の結論でした(いま思ったけど、Content-type: text/x-javascript だと、どうなるだろうか?)。

──でも、本当に? と思ったので、実際に検証してみました。

結論

たぶん、大丈夫。

──という結論に至った、検証方法を公開します。

続きを読む


全員が 10 分で jQuery を使い出す(といいな)スレ

jQuery

jQuery を習得したい!

──そう思っていた時期が僕にもありましt(ry、じゃなくて。もう 20 世紀くらいから言い続けているような気がしますが、jQuery をこつこつと勉強中です。

今回は、みんなも jQuery 使おうぜー、という支援記事です。

jQuery 開発者向けメモ

jQuery 開発者向けメモ

やはりここは外せませんね。

「メモ」どころではない、リファレンスと豊富なサンプルがすごい。知りたいことが、すぐに実行できます。

「jQuery でどんなことができるのか」を知るのに最適なページです。まずはここからどうぞ。

Prototype ユーザが 10 分で jQuery を使い出すスレ

ヽ( ・∀・)ノくまくまー(2007-10-07)ヽ( ・∀・)ノくまくまー(2007-10-07): [jQuery] Prototype ユーザが 10 分で jQuery を使い出すスレ

最近のヒット。今回の記事を書こうと思ったのも、ここに釣られたのが半分です。

けっこう真面目な記事かと思いきや、アイドル画像で格段にわかりやすく! ──なっているか、というと疑問だけど、ものすごく食いつきよくなってます。ポイントをしっかり抑えているのがいい感じ。

Prototyper(造語)も jQuery にすんなり移行できそうですね(?)。

JavaScriptライブラリといえば jQuery(入門編)

ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery(入門編)

ここ最近で、改めて jQuery の名前を広めたのがこの記事でしょう。

この記事も、Prototype.js などの JavaScript フレームワークを使ってきた人、JavaScript 中上級者 向けですね。

jQuery超初心者にありがちな7つの間違い

ミネソタでPerlを(まったり修行中) – jQuery超初心者にありがちな7つの間違い

jQuery の初心者で JavaScript の中級者、みたいな人に向けた記事ですね。

end() なんてあるのか──と、ここで初めて意識しました。

jQuery をどう使うか?

以上、いろいろと紹介しましたが、結局のところ「jQuery を使って何をするか?」が重要ですよね。自分は、そのあたりが決まらずに、グルグルと同じところを回っています……。

でも、過去に CSS や Movable Type、(X)HTML のタグの使い方が(なんとなくは)わかった時に、

「なんだ、こんな簡単なことで色が変えられたり、段組を変えたりできるのか!」

と少なからず感動したことがありました。

jQuery も「ちょっとすごい CSS」(わーい \(^o^)/)みたいに思えば、簡単に使えそう。な気がする。かもしれない。


JavaScript 圧縮ネタの予告(自動でminifing + gzip 圧縮)

JavaScript 圧縮ネタ

旅の恥はかき捨て、と言いますが、ブログは書き捨てしようにもログが残ります。(別に、はてなブックマークのコメント書き捨て話をするわけではない)

書き捨てた、というつもりはなくても、いまだに心残りなのが JavaScript 圧縮ネタ。

このサイトでは考えられないくらいの、アクセス数・はてブ数をたたき出しました(ありがとう!)が──

──内容は他人様の記事のパクリだし、(英語とプログラミングが)あんまりわかってないのが丸出し。Safari などのブラウザの対応具合も、いまだに把握できてない。

この記事に対するツッコミ記事もいくつか目にして、大変勉強になり、感謝しています。しかし、恥ずかしい気持ちのほうが大きいです。もっと便利で面白い記事が書きたい!

時代は「縮小 + 圧縮」!

最近読んだ記事で良かったのが、id:dayflower さんのこの記事。

daily dayflower – JavaScript ファイルの圧縮・再訪

結論は、minifing + mod_deflate だとみんな幸せ、とのこと。

自分の借りている XREA のように mod_deflate が動かせない環境の場合、自分で gzip 圧縮するスクリプトも紹介されています(でもうまく動作しなかった)。

gzip/deflate 圧縮についての記事は多く見ましたが、minifing についてはまだまだ。ましてや、この二つを組み合わせる、というのはあまり見かけません。これからの主流になりそうですね。

──というか、じつは、minifing と gzip 圧縮を自動で行う PHP スクリプトを、四苦八苦しながら作ってます。

続きを読む


function()… というアクセスの原因→MyBloglog

アクセスログに「function()…」

これまた需要が少なそう(無さそう)な話題ですが……。

かなり以前から、アクセスログにおかしな文字列が残るようになりました。

真・対spam最終兵器『IPスパムフィルタ』 : 亜細亜ノ蛾

具体的に書くと、こんなアクセスです。

/mt/.../function(){return this.inject(...)} HTTP/1.1

function() を含むアクセスは、少なくとも MT ではありえないので、全て 403 Forbidden. を返すようにしていました。しかし、なにしろ一日に何百も同じようなアクセスがあるので、アクセスログのエラー項目が役に立たない……。

MT が出力している (X)HTML を調べても、どこにも function() なんてリンクは無いし、もしかして不正アクセス? と悩んでいました。

Firebug で解決

先日、ようやく Firebug で原因を突き止めました(約一年間、なにやってたんだろう)。

Firebug は JavaScript が生成した後の HTML を見られるので、おかしな記述が発見できました。Firebug と作者に感謝!(トレードマークを G と間違えてごめんね)

はたして、その原因とは?

──まぁ、タイトルでネタバレですが。

続きを読む