初めまして！

趣味はキックボクシングと映画鑑賞で、特技は文章を見やすく整えることです。

美術大学の出身で、大学ではデザインの勉強をして参りましたので、引き続き分かりやすく伝える方法を模索しつつ、HTML・CSSの勉強をしていきたいと思います。

今回は研修の内容を振り返っていければと思います。まずは概要から。

1 入社ガイダンス
ー第1部　経営理念、オフィスでのマナーなど
ー第2部　エンジニアとしての心構え、講習会について
ー第3部　雇用形態、事前打ち合わせについて
ー第4部　情報セキュリティ講習、社内プロダクト紹介
2 ハラスメントの研修、就業規則について
ーハラスメントについて
ー就業規則について
3 VDT研修
ー正しい姿勢で作業しよう
4 基礎研修①ーIT基礎知識
ーPCスペック
ーOSについて
5 基礎研修②ーネットワーク基礎知識
ーネットワーク用語基礎
ーLANの基礎
6 エンジニアとサイトデザイン
ーエンジニアについて
ーHTMLとサイトデザイン
ーHTML実技
7 コンテンツ東京2019、クリエイター・広告デザイン・ブランディングEXPOの見学
ーデジタルステージ
＝おわりに＝

1　　　入社ガイダンス

第1部　経営理念、オフィスでのマナーなど

経営理念、ビジョン、基本方針、行動指針、社内での服装、就業時間、HD(ホールディングス)について、オフィスでのマナー

第１部は自己紹介から始まりました。
・ロゴの由来はオブジェクティブレンズからきている
・「気付き」が大切
・関連企業や関連グループ、ロボットマート、株式会社トップテン、関連メディアサイト情報について
・オフショアやニアショアなどのビジネス用語や、PC言語について

 

第2部　エンジニアとしての心構え、講習会について

社内の活動、エンジニアとしての心構え、事務の手続き等、講習会について、入社からの流れ

エンジニアの転籍について他、主に月末書類と、各講習会についてお聞きしました。
・月末書類は勤務表、交通費精算書、定期券購入申請書、スキルシート、評価基準シートから成っており、これらはお給料にも関わる大事な書類であること
・勤務表や評価基準シートは自分が今月何をしたのかを把握できる機会でもある
・各講習会には専用のGoogleフォームから申し込むことができ、休日は第２・第４土曜日に講習の時間が設けられている
・講習の種類も５つ程あり、極めたい分野を選択して講習を受けることができる
・RPA＝ルールベースの自動化（Link：AI＝判断ベースの自動化）

 

第3部　雇用形態、事前打ち合わせについて

開発手法について、商用について、雇用形態、事前打ち合わせについて

第３部は働く際のシステムについて、基礎的な知識を詰め込みました。
・アジャイル開発とウォーターフォールモデルの２種類の開発手法の内、現在のプロジェクトにおいては詳しく設計のでき、実装・テストと小回りの効くアジャイル開発が使われている
・上流工程は目立つ部分ではあるが、下流工程も実装・運用においては大切な役割である
・事前打ち合わせにおいての注意点は自社の社名を名乗らないこと

 

第4部　情報セキュリティ講習、社内プロダクト紹介

情報セキュリティ講習、社内プロダクト紹介

情報セキュリティ講習ではまず「危険を認知する」ところから講習が始まりました。
インターネット、メールはもちろんのこと、紙媒体では持ち出しや破棄の瞬間、口頭でも歓談の最中など、気をつけねばならない場所の確認をしました。

・スパムメール＝個人限定せずに送られる、または広告にリンクを貼る詐欺メール
・フィッシングメール＝特定の個人に送られる詐欺メール
・マルウェアは感染の兆候が見えにくいので注意！
・情報セキュリティの３要素は機密性・完全性・可用性

 

まとめ
・営業理念は快適かつ最適な環境の提供
・オブジェクティブグループはSESとプロダクトの二柱をメインに事業を行なっている
・情報の取り扱いに注意しよう
・派遣先でも情報収集や広報活動を！
・モスペンくんはかわいい

 

2　　　ハラスメントの研修、就業規則についての説明

ハラスメントの研修

パワハラ、セクハラを中心にお話をお聞きしました。
上司の方、同僚の方との人間関係は、学生の時と一番違う部分です。
ふとした言葉が影響する相手が常にどう思うのか考えながら発言すること、伝えたい事はどう言葉にしたらお互いに気持ちよく伝えられるのか学生時以上の配慮が求められます。

