どうやら、API Overview Guideを読んでみるとフッターに表示されるコントロールバーを非表示にする方法があるとのこと。
具体的には、昨日紹介した、動的ローディングのURLを、http://www.youtube.com/apiplayer?video_id=に変更することでいけそうです。
実際に試したところできました!!
2011/08/31
[YouTube]chromeless player
2011/08/30
[YouTube]動的ローディング
YouTubeをブログなどに貼り付けるときは、ページ上にあるobjectタグをコピペする方法がありますが、それとは別に、JavaScriptから動的にローディングすることも可能です。
YouTube JavaScript Player API Referenceを読むと、SWFObjectを使った実装方法があるそうです。
それを元にちょっとjQueryでソースを組んでみました。
<!DOCTYPE html>
<html> <head> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js"></script> <script type="text/javascript"> function onYouTubePlayerReady(playerId) { } jQuery.extend({ loadYoutube:function(args){ prms = $.extend({ width:"420", height:"345", version:"9" },args); var params = { allowScriptAccess: "always" }; var atts = {id: prms.embedId}; swfobject.embedSWF( "http://www.youtube.com/e/" + prms.movieData + "?version=3&enablejsapi=1&hl=ja_JP&playerapiid="+prms.playerId, prms.id , prms.width, prms.height, prms.version, null, null, params, atts ); } }); jQuery(document).ready(function(){ jQuery.loadYoutube({ id:"js_movie", playerId:"ytplayer1", embedId:"ytPlayer1", movieData:"R0ks1U2C6aI" }); }); </script> </head> <body> <div id="js_movie"></div> </body> </html> |
重要なところは、swfobject.embedSWFメソッドの部分。
「http://www.youtube.com/e/」は固定なのですが、その後に、videoIDをつけて、さらにパラメータを設定する必要があるということ。
上のコードでは、
「version=3&enablejsapi=1&hl=ja_JP&playerapiid=引数で設定されたplayerId」
としていて、ほぼこれは決まり文句のようなもの。
引数で設定したplayerIdは、後で、コールバック関数であるonYouTubePlayerReadyが走ったときに、確認用に使う必要があるので、ここはきちんと設定する必要があります。
atts変数に設定しているidは、こちらも後ほど、動的にYouTubeの動画変更したい場合に必要になるので、同様にきちんと設定の必要ありです。
試したところ、正常に、動画が表示されました。
こうしてテンプレみたいにしておくと後で、コピペですむので、楽かなと。
2011/08/29
2011/08/28
[icon]Free Mobile Berries
PHPSPOTで紹介されていた80種類の綺麗なフリーアイコンセット「Free Mobile Berries」からアイコンをダウンロード
といっても、実際に落としたのは、Free Mobile Berriesなんだけどね。
2011/08/27
[本]ちょいデキ!
読了
第1章 大企業に溶け込めず、起業へ
via:目次
第2章 こんな私でもなんとかやってます
第3章 Q&A基礎編
第4章 Q&A役に立つ実践編
第5章 Q&Aビジネス情報収集術編
第6章 Q&A健康管理編
第7章 では、現場へ「行ってらっしゃい!」
以前、読んだ「弾言」で紹介されていたので手に取りました。
本書は、サイボウズ社長の仕事術が紹介されている本。
他の書籍と決定的に違うのは、肩肘張らず、できることをやろうよと提唱している点。
まさに北斗神拳ではなく太極拳。
ただ、とは言っても、結構、高度なことを求めるような気がした。
例えば、失敗や批判を客観的に事実として受け止め、今後に活かせるように分析するというのがあったが、実際に、感情が先に反応してしまい、冷静になれないような気がした。
それができれば苦労しないよーっと突っ込みながら読んでいたが、著者自身、日々、それに格闘しているようだ。
また本書の内容にすべて同意できたわけではない。
例えば、新聞のスポーツ欄を読むということ。
モチベーションをあげるための方法として紹介されていたが、他にも方法があるような気がした。
例えば映画を見るとか、気に入った本を読み返すとか。
それ以前に、やはり新聞を読むということに納得できなかった。
ニュースそのものがネットで入手できちゃうから、購読する価値が見いだせないと感じた。
アナログ手帳を使って情報を効率的に管理する方法が紹介されていたが、今やiPhoneやiPadなどのスマホがあるので、単純にそれに情報を記録していった方がより時間がかからずに済むと思うのだが。
そういった意味では、前回読んだ、「仕事するのにオフィスはいらない」の方がしっくりきた。
とまー、全部に納得できなかったのですが、一部上場の社長が実践している仕事術に触れることができてよかったと思いました
2011/08/26
[icon]アイコンセット Reflection
PHPSPOTのシンプルで色々な用途に使えそうな商用OKのアイコンセット「Reflection」から、アイコンをダウンロード
だいぶ前にダウンロードを行い、久しぶりに、参照先である200+ Exclusive Free Icons: “Reflection”を見ると、なんかメールアドレスを求められるようだ。
ちょっといやだなー><
2011/08/25
[icon]ソーシャルアイコンセット500
PHPSPOTのシンプルデザインで汎用的に使えそうなソーシャルアイコンセット500から、アイコンをバックアップ用にダウンロード
実際は、500 Free Icons: WPZOOM Social Networking Icon Setからなんだけどね。
2011/08/24
[jQuery]hoverについて
こんな便利なメソッドが存在していたとは。
hover(over, out)メソッドを読むと、マウスがノ買った時に、第二引数の関数が実行され、マウスが外れると第三引数の関数が実行されるようです。
上記の記事を読むと、無名関数が設定されているのですが、その時に、引数の設定をすることは可能なのだろうか?
ちょっと再調査の余地がありそうです。
2011/08/23
[jQuery]inputのname属性にアクセス
あるきっかけで、inputタグのname属性にアクセスする必要性が発生したので、方法についてまとめました。
といっても、いつも通り、jQuery日本語リファレンスの[attribute=value]を参照したのですが。
inputタグのname=hogeがあった場合に、下のようにDOMにアクセスできます。
$("input[name='hoge']") |
これ一見すると簡単そうに見えますが、nameのところを「'」で囲まないといけないので、注意が必要かも。
2011/08/22
Google APPSにムームードメインを適用
するときに、カスタム設定を行う必要があるのですが、具体的な設定内容が
Google と ムームードメイン
に書かれてあったので、メモ代わりに、1エントリー設けました
2011/08/21
[icon]Buddyconsをアップロード
今日は、ちょっと前にPHPSPOTで紹介されていた、
丸&角丸のイラストっぽいソーシャルアイコン126個セットがいい感じ
のアイコンをバックアップ用にdropboxにアップしました。
実際は、“Buddycons” – Vector Social Media Iconsからダウンロードしたのですが、今は、emailを求められるようです。
前にダウンロードしたときは、メールアドレスを求められることはなかったのに、今、ダウンロードするのは、ちょっと怖くてできないなー。
さっさとダウンロードしてよかった!!
2011/08/20
[icon]Free web development iconsをダウンロード
昨日の仕事するのにオフィスはいらないを読む前から、気になったブログ記事をdeliciousにブクマしていたのですが、肝心のブクマ先のサイト(特に、アイコン系の紹介サイト)が死んでいたらどうしようーっと思い、そしたら、めんどいかもしれないが、dropboxにアップした方がより安全になるなーっと思い、アップしたサイトをブログに書き留めることに。
だいぶ前に、PHPSPOTで、
WEB開発に使えるアイコン集「Free web development icons」でアイコンが紹介されていました。
さっそく、参照先のサイトのアイコンをdropboxにアップしました。
これで、サイトが潰れても、クラウドにアップしているので、安全だぞと。
2011/08/19
[本]仕事するのにオフィスはいらない
読了
第1章 ノマドワーキングのすすめ
via:目次
第2章 アテンションコントロール
第3章 情報コントロール
第4章 コラボレーション
第5章 クラウドを使いこなす
第6章 ノマドライフスタイルの時代へ
空気本で紹介されていたので、手に取りました。
従来のように満員電車に揺られながら深夜まで会社のオフィスで仕事をするスタイルから、スマホやクラウドを駆使して、あらゆるところで仕事ができるようにする、つまり、ノマドワーキングを提唱している。
当初、タイトルから、ノマドワーキングの具体的な内容まで踏み込んで終わりかなーっと想定していたのですが、実現するにあたって必要になるgoogleのツールやiPhoneアプリの使い方まで説明してあったので、正直、そこまで踏み込む必要はあるのかなっーっと思ってしまった。
ほとんどのツールは、使っている人が多いと思うし、読む前から使っていたので、いらないような気がした。
かつ、そこは読者に対しての宿題にしてもよかったのではなかろうか?
それでは敷居が高すぎるかな?
横道にそれるかもしれないが、本書が出版されたのが2009年で、この2年のうちに正式にサポートされなくなったツールもある。
google gearsはその代表格だろう。
さらに、
Yahoo傘下にあったdeliciousは他社に買収されてしまった。
なので、ツールは、読者自信が発掘していく必要があると感じた。
ただ、証券会社を使った効率化については本書で確認してほしいのですが、すごく参考になりました。
クラウドを使う方法の理由の一つとして、情報漏洩を防ぐためと書かれていたが、これは理由にはなりにくい。
なぜなら、クラウドに資料を保存してしまうということは、当然、DBかサーバーにそのデータが保管されており、サービス提供側が見ようと思えば見えてしまうからである。
がそれは、守秘義務上すごくいけないことなので、提供側は一般的にはしないのだが、顧客側が不信に思うかもしれないなーっと感じたからだ。
なので、やはりウィニーなどを使わずにクライアントのパソコンに保存するのが得策だと思うのだがいかがだろうか?
ここで勘違いしてほしくはないのだが、すべてのデータをクライアントに保存しろということではなく、第三者が絡まないものについてはガンガン使うべきだと思うし、現に、使っている。
かつ第三者が介在する場合でも、あらかじめ約束をとりつけておけばクリアーできると思う。
本当は、そこまでしなくても著者が提唱しているようにすべてのデータをクラウドに預けたいのだが、どこもかしくも、コンプラ、コンプラと叫ばれているので合わせた方いいところについては従ったほうがいいかなと感じた次第である。
RSSを駆使して情報を処理する方法について書かれていたが、その一部に、google readerを使ったハックがあり、後から読み返す可能性があるものについてはスターをつけるとあったが、そもそも、後から読み返す時間ってあるのだろうか?かつ、その可能性があるのだろうか?重要だったら、その時点で、deliciousなり、twitterやブログにまとめた方がより効率的ではないかと疑問に思ったのだが、どうだろうか?
RSSにスターをつけてしまうと、定期的に配信されてくるRSSもあり、ドンドンたまって行き、結果的に下に埋もれてしまうんじゃーないだろうか?
ここは改善の余地があると感じた。
さらに読んでいくうちに、本書よりもジャック・アタリの「21世紀の歴史」の方に興味が傾いてしまった。
本書で、それを確認してください。
via:Be Free, at Home - 書評 - 仕事するのにオフィスはいらない
あなたにも、きっと出来ます。
著者にも、私にも出来たんですから。
とあるが全員できるとは限らないし、望んでいるとも思わない。
が、しかし、ノマドワーキングを実現した人にとって本書は入門書となると感じた。
2011/08/18
Chrome Web Store appsにNative Clientがサポート
きちんと調査を行なっていないのですが、Native Client brings sandboxed native code to Chrome Web Store appsによると、chromeのversion 14からNative Clientがサポートされるっぽい。
それに伴って、Chrome Web Store appsにNative Clientがサポートされるようです。
ただ、どうやって実現るのかは、これから精読しないとわからないっす。
2011/08/17
google plus button IE7
ってひょっとして対応していないかも。
というのも、Managing and using Google productsのSupported browsersに対応ブラウザにIE7がなかったので。
2011/08/16
[googleMaps]infoウィンドウを地図表示時に出力
昨日のエントリーでは、マーカーをクリックしたときに、infoWindowを表示するという仕様でしたが、今日は、地図を表示したときに最初から開いている方法について。
google.maps.InfoWindowメソッドの引数にpositionを追加すればオッケーのようです。
<!DOCTYPE html> |
openメソッドで追加先となるオブジェクト指定するのを忘れないように。
実行結果は下の通り
2011/08/15
[googleMaps]infoウィンドウを表示
タイトル通りなのだが、infoウィンドウを表示する方法について調査
Info Windowsを読みながら実装してみました。
<!DOCTYPE html> |
google.maps.InfoWindowメソッドの引数contentにdomが使えるのがなんとも便利。
上の例では、マーカーをクリックしたときに、InfoWindowが表示される仕掛けになっています。
実行結果は下の通り。
地図が表示された瞬間にInfoWindowを出すことは可能なのだろうか?
2011/08/14
[open social]自分のニックネームを取得
opensocialのリファレンスが非常に読みにくくなってしまった。
この影響によってgoogle japanに掲載されているリファレンスもいつわかりにくくなっても不思議ではない。
というわけで、日本語リファレンスが生きているうちに、調査したことを書き留めていく。
今日は、オーナー (Owner)のデータの取得方法について
まずは、オーナー (Owner)とは、
対象となるプロファイルやアプリケーションを所有するユーザー
のことであり、ずばり自分自身のことを指すと考えていいと思う。
で、実際に、どうやって取得するのかは下に例を書きました。
var req = opensocial.newDataRequest(); |
まず、newDataRequestでこれから問い合わせを行なうという意思表示をします。
次に、addメソッドで具体的にどのようなリクエストを送るかを引数にセットします。
上の場合は、newFetchPersonRequestメソッドにOWNERを指定することで、OWNER情報を取りに行ってくださいと指示を出していて、取得できた場合は、変数get_ownerにバインドさせてくださいとしています。
で、最後の、sendメソッドでサーバーにアクセスをかけていて、取得できた場合は、コールバックが呼ばれる仕組みになっています。
コールバック内では、getメソッドを呼びさらに、getDataメソッドを立て続けに呼ぶことで情報を取得することができます。
ほぼ慣用句的なコードなので、覚えておくと便利かなと。
2011/08/13
[本]速習Webテクニック スタイルシート 上級レイアウト
読了
1 レイアウトを始める前に
via:目次
2 段組レイアウト
3 パーツ別レイアウト
4 ページレイアウト
5 サンプルレイアウト
6 実例レイアウト
前回読んだ、セオリー・オブ・スタイルシートの姉妹書。
本書は、2006年出版なのだが、対応ブラウザがIE6、IE5で、まだこの時点では、IE7すら正式にリリースされていなかったので、ブラウザの対応状況は古い。
が、勘違いしてほしくないのが、内容自体は決して古くないということ。
IE6やIE5にバグが含まれており、それに対応するための方法が数多く含まれていた。
IE7以降では、当然、バグが解消されており、IE6以前のシェアはないので、普通にコーディングすれば、本書の内容通りのコンテンツが実現できてしまうので、やはり内容は普遍的である。
そういった意味では、要望として、モダンブラウザ対応した内容がほしいところではある。
そうすれば、本書は、最強になるからだ。
マルチカラムを実現するために、floatを使っていたが、他にも方法があることを知った。
内容は、本書で確認してほしいが、これは使える。
さらに、素晴らしいのは、随所に、デザインサイトが紹介されていること。
紹介されていたサイトを実際にみることで、本書の学習は、読み終えた後でも続くというのは、よく考えた作りになっているなーっと。
著者の考えにそって、本書を読み終えた後でも、学習を続けていく。
2011.08.14
cssvault.comがない。代わりにbestcssvaultを発見。こちらがモノホン。
2011/08/12
[google map]イベントの追加
イベントの追加方法をMap Eventsで調べました。
そこで今回、マーカーがクリックされたときのコーディング方法を下に掲載しました。
<!DOCTYPE html> |
google.maps.event.addListenerメソッドでイベントの追加を行います。
第一引数は、イベントをアタッチする対象オブジェクトで、第二引数は、イベントの種類。
なんといってもすばらしいのは、ダブルクリックにも対応しているところ。
最後は、イベントが発生したときに呼ばれる関数です。
デモを貼り付けました。
2011/08/11
[google map]ドラッグを無効にする方法
昨日のエントリーで、オリジナルの地図を表示する方法を調べたのですが、そのときに、地図をドラッグしてほしくないなーっと思い。
そんな都合のいいこといくのかなーっと思って調べたあった!!
google.maps.MapOptionsにーーー
google.maps.Map()メソッドの第二引数にオプションを設定することができるのですが、draggableキーの値をfalseにすることで、ドラッグを回避することができます。
便利!!
2011/08/10
[google map]オリジナル地図を表示
google mapでオリジナルの地図を表示する方法を調べました。
Custom Map Typesを参考にしながら、実際にコーディングを行なったのは↓
<!DOCTYPE html> |
いくつかポイントがあって、まず、google.maps.Mapのインスタンス変数を宣言するときに、
mapTypeControlOptions:{ |
という形で、オリジナルのmapTypeIdを設定する必要があります。
さらに、mapTypesを設定するために、google.maps.ImageMapTypeインスタンス変数を宣言しているところも重要。
JSON形式で引数にセットするのだが、nameは地図上に、実際に表示されるmapTypesとなります。
オリジナルの地図を表示できるということを知ったのでチャンレジしてみたのがドラクエ1のマップ。
地図データはこちらからを参考にしました。
作っていて、すごく懐かしい気分になってしまった。
今度、wiiでドラクエ1、2、3とリリースされるようなので、話題のタイミングとしてはよかったかもしれない。
2011/08/09
[ビジネスネタ]ブラウザのシェアについて
ブラウザのシェアって果たしてどうなっているのかなーっと、疑問に思うときがあります。
そこで、ぐぐってみたのですが、StatCounterというサイトが、いけてました。
このサイトがいけている理由としては日付をx軸として、グローバル(世界)や、日本などのフィルターをかけることができるということ。
さらに、グラフで表示してくれるところも、すばらしい。
ためしに、Worldwideで選択して出力した結果が、↓
Source: StatCounter Global Stats - Browser Market Share
実は、ほしかったデータとして、IEのシェアが本当に落ちているかどうかということ。
もう、50%をきっているんですね。客観的に示してくれると論理的に説明することが可能となり便利ではあります。
ちなみに、日本の場合は?
Source: StatCounter Global Stats - Browser Market Share
まだIEのシェアが50%以上ありますが、徐々にシェアが落ちてきています。
IEのブラウザがこのまま徐々に落ちていって、chromeのシェアと逆転してほしいなーっと思っています。
というのも、macにIEをインストールすることができなくて、webのデザインデバッグができないから。
ものすごく一方的な意見になってしまいますが。
定期的にこのサイトで引き続きシェアをウォッチしていきたい。
2011/08/08
[facebook]Pagesにオリジナルコンテンツの追加方法
pagesにオリジナルコンテンツを追加したい場合があります。その方法をまとめました。
手順1:facebook Developersにアクセス
手順2:ヘッダー部分にある「アプリ」項目をクリック
手順3:「+ Create New App」ボタンをクリック
手順4:App Nameを入力し、Localを選択。日本語向けのコンテンツの場合は、「日本語」を選択でいいかも。最後に、チェックボックスを入れて、「続行」ボタンを押す
手順5:セキュリティチェックの入力を行い、最後に「送信」ボタンを押す
手順6:左のサイドバー上にある「On Facebook」をクリックし、Canvas Settingsになっていることを確認する。
手順7:「Discovery」項目にある「Social Discovery」を無効に選択し、Tab NameにPages上で表示したい名前を入力する。最後に、Tab URLに実際に表示させたいURLを入力して、「変更を保存」を押して、保存終了
手順8:左のサイドバー上にある「View App Profile Page」をクリック
手順9:クリックした後、左のサイドバー上にある「マイページへ追加」をクリックする
手順10:追加先のfacebook pagesを選択
手順11:実際にコンテンツが追加されているか確認する
2011/08/07
[本]池上彰の「世界が変わる!」~金融危機と国際ニュースの「なぜ」を読み解く決定版
親父が持っていたので、頂く事に。
各国事情・中国産混入物は人もペットも殺す!米を襲った自由なき国からの災厄
via:目次
民族・エストニア暴動の背景にソ連とナチス・ドイツに翻弄された小国ゆえの軛あり
民族・イスラエルによるガザ全面攻撃も!ついに分裂、パレスチナが自滅の危機
各国事情・予想通知で安心の米・独、「財源は税」でシンプルなカナダほか各国年金事情
経済・ロイター買収で勃発!今度はマードックがダウに触手―金融メディア戦争の行方
緊迫・ペルシャ湾岸6か国が「核開発」着手で風雲急!中東の火薬庫が臨界へ向かう
緊迫・「欧州の脅威」であり続けたいロシアVSミサイル防衛拡大狙う米国の“新・冷戦”
現地レポート・イラク内戦で「戦争特需」に沸く隣国ヨルダンに「難民生活」の苦渋を見た
各国事情・「陪審裁判」ほか『市民年鑑』で知るアメリカ人「8つの権利」と「9つの義務」
経済・「債権を債券にする」米国のリスク転嫁システムが“世界恐慌”を引き起こした〔ほか〕
だいたい4ページ読み切りで各国で起きたニュースが書かれている。
と言っても、2009年1月出版された書籍なので、全体的にサブプライムローン系が多かった。
本書を読んで、生きて行く中で気をつけなくてはいけないなーっと思ったのは、マスコミによる報道協定があるということ。
イギリスのチャールズ皇太子の次男ヘンリー王子が、アフガニスタンに部隊として参加したときに、メディアに流れないようにマスコミが自主的に協定を組んだのですが、このニュースの自体の内容は別として、問題として世の中に起きている重要なことすべてが報道されるというわけではないこと。
つまり、ネットを使って自主的にニュースを取得していかないと世の中の流れ的なものを客観的に取得することって難しいんじゃーないのかなーっと感じてしまった。
後、なんで、そこまで深刻になるのかなーっと思ったのが、同姓婚。
別に、法律的にgoサインを出してもいいと思うんだけどなー、宗教的に問題っていうのが、大部分だと思うんだけど。
こだわる必要ねーんじゃねー??
ことわざなんかで言われる「歴史は繰り返す」というのを改めて思い知らされた本でもあった。
だからこそ、繰り返さないために、何をしたらいいのか??
考えさせられる本だった。