【jQuery 超初心者】指定したslackのチャンネルにwebアプリから入力したメッセージを送ってみた #CSS

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

こんな感じになります↓

■ webアプリ画面

■ slackに送信されたやつ

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

legacy-tokensに行って
送りたいチャンネルがあるワークスペースのトークンを作ってコピーしましょう！

コード書くぞー！！

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 PGothic", verdana, arial, helvetica, sans-serif;
    margin: 10px 20px;
}
.slack-send input{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "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とか指定していたんだよ（追憶）
に書かれてるように書きたかったんだけど結局使い方よく分からなかったので、もうちょっと頑張ってみる