「最大の恐怖は無力と知ることではない 最大の恐怖は自分の計り知れない力だ」 "Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure." (映画『コーチ・カーター』より)

By Yukinobu Kurata (倉田幸暢)

映画『コーチ・カーター』(「Coach Carter」)

「最大の恐怖は無力と知ることではない
 最大の恐怖は自分の計り知れない力だ」

("Our deepest fear is not that we are inadequate.
  Our deepest fear is that
  we are powerful beyond measure.")

この言葉は、映画「コーチ・カーター」(「Coach Carter」)で、チモ・クルーズがカーターコーチにお礼を言う場面で引用されていた言葉です。

チモ・クルーズがカーターコーチにお礼を言う際に
「最大の恐怖は・・・」("Our deepest fear...")の言葉を引用する場面

最大の恐怖は無力と知ることではない

最大の恐怖は自分の計り知れない力だ

恐ろしいのは自分の闇ではなく光

自分の力を隠し、周囲の者たちを不安にさせないよう縮こまっていては世界を照らすことはできない

小さな子供らと同じように輝こう

すべての人の内に光がある

自分自身を輝かせれば、まわりの者たちも自然と輝きはじめる

恐怖から解き放たれさえすれば、まわりの者達も解き放つことになる

  

「コーチにお礼を言いたかったんです

 命を救ってくれた」

  

「私こそ感謝する

 君らみんなに」

(チモ・クルーズのお礼の言葉と、ケン・カーターの感謝の言葉、『コーチ・カーター』) (*1)

Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure. It is our light, not our darkness, that most frightens us.

Your playing small doesn't serve the world. There's nothing enlightened about shrinking so that other people won't feel insecure around you. We are all meant to shine, as children do.

It's not just in some of us; it's in everyone. And as we let our own light shine, we unconsciously give other people permission to do the same. As we're liberated from our own fear, our presence automatically liberates others.

  

"Sir I just wanna say thank you...

 You saved my life."

  

"Thank you, sirs.

 All of you."

(Timo Cruz のお礼の言葉と、Ken Carter の感謝の言葉、『コーチ・カーター』) (*2)

この言葉の出典元は、 続きを読む


脚注
  1. (チモ・クルーズのお礼の言葉と、ケン・カーターの感謝の言葉、映画『コーチ・カーター』、1:45:16~1:47:37、パラマウント映画、2005年)[↩ Back]
  2. (チモ・クルーズ(Timo Cruz)のお礼の言葉と、ケン・カーター(Ken Carter)の感謝の言葉、映画『コーチ・カーター』、1:45:16~1:47:37、映画『コーチ・カーター』、2005年)[↩ Back]

ソーシャルメディアでクチコミを広げるための設定方法のまとめ

By Yukinobu Kurata (倉田幸暢)

Instagram and other Social Media Apps (*1)

クチコミを広げるためにつかう、ソーシャルメディアやウェブサービスなどの設定方法の情報をまとめてみました。

下記は、ここで解説しているソーシャルメディアやウェブサービスの一覧リストです。

目次
  1. 最低限、アカウントを作成しておくべきソーシャルメディアの一覧
  2. Googleアカウント
  3. YouTube(ユーチューブ)
    1. YouTubeチャンネル登録ボタン
  4. Google+(グーグルプラス)
    1. Google+ページ
      1. 「+1 ボタン」の設置方法
    2. 「プロフィールバッジ」「Google+ページバッジ」の設置方法
    3. Google Analytics(グーグルアナリティクス)
  5. Googleサーチコンソール(旧名:Googleウェブマスターツール)
  6. Facebook(フェイスブック)
    1. Facebookページ(フェイスブックページ)
    2. ソーシャルプラグイン
      1. いいね!ボタンの設置方法
      2. シェアボタンの設置方法
      3. 送信ボタンの設置方法
      4. 埋め込み投稿(エンベデッドポスト)の設置方法
      5. 埋め込み動画プレイヤー(エンベデッドビデオプレーヤー)の設置方法
      6. Facebookコメント欄の設置方法
      7. アクティブフィードの設置方法
      8. レコメンデーションボックスの設置方法
      9. レコメンデーションバーの設置方法
      10. ライクボックスの設置方法
      11. Facebookページプラグインの設置方法
      12. Facebook登録(レジストレーション)の設置方法
      13. Facebookログイン(Facebook Login for Apps)の設置方法
      14. フェイスパイルの設置方法
  7. Twitter(ツイッター)
    1. 開発者向けTwitter
    2. 「ツイート」ボタンの設置方法
    3. 「フォローする」ボタンの設置方法
    4. 「ハッシュ」ボタンの設置方法
    5. 「@ツイート」ボタンの設置方法
    6. 埋め込みツイートの設置方法
    7. 埋め込みタイムラインの設置方法
      1. ユーザータイムライン
      2. お気に入りタイムライン
      3. リストタイムライン
      4. 検索、ハッシュタグのタイムライン
      5. コレクションのタイムライン(カスタムタイムライン)
    8. ツイッターカードの設置方法
      1. Playerカード(プレイカード)
  8. LinkedIn(リンクトイン)
    1. LinkedInグループ
    2. 「シェア」ボタンの設置方法
  9. pinterest(ピンタレスト)
    1. 「ピン」ボタン(「Pin it」ボタン)の設置方法
      1. 「長方形」の「ピン」ボタン(「Pin it」ボタン)
      2. 「円形」の「ピン」ボタン(「Pin it」ボタン)
    2. 「フォローボタン」(Follow button)の設置方法
    3. 「ピンウィジェット」(Pin widget)(埋め込みピン)の設置方法
    4. 「プロフィールウィジェット」(Profile widget)の設置方法
    5. 「ボードウィジェット」(Board widget)の設置方法
  10. SoundCloud(サウンドクラウド)
    1. プレイリスト(playlist)の埋め込み(エンベッド)
    2. トラック(track)の埋め込み(エンベッド)
  11. LINE(ライン)
    1. 「LINEで送る」ボタン
  12. Tumblr(タンブラー)
  13. feedly(フィードリー)
    1. Feedly button(フィードリーボタン)
    2. feedlyの購読者数を確認する方法
  14. HootSuite(フートスイート)
  15. dlvr.it(デリバーイット)
  16. Pocket(ポケット)
    1. 「Pocket」ボタン
  17. Buffer(バッファー)
    1. 「Buffer」ボタン
  18. Gunosy(グノシー)
  19. ifttt(イフト)
  20. はてなブックマーク
    1. 「はてなブックマークボタン」の設置方法
  21. 人気ブログランキング
  22. にほんブログ村
  23. Flickr(フリッカー)
  24. Instagram(インスタグラム)
    1. アイコン画像、ボタン、バナー
  25. Foursquare(フォースクエア)
  26. AddThis(アッドディス)
  27. ShareThis(シェアディス)
Social Media Heart Collage (*2)

最低限、アカウントを作成しておくべきソーシャルメディアの一覧

下記は、最低限、アカウントを作成しておくべきソーシャルメディアの一覧です。

続きを読む


脚注
  1. Instagram and other Social Media Apps by Jason A. Howie, on Flickr)[↩ Back]
  2. Social Media Heart Collage by kdonovangaddy, on Flickr)[↩ Back]

