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

More Related Content

What's hot

カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
Katz Ueno
 
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
Kitani Kimiya
 
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
 
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライドGPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
 
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデルWordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
Hidekazu Ishikawa
 
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
 
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
 
airyのご紹介
airyのご紹介airyのご紹介
airyのご紹介
Teruaki Murakami
 
Learning from theme review requirements
Learning from theme review requirementsLearning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
 
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
Chieko Aihara
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
 
WP REST API の活用事例と今後
WP REST API の活用事例と今後WP REST API の活用事例と今後
WP REST API の活用事例と今後
Yuusuke Yoshida
 
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Yuzuru Sano
 
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポートconcrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
Katz Ueno
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
 
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
Masahiro Nakashima
 
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
Junko Nukaga
 
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
Katz Ueno
 
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
Yuzuru Sano
 

What's hot (20)

カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
カスタムテンプレートを極める - 第38回 コンなご勉強会 (concrete5 名古屋UG)
 
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
 
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
 
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライドGPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
 
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデルWordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの􏰀 テーマ掲載とビジネスモデル
 
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
 
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
 
airyのご紹介
airyのご紹介airyのご紹介
airyのご紹介
 
Learning from theme review requirements
Learning from theme review requirementsLearning from theme review requirements
Learning from theme review requirements
 
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
 
WP REST API の活用事例と今後
WP REST API の活用事例と今後WP REST API の活用事例と今後
WP REST API の活用事例と今後
 
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
 
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポートconcrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
 
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
 
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
 
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
 

Viewers also liked

バルセロナ旅行のご提案
バルセロナ旅行のご提案バルセロナ旅行のご提案
バルセロナ旅行のご提案
natsuki551
 
James walker - Lion expanding packing
James walker - Lion expanding packingJames walker - Lion expanding packing
James walker - Lion expanding packing
Banana Yuan
 
京の食文化ハンドブック Leaf mini 増刊号
京の食文化ハンドブック Leaf mini 増刊号京の食文化ハンドブック Leaf mini 増刊号
京の食文化ハンドブック Leaf mini 増刊号
京都をつなぐ無形文化遺産
 
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
news HACK by Yahoo!ニュース
 
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
news HACK by Yahoo!ニュース
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
 
CloudSpiral 2013年度 UML講義 2日目
CloudSpiral 2013年度 UML講義 2日目CloudSpiral 2013年度 UML講義 2日目
CloudSpiral 2013年度 UML講義 2日目Shin Matsumoto
 
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
Akira Kitauchi
 
Elasticsearchベースの全文検索システムFess
Elasticsearchベースの全文検索システムFessElasticsearchベースの全文検索システムFess
Elasticsearchベースの全文検索システムFess
Shinsuke Sugaya
 
131111 東工大授業「ロボット技術」資料
131111 東工大授業「ロボット技術」資料131111 東工大授業「ロボット技術」資料
131111 東工大授業「ロボット技術」資料openrtm
 
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
Katz Ueno
 
マジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gataマジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gata
Ni-gata Supika
 
WordPress
WordPressWordPress
WordPress
Eleanor Trinidad
 
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクションAimi Sata
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
Kazue Igarashi
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?tokumotonahoko
 

Viewers also liked (20)

バルセロナ旅行のご提案
バルセロナ旅行のご提案バルセロナ旅行のご提案
バルセロナ旅行のご提案
 
James walker - Lion expanding packing
James walker - Lion expanding packingJames walker - Lion expanding packing
James walker - Lion expanding packing
 
京の食文化ハンドブック Leaf mini 増刊号
京の食文化ハンドブック Leaf mini 増刊号京の食文化ハンドブック Leaf mini 増刊号
京の食文化ハンドブック Leaf mini 増刊号
 
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
Yahoo!ニュースの事例で学ぶオウンドメディア立ち上げ術(2015年4月13日)
 
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
Yahoo!ニュースが考える「コンテンツマーケティング」(2015年4月20日)
 
CMSI計算科学技術特論A(13) 古典分子動力学法の高速化2
CMSI計算科学技術特論A(13) 古典分子動力学法の高速化2CMSI計算科学技術特論A(13) 古典分子動力学法の高速化2
CMSI計算科学技術特論A(13) 古典分子動力学法の高速化2
 
CMSI計算科学技術特論A(12) 古典分子動力学法の高速化1
CMSI計算科学技術特論A(12) 古典分子動力学法の高速化1CMSI計算科学技術特論A(12) 古典分子動力学法の高速化1
CMSI計算科学技術特論A(12) 古典分子動力学法の高速化1
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
 
CloudSpiral 2013年度 UML講義 2日目
CloudSpiral 2013年度 UML講義 2日目CloudSpiral 2013年度 UML講義 2日目
CloudSpiral 2013年度 UML講義 2日目
 
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
企業・業界情報プラットフォームSPEEDAにおけるElasticsearchの活用
 
Elasticsearchベースの全文検索システムFess
Elasticsearchベースの全文検索システムFessElasticsearchベースの全文検索システムFess
Elasticsearchベースの全文検索システムFess
 
131111 東工大授業「ロボット技術」資料
131111 東工大授業「ロボット技術」資料131111 東工大授業「ロボット技術」資料
131111 東工大授業「ロボット技術」資料
 
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
 
マジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gataマジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gata
 
WordPress
WordPressWordPress
WordPress
 
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 

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

第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
Katz Ueno
 
concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11
Katz Ueno
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
Katz Ueno
 
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
Kazunori Tokoo
 
妊娠子育て中にReact js動画コースをudemyで公開するまで
妊娠子育て中にReact js動画コースをudemyで公開するまで妊娠子育て中にReact js動画コースをudemyで公開するまで
妊娠子育て中にReact js動画コースをudemyで公開するまで
Wakana Yoshizawa
 
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
 
要求開発 with You
要求開発 with You要求開発 with You
要求開発 with You
Haruo Sato
 
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
G2 Studios
 
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App InventorHands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
 
Azure Functions あれこれ
Azure Functions あれこれAzure Functions あれこれ
Azure Functions あれこれ
Yasuaki Matsuda
 
NetOps Coding#1 のお知らせ
NetOps Coding#1 のお知らせNetOps Coding#1 のお知らせ
NetOps Coding#1 のお知らせ
Taiji Tsuchiya
 
awsでも簡単webクリエーターのphp環境
awsでも簡単webクリエーターのphp環境awsでも簡単webクリエーターのphp環境
awsでも簡単webクリエーターのphp環境
Yukihito Kataoka
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
Katz Ueno
 
Message Analyzer でパケット キャプチャー
Message Analyzer でパケット キャプチャーMessage Analyzer でパケット キャプチャー
Message Analyzer でパケット キャプチャー
彰 村地
 
ビデオ映像配信入門 第1回(WordPress東京勉強会)
ビデオ映像配信入門 第1回(WordPress東京勉強会)ビデオ映像配信入門 第1回(WordPress東京勉強会)
ビデオ映像配信入門 第1回(WordPress東京勉強会)
Atsushi Ogisawa
 
WordCampでコントリビュータデイに参加しよう!
WordCampでコントリビュータデイに参加しよう!WordCampでコントリビュータデイに参加しよう!
WordCampでコントリビュータデイに参加しよう!
Daisuke Takahashi
 
Unity Ads のいろは 動画広告の紹介とコーディング例
Unity Ads のいろは 動画広告の紹介とコーディング例Unity Ads のいろは 動画広告の紹介とコーディング例
Unity Ads のいろは 動画広告の紹介とコーディング例
Yasuyuki Kamata
 

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

第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
第3回 Web 動画 編集講座 〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)
 
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
 
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会
 
concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
 
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
 
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
Web担当者Forumミーティング2015春 基調講演2:「バリバリ仕事を進めるWeb担当者が持つ7つの力」
 
妊娠子育て中にReact js動画コースをudemyで公開するまで
妊娠子育て中にReact js動画コースをudemyで公開するまで妊娠子育て中にReact js動画コースをudemyで公開するまで
妊娠子育て中にReact js動画コースをudemyで公開するまで
 
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
 
要求開発 with You
要求開発 with You要求開発 with You
要求開発 with You
 
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介
 
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App InventorHands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
 
Azure Functions あれこれ
Azure Functions あれこれAzure Functions あれこれ
Azure Functions あれこれ
 
NetOps Coding#1 のお知らせ
NetOps Coding#1 のお知らせNetOps Coding#1 のお知らせ
NetOps Coding#1 のお知らせ
 
awsでも簡単webクリエーターのphp環境
awsでも簡単webクリエーターのphp環境awsでも簡単webクリエーターのphp環境
awsでも簡単webクリエーターのphp環境
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
 
Message Analyzer でパケット キャプチャー
Message Analyzer でパケット キャプチャーMessage Analyzer でパケット キャプチャー
Message Analyzer でパケット キャプチャー
 
ビデオ映像配信入門 第1回(WordPress東京勉強会)
ビデオ映像配信入門 第1回(WordPress東京勉強会)ビデオ映像配信入門 第1回(WordPress東京勉強会)
ビデオ映像配信入門 第1回(WordPress東京勉強会)
 
WordCampでコントリビュータデイに参加しよう!
WordCampでコントリビュータデイに参加しよう!WordCampでコントリビュータデイに参加しよう!
WordCampでコントリビュータデイに参加しよう!
 
Unity Ads のいろは 動画広告の紹介とコーディング例
Unity Ads のいろは 動画広告の紹介とコーディング例Unity Ads のいろは 動画広告の紹介とコーディング例
Unity Ads のいろは 動画広告の紹介とコーディング例
 

More from Katz Ueno

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
Katz Ueno
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
Katz Ueno
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
Katz Ueno
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
Katz Ueno
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
Katz Ueno
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
Katz Ueno
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
Katz Ueno
 
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Katz Ueno
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Katz Ueno
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
Katz Ueno
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Katz Ueno
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Katz Ueno
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
Katz Ueno
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
Katz Ueno
 
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
Katz Ueno
 
オープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015Bオープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015B
Katz Ueno
 
The Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site MultilingualThe Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site Multilingual
Katz Ueno
 

More from Katz Ueno (20)

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
 
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
 
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
 
オープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015Bオープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015B
 
The Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site MultilingualThe Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site Multilingual
 

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

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