JS.14 Slack用の文字スタンプを作る

2019-07-22(Mon) | tags: tools

Google Chrome の開発者ツールを使うことで、各サイトのネットワーク通信の中身（どのようなパラメータでリクエストを投げ、どのようなリスポンスが返ってきているのか）を調べることができます。

その内容を調べることで業務を効率化したり、スクレイピングを行なったりするのですが、今回はこの知識を応用して、静的サイトにも関わらずSlackのスタンプを作るという機能を実現したいと思います。

作ったもの

Special thanks go to "絵文字ジェネレーター - Slack 向け絵文字を無料で簡単生成"




コード

html

<div class="display">
  <img id="emoji" src="https://dashboard.snapcraft.io/site_media/appmedia/2019/01/Snapcraft_256x256.png" width="128" height="128" onerror="this.src='https://dashboard.snapcraft.io/site_media/appmedia/2019/01/Snapcraft_256x256.png';" />
</div>
<div class="container">
  <div class="col">
    <label for="text">text</label><br>
    <input id="text" type="text" placeholder="例）熱盛">
  </div>
  <div class="col">
    <label for="font">font</label><br>
    <select id="font" size="6">
      <option selected value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
      <option value="mplus-1p-black">M+ 1p black</option>
      <option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
      <option value="ipamjm">IPAmj明朝</option>
      <option value="aoyagireisyoshimo">青柳隷書しも</option>
      <option value="LinLibertine_RBah">LinLibertine Bold</option>
    </select>
  </div>
  <div class="col-color">
    <label for="color">text color: </label><input type="color" id="color" value="#EC71A1"><br>
    <label for="bgcolor">background color: </label><input type="color" id="bgcolor" value="#FFFFFF">
  </div>
</div>

JavaScript

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLVideoElement) {

      // ページ上の要素を取得
      var emoji = document.querySelector('#emoji');
      var text  = document.querySelector('#text');
      var font  = document.querySelector('#font');
      var color = document.querySelector('#color');
      var bgcolor = document.querySelector('#bgcolor');

      // フォーム内の要素に変更があると発火
      text.addEventListener('change', function (e) {
        changeSRC(emoji, text, font, color, bgcolor);
      });
      font.addEventListener('change', function (e) {
        changeSRC(emoji, text, font, color, bgcolor);
      });
      color.addEventListener('change', function (e) {
        changeSRC(emoji, text, font, color, bgcolor);
      });
      bgcolor.addEventListener('change', function (e) {
        changeSRC(emoji, text, font, color, bgcolor);
      });
    }
  }
);
var changeSRC = function(emoji, text, font, color, bgcolor){
  const base = "https://emoji-gen.ninja/emoji_download?align=center&size_fixed=false&stretch=true&public_fg=true&locale=ja";
  var url = base + "&text=" + text.value + "&font=" + font.value + "&color=" + color.value.substring(1,7) + "FF" + "&back_color=" + bgcolor.value.substring(1,7) + "FF";
  emoji.setAttribute('src', url)
  //download.setAttribute('href', url)
}

css

.display{
  text-align: center;
  margin: 20px auto;
}
.container{
  text-align: center;
  width: 100%;
}
.col{
  font-size: 1.2em;
  font-weight: bold;
  display: table-cell;
  width: 33%;
  padding: 8px;
}
.col-color{
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  display: table-cell;
  width: 33%;
  padding: 8px;
}
label {
  color: #80273F;
}
#text {
    border: 0;
    border-bottom: 1px solid #d1d1d1;
    font-size: 1.2em;
    padding: 8px;
}
other contents
social