Vivaldi

OperaとVivaldiでサッカーW杯を楽しむ方法

サッカー・ワールドカップ・ロシア大会が始まって、はや数週間。今大会は「NHK」と「Tver」の専用サイトとアプリで各試合がストリーミング配信(あと見逃し配信やハイライト配信)されるようになり、非常に視聴しやすい大会となってます!そんなワールドカップの配信およびワールドカップのサイトなどをOperaやVivaldiで楽しむ方法について、今回は記事を書こうと思います!( ´ ▽ ` )ノ

1. Operaのビデオポップアウトだと「ながら」視聴が快適!


Operaは2年前から動画をポップアップ表示する「ビデオポップアウト」機能を搭載していますが、今回の大会でライブストリーミングを行ってる「NHK」と「Tver」ともに、この機能を使用することができました

2018 FIFA ワールドカップ:NHKスポーツオンライン
2018 FIFA ワールドカップ:Tver

なので、例えば他のタブでTwitterをしつつライブストリーミングを視聴したり、あるいは他のアプリで作業していても同じデスクトップで作業してる限りは動画が最前面に表示されるので、他のアプリで作業しながらライブストリーミングを視聴することができます!(>ω<)/

(※注:以下ライブストリーミングのスクショは、すべてモザイクがかかっています。)

TweetDeckでTwitterをしつつ、ビデオポップアウトでライブストリーミングを視聴↓
Opera 53:ビデオポップアウトでTweetDeck開きながらワールドカップを視聴!
Opera 53:ビデオポップアウトでTweetDeck開きながらワールドカップを視聴! posted by (C)kyu3

写真アプリで写真を編集しつつ、ビデオポップアウトでライブストリーミングを視聴↓
写真アプリで写真編集しつつ、Operaのビデオポップアウトでワールドカップを視聴!
写真アプリで写真編集しつつ、Operaのビデオポップアウトでワールドカップを視聴! posted by (C)kyu3

ちなみに「NHK」と「Tver」の動画再生に関する注意点ですが、視聴するには広告ブロック機能および広告ブロック拡張をオフにしないといけないのに加え、たまにそうしなくてもOKな時があるのがよく分からないのですが、サードパーティーCookieを認める設定にしていないと視聴できない時がありました(Opera・Vivaldiともに)!ちなみに『サードパーティーCookie』に関する説明は、以下のリンク先ページを参照して下さい。

サードパーティクッキーって何だっけ? 今さら聞けないHTTP Cookieのキホン:Web担当者Forum
サードパーティCookieを禁止する:Firefoxヘルプ

なので、もし広告ブロック機能(および拡張)をオフにしてても動画が見られない場合は、こちらの設定を変更してみてはいかがでしょう?

あとOperaもVivaldiも「サードパーティーCookieの設定がどこにあるか分からない」と言う場合は、両方とも設定画面に検索窓が用意されてるので、そこに『Cookie』と入力すると設定が表示されます。

Vivaldiの設定画面で『Cookie』と入力↓
Vivaldi 1.16:サードパーティーCookieの設定
Vivaldi 1.16:サードパーティーCookieの設定 posted by (C)kyu3


2. Vivaldiのタブタイリングで2つの試合や複数のカメラを同時視聴可能!


グループリーグ終盤になると2つの試合が同時に行われるようになり、1つの試合を見てても他会場がきになることがありますが、Vivaldiのタブタイリング機能を使えば、2試合同時に見ることもできます!!(*^^*)

左右に「NHK」と「Tver」の異なる試合の映像を同時表示した場合↓
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 3(左右並び)
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 3(左右並び) posted by (C)kyu3

上下に「NHK」と「Tver」の異なる試合の映像を同時を表示した場合↓
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 6(上下表示、UI非表示)
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 6(上下表示、UI非表示) posted by (C)kyu3

さらに今回「NHK」のライブストリーミングの場合、マルチアングルで様々な視点や複数のアングルを同時に見る機能もあります。この機能の説明は、以下のページおよびページ先の動画を参照して下さい。

【2018 FIFA ワールドカップ】便利な使い方:NHKスポーツオンライン

この機能をVivaldiのタブタイリング機能と組み合わせて使うことで、同じ試合を異なるアングルで同時に楽しむこともできます

「NHK」ライブストリーミングの異なるアングルの映像を上下に表示↓
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 9(マルチアングル同時視聴)
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 9(マルチアングル同時視聴) posted by (C)kyu3

「NHK」ライブストリーミングの普通の試合映像とマルチアングル映像を左右に表示↓
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 7(マルチアングル同時視聴)
Vivaldi:タブタイリングで2つのワールドカップ動画を同時視聴! - 7(マルチアングル同時視聴) posted by (C)kyu3

ちなみにVivaldiの最新の安定版1.15(※2018年6月28日時点)では、残念ながらまだこのタブタイリング機能で表示してるページの幅を調整できませんが、スナップショット(ベータ版)の方では可能になってます!

Vivaldi最新スナップショットで、タブタイリングの表示幅が変更可能に!? : Kyu3’s Blog


3. WEBパネルでワールドカップ情報をチェック!


最後にVivaldiの人気機能「WEBパネル」を使う事でも、ワールドカップをより楽しめるようになると思います。例えば試合の日程や時間をチェックしたり、試合中選手のプロフィールを参照したりするのにも活用できると思いますし、動画のちら見やテキスト実況などをチェックすると言う使い方もできるでしょうから。(*^^*)

以下で紹介するのは、これらに適してると思われるサイトをピックアップしたものです。


a. 2018 FIFAワールドカップ ロシア:サッカーキング

Vivaldi WEBパネル:サッカーキングのワールドカップ特集 - 1
Vivaldi WEBパネル:サッカーキングのワールドカップ特集 - 1 posted by (C)kyu3


b. 2018ワールドカップ(W杯)ロシア大会-サッカー:朝日新聞デジタル

Vivaldi WEBパネル:朝日新聞iのワールドカップ特集 - 4
Vivaldi WEBパネル:朝日新聞iのワールドカップ特集 - 4 posted by (C)kyu3


c. ロシアワールドカップ特集:スポーツナビ

Vivaldi WEBパネル:Sportsnaviのワールドカップ特集 - 1
Vivaldi WEBパネル:Sportsnaviのワールドカップ特集 - 1 posted by (C)kyu3


d. FIFAワールドカップ:Tver(※動画も視聴可能!)

Vivaldi WEBパネル:Tverは動画の視聴も可能! - 1
Vivaldi WEBパネル:Tverは動画の視聴も可能! - 1 posted by (C)kyu3


e. 2018 FIFA ワールドカップ:NHKスポーツオンライン(※テキスト実況)

Vivaldi WEBパネル:NHKワールドカップのライブ配信ページ - 1(テキスト実況)
Vivaldi WEBパネル:NHKワールドカップのライブ配信ページ - 1(テキスト実況) posted by (C)kyu3

ちなみにOperaでもVivaldiのWEBパネル機能とほぼ同じ機能を再現できる拡張機能があるので、Operaでもこう言う機能が使いたいと言う方は、以下のリンク先の拡張機能(「Web Panel」)をインストールしてみてはいかがでしょう?

Web Panel:Opera公式拡張配布サイト


【関連リンク】
2018 FIFA ワールドカップ:NHKスポーツオンライン
2018 FIFA ワールドカップ:Tver

【関連記事】
ワールドカップのストリーミング動画配信ページを知る方法 : Kyu3’s Blog
Opera 37レビュー:動画のポップアップ、広告ブロック、ほか : Kyu3’s Blog
Vivaldiのお薦め機能:空間ナビゲーション、ニックネーム、タブタイリング : Kyu3’s Blog
Vivaldi最新スナップショットで、タブタイリングの表示幅が変更可能に!? : Kyu3’s Blog
Vivaldi WEBパネルのお薦め活用法 : Kyu3’s Blog


【追記(2018年7月2日)】


「Tver」だとWEBパネルで動画視聴可能だったので、「3」のお薦めサイトに追加しました。(*^^*)


【追記 その2(2018年7月3日)】


VivaldiのWEBパネル機能に関して追記。先の追記でも書いた通り、Vivaldi WEBパネルで「Tver」の動画(およびライブ中継も)を見ることはできますが、「NHK」は残念ながら見ることができない…かと思っていたのですが、違ってました!(^^;

今回「NHK」はワールドカップ専用サイトで、2つのライブ配信を行っています。1つはネット専用。もう1つはテレビ放送と同じ映像と音声を同時配信するものなのですが、テレビと同時配信する方は、Vivaldi WEBパネルでも見ることができました!(*^^*)

【2018 FIFAワールドカップ】放送同時配信:NHKスポーツオンライン

Vivaldi WEBパネル:NHKワールドカップ放送同時配信はライブ動画も視聴可能! - 1
Vivaldi WEBパネル:NHKワールドカップ放送同時配信はライブ動画も視聴可能! - 1 posted by (C)kyu3

Vivaldi最新スナップショットで、タブタイリングの表示幅が変更可能に!?

zyxwjp さんのツイートで知ったのですが、Vivaldiの最新スナップショット(1.16.1195.3)で、タブタイリングのWEB表示領域の表示幅が、変更可能になってましたぁ〜!!(>ω<ノ)ノおぉ〜!!


以下の動画は、実際表示幅を変更した時を撮影したキャプチャー動画です。ちなみに現在変更可能なのは横並びと縦並びにした時だけで、グリッド表示(格子状に並べて表示)した時には、変更できません※.「追記 その4」を参照!)でした。



横並び表示↓
(※通常真ん中で仕切られますが、右側に移動させています。)
Vivaldi 1.16.1195.3:タブタイリングの表示幅が変更可能に! - 5:横並び
Vivaldi 1.16.1195.3:タブタイリングの表示幅が変更可能に! - 5:横並び posted by (C)kyu3

グリット表示↓
(※現在このグリット表示の場合は、表示幅の変更不可!)
Vivaldi 1.16.1195.3:タブタイリングの表示幅が変更可能に! - 6:ただし格子状は変更不可!
Vivaldi 1.16.1195.3:タブタイリングの表示幅が変更可能に! - 6:ただし格子状は変更不可! posted by (C)kyu3

なおこの機能変更、公式ブログのチェンジログには記載されていませんでした。過去数バージョンのも調べてみましたが、いずれも記載されてませんでした。

Vivaldiブラウザースナップショット1.16.1195.3公開のお知らせ:Vivaldi日本語公式ブログ
Automatic restart after a crash:Vivaldi公式ブログ・・・英語版公式ブログの同バージョンに関する記事。

まだグリット表示は非対応な点や、不具合もあるそうなのでそれらの点を踏まえて考えると、あくまで試験的に搭載しただけかもしれません。なので、このまますぐに正式版への搭載になるかは、まだ不透明な状況かなと。(^_^;


最後に感想を少し。

「タブタイリング」はVivaldiの特徴的な機能の1つと言えるでしょうし、私自身もお気に入りの機能の1つで、以前お薦め機能として紹介しました。ただ1つ問題があって、それがこの表示領域の変更ができないことでした。(^^;

Vivaldiのお薦め機能:空間ナビゲーション、ニックネーム、タブタイリング : Kyu3’s Blog

旧Operaにも同様の機能がありましたが、そちらでは変更できたので、是非Vivaldiでも変更できるようにして欲しいなと、1年前に英語版のフォーラムの方にも書きましたが、それがようやく搭載されてすごく興奮しています!!本当、公式ブログのタイトルにして発表して良いレベルだと私も思います!!(*^^*)w


ただそうならなかった点を考えると、やはりまだまだ正式採用には時間がかかりそうですが、このまま是非正式版にも搭載されるように、開発を続けてもらいたいなぁ〜と思います。(*^^*)/ 是非!!


【関連リンク】
タブタイリング:Vivaldi Tips
Vivaldiブラウザースナップショット1.16.1195.3公開のお知らせ:Vivaldi日本語公式ブログ
Automatic restart after a crash:Vivaldi公式ブログ
Will Vivaldi developers enable the width of tab tiling to change?:Vivaldi公式フォーラム

【関連記事】
Vivaldiのお薦め機能:空間ナビゲーション、ニックネーム、タブタイリング : Kyu3’s Blog


【追記(2018年6月5日)】


タブタイリングの表示幅が変更可能になってるのに公式ブログのチェンジログに記載がない件について公式フォーラムで問い合わせたところ、モデレーターの方いわく「まだ完成(?)してなかったので、アナウンスしなかった」とのこと。(*^^*)

@kyu3a It's not finished yet, that's why there was no announcement in the Blog. You cannot yet resize grids, and resizing of three tiles might sometimes behave strangely.


About Changing Width of Tab Tiling at Vivaldi latest Snapshot』より引用

また3つのタブをタイリングした時、ときどき奇妙な動作をすることがあるようです(※たぶん1つの枠線を動かすと、他の枠線も動いてしまう問題かと)。


【関連リンク】
About Changing Width of Tab Tiling at Vivaldi latest Snapshot:Vivaldi公式フォーラム


【追記 その2(2018年6月13日)】


本文に貼り付けた動画がどうもゆっくりし過ぎてるなと感じたので、倍速にしたものに置き換えました。(^^;


【追記 その3(2018年7月6日)】


タブタイリングの幅変更機能搭載が、公式ブログで正式にアナウンスされました!(*^^*)/

Resizable Tab Tiling – Vivaldi Browser snapshot 1.16.1230.3:Vivaldi公式ブログ

Vivaldi 1.16.1230.3のアップデート通知に「タブタイリング幅調整」の表記が!! - 2
Vivaldi 1.16.1230.3のアップデート通知に「タブタイリング幅調整」の表記が!! - 2 posted by (C)kyu3


【追記 その4(2018年7月10日)】


この機能の搭載が正式アナウンスされた最新のスナップショット(1.16.1230.30)で確認したところ、グリッド表示でも表示幅が変更可能になってました!

Vivaldi 1.16.1230.3:グリッド表示でも表示幅を変更可能に! - 2(変更後)
Vivaldi 1.16.1230.3:グリッド表示でも表示幅を変更可能に! - 2(変更後) posted by (C)kyu3

ただし縦方向の変更は自由自在に可能なものの、横方向の変更は、WEB表示領域が部分的に凹んだりするような変更はできません。例えば上のスクリーンショットで言うと、右上の黒っぽいページ(Vivaldi公式フォーラム)をこの状態で左側に動かせるとすると、左上に表示してるページが部分的に凹んでしまいますが、その様な幅の変更はできません。

最後にVivaldiのフランス語公式アカウントが投稿していた面白いGIFアニメを紹介!この各色がそれぞれ1つのタブのページになります。この様に沢山のページをタブタイリングで一度に表示する事も可能です!(*^^*)



【関連リンク】
Vivaldiフランス語公式Twitterアカウント


【追記 その5(2018年7月10日)】


「追記その4」で表現的に間違ってるかもと思う部分に打ち消し線を入れました。

Vivaldiユーザー交流会(オフ会)が東京と大阪で開催!

Vivaldi社の日本人スタッフ Takaakiさんが来日し、日本各地で様々な催しや勉強会に参加する企画(「#Vivaldi帰れま千」)の一環として、ユーザー交流会(オフ会)が、東京(5/29)と大阪(5/27)で開催されます!( ´ ▽ ` )ノ

Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ

