BLOG

【第１回】3分でできる！メモ帳プログラミング！

2021-01-29





みなさんはじめまして
ロックシステムアカデミー講師の山本です
YOUTUBEをご覧いただきありがとうございます！

プログラミングを学んでみたいけど難しそうで一歩が踏み出せない・・
そんな人の背中を押せるようなチャンネルを目指して週一回のペースで動画を配信していきます！

こちらのブログでは
動画で説明しきれなかった部分を追記してフォローしていきますね！！
今回は基本的にコピー＆ペーストで大丈夫！
メモ帳を作ってその中にコピペしていきます

コピー出来るよ

上のように囲まれた部分をコピーしてね
では、早速やっていきましょう！


メモ帳お天気アプリコード①
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>ここにタブの表示名を記入</title>
  </head>

  <body>
    <h1>お天気アプリ</h1>
    <h2>お天気アプリ</h2>
  </body>
</html>


コピーできましたか？補足情報になりますがコピーしたあと
お好きなWEBページで右クリック→開発者ツールで調査

と進んでみて下さい
インターネットにあるWEBページって実はこんなコードで書かれていることが分かります



さっきコピーしたコードと似てますね！



※.txt を .html に変更してもブラウザに表示されない場合

拡張子によって開くアプリを指定する 拡張子ごとに開くアプリを自分で指定することができます。

