簡単Javascript & jQueryでテキスト読み上げ - Qiita
$(function(){ $synthes = new SpeechSynthesisUtterance('こんにちわ'); speechSynthesis.speak($synthes); }); $(function(){ // 準備 $voicesを取得したいだけなのだけれども $voise = null; $voiseName = 'Google 日本語'; $voices = speechSynthesis.getVoices(); $synthes = new SpeechSynthesisUtterance(); // SpeechSynthesisUtterance()に時間かかるから様子みる $repeat = setInterval(function() { if($synthes){ $voices = speechSynthesis.getVoices(); //
ブラウザからの音声入力を認識してテキスト化する (Web Speech API) - Qiita
Chromeすごいわ。ブラウザだけでここまでできるとは。 こんな簡単なHTMLだけで音声認識→ テキスト化ができます。 日本語もOK。 デモをこちらに起きました。 http://inouet.github.io/sample_html/001.speech_recognition.html コード <html> <head> <meta charset="UTF-8" /> <title>Web Speech API</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; var recognition = new we
Examples and documentation on grumble.js
Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works
吹出し型ツールチップを自由に設置できるjQueryプラグイン「grumble.js」 | Web活メモ帳
これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。 吹出しには背景画像が指定されているので、 CSSを変更してオリジナルの吹出しにする事も簡単そうでした。 使い方 以下のようなスクリプトを追加する事で表示する事ができました。 $('h1').grumble({ text: 'ここにメッセージを入れます!', angle: 85, distance: 100, showAfter: 500 }); オプションの説明 text:表示する文章 angle:角度 distance:距離 showAfter:指定した秒数後に表示（ミリ秒） オプショには他にもコールバック処理なんかもありました。 詳細&ダウンロードは下のリンクからどうぞ！
かわいいデザインのツールチップ「grumble.js」
かわいいデザインのツールチップ（吹き出し）効果を与える「grumble.js」 ツールチップ（吹き出し）により、文章や画像の補足をすることで、わかりやすくすることがあります。 よくあるプラグインだとちょっとデザインが・・・という方にgrumble.jsをお勧めします。 ポップでかわいいデザインで作成することができます。 sponsors 使用方法 grumble.jsからファイル一式をダウンロード。 <link type="text/css" href="grumble.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="Bubble.js"></script> <script type=
【jQuery】設置が超シンプル！マウスオーバーで吹き出しが出てくるおすすめプラグイン！ | どっかの誰かさんの独り言
さてこんにちは。お久しぶりですね。「どっかの誰かさん」こと SofPyon です。あ、ブログ始めましたのでよろしくお願いします。 先日、「bxSlider」という画像のスライドショーを簡単に設置できるプラグインを紹介したのですが、今回も簡単に設置できる jQuery プラグインです。 マウスオーバーで、上の画像のように吹き出しが出てくるプラグイン「jquery.balloon.js」を紹介します。このプラグイン、設置は簡単なのにカスタマイズ性が高いという素晴らしいプラグインです。
UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
.on()と.off()を使いこなす 1 | CodeGrid
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
jQueryを使ってのドラッグ＆ドロップUIをiPhoneやAndroidでも簡単に動作するようにしてくれるプラグイン「jQuery UI Touch Punch」｜BLACKFLAG
先日ここでも紹介したjQueryを使ってのドラッグ＆ドロップUI。 通常jQueryでドラッグ＆ドロップを実装するには「jquery-ui.js」を使って 「.draggable()」「.droppable()」といったアクションを使って操作しますが これらはiPhoneやAndroidには対応していません。 そこで、これらの「.draggable()」「.droppable()」ドラッグ操作を 簡単にiPhoneやAndroid対応にしてくれるプラグイン「jQuery UI Touch Punch」が かなり使えそうだったので自分用メモ書きとして紹介してみます。 jQuery UI Touch Punch – Touch Event Support for jQuery UI jQuery UI Touch Punch – Touch Event Support for jQuery U
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
【旧版】jQuery入門 (全22回) - プログラミングならドットインストール
JavaScriptをより簡単に扱うために必要となる言語です。さまざまなプラグインと組み合わせて使うことでウェブサイトに多彩な機能や効果を盛り込むことができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.closest() | jQuery API Documentation
GitHub - fyneworks/star-rating: jQuery Star Rating Plugin