WEBエンジニアの技術メモと日々

adsenseがようやく承認されました！ 昨年末（多分10月末くらい）に申請していつまでも広告が表示されず四苦八苦していましたがようやっと承認されました！！ ほぼ広告知識無しで思いつきのままにブログを始めて広告のadsenseの申請をしてみたら苦労した話の記事になります。 無知でわからず待ちなにか変だと思って調べ変更して ホストアカウント・独自ドメイン・アカウントキャンセル・・・ 喜びの承認まで8ヶ月 事の発端は釣りを始めたことで同じくやっている 釣りブログ ですがどうせやるなら広告でも出してお小遣い稼ぎでもできたらななんて安直に考えていました。 さらにYouTubeで釣りの動画をみてハマってしまい、YouTubeで広告も出そうと釣りに行ったら動画を撮るようになりました。 ブログは【Google Blogger】 最終的には申請していたアカウントキャンセルして、別アカウントで再度申請をしたら1日で承認されたんですが以下は自分がダメだったと思う点です。 まずはじめにダメだったと思っているのが （これは結果的に検証できないので想定です） 釣りを始めてYouTubの動画にはまりYouTuberになるんだ！と思ってしまったこと ことの手順ですがYouTubeでチャンネルを作成、Bloggerで釣りブログを投稿し始めました。googleのアカウントはどちらも同じです。そしてYouTubeで収益化を有効化してbloggerの方も収益化をし同じアドセンスのアカウントに紐づけている状態です。 このどちらも収益化を有効にした状態が一つダメな点だったと思っています。 どちらも有効だとYouTubeの審査開始の条件（当時は1000時間の再生がされたらだったと思います。）がクリアできないのでブログの申請もYouTubeチャンネルの審査開始に引きずられて（アカウント自体の審査条件に引っかからないんだと思います。）bloggerの方も審査されずにいつまでも広告がでない、または審査されないんだと思います。 ※これはbloggerに広告をまず出したかったという意向だったのでこういう書き方になっています。 もしかしたらBloggerを先に収益化して承認されたらYouTubeを収益化したら良かった

