tittle Apple Store(Japan)

The Latest Pop News & More Opera, Firefox, Sleipnir ( Custom & Tips, Latest News, My Opinions, Lovely Music & Movies and so on ...?! No ! More & More !! )

 No. 585 エントリー 2008/01/28(月) 20:41:23

[共通 8] [Script4] "どこでも"ニコニコ動画のリンクをサムネイル(埋め込み)に変換するスクリプト この記事をはてなブックマークに登録 この記事を livedoor クリップに登録 この記事の livedoor クリップ数

以前書いたブックマークレット(Youtubeやニコニコ動画へのリンクを埋め込み型に変換するブックマークレット)をスクリプトにしたもの(はてなブックマークでニコニコ動画のサムネイル(埋め込み)を表示するスクリプト)を、さらに改良したものです(Ver.2です)。

[概要]
ニコニコ動画の動画リンクを埋め込み型リンクに変換する


一応の最終バージョンとなります。
※最終バージョンなので、すべてのブラウザ(Firefox、Opera、Sleipnir)に対応させました。

素のリンクに反応するので、「はてなブックマーク」「del.icio.us」などのSBMや、「Google」「MNS」などの検索サービスなどで、便利じゃないかなと思います。

関連記事:
[Bookmarklet 8] Youtubeやニコニコ動画へのリンクを埋め込み型に変換するブックマークレット
[共通 7] [Script3] はてなブックマークでニコニコ動画のサムネイル(埋め込み)を表示するスクリプト

(続きはこちら)




前回からの改良点です。

(1)「はてなブックマーク」以外のURLにも対応させた
(2)既に変換した埋め込みリンクは再度変換しないようにした
(3)スクリプトにおけるニコニコ動画の埋め込みリンクの不具合を修正した
(4)SleipnirのSeaHorseにも対応させた

※できたらいいなと思うこと
(1)AutoPagerize.jsに対応すること


前回お話ししたとおり、FirefoxとOperaの挙動と、IEの動作の違いから、両者は分けて作ってあります。つまり、前者はそのまま変換し、後者はinframeに直して変換するようにしています。

それでそれらのどちらがいいかというと、もちろん、前者なわけですが、前者はIE6では上手く動作しないために仕方なしにinframeで対応しています。(IE7は分かりません)
(言うまでもないことですが)もちろん、IEコンポーネントブラウザである、SleipnirはIEの影響を受けているので、後者を選択するということになります。

今後の展開(Sleipnirでの対応、あるいはIE8)によっては、前者でも上手く動作する場合があるかもしれません。
少なくとも、現状のSleipnir+IE6では動作しないことは確認しています。


スクリプトのソース(Firefox、Opera Ver)

// ==UserScript==
// @name Nico2 "embed" converter
// @author Xenophias
// @version 2.0
// @published 2008-01-27
// @description Converted into the "embed" link
// @namespace http://browserjs.blog102.fc2.com/blog-entry-585.html
// @include http://*
// @exclude http://www.nicovideo.jp/*
// @exclude http://www.nicochart.jp/*
// ==/UserScript==

(function(){
function isThmbnailExists(href) {
var d=document;
var iframe = d.getElementsByTagName('iframe');
for(var j=0;j<iframe.length;j++) {
if (iframe[j].src ==href) {
return true;
}
}
return false;
}

var d=document;
var a=d.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(/http:\/\/www\.nicovideo\.jp\/watch/.test(a[i].href)){
var href='http://www.nicovideo.jp/thumb/'+a[i].href.match(/sm\d+$/);
if ( isThmbnailExists(href) ) {
}
else {
a[i].innerHTML=a[i].innerHTML+'<p></p>'+'<iframe width="312" height="176" src="'+href+'" scrolling="no" style="border:solid 1px #CCC;" frameborder="0">'+'<a href="http://www.nicovideo.jp/watch/'+href+'"></a>'+a[i].innerHTML+'</iframe>'+'<p></p>';
}
}
}
})()


※注意:Webページには様々なものがありますので、もし適用させたくないページがありましたら、各自、@excludeで定義してください

[Firefox、Opera用]
□スクリプト:Nico2 embed converter.user.js
※FC2ブログの仕様上、jsになっているので、ファイル名を”Nico2 embed converter.user.js”に直してください。ごめんなさい。

[Sleipnir用]
□スクリプト:Nico2 embed converter-Sleipnir.user.js
※FC2ブログの仕様上、jsになっているので、ファイル名を”Nico2 embed converter-Sleipnir.user.js”に直してください。ごめんなさい。


最後に

今回、このように最終的にスクリプトにすることができたのは、いろいろな人の援助があったからです。この場をお借りしてお礼申し上げたいと思います。

まず、このスクリプトの原型を作るのを手伝ってくれたPuyo2さんには、非常に感謝しています。私の初歩的な質問にも、嫌な顔をせず付き合ってくれたことは私にとって非常に幸運なことでした。迷惑をかけたことを申し訳なく思っていると同時に、感謝の意を表したいと思います。

また、わざわざ貴重な時間を割いて、懇切丁寧に一からレクチャーしてくれたmiyaさんにも非常に感謝しています。miyaさんの予想をはるかに越えるびっくりな私の理解度なさにもかかわらず、最後まで、私に付き合ってくれたことは、なかなかできることではないと思います。その人柄に惚れました。とってもいいひとでした。

これらの貴重な経験を無駄にすることなく、これからもより一層技術を磨いていきたいと思っています。
(それより、まず、基礎をしっかりさせることが先決だね(笑))

本当にどうもありがとうございました。


おまけ

ブックマークレットにあるように、もちろん、Youtubeも変換させることが可能です。
ただ、いろいろ実験した結果、あまり実用性がないと私は判断しました。
まず、上手く動作しない場面が多いことが挙げられます。他にも、「はてなブックマーク」など特定のページでは独特の構成をしているので、かえって邪魔になる、動画プレーヤーを読み込むので、リンクが多いとページが非常に重くなる、その大きさからレイアウトが大きく崩れることが多い、などが主な理由です。

これに興味を持ち、それらの問題を解決できる方は、どうかこれを完成させてみてくださいね。私はこれにはこれ以上深入りしないことにしました。

各種ソーシャルブックマーク: ブックマークに追加する |あとで読む

最新の記事(30エントリー)
【TopPageで探す?このブログの最新記事をCheckしてみる?】

吹き出し3
コメント
吹き出し2
コメントの投稿

管理者にだけ表示を許可する

  ※スパム対策のため、フィルターをかけています。本文が英数字のみのコメントはスパム認定される恐れがあります。どうかその点ご了承下さい。

吹き出し4
トラックバック
【トラックバックURLはこちら】
http://browserjs.blog102.fc2.com/tb.php/585-6f3617f8
この記事にトラックバックする(FC2ブログユーザー)

※スパム対策のため、トラックバックは管理人の承認後に表示されます。

※なお、当ブログでは宣伝目的のスパムトラックバックを制限しておりますので、本文が英数字のみの場合や、NGワードを含んでいる場合、当該記事にブログのURL(言及リンク)が含まれていない場合は、トラックバックできない可能性があります。誠に申し訳ございませんが、その点、どうかご了承下さるようよろしくお願いします。

ウィルコムストア ウィルコムストア

Browser.js
He who runs after two hares is a "challenger" ( Laugh...). 
Separated But Connected !!
Chrome Counter
Firefox3 Meter
Firefox3 Meter QRコード
Choose Opera 日本支部
Headline-Reader
あわせて読みたい


無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て

;