ワードプレス(WordPress)の利点(SEO、機能、商用利用無料、カスタマイズ性、デザインなどなど)

By Yukinobu Kurata (倉田幸暢)

WordPress日本公式キャラクター「わぷー」 (*1)

どうも、倉田です。

今回は、ワードプレス(WordPress)の利点についてお話しようとおもいます。

ワードプレスは、ただ単に、ブログやウェブサイトを無料でかんたんに作成・運営できるというだけのツールではありません。

ワードプレスは、

インターネット上で情報発信をするための総合的なプラットフォーム

です。

かんたんにいえば、あなたの「情報発信基地」になるものです。

ブログをつかって本気で情報発信をするのであれば、ワードプレス以外の選択肢はあり得ないと言っても過言ではありません

ビジネスのためのブログであるにもかかわらず、アメブロやFC2ブログ、シーサーブログなどをつかっている人を見ると、本気でビジネスをやる気があるのかどうかとても心配になります。

「私はネットビジネスのプロです」と言いながら、こうしたブログをつかっている人は信用できないと、個人的にはおもいます。

もし、あなたがブログをつかって情報発信をしたいとおもっているのならワードプレス(WordPress)が最良の選択です。

このことを証明するために、ここからはワードプレスをつかうことの利点についてお話したいとおもいます。

