エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

Chromeでリンクをクリック後のconsole.logを見る方法【265日目】

日記

開発者がよく使う検証について。

Chromeを右クリックすると出てくる『検証』機能。

HTMLの構造や、ネットワークの通信、Javascriptの挙動とか調べるのに便利、
エンジニアには重宝されている機能ですが。

そのconsoleにJavascriptの結果などを出力してデバッグしようとしたときに、
リンクをクリック時に発生するプログラムは、
console.logをしてもデータが見れない！！！

どうしよう？

preserve logを押して、リンク飛んでもconsole残す

f:id:willow710kut:20180705214325p:plain

検証のconsoleを開き、歯車マークをクリック。

すると、preserve logというチェック項目があるのでクリック。

これによって、リンク先に飛んでも直前に見ていたページのconsoleが残ります。

これで、リンク飛ぶ瞬間の一瞬のconsoleを読むとかいう無茶なことしなくて良くなりますね！

【簡単Vtuber】Virtual Castで3D生放送のやりかた【264日目】

日記

こんな感じに生放送できました

f:id:willow710kut:20180704234108p:plain

ちなみに、このあと、色んな人が放送に来ました

『この仮想空間の中にアバターで』

なかなかカオスで面白かったですよ。

なにが必要？

  1. 15万円くらいのハイスペックPC
  2. 5万円くらいの、Oculus RiftとかViveとかのPCにつなぐHMD(ヘッドマウントディスプレイ)
  3. 無料で配布されてるVirtual Cast

・・・1,2がクリアできれば簡単！ほんと！！！
私はボーナス使った（（（

では、少しずつ手順を書きましょう。
ちなみに、0~4は他のVRアプリでも使う手順なので、
すでに終わってる方はすっ飛ばしてください。

0.Oculus RiftやViveの初期設定

そもそも、HMDが使えないといけないので、その初期設定。
ここはものによって違うので省略。

1.Steamのダウンロード

Steamをダウンロードしてきましょう。

2.Steamの登録

そこで、画面に従って登録をしましょう。

3.【重要】PCの再起動

ここで重要なのが、PCの再起動をしましょう。

Steam側に、今使っているHMDを認識させる必要があります。

4.SteamVRのダウンロード

その後、Steamを起動すると、SteamVR(無料)のダウンロードを促してきます。

おとなしくダウンロードしましょう。

5.VirtualCastのダウンロード

ここでようやくVirtualCastの出番です。

公式サイトからダウンロード。そして起動してみましょう。

この時なかなか起動しない人は、HMDをかぶる等で、SteamVRを起動させましょう。

6.放送の開始

f:id:willow710kut:20180704235032p:plain

起動するとこんな画面が出ます。

ニコニコで生放送できる方はニコニコ生放送を。
有料会員じゃない人は、Youtubeでチャンネルを作って、生放送できるようにしてみましょう。

この時、youtubeのURLには、『放送を見るときのページ』を書きましょう。
『放送のデータを送るURL』ではありません。

7.放送ツールを用意しよう

この時点で、画像のようなVR空間にいけます。

この画面をキャプチャして、放送をする感じです。なので、放送用のツールを用意します。
私は以下のOBSStudioという無料ツールを使いました。

obsproject.com

8.放送ツールを使って、画面をキャプチャして放送します。

放送ツールを使って、画面をキャプチャして放送します！

ね、簡単でしょ？

・・・あれ？結構手順あった・・・

実際は簡単

結構細かく説明しましたが、実際やってみると簡単です。

今回説明しなかったところとかも説明今度してみようかな？

では、良いばーちゃるらいふを！

悩み、落ち込んだ状態のときは、2点のいいことがある【263日目】

日記

自分がどうしようもなく落ち込んでいる時

たまにありませんか、自分がどうしようもなく落ち込んでいる時。

落ち込んでいる時は、デメリットだらけだと思いがちですが、
ある2つの点においては、落ち込んでいることっていいことです。

自分の悩みが以下の2点で当てはまると思ったら、きっとそれはポジティブに変えることができると思います。

1.解決することで自分がプラスになる課題がわかっている状態

悩むということは、その問題を阻害と感じているということ。

その問題を解決することで、自身の幸せ、ポジティブに近づけるということ。

きっと、悩んでいるということは、その問題が簡単に解決できないことだと思います。
だから、誰かに相談するなど、自分の使える力すべて使って解決すべきです。

その時、自分の成長や、自分の快適な生活に近づけるでしょう。

2.自分がその問題に対して、逃げたくないと思っている状態

悩むということは、その問題を全力で解決したいと思っているということ。

その問題に対して、自分のモチベーションが高いということ。

モチベーションが低いと悩んでいても、
裏を返すと、そのモチベーションが低いことを解決したい、
モチベーションを高くしたいというモチベーションを持っています。

そんな時は、どこかに阻害する要因があるはずです。
体を休めるなど、自分の心では解決できない問題があるはずです。

それを見つけた時は、きっといきいきとした自分に戻れるでしょう。

乗り越えた先は、明るい未来

悩むということは、結構高い壁にぶち当たっていると思います。

でも、それを解決しなければいけないと思うということは、乗り越えた先に得られるものも大きいと思います。

