にゃ~~ん!

2016.10.18
にゃ~~ん!
ボタンを押したら「にゃ~ん」って鳴る。
それだけです!
こう言うページ(ソフト/サービス)も面白いかな。

連打も出来ますよ!

直接ページへアクセスする場合は、こちらのURLからとなります。


詳細とか、考え方とか
JavaScript、jQueryを利用して実現しています。
また、HTML5の<audio>タグを利用して音声・音楽ファイルの再生を実現しています。
オーディオファイルは、都度ロードするのではなく、BASE64で変換し、HTMLもしくはJavaScriptソース内に埋め込んでいます。こうすることで、ページの表示でロードが終わる様にしました。
なお、変換は、先日公開した「JavaScript BASE64 変換」で行えます。

BASE64にするとファイルサイズが大きくなりますが、一つのファイルで完結できるので良いかなと思います。
<audio>タグで、BASE64を使う場合は、src=""の中に、src="data:audio/mpeg;base64,~~~"という感じに挿入すると使えます。便利!


※ 音声は「CeVIO Creative Studio FREE」で作成しています。
※ 無料でご利用できます。
※ ブラウザに依存しますので、利用出来ないブラウザもあります。
※ スマホなど処理能力の低いハードウェアでは、連打がうまく動きません。


□ 関連記事
JavaScript BASE64 変換
「PSO2 ACスクラッチアイテムカタログ」作ってみた。
CSS3で文字をぶるぶる震わす!
background-image で比率を維持しながらレスポンシブ表示させる。
Facebook のソーシャルカウント数を取得する
大量のファイルを tar したい時のメモ
さくらインターネットの.mailfilterを使って、件名が英数字、記号のスパムに対策をしました。
パラメータ付URLを.htaccessでリダイレクトするメモ
[Add-on Stylish] Web版Twitterのタイムラインに表示される画像、プロモーションの表示を設定するStylishのCSS (暫定)
画像をクリックするとその場で拡大表示するようにしました。

コメント投稿フォーム

 

フィギュア

  • フリュー Trio-Try-iT Figure -ホロ・赤ずきんver. -
  • セガ 大室家 ちょこのせ プレミアムフィギュア“大室花子”
  • ぬーどるストッパーフィギュア -ホロ・ひまわりワンピースver.-
  • エルココ オーバーロード でふぉるむぷらす アルベド フルアクションデフォルメフィギュア
  • フリュー ぬーどるストッパーフィギュア -時崎狂三・水着ver.-
  • セガ 初音ミク Project DIVA MEGA39's Luminasta“ 初音ミク - エトワール”
  • バンプレスト ソードアート・オンライン ヴァリアント・ショウダウン ユウキ フィギュア
  • ギルドの受付嬢ですが、残業は嫌なのでボスをソロ討伐しようと思います ちょこのせ プレミアムフィギュア “アリナ・クローバー”
  • セガ 幻日のヨハネ -SUNSHINE in the MIRROR- Luminasta “ヨハネ”
  • タイトー 魔女の旅々 Coreful フィギュア イレイナ ~ニットセーターver.~ Renewal
  • 初音ミク Project DIVA MEGA 39's Luminasta “初音ミク-シュープリーム”
  • 魔女の旅々 ぬーどるストッパーフィギュア - イレイナ -
  • 魔女の旅々 Coreful フィギュア イレイナ~ドレスver.~
  • マックスリミテッド ゆらゆらヘッドシリーズ、ナンバー76 初音ミク NT
  • フリュー けいおん! Trio-Try-iT Figure -中野梓-
  • セガ ソードアート・オンライン オルタナティブ ガンゲイル・オンラインII Luminasta“レン”
  • バンプレスト ギルドの受付嬢ですが、残業は嫌なのでボスをソロ討伐しようと思います アリナ・クローバー フィギュア
  • タイトー Angel Beats! Aqua Float Girls フィギュア 立華かなで
  • セガ TVアニメ「その着せ替え人形は恋をする」Luminasta“喜多川海夢”-リズ-
  • タイトー ヨスガノソラ Coreful フィギュア 春日野穹~おすましver.~

