This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

TSfCM Day1

Last updated at 2020-03-27Posted at 2020-02-20

はじめに

仲条のTSfCMにかける想いは、こちら!

ウォームアップ（復習+α）

とりあえず、GAS（グーグル・アップス・スクリプト）やりましょう！
みんな覚えてるかな？？

LINEと天気予報を連携

LINE Nortifyにログイン

LINE Notifyにアクセスして、ログインします。
トークンとか、やったよね...!!

トークンまで発行してしまいましょう。

コピーしたものは、どこかにメモしましょう。（閉じると二度と発行したトークンは見れません。）
使っていないトークンは、削除しても良いかもしれません。（GAS側のトリガーが設定されている場合、解除しないとエラー通知が来続けてしまうので、合わせて切る必要があります。）

Googleスプレッドシートを開いて、スクリプトシートを開く

新しくスプレッドシートを開く。

ツールのスクリプトエディタを選択すると、下記の画面になる。

ここにコードを書いていきます。
その前に、JavaScriptについて、少し慣れていきましょう。

【変数と型について】まずはここから！定義しないと何も始まらない。

どのプログラミング言語にも「変数」というものが存在します！JavaScriptはvarを最初に書き、半角スペースを空けて、（人間にとって）分かりやすい英数字の文字を書くことで変数が「宣言（定義）」されます。
=は、イコールではなく、右の値を左の宣言された「変数」に代入しています。ややこしいので、実際に見て書いて、ついでに型も覚えましょう。

コード.js


function myFunction() {
  var numb = 2020;  // Number（数値）
  var strg = "文字"; // String（文字列）
  var bool = true;  // Boolean（trueやfalseなどの真偽値）
  
  var array = ["サッカー", "野球", "テニス"]; // 配列
  var sport = array[1];
  // JSON (プロパティ名 : 値)
  var info  = {
    name : "仲条　高幸",
    height : 170,
    japan: true
  } 
  var person1 = info.name; // .をつけることで、プロパティの値を取得できます。
  info.school = "TSfCM";   // .をつけることで、プロパティを新しく作成して値を代入できます。

  return; // returnの後に、関数が返す値を入れることができます。
}

プログラミングを始めるなら、まずはif文。次にfor文まで覚えられたら、今日は上出来。

下の写真は、小学5年生が初めて書いたマインクラフトのプログラミングの写真。

if文も、for文も、どの言語にも必ずあります。

プログラミングは、出来るだけシンプルに、短く書くことが求められます。しかし、**実際 if文だけ知っていれば、どんなプログラミングでも作れます。**Webサービスだって作れます。でも、大変だし、他の人にとって見にくいし、後で見返すのも辛いので、短い方が良いんです。

for文は、繰り返し処理のプログラミングで、同じことは何度も書く必要はありません。順番に、コンピューターにやらせて、自分は楽をしましょう。

コード.js


function myFunction() {
  var numb = 2020;  // Number（数値）
  var strg = "文字"; // String（文字列）
  var bool = true;  // Boolean（trueやfalseなどの真偽値）
  
  var array = ["サッカー", "野球", "テニス"]; // 配列
  var sport = array[1];
  // JSON (プロパティ名 : 値)
  var info  = {
    name : "仲条　高幸",
    height : 170,
    japan: true
  } 
  var person1 = info.name; // .をつけることで、プロパティの値を取得できます。
  info.school = "TSfCM";   // .をつけることで、プロパティを新しく作成して値を代入できます。

  // if文
  var this_year_event = "";
  if(numb == 2020){
    this_year_event = "オリンピック";
  } else if(numb == 2025){
    this_year_event = "万博";
  } else if(numb == 2025){
    this_year_event = "SDGs達成";
  } else{
    this_year_event = "何か..!!!";
  } 
  
  // for文 繰り返し処理 （主に繰り返し回数が決まっている場合）
  var loop   = array.length; // 配列.length で配列に何個入っているか数値を取れる
  var tennis = "";
  for (var i = 0; i < loop; i++) {
    if (sport[i] == "テニス") {
      tennis = sport[i];
      break; // for文の中の処理を停止
    }else{
      continue; // 次のfor文の処理に移動
    }
  }
  
  // while文 繰り返し処理 (主に繰り返し回数が決まっていない場合)
  var count = 0;
  while( count < 50 ) {
    count++;
  }

  return; // returnの後に、関数が返す値を入れることができます。
}

