Web scratch

Archive for the ‘javascript’ Category

自分のTLで見る感じのJavascriptな人々
勝手な印象、主観なのでコメントを気にしたら負け。
Firefoxはデフォルト要素なので特に書いてません。

t_trace	pbtweet、mbtweetの作者 CSS3が好きそうな人 実際にHTML5を使ったアプリケーションをつくったりしてる
m_satyr	Ubiquity 何かJavascriptでも珍しい事をやってる気がする。
Griever2	Opera、Firefox userChrome.jsとか弄ってる
miya2000	Opera wnpの作者。 テクい事をやってたりするような
snj14	LDRizeとかMinibuffer
hell2u	Emacs、CSSに詳しそう
teramako	vimperator(vimperatorとなげくと監視されます) JScriptとかxpcshellとか Firefoxのあんなことやこんなことを知ってる印象
monjudoh	jQueryとかfirebugとかMercurial プログラミング関係のツールが好きそう。
nanto_vi	JavascriptやHTMLなど仕様に関して本当に詳しい nantoメソッド:誰かが記事にしたことに対して既にDays on the Moonで記事になっていたことがよくある。
ku	iPhoneアプリとかGoogleChromeとか 新しいことを見つけ出したりしてる印象
stillpedant	KeySnailの作者。 勉強家、出てきたことに対してちゃんと学ぼうとしてる感じ。
javascripter	nightlyを追ってる気がする。 あんまりTLじゃ見ないけど、一行コードを残していく。
amachang	最近はJavascriptな話題はあんまりみないけど。 高速化、新しいことには手が早い 昔のプレゼンの資料どこだろ？
ofk	オレオレjQueryとか。 Javascriptの高速化について詳しい そういえばこれ書こうと思ったきっかけ → 日本のJavaScript界隈のブログを適当かつ詳細にまとめてみようと思って挫折したけど、もうちょっと頑張ってみた – ?D of K
uupaa	uupaa.js(uupaa.jsはフレームワークではなくてライブラリ)の人 Javascriptの高速化について詳しい。 黒魔術の使い手。 他とは互換が効かないような人な気がする。
azu_re	自分 Greasemonkeyとかニコニコ
edvakf	Opera、Google Chrome 英語圏の記事を読んでたり、新しい機能を弄ってたり、それをアウトプットしたりいくつかあるブログの更新頻度は高め 勉強家
33	tombloo作者 kiva
swdyh	AutoPagerize作者
os0x	Opera、Google Chromeに深く関係 細かいところまで拾える人
cherenkov	jetpack、Greasemonkey
hagino3000	サーバーサイドJSとかExt JS
anekos	猫、vimperator
xulapp	まだつかみ切れてない。 結構お詳しそうな様子
Constellation	Taberareloo作者、Greasemonkey ホントよくコードを書いてる気がする。 最近はGoogle chromeでいろいろ

azu (azu_re) on Twitter

http://twitter.com/azu_re

twicliはブラウザで動くTwitterWebクライアントで、Javascriptでプラグインを書くことで拡張することができます。
今回はtwicliから特定のポストに貼られているリンクをRead It Laterへ登録するプラグインを書きました。

必要なもの

• Read It Laterのアカウントとパス

使用方法

http://efcl.info/lab/twicli/ReadItLator.js

をtwicliの+にあるPluginsに書き足す事で上のプラグインを読み込む。
プラグインを読み込むために一度ページをリロードしてら、+のPluginの下に▼Read It Latorというのができるので、
Read It Laterのユーザー名とパスワードを記入する。

そして各ポストの▼を押すとRead It Laterが追加されているので、登録したいリンクがあるポストで実行する。
(リンクがないポストを選択した時はそのポストのURLが登録されます。)

雑記

API KEYが必要なので自分のをいれていますが、回数制限とかあるらしい。
ソース自体もサーバが貧弱なので別のところに置きたい。
(Read It Later APIは簡単に取得できます。)

twicli – A Web Browser-Based Lightweight Twitter Client

http://www.geocities.jp/twicli/index.html

