TomatoChups(とまとちゃっぷす)のBlog

小さな常識を考え直すブログ 日常のこととたまにテックとビール

Canvasで '雪' を描いてみた

はじめに

HTML5に導入されたcanvas。名前は聞いたことがあるけど実際何ができるの?いつ使うの?といった技術者から見た使い所的な部分は今回は置いておいて、暇な時にちょっと触ってみてプログラムでブラウザにお絵かきしたい!みたいな楽しそうなことをしたい人向けに書いた記事です。そして、私も実際1週間前くらいに初めて触っただけです。

HTML5 canvas (多分非公式だけど十分な)リファレンス

canvas とは

一言で言うと、ブラウザにお絵かきをするためのもので、javascriptを使って線だったり円だったりをプログラムで描写するといったものです。 繰り返しのアニメーションを普段フロント側でアニメーション等のプログラムを書いている方なら、setTimeoutやsetIntervalを使っていると思いますが、もっとぬるぬる動く何かを作りたい時にcanvasが最適と言うわけです。

とりあえず楽しくお絵かきができるものだと言う理解で大丈夫だと思います。今回はコード量も少ないので、javascriptを始めて基本の文法を理解した人や、気分転換に別のことをやりたいなと思っている人に最適な内容だと思います。

対応ブラウザについて

Chrome, Firefox, Safari, Operaであれば問題なく使えます。IEの場合はIE8以下が非対応らしいのですが、なんとかする方法があるらしいのと、Qiitaにプログラムを見にくる人でIE8以下を使っている人は多分ほとんどいないと思うので、みなさん問題なく利用できると思います。

必要な環境

・対応ブラウザ ・テキストエディタ

今回のコードは codepen snow こちらのコードをほぼ引用した形になるので、直接理解できると言う方はこちらを参考にしてください。ここからは、日本語のコメントを付け加え、初めての人にもわかるように説明していきます。それでは始めましょう。

コーディング

HTML5

canvasを使う場合javascriptで描画する絵を作成するので、HTMLファイルはかなりシンプルです。

index.html

<body>
  <canvas id="canvas"></canvas>
  <h2>Snow</h2>
  <script src="main.js"></script>
</body>

CSS

今回はブラウザいっぱいに雪を描画するので、CSSも非常にシンプル。

main.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
html, body {
    width: 100%;
    height: 100%;
  }
#canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
  }
h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #E0E0E0;
    /*cursor: pointer;*/
  }

canvasだけをwidth: 100%; height: 100%;で広げても反映されないので、ちゃんとhtml,bodywidth: 100%; height: 100%;で広げてくださいね。

HTMLとCSSファイルの内容はこれで全てですので、ここから編集することはありません。非常にシンプル。

JavaScript (canvasにお絵描き)

ここからやっとお絵かきタイムですね。最初に必要なものを宣言していきましょう。

[必要なものの宣言]

main.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const animFrame = window.requestAnimationFrame ||
                  window.mozRequestAnimationFrame ||
                  window.webkitRequestAnimationFrame ||
                  window.msRequestAnimationFrame;
const cancFrame = window.cancelAnimationFrame ||
                  window.mozCancelAnimationFrame ||
                  window.webkitCancelAnimationFrame ||
                  window.msCancelAnimationFrame;

// 雪の粒を保存する配列
const snowflakes = [];

// animFrame()の戻り値を保存する変数 cancFrame()に入れると描画が止まる
let handle;

// canvasのwidthとheightを保存する変数
let w = ctx.canvas.width = window.innerWidth;
let h = ctx.canvas.height = window.innerHeight;

最初の4っの定数は今後canvasを使うたびに出てくると思うので、しっかり覚えておきましょう。 const ctx = canvas.getContext('2d');とは、getContext()メソッドcanvasに描画するためのAPIにアクセスするオブジェクトを返します。つまり、この定数ctxにいろんなメソッドを使って絵を描いていくということです。今回は3Dで描くのではなく2Dなので引数は'2d'となります。

animFramecancFrameに関しては、requestAnimFrameが描画を始めるためのメソッド、cancelAnimationFrameが描画を止めるためのメソッドと覚えておきましょう。