Reactを初めて触ってみました(tutorialその⑧) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回では兄弟要素にはkeyを用いて対象要素の識別をし更新を行った場合にKeyを元に対象要素を更新したり、新たなKeyは追加で保存されたり削除されたKeyは削除されプロパティからも削除してくれることをReactがしてくれるんだと言うことがわかりました。 今回はボタンを履歴ボタンを押してその時の状態が再現されるところをやっていよいよtutorialの完成を目指します。 ※WEB翻訳をそのまま載せているところもありますが自分で理解できるように記事にしています。 では前回に引き続き履歴の部分をやっていきましょう 移動リストについてはすでに各操作ごとに回数があり回数は一意ですのでIDとして利用できます。 その回数をGameのrenderでliの要素にkey属性を追加します。     const moves = history.map((step, move) => {       const desc = move ?         'Go to move #' + move :         'Go to game start';       return (         <li key={move}>           <button onClick={() => this.jumpTo(move)}>{desc}</button>         </li>       );     }); まだ、jumpTOのメソッドが未定義なので履歴のボタンが追加されていってもボタンを押すとエラーになってしまいますね。 Gameの状態に新しいKeyを追加して現在表示している回数（履歴）を表示します。 stepNumber: 0 をGameのコンストラクタに定義して初期化します。 class Game extends React.Component {   constructor(props) {    

GOOICEのVRゴーグルを購入したので使用してみました！ 会社でふと思いついたこと。 格闘技が好きな私 直接戦うのは無理だけどVRならバーチャルバトルができるんじゃないか？ 好きな格闘家と戦えるのではないか？！ なんて思いつきから4月の新卒入社社員が格闘技好きなこともあり話していたら思いついてしまいました。そんなのを作りたいと！！ で早速どうやったら作れるのか？？ とまずは調べてみました。 どうやら360°カメラとやらが必要らしい。 ※これは2Dの動画をアプリケーションを使って分割することによりVRで見ることができるみたいですが。やはり後ろを向いたら後ろの景色が見れたほうがリアルですよね。 ということで早速360°カメラをamazonで購入。 こちらは本日には届かなかったのですが一緒に購入したVRゴーグルが先に届きました。 Gooice 3D VR ゴーグル（amazonへリンク） こちらになります。 Gooice 3D VR ゴーグル ヘッドフォン付き こちらなんですがヘッドストラップのところに丸いクションが付いていてまだ長時間使っていませんが3D映画とか見るなら付いていたほうが疲労度が減るかともと思いました。 そしてヘッドフォンが付いていて、イヤフォンジャックにつなぐコードもスマホを収納することろにコンパクトに収まっていますので気にならず鑑賞できます。（こちらは使ったのでそう思いました。） それとリモコンがついているのが良かったです。 YouTubeの再生準備をして例えば一時停止にしてゴーグルにスマホをセットします。 ゴーグルをかけてリモコンで再生ボタンを押せばスタートするのでスタートから最後まできっちり楽しめます。 重量も軽く（あとはスマホの重量次第で変わっちゃいますが。。）とてもいいです。 リモコンの使い方は説明書を読まなかったのではじめ分かりませんでしたが再生だけでしたらそんなにボタンも使わなかったのですぐ慣れました。 配送時の保護フィルムなんかもしっかりしています。ジャックもコンパクトなのがわかりますよね。リモコンでも操作できますがゴーグル下部にはOKとあるタッチスクリーンボタンと音量調節ボタンとこのボタンが押すこともできて再

Reactを初めて触ってみました(tutorialその⑧) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回まではゲームコンポーネントへ状態を保存する部分を移していき履歴の保存する部分の準備をした感じです。 ※WEB翻訳をそのまま載せているところもありますが自分で理解できるように記事にしています。 チュートリアルの理解なのにこれの記事が長くなってしまって申し訳なくなってきました。。。 でもやりきりらないとはじまりませんのでやっていきましょう！！ ムーブメントの表示 前回React要素はファーストクラスのJSオブジェクトであることを知り、保存したり、渡したりしました。 Reactで複数の項目をレンダリングするには、React要素の配列を渡します。 その配列を構築する最も一般的な方法は、データの配列をマップすることです。 Gameのrenderメソッドでそれをやってみましょう。   render() {     const history = this.state.history;     const current = history[history.length - 1];     const winner = calculateWinner(current.squares);     const moves = history.map((step, move) => {       const desc = move ?         'Go to move #' + move :         'Go to game start';       return (         <li>           <button onClick={() => this.jumpTo(move)}>{desc}</button>         </li>       );     });     let status;     if (winner) {    

会社の持ち込みPCについて考えてみました うちの会社では会社としては会社で購入したPCを利用してほしいのでしょうが個人利用のPCも申請すれば持ち込みして開発できます。 会社はデフォルトが Windows PC で個人的な経験ですが docker for windows が不安定で苦労した経験があったり会社でWindows、自宅でMacなんてことや会社でJSキーボード、自宅でUSキーボードなんてより自宅も会社も同じPCのほうが開発しやすいに違いない！ ということで私のチームでは自分のPCでのほうが開発しやすかったら持ち込むことを私は推奨しています。※ただし、管理部門は煙たがっていると思いますが。。 ですが持ち込んでいいよー！ 開発しやすいねー！ よかったね～ ではすまないのがリスクマネジメント とは言え管理部門はPCロックはかけましょうね、外でPCはなくさないでね程度のルールや指導しかしていません。 なので私が持ち込み（BYOD）推奨しているだけにセキュリティを考えて運用することにしました。ノート想定（しかもMac想定です）なので PCにログインパスワードをかけること ディスプレイを閉じた場合はロックの設定をすること パスワード文字列に関してのルールを守る ざっくり表現ですが身分証明などでわからないものに ちなみにパスワードのヒントは本当のことを書くと脆弱になります このSNS時代に名前などから本人を特定し、小学校の名前や母親の名前、ペットの名前などはパスワードを教えますよと言っているようなもの。 例えば好きな小説にかかれている好きな人物の名前や小学校など自分でしかわからないものにするといいようです。 ウィルス対策ソフトは導入する これは自分の個人情報を守るためにもいいのではと項目に入れました。 ウィルス定義の定期更新 定期的なスキャン 会社専用のディレクトリまたはパーテーションを作成する ここは会社側の立場に立った場合ここ以外にファイルがったら私は疑われても仕方がありませんよという建前を持たせるための項目として設けました。（強制はしていません）ソースコードや資料はそこに置くこと。FileVaultで暗号化をすることも推奨してみました。 退職時はここを削除する。

Reactを初めて触ってみました(tutorialその⑦) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回までは基本となるゲームの作りまで完成しました。ここからは履歴の機能に取り掛かっていきます。 ※WEB翻訳をそのまま載せているところもありますが自分で理解できるように記事にしています。 歴史の保存 ボードの古い状態に戻って、以前の動きの後にどのように見えるかを見ることができるようにしましょう。 移動が行われるたびに、すでに新しい四角形配列が作成されています。 これは、過去のボード状態を同時に簡単に保存できることを意味します。 このようなオブジェクトをstateに格納しようとしましょう history = [   {     squares: [       null, null, null,       null, null, null,       null, null, null,     ]   },   {     squares: [       null, null, null,       null, 'X', null,       null, null, null,     ]   },   // ... ] トップレベルのゲームコンポーネントが移動リストの表示を担当するようにします。 それで、スクエアからボードに前の状態を引き上げたように、BoardからGameに再びプルアップしましょう。トップレベルで必要なすべての情報を得ることができます。 四角形のクリック操作でBoardの値を変更したようにBoardからGameへ値を渡しましょうってところでしょうか。 最初に、コンストラクタを追加してGameの初期状態を設定します。 class Game extends React.Component {   constructor(props) {     super(props);     this.state = {       history: [{         squares: Array

Reactを初めて触ってみました(tutorialその⑥) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回は、オブジェクトのコピーで突然変異による更新（つまりは直接更新）と不変的な更新（元のオブジェクトをコピーして更新する）というマニュアルの説明をしていきました。またその続きになります。 機能コンポーネント 私たちはコンストラクタを削除しました。 実際、Reactは、レンダリングメソッドのみで構成されるSquareのようなコンポーネント型の関数コンポーネントと呼ばれるより単純な構文をサポートしています。 React.Componentを継承するクラスを定義するのではなく、単にpropsをとり、レンダリングすべきものを返す関数を書くだけです。 Squareクラス全体をこの関数で置き換えます。 function Square(props) {   return (     <button className="square" onClick={props.onClick}>       {props.value}     </button>   ); } 関数コンポーネントと呼ばれるより単純な構文をサポートしている。 関数の書き方が省略できるということを説明しているようですね。 単純にpropsで記述できるようです。 onClick={() => this.props.onClick() →onClick=this.props.onClick() ターンを取る（Boardコンポーネントの変更） 私たちのゲームの明らかな欠陥は、Xだけがプレイできることです。それを修正しましょう。最初の移動をデフォルトで 'X'にしましょう。 Boardコンストラクタで開始状態を変更します。 class Board extends React.Component {   constructor(props) {     super(props);     this.state = {       squares: Array(9).fill(null),    

Reactを初めて触ってみました(tutorialその⑤) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回は、カプセル化されたSquareの状態を保存するところをやりました。またその続きと先に進めたいと思います。 翻訳どおりに記述すると 不変性が重要な理由 前のコード例では、.slice()演算子を使用して変更を加える前に四角形の配列をコピーし、既存の配列の変更を防ぐことをお勧めします。 これが何を意味し、それがなぜ学ぶのが重要な概念なのかについて話しましょう。 一般に、データを変更するには2つの方法があります。 最初の方法は、変数の値を直接変更してデータを変更する方法です。 第2の方法は、所望の変更も含むオブジェクトの新しいコピーでデータを置き換えることである。 突然変異によるデータ変化 var player = {score: 1, name: 'Jeff'}; player.score = 2; // Now player is {score: 2, name: 'Jeff'} 突然変異のないデータ変化 var player = {score: 1, name: 'Jeff'}; var newPlayer = Object.assign({}, player, {score: 2}); // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} // Or if you are using object spread syntax proposal, you can write: // var newPlayer = {...player, score: 2};var player = {score: 1, name: 'Jeff'}; 何を説明しているのかというと、このゲームでは履歴を保持していてクリック操作でその時の状態に切り替えする機能があるので、突然変異のデータ変化では状態を上書きするためにそれができずコ

Reactを初めて触ってみました(tutorialその④) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 さて前回は、属性に値を付与してクリックアクションで再描画するところをやっていましたが前回からの続きになります。 ちょっと途中で開発者ツールのことが書いてあったので訳を載せておきます。 開発者ツール React DevtoolsのChromeとFirefoxの拡張機能を使用すると、ブラウザのdevtoolsのReactコンポーネントツリーを調べることができます。 これにより、ツリー内の任意のコンポーネントの小道具(prop)や状態を調べることができます。 インストールしたら、ページ上の任意の要素を右クリックし、「Inspect」をクリックして開発者ツールを開くと、Reactタブが最後のタブとして表示されます。 私の場合は開発者ツールのconsoleにreactのプラグインツールURLが出ていたのでクリックしてインストールしました。（chromeです） インストールすると開発者ツールのタブメニュー右側にreactメニューが追加されていました。 ではtutorialの続きに入ります。 リストのステータスに付いて進めていきます チック・タック・トゥ・ゲーム（このtutorial）のための基本的なビルディング・ブロックがあります。しかし今は、状態は各Squareコンポーネントにカプセル化されています。 完全に機能するゲームを作成するには、1人のプレイヤーがゲームに勝ったかどうかを確認し、XとOを交互に配置する必要があります。 誰かが勝ったかどうかを調べるには、正方形の要素に分割するのではなく、1つの場所に9つの正方形のすべての値を設定する必要があります。 みたいなことが書いてあり続いてWEB翻訳ではちょっと理解できない内容だったのですっ飛ばします。 とりあえず見る限りは順番と誰がクリックしたかボードの状態を保持してクリックでどのマークかをSquareコンポーネントで枠の中を書き換える手順を進めるみたいです。 ここで、正方形がクリックされたときの動作を変更する必要があります。 ボードコンポーネントに