A Day In The Boy's Life -3ページ目

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

賛否両論があるのは重々承知の上、子供にスマホを一時的に与えるシーンはよくあることです。

それは、電車の中など公共の場で子供が騒ぐことを気にしてだったり、子供が一つのところでじっとしていられないので気をそらすためにスマホを見せたりと様々だったりするわけですが、子供って吸収が速いので一度そこに自分が気に入ったものがあるとわかると何度もねだったりしてくるわけです。

親のスマホの操作を見ていたらいつの間にか覚えて、2歳でも平然とデスクトップからYoutubeのアプリを起動して履歴などから気になる動画を見始めたりします。

こうなってくると、スマホは面白いアニメーションが見れるという記憶がなされるわけで、ことあるごとに「スマホをよこせ」みたいな素振りや言動をしてきて困ったりします。

息子(2歳)もご多分に漏れずそんな状況で、勢いでYoutubeのアプリを消してみたというわけです。

 

 

結局、ちゃんと見れていないYoutube

 

2歳児でもYoutubeを起動することはできるものの、その操作を見ているとちゃんと動画を見れてたりはしないんですよ。

Youtubeって動画を見始めると最初に広告が表示されたりするので、「自分が意図している動画ではない」と思ってか、すぐに別の動画をタップしたりします。

例えきちんと再生されたとしても、すぐに飽きてまた次の動画を見始めたりしてますし、余計なところをタップして動画をシェアする画面やアカウントの切り替え画面がでてひどくご立腹で「元の画面に戻せ」とせがんでくるわけです。

(まぁ、変な動画をシェアしようとしていて親として焦ることはよくあるんですけど)

 

検索といった高等機能は使いこなせないため、目的の動画を探すには履歴やお勧めのものをたどるしかありません。

なので、2歳児レベルでは単に気になる画像があってそれをタップしたり、フリックする操作自体が楽しいのかもしれません(もう少しちゃんとアニメーションを見るようになれば目的は変わるんでしょうけど)。

ただし、おもちゃのスマホとかは瞬時に見抜かれますし、速攻で飽きられたりもします。

結局、隣の芝生は青く見えるパターンで、親が常に持っているものに触れたい衝動が出るんだと思います。

 

 

アプリはどう制御すべきなのか

 

Youtubeのアプリがどれなのかはアイコンによって識別されているので、デスクトップのどこにおいても簡単に見つけられたりします。

毎回Youtubeを起動されるので、試しにアプリ自体をフォルダの中(しかもスワイプしないと見れない場所)においてみたんですけど、10分ぐらいで見つけられて2歳児との知恵比べに負けた気分になりました。

 

子供によるスマホの操作を制限する機能やアプリっていうのもあるんですけど、かなり機械的な制御になっていて危険な行為を止めるには役立つものの、ここで書いているような困りごとには全然役に立たなかったりします。

例えば、子供が勝手にタップして商品を購入しないようにパスコードなどによってロックするような機能が実装されていたとしても、パスコードがかかっていることは子供自身認識してたりもします。

スマホを起動するとパスコード入力画面になるわけで、それを見たら「解除しろ」というような素振りをしてきたりもします。

 

なので、今回のようにYoutube起動時にたとえパスコードが必要としても効果はないわけです。

ずっと見て視力が悪くなるんじゃないかと心配だから強制的に見せないようにしたいということには効果がありますけど、子供の機嫌が悪いのでスマホを渡した場合はYoutubeの画面が開かないとなるとより機嫌が悪くなり、より面倒な事態になるわけです。

操作が大人か子供かを識別してくれたらなとか思ったりしますし、ログイン時にデスクトップ環境に変化を持たせることができたら便利なのかもと思ったりします。

Youtubeも子供アニメの閲覧履歴が大量に出ているわけで、実際にログインしているアカウント個人の趣味と相反するものになっている状態をどう管理しているのか気になったりはしますけど。

 

 

まとめ

 

自分としてはYoutubeのアプリがなくても困らなかったりします。

まぁ、Web版を見ればいいですし通信量を気にしてか動画はスマホではあまり見ません。

(子供にYoutubeなどの動画を見られて困る一因がのがその通信量によるものだったりするわけですが)

 