[関数random()の定義]

今回の雪の実装のために使う簡単で便利な関数を作ります。

  main.js

  function random(min, max) {
    let rand = Math.floor((min + (max - min + 1) * Math.random()));
    return rand;
  }

このrandom()関数はmin以上max以下の間でランダムな数値を返します。 次の、雪を作る関数でたくさん使います。

[雪を作る関数の定義]

  main.js

  // 雪を作るSnow()コンストラクタの定義
  function Snow() {
    // 雪のx座標を決める
    this.x = random(0, w);
 // 雪のy座標を決める
    this.y = random(-h, 0);
 // 雪の半径を決める(雪の粒の大きさ)
    this.radius = random(0.5, 3.0);
 // 雪が水平(x軸)にどれくらいのスピードで移動するかを決める
    this.wind = random(-0.5, 3.0);
 // 雪が垂直(y軸)にどれくらいのスピードで移動する(落ちる)かを決める
    this.speed = random(1, 3);
  }

  // 生成したSnow()コンストラクタにdrawメソッドを設定する
  // 雪を描画するメソッド
  Snow.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.closePath();
  }
    
  // 生成したSnow()コンストラクタにupdateメソッドを設定する
  // 雪を次に描画する座標にupdateする(雪を動かす)
  Snow.prototype.update = function() {
 // 雪を水平(x軸)に動かす
    this.x += this.wind;
    // 雪を垂直(y軸)に動かす
    this.y += this.speed;
 // x軸y軸でどちらも動いているので、結果的に斜めに落ちるように動く

    if (this.y > h) {
      this.x = random(0, w);
      this.y = 0;
    }
  }

function Snow()では、生成したSnowインスタンスにthisを使って初期値を設定しています。具体的には、雪が最初に出現する座標と、雪の粒の大きさ、そしてそれがどういったスピードで落下していくかということを設定しています。