【東京会場】


Vivaldiジャパンツアー2018 #Vivaldi帰れま千 Vivaldiユーザープレゼン・交流会 in Tokyo 〜東京の中心で愛を叫ぶ〜:Peatix

参加無料。軽食やドリンクをご用意してお待ちしております。

<概要>
日時:5月29日(火) 19:00 - 22:00
会場:会場:東京都渋谷区恵比寿 4-6-1 恵比寿MFビル8階 Peatix Japan株式会社オフィス
人数:最大40名
参加費:なし
主催:Vivaldi Technologies

<持ち物>
・お名刺を2枚 ※なければその場でカードに書いて頂くのでもOKです。
・Vivaldiへの熱い思い
・(プレゼン参加者は)Vivaldiへの愛を叫ぶ5分プレゼンの準備

会場の恵比寿MFビルの場所↓


大阪会場


Vivaldiジャパンツアー2018 #Vivaldi帰れま千 Vivaldiユーザープレゼン・交流会 in Osaka 〜大阪の中心で愛を叫ぶ〜:Peatix

ご参加無料。軽食やドリンクをご用意してお待ちしております。

<概要>
日時:5月27日(日) 13:00 - 18:00
会場:オオサカンスペース https://www.osakan-space.com/ ※最寄り駅は御堂筋線本町駅
人数:最大40名
参加費:なし
主催:Vivaldi Technologies
協力:オオサカンスペース (ありがとうございます!)

