So-net無料ブログ作成
» スポンサーリンク
雑記・その他
前の5件 | 次の5件

Lightbox系の画像スライドショーとYouTubeのiframe版埋め込みプレイヤーが重なるのを回避するには
» 雑記・その他 

YouTube が iframe 形式の埋め込みコードの提供を先月から正式開始してから、このブログで使っている画像のスライドショーの jQuery プラグイン Colorbox の表示が、YouTube のプレイヤーと重なって表示されているのに今頃になって気付きました。(気付くの遅っw)

↓こんな感じで重なって表示されてしまいます

奥が jQuery プラグインの Colorbox、手前が iframe 版 YouTube

 object/embed タグで Flash を表示する古い形式では、object の param に wmode を追加して transparent を指定 (embed の属性にも追加)してやれば良いのは知っていて、Colorbox のトップページの下にあるヘルプ項目にも同様の対策方法が書かれていたのですが、iframe 版の場合どうすればいいかまでは書かれてませんでした。

<param name="wmode" value="transparent" ></param>

 ちょっと困りつつ、URL に渡すパラメータのほうにも同じようなものがあるんじゃないかと、Google Code のYouTube の埋め込みプレイヤーのパラメータ一覧を見てみたのですが、それらしいものは見当たらず。

 何か解決方法はあるはずと思ってしつこくいろいろ調べていると、海外の見知らぬ掲示板 (URL 失念)で同じことで悩んでいる人の書き込みと解決策を発見。

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XXXXXXXXXX?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

 その方法が「URLの後ろのパラメータに &wmode=transparent を追加する」というもので、さっそく試してみたところ効果がありました。



このパラメータが Google が公式に発表しているものかどうかまでは確認してないのですが、とりあえず上手くいったので記事にしてみました。

同じことで悩んでいる方の参考になれば幸いです。

[追記] 2011/05/04
wmode=transparent が指定されると再生処理が若干重くなるのか、IE では映像のコマ落ちが発生する場合があるかもしれません。
(他のブラウザでは問題ないようです)

[追記] 2012/02/21
楽天アフィリエイトのモーションウィジェットでも同様のことが発生しますが、こちらは JavaScript の埋め込みコードの最後に rakuten_wmode="on"; を追加すれば回避できます。

↓楽天モーションウィジェットの JavaScript 埋め込みコードの例
<script type="text/javascript">
<!--
rakuten_design="slide";
rakuten_affiliateId="楽天アフィリエイトID";
rakuten_items="ranking";
rakuten_genreId="112493";
rakuten_size="160x600";
rakuten_target="_blank";
rakuten_theme="gray";
rakuten_border="off";
rakuten_auto_mode="off";
rakuten_genre_title="off";
rakuten_recommend="on";
rakuten_ver="20100708";
rakuten_wmode="on";
//-->
</script>


[関連サイト]
 YouTube
 Colorbox - customizable lightbox plugin for jQuery 1.3 and 1.4
 Google Code - YouTube 埋め込みプレーヤーのパラメータ
nice!(1)  コメント(4)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク

[So-net blog] 管理画面にあるレイアウトのHTML編集のリンクがなくなっている
» 雑記・その他 

今日、ブログの HTML を編集しようとして、いつものように管理画面から「デザイン」→「レイアウト」に入って「コンテンツ HTML 編集」を使おうとしたら・・・
あれ?右上にあったはずのリンクがない!



 公式ブログによると、数日前に導入された「携帯版デザインテンプレート機能」と合わせて管理ページのテンプレート/デザイン関連項目の構成が一部変更されたとのこと。

 スキンテンプレート全体の HTML は今まで通り編集できるんですが、メインのスキンテンプレートに差し込まれる個別コンテンツ(記事やサイドバー)のテンプレートの HTML が編集できなくなってます。
 つまり、今表示されているカスタマイズ部分を触ることができないという・・・

 いくつかの変更部分は「挿入テキスト」に移し替えることでなんとかなる部分もあるんですが、テンプレートのマクロ <% ~ %> を直接利用している個所は移し替えできません。

今までこつこつカスタマイズしてきた HTML が編集できなくなったのは困ります。
いや、とても困る。

 とりあえず問い合わせのフォームに質問を書いて送ってはみたものの、もしこれが仕様だとしたらあまりに酷すぎます。

コツコツ改良してきた努力が無駄になったような気分で、なんかもうブログ書くテンションがいっきに下がってます・・・

[追記]
サポートデスクからの返答によると、仕様ではなく不具合だったようで、表示されているブログとされていないブログがあるらしく現在原因を調査中とのことでした。

