ScratchAPIの中にユーザーの未読メッセージ数を取得できるものがあったのでそれを使って遊んでみます。

完成形

完成形
ユーザー名を入力して「OK」をクリックすればユーザーのアイコンと名前と未読メッセージ数が出てきます。

ソース

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>ScratchMessages</title>
  </head>
  <body>
    <h1 class="cent">Scratch messages</h1>
    <div class="content">
      <form onsubmit="return false;" id="user_form">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="user_name">
          <label class="mdl-textfield__label" for="user_name">Your user name</label>
          <span class="mdl-textfield__error"></span>
        </div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="color: white;" id="user_form_submit">
          OK
        </button>
        <br />
        <div id="progress" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active" style="display: none;"></div>
      </form>
      <div id="messages" style="display: none; text-align: center;">
        <img class="user_icon">
        <h4><span class="user_name"></span></h4>
        <div style="padding: 32px; text-align: center;">
          未読メッセージ数：<strong><span class="fread_messages"></span></strong>件
        </div>
      </div>
    </div>

    <script src="main.js"></script>
  </body>
</html>

一応MaterialDesignLiteを読み込んでいます。個人的にデザインが好きなので。

style.css

.cent{
  text-align: center;
}

body{
  background-color: #25aff4;
  color: white;
}

.content{
  text-align: center;
  width: 100%;
}

.content form{
  text-align: center;
}

.hide{
  display: none;
}

a{
  color: white;
}

背景はScratchの感じを出して水色にしてます。

main.js

var message_count;
var user_name;
var user;

$(function(){
  $('#user_form_submit').on('click',function(){
    user_name = $('#user_name').val();
    $('#user_name').prop('disabled',true);
    $('#user_form_submit').prop('disabled',true);
    $('#progress').show();
    output(user_name);
    $('#user_name').prop('disabled',false);
    $('#user_form_submit').prop('disabled',false);
    $('#progress').hide();
  });
});

function output(name){
  $('#messages').hide(200);
  $.ajax({
    url: "https://api.scratch.mit.edu/proxy/users/"+name+"/activity/count",
    success: function(e){
      message_count = e.msg_count;
      $.ajax({
        url: "https://api.scratch.mit.edu/users/"+name,
        success: function(e){
          user = e;
        //  $('#user_form').hide(100);
          $('.user_name').html('<a href="https://scratch.mit.edu/users/'+name+'/" target="_blank">@'+user.username+'</a>');
          $('.fread_messages').text(message_count);
          $('.user_icon').attr('src',user.profile.images["90x90"]);
          $('#messages').show(200);
        }
      });
    },
    error: function(e){
      $('#user_name').prop('disabled',false);
      $('#user_form_submit').prop('disabled',false);
      $('#progress').hide();
    }
  });
}

汚い・・・読みにくい・・・
output()関数では引数にユーザー名を受け取って画面に表示させます。
jQuery便利ですよね。

「OK」ボタンがクリックされたら入力されたユーザー名をoutput()に渡してあげます。
jQuery便利ですよね(2)。

以上Scratchユーザーの未読メッセージ数を取得してみるプログラムでした。

ScratchAPIを叩いてユーザーの未読メッセージ数を取得してみる

完成形

ソース