もう少し JavaScript を知りたい方

JavaScriptでもっと色々プログラミングを組んで見たい方にオススメ：【JavaScript】便利メソッド【ゆるっとまとめ】←constと書かれているところは、一旦varだと思って置き換えて、GASで使ってみよう！（余裕がある人向け）

LINEに天気予報を通知するソースコード

新しく tenki.gs というファイルを作りましょう。

tenki.js

var token = "発行したトークンを貼り付け！";

function notifyEvent() {
  var response = UrlFetchApp.fetch("http://weather.livedoor.com/forecast/webservice/json/v1?city=130010"); //URL+cityID
  var json=JSON.parse(response.getContentText());
  var description = json["description"]["text"];
  var message = "Hello TSfCM team!\nここ3日間の天気をお知らせするよっ\n";
  for ( var i = 0;  i < 3;  i++ ) {
    message +=  json["forecasts"][i]["date"] +"(" + json["forecasts"][i]["dateLabel"] + ")の天気：" + json["forecasts"][i]["telop"] +"\n";
  }
  message += "\n" + description;

  // LINE送信
  sendToLine(message);
}

function sendToLine(message){
  var options =
   {
     "method"  : "post",
     "headers" : {"Authorization" : "Bearer "+ token},
     "payload" : "message=" + message
   };
   UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

天気API（livedoor天気情報）の仕様はこちら。
ソースコードの city=130010 の部分の数字を、全国の地点定義表（RSS）の中からその土地の番号に変えると、その土地の天気の情報が取れます。

【応用チャレンジ】 LINEではなくSlackに送信！

Slackとの連携

https://api.slack.com/apps

Create an Appが出てこない人は、ウェブで一回自分の所属しているslackのワークスペースにログインしてください。

Slack BOTに名前をつけよう！

App Nameのところに、好きな名前をつけます。BOTの名前になります。

作成に成功したら、左のバーからBot Userを選択。

Always Show My Bot as OnlineをOnにして、Add Bot Userをクリック。

次に、左のバーからIncoming Webhooksを選択して、Add New Webhook to Workspaceをクリック。

送信先を選択。個人に送りつけることも可能です。選んだら「許可する」をクリック。

Webhook URLが新しく加わっているので、コピーをクリック。

GASに戻って、slackのAPIを使うためのコードを足します。下のコードをコピペしてください（先ほどコピーしたものは、下記のコードの /ここが自分のキーになります/ という部分に貼り付け）。

slack.js

function slackBot() {
  var bot = "ボット";

  var url = "/*ここが自分のキーになります*/";
  var options = {
    "method" : "POST",
    "headers": {"Content-type": "application/json"},
    "payload" : '{"text":"' + bot + '"}'
  };
  UrlFetchApp.fetch(url, options);
}

APIを使うための許可が聞かれると思うので、許可します。

作成したBOTが設定したSLACKのワークスペースに自動的に送信されているでしょう。

以上、ウォームアップ！

開発！の前に

マークアップ言語って知っていますか？
これを機に、エンジニアを目指すなら、メモを取るのはEvernoteやワードやエクセルではなく、マークアップ形式でかけるメモ帳アプリを作ろう

メモ帳アプリ

https://stackedit.io/

開発

社会派エンジニアの第一歩！エディターを使ってみよう

プログラミングを書く場所（エディター）は Visial Studio Code を使います。

Webサイトを作っていきます。とっても簡単なので、集中して付いてきてください！

まず最初に

まずは下記のコードをコピペしてみましょう！

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>ここにページのタイトル書くよ！</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .foo-before {
        background-color: white;
        color: black;
      }
      .foo-after {
        background-color: black;
        color: yellow;
      }
    </style>
  </head>

  <body>
    <p id="id_1">1. JS側にonclick書いてクリックイベント発火。</p>
    <p id="id_2">2. JSでは無名関数も使えるよ！</p>
    <p onclick="pClick()">3. HTMLでonclick属性書いた。クリックしてみて！</p>
    <p id="id_3" class="foo-before">4. クリックするたび色変わるよ！（クラスの入れ替えをjQueryで実装）</p>
    <p id="id_4">5. クリックするとCSS追加されるよ！</p>

    <script type="text/javascript">
      // 変数定義（「//」から始まる行はコメントアウト）
      var id_1 = document.getElementById("id_1");
      var id_2 = document.getElementById("id_2");
      var id_3 = document.getElementById("id_3");

      // id_1（id_2）をクリックしたら、functionの中身を実行
      id_1.onclick = function id1Click() {
        alert("id_1クリックしたよ！");
      }
      id_2.onclick = function () {
        alert("id_2クリック！関数名は書いても書かなくてもOK！");
      }

      // HTML側にクリックイベント記述
      function pClick() {
        alert("pタグクリック！HTMLでonclick属性書いたよ！");
      }
    </script>

    <script type="text/javascript">
      var stylesheet = document.styleSheets.item(0);

      // 上で定義したid_4はここでも使えるよ！
      id_4.onclick = function () {
        //第2引数は、「CSSの何番目のルールにするか」。0始まりの番号。
        stylesheet.insertRule("#id_4 {font-size: 20px;}", 0);
        stylesheet.insertRule("#id_4 {background-color: pink;}", stylesheet.cssRules.length);
      }
    </script>

    <!-- これでjQuery使える。ただしネットつながってれば。 -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script type="text/javascript">
      // $関数はjQueryの定番！
      $('#id_3').click(function() {
        this.className = (this.className === 'foo-before') ? 'foo-after' : 'foo-before';
      });

      document.writeln("<p>6. JSでHTML記述！（リロードするたび少し表示が遅れてるけど、わかるかな？）</p>");
      document.writeln("<p>7. URLは、" + document.URL + "だよ！</p>");
      document.writeln("<p>8. このページのtitleは、「" + document.title + "」だよ！</p>");
    </script>
  </body>
</html>

それではやっていきましょう！

技術の概要

Web系のエンジニアの技術は、かなりざっくり言うと、

フロントエンド・エンジニア... 表に見える部分を頑張る人

　　（例）HTML、CSS、JavaScript など

サーバーサイド・エンジニア... データを更新したり、アプリケーション動かす中身の部分を頑張る人

　　（例）PHP、Ruby、Python など

インフラ・エンジニア... Webアプリケーションを動かすための環境構築など。

　　（例）Webサーバ構築(AWS、GCP)、DBサーバ構築、DNSサーバ構築など

の3つに類別できます。

その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術です。

フロントの概要

HTML　 →　「構造」を記述。マークアップ。Hyper Text Markup Language。
CSS 　→　「装飾」を記述。スタイルシート。Cascading Style Sheet。
JavaScript　→　「動的な処理」を記述。JSとも言う。

ちなみに、HTML > CSS > JavaScriptの順に重要であるとされているそうです。（HTMLが1番重要。詳しく何でか気になって仕方がない方は、プログレッシブ・エンハンスメントとググってください。）

HTML

最小限の記述

拡張子は.html。
（ファイル名が、test.htmlのように最後が.htmlということ）

test.html

<!DOCTYPE html>
<html>
  <head>
    （headタグで囲まれた部分（head要素）には「付加情報」を記述）
  </head>

  <body>
    （bodyタグで囲まれた部分（body要素）には「コンテンツ」を記述）
  </body>
</html>

1行目... 文書型宣言。おまじないだと思えばOK。

　　（例）<!DOCTYPE html>だと、HTML5を利用するよ！という意味。

タグとは、<と>で囲まれたもののこと。

　　（例）headタグとは、<head>のこと。

要素とは、開始タグ<>と終了タグ</>で囲まれた全体を指す。タグと要素を混同しないように！

　　（例）head要素とは、<head>　・・・　</head>のこと。

htmlタグ<html>... HTMLファイルの中身は、文書型宣言以外をhtmlタグで囲むべし。

1番大事なのは、HTMLファイルには必ずheadとbodyがあるよ！ってこと。

HTML記述例

test.html

<!DOCTYPE html>
<html>
  <head>
    <title>ここにページのタイトル書くよ！</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <h1>1. h1タグの中身は、見出し1だよ！1番大きい見出しだよ！</h1>
    <h2>1-1. h2タグの中身は、見出し2だよ！</h2>
    <p>pタグの中には段落の塊を記述するよ！
      <u>アンダーバーはuタグで囲むよ！</u>
      <i>斜体はiタグで囲むよ！</i>
      改行したいときは<br />って書くよ！
    </p>
    <h3>1-1-1. h3タグは見出し3だよ！</h3>
    <p>見出しタグはh4,h5,h6とかもあるよ！h1タグが存在しないのにh2とかh3を使うのは良くないよ！</p>
    <div>
      <ul>
        <li>りんご</li>
        <li>バナナ</li>
        <li>もも</li>
      </ul>
    </div>
    <p>liタグはリストを書く時使う。liタグはulタグ（またはolタグ）で囲むことで使えるよ！</p>
  </body>
</html>

ブラウザで確認！

CSS

CSSは、ふーんで良いです。絵を描いたり、デザインが好きな人、几帳面な人は、CSSを学ぶのはオススメです！

CSSの書き方は3通り

CSSには書き方が3通りあります。

「style属性」として記述（pタグなど「タグの中」に記述）
「styleタグ」の中に記述（HTMLファイルの「headタグの中」に記述）
外部ファイルに記述（linkタグで呼び出す）

「style属性」として記述

HTMLファイル内の特定の要素に直接CSSをあてる方法。
記述例は以下の通り。

test2.html

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <p style="color: blue;">Hello World:D</p>
  </body>
</html>

style="color: blue;"をpタグの中に書くことで、Hello World:Dの部分が青文字になる。
確かめたかったら、コピペして保存して、ブラウザで開いてみよう！保存するときの拡張子は.htmlだよ！

「styleタグ」の中に記述

HTMLファイル内のheadタグの中に、style要素としてCSSを記述する方法。
記述例は以下の通り。

test2.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>

<style type="text/css">と</style>で囲まれた部分にCSSを記述。
type="text/css"と書くことで、scriptタグの中身がCSSファイルであることを明記。

CSS部分の書き方は、

タグ名 {
	プロパティ名: 値
}

となる。classやidは、

.class名 {
	プロパティ名: 値
}
#id名 {
	プロパティ名: 値
}

