• 締切済み

デスクトップ通知

jqueryを使用し、デスクトップ通知を作成しております。 流れとしましては、 管理画面があり、 その中で、ある入力フォームを保存すると管理画面を開いてるユーザーにデスクトップ通知を実装したいのですが、 自分自身でフォームを入力した場合は通知されるのですが、他のユーザーへの通知方法がわからず困っています。 実装方法を教えていただけないでしょうか。 参考は下記 http://am-yu.net/2014/07/08/web-notification/ 使用している部分。 function viewNotification(){ var notification = new Notification('タイマー終了しました', { body: 'クリックしてください', icon: 'green64_i.png' }); notification.onclick = function(){ window.focus(); }; } $(function(){ switch(Notification.permission){ case 'denied': $('#cd_txt').html('ブラウザ設定でデスクトップ通知の許可を有効化するようお願いします'); break; case 'default': var $button = $('<input type="button" value="デスクトップ通知を有効にする">') $button.click(function(){ Notification.requestPermission(function(permission){ $('#btn_start').attr('disabled', false); }); }); $('#cd_txt').append($button); break; default: $('#btn_start').attr('disabled', false); } }); formはphpで作っています。 よろしくお願いいたします。

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

Node.jsでも立ててWebSocketでも使ってやってください。

関連するQ&A

  • CSSでのボタンのエフェクト

    数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか?

  • 条件により処理を中断させる方法

    下記のようなコードで、ある条件のときに処理を中断するという処理を書きたいと思っています。条件はループ処理の中で変化する変数の状態を検知するのではなく、処理の外部の状況を条件にしたいと思っています。 例えば「1秒たっても終わっていなかったら中断」という様にしたいと思っています。 ※最初は「特定のキーが押されたら中断」などというようにしたかったのですが。 しかしうまくいきません…。下記のコードではIE8, FirFox, Chromeすべて駄目でした。とりあえずIE8だけでも、さらに言えばHTA限定でもOKです。 何とかならないものでしょうか?「このような処理は不可能だ」という情報でも、あきらめることができるためありがたいです。 よろしくお願いします。 <html> <input type="button" id="btn"> <script> document.getElementById("btn").onclick = function() { var flg = false; var tid = window.setInterval(function() {flg = true;}, 1000); for (var i = 0; 80000 > i; i++) { if (flg) { window.clearInterval(tid); alert("break"); break; } document.getElementById("btn").value = i; } alert("finish"); }; </script> </html>

  • jQueryのclickイベントハンドラ

    最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // (後で使う: 二重送信防止) var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • クライアントマシンからルーターの自動制御を行う(Java Script操作)

    初心者です。 無線ルーター(Webcaster110)につながっているクライアントマシンから定期的にルーターへ命令を送り、ルーターを再起動させたいと思っています。 ブラウザで192.168.1.1でルーターにアクセスし、解析したところ、再起動ボタンをクリックする実態は以下になります。 <INPUT TYPE="button" NAME="reboot_only" VALUE="再起動" ONCLICK="reboot_kind(this,'0','1')"> なお、このreboot_kind(this,'0','1')の実態は /scripts/st_mainte.js に記述されており、該当箇所は function reboot_kind(field, dis_flg, lev) { var form = field.form; var ret = true; ret = Disabled_Action(dis_flg, field.name); if (ret != true) return; switch (lev) { case "st_pro": if (form.st_pro.disabled != false) { alert("「確認」ボタンをクリックしてから「送信」ボタンをクリックしてください。\n\n※設定した値が不正な値の場合、エラーメッセージが表示されます。"); form.BUTTON_FLAG.value = "0"; return false; } form.action = "/cgi-bin/st_reboot.cgi"; form.target = "_top"; form.CGI_OK_PATH.value="/reboot_update1.html"; form.REBOOT_LEVEL.value = "0"; form.BUTTON_FLAG.value = "1"; form.submit(); return true; case "0": ret = confirm ("設定したデータを本商品へ設定し、再起動を行います。\nよろしいですか?\n\n※再起動のあと、設定したデータが反映されます。"); break; case "1": ret = confirm ("本商品の再起動を行います。\nよろしいですか?\n\n※設定したデータは反映されません。"); break; case "2": ret = confirm ("本商品を初期設定へ戻し、再起動を行います。\nよろしいですか?\n\n※お客様が設定したデータはすべて失われます。"); break; case "3": ret = confirm ("本商品をシャットダウンして電源を切れる状態にします。\nよろしいですか?\n\n※電源投入時、設定したデータが反映されます。"); if (ret == true) { form.CGI_OK_PATH.value = "/reboot_shutdown.html"; } break; case "4": ret = confirm ("本商品をシャットダウンして電源を切れる状態にします。\nよろしいですか?\n\n※設定したデータは反映されません。"); if (ret == true) { form.CGI_OK_PATH.value = "/reboot_shutdown.html"; } break; } if (ret != true) { form.BUTTON_FLAG.value = "0"; if (dis_flg != "0") { field.disabled = false; } return false; } form.REBOOT_LEVEL.value = lev; form.submit(); return true; } function st_backupconf() { var ret; var form; var button; ret = false; button = '9'; document.st_backupconf_exec.BUTTON_EXEC.disabled = true; if(1 == document.st_backupconf_exec.BUTTON_FLAG.value){ alert("実行中です。"); document.st_backupconf_exec.BUTTON_EXEC.disabled = false; return false; } document.st_backupconf_exec.BUTTON_FLAG.value = "1"; button = Get_radio_checkedvalue(document.st_backupconf_form.ACTION_SEL); switch(button){ case '0': form = document.st_backupconf_save; form.ACTION_KIND.value = "0"; ret = confirm("設定データの保存を行います\n\n\n" + "※設定データを復元する際、現在設定中のWeb設定ログインパスワードを入力する必要があります\n" + "※現在の設定を本商品に反映したあとに保存することを推奨します"); break; case '1': form = document.st_backupconf_restore; ret = Null_NG(form.PASSWORD); if (ret != true) break; if(form.PASSWORD.value != ""){ ret = CheckID(form.PASSWORD); if (ret != true) break; } ret = Null_NG(form.UPLOAD_FILE); if (ret != true) break; ret = CheckFilePath(form.UPLOAD_FILE); if(false == ret) break; form.ACTION_KIND.value = "1"; ret = true; break; default: ret = false; break; } if (ret == true) { form.submit(); }else{ document.st_backupconf_exec.BUTTON_FLAG.value = "0"; document.st_backupconf_exec.BUTTON_EXEC.disabled = false; } return ret; } となっています。 Perlで書いたスクリプトをリモートマシンのCrontabで毎日走らせて実現できないかと考えています。どこからはじめればよいかご教授いただけると幸いです。

  • 画像を使用したタブを複数設置

    下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01~03、 a.selectedをa.selected01~03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ(IE対策)*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })

  • ajaxローディングで取得したデータの並べ替え

    お世話になっております。 データベースからデータを取得し表示し、「もっと見る」ボタンを押下されたらajaxローディングで追加分を取得するという処理と行っています。 ◆javascript処理 ----------- $(function() { //More Button $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $.ajax({ type: "POST", url: "~.php", data:"id="+ID, cache: false, success: function(html){ $("#updates").append(html); $("#more"+ID).remove(); } }); } }); }); -------- 上記の方法で追加部分を取得することはできています。 同じページ内にボタンを配置し取得したデータをソートできるようにしているのですが、 上記の「もっと見る」ボタンで取得後にソートを行うと取得した部分が消えてしまいます。 並べ替えの処理は以下の通り --------------------- jQuery(document).ready(function($) { $('#btn').click(function() { //********************************************** //新着順で並べ替え //********************************************** $('#list').html( $('#list > li').sort(function(a, b) { return parseInt($(b).attr('id'), 10) - parseInt($(a).attr('id'), 10); }) ); }); --------------------- またボタンとリスト部分は以下の通りです。 liタグを並べ替えるボタンを配置しています。 ------------------ <button id="btn">降順に並べ替え</button> <ul id="list"> <li id=1>~</li> <li id=2>~</li> <li id=3>~</li> </ul> ------------------ ajaxローディングで追加取得している部分がliタグと認識されていないため、このような挙動となってしまうと思うのですが解決策はありますでしょうか?ご教示いただけますようお願いします。

  • javascriptについて

    現在会社のHPのお問い合わせフォームを作っています。 フォーム画面で確認ボタンを押すと、確認画面を表示させたく、 http://blog.material-being.com/portfolio/auto_confirm/ こちらのページのjavascriptをつかって、作ってみたのですが、 書かれているソースで分からないところがあります。 switch ($(this).attr('type')) { //--------------------------------- // hidden, button, submit:何もしない //--------------------------------- case 'hidden': case 'button': case 'submit': break; //--------------------------------- // checkbox, radio:選択されたラベルの値を取得 //--------------------------------- case 'checkbox': case 'radio': var checkOrRadioName = $(this).attr('name'); //同じName属性の要素を既に処理していなければ if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) { checkOrRadioNames += checkOrRadioName + ','; // x+= y → x = x + y var checks = ''; $(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() { //チェックボックスのチェック要素の選択。 if(getLabelCR) { //ラベルの値を取得する場合 var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html(); }else{ //Valueの値を取得する場合 var checkOrRadioVal = $(this).val(); } if(checks == '') { checks += checkOrRadioVal; }else{ checks += ',' + checkOrRadioVal; } }); $(formClass + ' [name="'+checkOrRadioName+'"]:last').after('<span class="autoConfirmVal">'+ checks +'</span>'); } $('label[for="'+$(this).attr('id')+'"]').css('display', 'none'); break; //--------------------------------- // password:入力文字を"*"記号に置き換える //--------------------------------- case 'password': $(this).after('<span class="autoConfirmVal">'+ $(this).val().replace(/./g, '*') +'</span>'); break; default : $(this).after('<span class="autoConfirmVal">'+ $(this).val() +'</span>'); } このradio部分がよくわかりません。 (1) var checkOrRadioName = $(this).attr('name'); if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) { これは、同じものを検索しているのように見えるのですが、、-1になるのでしょうか? (2) $(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() { var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html(); 上記の大括弧は何を意味するのでしょうか? forとはなんでしょうか。 (3) .eachは繰り返しなのでしょうか? 以上、よろしくお願いいたします。

  • 2度押し防止のJavascript

    先日、「買い」のボタンを押すと、100購入~800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様 有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。 それが末尾のスクリプトになります。 質問 買いボタンの2度押し防止は出来ていますが、100購入 200購入 300購入の連続買いができてしまう状況です。 この連続買いの防止のjavascriptをご教示いただければと思います。 当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが     100購入 200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************

  • ASP.NET ボタン二度押し抑制時の方法について

    ご教授下さい。 VisualWebDebeloper2010(VB)を使用してWEBサイトを構築しています。 ボタンをクリックすると、処理中はボタンを無効化したいと考えています。 いろいろなサイトを参考にして調べていたのですが、その中で疑問が出てきました。 最初は単純に、UpdataPanel等は使用せず、JQUERYにて、 --------------------------------------- $(function () { $('#btn').click(function () { $('#btn').attr('disabled', 'disabled'); $('#form1').submit(); }); }); ---------------------------------------- とし、ボタンがクリックされたら、ボタンを無効にする。 としていましたが、これは無効になったコントロールはポストバックに反映されないという理由から、 うまく機能しない事がわかりました。 次の方法として、UpDataPanelを使用して下記のコードで試してみると、うまいこと機能しました。 (あるサイトからの丸写しなので、一部問題がありますが…) --------------------------------------------------------- $(function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest( function(sender, args) { args.get_postBackElement().disabled = true; }); }); --------------------------------------------------------- 最初の方法にせよ、次の方法にしても結局はボタンを無効化して、 対応している様に思えるのですが、なぜ二つ目の方法だと、 正常に動作するのかがわかりません。 ここらへんの理由をご教授頂ければ幸いです。

専門家に質問してみよう