最近

  • [ホビー予約情報] V.F.G. マクロスF VF25S スーパーメサイア / RPG01SP サキュバス ラスティア フェーズ・ツー 他
  • [ホビー予約情報] フェイ・ヴァレンタイン バニーVer. / ホイホイさん NEW EDITION / ホイホイさん ~重戦闘Ver.~ NEW EDITION / 骸音シーエ 15th Memorial 他
  • フリュー Trio-Try-iT Figure -ホロ・赤ずきんver. -
  • セガ 大室家 ちょこのせ プレミアムフィギュア“大室花子”
  • [ホビー予約情報] ナースシリーズ ティアーユ・ルナティーク / サブロー先生オリジナルイラスト 黒ビキニさん 他
  • ぬーどるストッパーフィギュア -ホロ・ひまわりワンピースver.-
  • [ホビー予約情報] ARCTECH可動シリーズ ラム&レム 他
  • エルココ オーバーロード でふぉるむぷらす アルベド フルアクションデフォルメフィギュア
  • [ホビー予約情報] 乾心寿、乾紗寿叶、喜多川海夢 プリティメイドVer. / カレンチャン 勝負服Ver. / POP UP PARADE ライザリン・シュタウト アニメVer. L size 他
  • フリュー ぬーどるストッパーフィギュア -時崎狂三・水着ver.-

カプセルトイ

  • [カプセルトイ] バンダイ mofusand ならぶんです。2 <コアラ>
  • [カプセルトイ] 初音ミク 雪ミクあそーと~SNOW MIKU 2025~ A賞ビックサイズフィギュア 雪ミク2025(A)
  • [カプセルトイ] キタンクラブ mofusand×サンリオキャラクターズ なりきりフィギュア3 <けろけろけろっぴ / ぽむぽむプリン>
  • [カプセルトイ] バンダイ 仮面にゃいだー <仮面ライダーディゲイド>
  • [カプセルトイ] キタンクラブ mofusand フルーツにゃんフィギュア <いちごにゃん>
  • ガシャポンオンライン [梱包写真]
  • [カプセルトイ] ターリン・インターナショナル 火鉢2
  • [カプセルトイ] フクヤ アイマイナ ミニフィギュア2
  • [カプセルトイ] ブシロードクリエイティブ 勝利の女神:NIKKE コレクションフィギュアRICH vol.1 <[ラビ]A>
  • [カプセルトイ] タカラトミーアーツ 寺田てら すたんどふぃぎゅあ <Girl ぴんく>
  • [カプセルトイ] ブシロードクリエイティブ 勝利の女神:NIKKE コレクションフィギュアRICH vol.2 <[モダニア]B>
  • [カプセルトイ] ターリン・インターナショナル 柿ぽち袋 <完熟柿ぽち巾着(大)(マチ付き)>
  • [カプセルトイ] バンダイ mofusand ぬいぐるみクリップ <クマ>
  • [カプセルトイ] タカラトミーアーツ パンダの穴 甲殻工業 <オカヤドカリ・ダンプ>
  • [カプセルトイ] ベネリック ぶんぶくちゃがま <上からきつねさん>
  • [カプセルトイ] バンダイ ぼっち・ざ・ろっく! サウンドロップ <伊地知虹夏>
  • [カプセルトイ] バンダイ ゆるキャン△ SEASON3 あそーと3 <A賞 各務原なでしこ、志摩リン ビックサイズフィギュア>
  • [カプセルトイ] 夏目友人帳 ぺたんこなぬいぐるみ <ぶんぶん>
  • [カプセルトイ] ターリン・インターナショナル カプセルコレクション 硬貨ポーチ
  • マーメイドメロディー ぴちぴちピッチ かぷっこふれんず <るちあ(制服)>