<持ち物>
・お名刺を2枚 ※なければその場でカードに書いて頂くのでもOKです。
・Vivaldiへの熱い思い
・(プレゼン参加者は)Vivaldiへの愛を叫ぶ5分プレゼンの準備

会場のオオサカンスペースの場所↓


どちらも無料で参加できるので、興味のある方(※要・事前申し込み)は参加してみてはいかがでしょう?(*^^*)

ちなみにこの企画の舞台裏の様子は、公式Instagramでも配信するそうです。


あとこの企画限定グッズのプレゼントも行われるとのこと!



【関連リンク】
Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ
Vivaldiジャパンツアー2018 #Vivaldi帰れま千 Vivaldiユーザープレゼン・交流会 in Tokyo 〜東京の中心で愛を叫ぶ〜:Peatix
Vivaldiジャパンツアー2018 #Vivaldi帰れま千 Vivaldiユーザープレゼン・交流会 in Osaka 〜大阪の中心で愛を叫ぶ〜:Peatix

Vivaldi日本語公式Twitter
Vivaldi日本語公式Instagram
Takaakiさん(@GuiHuang)のTwitter

Vivaldi の日本初公式イベントまとめ #VivaldiJP #vmeetup01 :Togetter
Vivaldi アイスランド大使館でのプレスイベントまとめ #VivaldiJP:Togetter

