難でもアリ: Google Apps ScriptのGmailガジェット作成.1

Google SitesにGmail表示を行いたい
けど公開されているガジェットが動作しない・・
そこで前回のGmailの取得を利用して（前回はこちら） Google SitesのGmailの未読の有無がわかるガジェットを作成します。

ようは↑iOSでよくみるバッジ（バッヂ？）的のを作ります

【準備】

Google サイトを作成しておいて下さい

Google ドライブにGoogle Apps Scriptアプリを追加して下さい

※下図は既に追加されています

Google Apps Scriptを新規作成
Google ドライブ＞新規＞その他＞Google Apps Script

「空のプロジェクト」を選択します

ファイル＞新規作成＞HTMLファイルを選択

ファイル名を入れてOKボタンを押します

ここでは「HogeGmail」にしました

【コード.gs】

まず先ほど作成したHTMLをdoGetで呼び出します

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('HogeGmail');
}

メール取得を関数化しておきます

前回投稿とほぼ同じですが最低限にしてます

function getMail(){
  var datReturn =new Object();
  try{
  //スレッド数
  var thds = GmailApp.search("is:unread", 0, 100);
  //未読件数
  var i = 0;
  var cFrom;
  var searchchar = Session.getActiveUser().getEmail();
  for(var n in thds){
    var thd = thds[n];
    var msgs = thd.getMessages();
    for(m in msgs){
      var msg = msgs[m];
      cFrom =msg.getFrom();
      //自分が出した返信メールは除外する。
      var searchidx = cFrom.search(searchchar);
      if (searchidx <= 0 && msg.isUnread() === true){
      i++;
      }
    }
  }
  datReturn['count'] = i;
  return(datReturn)
  } catch(err){
   Logger.log(err)
   datReturn['count'] = 0;
   return(datReturn)
  }
}

コード.gsはこれで終わりです！

【HogeGmail.html】
以下は必要に応じて調整が必要

CSS

td {
text-align: center;
}
.title {
font-size:11px;
margin:0;
padding: 0;
line-height:1em;
}
.wrapper {
  overflow: hidden;
  line-height:1em;
}
.icon .badge {
  position: absolute;
  top: 1px;
  left: 25px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.icon .badge .inner {
  display: block;
  position: relative;
  margin: 1px;
  font-size:12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  line-height: 19px;
  text-align: center;
  /* FLAT */
  background:#FE2E64;
}

body内HTML

各自アイコンは準備してください
ここではアイコンサイズは32pxですが、cssを弄ればいろんなサイズ対応は可能です。

<body onLoad="setInterval('doReload()',1000*60*15)">
  <div id="icondata">
  <table align="left" border="0" cellpadding="5" cellspacing="1">
  <tbody>
  <tr>
  <td>
  <div class="wrapper">
  <a href= "https://mail.google.com/mail/u/0/#inbox" target="_blank">
  <img src="../googlemail-32.png">
  
  <div id="CntRep"></div>
  <div class="title">Gmail</div>
  </a>
  </div>
  </td>
　</tr>
  </tbody>
  </table>
  </div>
</body>

一旦ここまでとします。
あとはJavaScriptとガジェットへの追加方法となりますが
次回の投稿とします。

2015年6月5日金曜日

Google Apps ScriptのGmailガジェット作成.1

0 件のコメント:

ラベル