BLOG

【第2回】メモ帳プログラミングお天気アプリ/パワーアップ！！！

2021-02-05


みなさんこんにちわ！
ロックシステムアカデミー講師の山本です
第2回メモ帳プログラミングでは第1回メモ帳プログラミングで作った
メモ帳アプリをパワーアップさせていきます！


もちろん今回から参加でもすぐ作れますので、試しにプログラミングやってみたい！
という方も是非トライしてみて下さいね

チャンネル登録、高評価ボタンもよろしくお願いします！
プログラミング作って実践!ロックシステムアカデミー
大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です！「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます！ チャンネル登録よろしくお願いします！ プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/
https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A




前回の最終コード
<!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>


今回から参加の方は、先にAPIという物を取得して来て欲しいので
前回の動画を見ながらhttps://openweathermap.org/にアクセスして下さい



今回の最終目標はこんな感じのアプリになります
前回よりアプリらしくなってきました！3時間ごとの天気がちゃんと表示されてますね




task①：時間の取得

 $('#today_time').text('日付：' + month + '月' + date + '日' + '　'+ time + ':00'); // 取得した月日

時間の取得で困りそうな部分のコードです
'日付：'のような両端にある点は（シングル）クォーテーションと言います



task②：３時間ごとの天気データの取得

ここが一番大変な部分ですね
HTMLで表示する部分が増えるとJQueryの記述も増えていきます
お天気アプリのサーバーに送った内容を見てみるとcnt: 8となっており【取得する数】が増えると実際に表示される 天気の数も多くなってることに気づきますね


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>お天気アプリ</title>
  </head>

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

    <div id="0_monthdate"></div>
    <div id="0_time"></div>
    <div id="0_description"></div>
    <div id="0_temp"></div>
    <div id="0_icon">
      <img src="">
    </div>

    <div id="1_monthdate"></div>
    <div id="1_time"></div>
    <div id="1_description"></div>
    <div id="1_temp"></div>
    <div id="1_icon">
      <img src="">
    </div>

    <div id="2_monthdate"></div>
    <div id="2_time"></div>
    <div id="2_description"></div>
    <div id="2_temp"></div>
    <div id="2_icon">
      <img src="">
    </div>

    <div id="3_monthdate"></div>
    <div id="3_time"></div>
    <div id="3_description"></div>
    <div id="3_temp"></div>
    <div id="3_icon">
      <img src="">
    </div>

    <div id="4_monthdate"></div>
    <div id="4_time"></div>
    <div id="4_description"></div>
    <div id="4_temp"></div>
    <div id="4_icon">
      <img src="">
    </div>

    <div id="5_monthdate"></div>
    <div id="5_time"></div>
    <div id="5_description"></div>
    <div id="5_temp"></div>
    <div id="5_icon">
      <img src="">
    </div>

    <div id="6_monthdate"></div>
    <div id="6_time"></div>
    <div id="6_description"></div>
    <div id="6_temp"></div>
    <div id="6_icon">
      <img src="">
    </div>

    <div id="7_monthdate"></div>
    <div id="7_time"></div>
    <div id="7_description"></div>
    <div id="7_temp"></div>
    <div id="7_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) {
         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: 8, // 取得する数
            units: 'metric', // 摂氏
            lang: 'ja' // 言語
           }
         })

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

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

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


task③：CSSについて
CSSとはズバリ！WEBサイトを綺麗に整えてくれるコードです！
絵を描いたりデザインが好きな方はどっぷりハマっちゃいますｗｗ
このコードをお天気アプリのHTMLに反映して、おおっ！となったらご自身で調べてみて下さい
今回はCSSをコピペで作りますが、がっつり解説する動画も出せたらなと考えております

①フォルダの中にメモ帳を入れて名前を変更。special.cssという名前に編集してCSSファイルを作ります
②CSSファイルに下記の”お天気CSSコード”をコピー＆ペーストして上書き保存してください

お天気CSSコード
@charset "UTF-8";

main .container {
    margin: 0 auto;
    max-width: 1000px
}

header .container {
    margin: 0 auto;
    background-color: #009688;
    max-width: 800px
}