【関連記事】
Vivaldi社の日本人スタッフが日本に一時帰国で全国ツアー!?現在会いたい人募集中! : Kyu3’s Blog
Vivaldi初の日本公式イベントが、東京で開催! : Kyu3’s Blog

【Twitteウィジェット】



【追記(2018年5月27日)】


今日大阪で行われたユーザー交流会に関するツイート(おもに参加された方の)をまとめたTogetterまとめを作りました!興味のある方は、見てみてはいかがでしょう?(*^^*)

Vivaldiユーザープレゼン・交流会 in 大阪 & 東京ツイートまとめ #Vivaldi帰れま千:Togetter

なお明後日(5/29)東京で行われるユーザー交流会のツイートも、このまとめに追加する予定です。


【追記 その2(2018年5月29日)】


今日東京で行われたユーザー交流会のツイートをまとめたので、興味のある方は見てみて下さい。なお一昨日の追記で「大阪のまとめに、東京のツイートも追加する」と書きましたが、結局分けることにしました。(*^^*)

Vivaldiユーザープレゼン・交流会 in 東京のツイートまとめ #Vivaldi帰れま千:Togetter


【追記 その3(2018年6月11日)】


大阪でのユーザー交流会に関して、参加されたNEARさんがブログの記事を書いていたので、以下にリンクを掲載しておきます。ライトニングトークで使われたパワポ資料も見ることができるので、興味のある方は、見てみてはいかがでしょう?(*^^*)

