[ナノ] 選択式拍手の作り方

公開: 2025.11.29

ナノで拍手ボタンで送信するメッセージを選択式にする方法のメモです。

拍手コメントを選ぶ→拍手送信

・他のサイトでも紹介されている方法です
・下記のコードはコピペ・改変・再配布等OKです。

■拍手ボタン（動作を確認できます）

■アンケートやリクエストにも使えるかも

○どんなテンプレートを増やしてほしいですか？

事前準備

・ナノの機能である拍手を作り、拍手ページのURLを確認しておきます
（例）https://nanos.jp/＜サイトID＞/clap/1/

→使用時はコードの1行目「★先に確認した拍手URLをここに置く」という部分を拍手ページURL「https://nanos.jp/＜サイトID＞/clap/1/」に書き換えて下さい。

■HTML/Javascript

 
      <!-- 選択式拍手を置きたい場所に置く -->
<form action="★先に確認した拍手URLをここに置く" method="POST" accept-charset="Shift_JIS">
<select>
<option value="読んだよ">読んだよ</option>
<option value="面白かったよ">面白かったよ</option>
<option value="続き待ってるよ">続き待ってるよ</option>
</select>
<input type="hidden" name="Message" value="1">
<input type="button" value="送信" onclick="selectClap(this.form)">
</form>
<!-- 選択式拍手ここまで -->

<!-- 拍手を動かすためのJavascript -->
<!-- 以降はページの一番下に配置する -->
<script>
function selectClap( form ){
var select = form.getElementsByTagName("select")[ 0 ];
var input = form.getElementsByTagName("input")[ 0 ];
input.value = select.value;
form.submit();
}
</script>
<!-- Javascriptここまで -->

仕組みの簡単な説明

・「送信」ボタンを押すと、onclick="selectClap( this.form )"によって、JavaScriptのfunction selectClap()が機能します。
・拍手の内容は<option value="拍手に送信される文字">表示される文字</option>となっています。文字は自由に変更できます。

呟き

特に意識せずに作ったのですが、ナノの拍手ってナノ以外のサイトに貼っても機能するんですね。上記の拍手（デモ）を送信すると拍手ありがとうページに移動します。