就業規則について

大事な部分を読み合わせながら進めました。
・マイカー通勤の禁止（自転車通勤も禁止）が、通勤時の事故・怪我のリスク軽減である事
・年間所定労働日数は240日、4週4休制
・特別休暇、育児休暇、介護休暇の他、生理休暇も導入されています。
・毎年1回の健康診断にはメンタルも含まれます。

まとめ
・話し方・伝え方に注意！
・欠勤届はきちんと出す&連絡をしっかりと
・引越しなどの届け出は変更日の前日までに会社に変更を通知しよう

 

3　　　VDT研修

正しい姿勢で作業しよう

VDTとは、Visual Display Terminalsの略で、画像表示端末の事です。
この講習では、疲労し易い姿勢やPC作業においての眼球や精神神経系への負担、理想の継続作業時間や、小休憩の大切さを学びます。

まとめ
・座るときも、正しい姿勢を意識しよう
・就業中、約2時間の立ち作業が理想です

4　　　基礎研修①ーIT基礎（PCスペック、OS）

PCスペック

PCの基礎的な知識の内、表記された数値からPCのスペックを読み取る為の知識を学びました。

・コンピュータの5大装置＝入力装置→制御装置→演算装置→記憶装置→出力装置
入力　：　タッチパネル、キーボード、トラックパッドから、カメラ、マイク、なども含まれる
出力　：　画面、電光掲示板
・PCはCPUとGHzで処理能力や処理速度を見る事ができる
CPU＝コア数。PCの脳ミソの数。並列でいくつ物を考えられるかが決まる。分担作業のチームプレイ（Link：論理コア、物理コア）
GHz＝ギガヘルツ。クロック周波数。数字が大きい程考える速度が速い。能力が高いほど消費電力も多く、発熱する

・RAM＝メモリ。SSD、フラッシュメモリなどの事。読み込みも書き込みもできる。作業机（一時記憶）なので、一番よく使う記憶装置＝主記憶装置
・ROM＝ストレージ。HDDの事。書き込みのみ、できる。補助記憶装置

 

OSについて

先述のPCスペック（脳みそ達）の行う作業を管理するのがOSです。
主にはwindowsOSとMacOSがあり、EmeryDataはLinuxOSを使用しています。
また、WindowsOSは金融や業務支援、運用保守、テストに使われる為、1チーム何十人の作業に使われる事が多く、MacOSはデザイン系、ゲーム、コンテンツ関連に使われる為、1チーム5人など、少数での作業で使われる事が多いそうです。

PCを使用する場合、WindowsとMacにはそれぞれ下記のようなメリットとデメリットがあります。

WindowsPCのメリット
・Microsoftとの互換性が高い
・自作PCなど、オーダーメイドし易い
・OSメーカーが機器を製作しているので、他の機器との親和性が高い
・CPUの種類も多く、選定ができる
・開発環境も多いので、開発のハードルが低い（申請が必要ない）
WindowsPCのデメリット
・OSのバージョンアップにより、開発ツールのバージョンが合わなくなる事が多い
・シェアが多いので、ウイルスやハッキング等が多い

MacPCのメリット
・タブレット、スマホとの連携がし易い
・ソフト関係は申請がいるので信頼性が高い（悪意あるアプリが少ない！）
・ストレージ操作ができるので別のOS（Windowsとか）も使える（リモートで繋ぐ事もできる）
MacPCのデメリット
・ファイル圧縮をWindowsで開けない（シェアの多いWindowsで開けないのは痛手…）

スマートフォンにはAndroidやiosなどのOSが搭載されています。マイナーどころではFireFox phoneや、消費電力が大き過ぎてすぐにシェアの無くなったWindows phoneが挙げられます。
また、Androidは採用しているメーカーが多い為、カーナビやFuture phoneなどにも搭載されており、UIの種類が多いのも特徴です。

 

まとめ
・入力装置はキーボードとマウスだけではない！
・CPUとGHz。チームプレーか、最強の一人か・主記憶装置は机。補助記憶装置は本棚。
・EmeryDataはLinuxOSを使っている
・手堅いWindows、デザイン系のMac
・Android搭載のスマホは指紋認証の場所も違う場合がある

 