返答のメールには、「管理ページ」→「デザイン」→「HTML編集」で現在使用しているスキンから「デフォルトHTML」の選択してみて改善しないか確認してみてほしい、とありやってみましたが残念ながら変化はありませんでした。

[追記] 2010/07/04
試しにサブブログを新規作成して確認してみたら正常に表示されていました。
メインブログのほうは今のところ表示されないままです。

[追記] 2010/07/05
今日確認したらメインブログも直っていました。
公式ブログ記事→【復旧】「コンテンツ HTML 編集」のリンクが表示されない




[関連サイト]
 So-net blog
 So-net blog : What's new?
 So-net blog : 使い方マニュアル
nice!(1)  コメント(2)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback


Googleのトップページロゴが2日間限定でパックマンに (しかもプレイ可能)
» 雑記・その他 

Google のトップページのロゴがパックマンになってました。
なにこれ?と思ってるうちに動き始め、矢印キーを触ったらプレイできて音までついててびっくり。



 CNET Japan の記事によると、今日(2010年5月22日)は「パックマン誕生30周年」の日ということで、ホリデーロゴの一環としてバンダイナムコと協賛で公開しているもので、掲載期間は22日、23日の2日間限定だとか。 

全256面をクリアすると素敵なことがあるとか?
あと隠しコマンドで Ms. PAC-MAN が現れて対戦プレイもできるそうです。

[追記] 2010/05/24
2日間限定ということでしたが、ここにまだ残ってます。
http://www.google.com/pacman/

[関連サイト]
 Google - Pacman
 Google
 バンダイナムコゲームス
 パックマン ウェブ PAC-MAN WEB


ナムコ・ビデオ・ゲーム・ミュージック

ナムコ・ビデオ・ゲーム・ミュージック

  • アーティスト: ゲーム・ミュージック
  • 出版社/メーカー: サイトロン・デジタルコンテンツ
  • 発売日: 2001/03/23
  • メディア: CD
LEGEND 80’S SERIES「ナムコ・アーケード 80’S」

LEGEND 80’S SERIES「ナムコ・アーケード 80’S」

  • アーティスト: ゲーム・ミュージック
  • 出版社/メーカー: サイトロン・デジタルコンテンツ
  • 発売日: 2003/05/21
  • メディア: CD
nice!(1)  コメント(2)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback


リンクシェアのお年玉ボックスプレゼントでウォークマンWシリーズ当選
» 雑記・その他 

今日、リンクシェアから小ぶりな荷物が届きました。
伝票の品名欄を見ると「プレゼント」と書かれていて、SONY のカナル式ヘッドフォン一体型ウォークマン Wシリーズ NWD-W202 が入ってました。

どうやら年始に届いたメールニュースのお年玉ボックスプレゼントに当選したようです。



応募したことをすっかり忘れてたんですが、こうして当たると嬉しいものですね。
レビューはまた後日書きたいと思います。

Wシリーズ NWD-W202 は以前の記事でも取り上げているので興味がある人そちらもどうぞ。

[関連サイト]
 SONY ウォークマン Wシリーズ NWD-W202 製品情報
 SonyStyle : ウォークマン Wシリーズ - NWD-W202icon

アフィリエイトならリンクシェア


SONY ウォークマン Wシリーズ ヘッドホン一体型 2GB ブラック NWD-W202/B

SONY ウォークマン Wシリーズ ヘッドホン一体型 2GB ブラック NWD-W202/B

  • 出版社/メーカー: ソニー
  • メディア: エレクトロニクス
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback


Topsy's Otter APIを使ってTweet数の多い記事をブログから抽出してリスト表示
» 雑記・その他 

[追記] 2013/09/25
API の利用が有料になったため、この記事で書いた方法は使えなくなりました。

最近になって Twitter 上でもちらほら取り上げてもらえているようなので、Tweet 数(つぶやかれ数)の多い記事を抽出してリスト表示するようにしてみました。
API は本家のものではなく、Topsy で公開されているものを利用しました。



 反映の速さと収集率の高さでは TweetMeme に一日の長があって、Tweet カウンタの設置も簡単で API も充実しているのですが、ドキュメント(解説そのものよりも HELP ページの構成)が分かりにくい。

 あと、ウィジェットボタンを押して表示される履歴ページのレイアウトがごちごちゃしてて見難いのと、履歴が1週間分しか表示されないのがちょっと残念。(Twitter 的には1週間で十分?)

