人柱に捧ぐ!Youtubeのマテリアルデザインを今すぐ試す方法 - 適宜覚書-Fragments

人柱に捧ぐ!Youtubeのマテリアルデザインを今すぐ試す方法

      2016/05/17

新Youtubeデザイン

Youtubeの新しいマテリアルデザイン画面は、本年度中にリリースされる予定です。楽しみですね!

しかし、現在は限られたテスターや選ばれし招待メンバーだけが利用し、フィードバックを返すことで改善を進めている段階です。なりふり構わず人柱をしたいマゾな人や新しいものにいっちょ咬みしたい人がいても、Googleから招待を受けていないなら本来利用出来ません

とはいえ、そこは蛇の道は蛇。人柱も色々と手を考え、Youtubeのマテリアルデザインを今すぐ誰でも試す方法を編み出した模様です。今回はその方法を紹介します。

Youtubeのマテリアルデザイン画面とは

マテリアルデザインとは何ぞ、を説明するのは筆者には無理です。「要はあのノッペリとした触り易さや分かりやすさに配慮した画面デザインだよ!」という頭悪そうな表現しか出来ません。

まあ、大抵のWebユーザは何かしらこれまでにもマテリアルデザインに関する書物を目にしたり、実装を触っているでしょう。想定読者である人柱層は「ああ?んなこたぁ分かってるよ!」という感じでしょうし…。ですので、今回説明する対象のYoutube画面のスクリーンショットを見て、こんなものか…と分ければ取りあえず良いでしょう。

まず、現在のYoutubeの画面デザインです。筆者のアカウントでGoogleにログインして開くとこんな画面が表示されます。

現在のYoutube画面デザイン

現在のYoutube画面デザイン

次に、マテリアルデザイン版のYoutube画面です。

マテリアルデザイン版Youtube

マテリアルデザイン版Youtube

表示させている内容が後述する都合で異なるのですが、大雑把なデザインの違いは見てすぐ取れるでしょう。

  • 余白の取り方がすっきり、文字もごちゃごちゃしておらず必要十分に絞り込んでいる
  • のっぺりしていて線や枠での区切りは極力減らしているけど、コンテンツの区切りは分かりやすい
  • 左ペインのメニューカラムはトグルで開閉するため、メイン画面はゆったり1カラムを使える
  • ページは下にスクロールするとどんどんコンテンツを読み込む無限スクロールになっている。従来画面下部に設定項目は右上のプルダウンメニューに移動

興味があるなら具体的に以下の手順を行って触ってみる方が下手な説明を読む万倍以上の実感をもって体感できます。

Google ChromeでYoutubeのマテリアルデザインを今すぐ試す方法

事前準備

2つ前提条件(制約)があります。第一に、自分のGoogleアカウントでは出来ません。第二にUSのYoutubeでしか出来ません。

理由は、Youtubeでの画面デザイン表示はテスターかどうかを使用するユーザのCookieで見分けているためです。自分のGoogleアカウントに紐づいたCookieを書き替えるやり方もあるのでしょうが、それはかなり難しいしリスクも高いでしょう。今回の方法は上記の前提条件でしか動かない代わりに簡単に今すぐ誰でも出来る方法です。

  1. YoutubeにGoogleアカウントでログインしている場合、これをログアウトして下さい。(Googleに依存していると意外とこれが関門)
  2. 次にこのログアウトした状態でYoutubeを開きます。
  3. 画面最下部にある「国:日本」をクリックします。すると下図のように変更先のリストが表示されます。ここで「地域指定なし」をクリックします。(「地域指定なし」はUS設定 http://www.youtube.com/?gl=USの意味になります)
    国を「指定なし」に変更

    国を「指定なし」に変更

  4. F5キーを押下し画面更新を行います。これで設定を行うための前提条件が整いました。

設定手順

  1. 前提条件を整えてhttp://www.youtube.com/?gl=USを開きます。
  2. Google Chrome上でCtrlキー+Shiftキー+Iキーを押下し、デベロッパーツールを開きます。
    デベロッパーツール

    デベロッパーツール

  3. デベロッパーツールのメニューで「Resources」タブをクリックし、切替表示された画面の左にあるツリーで「Cookies」「www.youtube.com」とクリックしていきます。
    Cookie

    Cookie

  4. 右側に表示されたyoutube.comのCookieの内、Name列に「VISITOR_INFO1_LIVE」とあるレコードを選択して、Deleteキーを押下して削除します。(右クリックしてコンテキストメニューでDeleteでもOK)
    削除

    削除

  5. Consoleタブをクリックします。
  6. 以下のコマンドをコンソール内に貼り付けEnterキーを押下します。(先ほど削除したCookieに別の値を新しく放り込んでいるだけです)
    新しいCookieを設定

    新しいCookieを設定

  7. Ctrlキー+Shiftキー+Iキーを押下し、デベロッパーツールを閉じます。
  8. F5キーを押下し、ページを更新します。
  9. すると、このようにマテリアルデザインのYoutubeを利用できるようになります。
    設定成功

    設定成功

ちまちま面倒な設定が嫌なら

このツールを使うともっと簡単に出来ます。

今見ているページのCookieを簡単に編集出来るEditThisCookie拡張
CookieはWebサイトから与えられるものと思い込んでいませんか?実は意外と簡単に書き換えられるのです。そして、書き換えると普段できない色々な面白いことが出来たりお...

終わりに

昨日に引き続き、デベロッパーツールを使った偽装ネタでした。このCookieも実際は誰かのものでそのふりをしているだけなんだと思います。元情報はRedditにあります。

自分の主な利用WebブラウザがChromeなのでその方法だけを記載しましたが、やっている内容がCookieの書き換えだけなので大抵のブラウザで同様の設定は可能な筈です。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google , , ,