Category Archives: JavaScript

TomblooのYouTube対応を改良してみた

4
Filed under Firefox, JavaScript, Mac, ウェブサービス
Tagged as , , , , , ,

Tombloo

Tomblooというとても便利なFirefoxアドオンがあります。
コンテキストメニューから選ぶだけで、見ているページをいい感じにウェブサービスに投稿出来るアドオンです。

私はこれでTumblrへの投稿を行っています。
文字列を選べばそれを引用として投稿でき、動画サイトならそれに適した形でプレビューなどを埋め込んでくれます。
インストール方法は、以下のリンク “tombloo.xpi” を右クリックし、 名前をつけてリンク先を保存でダウンロードしてください。ダウンロードされたファイルをFirefoxのウィンドウへドロップするとインストールがはじまります。

tombloo.xpi

追記:2010/08/18

tomblooの作者toさんがコメントされたように下記に書いたYouTubeでの問題への対応は、公開されているスクリプトに取り込まれました (github)

コミットされたコードも洗練されているので勉強になりますね。


情熱プログラマー ソフトウェア開発者の幸せな生き方

著者/訳者:Chad Fowler

出版社:オーム社( 2010-02-26 )

定価:

Amazon価格:¥ 2,592

単行本(ソフトカバー) ( 200 ページ )

ISBN-10 : 4274067939

ISBN-13 : 9784274067938



YouTubeでの問題

注意:前述したように、2010/08/18現在、最新tombloo.xpiでは下記の問題は修正されていますが、技術メモとして残しておきます。
最近YouTubeのHTML形式が変わったりしてちょっと問題があったりしましたが、それについてはこちらのブログエントリ「TomblooからYouTube動画をpostできなくなった件 – FLYING」で紹介されているようにアドオンのJavaScriptソースをいじることで対応出来ました。
ただ、それでもいくつかのYouTube動画で、これでも対応しきれないところがあり、ちょっと気になっていましたので、原因を調べてみました。

調査、解決コード

問題が発生する動画ページは、例えば、この動画です。
他のページと何が違うのか、考えてみると、左上の動画投稿者の名前が入るべきところにバナーが入っています。そこのHTMLタグ取得に失敗してるのが原因と分かりました。

前述したブログでの修正内容を見て、修正すべきは次のファイルであると分かりました。
Windowsの場合は、
C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\(プロファイル名)\extensions\tombloo@brasil.to\chrome\content\library
Mac OS Xの場合は、
/Users/(ユーザー名)/Library/Application Support/Firefox/Profiles/(プロファイル名)/extensions/tombloo@brasil.to/chrome/content/library
にある、
31_Tombloo.Service.extractors.js
です。
このファイルの1230行目辺りを以下のように書き換えます。これで動作するようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  name : 'Video - YouTube',
  ICON : 'http://youtube.com/favicon.ico',
  check : function(ctx){
    return ctx.host.match('youtube.com');
  },
  extract : function(ctx){
    var author = $x('id("watch-username")');
    ctx.title = ctx.title.replace(/[\n\r\t]+/gm, ' ').trim();
    if( !author ){
      author = $x('id("watch-userbanner")');
      var t0 = author.href;
      var t1 = t0.match( /[^/]+$/ );
      var t2 = author.textContent.replace( /<img.*\/>/, t1 );
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : t2,
        authorUrl : author.href,
      };
    }
    else{
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : author.textContent,
        authorUrl : author.href,
      };
    }
  },
},

ちょっと強引に直していますが、まぁ、いいかな。


[AD]

↓YouTubeからUstreamへと、今、何かが変わりつつある。

USTREAM 世界を変えるネット生中継 (ソフトバンク新書)

著者/訳者:川井 拓也

出版社:ソフトバンククリエイティブ( 2010-05-19 )

定価:

新書 ( 200 ページ )

ISBN-10 : 479736016X

ISBN-13 : 9784797360165


↓ Make:ブランドのArduino本、面白そう!

Arduinoをはじめよう (Make:PROJECTS)

著者/訳者:Massimo Banzi

出版社:オライリージャパン( 2009-03-27 )

定価:

単行本(ソフトカバー) ( 216 ページ )

ISBN-10 : 4873113989

ISBN-13 : 9784873113982


生まれてから30万時間

0
Filed under JavaScript
Tagged as , ,

300 thousands hours old.

「JSTバーチャル科学館|life meter 私の時間、めぐる世界」というサイトで、自分が生まれてからの経過時間が出てきた。すると、あと1日くらいで自分が生まれてからちょうど30万時間であることが分かった。
とても切りがいいのだが、今日なのか明日のなのか?また、時間はいつぐらいなのか?をもうちょっと具体的にいつなのかを知りたくなり、JavaScriptで計算できるページを作ってみました。

TORQUES - TIME PASSED
技術的にすごいわけでもなんでもなく、どこかに計算できる何かがあればいいなぁー、とか思って作ってみただけです。

100万時間なら

30万時間とかよりも、100万時間までいくと区切りいいなぁ、と思って計算してみたら、大体114歳なんですね!生きてみたいなー、100万時間。
英語で言うと、”1 Million hours old”!
インパクトありますよね。
“I am One Million Hours Old!”

1年間<1万時間

ちなみに、1年間は24*365日として8760時間、約9000時間、1万時間はない、と覚えておくと、何かのスケール感を計るときなどに簡易計算で使えるかもしれません。
(8760時間でも十分覚えやすい数字ですが。)


[AD]
↓時間がそろうミステリィ。そして、森博嗣好きになってしまう1冊。

すべてがFになる (講談社文庫)

著者/訳者:森 博嗣

出版社:講談社( 1998-12-11 )

定価:

Amazon価格:¥ 792

文庫 ( 524 ページ )

ISBN-10 : 4062639246

ISBN-13 : 9784062639248


↓気になる時間の本。

ゾウの時間 ネズミの時間―サイズの生物学 (中公新書)

著者/訳者:本川 達雄

出版社:中央公論社( 1992-08 )

定価:

Amazon価格:¥ 734

新書 ( 230 ページ )

ISBN-10 : 4121010876

ISBN-13 : 9784121010872


cursorulerを作ってみた

0
Filed under Bookmarklet, JavaScript
Tagged as , , ,

ウェブを見ていて、「ここのサイズって何pixel?」と思うことが何回かあって、そのたびに、スクリーンショットを撮って、photoshopで拡大して計ってみて、ということが面倒だった。

正確に分からなくてもいいことが多く、大体30ピクセルくらい?とか分かれば十分なのに、そういうことに適したツールが見あらたなくて、作ってしまいました。

それが、ブラウザ上にピクセル定規を表示するツール「cursoruler」です。

cursoruler

使い方

cursorulerページのブックマークレットをブックマークフォルダに入れます。

bookmarkletをクリックすると、マウスカーソルのやや左上を基点に、一辺500ピクセルの定規を表示します。

基点部分には一辺10pixelの赤い矩形を表示しています。

また、目盛りは1ピクセル単位で書いてあり、100ピクセル毎に赤い●のある目盛りを書いています。

おまけとして、基点位置の座標も表示しています。
cursoruler-functions

ブックマークレット

いろいろツールを作る仕組みを考えたのですが、当面ブラウザ上で動くだけで良いかな、と思って、bookmarkletとして作ることにしました。

定規画像は、このサーバから取得するようになっているけど、まぁ、そんなに問題は起きないでしょう。

試してみた感想、意見、要望とかもらえるとうれしいです!