draw()メソッドの定義では、Snowインスタンスcanvasに描画するためのコードを記述しています。ここでcanvasの基礎知識が少し必要になります。簡単に説明すると、beginPath()で書き始めることを宣言し、arc(this.x, this.y, this.radius, 0, 2*Math.PI)で先ほどインスタンス生成した初期値を使って雪を描画します。fillStyleは色の設定で、今回は雪なので白(#fff)fill()で先ほど設定した#fffの色で雪を塗りつぶします。そして、最後にclosePath()で書き終わりということになります。今回は丸を描いているので実際closePath()がなくても問題なく動作しますが、描画の終わりをわかりやすくするためにつけておいてください。詳しく知りたい方は :point_right_tone2:closePath()について こちらに詳しく載っています。

[描画する雪の個数を決める関数]

最初に定義した配列snowflakesに、雪の粒を引数の数値分だけ入れていきます。

  main.js

  function createSnow(count) {
    for (let i = 0; i < count; i++) {
      snowflakes[i] = new Snow();
    }
  }

[雪を描画するための関数と雪を移動させるための関数]

先ほどSnowコンストラクタに定義したdrawメソッドupdateメソッドcreateSnow(count)で作成した雪ひとつひとつに実行するために作ります。

  main.js

  function draw() {
    // これがないと直線続きでレーザー光線みたいになってしまう
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    for (let i = 0; i < snowflakes.length; i++) {
      // ここで使っているdraw()はSnow.prototype.drawで定義したもの
      snowflakes[i].draw();
    }
  }

  function update() {
    for (let i = 0; i < snowflakes.length; i++) {
      // ここで使っているupdate()はSnow.prototype.updateで定義したもの
      snowflakes[i].update();
    }
  }

clearRect()は、指定した範囲のcanvasの中身を透明にするもので、この記述をなくしてしまうと、update()で移動させた雪と移動させる前の雪が繋がってしまい、最終的に直線を描くことになってしまうので注意が必要です。

ここまでくれば、描画に関する関数はほぼ書き終わりました。あとはdraw()とupdate()をループさせる関数を作成します。

[連続的に雪を描画するloop関数]

  main.js

  function loop() {
    draw();
    update();
    handle = animFrame(loop);
  }

animFrame(loop)でloop()関数自身をループさせています。handle変数に代入することで、後からループを止めたい場合などに、cancFrame(loop)でループを止めることができます。

[関数の呼び出し]

最後にcreateSnow()関数とloop関数を呼び出せば完成です。

  main.js

  createSnow(300);
  loop();

僕は雪の粒の数が300くらいが好きなので300ですが、色々試してみてください、粉雪とか、牡丹雪とか。

 まとめ

今回は雪を表現しましたが、これをベースに少しいじるだけでいろいろなアニメーションに応用が効くと思うので、興味のある方がいればいろんな数値を変更してどんどん試してみてください。

canvasの知識的には一度リファレンスを読むと理解が深まると思うので、もう一度載せておきます。 HTML5 canvas (多分非公式だけど十分な)リファレンス

最後にコメント抜きのmain.jsのコードを載せておきます。

main.js

(function(){
  'use strict';

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const animFrame = window.requestAnimationFrame ||
                  window.mozRequestAnimationFrame ||
                  window.webkitRequestAnimationFrame ||
                  window.msRequestAnimationFrame;
  const cancFrame = window.cancelAnimationFrame ||
                  window.mozcancelAnimationFrame ||
                  window.webkitcancelAnimationFrame ||
                  window.mscancelAnimationFrame;
  const snowflakes = [];

  let handle;
  let w = ctx.canvas.width = window.innerWidth;
  let h = ctx.canvas.height = window.innerHeight;
  
  function random(min, max) {
    let rand = Math.floor((min + (max - min + 1) * Math.random()));
    return rand;
  }
 
  function Snow() {
    this.x = random(0, w);
    this.y = random(-h, 0);
    this.radius = random(0.5, 3.0);
    this.speed = random(1, 3);
    this.wind = random(-0.5, 3.0);
  }
  
  Snow.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.closePath();
  }

  Snow.prototype.update = function() {
    this.x += this.wind;
    this.y += this.speed;

    if (this.y > h) {
      this.x = random(0, w);
      this.y = 0;
    }
  }

  function createSnow(count) {
    for (let i = 0; i < count; i++) {
      snowflakes[i] = new Snow();
    }
  }

  function draw() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (let i = 0; i < snowflakes.length; i++) {
      snowflakes[i].draw();
    }
  }

  function update() {
    for (let i = 0; i < snowflakes.length; i++) {
      snowflakes[i].update();
    }
  }

  function loop() {
    draw();
    update();
    handle = animFrame(loop);
  }

  createSnow(300);
  loop();

})();

今後もcanvasで天気を表現したものを載せていこうかなと思っているのでぜひ参考にしてみてください〜

人生最高のアニメが終了しました

あくまで個人的な意見ということでよろしくお願いします。

えー、ブログタイトルにあるアニメとは、

 

進撃の巨人season2です。

 

僕はアニメを結構観るので、毎シーズンごとに'今季はどんなアニメやるのかなー'といった感じで調べるのですが、2017年の夏アニメ、今季ですね、今季はかなり楽しみにしていました。

 

その理由が先ほど述べた、進撃の巨人season2になります。

 

進撃の巨人season1が2013年の4月から9月まで放送されていたので、ちょうど4年間が開いたことになります。

 

4年です!!!!めちゃくちゃ待ちましたね。

しかし、2期が制作されないなんてことになったら多分泣いていたのでまずは感謝を。

 

WITSTUDIOさん(アニメーション制作会社) ありがとうございます。そして、携わった全ての方に感謝します。

 

season1とseason2の間には、アニメ映画の前編後編や実写映画、アニメ特別編などがあり、熱が冷めることはなかったです。

 

season2の感想を一言

歴代No. 1アニメになりました!

 

6話と12話しびれました。

正直僕は漫画も読んでいたので、展開は承知のうえでした。しかし、あの音楽、作画、声優の演技全てが絶妙のタイミングすぎて、鳥肌が立ちまくりでした。

 

