へぇ ボタン。 HTML5 input で作る 「へぇボタン」

幸せになれる「へぇボタン」活用法

へぇ ボタン

実際のサンプルは下記に。 現在、最新版の 、、および では動くと思います。 あと手持ちの iOS 6 Safari と、 搭載 Chrome では動作確認しました。 他のスマートフォンとかは知らない。 現在 、2013年 6月 25日に正式リリース予定の、Firefox 22 以降であれば動作します。 HTML5 の audio 要素による、音声再生の部分では、Firefox の性能がいいので、Firefox 以外のブラウザだと、ボタンを連打したときに、音声がうまく再生されないんですよね。 再生が遅れたりもするし。 なので、本当は Firefox 22 以降で確認してもらう方がいいんですが。 The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state. Note: In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string. から引用 数値を表す文字列をセットするための入力コントロールを表します。 ただし、正確な値が重要ではない入力コントロールになります。 サンプルの解説 ということで解説です。 まずは、へぇボタンのソースコードから。 とっても単純。 で、次に基本的なスタイルの指定ですが、. また、あとで背景を設定したりするために、縦横サイズも指定してあります。 音声再生は HTML5 audio 要素で 音声再生は HTML5 の audio 要素でやります。 「へぇ~」 の音声ファイルを mp3 形式で用意し、下記のように audio 要素で配置します。 この audio 要素自体は display: none; しちゃってもいいんですが、再生されていることがわかりやすいように表示させています。 audio 要素に対応したブラウザでは「へぇ」の音声ファイルの再生が可能です。 使用している JavaScript 全体でも大したコードじゃないので、まずは全部下記に記載して、個別に解説していきます。 load ; audio. removeClass. 次に、音声再生の処理ですが、ここも抜き出すと下記のようになります。 play ; だけでいいんですが、それだとファイルの再生が終わるまで次の再生が行われいないため、音声ファイルの再生が終わるのを待ってボタンを押さないと、その間、「へぇ~」 って言ってくれなくなってしまいます。 なので、クリックされるごとに、 audio. load ; してから、 audio. play ; することで、再生終了を待たずに次の音声を再生します。 この再生に関して、Firefox はよくできていて、次の音声を再生しても、前の音声を最後までちゃんとオーバーラップして鳴らしてくれるんですが、Chrome とか、他のブラウザだと、次の音声を再生開始するときに、前の音声をキャンセルしちゃうので、いい感じにならないんですよね。 ゲージの増加は背景画像で これをどうしようか迷ったんですけど、簡単に背景画像で対応しました。 png) という 2枚の背景画像を重ねて配置し、background-position プロパティでライトにあたる背景画像の位置を動かすことで表現しました。 png) の位置を記述しておいて、ボタンを押す度に class 属性の値を変えて、表示を切り替えていくという方法です。 CSS は下記のように単純。 range と、その子要素である p 要素に、上記の通り 2枚の背景画像を設定します。 png no-repeat center bottom;... png no-repeat center bottom;... png」 が透けて見えている状態になります。 つまりこれが、「満へぇ」 の状態ですね。 あとは、後述する JavaScript で、 div. png」 の位置を指定しておいてあげます。 sample renge. sample renge. sample renge. 以下略... 該当部分だけ抜き出してみると下記のような感じです。 removeClass. 実際に動作するサンプルは下記で確認できます。 上記サンプルのファイル一式は下記から落とせますので適当にいじってみてください。 本当は、20回以上はボタンを押せないような処理とか加えた方がよいですが、今回はそこまでやってません。 ちなみに 「へぇ」 の音声ファイルは、から音声を抽出させてもらい、MP3 形式に変換ましたが、著作権的に微妙な感じもしつつもフェアユースの範囲ってことでそこはひとつよしなに。 関連エントリー• 参考リンク•

次の

幸せになれる「へぇボタン」活用法

へぇ ボタン