5　　　基礎研修②ーネットワーク基礎知識

LANやWAN、通信プロトコル、IPなどについてお話を伺いました。
今まで知らなかった用語や、雰囲気でしか理解していなかった用語が多数飛び出しました。

ネットワーク用語基礎

・LAN＝限られた区域内の通信回線
・WAN＝公衆回線を利用した通信回線
・インターネット＝世界規模のネットワーク
・イントラネット＝インターネットの技術を使用したLAN内部だけのネット。見た目LANと違いは無い

・メールの送受信などは通信プロトコルに則っている
・通信プロトコルはTCP/IPに則っている
・通信プロトコルはiosのosi参照モデルによって下図のような７階層に分割されている（Link：電気信号返還に関する規定）

・送信されたデータはアプリケーション層から物理層へ降りていき、物理層で受信者に送られる
・受信されるデータは物理層からアプリケーション層に登っていき、受信者に閲覧される
・TCP（＝Transmission Control Protocol）はデータの道順を確認し、送信されたデータが次の階層で正しく受信されているか確認し、問題がある場合は再び自動で送り直してくれる
・ルーターはコンピュータネットワークにおいて、データを2つ以上の異なるネットワーク間に中継する通信機器
・IP（＝Internet Protocol）はネット上の正式な住所のこと。住所に従って正しい道順でネットワーク間のやり取りを届けてくれる
・IPアドレスは16進数で作られたネット上の住所。Macではif confing、Windowsではip confingが適応されている
・IPV6（＝Internet Protocol Version6）はネット上の住所の内、128bitを8bitで区切って作られたもの

＜IPV6についての補足＞
前のバージョンにはIPV4があり、32bitを8bitで区切っていたが、全ての住所を使い切ってしまったので、現在32bitの住所のものは昔のサイトか、閉鎖されたサイトのIPアドレスを借りているサイト

・グローバルIPは世界でひとつ（企業がしようしているアドレスなど）、プライベートIPはLAN内部の限定範囲で使用するアドレス
・ネットワークアドレスとホストアドレスを分けるために、サブネットマスクが必要
・DNS（＝Domain Name Server）は普段目に見えているアドレス（ex：https://www.〜〜）をIPアドレスに変えてくれるもの
・FTP（＝File Transfer Protocol）は2台のコンピュータ間でファイルの転送を行うプロトコル
・HTTP（＝HyperText Transfer Protocol）はwww.〜〜の約束
・SMTP（＝Small Mail Transfer Protocol）はメールを送信するプロトコル
・POP3（＝Post Office Protocol）はサーバからメール受信するときの約束
・IMAP（＝Internet Mall Access Protocol）ではメールサーバーで管理されているので、悪意のあるメール（詐欺メール等）を排除できる。サーバにデータ保管、出し入れができる
・MIME（＝Multipurpose Internet Mail Extensions）は2進数の文字や音声、動画などを送受信できる

 

LANの基礎

・HUBとネットワークケーブルの種類
ツイストペアケーブル：安価、ノイズに弱い
同軸ペアケーブル　　：若干高価、ノイズに強い
光ケーブル
・100MBPS ベストエフォード（最速）の表示は、たくさんの人が一度に利用した場合にパンクしてしまうので、そもそも制限をかけた上の最速数値。
・接続形態による分類
①スター型：1本のケーブルに障害が発生してもLAN全体の機能には影響しない
②リング型：どこか切れたら、おわり。
③バス型　：太平洋戦争の時とかに使われた。古い。どこか切れたらおわり

 

・EthemetはLANケーブルの事
・トークンリングを用いる事で、データのコリジョン（衝突）が発生しなくなる
・モデムは外部との接続装置の事
・DHCPサーバは毎回インターネットにアクセスする時、自動的にIPアドレスを振り分けてくれる
・ファイアウォールはネットワークトラフィックの制御でプライベートネットのセキュリティを確保してくれている
・プロキシサーバはクライアント（利用者）に変わってネットをやり取りする機能を持っている。学校の先生のPCや、作業の監視を行うPCが例に挙げられる
・無線LANの内、IEEE802.11aはすごく速いが障害物に弱く、IEEE802.11gは遅いが障害物に強い。主に使用されているIEEE802.11nはふたつの合いの子