偶然ですが、今回のseason2の12話まだ進んだところが、ちょうど僕が漫画で読んだところまでで、ここからの続きはまったく知りません。

 

そしてなんと、season2の12話の最後で、

 

進撃の巨人season3、2018年スタートが決定しました!

 

おめでとうございます!!

 

飛び跳ねました!!!

 

言いたいことが全然まとまってませんが。w

 

今回言いたかったことは、3期の放送決定がめちゃくちゃ嬉しいということと、

是非みなさんに進撃の巨人を観て欲しいということです。

 

話の内容的にはちょっと人を選びますが、こんなに興奮、感動するアニメにはなかなか出会えないと思います。

 

1話観たら止まらないので、時間がある時に是非。

 

WITSTUDIOさんカバネリの続編も決定しているので
めちゃくちゃ楽しみにして待ちたいと思います。

 

ではまた!

 

ネタバレの民の心理について(理解できません)

僕はあまり喜怒哀楽が激しい方ではないと自分では思っています。
なので、なにか他人のされたり言われたりしたことで腹をたてるということは
(中学校を卒業したくらいから)ほとんどなくなったのですが、唯一、、
絶対にこれだけはされたく無いというものがあります。

 

ネタバレです。

自分の好きなテレビドラマ、映画、漫画、アニメなど
自分で興味を持って楽しみにしているこれらに関しては、
ネタバレされると信じられないほど不機嫌になります。

しかし、この世の中には、ネタバレをされてもなんとも思わない人
むしろ、ネタバレをしてくれと言わんばかりに話の展開をどんどん聞いてくる人たちがいます。

さらに彼らは、先の展開を知ってから見る方が楽しいとさえ感じている人も少なく無いので、
彼ら自身がネタバレをすることにも全く迷いがありません。

 

いやはや一体何を考えているのでしょうかあの人たちは。

怖いです。。もはや。

そんな方達と一緒に映画でも観ようものなら、
常に隣で手榴弾のフックに指を引っ掛けられているようなものです。
いつ爆発するかわかったものじゃありません。

 

この前リビングである映画を観ていた時のことです↓

私「.....(沈黙&映画に集中中)」

母「ガチャ、バタンッ(リビングに入ってくる音)」

私「.....(母が来たことには気づくが集中中)」

母「それなんの映画?」

私「〇〇〇映画やお。」

母「あー、あれ。その人たち最後結婚するよねぇ。」

私「.....。 は?」

私「え、ちょ、、は?」

 

この後はお察しの通りです。

ちなみにこの映画は恋愛映画ですよ。 

 

なんなんですかあなたたちは??(ネタバレの民のことです)

テロリストですか?(ネタバレの民のことです)

 

こんな防ぎようが無いことをどうやって防げばいいんですか。
これじゃあテロと一緒ですよ。防ぎようがありません。

 

そこでです。

僕たち側(ネタバレが嫌な人側)も少しだけ考えました。

  1. ネタバレの民かどうかを見極める力をつける。
  2. 一緒に見る人も初見であるかを確認する。
  3. 信用できる人とでなければ大切なものはなるべくひとりで観る。

この三つを心の片隅において生活します!

なので!なのでです!

 

ネタバレの民にもいくつかお願いがあります!

  1. 全員がネタバレを求めているわけでは無い。
  2. ネタバレすることに快感を覚えてはいけない。

この二つのみです!

私は今まで、罪の意識なしにネタバレをしてしまう方達の事を書いてきましたが、
残念なことに愉快犯も存在するのが現状です。(個人的に万死に値します。)

 

なので先ほどの二つ!あの二つだけで結構ですので、
ネタバレが許容できない民の気持ちも少しだけご理解ください。

ネタバレって言っちゃったもん勝ちみたいなところもあるのでー。

どーーか、よろしくお願いいたします。

 

ではまた!

ひとつの部屋にティッシュ箱を何箱置くべきかの話

ひとつでしょ、、

と思った方が多分90%くらいだと思います。w

 

僕も、少し前までは今まで通りの常識で、
常識というかこれは習慣ですね、
リビング、キッチン、自分の部屋それぞれにひと箱ずつしかティッシュ箱を置いていませんでした。

 