のように、classには.、idには#をつけることでCSSを記述します。ふーんで今はOK!

外部ファイルに記述

上記2つの方法では、HTMLファイルの中にCSSを記述していたが、3つ目のこの方法では「外部ファイル」としてCSSを記述する方法があります。普通、HTMLのファイルにCSSは書かないで、違うファイルに書きます。
拡張子は.css。記述例は以下の通り。

<!DOCTYPE html>
<html>
  <head>
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>

p {
	color: yellow;
	background-color: black;
}

HTMLファイル内ではlinkタグで外部CSSファイルを呼び出します。
href="test.css"と書くことで、呼び出すファイル名を記述。この場合、呼び出すCSSファイルの名前はtest.css。
rel="stylesheet" type="text/css"は、CSSを呼び出す時のおまじないと思えばOK！

JavaScript

JavaScriptの書き方は2通り

JavaScriptには書き方が2通りあります。

「scriptタグ」の中に記述
外部ファイルに記述（scriptタグで呼び出す）

「scriptタグ」の中に記述

CSSの「styleタグ」の中に記述と似た感じで、HTMLファイルの中にscript要素として記述する方法。
記述例は以下の通り。

test3.html

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <p>Hello World:D</p>

    <script type="text/javascript">
      alert("Hello JavaScript:D");
    </script>
  </body>
