Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web動画、WordPressで使ってみよう!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015
Web 動画
WordPress で使ってみよう
2015/8/29 (土) WordFes Nagoya 2015
@ 名...
2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015
本日の目次
自己紹介・事例
Web 動画とは・活用方法
Web 動画で必要な道具やサービス
WordPress で動画を扱う...
2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015
本日の目次
自己紹介・事例
Web 動画とは・活用方法
Web 動画で必要な道具やサービス
WordPress で動画を扱う...

YouTube videos are no longer supported on SlideShare

View original on YouTube

Check these out next

1 of 147 Ad

Web動画、WordPressで使ってみよう!

Web 動画とは、YouTube などの動画共有サイトにあるオンライン動画ではなく、背景や、商品紹介の素材のひとつとして使われる動画のことです。

このセミナーでは、Web動画とは何か、そして、WordPress では、どのように動画を活用できるのか。おすすめ公式プラグインを紹介します。

Web 動画とは、YouTube などの動画共有サイトにあるオンライン動画ではなく、背景や、商品紹介の素材のひとつとして使われる動画のことです。

このセミナーでは、Web動画とは何か、そして、WordPress では、どのように動画を活用できるのか。おすすめ公式プラグインを紹介します。

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to Web動画、WordPressで使ってみよう! (20)

More from Katz Ueno (19)

Advertisement

Recently uploaded (20)