タイトルままですが、ブックマークレットがjavascript:~~~みたいにべた書きしてある場合、ブックマークレットとして登録するのが面倒なので、
それを登録するためのリンク(よくあるツールバーへD&Dするためのリンク)を作成するブックマークレット。

• ブックマークレット登録補助

使い方

英語のニュースを読みやすくするブックマークレット – by edvakf in hatena

http://d.hatena.ne.jp/edvakf/20100115/1263539415

上を例にしてみると

1. べた書きされたブックマークレットのコード部分だけを選択する
2. ブックマークレット登録補助ブックマークレットを実行
3. プロンプトが出るので、登録するブックマークレットのタイトルをいれる(英語のニュースを読みやすくするとか)
4. 選択範囲のすぐしたにいれたタイトルでリンクができるので、それをブックマークレットツールバーへD&Dする。

以上

(function(){
function insertAfter(newNode, node) {
        return node.parentNode.insertBefore(newNode, node.nextSibling);
}
var selection = getSelection();
if (!selection.rangeCount) return false;
var range = selection.getRangeAt(0);
var endNode = range.endContainer;
var a =document.createElement("a");
a.href = range;
var str = document.createTextNode(prompt("ブックマークレットタイトル"));
a.appendChild(str);
insertAfter(a,endNode);
})();

Twitterは日本でも一部では人気のあるウェブサービスですが、発言の中ではURLを貼ってサイトについて言及している発言も多く見かけます。
そのような発言を言及されたページから見られると便利だと思いませんか？
最近類似するものが多くなってきたのでまとめてみた。

twitterer anywhere

http://twitterer.moongift.jp/

MOONGIFT製のもので、検索結果をキャッシュして置いたものを使用しているので負荷が少なくて済む。
また通常のURLから検索を行ってもTinyURL化したものを披露ので効率がよい。
Javascriptを埋め込んで使うが、JSONPを直接取得する形でも利用してよいとのこと。
これを利用したGreasemonkeyとして
twitteranywhereview.user.jsがある

Tweetbacks for WordPress

http://yoast.com/tweetbacks-wordpress/

Wordpressのプラグイン。
こちらもデータをキャッシュした結果を使用している。

TweetBacks Beta

http://danzarrella.com/tweetbacks-beta.html

javascript埋め込み型。
毎回検索を行う。

Tweet Me!

http://code.google.com/p/tweetme/

こちらもTweetBacks Betaと同様に埋め込み型で毎回検索を行う。
表示をカスタマイズできる

• tweet_me_style = falseを設定するとCSSでスタイルの指定が可能になる
• tweet_me_limit = 表示件数
• tweet_me_url = 表示するURL 未指定の場合、このページ

使い勝手や日本製ということを含めるとtwitterer anywhereが一番使い勝手がよいものになる。

Javascriptでポップアップを表示する時(Lightboxとかページ内でポップするやつ)にflashの上に表示しようとすると なぜかflashの背面に表示されてしまうことがあるので解決方法のメモ。 (Greasemonkeyスクリプト書いてるときに少し詰まった。) 一つ目の方法 Flushの前面にページの領域を表示する – Ulmhaftで紹介されているように cssでポップアップする領域(divとか)を

position:fixed;
overflow:auto;

とすればflashより前面に表示されるみたいです。 二つ目の方法 こちらはflashの表示タグに変更を加える方法 参考web-conte.com | blue | Lightbox JS v2.0 と Flash

<!-- object要素内に下記を追加 -->
<param name="wmode" value="transparent" />
<!-- embed要素に下記の属性を追加 -->
wmode="transparent"

のようにembedタグに要素を加えるとflashより上に表示できる。 javascriptなら addParam(“wmode”, “transparent”); しかし、この方法はflash内のテキストフィールドに日本語を打てなくなるとういう欠点があります。 wmode を transparent に設定した際の注意点 他にいい方法はあるのかな？ addParam(“wmode”, “transparent”);は動的にきりかえられるのかな？ 後は考えられるのはflashをdivなどのコンテナで囲んで、表示非表示を切り替える方法。 この方法は毎回flashの再生がスタート地点に戻るので使いづらいかも。