＜その他関連用語＞
バス
ターミナルアダプタ：インターフェースの変換器
ルーターブリッジ（リピータ）
DMG
ランサムウェア：ウィルス。感染後、架空のワクチンソフトを押し売りしてくる。
アドホックモード：モンハンの通信など、物理的に近い距離の通信
インストラクチャモード：基地局を設けての通信

 

まとめ
・LANは建物内で、WANは世界と繋がっている
・ルーターはネットと、SW（＝Switch）はLANと繋がっている
・iosのosi参照モデルは７階層に別れている
・IPV6はめちゃめちゃ速い！
・主な接続形態は、スター型・リング型・バス型の3種類
・データのコリジョンが発生するとLANが終わる
・プロキシサーバは検索を監視できるので、関係ない事をしているとバレる
・IEEE802.11nの読み方は「アイトリプルイーはちまるにてんいちいちエヌ」

 

6　　　エンジニアとサイトデザイン

エンジニアについて

エンジニアの仕事の種類はフロントエンド、バックエンド、インフラ、テストの4つがあり、今回はフロントエンドエンジニアのお話を中心に伺いました。

・フロントエンドエンジニアとは、HTML、CSS、JavaScriptの3つの言語を使用するエンジニアのことで、この内HTML、CSSの2言語を使うエンジニアをマークアップエンジニアという
・開発には情報集積・情報処理・操作画面の3つの要素が関わっている
・情報集積はどのくらいの情報を格納するのか、情報格納のルールや整理を行い、1秒間のアクセス数を設計する作業の事
・情報処理はデータベースから情報を持ってきてデスクトップに渡す動作の事。
・操作画面はユーザーが体感し、操作する部分のUI/UXデザインにも関わる箇所
・フロントエンドエンジニアはユーザーに一番見られる場所を作るので、ユーザーの意見を一番反映しなければならない

＜その他関連用語＞
FTP（＝File Transfer Protocol）通信
git-svn
リフ

 

HTMLとサイトデザイン

ここからは「そもそもHTMLって何の略なの？」というPC言語の第一歩から、お仕事で実際に使う構成の考え方や言語の基礎をお伺いしました！

・HTMLとはHyper Text Makeup Langageの略。ウェブページを作成するために開発された言語で、ほとんどのWebページはこの言語を使って製作されている
・HTMLはHyper Textに目印をつける言語
・< >、{ }などのタグを使用する
・#~~~、インデント（空白字下げ）はアークダウンという
・＜!DOCTYPE html＞の宣言は、文書がHTML5で作成されたものであることを示すのに使う
・タブの横に出て来るアイコンのことをファビコンという
・SEO対策とは、検索で探し当て易くしてもらう為の対策のこと
・下図のようなメニューアイコンをハンバーガーメニューといい、このアイコンはすでにグローバルデザインとして機能している

・リキッドデザイン（下図・左）は、スマホ向けのホームページのこと。構成の特徴として、サイドエリアが無い
・左側にサイドエリアのあるホームページのデザイン（下図・右）は視線の誘導としてはUI/UXの部分で配慮がなされていないようではあるが、昔ながらの堅実な印象に映る

・ゲーム系など、クリエイティブな業種の企業の中には横スクロールのホームページもある（Link：ファイル構成）

まとめ
・フロントエンドエンジニアとは、HTML、CSS、JavaScriptの3つの言語を使用する
・情報集積を見誤るとサイトがパンクして使えなくなってしまう
・堅実なサイトにしたいのか、クリエイティブに攻めたいのか、クライアントとの意識の擦り合わせが大事

 

HTML実技

エンジニアの方のお仕事やサイトデザインについて学んだ後は、実際にHTMLやCSSに書き込む言語の講習になりました。

ーSublime textをインストールしようー
テキストエディタのひとつであるSublime textは、総合開発機能として平均的に優れたプラグインのようです。他にAtom（重い）やAdobe Dreamweaver（高価）などが挙げられますが、オススメはSublime textと言うことでした！

・文字の大きさ
h1＝大見出し
h2＝中見出し
h3、h4＝小見出し、斜体？

・Paragraph＝＜p＞＜/p＞：段落
・Division＝＜div＞＜/div＞：箱。表示内容を分ける仕切り
・Comment out＝＜!–ホームページ上には表示されない–＞
・Control＋Option＋I：スペース

