最終報告会

報告プレゼンの目的

  • 1か月での成長

    • 何をしたか、何に気づいたか
    • 配属されたときにギャップが少ないように自分たちのレベルを知ってもらう
  • プレゼンの練習

    • 資料の見せ方
    • 話し方
    • 前準備とあと振り返り

内容

  • 成果物

    • LINE Bot
    • 日報ブログ
      • 見た目をどのようにしたか
      • 何でこのようなスタイルにしたか(UI・UX的な観点で)
  • 研修の感想

    • 学んだことや楽しかったこと

目安時間

  • 発表 : 20分
  • フィードバック:10分~15分

会議室は1時間半確保しておく。

【予備】インターネットと犯罪の話

インターネット上で危惧される・巻き込まれる可能性のある犯罪は?

以下例:

不正アクセス

  • 他人のID・パスワードを奪取・盗用して、なりすましてアクセス認証する

サイバー詐欺

  • ワンクリック詐欺
    動画や画像をみようと思ったら会員登録されて会費請求画面になってしまう

  • フィッシング詐欺 実在の信販会社や銀行を装ったメールで、ホンモノそっくりの罠サイトに誘導し、 そこに入力させることで個人情報や暗証番号を盗み出そうとする

迷惑メール

ウィルス

  • 勝手に再起動を繰り返す
  • 記憶にないソフトが勝手に起動する
  • 偽のセキュリティソフトが起動する
  • 勝手に画面が複数立ち上がる
  • ツールバーなどが沢山インストールされる
  • 勝手にフォルダが現れる
  • 拡張子が変えられる

それらの回避方法や対策は?

重要ポイント

  • 犯罪を知ること(知識)
  • 対策は2種類
    • 引っかからないための対策
    • 引っかかったあとの対策
  • フィッシングサイトの見分け方
    • URLチェック
    • 大手を過信しない
  • 意識

【予備】検索について

検索がうまくなるといいこと

  • 行き詰まってしんどい…となることが減る
  • 質問の精度が高まる
  • 結果として欲しい情報に早く行きつける

liginc.co.jp

liginc.co.jp

【予備】なまのJSのサンプル

なまのHTML,CSSのサンプル - 2017年度 新人研修を利用する。

+JS

クリックされたらタイトルのスタイルが適用されるようにする

  • idをつける
  • 要素を取得する
  • クリックイベントを定義する
  • リンクさせる
<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <h1 class="red" id="title">Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
  <script src="sample.js"></script>
</body>
</html>
そのまま
(function(){
  var title = document.getElementById("title");

  title.addEventListener("click", function(){
    this.className = "blue";
  })

})();

+JS(切り替え)

クリックされるごとにスタイルが切り替わるようにする

  • CSSのスタイルを増やす
  • JSでクラス名の切り替えを行うように実装する(if文で分岐する)
そのまま
@charset 'UTF-8';

.red{
  color: red;
}

.blue{
  color: blue;
}
(function(){
  var title = document.getElementById("title");

  title.addEventListener("click", function(){
    if(this.className === "red"){
      this.className = "blue";
    }else if(this.className === "blue"){
      this.className = "red";
    }
  })

})();

ポイント

  • Javascriptは、ブラウザ上で実行されるプログラム言語である(PHPも)
  • WEBサイトに動きを付けている(クリックしたときの変化とか)はjavascriptで実現している

UI, UXとは…?

WEBサイトやアプリケーションの画面はどうやって作られているか

UI

User Interfaceの略。
Interfaceとは「接点・接触面」という意味で、UIはユーザと製品・サービスの接触面を指す。つまり「ユーザの目に触れる部分、使用する部分」はすべてUIとみなすことができる。

UX

User Experienceの略。
Experienceとは「体験・経験」という意味で、UXは「ユーザが製品・サービスを通じて得られる体験」を指す。

UIの理由を考える

仕事にどう関係するのか

プログラマになるなら…
ユーザの気持ちを想像する視点をもって、コードを書く。

自分でUIを考えてみる

自分のよく使うアプリ

  • 選んだ理由、いいところ
    • 比較したところ
    • 個人的なこだわり
  • 不満、変えたいところ
    • 自分ならこうする

日報を読む人の立場になってブログレイアウトを考える

日報ブログをカスタマイズして発表しよう

読みやすい日報ブログに!

流れ

レイアウト考える

カスタマイズ前の状態をスクリーンショットしておく

実装する

フィードバックもらう

フィードバックを踏まえて再検討

最終プレゼンで発表

CSSファイルを外部化

  1. はてなブログ管理画面からCSSをコピー
  2. エディタで新規ファイル作成、コピーしたCSSをペースト
  3. 研修用サーバに置く
  4. はてなブログ管理画面からヘッダのHTMLを編集
    サーバに置いたファイルを絶対パスでリンクさせる

WEBサイトはなぜ見れるの?

WEBサイトの実態はサーバにある

https://line.f-logic.jp/img/WEB_internet.jpg

HTML, CSS ,JSファイル

ファイルを置く場所 = サーバ

置かれたファイルを見る場所 = クライアント(ブラウザ)

インターネット経由

ファイルの住所 = URL