Web動画、WordPressで使ってみよう!

  1. 1. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 WordPress で使ってみよう 2015/8/29 (土) WordFes Nagoya 2015 @ 名古屋工業大学 1
  2. 2. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 本日の目次 自己紹介・事例 Web 動画とは・活用方法 Web 動画で必要な道具やサービス WordPress で動画を扱うための準備 WordPress 動画導入 初級編:記事に入れる 上級編:カスタム投稿対応 おまけ: おすすめ WordPress 公式プラグイン 2
  3. 3. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 本日の目次 自己紹介・事例 Web 動画とは・活用方法 Web 動画で必要な道具やサービス WordPress で動画を扱うための準備 WordPress 動画導入 初級編:記事に入れる 上級編:カスタム投稿対応 おまけ: おすすめ WordPress 公式プラグイン 今日の内容はスライドシェアで公開 3
  4. 4. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 自己紹介 4
  5. 5. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com もちろん WordPress コンクリートファイブジャパン株式会社 取締役 Chief Communciations Officer http://concrete5.co.jp 名古屋で concrete5 CMS の普及 5
  6. 6. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 1980年 三重県四日市市生まれ アメリカに留学→映画制作 → 雑誌編集 → Web SK Word → コンクリートフ ァイブジャパン ディレクション・時々開発 TOEIC 990点 (最高得点) 5時間勉強して1発でゲット Katz 自己紹介 6
  7. 7. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 concrete5 (CMS) 日本語版を作ってます concrete5-japan.org 7
  8. 8. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 コンなご concrete5 名古屋 ユーザーグループ 名駅近く「ベースキ ャンプ名古屋」 月2回勉強会 詳細は concrete5nagoya.doorkeeper.jp 8
  9. 9. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 書籍の紹介 concrete5 公式活用ガイドブ ック 買ってねー ● マイナビ ● 3542円 ● 書籍 & 電子書籍版 9
  10. 10. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 他の CMS のことは置いといて 10
  11. 11. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WordBench 名古屋 で活動してます 毎月勉強会開催中! 出会いもあるよ! 詳細は http://wordbench.org/groups/nagoya/ Photo by Kumagami 11
  12. 12. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WordFes Nagoya 2015 WordFes Nagoya 2015 副実行委員長 サイトディレクション 2015.wordfes.org 12
  13. 13. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WordPress プラグイン開発してます 公式ディレクトリで公開中 Ustream Status Ustream で生放送中かをウィジェットで表示できるsシ ンプルなプラグイン Twitcasting Status ツイキャスで生放送中かをウィジェットで表示できる シンプルなプラグイン 13
  14. 14. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画とのかかわり 14
  15. 15. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Katz 自己紹介 1999〜 ロサンゼルスで映画留学 2001〜 在学中から Web で動画を扱う仕事 2002〜 カリフォルニア州立大学 ロングビーチ校 映画学部 2005〜 インディーズ映画に参画 (劇場公開映画、全米ドラマ、ドキュメンタリ ー) バイトでナイジェリアのTVCMやピスタチオ工 場の紹介ビデオ制作等も 15
  16. 16. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Katz 自己紹介 携わった映画の数々 16
  17. 17. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 最新作「Isolated」 17
  18. 18. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 最新作「Isolated」 18
  19. 19. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 東日本大震災を英語で Ustream 3ヶ月で100万PV 米ABC アルジャジーラ ワシントン・ポスト ライフハッカー ハフィントン・ポスト 中日新聞・東海ウォーカー などにも掲載 米ABC 中日新聞 アルジャジーラ Katz 自己紹介 19
  20. 20. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 NAMO (NAgoya Movie Obenkyokai) 名古屋で Web 動画を勉強するための勉強会グループ 名駅近く「ベースキャンプ名古屋」 不定期開催 詳細は namo.doorkeeper.jp 20
  21. 21. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは? 21
  22. 22. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 とは? Katz が勝手に考える Web 動画の定義 22
  23. 23. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 とは? YouTube? ニコニコ? Ustream? Facebook 23
  24. 24. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 とは? YouTube? ニコニコ? Ustream? Facebook 24
  25. 25. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Toogl) 25
  26. 26. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Toogl) 26
  27. 27. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Ameba Ownd) 27
  28. 28. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Ameba Ownd) 28
  29. 29. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Balletone DAYZ) 29
  30. 30. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) サンプル ここ (Balletone DAYZ) 30
  31. 31. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 31
  32. 32. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 1. Web ページの素材 32
  33. 33. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 1. Web ページの素材 YouTube・ニコ動・Ustream との違い ウェブページはあくまでもフレーム 映像単体がコンテンツ 33
  34. 34. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 1. Web ページの素材 YouTube・ニコ動・Ustream との違い ウェブページはあくまでもフレーム 映像単体がコンテンツ 例:ニコニコ動画にYouTube動画を転載してもコ ンテンツとして成立 34
  35. 35. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 1. Web ページの素材 YouTube・ニコ動・Ustream との違い ウェブページはあくまでもフレーム 映像単体がコンテンツ 例:ニコニコ動画にYouTube動画を転載してもコ ンテンツとして成立 Web動画はそのサイトでしか成立しない 35
  36. 36. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 2. スペースの節約 36
  37. 37. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 2. スペースの節約 写真だと複数枚必要 37
  38. 38. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 2. スペースの節約 写真だと複数枚必要 動画だと一個でOK 38
  39. 39. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 2. スペースの節約 写真だと複数枚必要 動画だと一個でOK というか、画面いっぱい使える 39
  40. 40. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 3. 表現・説得力UP 40
  41. 41. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 3. 表現・説得力UP 動きがある! 41
  42. 42. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 3. 表現・説得力UP 動きがある! 動作がわかる 42
  43. 43. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 3. 表現・説得力UP 動きがある! 動作がわかる 感情を伝えられる 43
  44. 44. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画の特徴 3. 表現・説得力UP 動きがある! 動作がわかる 感情を伝えられる ※ 音声は、ちょっと別の話 44
  45. 45. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) 素材+動き+感情 サンプル 45
  46. 46. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) 素材+動き+感情 サンプル ここ (MUJI to Sleep) 参考: LIG「ビデオ動画を背景に使った、ユーザの印象に残るサイトまとめ25選」 インバウンドブログ「【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ」 46
  47. 47. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画とは(Katz の勝手な定義) 素材+動き+感情 サンプル ここ (MUJI to Sleep) 47
  48. 48. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 素材 + 動き + 感情 48
  49. 49. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 素材 + 動き + 感情 売上UP 49
  50. 50. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今? Web 動画 50
  51. 51. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? やっと、技術が追いついてきた 51
  52. 52. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? やっと、技術が追いついてきた 52
  53. 53. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 53 カメラ
  54. 54. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 54 カメラ iPhone
  55. 55. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 55 カメラ iPhone 一眼レフカメラ
  56. 56. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 56 カメラ iPhone 一眼レフカメラ = プロ並みの画質
  57. 57. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 57 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる
  58. 58. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 58 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア
  59. 59. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 59 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア スマホアプリ
  60. 60. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 60 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア スマホアプリ iMovie
  61. 61. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 61 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア スマホアプリ iMovie Adobe CC
  62. 62. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 62 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア スマホアプリ iMovie Adobe CC -> Adobe Premiere
  63. 63. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 63 カメラ iPhone 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ソフトウエア スマホアプリ iMovie Adobe CC -> Adobe Premiere (プロ用ソフト!)
  64. 64. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 64 HTML5
  65. 65. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 65 HTML5 Flash の縛り
  66. 66. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 66 HTML5 Flash の縛り
  67. 67. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 67 HTML5 Flash の縛り <video> タグ
  68. 68. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 68 HTML5 Flash の縛り <video> タグ = 自由度UP
  69. 69. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 69 HTML5 Flash の縛り <video> タグ = 自由度UP 例:
  70. 70. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 70 HTML5 Flash の縛り <video> タグ = 自由度UP 例:デジタルサイネージ
  71. 71. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 71 HTML5 Flash の縛り <video> タグ = 自由度UP 例:デジタルサイネージ
  72. 72. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 なぜ今 Web 動画? 72 HTML5 Flash の縛り <video> タグ = 自由度UP 動画は 4:3 or 16:9 である必要がない
  73. 73. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 73
  74. 74. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画 「今」の可能性 74 ガッテンしていただけましたか〜?( ̄ー ̄)ニヤリ
  75. 75. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 ただし! 75
  76. 76. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 ただし! 作り方を覚えないとダメ! 76
  77. 77. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 悪い Web 動画の例 長い 映像がブレてる 音声が要る 動きがない 感情が伝わらない 77
  78. 78. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画で必要な もの、道具やサービス 78
  79. 79. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画で必要な もの、道具やサービス 79 簡単バージョン
  80. 80. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画で必要なもの 企画 動画 素材 サイト 80
  81. 81. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画で必要な道具 カメラ or 素材 編集ソフト・エンコーディングソフト Web ソフト + CMS (WordPress) 81
  82. 82. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要 82
  83. 83. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要 企画! 83
  84. 84. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要 企画! (まあどの分野でも同じ) 84
  85. 85. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ ポイント なぜ動画を使う必要があるのか? どのような Web 動画が効果的か? WordPress では どのように Web 動画を扱うか? 85
  86. 86. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ ポイント なぜ動画を使う必要があるのか? どのような Web 動画が効果的か? WordPress では どのように Web 動画を扱うか? 86 本来ならここの話も重要。他の動画サイトを見て Web 動画が必要か、その内容がどのようなものが 最適かを見極めよう
  87. 87. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ ポイント なぜ動画を使う必要があるのか? どのような Web 動画が効果的か? WordPress では どのように Web 動画を扱うか? 87
  88. 88. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ ポイント なぜ動画を使う必要があるのか? どのような Web 動画が効果的か? WordPress では どのように Web 動画を扱うか? 88
  89. 89. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ ポイント なぜ動画を使う必要があるのか? どのような Web 動画が効果的か? WordPress では どのように Web 動画を扱うか? 89 今日は WordPress で動画を実装するために 気をつけたいことを中心に解説します
  90. 90. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ まず、そもそも動画をどこに保存? 動画ファイルをサーバーにUPしなければ いけないか? YouTube や Vimeo などにアップロードし 埋め込みだけで可能か 90
  91. 91. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ まず、そもそも動画をどこに保存? 動画ファイルをサーバーにUPしなければ いけないか? YouTube や Vimeo などにアップロードし 埋め込みだけで可能か 91 今日はこちらを中心に解説
  92. 92. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ まず、そもそも動画をどこに保存? 動画ファイルをサーバーにUP 利点・欠点 YouTube や Vimeo の制限に囚われたくない サイズを自由に決めたい 自分でビデオをエンコードできる プレイヤーが要らない or カスタマイズしたい 92
  93. 93. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ まず、そもそも動画をどこに保存? 動画ファイルをサーバーにUP 気をつけないといけないこと サーバーが動画ファイルをサポートしているか サポートしなくても .htaccess で設定を加えれば 追加可能か データ転送量に上限がある場合は注意 93
  94. 94. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ .htaccess で動画ファイルをUPできるよう にする方法 .htaccess サンプルコード AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm 94 レンタルサーバーによっては設定済み or 設定できない場合があります。 できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう 対応をお願いするのはタダです!
  95. 95. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 Web 動画でも一番重要:企画 ■ まず、そもそも動画をどこに保存? YouTube や Vimeo などにアップロード エンコードの必要なし 簡単 プレイヤーやブラウザ判定を勝手にしてくれる WordPress でデフォルトで対応していたりプラグイ ンが豊富にある 95
  96. 96. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WordPress で動画を扱う方法 4つの方法 1.記事の中に動画を埋め込む (mp4 や YouTube 動画) 2.カスタム投稿タイプを使う (自作できる人向け) 3.プラグインを使う 4.テーマを使う 96
  97. 97. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WordPress で動画を扱う方法 4つの方法 1.記事の中に動画を埋め込む (mp4 や YouTube 動画) 2.カスタム投稿タイプを使う (自作できる人向け) 3.プラグインを使う 4.テーマを使う (公式テーマディレクトリには動画が使えそうなテーマはまだ登録されず) 97
  98. 98. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画形式の基礎知識 Web で使える動画 HTML5で主にサポートしている動画形式は下記の3つ 98 mp4 Apple が開発したMPEG-4動画。H.264エンコ ーディングが主。IE8 を含めて多くのブラウザ で使える ogv オープンソースの動画形式。Theoraエンコーデ ィングが主。 webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポート
  99. 99. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画形式の基礎知識 Web で使える動画 HTML5で主にサポートしている動画形式は下記の3つ 99 mp4 Apple が開発したMPEG-4動画。H.264エンコ ーディングが主。IE8 を含めて多くのブラウザ で使える ogg オープンソースの動画形式。Theoraエンコーデ ィングが主。 webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポート 2015年8月時点では、mp4 で動画を用意する。ただ WebM はファイルサイズが小さくパフォーマンスが良 く、Google が作っているので、将来的には WebMに なるだろうと多くの人が予測。
  100. 100. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの基本 HTML5 ビデオタグはこんなに便利 100 <video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像"> </video>
  101. 101. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの基本 HTML5 ビデオタグはこんなに便利 101 <video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像"> </video> 「autoplay loop」にすると自動ループ再生に 「control」はブラウザのコントロールが開く 「muted」は音声ミュート
  102. 102. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの基本 HTML5 ビデオタグはこんなに便利 102 <video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像"> </video> ビデオの素材ファイルを読み込むところ。
  103. 103. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの基本 HTML5 ビデオタグはこんなに便利 103 <video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像"> </video> videoタグをサポートしていない古いブラウザが表示 する部分。ここでは画像を読み込んでいるが普通の テキストなどでもOK
  104. 104. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう① 104
  105. 105. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう① ビジュアルエディタを使う 105
  106. 106. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 パブリックドメインの動画素材サイト Coverr (http://www.coverr.co/) 106
  107. 107. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 パブリックドメインの動画素材サイト Coverr (http://www.coverr.co/) 107 Web動画素材を簡単にゲットできる! しかも JPG 画像も!
  108. 108. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 記事の中に動画を埋め込む 108
  109. 109. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう ファイルをアップロードして選択 109
  110. 110. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 「添付ファイルの表示設定」 110
  111. 111. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 記事の中に挿入 111
  112. 112. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 鉛筆アイコン (編集) をクリック 112 鉛筆マークを出すためにちょっと、 コツが入ります。
  113. 113. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 動画の編集画面 113
  114. 114. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう 動画の編集画面 114
  115. 115. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 記事に動画を埋め込んでみよう デフォルトの投稿画面で気をつけたいこと ビデオ素材は1形式だけしか使えない (mp4 が無難) ビデオタグが使えない時はビデオファイルへのリンク が表示されるだけ。 115
  116. 116. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう② 116
  117. 117. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう② video ショートコード 117
  118. 118. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video ショートコード (WP 3.6 から) [video] 2つ以上のビデオ素材を指定できる HTML5 の video タグのオプションがほぼ全て指定で きる! コードがわからないといけないので、 ちょっと敷居が高い 118
  119. 119. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video ショートコード (WP 3.6 から) 例: [video mp4="[ファイルパス].mp4" ogv="[ファイルパス].ogv" webm="[ファイルパス].webm"] 119
  120. 120. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video ショートコード (WP 3.6 から) 他に使えるオプション (Codexより) 120 オプション 指定値 デフォルト値 src “動画ファイルへのパス” poster “画像ファイルへのパス” なし loop “on” / “off” “off” autoplay “on” / “off” “off” preload “metadeta” / “none” / “auto” “metadeta” width “ピクセル” 動画のオリジナルサイズ height “ピクセル” 動画のオリジナルサイズ
  121. 121. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう③ カスタム投稿タイプ 121 ちょっと上級編
  122. 122. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 実際に入れてみよう③ カスタム投稿タイプ 122 ちょっと上級編 Advanced Custom Field プラグインを 使って実装してみる
  123. 123. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ さきほどの video タグ、画像、リンクなどを 入力できるフィールドを作成 テーマファイルをカスタマイズして任意の場 所にビデオを1個表示 WP_Query を駆使して、複数動画や背景動画 を表示させるような仕組みを作れば 最強! 123
  124. 124. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ mp4 カスタムフィールドの例 124
  125. 125. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ mp4 カスタムフィールドの例 125
  126. 126. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ mp4 カスタムフィールドの例 126
  127. 127. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ mp4 カスタムフィールドの例 127 webm や ogv 形式を作成する
  128. 128. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ あとはお好きな様に video タグをサポートしていない ブラウザ用の画像 autoplay などのオプションを 選択できるようにするか タイトル・説明・リンクなどを 付け加える 128
  129. 129. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ あとは、video タグをサポートしていない ブラウザ用の画像 autoplay などのオプションを 選択できるようにするか タイトル・説明・リンクなどを 付け加える 129 webm webm
  130. 130. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ コードのサンプル 130
  131. 131. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ コードのサンプル の前に・・・復習 131
  132. 132. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの復習 HTML5 ビデオタグは 132 <video width="640" height="360" autoplay> <source src="[ファイル].mp4" type="video/mp4"> <source src="[ファイル].webm" type="video/webm"> <img src="[ファイル].jpg" alt="読み込む画像"> </video>
  133. 133. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 カスタム投稿タイプ コードのサンプル なので 133
  134. 134. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 video タグの復習 HTML5 ビデオタグは 134 <video width="640" height="360" autoplay> <source src="[ファイル].mp4" type="video/mp4"> <source src="[ファイル].webm" type="video/webm"> <img src="[ファイル].jpg" alt="読み込む画像"> </video>
  135. 135. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 テーマファイルに書く呪文 テーマファイルには 135 <video width="640" height="360" autoplay> <source src="<?php the_field('mp4'); ?>" type="video/mp4"> <source src="<?php the_field('webm'); ?>" type="video/webm"> <img src="<?php the_field('altimage'); ?>" alt="<?php the_field('title'); ?>"> </video>
  136. 136. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 結構簡単にできる! 136 テーマ作成経験のある方は
  137. 137. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 WP_Query な Loop を 利用すると 137 可能性は無限大!
  138. 138. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 おまけ おすすめ動画プラグイン 138 時間がなくなっている予定なので・・・ YouTube や Vimeo などの動画を手軽にサイ トで埋め込むことができるプラグイン等
  139. 139. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup Vimeo Shortcode Vimeoを簡単に埋め込みで きるシンプルなプラグイン 139
  140. 140. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup Vimeo Video Post Lite Vimeo のビデオを埋め込む ための機能がたくさんあるア ドオン。 140
  141. 141. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup 141 Advanced Responsive Video Embedder たくさんのビデオ共有サービ スのビデオを埋め込むことが できるプラグイン。
  142. 142. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup 142 Fluid Video Embeds レスポンシブ (ブラウザのサ イズが変わってもサイズを自 動的に調整してくれる) 対応 なビデオ埋め込みプラグイン。 YouTube や Vimeo
  143. 143. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup 143 Simple Slideshow Manager スライドショープラグインだ けど、YouTube や Vimeo の 動画もSlideに含むことがで きるプラグイン
  144. 144. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015 動画関連プラグイン Pickup 144 Remote Media Library メディアライブラリーに YouTube、Vimeo のビデオ や、Flickr・Instagram の写 真を閲覧。WordPress 管理 画面からビデオ・写真を探せ る
  145. 145. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015145 参考記事 LIG ビデオ動画を背景に使った、ユーザの印象に残るサイ トまとめ25選 インバウンドブログ 【WEBデザイン10選】背景に動画を大胆に使った日本 のサイトまとめ Webクリエーターズボックス 背景に動画を使ったWebサイトの作り方
  146. 146. 2015.8.29 (土) Web動画 WordPress で使ってみよう - WordFes Nagoya 2015146 ありがとうございました! Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com

×