ちなみに、ぼくは、自分でサーバーに設置するタイプのワードプレスを、2006年からずっとつかっていて、その間、ワードプレスをつかって自分のブログをつくったり、仕事でお客さんのブログやホームページをつくるためにワードプレスをつかってきました。

ここでお話することは、その7年間の経験から、ぼくが実際に肌で感じていることです。

続きを読む


脚注
  1. (ワードプレス(WordPress)の日本公式キャラクター「わぷー」[↩ Back]

HTML5と「ゲーム性」がすべてを変える: ブラウザゲームに学ぶ「インタラクティブ性」と「エンターテイメント性」

By Yukinobu Kurata (倉田幸暢)

 

遊びをせんとや生(うま)れけむ

戲(たはぶ)れせんとや生(むま)れけん

遊ぶ子供の声聞きけば

我が身さへこそ動(ゆる)がるれ

――― 「四句神歌」、『梁塵秘抄』 (*1) (*2)

「遊ぶものは神である。
 
 神のみが、遊ぶことができた。
 
 遊は絶対の自由と、
 ゆたかな創造の世界である。
 
 それは神の世界に外ならない。
 
 この神の世界にかかわるとき、
 人もともに遊ぶことができた。」

――― 白川静、『文字逍遥』 (*3)

「石油は人間の頭のなかで見つかる」

――― ダニエル・ヤーギン、『探求』 (*4)

 

ここでは、下の動画のような、HTML5をつかったブラウザゲームをいくつか紹介しながら、「遊び」、「学び」、「集客・販売」の未来についてお話していきます。

続きを読む


脚注
  1. (「遊びをせんとや生(うま)れけむ
      戲(たはぶ)れせんとや生(むま)れけん
      遊ぶ子供の声聞きけば
      我が身さへこそゆるがるれ」
    、編集:西郷信綱、『梁塵秘抄』、ちくま学芸文庫、筑摩書房、2004年、19ページ)[↩ Back]
  2. (「遊びをせんとや生(うま)れけむ、戲(たはぶ)れせんとや生(むま)れけん、遊ぶ子供の聲(こえ)きけば、我が身さへこそ動(ゆる)がるれ。」、校訂:佐佐木信綱、三五九(359)、「雜八十六首」(雑八十六首)、「四句神哥 百七十首」(四句神歌)(しくかみうた)、「梁塵祕抄 卷第二」(梁塵秘抄 巻第二)、『新訂 梁塵秘抄』、岩波文庫 黄 22-1、岩波書店、1941年、66ページ)[↩ Back]
  3. (白川静、「遊字論」、『文字逍遥』、平凡社ライブラリー、平凡社、1994年、10ページ)[↩ Back]
  4. (ダニエル・ヤーギン(Daniel Yergin)、(訳 伏見威蕃)、「結論−"偉大な革命"」、『探求――エネルギーの世紀(下)』、2012年、433ページ)[↩ Back]

「あの時 あなたは 僕を守ってくれなかったじゃないですか」 「あなたが正しいと言うのなら なんで守ってくれなかったんです」

By Yukinobu Kurata (倉田幸暢)

「あの時 あなたは

 僕を守ってくれなかったじゃないですか」
 
「あなたが正しいと言うのなら

 なんで守ってくれなかったんです」

―― 瀬田宗次郎、『るろうに剣心』 (*1)

閉ざされたドアの向こうで吹きあれる戦争で、どれほど多くの子どもたちが不具にされているかということに、だれも気づかない。そしてだれも、魂を失った人々を助けるすべを知らない。

―― 『母に心を引き裂かれて』 (*2)

「これで・・・

 これでもう・・・

 戦わなくて済む

 殺し合いの螺旋から

 俺は降りる」

―― 辻風黄平、『バガボンド』 (*3)

in this waking hell I am
witnessing more than I can compute
この燃え盛る
理解をこえた地獄の目撃者

pray myself we don't forget
lies, betrayed and the oppressed
嘘や裏切り
虐げられた人々を決して忘れない

please give me the strength to be the truth
真実であるための力を私の手に

people facing the fire together
if we don't, we'll lose all we have found
この炎に立ち向かう
そうしない事は全てを失う事だから

―― ORIGA、「rise」 (*4)

これからお話する話の登場人物についてですが、あるいは、今、あなたのすぐちかくにいる、あなたがとてもよく知っているその人、ということになるかもしれません。

ですが、ここでは話の都合上、舞台となる時代と場所は、今ではないいつか、ここではないどこか、ということにしておきます。

正確には、「いつの時代でもあり得る」し、「どこの場所でもあり得る」といえます。

過去のことかもしれないし、現在のことかもしれないし、未来のことかもしれません。

地球の裏側で起こっていることかもしれないし、名前くらいは聞いたことがあるあの場所で起こっていることかもしれないし、あなたのすぐそばで起こっていることかもしれません。

ですが、とりあえずそのことはおいておいて、今ではないいつか、ここではないどこか、ということにしておきます。

そして、登場人物はその、今ではないいつか、ここではないどこかにいる、ある子どもです。

ここでは、その子がどのような名前で呼ばれているのか、ということも、その子の性別が男性か女性か、ということも、とくに重要なことではありません。

なぜなら、「どのような名前でもあり得る」し、「どちらの性別でもあり得る」といえるからです。

聞いたこともないような名前かもしれないし、あの人とおなじ名前かもしれないし、あなたとおなじ名前かもしれません。

ですが、ここではとりあえず、その子の名前を「宗次郎」と呼ぶことにします。

この「宗次郎」という子どもは、深刻な問題を抱えている「親」と、幼い頃からともにいることを強いられることになるために、自身もこころに傷を負うことになります。

これは、そんな「宗次郎」たちのお話です。

 

続きを読む


脚注
  1. (瀬田宗次郎(声優:日髙のり子)、原作:和月伸宏(脚本:島田満、監督:古橋一浩)、第55話「嵐の夜の惨劇・宗次郎の過去」、『るろうに剣心 -明治剣客浪漫譚-』(アニメ))[↩ Back]
  2. (ジョアンナの日記の抜粋、クリスティーヌ・A・ローソン(Christine Ann Lawson)(翻訳:遠藤公美恵)、7章「迷える子どもたち―「完璧な」子どもと「くずの」子ども」、『母に心を引き裂かれて―娘を苦しめる“境界性人格障害”の母親』、196~197ページ)[↩ Back]
  3. (辻風黄平、作者:井上雄彦、「#125 螺旋」、第13巻、『バガボンド』)[↩ Back]
  4. (歌手:ORIGA(オリガ)、作詞:Tim Jensen(ティム・ジェンセン) / ORIGA(オリガ)、(英語とロシア語で書かれた歌詞の日本語訳:Mayu Jensen(麻由ジェンセン) / ORIGA(オリガ))、作曲:菅野よう子(Yoko Kanno)、楽曲名:「rise」(アニメ『攻殻機動隊 S.A.C. 2nd GIG』オープニング主題歌)、CDの題名:『攻殻機動隊 STAND ALONE COMPLEX オープニングテーマ「GET9」』、2004年、ビクターエンタテインメント株式会社、(CDに付属しているブックレットに掲載されている「rise」の歌詞)、(CDに付属しているブックレットに掲載されているスタッフクレジット))[↩ Back]

YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み (IFrameプレーヤーAPI(JavaScript))

By Yukinobu Kurata (倉田幸暢)

ここでは、「YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を最後まで再生すると、それと同時にリダイレクトで別のページに飛ばされます。(話をわかりやすくするために、動画は50秒ほどの短いものにしています。)

これによって、「動画を最後まで見た人をあらかじめ設定しておいたページに自動的に移動させることができる」という仕組みをつくることができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

See the Pen
YouTubeEndPointRedirect
by 倉田幸暢 (@yukinobukurata)
on CodePen.

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)のパネルを表示(または非表示)させる。
「Result」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)を実行したときのウェブページの状態を再現したパネルを表示(または非表示)させる。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

