ゼロから始めるエンジニアへの道 #9 ~html~
学習範囲
・外部リンクの挿入（別タブ遷移）
・tagの親子関係について
説明
1.<a>tagを使い、外部リンクの挿入を行う
2.href属性を活用し、リンクを貼る。
・.目的はiconにリンクを作成すること
・リンクはアンカーという意味で、<a>tagを使用する
・リンクから遷移する際に「別タブを開いて～」という命令は、target=""
2つ目のリンクに関して
・なんとなく別ページへの遷移程度だったら,iconの使い方をmailとかにするかなぁ。。。
・と思ったので下記のメソッドを使って「エンドポイントのシステムOS側で、既存のメールシステムから送信する」リンクを作成
比較するとこんな感じ
~ <li> <a href="https://takeyoshiblog.hateblo.jp/" target="_blanck"> <img src="https://lh3.google.com/u/0/d/1uaEVewlfzbhbmqs8y6qCbUWsoZQ08gTC=w702-h606-iv1" width="20 " height="20" alt="tork icon" </a> </li> <li> <a href="mailto:tk-nomailaddress@gmail.com""tk-nomailaddress@gmail.com"> <img src="https://lh3.google.com/u/0/d/1hVaFKzM-Rw0PBzOCRiRiCapWAk7WkKt3=w323-h606-iv1" width="20" height="20" alt="photo.png を表示しています" aria-hidden="true"> </a> <!-- ・アンカータグの中に存在しないメールを<mailto:>で挿入 --> </li> ~
ページで見て(黄)のインラインのところ
タグの親子関係と正規表現の利用
1.HTMLの活用できる正式なtagは定まっていて、MDNというサイトでサジェストすればよい
2.正規的な活用方法が乗っているため、開発現場などでは適切な表現がよい（らしい）
・タグには親子関係が存在し、僕が書いたchordの中で<a>の親として<li></li>tagで実装しています。
ここまでの振り返り
ドットインストールは、こんな感じで各章ごとゴールを設けており、非常に学習しやすい環境でした！
HTML＞CSS×PHP＞Rubyを行っていく際に、HTMLでサイトの骨子（というか内容）を作成してみようというのがテーマになっているので、複雑な内容はなく簡単に学習することができます( ｀ー´)ノ
単純に、HTML自体は覚えやすいです。簡単にブラウザで結果を比較して、「作れているか」、「作れていないのか」、「間違っていればどう表示されるのか？」のみっつが、顕著に表れる題材にしているので、コードを書いたことのない人にはお勧めの導入編でした!(^^)!
次回はCSSに入ってきますので、動的コンテンツを作るまで（デザインはfree素材を使いますが） あと少しです！(´ω｀*)
ロードマップの修正と学習プランニング
転職関連
◆1社目：リファラル（個人紹介）
・以前の会社にいた際に折衝した紹介エージェントの方に個人的に紹介をいただいた
・自身の要望として「コアテックな環境」「自身がバリューを発揮できる」の2軸を年頭に就職活動はしていたので、ぜひ就業したい。
◆2社目：媒体スカウト
・雇用形態は同一だが、ポゼッションが、１よりも下がり年収もかなりさがる。
・すでに内定を貰っており合意連絡待ちだが、１の結果待ち（堕ちたら、いったんはここに入社を検討）
これから作成したもの（中長期的なゴール）
・LPぽいデザインで、ブログを作成する。
・頭のイメージとしては「ゲーミフィケーション」×「Live2D等で、characterデザインを入れる」。。。
・ふわっとしたイメージですが、自身の作りたいもので一番最初に思いついたのは↑でした(;´･ω･)...(ifremeの応用でどうにかならんかなぁ。)
・とりあえず、参考にするLPを見つけたので、とりあえず作ってみる
ロードマップ
一番最初に作成した、学習ロードマップ↓（Freeなので画像切り取り）
はじめに
このロードマップ系の記事は、ポートフォリオの保管を含む更新を適宜していきます!(^^)! なので、 まとめは実査にTKが転職をした後になります。
[想定読者]
・全くの未経験だが、ITやIoT系の開発環境に密接な方。
初心者意見であるという事を考慮した上で、参考になればうれしいです。 また、賛否両論ある部分もあると思いますので、もし別のご意見などありましたら、遠慮なくコメント頂ければ本当、有難いれす(┐「ε:)
背景
エンジニアになろうとしたきっかけとしては、 転職出ITと言われる業界でSaasに関ったり、複数IT業界を渡った事に加え「IBMのWatson」の導入記事を読んだ事でした。
まず、IT企業といっても、ECをメインに稼ぎながらBPO系で企業を支えている様な所もあれば、ガッツリWEBをメインにした企業があります
私が在席していた期間は累計でカウントすると、WEB業界がメインでITではない民間企業とは違い、組織や上下のレイヤーで隔たりがなく、 色々な経験を積ませて頂き、主に内省のソリューション施策に取り組んできました。
内省をしていると、業務課題のもつ本質的な解決策を思案すると自動化や簡略化などが必ず要素に入ってきます。 自分が当時努めていた殆どの会社でシステム開発の工数と比較して、SEさんが工数を割けない事が要因で独学でGASを書いたり、 クエリ書いてデータ収集をしたりと、パワープレイで課題を解決してきました。
データスキームが無い(不適切な)のに、ストラテジーを立てたい方々の為に、 簡単な要件整理とCRMで使えるApiや、GsuitのApiを使い自動でspsにエクスポート ⇒ Detapotalでビジュアル化など、 CSとしては異色な立ち回りで業務に従事しました。
とある企業で、マネージャーから
・最上位決済者から見たCSの与信が無い
・だから相当緻密じゃないとお金の掛かる稟議だすの難い。
なんて打診入社2日目でされ、 まずはGapiさんを含めた、簡単なロジックの理解と【無課金】で状況改善を行う場合には〜の要件整理。 各種機能を独学して、データの分析などを行っていました。
自分のやりたい様にやっていただけなのですが、 それらの活動で得られた成果物が活躍した瞬間は、 お漏らししそうなくらいの達成感を感じます。
その達成感を得るため、そして端的に自分の【出来る事】を増やしたいがため、 バックエンドエンジニアとしてキャリアをスタートさせる事を目標に学習を始めました。
実際にWEB業界での経験が累計で長い事もあり、WEBのバックエンドでキャリア形成を図るために、 開発学習プランを練りました。
なお、エンジニア自体に興味を持ったのがAIだったので、当初は❴機械学習❵の分野に興味を持っていましたが...
しかし！！
機械学習を本格活用するには、プログラミングの知識に合わせて、 高度な数学や統計学の知識も必要という事が分かりました。
あっ..よく勘違いされている方がいらっしゃいますが、プログラマー＝エンジニアでは無いのです
例えば、私が前職にいた際にCRMやSFなど、WEBのソリューションから、一通りのインサイト分析と、〇endeskを使った力技のApi→(SQL)Detapotal使ったデータスキーム作成など、 データ周りにざっくりした力量を持ち、それらの実装まで行いましたが、システムエンジニア業務と定義する会社さんもあります。
しかし、そんなSE（もどき）の経験程度では高度数学の足元にも及びません。
なぜなら、理解していないメソッドを持ってきたり組み合わせているて使っている分、 結果を理解していても、ファクター毎に自発的な思考の元組み立てができないからです。 基礎も知らないのに既に応用から入っている状態な分けです。
高度数学を習得して、大学で１からデータサイエンスを専攻してきた人達と同じステージに立つのは非現実的です。
なので、 未経験エンジニアでの採用間口広さを考え、WEBを入口にと考えました。
(なおWEBのソリューションをいくつか経験した事で多少の業界知識があるので、 活かした上で行動できそうというのもありました。)
WEBエンジニアにも、細かく分類すれば
・フロント
・バックエンド
・インフラ
などの分野がありますが、もともとデータの集計/分析などのロジックを考えるのが好きだったので、 まずはバックエンドを主軸として、幅広い技術を習得して行こうと考えました。
取り組み姿勢
・私は人に教えたがりの成果です。(上手いとは言ってない) ・その癖、自分より知識をがない人間を蔑視しています。
だからこそ人より優れていないと、それだけでヘイトが溜まる困ったちゃんです。 （だったら人一倍努力しないとですね）
そんな私だからこそ学習を行うときは、「誰かに教える」をモチベーション向上を念頭に置いています。 嫌々やるより自分の本質を活かし学習をすると捗りそうと感じたからです。
ゼロから始めるエンジニアへの道 #8
検証したこと
- Chromeconsoleを使い、企業のLPがどのような作りになっているかの検証と確認
2.LPで言語ごとにどんな役割を指定して動作しているのか ※前提として、htmlだけで非常に量が多いので抜粋して記載
検証
~ <head> <title>[企業名]~サブタイトル~</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="_css/import.css"> <script async="" src="//dmp.im-apps.net/js/1001214/0001/itm.js"> </script><script async="" src="https://b92.yahoo.co.jp/search/?p=L2X3FLYE84&label=&ref=https%3A%2F ~
- これから書くhtmlのcarsetで、文字コードの指定
- meta属性(name or content)について↓↓
リンクタグ中のrelとhref属性について↓↓
rel属性
href属性
HPやLPをみての疑念の払拭
- Souce以外に、別の言語(js / css )などのscriptを導入することができる
ちょっとした愚痴
- ←箇条書きを記載する際に
*を前頭に文書を作成します。- 場合によってが
<br>を記載して、markdownの行間を開ける属性をいれるのですが、上手にいかないことが多い。
- 場合によってが
学習範囲（追記予定）
1.<ul>tag の使い道と意味
2.listitagの略で<li>tagをul内に収める
3.文書の意味と定義に合わせたtagの重要性
ローカル画像が表示できなかったので、Gsuiteのdriveにディレクトリパスを紐づけて表示した
- データディレクトリを作成でき、ドメインに依存して手軽な共有ができる。
- データファイルの表示等を共有するだけなら、「共有リンクを作成」でOK
- コードを使い、ブラウザ表示する場合に、要素から物故抜きしないと表示されない↓↓
- クロームのconsoleで、html要素から物故抜きしてくると、表示できる様子
- 他にも方法があるらしいのですが、 やり方がわからないので割愛。
ゼロから始めるエンジニアへの道 #7 ~html編⑦~
やったこと
1. section tagについて (↓tips)
developer.mozilla.org
2. mark up する際にめちゃ気を付ける事 (section tag について)
Section tagについて
1．section,tagについてのtips記事の注意事項にて、【該当の要素がない場合～】とは？
- 広義的にどう使われているかを調査してみた(;´･ω･)
- ※コンプラ的に良し悪しの判断がつかなったので、社名は伏せます。
- 結構がっつり使っている
- lp < body < header (あとは、各種tagと属性) < このlpの場合...
~ <header> <!-- ・<(各種tag<div>とか)で,html外のから、<id>で代入したり... あんまし企業ごとのLP見ても判断がつかない ・「判断がつかない」＝ section tag の使いどころ～位のイメージでしかないのです(;´･ω･) -> <header> ~
みたいな感じ。
ちなみに、ドットインストールでは【<section></section> としてあげて、作品紹介】と定義。
要するに[ 作品 ] とか、少し抽象的なみたいに、概念を年頭に作成すればよいのですね!(^^)!
codingの注意事項
tabキーの連打
- 書いていると途中で気づいたのですが、 コードの行間がそれはまぁ、もう連れるｗ
- 後付けでtagを追加したりしてるので、しょうがないのですが、さすがに
と が関連行の定義可に入った瞬間、「あっやっべ(;´･ω･)」って思ったので意識に置きながら書く。
- 後付けでtagを追加したりしてるので、しょうがないのですが、さすがに
ゼロから始めるエンジニアへの道 #6 ~html編⑥~
やったこと
1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど
簡単な復習
~ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- meta文字コードの設定は、最近はutf-8に統一されているケースが多いので、utf-8を指定すする --> <title>TKのportfolioサイト</title> <!-- タイトルtag（<tile>）の中身は、ブラウザタブに表記される --> <link rel="icon" href="favicon.ico"> <!-- 「favicon」とは、タブの小さなicon画像の事を指している。 同じ階層に存在するので、データファイル名の指定だけしています 階層が変わった場合の指方法がわからない:(サジェストする) .ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト --> <meta name="discription" content="TKのportfolioサイトです"> <!-- これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載 されるようです。 恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。 --> <body> <header> <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> </header> <!-- head と、hederの違いについて headタグは、この文書全体に対して情報を入れるもの headerタグは、bodyの中に使うヘッダー要素を入れるためのタグ では、(h)のtagは？ hedingtag(ヘディングタグ）と読み、見出しをるける際に使うタグ --> <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です"> <!--ここで指定していIMGtagと、src=img/work2は意味合いが違います。 srcはソースの略称 要するに「img」の元ソースはどこ？ってこと ソースを指定する際に用いている、/ は、一つ下の階層を指定。 記載していなかった備忘(alt属性は「代替えテキストとして活用」) --> <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> このゲームは上記に記載したコンシューマゲームに該当します。 RPG（ロールプレイングゲーム）となっており、<br>基本的にはストーリーラインが緻密に構成され、バトルアクションも楽しめるといった作りになっています。 <br>作品自体の魅力としては、【王道のようで、王道ではない】という点です。 </P> <!-- VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。 ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V で、ひとつづつコピペｗ --> <p> (C)dotinstall.com </p> </body> </head> </html> ~
音で覚えると間違やすいタグ三つ
※コードの中にも備忘しているけど、画像添付したかったからこっちで
( h )= heading tag
hedingtag(ヘディングタグ）と読み、見出しをるける際に使うタグ
(head)tag
(
)タグは、文章全体に情報を入れるために使うタグ(header)tag
(header)タグは,bodyの中に使うヘッダー要素を入れるためのタグ
vscordの操作について(alt+↕)
VS操作を行う際の（alt+↕)について、タグの宣言に必要な→<><>は、並列ではなくrow
つまり行で、切り分けられていないと入れれれない(;´･ω･)
~
<footer>
<p>
(C)dotinstall.com
</p>
</footer>
</body>
</head>
</html>
~
ゼロから始めるエンジニアへの道 #5 ~html編⑤~
やったこと
1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど
07 文書に関する情報を設定しよう ＆08文書の本文を書き込んでいこう
- 今回は、chordの中で、コメントtagを用いた疑問の書き込み。
- サジェストした内容、定義確認は別途文章として記載する。
~ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- meta文字コードの設定は、最近はutf-8に統一されているケースが多いので、utf-8を指定すする --> <title>TKのportfolioサイト</title> <!-- タイトルtag（<tile>）の中身は、ブラウザタブに表記される --> <link rel="icon" href="favicon.ico"> <!-- 「favicon」とは、タブの小さなicon画像の事を指している。 同じ階層に存在するので、データファイル名の指定だけしています 階層が変わった場合の指方法がわからない:(サジェストする) .ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト --> <meta name="discription" content="TKのportfolioサイトです"> <!-- これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載 されるようです。 恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。 --> <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です"> <!--ここで指定していIMGtagと、src=img/work2は意味合いが違います。 srcはソースの略称 要するに「img」の元ソースはどこ？ってこと ソースを指定する際に用いている、/ は、一つ下の階層を指定。 記載していなかった備忘(alt属性は「代替えテキストとして活用」) --> <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> このゲームは上記に記載したコンシューマゲームに該当します。 RPG（ロールプレイングゲーム）となっており、<br>基本的にはストーリーラインが緻密に構成され、バトルアクションも楽しめるといった作りになっています。 <br>作品自体の魅力としては、【王道のようで、王道ではない】という点です。 [f:id:Takeda2864:20200509143024p:plain] </P> <!-- VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。 ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V で、ひとつづつコピペｗ --> </body> </head> </html> ~
Blogについて
- コードblockに記載されている[html]構文について、utf-8で指定しているにもかかわらず、
が表示されない
- 一応、反転すれば表示はできるのですがブロック側では、ブラックテキストになっているのでしょうか？(;´･ω･)
全体像
ゼロから始めるエンジニアへの道 #4 ~html編④~
やったこと
1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど
06 文書全体につけるタグを見ていこう
- 文章宣言（HTMLですよ～という宣言）
- これは、うちタグが必要がない(<>)←こんな文章の括り(大文字)
<!DOCTYPE html">
- languageの設定(記入、プッシュする言語の宣言)
- html="langgage=ja"
VSコードのショートカット
- Tabで「字下げ」行を下げる
- 移動したい行を一括で動かす方法
備忘とコメント
[DOCTYPE]と[stayle type]、属性ごとの違いなど、昔FAQ作成していた時に何となく属性が違うのだなぁ、とか...
tagの位置で区分けしているんだなぁとかは理解してたけど、WEB開発していくにあたって複数のStayleや、
属性指定を同じ構文の中（ちょっと正確な表現がわからないのですが）で開発するのかなぁと思うので、
怪訝なくこなせるように癖付けをすることも大切なんだと理解...
宣言の種類はなれるように書きながら覚えていこう( ｀ー´)ノ
06 文書全体につけるタグを見ていこう
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TKのportfolioサイト</title> <!-- タイトルtag（<tile>）の中身は、ブラウザタブに表記される --> <link rel="icon" href="favicon.ico"> <!-- 「favicon」とは、タブの小さなicon画像の事を指している。 同じ階層に存在するので、データファイル名の指定だけしています 階層が変わった場合の指方法がわからない:(サジェストする) .ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト --> <meta name="discription" content="TKのportfolioサイトです"> <!-- これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載 されるようです。 恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。 --> <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> </body> </head> </html>
コードのコメント備忘について
1.meta tag について
metaタグ とは 意味/解説/説明 （メタタグ） 【meta tag】 | Web担当者Forum
【初心者向け】metaタグとは？ | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ
metaについては、なんとなく理解したけど...構文を見てみると、html記法を指定している
2.