悩むということは、今それが大切なタームなんだ。
どう解決すればいいかわからないのではなく、その問題が顕在化していることに気づけたことを喜ぶべきなんだ。

ネガティブを乗り越えた時に、ポジティブに近づけると思って、今は耐え忍び、乗り越えましょう。

【デザパタ自作】イミュータブルパターン、自作プログラム編【262日目】

デザインパターン勉強 日記

記事の内容

デザインパターンを毎週一つ勉強。

その時に学んだことを書いています。

やっていること

  1. デザインパターンが解決する問題の概要を聞く
  2. 概要からオリジナルでプログラムを書く
  3. 正しいデザインパターンの内容を聞いて再度実装

今回は、2番のオリジナルでプログラムを書いたところまでです。

プログラムが解決したい課題

$instance_1 = new Class(1);
$instance_2 = $instance_1;

$instance_1->value = 2;

var_dump($instance_1->value); //両方共
var_dump($instance_2->value); //2が出てくる

$instance_2は、$instance_1のコピーですが、これはインスタンスのアドレスのコピーです。

$instance_1を変更すると、$instance_2の値も変わってしまいます。同じものを参照しているから。

今回私が書いたコード

github.com

immutableディレクトリ内。

やっていること

  1. インスタンス化するときに、値を受け取り、インスタンス化する
  2. setで値を変更する際に、インスタンス内部でインスタンス化をする

これだと足りないこと

内部で持っている値がインスタンスの場合。

setで渡す値が、インスタンスのパスだった場合には、最初の問題が解決されていない。

next

問題の指摘をもらったので、問題を解決するコードを今度書いて、再度記事にします。

書きました。

willow710kut.hatenablog.com

グラボにHDMIがが一つしかさせなくても、SteamVRを動かす【261日目】

SteamVRが動かない

VRChatや、VirtualCastをやるときに、SteamVRを起動するのですが、
SteamVRのアプリによっては、同じグラフィックボードにメインディスプレイとHMDをつなぐ必要があります。

でも、グラフィックボードにはHDMIポートが一箇所しかない・・・HMDとディスプレイ、両方ともHDMIだから同時にさせない・・・どうしよう？

1.変換ケーブルを買う

一番オーソドックス。

片方のHDMIのものを、ディスプレイポートのように別なものに切り替えて両方刺せる状態にする

2.一度ディスプレイを外し、HMDからアプリを起動する

HMD単体でOculusストアを動かして、アプリを起動したあとにディスプレイをさしなおす。

そうすると、HMDにグラフィックボードの画質が適用されて動く

はまりぽいんとでした

私の個人的なハマりポイントでした。

正直刺し直しは面倒なので、変換ケーブルを買うのをおすすめします。

【Laravel】dd関数は実際何をしてる？＋名前の意味とは【260日目】

Laravel 日記 技術触ってみた

ddとは

よくLaravelで、プログラムが正しく動いているか試すために、

dd($some_value);

というコードを書いて、$some_valueの値をチェックしたりします。

じゃあ、この関数は何をしているのでしょう？
そもそもこの名前は何の略？

コード

vendor/laravel/framework/src/Illuminate/Support/helpers.php

    /**
     * Dump the passed variables and end the script.
     *
     * @param  mixed
     * @return void
     */
    function dd()
    {
        array_map(function ($x) {
            (new Dumper)->dump($x);
        }, func_get_args());

        die(1);
    }

結論

dump()で変数の中身を出力して、die()でプログラムの動作を止める。

dump と dieだったからddなのね

ということでした。

これなんだろ？って思ったら、ぜひ元コードとかも読んでみてください！

無料で静的なWebページを公開するgithub pages【259日目】

日記 git

ターゲット

htmlファイルとかを公開したい。静的ページでいい。

でも無料でやりたい。

httpsも対応させておきたい。

やれること

  • githubにpushするだけでページ公開できる
  • CSSやJavascriptとかも書ける
  • 静的なページなのでDBとかはないよ

実際のリポジトリの例

github.com

URL

index

やり方

1.リポジトリ用意する

github.com

2.右上のセッティング押す f:id:willow710kut:20180629123357p:plain

3.Github Pagesの項目のSourceのところをmasterにする

f:id:willow710kut:20180629123423p:plain

4.あとはpushしまくるだけ！

サクッとファイル公開はgithub pagesが楽

設定も簡単なので、サクッとページを公開したいときはgithub pagesは楽です。

静的ページをテストしたいときなどもgithub pagesを使うといいです。

もし勉強のために静的ページを作るなら、そのままgithubに残るので便利ですね！

PWAの基礎のハンズオン行きました【258日目】

日記 勉強会の雑メモ

この勉強会にいきました

途中まで作ったページ

GitHub - klack710/study-pwa: pqa勉強会で使ったRepository。

pwa-index

まとめ

  • PWAってなに？webページをアプリっぽく扱えるようにする
  • ユーザーにキャッシュ持たせて、アプリっぽく
  • だからオフラインでもキャッシュ使ってページ見れるよね

  • プッシュ通知とかも出せるけど、safari非対応・・・

  • manifest.jsonを作って、設定

  • サービスワーカーを使って、ユーザーにキャッシュをもたせる
  • github pages使ってたら、ドメイン直下にファイル置けないの気がついて今苦戦中
  • 上のページはまだ使えません

ツイートまとめ