動画を最後まで見た後、視聴者の操作を待たずにリダイレクトで自動的に、セールスレターや、オプトインページなどに移動させたいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画の一時停止ができないようにする仕組み (IFrameプレーヤーAPI(JavaScript))

By Yukinobu Kurata (倉田幸暢)

ここでは、「YouTube動画の一時停止ができないようにする」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめると、画面をクリックして一時停止にしようとしても動画を止めることはできません。(コントロールバーは非表示にしているので、一時停止ボタンを押すことはできません。)

これによって、「動画を見はじめたら最後まで見るしかなくなる」という仕組みをつくることができます。ページを再読み込みすれば動画の再生は止まりますが、そうすると、つぎに動画を見るときは、またいちばん最初から見なおさなければならなくなります。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

See the Pen
YouTubeUnstoppablePlayer
by 倉田幸暢 (@yukinobukurata)
on CodePen.

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)のパネルを表示(または非表示)させる。
「Result」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)を実行したときのウェブページの状態を再現したパネルを表示(または非表示)させる。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

セールスレターや、オプトインページなどで、途中で動画の再生を止めずに、動画の内容をいっきにすべて見てほしいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み (HTML、IFrameプレーヤーAPI(JavaScript)、CSS)

By Yukinobu Kurata (倉田幸暢)

