2020-06-29

ゼロから始めるエンジニアへの道 #15 ~html or css~

##学習範囲
1. htmlのdivtag (前回htmlでdivtag説明してなかった気がするので）

2.音声再生プルの作成（正式名称はわからん）

↳自身が使っている[wallper]の、ディレクトリに格納されている [index.html] or [css]を実行した結果。

<br> ↳

###DivTagについて

・レイアウトを変更する際に使うtag

　・後述に記載したタグの識別子が同じ場合は、やはり優先的になる。

　　・イメージとしてはパーツを保管するための箱

###[Wallpe]内のindexファイルとcss、そしてjsの挙動について

・Wallperに関してはSteamのとあるプロダクトを利用して、ディレクトリを見ています。

<br> ・上記の製品はここで書くものとは、関連性がないので紹介は省きます。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="js/jquery-3.4.1.min.js"></script>
    <title></title>
  </head>
    <body>  
      <!--VideoBoxに活用している<div>に関しては比較的広域で選択が加納氏-->
      <div id="videoBox">
        <video loop autoplay>
            <source src="./video/bg.1080p.vp8.vorbis.webm" type="video/webm"/>
            your browser does not support the video tag
        </video>
      </div>
      
      <div id="audioBox">
        <audio id="Music" controls >
          <source src="./bgm/bgm0.ogg" type="audio/ogg"/>
        </audio>
        <div class="infoBox">
            <p class="">
                HP作成：T-K
                <br />壁紙提供：NINA
              </p>Album is original
        </div>
      </div>
    </body> 
      <script>
    $(document).ready(function() {
      $("#audioBox").fadeTo("fast", 0.0);
      $("#audioBox").hover(
        function() {
          $("#audioBox").fadeTo("250", 1);
        },
        function() {
          $("#audioBox").fadeTo("250", 0);
        }
      );
    });

    var maxIndex = 4;
    var num = 0;
    var musicPlayer = document.getElementById("Music");
    musicPlayer.onended = function(){
      if(++num >= maxIndex)
      {
        num = 0;
      }
      musicPlayer.src = "./bgm/bgm"+ num + ".ogg";
      musicPlayer.play();
    }
  </script>
</html>

（今更だけど、「見たままモード」超らくなんですけどw

ただ、癖で<br>とか見出し系のMarkdwanを使ってしまうｗ）

上記のコードでは

・ロードカルディレクトリのcssと、javascriptを使って、wallpaper(デスクップ)を動かす

・指定のディレクトリでmp4再生

・音楽プルメニューの配置

が主なファクタになっています。

前回勉強範囲で出きたdivtagが使われて、

oudio、moveなど分かりやすい識別子を使っています。

##sroleamについて

sorolearmは移動時間中、僕の場合pc操作ができない通勤時間などに重宝するAppです。

・携帯でこコード書ける

　・WEB実装の確認ができる

・簡単なメソッドがある

f:id:Takeda2864:20200629093721j:image

2020-06-22

ゼロから始めるエンジニアへの道 #14 ~html or css~

##学習範囲
1. htmlのdivtag

2.ローカル環境構築

####補足

今のところ機械学習、概念学習に関してはフロントの勉強と同じ学習時間を担保できそうにないので、お昼を使ってudemyさんで購入した動画を、暗記用に繰り返し聞くようにしています(´・ω・`)

機械学習は、帰宅後の1時間捻出し(blog更新は20分)、まずは300時間の担保を目標としてます。

以降は目標の時間からの差し引きを記載して、予測のもと学習コンテンツを変えます。

例えば[AWSは120h後など]

Weeklyで学習累計を元に学習の所要時間の計算をしていましたが、1日一時間の捻出で5日なので5hと土日の5hだと4週計算をしても、15hとなります。

15*12でようやく300hを担保できる計算ですね(TдT)

##ロードマップ修正中にすこし弄ったdivtag

Div Tag

htmlでは、レイアウトのための div タグというものが用意されているので、それを使って行く

"""html

<head>
<meta charset="utf-8">

<title>TKのportfolioサイト</title>

<link rel="icon" href="favicon.ico">

<meta name="discription" content="TKのportfolioサイトです">

<body>
<img src="https://cdn.image.st-hatena.com/image/square/da161997713f23479ca06fcaff8c7893ce57a75d/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155897278%2F1583412966696427
" width="120" height="120" alt="太郎にアイコンです">
<h1>TK</h1>
<p>システムエンジニアを目指しています</p>

<h2>Works</h2>
<img src="https://lh3.google.com/u/0/d/1Z2wuIjH4R-QPmY70nxIuhYByLDITg3S7=w514-h596-iv1" class="a-b-ta-Ua" width="600" height="400" alt="TKのWorkSpeaseです">

<h3>私の大好きな「ゲーム」につて紹介です</h3>
<p>
基本的には、コンシューマー向けのゲームになるのですが...
複数のシリーズが展開されていて、作品によってはアプリ<br>
またPSのポータブルも販売していますので、
是非、ゲームをプレイしてください(´ω｀*)
</p>

<h3>閃の軌跡</h3>
<<img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;" src="https://pbs.twimg.com/media/DmJX1E-UwAAb-Nw?format=jpg&name=large" width="600" height="400" alt="英雄伝説の画像">
<P>
-->

</body>
</head>

"""

最近は、androidでblog更新するのですが、htmlの構文が入っていればば、勝手にmarkdownから切り替えられてしまう。。これはバグなのかな?

明日はロードマップのセル表でガントチャートをつくるのと、css続き(´・ω・`)

2020-06-16

ゼロから始めるエンジニアへの道 #13 ~Pysonと機械学習の入り口~

学習範囲

AIの定義と用途
2. 人工知能とアルゴリズム

AIの定義と用途

・AIとは
　・人間の知能、または知能の一部を模倣したシステムのこと
　・用途としては、画像認識処理や音声認識処理（入力やエンジン）やIotの制御（車とか）など。

人工知能とアルゴリズム

・ニューラルネットワーク
　・人の神経細胞ネットワークを模倣したもの
　　・機械学習のベース

・遺伝的プログラム
→よくわからん

・群知能
　・生物の群れを模倣、個体の集合が高度なふるまいをする。
・勝手なイメージはRPGゲーム特に箱庭のNPC行動アルゴリズムなんヵ

AIの歴史

・2000年半ば～
　・ディープラーニングが注目される
　・2016年
　・囲碁、将棋のランカーをAIが撃破

所感

・以前、Bitコインのマイニングがバズった際に、調べたのですが。。
「GPUは限定的な演算タスクを実行するために最適化されていおり、
もともとゲームアプリケーション向けに開発されたGPUは、数千の画像画素を生成するために単純な演算を並行して行うことに優れている」と書かれていました。

https://www.coindeskjapan.com/57607/

it-word.jp

名称はわかりませんが、
・CRM顧客情報の【取得】をして、自動で担当者別にrowを整理してカラムのソートと、重複の削除

・GoogledetapotalへPostしつつ、論理関数でストラテジーを表示～みたいなロジックを作ったときに、デバイスベンチマークをしたのですがcpuの性能差が顕著にでてました。

2020-06-12

整理と色々 #2

この記事のトピック

・ノートPCの換装
・cpu or gpu
・ewseで、クローン化
・ロードマップとポートフォリオの更新

ノートPC換装について

・2年程前からコスパと増設可能なスペックを鑑みて、DynaBookのR634Kを利用。
・サーバ関連の通信を含めて、演算処理のスペックが足りない(ベンチマークはChromeのapi..色々)
・cpu第四だったので、他の規格msataや、DDRも古く、増設が望めない。。
・ので、今のところ汎用性があるcpu第8世代〜を購入検討

ここまでが主な背景なのですが、

ぶっちゃけ、macの第5世代とかでも、基本的なクロック条件を変えるだけでも大分違うんですけどね(-.-;)

Gpuについて

・最近のノートpc、基本的にオンボードで、cpuさんに簡単なgpuががついています。
　・勿論、ゲーム用ではないため性能は低いです。(普通に使う分に支障はありませんが、マイニング処理を行ったとき、とてもなく重いです。当たり前ですがw)

んで、結局は世代的に大差のない、第8世代を選択しました。端的に言うと、cpuの世代は非常に更新が早く、次々と新しいものが出ます。なので、i9対応の第9~世代は購入しても、来年にはi10が出ているはずなので、検討から除外しました。

(金額が貼りますしねｗ)

余談ですが、オンボードのcpuは、同一世代で、ソケットが一緒なら、換装できなくはないですが、素人でいきなりやりのは絶対におすすめできません。

結論、pc工房さんのアウトレットで、8世代i5を購入しました、i7に換装予定ですが。。

単体で購入したいのですが....売ってないね(-.-;)

クローン化

結論からいうとできませんでした(´；ω；｀) 簡単のいうと、既存のbiosが、ssdハード(UEIFのメインハード)GPT方式にしか対応していないのです。

なっなんだってーーーー!!!!?

いやぁ、ほんとそんなん初めて知ったｗ

そもそもbiosでｍ．2が認識されなかった時はおしっこ漏らしそうでした＿|￣|○

んで、しょうがないので、

別のpcでSsdのパーテーションを統合して、

換装新規のOSぶちこみましたよ。。

(biosの種類によっては、両立できるらしいですが)

購入する前に気を付けること

・オーバークロック可否(バッテリーベンチマークの把握)

・メモリ、cpのオンボード可否

　・パーツ定価と差額

・SSDの規格

・BIOSの種類(GPTのみが対応規格だと、俺みたいになるｗ)

※etc...(裏蓋のみかキーボードのみかなど)

ロードマップの修正について

1.コアテック系に就業が決まったが、キャリアのTAという位置づけで、主要とは別の受託事業にジョインしているので、絡めない。 2.リファラル採用なので、ポテンシャルよりも技能をもとめられている。

事業自体が検証の意味合いも含まれているので、下手な提案できなさそう。

ただ、メインが機械学習をメインにしたプロダクトなので、Taとして深層学習を含む知見を独学で深め、

同時進行でコンセンサスを取っ手いく必要が合る。。。(´・ω・｀)

なので一旦マークアップ言語の学習をやめ、

言語はPythonを(と言ってもhtmlやcss、javaは絶対必要になるので一旦rubyではなくPython)メインにして、

完全にサーバーサイドの知識を埋めていく所スタートラインになる(´﹃｀)

2020-05-20

ゼロから始めるエンジニアへの道 #12 ~html or css~

学習範囲

・16進数でのCrol指定
・Fontの変更
・BOXモデルの理解

Corol とFont

・文書全体のfontを変更してあげるので、Bodyを指定
・colorの後述で、fontfamryの指定。
・*見たけど、Fontの種類はメッサ豊富なので、いづれにしてもおすすめのLPとか見て、再現したいfontがどんなものかを参考に、consoleで確認して指定した方が良さそう。

ics.media

↑は、Fontのおすすめ（らしい）です。

~
body{color: #333;
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Verdana ,sans-serif; 
}
~

・前回も書いた通りプロパティに対して、昇順で表現優先がされる（らしい）ので、「Helevetica Neueで、Verdana を使ってね、でもなかったらを,sans-serif使ってね」という指定にしています。

f:id:Takeda2864:20200519183747p:plain — Helvetica Neue

BOXModelについて

・chromeconsoleで、computedタブを選択した後に、タグとプロパティの一覧表示の上に出てくる四角いあいつ
・今回の勉強範囲ではhederのbackgroundcollarの色相を変更

~
header {background-color:
     #efefef;}  
~

・上記をconsoleで見ると、Hederの範囲に適用されているのがわかる

f:id:Takeda2864:20200520181829p:plain — consoleのボックスで、見てみた（わかりやすくredに）

・上記のままだと、若干の余白でできているのがわかります。

f:id:Takeda2864:20200520182912p:plain — 余白箇所

・余白が、Bodyに紐づいているのがわかりますので、Bodyにmarginというプロパティを入れ、ピクセルの値を変更します。

~
header {background-color:
     grey;}

body{
    margin: 0;
}

~

f:id:Takeda2864:20200520183319p:plain — 余白が削れました。

上記は「heder内の余白すべてを0pxにしたい」ので、0;と指定しましたが、 top,bottom,right or left、それぞれのピクセルを指定できます。 (madin:0 bottom12px;)← みたいな感じ。

ボックスモデルの性質と出来る事。

・CSSのデザイン確認に寄与する。・DDを書いてみるのもあり。

2020-05-19

ゼロから始めるエンジニアへの道 #11 ~html or css~

学習範囲

・16進数/RGBでのCrol指定
・

CSSのキーワード（主要職の定義）とRGB

・0 ~ 255の数値でカラーリング表現をします。
・16進数での表現も可能で、下記の画像のように#255で黄など、

f:id:Takeda2864:20200519174826p:plain — 10進数 / 16進数の表現

~
<h1>{h1{color: blue;}
 <h1>{color: red; }
  <h1>{color: rgb;0.,255,0}
~

上記のようにh1のセレクターに対して、後文が優先されます。（要するに昇順で読み取りされます）

f:id:Takeda2864:20200519181536p:plain — RGB(R=red G=Green B=blue)

RGB(R=red G=Green B=blue)で表現する場合も同様に、0~255の規定値内に配色を選択します。
上記のコードであれば、(Red=0 Green=255 Blue=0)なのでh1は、緑表示になります。

f:id:Takeda2864:20200519175224p:plain corolを16進数で指定した場合の表現。

セレクターとプロパティの優先度

CSS では、同じセレクターに対して同じプロパティを複数設定した場合、あとから書いたほうが優先されるということも覚えておきましょう。

気になった点（`div`と`span`の厳密な違い）

saruwakakun.com

・LP等の中身で見た時テキストのインライン色がついているコードを確認
・どうやらタグは<div>で表現している。
・上記のようなケースがあったので、<span>で表現している理由がわからなかった。

2020-05-18

ゼロから始めるエンジニアへの道 #10 ~html or css~

学習範囲

・別のscript導入（cssのscriptを、<ink>で読み込む)
・Chromeconsole

セレクターとプロパティの設定

・前提
・VSコードはプロパティをカラー属性を導入する場合、わかりやすく表記してくれます

f:id:Takeda2864:20200518172221p:plain — Bodyの<h1>←のテキストcollarを赤文字に変更するよという意味です。

1.このように CSS ではどこにどんなスタイルをあてるかを設定していきます。
2..この「どこに」（画像<h1>）の部分をセレクター、「どのようなスタイルを」<style>+{color red (属性)}>の部分をプロパティと呼ぶので、用語として暗記

HPやLPの作りついて

・テキストを含め、コンテンツ自体は別のscriptを格納して作成しているらしい

・上記に書いたように、html/css/phpなどは、style等の各tagと属性で、同じscriptの中に顕在させることができる

~
<html>
    <head>
     <body>
     <meta charset='utf-8'>
      <title>HTML内でのPHP処理</title>
    </head>
       <h1>
           <?php echo 'PHPのechoを使っています'; ?>
       </h1>
         <?php$text = "HTML内でのPHPスクリプト実行処理";echo "
          <p> $text  
         </p>";?>
 </body>
</html> 
~

上記でいえば、Echo文は出力を意味するPHPです。
こんな感じで、PHPの場合は代入と出力が出来るので、HTML内においてもそん色はありませんが、データが多量化してしまったり、データの保守性が担保できなかったりといろいろな理由で、 [PHP] / [CSS] / [php]は切り分けたscriptを使っている人が多いようです。

前回(`#`8で)公開したLPでは。。。

f:id:Takeda2864:20200518175114p:plain — javascript

上記のように、わかりやすく[javascript]のscriptをlinktagで活用していました。

chromeのconsoleについて

・前提として、データサイエンス(w)lをやっている際に、CTIツールのリテラル値を照会するにあたって、（WEBCRM＞Zendeskだったので）Googleconsoleを利用。
・chromeconsolの、Elements→Computedの順で、タグとSTYLE等の親子関係を[Computed]で確認ができる。
・またどのディレクトリに保管しているかの確認もでき、filter内で内部のコンテンツすべての確認ができます（どのデータなのか～・・・など）

Googleconsoleの愚痴

その際にリテラルの値とCSVで吐き出してた監査log、パイプライン経由で吐き出した数値、API トークン経由でエ
クスポートしたデータなどなど、その中でもUX系のデータはUIについている名前などのアクティビティなど
も計測したりするので、データ照会を行うにあたり必需でした(´ω｀*)
（まぁ、「インサイトはいらねんだよ！」だの、「事実数だと閻魔帳にならない？」等いわれますが....」

CSSのキーワード（主要職の定義）とRGB

・0 ~ 255の数値でカラーリング表現をします。
・16進数での表現も可能で、下記の画像のように#255で黄など、

セレクターとプロパティの優先度

ちなみに CSS では、同じセレクターに対して同じプロパティを複数設定した場合、あとから書いたほうが優先されるということも覚えておきましょう。

初心者がエンジニアに転職するための、壁打ちブログ('ω')

・CS、SV、TA、データサイエンス、などをIT業界で学んできた私が、サーバーサイドエンジニアとして独立するまでのブログです

ゼロから始めるエンジニアへの道 #15 ~html or css~

ゼロから始めるエンジニアへの道 #14 ~html or css~

ゼロから始めるエンジニアへの道 #13 ~Pysonと機械学習の入り口~

学習範囲

AIの定義と用途

人工知能とアルゴリズム

AIの歴史

所感

整理と色々 #2

この記事のトピック

ノートPC換装について

Gpuについて

クローン化

購入する前に気を付けること

ロードマップの修正について

ゼロから始めるエンジニアへの道 #12 ~html or css~

学習範囲

Corol とFont

BOXModelについて

ボックスモデルの性質と出来る事。

ゼロから始めるエンジニアへの道 #11 ~html or css~

学習範囲

CSSのキーワード（主要職の定義）とRGB

セレクターとプロパティの優先度

気になった点（`div`と`span`の厳密な違い）

ゼロから始めるエンジニアへの道 #10 ~html or css~

学習範囲

セレクターとプロパティの設定

HPやLPの作りついて

前回(`#`8で)公開したLPでは。。。

chromeのconsoleについて

Googleconsoleの愚痴

CSSのキーワード（主要職の定義）とRGB

セレクターとプロパティの優先度

学習範囲

AIの定義と用途

人工知能とアルゴリズム

AIの歴史

所感

この記事のトピック

ノートPC換装について

Gpuについて

クローン化

購入する前に気を付けること

ロードマップの修正について

学習範囲

Corol とFont

BOXModelについて

ボックスモデルの性質と出来る事。

学習範囲

CSSのキーワード（主要職の定義）とRGB

セレクターとプロパティの優先度

気になった点 （divとspanの厳密な違い）

学習範囲

セレクターとプロパティの設定

HPやLPの作りついて

前回(#8で)公開したLPでは。。。

chromeのconsoleについて

Googleconsoleの愚痴

CSSのキーワード（主要職の定義）とRGB

セレクターとプロパティの優先度

気になった点（`div`と`span`の厳密な違い）

前回(`#`8で)公開したLPでは。。。