shinyをjQueryで拡張する

SlackAPIのトークンが色々データ持ってて面白そうなので、扱えるようになりたい!って思って
取り敢えずトークン使いたくてメッセージ送信機作ってみた。
指定したslackのチャンネルに入力したメッセージを送れるよ。
これで匿名発言出来るね!:sunglasses:

こんな感じになります↓

■ webアプリ画面

 2017-12-15 20.57.17.png

■ slackに送信されたやつ

 2017-12-15 20.55.00.png

slackのトークンを取得しよう

legacy-tokensに行って
送りたいチャンネルがあるワークスペースのトークンを作ってコピーしましょう!
Image uploaded from iOS (2).png

コード書くぞー!!

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Slack Sample</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <section>
        <p>匿名で発言しちゃお(˘︶˘*)</p>
        <div class="slack-send">
            <form method="post">
                <input type="text" name="inputText" placeholder="なんて送る?">
                <button class="slack-submit" type="button" name="button">送信!</button>
            </form>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
common.css
@charset "utf-8";
/* resetCSS 適当に入ってます */
section{
    margin-top: 50px;
}
p{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", verdana, arial, helvetica, sans-serif;
    margin: 10px 20px;
}
.slack-send input{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", verdana, arial, helvetica, sans-serif;
    width: 285px;
    border: solid 1px #ccc;
    border-radius: 4px;
    margin: 10px 20px;
    padding: 5px 10px;
    font-size: 20px;
    height: 45px;
}

.slack-send button{
    height: 45px;
    display: inline-block;
    font-size: 15px;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #c69;
    border: solid 2px #c69;
    border-radius: 3px;
    transition: .4s;
}
.slack-send button:hover {
    background: #c69;
    color: white;
}
app.js(jQuery)
$(function () {
    $('.slack-submit').on('click', function () {
        var url = 'https://slack.com/api/chat.postMessage',
            param = $(this).prev().val(), 
            // prev():指定した要素の兄弟要素でマッチした要素を選択。
            // val():指定した要素のvalue属性の値を取得。
            data = {
            token: '{各自のslackのトークン}',
            channel: '#random', // 送りたいチャンネル名
            username: '匿名希望さん', // 表示したい名前
            text: param
        };

        $.ajax({
            type: 'GET',
            url: url,
            data: data,
            success: function (data) {
                alert('送ったよ');
            }
        });
    });
});

こんな感じで書きました。
でもきっともっと良い書き方とかあるのかな。
ほんとはアラートのところ、
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶)
に書かれてるように書きたかったんだけど結局使い方よく分からなかったので、もうちょっと頑張ってみる:muscle:

[紹介元] jQueryタグが付けられた新着投稿 – Qiita shinyをjQueryで拡張する

  • コメント

    1. 匿名希望
      2018/01/23(火) 05:05:46

      アナルを破壊してください
      僕は超変態淫乱マゾです。身長:171*体重:65*年齢:28です。
      緊縛、蝋燭、毒物浣腸、焼けた鉄棒挿入、限界拡張で括約筋断裂、アナルカットなどご自由に拷問してください。肛門が機能できなくなるまで破壊してください。
      冷やかしなしでお願いします。

    2. 匿名希望
      2018/01/23(火) 05:05:46

      お札「新聞拡張団調伏」(博麗霊夢/ダEX-1)

    3. 匿名希望
      2018/01/23(火) 05:05:46

      【柳原大門町】(やなぎわらだいもんちょう)
      現:千代田区神田花岡町1番地1号
      種類:町丁
      期間:元禄十年~明治二年
      元地(大門町)は浅草寛永寺にあったが拡張により当地と下谷に代地が与えられた。北と南は神田相生町、西は神田六軒町、東は神田八軒町。
      明治二年神田亀住町の一部となる。

    4. 匿名希望
      2018/01/23(火) 05:05:46

      正雪「拡張子?中国の偉人か何かですか?」

    5. 匿名希望
      2018/01/23(火) 05:05:46

      ゲーム自体は無料配信されているが、コンティニューやスタミナ回復に必要な魔法石、レアガチャや使用可能モンスターの上限の拡張などに必要なアイテムが有料なアイテム課金となっている(F2P)。

    記事に戻る

関連記事