ここでは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめてから、一定時間(20秒)が経過すると、動画の下に購入ボタンが表示されるように設定しています。

途中で一時停止すると、カウントダウンタイマーも一時停止します。もう一度再生をはじめると、カウントダウンタイマーも動き出します。これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

See the Pen
YouTubeMagicBuyButton
by 倉田幸暢 (@yukinobukurata)
on CodePen.

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)のパネルを表示(または非表示)させる。
「Result」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)を実行したときのウェブページの状態を再現したパネルを表示(または非表示)させる。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

この仕組みは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みです。

わかりやすくいうと、「動画の内容をちゃんと見た人だけつぎのステップに進める」という仕組みです。

動画セールスレターや、オプトインページなどでこの仕組みをつかうと、効果的です。

もし、動画の下にはじめから購入ボタンがついていたら、それを見た人は「この動画は売り込みのための動画だ!」とおもって、抵抗感がうまれてしまいます。

これでは、提案を受け入れてもらいにくくなってしまいます。

そうではなく、はじめは購入ボタンを表示させないようにしておいて、抵抗感なく動画を見はじめてもらい、動画のなかで興味を引いてから、頃合いを見計らって購入ボタンを表示する。

こうすれば、抵抗感を引き起こさずに、自然な流れで提案をおこなうことができるので、提案を受け入れてもらえる確率があがります。

その結果として、成約率やオプトイン率が上がるでしょう。

また、このカウントダウンタイマーは、YouTube動画の一時停止/再生と連動して動きます。なので、動画を一時停止するとカウントダウンタイマーも一時停止し、もう一度動画の再生をはじめると、カウントダウンタイマーも動き出します。

これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

僕が知るかぎり、このような仕組みはこれまで有料のツールでしか実現できませんでした。

それが、今や、完全に無料で誰でも自由につかうことができるようになりました。

科学の勝利ですね(笑)。

あと、誰でもかんたんにつかえるようにするために、設定項目もできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

MITライセンスってなに?どうやって使うの?商用でも無料で使えるの?

By Yukinobu Kurata (倉田幸暢)

MITライセンス(エムアイティーライセンス)(MIT License)というのは、オープンソースソフトウェアのライセンスのひとつで、無料で自由につかうことができる(制限がほんのすこししかない)のが特徴です。 (*1)

MITライセンスのもとで配布されているものは、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます。

そのために守らなくてはいけない条件は、「著作権表示」と「MITライセンスの全文」を記載する、という条件だけです。(なお、「MITライセンスの全文」を記載する代わりに、MITライセンスの全文が記載されているウェブページのURLを記載することも認められています。)

下記の文章は、MITライセンスの内容を、わかりやすく意訳したものです。

「MITライセンスの全文」の意訳
下記の条件を受け入れていただけるのであれば、誰でも自由に無料で、このソフトウェアをつかっていただくことができます。

このソフトウェアをコピーしてつかったり、配布したり、変更を加えたり、変更を加えたものを配布したり、商用利用したり、有料で販売したり、なんにでも自由につかってください。

このソフトウェアの著作権表示(「Copyright (c) 年 作者名」)と、このライセンスの全文(英語の文章)を、ソースコードのなかや、ソースコードに同梱したライセンス表示用の別ファイルなどに掲載してください。

このソフトウェアにはなんの保証もついていません。たとえ、このソフトウェアを利用したことでなにか問題が起こったとしても、作者はなんの責任も負いません。

「著作権表示」と「ライセンスの全文」の掲載については、ソースコードのなかや、同梱の別ファイルなどに下記のような記述を掲載するだけでかまいません。

続きを読む


脚注
  1. (MITライセンス(MIT License)は、ほか名前で呼ばれることもあります。ほかの呼び方としては、「MIT/Xライセンス」(MIT/X license)、「MIT / Xウィンドウシステムライセンス」(MIT / X Window System License)、「Xウィンドウシステムライセンス」(X Window System license)、「X11ライセンス」(X11 License)、「Xライセンス」(X License)などと呼ばれることもあります。)[↩ Back]

YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例

By Yukinobu Kurata (倉田幸暢)

ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。

また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤーなどの情報についてもお話します。

さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。

「パラメータ」をつかうと、どんなことができるの?

まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。

実例1: 自動的に再生が始まり、巻き戻しや、早送りはできない

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

これによって、自動的に再生が始まり、操作は一時停止しかできないため、巻き戻しや、早送りはできません。