Vivaldi帰れま千@大阪に参加しました!:Libre Products


【追記 その4(2018年6月11日 6:51)】


東京でのユーザー交流会に参加された @iyanayatudaze さんがイベントレポートを書いていたので、以下にリンクを掲載しておきます。@iyanayatudaze さんもライトニングトークをされたそうで、プレゼン資料も見られます。(*^^*)/

イベントレポ: 『Vivaldiジャパンツアー2018 #Vivaldi帰れま千 Vivaldiユーザープレゼン・交流会 in Tokyo 〜東京の中心で愛を叫ぶ〜』:ねむい

Vivaldi社の日本人スタッフが日本に一時帰国で全国ツアー!?

Vivaldi社で日本語のローカライズや不具合対応を担当している日本人スタッフのTakaakiさんが、今年(2018年)の5月後半〜6月前半にかけて、日本に一時帰国するそうです。その間『Vivaldi帰れま千』と題して、さまざまな人に直接会いにいく企画を行うそうです!(*^^*)

Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ



北から南まで、お呼び頂いたコミュニティーイベントの場所へ向かいます。具体的にいつどこへ行くか、その旅程はご相談させてください。

「うちの大学にVivaldiの人を呼びたい!」という大学生の方、「うちの会社に来て欲しい!」というテック企業・技術者の方、またはコミュニティー(スタートアップ、オンラインプライバシー、北欧関連などなど)の方、「Vivaldiよく知らないけど、せっかくノルウェーから来るなら会ってみたい!」という方は、ぜひ声を掛けてください。

コミュニティー・イベントの規模は、お気になさらず!どなたからでもお声かけ頂けるのを、楽しみにしています。



Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ』より引用

意気込みを語るTakaakiさん↓