なので、一旦はこの状況を続けてみて「このスマホには気に入ったものがない」と認識してもらえばあきらめるかなと思ったりするんですけど、結局のところ写真を見たり撮影した動画を見たりしているので効果としてどこまであったんだろうと早くも思っている今日この頃です。

 

 

 

 

あんまりネタもないので、たまにはつらつらと。

自分は、あんまり物欲がありません。

TVや雑誌などで気になる商品があったりしても、購買などにはなかなか結び付かないですし、ネットを使って積極的に情報収集するということも多くはありません。

なんで物欲がわかないのか、二の足を踏んでいる理由は何なのかというのを少し考えてみました。

 

 

理想を満たすための理想

 

物欲がないとは言え、何も買っていないわけではなく結構週末は家にいないことは多いんですけど、子供が生まれてからは特にその投資先が自分以外になってしまっているのは否めません。

ので、一つはほかでお金を使うから自分の物欲を抑えているというのもあるかもしれません。

 

昔からそうなのか、と思い返してみると比較的学生やもっと前の子供のころは色んなものが欲しくて小遣いやバイト代を工面していたような記憶もあります。

ゲームソフトを買ったり、プラモデルを買ったり、今ではあまり聞かなくなった音楽についてもCDをたくさん買ったりレンタルしてたような記憶もあります。

もともとそこまで多趣味ではないので投資先が限定されていた分、大人になってそれらを一周して情熱が薄れて新たな投資先を見つけられずにいるからというのがあるかもしれません。

 

でも、今では何も興味を惹かれないわけではありません。

先に書いたようにTVや雑誌を見ていて「これは欲しい!」と思うものはあるわけです。

ですが、それを買ったときをイメージしてみるとほかの要素が邪魔をして十分にそれを活かすことができないのではないか、という考えがよぎったりします。

例えば、パソコンが欲しいとなった時に、使う場所を固定したくないのでノートがいいなとか思うんですが、一方でこうしてブログを書くときとかプログラミングしようかなとか思うときは大きなディスプレイが欲しいと思ったりするわけです。

そうなってくると、それを設置するための机や疲れない椅子が欲しいと思ったりします。

ですが、それをまとめて購入する予算がなかったり、そもそも部屋にそんなスペースがない、またはスペースがあったとしても散らかっているから整理しないとな、ということが頭をよぎるわけです。

まぁ、片付けぐらいさっさとやれよというのはあるんですけど、簡単に捨てられるようなものばかりでもなく、粗大ごみ捨てに行くのに億劫になったり、本格的な作業部屋を作ろうとなるとその他にこだわりたいものが出てきたりして、それを片付けないと机を設置するというところに結びつかないもどかしさがあったりします。

勝手に理想を高くしているだけなんでしょうけど、理想をかなえるための別の理想をかなえるのに手間取っているわけです。

 

最近、CDとかネットを通して音楽を購入するということ自体がほとんどないんですけど、これもそういう前提の環境が整ってないから二の足を踏んでたりもするんですよね。

パソコン環境を整備してからやろうとすると、先に書いたようなさらにその先の理想を片付けないといけなくなったり。

今時の子はわざわざパソコンとか使わずスマホだけで完結しているんで、やり方そのものが古いんでしょうけどねぇ。

 

でもこう考えると、その連鎖自体が物欲となるんでしょうけど、理想を得るための理想が邪魔をしてなかなか踏ん切りがつかない状況になっています。

まぁ、絶対にすべての理想を一度にかなえるほどの体力や財力はないわけで、積み重ねていく理想の過程で別の理想が出てくるので永遠に満足はしなさそうな気はしています。

(こう書くと物欲の塊みたいに見えるのですけど)

 

実際問題、パソコンとかは少し前に新調したりもしたんですけど、モニターは設置する机がないから買うのをためらったりしています。

音楽とかもそういう環境が整えばまた本格的に聴いたり買ったりするのかもしれません。

とりあえず、そうなるために部屋の片づけから始めたいなと思うんですけど、こう暑いとやる気が湧いてこないと思ったりしている今日この頃です。

 

 

 

 

以前に、「ノンプログラミングでも利用可能!PHPで多様なグラフを作れるpChart 」という記事を書いたことがあるのですが、これはPHPからグラフの画像を作るというものでした。

