# メールのステータスごとに背景色をつけたい

**URL:** <https://community.cybozu.dev/t/topic/7697>\
**Category:** Garoon カスタマイズ\
**Created:** [2023 年 6 月 30 日午前 12:58 UTC](https://community.cybozu.dev/t/topic/7697 "2023-06-30T00:58:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kino](https://avatars.discourse-cdn.com/v4/letter/k/65b543/32.png) [@kino](https://community.cybozu.dev/u/kino)\
**Post date:** [2023 年 6 月 30 日午前 12:58 UTC](https://community.cybozu.dev/t/topic/7697/1 "2023-06-30T00:58:47Z")

</div>

個人メール、グループメールの受信ボックス内のメールについて、処理済や未処理といったステータスごとに背景色を設定するために何か良い方法はありますか？  
javascriptやCSSから設定できればと思っています。

以下、chatgptで作成したコードになります。稼働はできておりません。

grn.API.mail.getMail(mailId).then(function(mail) {  
var status = mail.status;  
var mailBody = document.querySelector(‘.mailBody’); // メール本文部分の要素を取得

```
// ステータスによって背景色を変更
switch(status) {
    case "UNPROCESSED":
        mailBody.style.backgroundColor = "yellow"; // 未処理の場合は背景色を黄色に
        break;
    case "PROCESSED":
        mailBody.style.backgroundColor = "green"; // 処理済の場合は背景色を緑に
        break;
    // 必要に応じて他のステータスについても色を設定
    default:
        break;
}

```

});

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2023 年 6 月 30 日午前 8:11 UTC](https://community.cybozu.dev/t/topic/7697/2 "2023-06-30T08:11:20Z")

</div>

> [@kino](#):
>
> grn.API.mail.getMail

ChatGPTで書いたコードとのことですが、

「JavaScriptやCSSが分かる、かつ、ドキュメントに書いてあることを理解できる」

という方でないとChatGPTでGaroonのカスタマイズ用JS書いてもらうのは厳しいかもですね💦  
どこを直せばいいかわからないという場合は、JavaScriptやGaroonカスタマイズの勉強をおすすめしたいです。

・・・という私も、Garoon詳しくないのですが、知ってる範囲やドキュメント見て分かる範囲でお答えできればとおもいます👀

@kino さんがやりたいことはできないかもですが＾＾；  
参考になればとおもいます。

### イベントについて

↓こちらのドキュメントによると、

> **[イベント](https://cybozu.dev/ja/garoon/docs/js-api/mail/event/)**
>
> Garoonメールのイベントです。

メールアプリのJavaScriptのイベント（JavaScriptが動き始めるトリガー）となるのは

- メールの詳細画面を表示したとき
- メールの作成画面を表示したとき
- メールの返信画面を表示したとき

のようですね。

### メールの値の取得について

また、メールの値を取得するJavaScript API は  
↓こちらのドキュメントによると。。。

> **[メールの値を取得する](https://cybozu.dev/ja/garoon/docs/js-api/mail/get-mail/)**
>
> 現在開いているメールの値を取得します。

- メールの作成画面
- メールの再送信画面
- メールの返信画面
- メールを全員に返信する画面
- メールの転送画面
- 下書きの編集／送信画面

でしか使えないみたいです。

### 取得したメールの値の内容

メールの値を取得したとして、ステータスはわからないみたい。

> **[メールオブジェクト](https://cybozu.dev/ja/garoon/docs/overview/mail-object/)**
>
> Garoon REST APIとGaroon JavaScript APIで取得できるメールオブジェクトの詳細です。

### 直接クラス名指定？

なので、  
ディベロッパーツールで色を変えたい要素を探して、  
JavaScriptやCSSでクラス名指定で色を変えたらいいのかなと思います。

例えばこんな感じのCSSファイル描いたとしたら、

```css
.read_grn{
  background-color: #ff66ff !important;
}

```

↓こんなこんな感じになります。

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/04585aec777d1f75af57a32bb9281bb64db743b5.png)

どこの色を変えたいのかはわからないですが、  
ディベロッパーツールで色を変えたい要素を探して「read\_grn」というクラス名だったらその色を指定するようにするという感じです。

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/0aeb96caba433cb2bec5115110c800325c6046be.png)

でもこのやり方は、Garoonのアップデートなどで動かなくなる可能性ありなので、  
もしこれで上手く行ったとしても  
今後定期的にメンテし続けることができる  
じゃないと使えないしおすすめはできないかなぁと思います。

### 勉強頑張ってください💪

ともかく、  
ChatGPTは上手く誘導したり、間違いをしてあげないと正しいコードを書いてくれないので  
プログラミングはもちろん、GaroonのAPIの知識がある上で使うことをおすすめしたいです。

ぜひ勉強頑張ってみられてください💪

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 10 月 3 日午前 12:31 UTC](https://community.cybozu.dev/t/topic/7697/3 "2023-10-03T00:31:22Z")

</div>

クローズされました: 2023 年 10 月 3 日午前 12:31 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。