初音ミク

  • セガ 初音ミク Project DIVA MEGA39's Luminasta“ 初音ミク - エトワール”
  • 初音ミク Project DIVA MEGA 39's Luminasta “初音ミク-シュープリーム”
  • [ホビー予約情報] 小悪魔ヴァニャ / 初音ミク delight fairy style / ねんどろいど 赤見かるび / ねんどろいどぷらも 初音ミク 他
  • マックスリミテッド ゆらゆらヘッドシリーズ、ナンバー76 初音ミク NT
  • [カプセルトイ] 初音ミク 雪ミクあそーと~SNOW MIKU 2025~ A賞ビックサイズフィギュア 雪ミク2025(A)
  • [ホビー予約情報] アーニャ・フォージャー 探偵Ver. / ねんどろいど 桜ミク 2.0 / TENITOL 初音ミク GALAXY LIVE ver. / 出浦白津莉 他
  • [ホビー予約情報] イヴ・カルネアデス設定画Ver. / 宇崎月 生足バニーVer. / ねんどろいど 後藤ひとり メイドVer. べーしっく / ルミティア ReACTiF 他
  • 北海道e-水プロジェクト × 雪ミク コラボ第5弾
  • [ホビー予約情報] バニーガールズ 限定カラーVer. / 女神官 ビキニアーマーVer. / figma 初音ミク NT / ねんどろいどどーる めぐみん / まいてつ ハチロク 他
  • [ホビー予約情報] 初音ミク GTプロジェクト 15周年記念 てのりぬいぐるみ 2021 Ver./2022 Ver./2023 Ver. / プリンツ・ハインリヒ 他
  • [ホビー予約情報] 初音ミク feat. Yoneyama Mai 他
  • [ホビー予約情報] ねんどろいど 伊地知虹夏 私服Ver. / ねんどろいど 初音ミク ラビットホールVer. / 大人ゆきかぜ 水着Ver. / 子供ゆきかぜ 水着Ver. 他
  • [ホビー予約情報] ねんどろいど 雪ミク Crystal Snow Ver. / TENITOL TALL イレイナ 制服ver. / フランドール・スカーレット 紅魔城伝説版 限定エクストラカラー / 東方Project 博麗霊夢 紅魔城伝説版 限定エクストラカラー 他
  • [ホビー予約情報] ねんどろいど アスナ 2.0 / 結城美柑 ダークネスVer. / 金色の闇 ダークネスver. / 初音ミク Championship 2022 Autumn Ver. 他
  • 初音ミク Project DIVA MEGA39's Luminasta “初音ミク-スターヴォイス”
  • [ホビー予約情報] ねんどろいど 甘神夜重、甘神夕奈 / マジシャンズ・ヴァルキリア / 初音ミク 梅花三弄Ver. / アンカレッジ ドルフィンブルー・レッスンVer. 他
  • [ホビー予約情報] ミユ(水着) / 逢坂大河 タイガーVer. / POP UP PARADE 秋山澪、平沢唯 L size / レーシングミク 2024Ver. / 東方Project ぬいぐるみ 他
  • [ホビー予約情報] レーシングミク 2024Ver. おおきなぬいぐるみ / TENITOL 白 他
  • 19時の女、雪ミク!
  • [ホビー予約情報] 罪木蜜柑 バニーVer. / 1/7スケールフィギュア「小ノ星海果」 他

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP

  • [修理] ねんどろいどジョイントが破損してしまった!まだ慌てるときじゃない。
  • Firefoxの検索窓から検索するとアドレスバーに移動する現象を止める
  • プレミアムもOK! 音泉の録音(ダウンロード)
  • OMEN Obelisk Desktop 875-0200 は早いぞー(ベンチマーク)
  • 「ニコニコ動画と初音ミクのキセキ」札幌ノルベサ
  • セリアのA3ポケットファイルがポスター整理に便利

巡回

NEWS

アプリ・サービス

雪まつり

特典まとめ

  • アニメイトオンライン [梱包写真]
  • グッドスマイルカンパニー 立華かなで [梱包写真]
  • [ブルプロ] 『BLUE PROTOCOL』Songs Collection「星の彼方へ/バファリア聖歌」特典まとめ
  • ゲーマーズ 書籍(専門店限定セット)特典付き [梱包写真]
  • メロンブックス 書籍 [梱包写真]