<!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で実現している

2017-03-19

UI, UXとは…？

UI, UX 新人研修

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

UI

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

UX

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

体験
「画面に触った」「ボタンを押した」「お茶を買った」同じ動作なのに受け取る経験は全く違う!
この経験がUX

UIの理由を考える

UIの例
UIの理由
- 操作方法などの仮説
- 過去の慣例やすでにあるものに倣う
- どうしようもない理由（○○の意向とか）など

仕事にどう関係するのか

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

自分でUIを考えてみる

自分のよく使うアプリ

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

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

2017-03-19

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

新人研修カスタマイズ

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

流れ

レイアウト考える

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

実装する

フィードバックもらう

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

最終プレゼンで発表

★CSSファイルを外部化

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

2017-03-18

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

新人研修カスタマイズ

報告プレゼンの目的

内容

目安時間

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

サイバー詐欺

迷惑メール

ウィルス

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

重要ポイント

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

+JS

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