ちなみに当日の話題は、必ずしもVivaldiのことにこだわらないとのこと。ノルウェーの話題、例えば「ノルウェーの労働環境や、ノルウェーのスタートアップコミュニティーの一員であることなど」についてでも良いとのこと。なので、Vivaldiだけでなくノルウェーに興味がある方も、是非Takaakiさんと話をしてみたい、Takaakiさんに来て欲しいと言う方は、メールを送ってみてはいかがでしょう?(*^^*)

ちなみにTakaakiさんがどんな人物かについては、以前公式ブログで紹介されてので、そちらが参考になると思います。

新連載 – Meet The Team – Takaaki 編:Vivaldi日本語公式ブログ

あとTakaakiさんのブログ(※英語)やTwitter、Instagramはこちら。

Eat. Play. Hack.・・・Takaakiさんのブログ
Takaakiさん(@GuiHuang)のTwitter
Takaakiさん(@oslosakaaki)のInstagram


【関連リンク】
Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ
Vivaldi の日本初公式イベントまとめ #VivaldiJP #vmeetup01 :Togetter
Vivaldi アイスランド大使館でのプレスイベントまとめ #VivaldiJP:Togetter

【関連記事】
Vivaldi初の日本公式イベントが、東京で開催! : Kyu3’s Blog
Vivaldi、国別ユーザー数で現在日本が1位!? : Kyu3’s Blog

【Twitteウィジェット】



【追記(2018年4月15日)】


この企画に関連した(?)Takaakiさんが参加するイベントに関して、追記します。以下のイベントと勉強会に、Takaakiさんがスピーカーとして参加されるようです。Takaakiさんに会いたいと言う方は、参加されてはいかがでしょう?

TEDxTitech 2018・・・5月13日に東京工業大学で行われるTED関連イベント。
第4回名古屋若手Webエンジニア交流会:connpass・・・5月26日 5月16日 に名古屋市内で開催されるWEBエンジニア向け交流会。


【追記 その2(2018年4月20日)】


上記の「第4回名古屋若手Webエンジニア交流会」の開催日が間違っていたので、修正しました。

あと関連イベントに関して、公式ブログの記事にも「ツアー日程」と言う欄が作成されていました。…と言うことで、以後はこちらを参照して下さい。なお現時点では、上記のイベントの他に、以下の2つの大阪のイベントが記載されています。( ´ ▽ ` )

CLUB GEORDIE・・・5月16日に関西学院大学神戸三田キャンパスで開催されるイベント。
RHD Japan・・・5月23日に大阪府枚方市とこの企業と…会合?

【関連リンク】
Vivaldiジャパンツアー2018 #Vivaldi帰れま千:Vivaldi日本語公式ブログ


【追記 その3(2018年6月12日)】


このツアーのまとめ記事がVivaldi日本語公式ブログに掲載されていたので、以下にリンクを掲載しておきます。あと現在この企画は終了したので、タイトルを変更しました。(*^^*)


【関連リンク】
Vivaldiジャパンツアー2018 #Vivaldi帰れま千 終了!:Vivaldi日本語公式ブログ


【追記 その4(2018年7月21日)】


5月13日にTakaakiさんが登壇した東工大の「TEDxTitech 2018」でのプレゼンテーションの模様が、Takaakiさんの公式ブログに動画(※全編英語)と文字起こしされた文章(※英語)で公開されていたので、以下にリンクと動画を掲載しておきます。

TEDxTitech – Northen Europe x Startups:Ricewinner・・・Takaakiさんの公式ブログの記事。



上記のブログ記事を告知するVivaldi公式アカウントのツイート↓


Vivaldi WEBパネルで、ローカルの音楽ファイルや動画ファイルを連続再生する方法

広告鳥(@adbirdbrain)さんのツイートで知ったのですが、HTML 5プレーヤーを使って、ローカルの音楽ファイル(や、あと動画ファイルも)をVivaldiのWEBパネルで連続再生できることを知ったので、今回このことをブログに書こうと思います。( ´ ▽ ` ) .。oO( 伝説の「音楽パネル」の復活!?w )


やり方はすごく簡単です!広告鳥さんのブログに書いてある通り、MacならテキストエディットなどのアプリにHTMLソース(※以下のリンク先に掲載)をコピペし、HTMLファイルを作成した後、それをVivaldiで開いてWEBパネルに追加するだけです。連続再生したいローカルファイルは、WEBパネルにそのままドラッグ&ドロップすればOKです!(*^^*)

