子供の動画依存(YouTube依存)を辞めさせた方法
少し前に下記の記事で娘が動画中毒(YouTube中毒)になりかけていると書いた。
あれから、このままでは良くないと妻と話し合い、娘の動画依存(YouTube依存)を解消すべく、動画中毒脱却に向けた施策を打ち始め、見事にそれは功を奏した。
といっても、やったことは単純で、
- 動画は特別なときしか見せないようにする
- 一緒に遊ぶ時間をたくさん作る
- ご飯時は家族で向かい合って食事をするようにする
ということを普段の生活の中でなるべく実践するように意識して生活を送っていただけだ。
これだけのことで娘は以前のようにiPadを指差して「みる〜みる〜」と言わなくなったし、YouTubeを見ている時間は今までの1/10以下になったのではないか、というぐらいに激減した。
この結果には私や妻も驚いているぐらいだ。
具体的にどういうことをしたのか、もう少し詳細に書いていく。
動画は特別なときしか見せないようにする
以前はちょっとしたときにもYouTubeを見せてしまっていた。
YouTubeを見ているとおとなしくしているからだ。
(どうしても静かに１人で遊んでいてほしい、というシーンは育児をしていれば少なからずあるものだ)
だが、おとなしくさせる方法を、別なことをさせておとなしくさせるようにした。
１人でおままごとをさせたり(そう言えば、最近妻が娘用に小さなキッチンを購入・組み立ててくれたので、今はそちらに夢中である)、お絵かきなどさせたりしているが、一番効果があるのは一緒に遊んであげることだった。
(ここについては後述する。)
そして標題にもあるように、動画は特別なときにしか見せないというルールを勝手に親の方で作った。
最初、子供は見たがって不満を我々にぶつけてきていたが、次第にそういうことにも慣れてきて、動画は特別なときにしか見れないものなのだなということを受け入れたようだった。
ちなみに現在我が家における特別なとき、というのは、
- 車に乗っていてぐずりだしたとき
- 外出中、どうしてもおとなしくさせたいとき
ぐらいだろうか。
あとはよほどのことがない限り、動画は見させていない。
意外と動画が必要になるシーンは少なかった。
一緒に遊ぶ時間をたくさん作る
上でも少し書いたが、親が子供と一緒に遊ぶ時間をたくさん作ってあげることが、動画依存から脱却するための一番のキーポイントだと今回思い知った。
やはり一人遊びには限界がある。まだ娘は小さいし、一人遊びのバリエーションも限られているのかもしれない。
(ただ、最近は上にも書いたキッチンが活躍している)
親が相手をしてあげることで１人で遊ぶ以上の刺激を得られているような気はする。
やはり人間が相手だと使う神経なども多いのではないだろうか（勝手な推測)
とにかく親が一緒に遊んであげる、というのはかなり効果があった。
だが、これを実現するには、当然子供のために親自身が沢山の時間を確保して上げる必要がある。
子供につきっきりというわけには行かないだろうから、ここらへんは各々の生活も含め、少し見直す必要がある。
実際のところ、今まで以上に子供のために時間を確保する、というのが今回の施策の中で一番難易度としては高いと思う。
ご飯時は家族で向かい合って食事をするようにする
以前、よく動画を見ていた時間帯の一つが夕食時だった。
どうしても子供のご飯を先に済ませて、我々夫婦はその後にご飯という流れだったが、ご飯時間のずれにより娘が手持ち無沙汰となり、飽き出すので動画を見せてしまっていた。
ここについては、家族皆で食卓で向かい合って食事を摂るように生活スタイルを見直した。
(仕事の都合で私だけ後から一人で食事を摂る日も時折出てしまっているのが現状だが、なるべく夕食時までには仕事を切り上げるようにしている)
食卓で向かい合って食事を摂るのは娘も楽しいようで、このスタイルを取るようになってから動画を見たいと言い出さなくなった。
どうしても日々の忙しさで食事なども効率的に済ませてしまおうと考えがちだったが、こうして皆で食事を摂ることで私や妻も以前よりも家族で食事を摂る幸せを感じられているような気がする。
「家族揃っての食卓」
こう書くと昭和の空気を感じるが、こういうのは現在の家庭にとってもとても大切なものなのかもしれないと感じた次第である。
同じように子供がいる友人と話していると、子供の動画依存については時折話に上がる。やはり皆、同じような悩みを抱いているのだ。
おそらくこれを読んでいる方の中にも同じような悩みを持っている方はいるかと思う。
もしこの文章が少しでも参考になれば幸いである。
AMPサイトでGoogle AdSense広告を出す方法
最初に
この記事はだいぶ前に書いたまま下書き保存で塩漬けになっていたものである。
すっかり忘れていたので、今更ながら公開することにした。
AMPサイトでGoogle AdSense広告を出す方法
AMPサイトでGoogle AdSenseの広告を表示する方法についてだが、AMP対応のサイトに広告を出す場合Google AdSenseのダッシュボードからAMPサイトを有効化しておく必要がある。
この手順を抜かして、コードだけ貼り付けても広告は表示されないので注意が必要。
後述するが、これらの手順はHabanero BeeでGoogle AdSence対応を行う際に気づいた。
AMPサイトにGoogle AdSenseを表示させる方法
まずはGoogle AdSenseを開き 広告 → サマリー とクリックする。
下記のページが開かれるので、AMPサイトをお持ちですか？ をクリックする
すると下記のような画面が開かれるので、AMPサイトにディスプレイ広告を自動的に表示 をクリックしてオンにする。
あとは手順に従ってコードを貼り付けるだけでOK。
下記のように AMPはオンです となっていれば有効化されている。
ただ、この状態になってもすぐには公告が表示されない。
私のサイトの場合、広告表示までに数日時間がかかったような気がする。
少し前にツイートした、このAMPサイトにおけるGoogle AdSenseの件、先ほどサイトを確認したら、いつの間にか広告が表示されるようになっており、収益もちゃんと発生していた。反映まで時間がかかっていただけだったのか...？ https://t.co/yaY6bn6xLz
— Yuki Shindo (@shinshin86) July 4, 2021
なお通常サイトとAMPサイトを出し分けているようなサイトの場合、もう少し作業は必要になると思うが、そちらの作業について下記のドキュメントを参考にしてほしい。
Habanero BeeでもGoogle AdSense対応を行った
今日時点ではCanary版までしかリリースしていないがHabanero BeeでもGoogle AdSense対応を行った。
既にStable版にもrelease済み。
対応した際のPRはこちら。
Canary版までしかリリースしていないのには訳があり、Google AdSence審査の際に現在Habanero Beeで設定している方法で審査を行ってくれるか確証が取れていないため、まだCanaryまでにしか落としていない。
調査した際に、Google AdSenceの審査についてはAMP対応のサイトでも、AMP対応ではないカスタムスクリプトを貼り付ける必要があるという記述を見た。ただ、それが今もそうなのかまでは確証が取れていないので、近々とあるサイトを用いて実際に検証を行って見る予定だ。
(今回のGoogle AdSense対応のテストでは、すでにHabanero Beeで運用している、あるサイトで検証しているが、そちらはサブドメインだったので、上の審査はまだ行えていない)
というわけで、Google AdSenceに関する審査までおえたら、Stableリリースを行う予定だ。
上記検証については未検証の状態だが、Stable版までのリリースは終えている。
検証の結果、上記手順では無理だったとしても、広告を貼るコードとしては意図通りに動くことが確認とれているため、審査側の対応にはまた別のコードを書いて対応していく必要が出てくるかと思う。
そのためこの検証については無関係とし、Stableまでリリースは行っている。
Habanero Beeとは？
Habanero Beeとは？と思った方は下記の記事を読んでみてほしい。
たぶんHabanero Bee関連で一番読まれている、紹介記事
useRefを使って指定したDOMのサイズを取得する方法
最近、表題のような処理を書くべき状況になったのだが、うまく書けなかったので、反省の意味を込めて書いていく。
useRef を用いて対象のDOMを取得
useRef を使うと対象のDOMを取得できる。
https://ja.reactjs.org/docs/hooks-reference.html#useref
例えば document.getElementById や document.querySelectorなどを使ってDOMを取得して、DOM自体のサイズを計測するような場面でuseRefを用いることで同様の処理を実現することが可能となる。
Reactを用いているなら、document.getElementById や document.querySelectorを使ってDOMを取得するよりは useRef または createRef を用いたほうが単一方向のデータフローの中で処理を書けるので良い。
document.getElementById などを用いた場合、想定外のところでDOMの書き換えが起こることもあるため、場合によっては意図しない値を取得してしまうこともある。
もちろん、コードの状況によっては useRefを使ってうまく処理を書いていくのが大変な場合もある。ただ、後々の管理コストを考えるとやはり早いうちに useRef などを使って見通しの良い構造を作っておいたほうが良くはある。
なので、ここらへんは頑張りたいところ。
(が、もちろんケースバイケースではある)
前置きが長くなったが、下記はuseRefを使って指定したDOMのサイズを取得する方法となる。
CodeSandboxはこちら
CodeSandbox上で dataList や styles の中身を書き換えてみると、実際に取得できている横幅と縦幅が変わってくるのがわかる。
上に貼ってあるコードのサンプルを下にも貼っておく。
import "./styles.css"; import { useEffect, useRef } from "react"; const dataList = [ { id: "1", name: "test1" }, { id: "2", name: "test2" }, { id: "3", name: "test3" } ]; const styles = { width: 500, height: 350 }; export default function App() { const elm = useRef(null); useEffect(() => { const { clientWidth, clientHeight } = elm.current; console.log({ clientWidth }); console.log({ clientHeight }); }, []); return ( <div className="App" ref={elm} style={{ ...styles }}> <h1>Hello React</h1> {dataList.map((data) => ( <p key={data.id}> id: {data.id} <br /> name: {data.name} </p> ))} </div> ); }
data-cfemailというHTML属性と[email protected]という文字列について調べてみた
先日 data-cfemail という見慣れないHTML属性を見た。これは a タグで囲われており、囲われている中のテキストは [email protected] という文字列が表示されている。
また /cdn-cgi/l/email-protection へのリンクにもなっている。
内容としては表示されている文字列の通りで、Emailアドレスの収集をbotから行われるのを阻止する機能のようで、Cloudflareが提供している機能であるようだった。
(だから data-cfemail というように cf がついているのか)
ちなみに挙動としてはサイトにアクセスするなどしてHTMLがすべて描画されている状態で確認すると表示されるべきアドレスは表示されるが、 ページのソースを表示 などでHTMLのソースを直接表示すると、 [email protected] という文字列に置き換えられるようだ。
参考にしたサイト
https://support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-support.cloudflare.com
GitHubでリポジトリ作るだけでは草は生えない、Caramel ShipとB/W、娘がイヤイヤ期に突入する気配、などなど
GitHubでリポジトリ作るだけでは草は生えない
最近知ったのだけど、GitHubで新規にリポジトリを作るだけでは草は生えないらしい。
すごくどうでもいいことなのだけど、今更ながら知った。まあ、知らなくても特になんの問題もない。
確かにリポジトリ作っただけで草生えるのってのも変な話といえば変な話だ。
追記：と思ったら草生えてる
今日たまたまGitHubの草エリアを見たら、リポジトリを作成しただけの日でも草が生えていた。
あれ？たしかにこの前は草が消えていたのだが(だからこそ、これに書いた)
一時的に草が消えていた？謎である。
Caramel ShipとB/Wで今日づくり
最近Caramel Ship＆B/W、それぞれで曲を作ったり、レコーディングしたりした。
アウトプットはまだ先になりそうだが、マイペースに活動していますよ〜という報告。
Camaral ShipもB/Wもストリーミングサービスにリリースされているのでチェックしてみてください。
そう言えばちょうどこの時期辺りにB/Wの下記の曲を書いていた記憶がある。
突然ハマったFPS〜って歌で出てくるFPSのタイトルはApex Legendsのことを指している。
蝉の鳴き声を聞きながらApexに勤しむ、そんな夏であった。
娘がイヤイヤ期に突入する気配
最近娘がイヤイヤ期に突入する気配を出している。
簡単に言えば、わがまま度がアップしてきており、こちらの思い通りにさせまいとする意志を感じるようになってきた。
娘はなかなか我が強い性格のようなので、イヤイヤ期に突入したら大変な感じになるのではないか？と妻と戦慄している。
あと、最近YouTubeが好きすぎてやばい。完全に動画中毒者だ。
iPadを見つけると、「みる〜みる〜」とiPadをこちらに持ってくるし、あわよくばロックを解こうとする気配まで見せる。
他の子もそんな感じなのだろうか？今度、子供のいる友人にあったときに聞いてみようと思う。
最近の子が皆こういう感じなら、まあ多少はしょうがないか、となるが、私から見れば完全に動画依存症状態である。
(ちなみに見ている動画は子供向けのやつです。おかげで子供向け動画に詳しくなれた。あと、子供向けの英語の歌が頭の中でリピートする現象が発生するようになった)
まあ、そんなこんなで今年も暑い夏にうんざりしていますが、元気に過ごしています。
夏も半分を過ぎた感があるので、残りも気合と根性で切り抜けていきたいと思います(適当)。
暑い夏に飲むレモンハイは格別だぜ。
キンキンに冷えたレモンハイ。グビグビ。 pic.twitter.com/m2bdDIUtBT
— Yuki Shindo (@shinshin86) August 6, 2021
Pythonの小さなWebフレームワークBottleについているSimpleTemplate Engineを試してみた
Pythonで一番小さなWebフレームワークと言われているBottle。
このBottleにはSimpleTemplate Engineというテンプレートエンジンがついている
https://bottlepy.org/docs/dev/stpl.html
私は今までこれを使ったことがなかったのだが、先日自身が公開しているbottle-flash2というオープンソースのライブラリでこれに関するissueを頂き、その関係でちょっと触ってみた。
ちなみにそのissueというのがこれ。
(issueに気づくのが遅くなってしまって申し訳ない気持ちだ)
そしてこのissueに関係する形でSimpleTemplate Engineを触ってみたサンプルのリポジトリが下記となる。
SimpleTemplate Engineを用いた書き方(変数の代入, if, forループ)
SimpleTemplate Engineの使い方について一番上に貼ったドキュメントを見ればよいのだが、ドキュメントはなかなか簡素な形なので、備忘録として上のリポジトリでも利用しているSimpleTemplate Engineの書き方についてメモしておこうと思う。
SimpleTemplate Engineを用いた際の、変数の代入
ちなみにSimpleTemplate Engineを用いて、HTMLにPythonコードを埋め込む際は % を用いる。
下記はSimpleTemplate Engineのドキュメントから引用。
このように <% と %> で囲むと、複数行のPythonコードが記載できる。
% name = "Bob" # a line of python code <p>Some plain text in between</p> <% # A block of python code name = name.title().strip() %> <p>More plain text</p>
下は上に貼った自身で作成したサンプルリポジトリで用いている書き方だが、このようにすると messages という変数に値が代入される。
(app.get_flashed_messages()という関数は bottle-flash2 側で実装されている関数である。)
% messages = app.get_flashed_messages()
以上のように関数の実行なども当然できるので、サーバ側から渡ってきた関数を元に何かをするということもできる。
SimpleTemplate Engineを用いた際のif文やforループの書き方
if や for の書き方についても基本的には % を用いた上で実行すれば良い。
下記もサンプルリポジトリからの引用だが、 % がついている箇所に注意すれば何をやろうとしているかがわかると思う。
(ただ、SimpleTemplate Engineの書き方としてこれが適しているのかは分からない。公式ページを参照してみるのが正確かもしれない)
% if len(messages) > 0: <div id="flash_messages"> <ul> % for m in messages: <li>{{ m[0] }}</li> % end </ul> </div> % end
なお変数内の値を展開する場合は {{ }} を利用する。
また、if や for を用いた際、 end で終了させる必要があるようなので、そこも忘れないように注意しておきたい。
以上、SimpleTemplate Engineを用いた際の備忘録となる。
pyenvをM1 MacにインストールしてPython環境を構築する
M1 Mac(Apple Silicon)に Python 環境を作りたくなったのでインストールしていく
基本的に私はGitで直接チェックアウトしてインストールする方法をいつも選択していたので、今回もこちらをセレクト。
( brew は使いません)
https://github.com/pyenv/pyenv#basic-github-checkout
pyenvをM1 Macに導入するまでの備忘録
以下、備忘録。
git clone https://github.com/pyenv/pyenv.git ~/.pyenv cd ~/.pyenv && src/configure && make -C src
次に .zshrcに設定を反映させる。
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zprofile echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zprofile echo 'eval "$(pyenv init --path)"' >> ~/.zprofile echo 'eval "$(pyenv init -)"' >> ~/.zshrc
そしてターミナルを再起動する。
ちなみに下記のコマンドを打ってもエラーになる。必要なのはターミナルの再起動
source ~/.zshrc
ターミナルを再起動すると、下記のようにpyenvが使えるようになっている。
pyenv --version pyenv 2.0.4
現時点で最新の 3.9.6 をインストールする。
pyenv install 3.9.6 # pythonと打つことでシステム側のpythonを、 # python3と打つことで今回インストールした3.9.6を使えるようにする pyenv global system 3.9.6
だが、
python3 --version Python 3.9.2
となってしまう。
この 3.9.2 は brew でインストールされていたもののようだった。
だが、brew側で uninstall しようとすると、依存関係にあるツールがあるためアンイストールできないとエラーになる。
依存を無視して uninstall も可能だったが、それだと動かなくなるツールも出てきそうなので、一旦このままとする。
とりあえずは作業環境で下記のようにコマンドを叩いて動かすことにする。
pyenv local 3.9.6
以上、備忘録でした。