(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/OW37a07RMTs?controls=0&showinfo=0&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例2: コントロールバーを非表示にする

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xye1sEOG0CA?rel=0&modestbranding=0&showinfo=0&fs=0&controls=0" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例3: 複数の動画を連続して再生させ、それを繰り返す

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xye1sEOG0CA?playlist=ZMdkZeCzj44,tQroTplYWqg&loop=1" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例4: 一部分だけを再生する

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xye1sEOG0CA?start=114&end=151" frameborder="0" allowfullscreen></iframe>

これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。

各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。

もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

目次
  1. 「パラメータ」をつかうと、どんなことができるの?
    1. 実例1: 自動的に再生が始まり、巻き戻しや、早送りはできない
    2. 実例2: コントロールバーを非表示にする
    3. 実例3: 複数の動画を連続して再生させ、それを繰り返す
    4. 実例4: 一部分だけを再生する
  2. 埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
    1. HTML5形式の埋め込み動画プレーヤー
    2. (非推奨)Flash形式の埋め込み動画プレーヤー - 「Flash(AS3)プレーヤー」
    3. <iframe>タグ(HTML5形式 & Flash形式)
      1. <iframe>タグ(HTML5形式の動画プレーヤーの場合)
      2. (非推奨)<iframe>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」)の場合)
    4. (非推奨)<object>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」))
  3. 「パラメータ」の使い方
  4. 再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
    1. 「rel=0」(「関連動画」を非表示にする)
    2. 「rel=1」(「関連動画」を表示する)
  5. コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
    1. 「modestbranding=1」(コントロールバーのYouTubeロゴを非表示にする)
    2. 「modestbranding=0」(コントロールバーのYouTubeロゴを表示する)
  6. 自動的に再生を始める - 「autoplay」(オートプレイ)
  7. 繰り返し再生させる - 「loop」(ループ)
    1. 通常の動画プレーヤーで「loop」をつかう場合
    2. 「再生リスト」の動画プレーヤーで「loop」をつかう場合
      1. HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
      2. (非推奨)Flash形式(<object>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
  8. コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
    1. 「controls=0」(コントロールバーを非表示にする)
    2. (非推奨)「controls=1」(コントロールバーを表示する)(「Flash(AS3)プレーヤー」形式)
    3. (非推奨)「controls=2」(コントロールバーを表示する & パフォーマンス向上)(「Flash(AS3)プレーヤー」形式)
  9. 全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
    1. 「fs」をHTML5形式の動画プレーヤーでつかう
      1. 「fs=0」(全画面表示ボタンを非表示にする)(HTML5形式の動画プレーヤーの場合)
      2. 「fs=0」(全画面表示ボタンを非表示にする & 全画面表示ができないようにする)(HTML5形式の動画プレーヤーの場合)
    2. (非推奨)「fs=0」(全画面表示ボタンを非表示にする)(「Flash(AS3)プレーヤー」)の場合)
    3. (非推奨)「fs=1」(全画面表示ボタンを表示する)(「Flash(AS3)プレーヤー」)の場合)
  10. iOS 上で動画をインライン表示で再生させる - 「playsinline」(プレイズインライン)
    1. 「playsinline=1」(iOS 上で動画を、インライン表示で再生させる)
    2. 「playsinline=0」(iOS 上で動画を、全画面表示で再生させる)
  11. タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
    1. 「showinfo=0」(タイトルバーを非表示にする)
    2. 「showinfo=1」(「再生リスト」のサムネイルを表示させる)(「再生リスト」の動画プレーヤーの場合)
    3. (参考)(非推奨)「showinfo」を明示的に設定しない場合(「再生リスト」のサムネイルを表示しない)(「再生リスト」の動画プレーヤーの場合)
  12. 再生を開始する位置を指定する – 「start」(スタート)
  13. 再生を終了する位置を指定する – 「end」(エンド)
  14. 「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
    1. HTML5形式の動画プレーヤー(<iframe>タグ)をつかった「再生リスト」の動画プレーヤー
    2. (非推奨)Flash形式の動画プレーヤー(<object>タグ)をつかった「再生リスト」の動画プレーヤー
      1. (参考)「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
    3. 特定のユーザーの公開動画のリスト(「アップロード動画」)を動画プレーヤーとして埋め込む
    4. YouTube動画検索の検索結果の動画のリストを動画プレーヤーとして埋め込む
      1. 検索キーワードとして日本語の文字列を設定する場合の事例
      2. 検索キーワードとして使用する日本語の文字列を、「パーセントエンコーディング」(URLエンコード)してから、検索キーワードとして使用する場合
  15. 複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
    1. 「playlist」をつかった「再生リスト」の動画プレーヤー(HTML5形式)
    2. (非推奨)「playlist」をつかった「再生リスト」の動画プレーヤー(「Flash(AS3)プレーヤー」形式)、「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
  16. 「進行状況バー」(プログレスバー、シークバー)の色を変える - 「color」(カラー)
    1. 「color=white」: 「進行状況バー」(プログレスバー、シークバー)白色
    2. 「color=red」: 「進行状況バー」(プログレスバー、シークバー)赤色
  17. 「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
    1. 「iv_load_policy=1」(「アノテーション」表示)
    2. 「iv_load_policy=3」(「アノテーション」非表示)
  18. キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
    1. 「disablekb=1」(キーボード操作無効)(HTML5形式の動画プレーヤーの場合)
    2. 「disablekb=0」(キーボード操作有効)(HTML5形式の動画プレーヤーの場合)
    3. (非推奨)「disablekb=1」(キーボード操作無効)(「Flash(AS3)プレーヤー」形式)
    4. (非推奨)「disablekb=0」(キーボード操作有効)(「Flash(AS3)プレーヤー」形式)
  19. 字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
    1. 「cc_load_policy=1」(字幕を表示)(HTML5形式の動画プレーヤーの場合)
    2. 「cc_load_policy」のパラメータを設定していない場合(HTML5形式の動画プレーヤーの場合)
    3. (非推奨)「cc_load_policy=1」(字幕を表示)(「Flash(AS3)プレーヤー」形式)
    4. (非推奨)「cc_load_policy」のパラメータを設定していない場合(「Flash(AS3)プレーヤー」形式)
  20. 「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
    1. 「enablejsapi」(イネイブル JS API)
    2. 「playerapiid」(プレーヤーAPI ID)
    3. 「origin」(オリジン)
  21. 動画プレーヤーのユーザーインターフェース上に表示される言葉の言語を指定する - 「hl」(ホストランゲージ)
    1. 「hl=en」(ツールチップの文字の言語を、英語にする)
    2. 「hl=zh」(ツールチップの文字の言語を、中国語にする)
    3. 「hl=es」(ツールチップの文字の言語を、スペイン語にする)
  22. (参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
    1. 「allowfullscreen」無し(全画面表示ができないようにする)
    2. 「allowfullscreen」有り(全画面表示ができるようにする)
  23. (参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
    1. 「frameborder="1"」(周囲に枠線をつける)
    2. 「frameborder="0"」(周囲に枠線をつけない)
  24. (廃止)コントロールバーと「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
    1. (廃止)「autohide=1」(コントロールバーと「進行状況バー」(プログレスバー、シークバー)が隠れる)
    2. (廃止)「autohide=0」(コントロールバーと「進行状況バー」(プログレスバー、シークバー)を表示させ続ける)
    3. (廃止)「autohide=2」(「進行状況バー」(プログレスバー、シークバー)が目立たないようになる)
  25. (廃止)最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
    1. (廃止)「vq=hd1080」: 画質1080p(HD画質(高精細度))
    2. (廃止)「vq=hd720」: 画質720p(HD画質(高精細度))
    3. (廃止)「vq=large」: 画質480p
    4. (廃止)「vq=medium」: 画質360p
    5. (廃止)「vq=small」: 画質240p
  26. (参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
  27. 動画プレーヤーを制御するための3つのAPI
    1. 「IFrameプレーヤーAPI」
    2. 「JavaScriptプレーヤーAPI」
    3. (非推奨)「Flash(AS3)プレーヤーAPI」
  28. 参考サイト、YouTube公式ヘルプページ
    1. 「YouTube埋め込み動画プレーヤーのパラメータ」関連
    2. 「YouTubeプレーヤーAPI」関連
      1. 「IFrameプレーヤーAPI」のリファレンス
      2. (非推奨)「Flash(AS3)プレーヤーAPI」のリファレンス
      3. 「JavaScriptプレーヤーAPI」のリファレンス
    3. YouTube埋め込み動画プレーヤーの作成ツール/デモ
    4. その他
  29. おもしろい組み合わせ方を思いついたら、ぜひ教えてください
    1. YouTube APIについての関連記事
    2. YouTubeのうまい使い方についての関連記事

続きを読む