TOPSY



 他にもないかいろいろ調べてみると、比較的新しい(と思われる) Topsy という Tweet 検索サイトが良さそうな感じ。
 反映の速さは TweetMeme よりほんの少し遅いようですが、収集率の高さでは Topsy のほうが上回っているときもあるようでなかなか健闘しているようです。



 ウィジェットボタンも用意されていて飛んだ先の履歴ページも見やすいし、API (Topsy's Otter API) もシンプルで使いやすそうだったので、とりあえずしばらくの間は Topsy の API を使ってみることにしました。

Topsy's Otter API



 API は、http://otter.topsy.com の後ろに "/取得リソース名" + ".レスポンス形式" + "?q=クエリーパラメータ" の組み合わせで HTTP/GET でコールします。
 レスポンス形式は、JSON、JavaScript (JSONP) 、Text が選べます。

http://otter.topsy.com/search.js?q=site:[URL]&window=a&callback=[function]

 今回はブログ全体から Tweet 数が多い記事(人気の記事)のリストを取得したいのでリソース名は "search"、レスポンスは JavaScript からコールバックを使って JSONP として利用するので形式指定は ".js" になります。

 クエリー部分 (?q=) は、サイト内を対象にするので "site:" を付けてブログの URL を指定、集計時間の範囲 (window) は全 Tweet を対象にするので "a" を指定、レスポンス形式で ".js" を指定した場合は結果を受け取るコールバック関数名もあわせて指定します。

 取得する件数は何も指定しないと10件(1ページ分)になりますが、"&perpage=n" を追加してn件数分(最大50件)取得できます。件数が多い場合はページ指定 (page) を増やせば「最大10ページ×perpage」の件数を受け取ることもできます。

呼び出し例

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}
</script>

//  リクエスト
<script type="text/javascript" src="http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult"></script>

 コールバック関数が呼ばれるタイミングは API のレスポンス任せなので、documemt.write では意図する場所に表示されない場合があるので注意。

 また、他の DOM 操作で div 要素の内容などを更新している場合は、配置する位置によってはコールバックのタイミングに注意する必要があります。
 より安全に更新したい場合は onload イベントで createElement と appendChild で API を呼び出してやります。

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}

//  リクエスト
function topsyScript(){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = 'http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult';
  document.body.appendChild(script);
}

if (window.addEventListener){
  window.addEventListener("load", topsyScript, false);
}else if(window.attachEvent){
  window.attachEvent("onload", topsyScript);
}else{
  topsyScript();
}
</script>

 結果はコールバック関数の data.response.list[] に data.response.list.length 件数格納されています。
 ページが複数に分かれている場合は data.response[].list[] に data.response.length ページ数分格納されています。

 結果は Tweet 数の多い順 (.trackback_total) ではなく人気度の高い順 (.score) に並んでいるので、必要に応じて Array.sort などでソートしてやる必要があります。

 また、Tweet 数が多い記事でも人気度 (score) が他より低めに評価されている記事の場合、 デフォルトの10件分に入ってないことがあるので、クエリーパラメータの perpage を多めに指定したほうがよいかもしれません。

[追記]
 Tweet 数が多い記事 (URL) でも score の値が極端に低いと "window=a" を指定してもリストにあがってこないときがあります。その場合 "window=d" や "window=w" で検索してやるとヒットすることがあります。
[追記ここまで]

 他に似たような値の hits という項目があるのですが、レスポンスパラメータの解説がないので詳しいことは不明。



 コールバック関数の中で必要な項目を取り出して整形したものを DOM 操作で表示したいところに差し込んでやれば上のようなリストの出来上がりです。

Tweet カウンタ 兼 Retweet ボタン

表示したい位置に埋め込むだけで簡単に利用できます。
Topsy Labs に埋め込みコードと表示サンプルがあります。
右の例は big タイプで、small タイプもあります。
色 (Theme) は9種類から選択できます。

» head セクションに追加
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

» 表示したい箇所に追加 (URL、記事タイトルを " " で囲むのを忘れずに)
<div class="topsy_widget_data">
<!--
{
"url": "[URL]",
"title": "[記事タイトル],"
"style": "big",
"theme": "blue"
}
//-->
</div>


こんな記事書いておきながら Twitter アカウントはまだ持ってないんですよね…

[追記]
2010年6月末あたりに仕様変更があったのか、ウィジェットのパラメータの "title" に日本語が含まれているとエラーが発生してカウンタが表示されなくなってました。
原因は不明ですが、とりあえずパラメータの "title" を省略すれば回避できます。
title パラメータがない場合は HTML 内の title タグから引用されます。

[関連サイト]
 Topsy
 Topsy's Otter API
 Topsy Labs
 TweetMeme
nice!(1)  コメント(0)  トラックバック(1)   » カテゴリー:雑記・その他
permalink
trackback


前の5件 | 次の5件
雑記・その他