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ユーザーの未読メッセージ数を取得してみるプログラムでした。