</html>

<script type="text/javascript">と</script>で囲まれた部分にJavaScriptを記述。
type="text/javascript"と書くことで、scriptタグの中身がJavaScriptファイルであることを明記。
alert("Hello JavaScript:D");により、Hello JavaScript:Dと書かれたアラートがポップアップで出てきます。
script要素を書く場所は、headタグの中でもbodyタグの中でもどちらでも良い。

外部ファイルに記述

「外部ファイル」としてJavaScriptを記述する。
拡張子は.js。記述例は以下の通り。

test3.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="test.js"></script>
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>

test.js

alert("Hello JavaScript:D");

HTMLファイル内ではscriptタグで外部CSSファイルを呼び出す。
src="test.js"と書くことで、呼び出すファイル名を記述。この場合、呼び出すJavaScriptファイルの名前はtest.js。
type="text/javascript"と書くことで、scriptタグで呼び出すファイルがJavaScriptファイルであることを明記。

Chart.jsを使って遊んでみよう

https://www.chartjs.org/

chart.html


<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  </head>

  <body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',
    
            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: 'rgb(225, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45]
                }]
            },
    
            // Configuration options go here
            options: {}
        });
        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });
        </script>
  </body>
</html>

デプロイその1

https://script.google.com/macros/s/AKfycbzrynU74oF-piXe-KxnLgxKCbl4049pj906-Igp33O5nZ0jsrZr/exec
初心者にとって最も簡単なWebサイト公開方法の一つである、GASを使います！