そんなティッシュ箱ひと部屋ひと箱生活をかれこれ20年以上続けてきたわけですが、
最近ふと気がついたわけです。

 

ひと部屋にティッシュ箱をふたつ、いや、、
それ以上置いても、誰も僕を咎めないのではないかということに。。

 

ちょっとシリアスに書きすぎましたが、
このように思うようになったきっかけはいくつかあります。

 

ひとつめはこちら↓

箱交換時期がすぐきてしまう

これは良く分かるという方が多いのではないでしょうか。

 

もう時期は過ぎてしまいましたが、
3月から5月くらいまでの花粉ピークの時期など
一瞬でティッシュがなくなります。w

 

とめどなくティッシュを使いまくる時期なので、
そのぶんティッシュ箱を交換しなければならない回数も必然的に多くなります。

今思うと、これほどあからさまにひと部屋ひと箱生活のデメリットが公になっていた時期でも、
'これが普通だ'とか、'こういうもんだ'といった常識にとらわれていて、
他の解決策があるなどということはこれぽっちも考えようとしませんでした。

むしろ、こんなに早く使い切ってしまう自分が悪いとさえ思っていました。w

 

そんなこんなで、多少の不満がありながら'しょうがない'で片付けてしまい
結局改善策をしっかり考えるということはしませんでした。

今思うと、どこのトイレでもトイレットペーパーがひとつしか無いようなところはほぼゼロなので
それと一緒だなって感じです。(早く気がつけ自分w)

 

ふたつめはこちら↓

肝心な時に手元にない

これもよくありますよね!

先ほど花粉の話を少ししましたが、例えば、その時期鼻が詰まって寝苦しい気時に
ベッドに横になってから寝付くまでにまた鼻水が溜まってきて、手を伸ばしてもティッシュに届かないなど。w
せっかく布団に入ったのにまた起き上がらなければならないなんてしょっちゅうです。

そして、結局自分の顔の横にティッシュ箱を置いて寝るみたいな。

そしてそして、その翌日はベッドの横にティッシュ箱を置いたことを忘れているので
ちょっと探してしまうみたいな、w(すぐ思い出しますが不毛です。)

これは時期によっては結構無限ループなので厄介です。

 

ティッシュ箱ひとつにここまで振り回されるとは、、w

 

そして、みっつめはこちら↓

たまにストックを買い忘れている

たまにあるんですよこれ。

ひと箱づつ出していると、最後のひと箱がなくなれば次はもう無いわけなので、
ストックを確認するタイミングが一度しかなく、それゆえたまに買い忘れるという事件が発生してしまうのです。

しかし、ふた箱やさん箱出していれば、そのうちのひと箱がなくなったても、まだ他が残っているのですぐに困らないことと、
ストックの確認タイミングがあと数回訪れるので、一石二鳥なわけです!

 

こんな感じで、私は今、ティッシュ箱ひと部屋さん箱の快適な生活を送っています。

さん箱も同じ部屋にあれば、場所をある程度固定することも可能です。

良く使う部屋だけ(例えばリビングのみ)などで、一度お試しください。

 

皆様の生活が少しでも快適になることを願っています。

ではまた!

秋葉原の醸造所 常陸野ネストビール

'ひたちのネストビール'と呼びます。

 

日本のクラフトビール界の中でもかなりメジャーな部類に入り、海外でも結構見ました。

普通のスーパーには置いてありませんがビール専門店などで。

 

 

茨城県のひたち野が本社で、秋葉原に1店舗醸造所兼バーがあります。

醸造所なのでその場出来立てのビールが飲めて美味しいですよ!

 

しかも直営店だと価格もお手頃なので、気に入ったクラフトビールがあればその直営店を探してみるのがオススメです!!

 

そんなわけで今回は秋葉原常陸野ネストビールに来たわけです。

平日の3時ですが飲んでます。w

 

場所は、秋葉原の神田万世橋の高架下です。

mAAchという高架下のオシャレテナントの一角にあるんですが、ここかなりオシャレです。