Vivaldiブラウザのウェブパネルに簡易音楽プレイヤーを追加:adbird(広告鳥) 備忘録
いまさらHTML5 (簡易プレイヤー編):Qiita・・・広告鳥さんが参照した「Qiita」の記事。

実際再生してるところを撮影したスクリーンショットが、こちらの画像です。

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 1
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 1 posted by (C)kyu3

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 5(音楽ファイルを再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 5(音楽ファイルを再生) posted by (C)kyu3

ちなみに音楽ファイルだけでなく、動画ファイルも連続再生できます。動画はパネル全体に全画面表示することも可能です。

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 6(動画ファイルを再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 6(動画ファイルを再生) posted by (C)kyu3

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 8(動画を全画面再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 8(動画を全画面再生) posted by (C)kyu3

補足事項としては、まずスキップボタン(次のファイルの再生へと移るボタン)は右端に表示されるので、パネル幅が狭いとスクロールが必要になるかもしれません。※. 広告鳥さんがソースを更新してくれて、スキップボタンが右端ではなく、ファイル名の下に表示されるようになりました。詳しくは「追記」を参照!(*^^*)/ 広告鳥さんに感謝!!)ちなみに下矢印(『 ↓ 』)は、ダウンロードボタンです。

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 3(スキップメニュー等)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 3(スキップメニュー等) posted by (C)kyu3

それとこのプレーヤーではスキップすることはできますが、1つ前のファイルに戻る機能はありません

あと広告鳥さんのスクリーンショットの様に、再生するために読み込んだファイルの一覧に再生順序を表示するには、読み込むファイルのファイル名そのものを編集(※. 例えばリストの1番目に追加したいファイルなら、そのファイルのファイル名の頭に「01」と付けるとか)する必要がある※. 広告鳥さんがソースを更新してくれて、最新版ではリスト番号が自動的に追加されるようになったそうです。 詳しくは「追記 その2」を参照! Σ(>ω<ノ)ノオオォッ!! )ようです。

なお単にローカルの音楽ファイルや動画ファイルを単体でパネルで再生するだけなら、ブラウザで再生できるファイル形式なら、直接開けば再生できます。例えばローカルのフォルダをVivaldiで開いてそれをパネルに表示し、クリックすると普通に再生できます。以下の画像が、その時撮影したスクリーンショットです。

Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 1
Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 1 posted by (C)kyu3

Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 2(再生中)
Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 2(再生中) posted by (C)kyu3

率直に言って、実用度はそんなに高くないと思いますが… どうしてもローカルに置いてる音楽ファイルをパネル再生したい方は、これらの方法を試してみてはいかがでしょう?(*^^*)


【関連リンク】
Vivaldiブラウザのウェブパネルに簡易音楽プレイヤーを追加:adbird(広告鳥) 備忘録
いまさらHTML5 (簡易プレイヤー編):Qiita
Vivaldi WEBパネルの活用方法まとめ #VivaldiJP:Togetter

【関連記事】
Vivaldi WEBパネルのお薦め活用法 : Kyu3’s Blog


【追記(2018年3月21日)】


このパネルに関してツイートしたところ、広告鳥さんが、スキップボタンがパネル幅が狭くても隠れないように、ファイル名の下に表示されるように、HTMLソースを変更してくれました!ヽ(*´∀`)ノ広告鳥さん感謝!!

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 10(スキップボタンがファイル名の下に!)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 10(スキップボタンがファイル名の下に!) posted by (C)kyu3


あとさっき気づいたのですが、リストに新たに音楽ファイルや動画ファイルを追加したい場合は、追加したいファイルをそのままドラッグ&ドロップすると、既存のリストの下に追加される形で、ファイルがリストに追加されます。

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 14(ドラッグ&ドロップでリストに追加)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 14(ドラッグ&ドロップでリストに追加) posted by (C)kyu3


【追記 その2(2018年3月25日)】


広告鳥さんからのリプで知ったのですが、広告鳥さんのHTML 5 メディアプレーヤーはさらに進化していて、リスト番号が自動的に追加されるようになったそうです!Σ(>ω<ノ)ノ おぉ〜!!


早速試してみたら、確かにリスト番号が自動的に追加されるようになってました!

Vivaldi WEBパネルにHTML5メディアプレヤー;リスト番号が自動的に追加 - 2
Vivaldi WEBパネルにHTML5メディアプレヤー;リスト番号が自動的に追加 - 2 posted by (C)kyu3

あと広告鳥さんのブログでも紹介されてる、往年の音楽プレーヤーソフト「Winamp」をHTML 5とJavaScriptで再現した「Winamp2-js」も試してみました!

Vivaldi WEBパネルに「Winamp2-js」- 8
Vivaldi WEBパネルに「Winamp2-js」- 8 posted by (C)kyu3

こちらはJavaScriptも使ってるからか、かなり多機能!スキップだけでなく1つ前の曲に戻る機能もありますし、イコライザーで音質を変えることもできます。(*^^*)

ただ広告鳥さんも指摘している通り、デフォルトだとボタンやメニュー類が小さ過ぎるので、こんな風に表示を拡大したり、あとイコライザーがいらない場合は非表示(※. イコライザー右上の『X』ボタンをクリック)にしたり、あとはプレイリストの表示部分を大きくしたり(※. 右下のハンドル部分をドラッグ)等々して、多少カスタマイズした方が使いやすいと思います。

Vivaldi WEBパネルに「Winamp2-js」- 14:拡大、イコライザー非表示
Vivaldi WEBパネルに「Winamp2-js」- 14:拡大、イコライザー非表示 posted by (C)kyu3

Vivaldi WEBパネルに「Winamp2-js」- 12:パネル上部に位置を変更、イコライザーを非表示
Vivaldi WEBパネルに「Winamp2-js」- 12:パネル上部に位置を変更、イコライザーを非表示 posted by (C)kyu3

ちなみに「Winamp2-js」の操作方法などの詳しい情報は、以下のリンク先の『GIGAZINE』の記事に掲載されているので、興味のある方は見てみてはいかがでしょう?


【関連リンク】
WinampをHTML5とJavaScriptで再現した「Winamp2-js」:GIGAZINE


【追記 その3(2018年3月27日)】


広告鳥さんからのリプで知ったのですが、今度はファイルを「開く/追加」ボタンが追加されたそうです!!(>ω<ノ)ノ おぉ〜!!



デザインも洗練されてきて、更に良い感じに♪ (*^^*)

ちなみに広告鳥さんのブログによると、これまで通り、ドラッグ&ドロップでもファイルを追加できるとのこと。


【関連リンク】
Vivaldiブラウザのウェブパネルに簡易メディアプレイヤーを追加:adbird(広告鳥) 備忘録


【追記 その4(2018年3月30日)】


ファイルを「開く/追加」ボタンが追加されたとのことだったので、早速試してみました。Mac版でも問題なく開けました!(*^^*)/

Vivaldi WEBパネルにHTML5メディアプレヤー:ファイルを開く事が可能に - 4
Vivaldi WEBパネルにHTML5メディアプレヤー:ファイルを開く事が可能に - 4 posted by (C)kyu3

カテゴリー
記事検索
ギャラリー
  • Amazonプライムのお薦め作品(2019年5月):「Fleabag フリーバッグ」「ホームカミング」
  • ソニーのワイヤレスイヤホン「WI-SP600N」レビュー:数ヶ月使わなかったので売ってしまいました!
  • ソニーのワイヤレスイヤホン「WI-SP600N」レビュー:数ヶ月使わなかったので売ってしまいました!
  • ソニーのワイヤレスイヤホン「WI-SP600N」レビュー:数ヶ月使わなかったので売ってしまいました!
  • これまで観た中でお薦めのSF&ファンダジードラマ 5選
  • これまで観た中でお薦めのSF&ファンダジードラマ 5選
  • これまで観た中でお薦めのSF&ファンダジードラマ 5選
  • これまで観た中でお薦めのSF&ファンダジードラマ 5選
  • これまで観た中でお薦めのSF&ファンダジードラマ 5選
  • Operaがゲーマー向けPCブラウザ「Opera GX」のリリースを予告!
  • Operaがゲーマー向けPCブラウザ「Opera GX」のリリースを予告!
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
  • KYOKAのiPhone 7&8用 格安防水・耐衝撃ケースレビュー
管理者のプロフィール
Twitterアイコン名前(ハンドルネーム)
「Kyu3」

プロフィール(Profile)