初期設定

デフォルト部分のmyFunctionという関数は使わないので消して大丈夫です。代わりに、doGetという関数を新しく作る必要があります。

コード.js


function doGet(e){
  return HtmlService.createTemplateFromFile('index').evaluate();
}

そのあと、HTMLファイルを新しく追加して、書いたHTMLのコードを全てここに貼り付けます。

あとは、公開するだけ。

デプロイその2

https://day1.now.sh/
初心者にとって最も簡単なWebサイト公開方法の一つである、nowを使います！

事前準備

Node.js というものがあります。まだ一度もnpm コマンドを使った事が無い方は、下記URLの参考サイトに、インストールしてください。

Macでbrewコマンドが使えない方は、下記URLの参考サイトを確認してください。
https://brew.sh/

npmコマンドが使うようになりましたら、nowを使うための事前準備をします。コマンドを打ちます。


$ npm install -g now
$ npm install -g yarn
$ yarn global add now

ログインに関して

事前準備が完了したら、nowに、まずはログインします。


$ now login

emailを入力後、Please sign up: https://zeit.co/signup と最初は出るので、サインアップします。下の画面になっていればOK!

now

最後に、デプロイするためのコマンドはこれだけです。


$ now

質問は、全てEnterで大丈夫です。

Production: https://**********.now.sh
と出ていれば成功です。今後、このコマンドを叩くだけで、いつでもデプロイできます。凄くないですか？念の為、デプロイできているかどうか、URLをブラウザで開けるか確認してみてください。そして、開けていたら、Twitterで、「初めてのデプロイ #駆け出しエンジニア #TSfCM #初日」などと呟いてみましょう！

ブートストラップ

Bootstrapを使うと、CSSを書かずに楽に書けます。
https://getbootstrap.com/docs/4.0/examples/

GitHubで（できれば）毎日コードを更新しよう

GitHub :https://github.com

VS code に戻って、一個一個コマンドを打っていきます。

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/**********/***********.git
$ git push -u origin master

Windowsの方でgitコマンドが使えない人はこちら : https://gitforwindows.org/

動かないなと思ったら、設定で間違っている場合があるので、新しく作られている.gitという隠しファイルを削除して、もう一度$ git initからやり直してください。

【宿題】

自分のオリジナル自己紹介Webサイトを作ろう！

来週木曜日までに、GASで公開したURLと、GitHub上のコードを下のURL（Googleフォーム）に提出してください。金曜日に確認して、全員にフィードバック（感想）を個別に送ります。

宿題提出先はこちら： https://docs.google.com/forms/d/1izHDU6z-ZRb1ap51bjZ8BzrvmTlvdFstEnZ-s1Y074o/edit

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

TSfCM Day1

はじめに

ウォームアップ（復習+α）

LINEと天気予報を連携

LINE Nortifyにログイン

トークンまで発行してしまいましょう。

Googleスプレッドシートを開いて、スクリプトシートを開く

【変数と型について】まずはここから！定義しないと何も始まらない。

プログラミングを始めるなら、まずはif文。次にfor文まで覚えられたら、今日は上出来。

if文も、for文も、どの言語にも必ずあります。

もう少し JavaScript を知りたい方

LINEに天気予報を通知するソースコード

【応用チャレンジ】 LINEではなくSlackに送信！

Slackとの連携

Slack BOTに名前をつけよう！

開発！の前に

メモ帳アプリ

開発

社会派エンジニアの第一歩！ エディターを使ってみよう

まず最初に

技術の概要

フロントの概要

HTML

最小限の記述

HTML記述例

CSS

CSSの書き方は3通り

「style属性」として記述

「styleタグ」の中に記述

外部ファイルに記述

JavaScript

JavaScriptの書き方は2通り

「scriptタグ」の中に記述

外部ファイルに記述

Chart.jsを使って遊んでみよう

デプロイその1

初期設定

デプロイその2

事前準備

ログインに関して

now

ブートストラップ

GitHubで（できれば）毎日コードを更新しよう

【宿題】

社会派エンジニアの第一歩！エディターを使ってみよう