ただ、画像として出力してしまうのでダイナミックにグラフを表示したり、アニメーションさせたりということができません。

 

今回紹介するC3.jsはJavaScriptベースで様々なグラフを表示してくれるライブラリです。

JavaScriptベースのため、動的に要素を追加・削除したりアニメーションを加えるといったことが簡単に出来るようになっています。

C3.jsは、D3.jsというJavaScriptライブラリをベースにして作られています。

(D3.jsのページを見るとかなり多様なグラフィックを表現できるように見えますが、実際にはドキュメントデータを操作するためのライブラリみたいです)

バージョンが2017.05現在で0.4.11ですが、最近バージョンアップが行われており比較的メンテナンスもちゃんと行われているようです。

 

 

C3.jsの使い方

 

まずはインストール方法(といっても設置するだけですけど)ですが、公式ページのセットアップの説明に書かれているようにソースをダウンロードしてサーバー上の適当な場所に保存するだけです。

ただし、ダウンロードしたソース内にD3.jsは含まれていないので、D3.jsのページのほうからもダウンロードして設置する必要があります。

注意しないといけないのは、D3.jsの最新バージョンが4系となっているのですが、C3.jsが動作するD3.jsのバージョンは3.5系となっているので対象バージョンをダウンロードする必要があります。

現時点では、3系は3.5.17が最新のようなので、この辺から落とせます。

一応、

 

<script src="https://d3js.org/d3.v3.min.js"></script>

 

のようにして、ウェブ経由で読み込ませることも出来ます。

で、C3.jsの使い方についてですが、例えば棒グラフを出す例は下記のようになります。

 

<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<link href="https://localhost/cmm/css/c3.min.css" rel="stylesheet" type="text/css">
<script src="https://localhost/cmm/js/d3.min.js" charset="utf-8"></script>
<script src="https://localhost/cmm/js/c3.min.js"></script>
</head>

<body>

<div id="access_count"></div>
<script type="text/javascript">
var access_count = c3.generate({
    bindto: '#access_count',
    data: {
      columns: [
        ["アクセス数","252","87","118","146","76","48"],
        ["UU数",130,72,35,85,58,3],
      ],
      type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ["201611","201612","201701","201702","201703","201704"]
        }
    },
    bar: {
        width: {
            ratio: 0.7
        }
    },
    size: {
          width: 400,
          height: 200
    }
});

</script>
</body>
</html>

 

上記の出力結果は、下記のような感じ。

 

 

作り方は、棒グラフのサンプルページにも描かれていますが、出力先のDIV要素のIDに対して(例の場合はaccess_count)、グラフを埋め込むわけですが、基本的にcolumnsのプロパティに出力データ、typeでグラフの種類、categoriesプロパティにx軸の項目名をセットしています。

後は、棒の幅(bar - width - ratioのプロパティ)やグラフの幅や高さなどをセットしてます。

 

棒グラフ以外にも、サンプルページにあるとおり線グラフや円グラフ、ドーナッツグラフまたはその組み合わせなどが作れ、かなり多くのグラフを生成することができます。

配色などもオプションで指定することができますが、見出しや項目名(上記の「アクセス数」、「UU数」など)の装飾や位置をずらしたりは、出力されるのがSVG形式となるためデザインの変更にはCSSだけではうまく対応できないかもしれません。

 

あと、JavaScriptライブラリならではなのが、最初に書いたようにアニメーションさせることが出来る点です。

ゲージチャートのサンプルページを開くとアニメーションをしていますが、これはスクリプトを組み込むことで出来るアニメーションです。

線グラフのサンプルではもう少し単純に書かれていますが、setTimeoutを使って遅延ロードさせてデータを追加することでアニメーションを発生させています。

また、標準で項目名をクリックすると該当項目の表示・非表示を切り替えることができるので、多くの要素を表示していたとしても特定項目だけの比較などが簡単に行えたりもします。

 

オプションもかなり豊富に用意されており、グラフやデータをクリックしたときの挙動なども定義できるようです。

動的なグラフの生成やアニメーション要素を持たせたいといった場合に利用できるライブラリではないでしょうか。