そう、これだ。 「えっ、こんな商品がでるんだ!」と驚いただろうか? 私は驚きを通り越して「感動」を覚えたのだが。 ちなみに、肌身離さずに「へぇボタン」を持ち歩きたい!という人には こんな商品だって発売される。 発売予定は、2003年11月7日だという。 街中のおもちゃ屋さんデパートでは、店頭での問い合わせが相次ぎ、 意外とあっさりと品切れになるのでは?という噂も飛び交う。 欲しい!! と叫んだら、会社の同僚から思い切り馬鹿にされた。 「到着した日に嬉しくて30分ほど『へえへえ』ってやったら、すぐ飽きるってば。 あとは、単に邪魔なおもちゃになるだけよ。 」 本当にそうだろうか? FLASH版の「へえボタン」があるというので、まずはそれで試してみることに。 心の中の何かをくすぐるような「へぇ」音だ。 何度もリセットして、20回「へぇ」とやってしまう。 そこで、真剣に考えることにした。 もしも、「 へえボタン」があったら、 一体、どんな風に活用するのか・・・を。 まあ、間違いなくこれが一番オーソドックスな使い方だろう。 茶の間のテーブルの上に、テレビのリモコンやなべ敷、 換金されないまま放置された末尾番号当たりの宝くじなんかと一緒に、 いつもこれがころがっているのだ。 「目玉の親父は寝る時、目をつむっている」 「へぇ、へぇ、へぇ、へぇ」 こんな感じだ。 それに対して、高校生の長女が反応する。 「ええ!?たった4つ?それって少なくない?」 「そっかなあ、こんなもんだろ。 それよか、さっきの魚の問題のほうが・・・」 なんて、ほのぼのファミリーな会話が始まるのだ。 黙々と携帯メールを打ち続ける思春期兼反抗期の娘との間の深い溝も、 この「 へぇボタン」が埋めてくれるかもしれない。 喧嘩になると、あれほど頭の回転も口のすべりも格段によくなるのはなぜだ? あの能力を、他に生かしたらすごいと思うのだが・・・と思う男性陣も多いだろう。 「あなたは、いつもそうやって知らん振りばかりしているけど、 来月からは、ひろしも私立高校にあがって、出費が月5万は増えるのよ!」 「へぇ、へぇ」 「この間だって、玄関のところが雨漏りして、 『週末に見ておくよ』って言ったのあなたじゃない!」 「へぇ」 「なのにあなたってば、また朝から晩まで駅前のパチンコ。 近所の人も噂しているのよ。 『家が居心地悪いんじゃない?』なんて」 「へぇ、へぇ、へぇ、へぇ、へぇ」 「あなた! ちゃんと聞いてるの!?」 どっかのタイミングで相手が我慢できずに笑ってくれたら幸せですが、 怒りのガソリンに火がついちゃう可能性もありますね。 いきなり固い話になるが、 米国のドラマや映画でよく登場する裁判の陪審員制度を 日本でも導入しようという動きが様々なところで起こっている。 陪審員制度とはどんなものか。 きちんと説明すると長くなるが、簡単に例をあげればこういうものだ。 + + + 陪審員は市民の中から公正に選ばれる。 陪審員としての心構え、評決をだすにあたっての姿勢などについて講座を受けた後、 ひとりに一個ずつ「 へぇボタン」が手渡される。 「被害者が殺害されたと思われる時刻から30分前の17時50分、 原告は東京都千代田区のモスバーガー麹町店にて、ハンバーガーを注文しておりました。 このことは同店のバイト店員、花崎 はな子が証言しています。 」 陪審員A 「へぇ」 「そのハンバーガーは、限定発売で話題をよんでいる『匠味』というものです。 「たく」は巨匠の「匠」、「み」は味と書きます。 同店では、毎日17時より販売を開始し、一日10個限定、そのため一時間ほどで売り切れるそうです」 陪審員A 「へぇ、へぇ」 陪審員C 「へぇ」 「この匠味は、注文を受けてから調理を始めるため、最低でも10分はかかります。 そのことから、原告が持っていたレシートの時刻は17時51分ですが、匠味を受取ったのは、 さらに10分以上後かと推測されます」 陪審員A 「へぇ、へぇ」 陪審員B 「へぇ、へぇ、へぇ」 「なお、この匠味は一個580円し、 パティも野菜も通常のハンバーガーとは比べ物にならないほどボリュームがありジューシーです。 作ったスタッフが、名前入りの手書きメッセージカードを添えて、客にだす仕組みとなっています。 参考資料として写真を持ってまいりました。 これです」 陪審員A 「へぇ、へぇ、へぇ、へぇ、へぇ、へぇ、へぇ、へぇ」 陪審員B 「へぇ、へぇ、へぇ、へぇ、へぇ」 陪審員B 「へぇ、へぇ、へぇ、へぇ、へぇ、へぇ、へぇ」 こうして、検察側・弁護側がそれぞれ主張を展開し、 最終的に「へぇ=納得」の数が多かったほうに軍配があがる。 この「 へぇボタン」の導入により、陪審員の直感に基づいた、 極めて中立的かつ明瞭で公正な裁判進行が実現したと評価される一方、 検察・弁護側双方が、むやみやたらとビジュアルに訴えようと、 写真やポスター、時には実写映像まで公判の場に持ち込むようになったことで、 従来よりも公判準備にかかる人員&経済的負担が増えたとの批判も一部であがっている。 ・・・ほんとかよ。 以前住んでいたアパートは壁が恐ろしく薄い上に、 建物の構造上、隣の住人の窓とこっちの窓が直角に接していた。 なもんだから、深夜になると、 若い男女が楽しくスポーツをしている時のあえぎ声が聞こえる。 楽しいスポーツというのは、どうやら快感をともなうらしい。 いや、別に聞き耳をたてているわけではないのだが。 本人達も声が近所に響き渡っていることが気になっているのか、 それともそういうものなのか、 途中で急に声は押さえ気味になって、 単にみしみし、きしきしという音だけが響き渡る。 (今考えても、本当に音筒抜けのアパートだったよなあ。 携帯がマナーモードになっていても、バイブの音が聞こえるくらい) しかし、声をだせないと、盛り上がりにかけるという人もいるだろう。 そんな時、声はとりあえず我慢しながら「 へぇボタン」を二人で活用するというのはどうだろう? マンネリ化したスポーツに刺激が加わるかも知れない。 「へぇ、へぇ」 「へぇ、へぇ、へぇ、へぇ」 「へぇ」 「へぇへぇへぇへぇへぇへぇへぇへぇへぇへぇへぇへぇ」 (連打) ・ ・ ・ 「へぇ」 「へぇ」 「へぇ、へぇ・・・」 楽しいと思うんだけどなあ。 (また馬鹿にされそう) 生活に潤いを、心に遊びが欲しい人のアイテム、 「へぇボタン」を入手したい!という方は、 やで予約受付け中だ。 今予約すれば、12月の忘年会&クリスマスパーティーにも間に合いそう。 【「へぇボタン」活用法、募集中】 私ならこう使う!というアイディアをお寄せください。 あまりに卑猥すぎるもの、犯罪を誘発するもの(どんなのだ?)など、公序良俗に反するものでないかぎり、当サイトにて紹介させていただきます。 謝礼はないです。 ごめんなさい。 ちなみに、「 へぇボタン携帯ストラップ」は注文しちゃいました。 へぇボタン携帯ストラップは人気殺到らしく在庫が少なくなっていて、 私の手元に届くのは11月中旬になるらしい。

次の

RaspberryPi, Arduino では飽き足らない人に贈る!『PICで作るへぇボタン』

へぇ ボタン

インスト• 透過・合成用• 打ち込み• ゲームミュージック• ゲーム• キャラクター• ポップ• 3D・CG• テクスチャ• VOCALOID• MIDI• ロック• 乗り物• カラオケ• 手描き• エレクトロニカ• オーケストラ• 生演奏• テクノ• オリジナルキャラクター• モノクロ• アンビエント• ジングル• クラシック• ボーカル• テキスト• バラード• 食べ物• ジャズ• アニメ調• アニソン• J-POP• ドット絵• アイキャッチ• トランス• メタル• ヒップポップ• オルゴール• フォーク• カントリー• アイドル• 吹奏楽• 水彩画• AOR• ぬりえ•

次の