(例：chromeではなくて他のブラウザで開きたい！）

＜Windows10の場合＞
①ファイルを右クリックして「プロパティ」を表示します　②「全般」タブの、プログラム「変更」をクリックします
　今後、標準起動で開きたいアプリを選択して「適応」→「OK」をクリックします




さてさて、うまくいきましたか？
次のメモ帳にお天気アプリコード②をコピペして下さいね！
どの部分が変わったのか見比べながら進めていくとアプリ開発の流れがつかみやすくなりますよ


メモ帳お天気アプリコード②
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>お天気アプリ</title>
  </head>

  <body>
    <h1>お天気アプリ</h1>
　　<h2>お天気アプリ</h2>

    <div id="today_monthdate"></div>
    <div id="today_description"></div>
    <div id="today_temp"></div>
    <div id="today_icon">
      <img src="">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>

       // 現在位置の取得
       navigator.geolocation.getCurrentPosition(success, fail);


       // 現在位置が取得できた場合
       function success(pos) {
         alert("緯度：" + pos.coords.latitude + " 経度：" + pos.coords.longitude);
　　　　 }
       

       // 現在位置が取得できなかった場合
       function fail(error) { 
        alert('現在位置を取得できませんでした。');
        }
    </script>
  </body>
</html>


今からメモ帳お天気アプリコード③をコピペしていきます
このあたりから記述されているコードが増えてきましたね！

私は最初の頃、この長さのコードを見ると頭がフリーズしてましたｗｗ
原因は、全てを一気に理解しようとしたことですね・・・
プログラミング学習で大事なことの1つはまずは全体像を把握して流れを掴むこと


文法や構文も大事ですが、今は何となく分かるのレベルで進んで行きましょう！！



メモ帳お天気アプリコード③
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>お天気アプリ</title>
  </head>

  <body>
    <h1>お天気アプリ</h1>
　　<h2>ここに地域が表示されます</h2>

    <div id="today_monthdate">ここに日にちが表示されます</div>
    <div id="today_description">ここに天気が表示されます</div>
    <div id="today_temp">ここに温度が表示されます</div>
    <div id="today_icon">
      <img src="">ここにアイコンが表示されます
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>

       // 現在位置の取得
       navigator.geolocation.getCurrentPosition(success, fail);


       // 現在位置が取得できた場合
       function success(pos) {
         alert("緯度：" + pos.coords.latitude + " 経度：" + pos.coords.longitude);
         const latitude = pos.coords.latitude; //緯度
         const longitude = pos.coords.longitude; // 経度
         const url = 'https://api.openweathermap.org/data/2.5/forecast'; // 使用するAPIのurl
         const apiKey = 'APIに必要なキー'; 
        
       // 非同期処理
        $.ajax({
          url: url, // 使用するAPIのURL
          data: { // 取得に必要な情報
            appid: apiKey,
            lat: latitude,
            lon: longitude,
            cnt: 1, // 取得する数
            units: 'metric', // 摂氏
            lang: 'ja' // 言語
          }
        })

        // API通信成功時
        .done(function(data) { 
            $('h2').text(data.city.country + '：' + data.city.name + 'の天気');

          // 取得した天気予報データ
          data.list.forEach(function(response, index) {
            const dateTime = new Date(response.dt* 1000); // 取得日時
            const month = dateTime.getMonth() + 1; // 月
            const date = dateTime.getDate(); // 日
            const temp = Math.round(response.main.temp); // 気温
            const description = response.weather[0].description; // 天気の詳細
            const icon = response.weather[0].icon; // 天気アイコン名
      
           });
          })
          // APIとの通信が失敗した場合
          .fail(function() {
          alert('APIから情報を取得できませんでした。');
        })
       }

       // 現在位置が取得できなかった場合
      function fail(error) { 
        alert('現在位置を取得できませんでした。');
      }
    </script>
  </body>
</html>



そろそろゴールが見えてきました！あと少しです
下はJqueryの内容をHTMLに反映するためのコードです
Jqueryは　$('セレクタ')このような形でよく記述されます




Jquery反映コード
 
  $('#today_icon').children('img').attr
   ('src', 'http://openweathermap.org/img/wn/' + icon + '@4x.png'); // 天気アイコンの場所
  $('#today_monthdate').text('日付：' + month + '/' + date); // 取得した月日
  $('#today_description').text('天気：' + description); // 天気の詳細
  $('#today_temp').text('気温：' + temp  + '°C'); // 気温




お疲れさまでした！
これが最後のコードになります
今までのメモ帳お天気アプリコード①～③のコードで動かなかった方
時間が無くて完成コードだけ試してみたいという方

下のメモ帳お天気アプリコード④をお試し下さい
質問・不明な点があればYOUTUBEのコメント欄からどうぞ！
次の動画でまたお会いしましょう




メモ帳お天気アプリコード④（完成）
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>お天気アプリ</title>
  </head>

  <body>
    <h1>お天気アプリ</h1>
　　<h2></h2>

    <div id="today_monthdate"></div>
    <div id="today_description"></div>
    <div id="today_temp"></div>
    <div id="today_icon">
      <img src="">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>

       // 現在位置の取得
       navigator.geolocation.getCurrentPosition(success, fail);


       // 現在位置が取得できた場合
       function success(pos) {
         alert("緯度：" + pos.coords.latitude + " 経度：" + pos.coords.longitude);
         const latitude = pos.coords.latitude; //緯度
         const longitude = pos.coords.longitude; // 経度
         const url = 'https://api.openweathermap.org/data/2.5/forecast'; // 使用するAPIのurl
         const apiKey = 'APIに必要なキー'; 
        
       // 非同期処理
        $.ajax({
          url: url, // 使用するAPIのURL
          data: { // 取得に必要な情報
            appid: apiKey,
            lat: latitude,
            lon: longitude,
            cnt: 1, // 取得する数
            units: 'metric', // 摂氏
            lang: 'ja' // 言語
          }
        })

        // API通信成功時
        .done(function(data) { 
            $('h2').text(data.city.country + '：' + data.city.name + 'の天気');

          // 取得した天気予報データ
          data.list.forEach(function(response, index) {
            const dateTime = new Date(response.dt* 1000); // 取得日時
            const month = dateTime.getMonth() + 1; // 月
            const date = dateTime.getDate(); // 日
            const temp = Math.round(response.main.temp); // 気温
            const description = response.weather[0].description; // 天気の詳細
            const icon = response.weather[0].icon; // 天気アイコン名
      
            $('#today_icon').children('img').attr
              ('src', 'http://openweathermap.org/img/wn/' + icon + '@4x.png'); // 天気アイコンの場所
            $('#today_monthdate').text('日付：' + month + '/' + date); // 取得した月日
            $('#today_description').text('天気：' + description); // 天気の詳細
            $('#today_temp').text('気温：' + temp  + '°C'); // 気温
 
           });
          })
          // APIとの通信が失敗した場合
          .fail(function() {
          alert('APIから情報を取得できませんでした。');
        })
       }

       // 現在位置が取得できなかった場合
      function fail(error) { 
        alert('現在位置を取得できませんでした。');
      }
    </script>
  </body>
</html>


【現役エンジニアと実務で学ぶプログラミング/ロックシステムアカデミー公式サイト】
未経験からITエンジニアをめざすならロックシステムアカデミー
大阪市福島駅すぐの現役SE直接指導のプログラミングスクール開校
https://rocksystem.co.jp/academy/

株式会社ロックシステム

「ブラック企業をやっつけろ！！」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中！絶賛エンジニア募集中。

他の記事へ

CATEGORY