f:id:arigatou10:20170614160401j:image

なかはこんな感じです↑

万世橋自体ははかなり歴史を感じる古いレンガ造りなんですが、

f:id:arigatou10:20170614162627j:image

なかはモダンで綺麗でとてもオシャレです。

 

常陸野ネストビールの外観はこんな感じ↓

f:id:arigatou10:20170614161631j:image

とてもオシャレです。

よく見るとビールを造っている樽も見えますよ!

 

神田川に沿って沢山のテラス席も用意されています↓

f:id:arigatou10:20170614162720j:image

 暑い中、テラスに座ってビールを飲む。

オシャレですね!!

神田川はあまり綺麗ではないですが。w

 

メニューはビールと軽いつまみのみなので、がっつり食事というよりは、秋葉原での観光や買い物のついでにいっぱい飲んでくみたいな使い方がおすすめです。

 

f:id:arigatou10:20170614163003j:image

ちょっと飲んじゃいましたが↑w

常陸野ネストビールは、このフクロウの可愛いロゴで有名ですね。

 

ぜひ秋葉原に来た際はふらっと寄って見てください。

 

ではまた! 

スマホ依存を抜け出す術

みなさんこんにちは。

いきなりですが、みなさんスマホ1日にどれくらいの時間使ってますか?

 

僕はパソコンも使うので、多分スマホだけだと2~3時間くらいで、パソコンも含めちゃうと7~8時間は触っています。w

 

パソコンを持ってなかったら4~5時間は余裕でいっちゃいそうなので、僕もスマホ依存なわけですが、、

 

「仕事で使っているから、私はスマホ依存じゃない。」とか、「 テレビの代わりに使っているから私は違う。」、「漫画をたくさん読んでるから依存じゃない。」とかもありますよね。

おっしゃる通りだと思います!

僕は、それは今回言うスマホ依存にはカウントされないと考えています。

 

メリハリを持ってスマートフォンを利用している方、趣味等に使っている方、すごくいいことだと思います。

 

しかし、しかしです。

スマートフォンを使っている時間全てが、何か意義をもって使っている時間でしょうか。

だらだらとTwitterInstagram、もしくはYouTubeなどをほぼ無限ループで見てしまい、

「しまった、、時間無駄にした〜、」と行った経験はありませんか?

 

僕はほぼ毎日あります。w

 

そんな方にちょっとした小技で、自分自身のスマホ触りたい欲を抑制しようと言うのが今回の話です。

 

早速紹介します!↓

 

 

画面を白黒にする

 

です!!

これだけです!

 

↑な人もいると思いますがw

とりあえずみなさん!騙されたと思って一度やって見ましょう。1分で完了します。

(iPhone ユーザーのみ)

 

まず、        「設定」のアプリをタップします。

それから、「一般」

次に、       「アクセシビリティ

次に、       「ディスプレイ調整」

 

順番にタップしていってくださいね!

 

最後に、   「カラーフィルタ」をタップします。

するとこんな画面が出て来ます↓

f:id:arigatou10:20170610152339p:image

この画面の中にある、「グレイスケール」をタップすれば、画面が白黒に切り替わります。

 

使いにくくなっただけ、と思う方が大半だと思いますが、

この、色をなくすとういことには大きな意味があるんです。

 

とくに通知も何もないのに、アプリを行ったり来たりして

常にスマホをチェックしてしまうといった行為は、

面白い投稿を見つけたり、友達から「いいね!」されていたりなど

'たまに'そういったご褒美があると、脳内でドーパミンが快楽を刺激し、

その快楽を何度も求めてしまうためなのです。

 

そして、その快楽を思い出させる要因として、

'色'とういうのが大きく関わっているのです。

 

実際にホーム画面に戻り、白黒の画面を眺めていても、

いつもより、TwitterInstagramのカラフルなアプリに

興味をそそられないと感じませんか?

 

ちょっとまだ信じられないと言う人は、

Googlesafariで自分の好きな食べもを検索して、(ステーキでも寿司でもなんでも!)

写真を見てみましょう。(もちろん白黒で!)

 