.test {
    text-align: center; /* 画面中央に表示する*/
    color: blue; 　　　 /* 文字が色に青色になる*/
}

.place {
    text-align: center; 
}

.now {
    margin: 0 auto;
    margin-bottom:15px;
    background-color: #afeeee;
    border: 2px solid #ccc;
    min-height: 250px;
    text-align: center;
    max-width: 300px
}

.box {
    height: 250px;             
    width: 250px;               
    margin:  10px;              
    background-color: #afeeee;
    text-align: center;              
}
.box_container{
    margin: 0 auto;
    max-width: 1000px
    text-align: center;
    display: flex;
    justify-content: center;
}




CSSをファイルが出来ましたか？では
下記のお天気API完成コードのHTML部分を見て下さい
CSSを反映させるためにHTMLのコードが少し変化しましたね！

今回はコードが変わることが分かればOK
また、先ほどのJquery反映コードをまとめました。コードの見た目がだいぶすっきりしましたね
最後に下のお天気API完成コードをメモ帳にコピー＆ペーストしてお天気CSSコードと同じフォルダ内でhtmlファイルを開いてみて下さい


お天気API完成コード
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>お天気アプリ</title>
    <link href="special.css" rel="stylesheet">
  </head>

 <body>
   <header>
    <div class="container">
    <h1 class="test">お天気アプリ</h1>
    </div><!-- /.container -->
   </header>
  

  <div class="container">
     <h2 class="place"></h2>

     <div class="now">
      <div id="0_monthdate"></div>
      <div id="0_time"></div>
      <div id="0_description"></div>
      <div id="0_temp"></div>
      <div id="0_icon"><img src=""></div>
     </div>

   <div class="box_container">
    <div class="box">
     <div id="1_monthdate"></div>
     <div id="1_time"></div>
     <div id="1_description"></div>
     <div id="1_temp"></div>
     <div id="1_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="2_monthdate"></div>
     <div id="2_time"></div>
     <div id="2_description"></div>
     <div id="2_temp"></div>
     <div id="2_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="3_monthdate"></div>
     <div id="3_time"></div>
     <div id="3_description"></div>
     <div id="3_temp"></div>
     <div id="3_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="4_monthdate"></div>
     <div id="4_time"></div>
     <div id="4_description"></div>
     <div id="4_temp"></div>
     <div id="4_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="5_monthdate"></div>
     <div id="5_time"></div>
     <div id="5_description"></div>
     <div id="5_temp"></div>
     <div id="5_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="6_monthdate"></div>
     <div id="6_time"></div>
     <div id="6_description"></div>
     <div id="6_temp"></div>
     <div id="6_icon"><img src=""></div>
    </div>

    <div class="box">
     <div id="7_monthdate"></div>
     <div id="7_time"></div>
     <div id="7_description"></div>
     <div id="7_temp"></div>
     <div id="7_icon"><img src=""></div>
    </div>
   </div><!-- /box_container -->

  </div><!-- /.container -->
 </body>

    
    <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) {
         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: 8, // 取得する数
            units: 'metric', // 摂氏
            lang: 'ja' // 言語
          }
        })

        // API通信成功時
        .done(function(data) { 
            console.log(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 time = dateTime.getHours(); // 時間
                const temp = Math.round(response.main.temp); // 気温
                const description = response.weather[0].description; // 天気の詳細
                const icon = response.weather[0].icon; // 天気アイコン名
    
                $('#'+ index +'_icon').children('img').attr
                  ('src', 'http://openweathermap.org/img/wn/' + icon + '@4x.png'); // 天気アイコンの場所
                $('#'+ index +'_time').text('日付：' + month + '月' + date + '日' + '　'+ time + ':00'); // 取得した月日
                $('#'+ index +'_description').text('天気：' + description); // 天気の詳細
                $('#'+ index +'_temp').text('気温：' + temp  + '°C'); // 気温
    
              });
        })
          // APIとの通信が失敗した場合
          .fail(function() {
          alert('APIから情報を取得できませんでした。');
        })
       }

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


出来ない方はお天気APIキーの入力を忘れてる可能性があります
お疲れ様でした！では、また来週！




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

株式会社ロックシステム

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

他の記事へ

CATEGORY