＜input＞
・input type=”radio”：ラジオボタン
・input type=”checkbox”：チェックボックス
・ラジオボタンとチェックボックスの違いは複数の選択肢があった場合に、1つだけ選択できるか、複数選択が可能かの違い
・input type＝”text”：改行なしの短文回答。
・input type=”placeholder：回答ボックスに例文を挿入できる
・text box：長文回答
・input type=”button”：を置く。＜button＞＜/button＞で好きなイメージをボタンにすることもできる

＜id＞
・idはタグ自体に名前をつけるもの。固有名詞に近い
例：＜p id=”A”＞　Aだけに処理を施したい
・classは複数指定ができる
例：＜p style=”color:red;＞　文字は赤で書く
・RBGは16進数
・font-size:Xpx;　フォントサイズ。大抵のページは16pxくらい。8px以下は大きさが変わらない
・font weight;bold　フォントの太さが変わる
・style=”display: none”　非表示にする

＜ブロック要素＞
div、section、article、ul、ui

＜インライン要素＞
縦横は指定できず、左から並ぶ要素
input、a、span、button

＜a＞＜/a＞：アンカータグ。リンクがないときは戻って来る。

–閑話-エラー番号シリーズ
not found 404 ＝ファイルがない
403 ＝アクセス権がない
500 ＝サーバーエラー
200 ＝正常。エラーではないのでほぼ見れない

・src＝ソース。img srcで画像を貼るなどができる
・alt＝画像が正常に表示されなかった場合の説明をしてくれる。検索ワードにもなる
・p｛font-size:20px;｝のような表記の場合、pをセレクタ、font-sizeをプロパティ値という

・コードは上から順に読み込みし、上書きされるので、基本的に下の方の指示が優先される
・！important;　最優先！上書きされない。important同士が被ると、下の指示が優先される

・＜style＞＜/style＞でStyle sheetに書くような装飾をHTMLのタグに直書きできるが、デメリットとして直すのが大変
・＜link rel=”style.css” type=”text/CSS href=”style css”＞：Style sheetを読み込む。relは何の読み込みか明らかにするもの。CSSのデメリットとしては外部ファイルが読み込めない場合に使えないこと

 

まとめ
・＜input＞は＜/ ＞が要らない
・idは固有名詞、classは複数選択
・企業などのページソースを見て勉強しよう
・公式ページのコメントアウトに制作者の心の叫びが載っていることもある

 

7　　　コンテンツ東京2019、クリエイター・広告デザイン・ブランディングEXPOの見学

1週間の研修期間の内、3日目に当たる水曜日、4/3に東京ビックサイトで行われていたコンテンツ東京2019の見学に行って参りました！
IT系に限らず、映像・CG制作、コンテンツマーケティング、広告デザインやブランディング、クリエイター、ゆるキャラなどのライセンスを扱うライセンシングジャパンの出展もありました。

目を惹かれたのはVRや大きなスクリーンを使ったコンテンツでしたが、AIを使ったオペレーティングシステムや、体験を売る「モノコト」事業にも興味を惹かれました。

デジタルステージ

中でも気になったのはTAKENAKA SYM-DIRECT アークベンジャーズ シムディレクトさんのブースで展示されていたデジタルステージです。
ビジュアルが華やかで目を引くだけでなく、床に設置された人感センサーは上に乗った人の人数や場所、滞在時間の情報も蓄積できるそうで、現在はエントランスや廊下の壁として使用されているということでしたが、ビックデータに注目の集まる今、利用方法は他にも発見できそうでした。

 

おわりに

研修期間は働く上での基本的なルールと、物事を新しく知る上での取っ掛かりの、大きく2つを日々詰め込んでいく印象でした。
「IT系の企業に就職したけれど、実際どこから勉強していけばいいんだろう？」と入社前にやんわり不安に思っていた私は、IT基礎やネットワーク基礎知識の項目で纏められているようなPCの基本的な知識について飛ばして勉強を始めていたのでPCや周辺環境における「そもそも」の部分を伺うことができたことで「ここにも掘るべき場所があったのか！」と「知らないこと」に気づくことができました。
また、講習会の講師の方と面識を持てたことで、知らないこと、分からないことについていつでもお聞きできる、風通し（というと違うかもしれませんが）の良さを感じました。
まだまだ分からない用語や、スッと出てこない略称も多いので、そういった部分を補完しつつ、自分が進みたい方向の言語を勉強していきたいと思います。