どうでしょうか?

 

肉もソースもモノクロなステーキや、カラフルじゃないお寿司。

自分の好きなものを見ても、あまり美味しそうじゃないですよね。。

 

景色でも同じで、

芝生が真っ黒な公園や、水がねずみ色の海など、

あまり行きたいと感じませんよね。w

 

このように、'色'というのはある種のトリガーのようなもので、

色を抑えることにより、スマホの魅力を無くしてしまおうとうことなのです。

 

これは結構説得力があると思います!w

 

慣れるまで時間がかかると思いますが、

スマホの生活を見直したい人、是非試して見てください。

 

ではまた!

AmazonPrimeビデオは神(Netflix, Huluとの比較) vol.2

みなさんこんにちは。

今回は、この前書いたこの記事↓

tomatochups.hatenablog.com

の続きを書こうと思います。

読んでない人は先にこっちを読んでね↑

 

まだまだ便利なところがいっぱいあるので紹介します。

では行きましょう!

 

自宅の大画面テレビで視聴可能!

これはすごいですよ、、

 

これのせいで、僕はレンタルビデオ店にはもう数年行っていません。。

なぜなら、DVDがなくても観れてしまうので!

(悪いことをしているわけではありません。w)

 

最近テレビを新しいのに買い換えたと言う方は

既にテレビの中にアプリケーションが入っているかもしれませんが、

数年前に買った人とかは、これが必要になります。↓

 

 

Fire TV Stick (New モデル)

Fire TV Stick (New モデル)

 

 

Googleさんも同じようなものを出していますが、

今回はアマゾンプライムの話なのでこれを紹介します。

僕自身もこっちがオススメです!

 

価格は約5,000円。ちなみにコスパが一番いいです。

すごいところは、AmazonPrime以外にもNetflix,Huluも観れますし、

さらにYouTubeもテレビの大画面で見れちゃいます!!

 

ほんとにもう手放せません。

 

Amazon fireTV Stickの詳しい使い方

この方のブログの説明↑がかなり丁寧なので、是非使ってみてください!

 

次はもう一つの超便利ポイントです。↓

 

オフラインでも視聴可能

これはスマートフォンアプリの話ですが、

AmazonPrimeビデオのスマホ版のアプリがあります。

 

これが超便利なんです。

アプリがこれで、↓

f:id:arigatou10:20170609111023p:plain

 

開くと、こんな感じです。↓

f:id:arigatou10:20170609111017p:plain

ここまでだと、ただ動画が観れるだけなんですけど

すごく便利なのはここからです。

 

これを見てください、↓

f:id:arigatou10:20170609111705p:plain

分かりますでしょうか、緑色の「今すぐ観る」と書かれているボタンの

一つ下。「ダウンロード」ボタンです。

 

これがあるので、、例えば自宅、職場、カフェなど

wi-fiのある環境でダウンロードしておけば、

いつでもどこでも映画らやらドラマやらアニメやらが観れてしまうのです。

 

自分のスマホの通信容量を気にすることなくです!(重要です。)

 

これは本当にめちゃくちゃ便利ですよ。

電車の中やちょっと空いた時間にwi-fiを気にせずに動画を楽しめます。

 

ここで、AmazonPrime、Netflix、Huluの3っを比較すると、

  • 動画をダウンロードできる
  • 動画をダウンロードできない
    • Hulu

 

この中だとHuluだけまだダウンロードに対応していません。

そのうち対応するとは思いますが、

現在はAmazonPrimeとNetflixだとできるといった感じです。

 

おわりに

AmazonPrimeの良さ、伝わりましたでしょうか。

さらにこのサービスを楽しむためのツールである、

スマホアプリ、FireTV Stickの便利さ、伝わりましたでしょうか。

 

最後にもう一度言いますが、月額325円(AmazonPrime)です。

音楽やら、送料無料やら、無料ストレージやらもついてきてこの値段ですよ。

 

正直知らないと損です。

 

映画とかよく観たり、ネットショッピングよくしたりする人は

是非一度使ってみてください。はまりますw

 

ではまた!