FirefoxでのJavascriptによるGamepadAPIを使ったXBOX360コントローラー

投稿者: Anonymous 現在、Javascriptによるゲームフレームワークを作成しています。 主要なブラウザのうち、ChromeとFirefoxへの対応を行っていたのですが、ファミコンのようなUSBゲームパッドと、XBOX360用のUSBゲームコントローラーに対応していました。 しかし、最近のFirefoxではXBOX360コントローラーの値が取れなくなりました(Chromeでは問題ありません)。 値の取り方は以下のコードになります(CoffeeScriptです)。 gamepadsinfo = if (navigator.getGamepads) then navigator.getGamepads() else (if (navigator.webkitGetGamepads) then navigator.webkitGetGamepads else []) ネットをいろいろと検索したのですが、みなさん問題なく使えているのか、はたまたXBOX360コントローラーにはあまり関心が無いのかわかりませんが、情報がほとんどありません。 FirefoxでのXBOX360コントローラーの値を、Javascriptから取得する方法はありますでしょうか? もしくは私がなにか間違っているのでしょうか。 解決 Firefox は、 gamepadisconnected イベントを取ることを推奨しているようですので、ゲームのメインループ内で上記をしないのなら、以下のコードで取得を試みるべきです。(私の環境でも、1度目の getGamePads() の呼び出しは失敗することがありました。 ) window.addEventListener(“gamepadconnected”, function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; console.log(“gamepad[%s]: button.length=%d”, gp.id, gp.buttons.length); }); …が! 今度は Chrome が gamepadisconnected イベントを持たないため、おかしなことになるので、Chrome 用には、定期的なポーリングをするのがよいようです。 var interval; if (!(‘ongamepadconnected’ in window))…(Continue Reading)

beforeunloadイベントを利用した確認ダイヤログの表示で、チェックボックスを表示させない

投稿者: Anonymous 現在フォームを作成し、フォームで戻るボタンを選択した際にアラートを表示させるようにしています。 その際「このページでこれ以上ダイアログボックスを生成しない」とメッセージとチェックボックスが表示されるため、このメッセージとダイヤログをJSで非表示にする設定はございますでしょうか? ブラウザ側で制御する方法は見つかったのですが、システム側で非表示にする設定が見つからず どなたかご教授頂ければと存じます。 確認したブラウザは、クロームのバージョン 57.0.2987.133 になります ご回答頂く際はJSはでもJqueryでも問題ございません。 恐れ入りますが、よろしくお願いします _x000D_ _x000D_ <div class=”entryProfile-buttonWrapper–fb flex”>_x000D_ <div>_x000D_ <a class=”btn btn-flat-facebook w-80-percent” href=”/users/auth/facebook?is_business=false”>_x000D_ Facebookで登録・ログイン </a>_x000D_ </div>_x000D_ </div>_x000D_ _x000D_ <form accept-charset=”UTF-8″ action=”/registration” class=”new_user” id=”js-registrationForm” method=”post”>_x000D_ <div class=”form-group row”>_x000D_ <div class=”col-xs-3 text-left”>_x000D_ <span class=”text-bold”>姓(全角漢字)</span>_x000D_ </div>_x000D_ <div class=”col-xs-4″>_x000D_ <input class=”form-control placeholder-no-fix” id=”user_profile_attributes_last_name” name=”user[profile_attributes][last_name]” placeholder=”内田” type=”text”>_x000D_ </div>_x000D_ </div>_x000D_ <input class=”btn…(Continue Reading)

ng-file-uploadを使用した画像のアップロードについて

投稿者: Anonymous JavaScriptベースのフロントエンドアプリケーションとして AnuglarJS を使用して サーバ側のデータを操作する為にバックエンドAPIを Rails で構築しているのですが、 ng-file-uploadを採用した画像のアップロードが上手く出来なくて困っています。 Shop(1) <-> Item(n) 1件のShopに複数のItemが紐付いている状態で、Shopのedit画面で画像のアップロードを実装しています。 itemリストのループの中でそれぞれのitemに画像を登録させたいですが、ループの中では適切にアップロードができません。 (厳密にはcontrollerの $scope.upload = (files) -> が呼び出されません。。) また、現状ではそれぞれのitemごとに画像を設定することができなくて詰まっています。。 APIを通してDBには正しく格納できているのでページをリロードすればきちんと表示されるのですが、 img ngf-src=”files[0]” ngf-default-src=”” ngf-accept=”‘image/*’” がすべてのinputに対して共通のために、関係のないitemのimgが上書きされていしまいます。 一度に複数の画像アップロードや画像以外のアップロードは求めていなく、 いたってシンプルなものをつくろうとしているのですがなかなか上手くいきません… どうかご教授いただけますと嬉しいです。 application.js //= require angular.min //= require angular-resource.min //= require ng-file-upload.min //= require ng-file-upload-shim.min //= require app //= require_tree . controller.coffee angular.module(‘kapiyva’).controller “ArticleEditController”, ($scope, Upload, Shop,…(Continue Reading)

knockout.jsでobservableArrayのデータ更新が反映されない

投稿者: Anonymous 以下のHTMLを用意します。(値を3つだけ表示することが通常より特殊) <div data-bind=”foreach:{data:users, as:’user’}”> <p data-bind=”text:name”></p> <!– 3つだけ表示 –> <ul data-bind=”foreach:new Array(3)”> <li data-bind=”text:user.scores()[$index()]||0″></li> </ul> </div> 次に、基本的なデータやメソッドを作成し、バインドします。 ko.applyBindings vm = new class constructor: -> @users = ko.observableArray([]) @createUser = -> new class constructor: (name=”)-> @name = ko.observable(name) @scores = ko.observableArray([100]) そして、適当なデータを作成します。 user = vm.createUser() user.name(‘takeshi’) user.scores.push(200) vm.users.push(user) プログラムが動き出してから3秒後にobservableArray内のデータの中身を書き換えます。 setTimeout -> vm.users()[0].scores()[0] = 999…(Continue Reading)

ActionController::Liveとjavascriptがうまく働かない

投稿者: user8406  初心者です。RoRでチャットを作っています。下記のコードで走らせても思ったように動きません。どこに問題がありますか?  ユーザーの新規のpostを1秒ごとに取得して、render_to_stringした後で送信しています。クライアント側では、それをpostが表示される”post-list”にappendしています。しかし、ユーザーがpostを作成しても、作成は成功しますが、表示がされません。 chats.coffee $ -> chat_id = $(“chat_id”).text() eventSource = new EventSource(chat_id+”/stream”) eventSource.addEventListener ‘push’, (event) -> post = event.data $(‘#post-list’).append(post) chats.controller.rb include ActionController::Live def stream @chat = Chat.find(params[:id]) response.headers[‘Content-Type’] = ‘text/event-stream’ start = Time.zone.now loop do Post.uncached do Post.where(‘created_at > ?’, start).where(‘chat_id = ?’, @chat.id).each do |post| html = render_to_string partial:’shared/_post.html.erb’, object:post response.stream.write(“event:pushn”)…(Continue Reading)

jQuery Deferredでthenが処理を待ってくれない

投稿者: Anonymous コメントアウトしている箇所は正しく動作するのですが、一番下のDeferredインスタンスを利用する方法だと、処理を待たずにdelayメソッドが同時に実行されてしまします。何故なのでしょうか? delay = (msg)-> $.Deferred (p)-> setTimeout -> console.log msg p.resolve() ,1000 #delay(‘test’).done -> # delay(‘test2’).done -> # delay(‘test3’).done -> #delay(‘start’) #.then ->delay(1) #.then ->delay(2) #.then ->delay(3) #$.Deferred().resolve() #.then ->delay(1) #.then ->delay(2) #.then ->delay(3) d = new $.Deferred() d.then ->delay(1) d.then ->delay(2) d.then ->delay(3) d.resolve() http://jsfiddle.net/d9prbjg0/4/ 解決 $.Deferred().resolve() .then ->delay(1) .then ->delay(2) .then…(Continue Reading)

javascript(AngularJS)で配列の最後にpushができずに困っています

投稿者: Anonymous 質問させてください。タイトルの通りです。 1個のshopに10個のlistが紐づいている構造の配列で shop { id: “1”, name: “shop1”, lists: “Array[9]” } shop.lists[0~9] { list_id: “1”, list_name: “list1” } に対して .push(もしくはもっといい方法があれば教えてください)で shopに紐づくそれぞれのshop.listsの最後に、addvalue値を追加しようとしています。 以下のようなイメージです。 shop.lists[0] { list_id: “1”, list_name: “list1”, addvalue: “1” } shop.lists[1] { list_id: “2”, list_name: “list1”, addvalue: “2” } shop.lists[2] { list_id: “3”, list_name: “list1”, addvalue: “3” }    .    .    . shop.lists[9]…(Continue Reading)

CoffeeScriptの値の参照の参照のしかたを教えて下さい

投稿者: Anonymous obj = flag: true toggle_flag: -> flag = !flag obj.flag # true obj.toggle_flag # false obj.flag = true obj.flag # true obj.toggle_flag # false このような振る舞いのオブジェクトを作りたいのですが、 toggle_flagの中でobj.flagを参照するにはどうしたらよいのでしょうか。 toggle_flagの中でthis.flagとするのかと思ったのですが、この場合thisはtoggle_flagをさすのかobjをさすのかわからず、困っています。 正しい知識を得たいので詳しく教えていただけないでしょうか。 解決 コンパイル結果は以下のようになります。 var obj; obj = { flag: true, toggle_flag: function() { var flag; return flag = !flag; } }; //… もし、obj.toggle_flag()でobj.flagを反転させ、その値を返したいのであれば obj = flag:…(Continue Reading)

jquery-atwho-railsを使っていますが、Uncaught TypeError: $(…).atwho is not a functionとでます。

投稿者: Anonymous https://gorails.com/episodes/at-mentions?autoplay=1# を参考に、メンション機能を実装していますが、Uncaught TypeError: $(…).atwho is not a functionというエラーがでます。 comments.coffee jQuery -> $(‘[data-behavior=”autocomplete”]’).atwho( at: “@”, ‘data’: ‘a’ ) applicaiton.js,application.css,_form.html.erbの設定は、完了しています。 解決 このコードは.atwhoを使うために必要です: <link href=”css/jquery.atwho.css” rel=”stylesheet”> <script src=”http://code.jquery.com/jquery.js”></script> <script src=”js/jquery.caret.js”></script> <script src=”js/jquery.atwho.js”></script> 回答者: Anonymous

横方向に自動リサイズするinputのdirectiveの続き

投稿者: Anonymous はじめまして。タイトルの通りです。AngularJSをつかって横方向に自動リサイズするinputのdirectiveをつくっています。以前こちらで質問させて頂いたときに教えて頂いたコードを参考に以下のように実装しているのですが、何点か思うようにいかないとろこがあり、再び相談させて頂いております。テキストを入力すると入力に応じてinputタグのwidthを変更していくものを想定しています。 困っているところとしましては、 ・ページ読み込み時に自動でリサイズされない(minWidthの値が適応され端が切れてしまう) ・文字の幅をcharWidthで指定しているので、日本語と英語、さらには「a」と「i」でも文字の幅が異なるので若干幅がずれる ということが起こっています。初歩的なところで詰まっているのはわかっているのですが自力では解決できなさそうだったので質問させていただきました。読みにくいコードかもしれませんがどうかよろしくお願いいたします。 angular.module(‘myInput’, []).directive ‘myInput’, -> { restrict: ‘A’ require: ‘?ngModel’ link: (scope, elem, attrs, ngModel) -> calculateWidth = (length) -> minWidth = 30 maxWidth = 730 charWidth = 12 width = length * charWidth if width > maxWidth then maxWidth else if width < minWidth then minWidth else width…(Continue Reading)

hubotからdiscordへメッセージを送りたい

投稿者: Anonymous hubotからdiscordへmessageを送りたいのですが、 envelopeの指定がslackなどへ送信するときと違うのか、上手くいかないです。 node.js/coffescriptに慣れておらず、debug方法なども曖昧なところもあり、 良い解決方法があればご教授ください。 Adapterにはhubot-discordを利用しています ・コード cronJob = require(‘cron’).CronJob module.exports = (robot) -> cronjob = new cronJob(‘0 1-59 * * * *’, () => envelope = room: “#channel” robot.send envelope, “cron テスト@all” ) cronjob.start() ・エラー ERROR { Error: Could not resolve channel at Resolver.resolveChannel (/home/user/git/appname/node_modules/discord.js/lib/Client/Resolver/Resolver.js:34:51) at InternalClient.sendMessage (/home/user/git/appname/node_modules/discord.js/lib/Client/InternalClient.js:32:25) at Client.sendMessage (/home/user/git/appname/node_modules/discord.js/lib/Client/Client.js:137:54) at DiscordBot.send…(Continue Reading)

beforeunloadイベントで特定リンクの場合適用外にしたい

投稿者: Anonymous 登録フォームで戻るボタンを押した際に、警告を出す設定を行っています。 その際、下記条件でbeforeunloadイベントを除外しようとしたのですが、 知識不足の為 2の場合対応できません。 恐れ入りますが、どなたかご教授いただければと存じます。 ▲除外条件▲ 1:submitした場合 2:登録フォーム中の「フェイスブックでログイン」へのリンクを押した場合 JSはrailsのcoffee scriptですが、jquery jsでご回答頂いても問題ございません。 _x000D_ _x000D_ <div class=”entryProfile-buttonWrapper–fb flex”>_x000D_ <div>_x000D_ <a class=”btn btn-flat-facebook w-80-percent” href=”/users/auth/facebook?is_business=false”>_x000D_ Facebookで登録・ログイン </a>_x000D_ </div>_x000D_ </div>_x000D_ _x000D_ <form accept-charset=”UTF-8″ action=”/registration” class=”new_user” id=”js-registrationForm” method=”post”>_x000D_ <div class=”form-group row”>_x000D_ <div class=”col-xs-3 text-left”>_x000D_ <span class=”text-bold”>姓(全角漢字)</span>_x000D_ </div>_x000D_ <div class=”col-xs-4″>_x000D_ <input class=”form-control placeholder-no-fix” id=”user_profile_attributes_last_name” name=”user[profile_attributes][last_name]” placeholder=”内田” type=”text”>_x000D_ </div>_x000D_ </div>_x000D_ <input class=”btn btn-blue…(Continue Reading)

rubyで存在しない要素にアクセスしたときに返すデフォルト値を指定するには?

投稿者: Anonymous coffeescriptで user = if Math.random() > 0.5 {items:[{place:1000}]} else {items:[{place:1000},{place:2000}]} place = user?.items?[1]?.place || 0 console.log place とすると、userオブジェクトの中身がどんなに複雑でも、要素があればその値、無ければ0を取得するということが出来てとても便利だと思っているのですが、これをrubyで実現することは可能なのでしょうか。 解決 ActiveSupport の Object#try を利用すると、同じような事が出来ます。これは、メソッドが無ければ nil を返し、そうで無ければ send と同じ動きをするものです。 require “active_support/all” user = {items:[{place: 1000}]} # => {:items=>[{:place=>1000}]} user[:items][1][:place] # => NoMethodError: undefined method `[]’ for nil:NilClass user.try(:[], :items).try(:[], 1).try(:[], :place) # => nil user.try(:[],…(Continue Reading)

controllerの中で同じ処理を一定回数繰り返したい

投稿者: Anonymous AngularJSでtodoアプリをつくっています。controllerの中で同じ処理を複数回繰り返す処理を書いています。 現状では5回繰り返す仕様になっていて、そこまで多くはないのでベタ書きしているのですが、今後の拡張性などを考えるともっと簡潔に書きたいです。 以下がそのコードです。一部省略していますがだいたいこのような感じです。angular.forEachをつかうのかな…と思ったのですがうまくできませんでした… Angularは初心者なのでまだまだ全然わかっていません… どうかよろしくお願いいたします。 $scope.init = -> # contentを7件生成する $scope.newContent = { title: ”, description: ” } Content.save($scope.newContent).$promise.then (response) -> console.info “[info] new content saved.” Content.save($scope.newContent).$promise.then (response) -> console.info “[info] new content saved.” Content.save($scope.newContent).$promise.then (response) -> console.info “[info] new content saved.” Content.save($scope.newContent).$promise.then (response) -> console.info “[info] new content saved.” Content.save($scope.newContent).$promise.then (response) ->…(Continue Reading)

jThree.jsのgomlを使用せず、`THREE.MMD.VMD`を使用してアニメーションさせたい

投稿者: Anonymous 下記のコードのようにTHREE.SCENEインスタンスに、THREE.MMD.PMXインスタンスからメッシュを生成して追加したところ表示はできたのですが、THREE.MMD.VMDインスタンスを使用してアニメーションさせる手順が分かりません。 gomlの<mmd model=”foo.pmx” motion=”bar.vmd” onLoad=”parent.jThree.MMD.play(true);”/>と同等の処理を、プログラマティックに行う方法はありますか? _x000D_ _x000D_ <script src=”https://code.jquery.com/jquery-2.1.4.js”></script>_x000D_ <script src=”https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.js”></script>_x000D_ <script src=”https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.Stats.js”></script>_x000D_ <script src=”https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.MMD.js”></script>_x000D_ <script src=”https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.Trackball.js”></script>_x000D_ <script src=”http://coffeescript.org/extras/coffee-script.js”></script>_x000D_ <script type=”text/coffeescript”>_x000D_ # Private_x000D_ camera= null_x000D_ renderer= null_x000D_ trackball= null_x000D_ _x000D_ resize= ->_x000D_ camera= new THREE.PerspectiveCamera 45, innerWidth / innerHeight, 1, 1000_x000D_ camera.position.set 0, 20, 70_x000D_ renderer.setSize innerWidth,innerHeight_x000D_ _x000D_ trackball= new THREE.TrackballControls camera_x000D_ _x000D_…(Continue Reading)

CoffeeScriptで変数の衝突を避けるためにスコープのthisを利用する方法は?

投稿者: Anonymous # # メインコンテンツのユーザタブのユーザ一覧の処理。 # # 最後の要素の削除ボタンをクリックで要素を削除します。 $(‘.maincontent .tab.user .user-list .elem:last > .del’).on ‘click’, -> @parent().remove() # 編集ボタンをクリックで選択以外の要素を薄くしてテキストエリアを表示します。 $(‘.maincontent .tab.user .user-list .elem > .edit’).on ‘click’, -> $(‘.maincontent .tab.user .user-list .elem’).css(opacity: 0.5) @parent().css(opacity: 1.0).find(‘textarea’).show() 上記のコードは、特に複雑なことをしている訳ではありませんがセレクタの文字列が長いために、どうしても可視性の悪いコードになってしまっていると思われます。 そこで、下記のように変数tを用意し、ユーザ一覧の要素を先に抽出しておくことで、上記のコードよりスッキリと書くことができ、ある程度処理も高速化できると思います。 # # メインコンテンツのユーザタブのユーザ一覧の処理。 # t = $(‘.maincontent .tab.user .user-list’) # 変数tを用意 # 最後の要素の削除ボタンをクリックで要素を削除します。 $(‘.elem:last > .del’,t).on ‘click’, -> @parent().remove()…(Continue Reading)

Coffeescript(Jquery)の選択肢チェクについて

投稿者: Anonymous htmlの択一選択フィールドで、value=”normal_direct_link”が設定された場合に 下記を実現したいのですが、うまく動作しません。 ○実現したい内容○ ①:テキストフィールド(ノーマル設定補足 )を入力必須にする ②:①を入力していない場合、送信ボタンを押せないようにするor postエラーにしたい ■現在停止している内容■ 1:選択肢をフォーカスすると自動でvalue=”normal_direct_link”を選択してしまう 2:value=”normal_direct_link”を選択してもテキストフィールド(ノーマル設定補足 )を入力必須にならない コードはCoffeescriptですが、ご回答はjqueryもしくはJSで頂いても問題ございません。 恐れ入りますが、どなたかご協力いただければと存じます _x000D_ _x000D_ <div class=”form-group” id=”service_page_type”>_x000D_ <label class=”select optional control-label” for=”service_page_type”>リンク設定</label>_x000D_ <select class=”select” id=”service_page_type” name=”service[page_type]” value=”default”>_x000D_ <option selected=”selected” value=”default”>通常設定</option>_x000D_ <option value=”pro”>プロ</option>_x000D_ <option value=”normal_direct_link”>ノーマル設定</option>_x000D_ </select>_x000D_ </div>_x000D_ <div class=”form-group”>_x000D_ <label class=”string”>ノーマル設定補足</label>_x000D_ <input class=”string” id=”service_link” name=”service[link]” type=”text”>_x000D_ <div class=”help-block ” id=”service-link-errors”></div>_x000D_ </div> _x000D_ _x000D_ _x000D_…(Continue Reading)

CoffeeScriptでJavascriptのオブジェクトをシンタックス文字列でフィルタリングする

投稿者: Anonymous オブジェクトをシンタックス文字列によってフィルタリングする関数を作っています。 obj = users: [ {name:’takeda’, age:’18’}, {name:’kanako’, age:’19’}, {name:’sanada’, age:’17’} ] objectFilter(obj, ‘users[*].age’) # -> {users:[{age:18}, {age:19}, {age:17}]} なんとか、頑張って以下のフィルタリング関数を作成することが出来ました。 フィルタリング関数 window.objectFilter = (source, syntax)-> recur = (src, obj, elems)-> elems = _.cloneDeep(elems) # console.log _.cloneDeep(src), _.cloneDeep(obj), _.cloneDeep(elems) elem = elems.shift() return src if elem == undefined [key, idx] = elem.split(‘:’) if idx…(Continue Reading)

SpookyJSで、CasperJS側にundefinedな変数を渡せない

投稿者: Anonymous [email protected] [email protected] を使って、スクリプトに渡したコマンドラインオプションをCasperJSのthenコールバック内で使おうとしています。他の変数はちゃんとCasperJS内から見えるのですが、undefinedな変数はどこかで消えてしまうのか、そんな変数はないよ (“Can’t find variable”) と言われてしまいます。 誰が勝手に消しているのでしょうか。また、どうすれば回避できるでしょうか。 Spooky = require ‘spooky’ spooky = new Spooky child: command: ‘./node_modules/casperjs/bin/casperjs’ casper: logLevel: ‘info’ verbose: false , (err) -> if err e = new Error ‘Failed to initialize SpookyJS’ e.details = err throw e spooky.on ‘error’, (e, stack) -> console.error(e) if (stack) console.log(stack) spooky.on ‘console’,…(Continue Reading)

coffeescriptでのfunctionの書き方を教えてください。

投稿者: Anonymous javascriptのfunctionをCoffeeScriptの形式に書き換えたいんです。 検索では下記のような書き方が多かったです。 function名 = -> return ですが、これをjavascriptにしてみると下記の通りになりますね。 function名 = function() { } 私が欲しいのは例えば下記のような形のfunctionをCoffeeScript形式に書き換えたいんです。 function a() { return 1; } 上記のfunctionをCoffeeScript形式に書いていただければと思います。よろしくお願いします。 解決 CoffeeScriptについてはまずこちらを読んでみるといいと思います。英語がわからなくてもコード部分を見れば内容はつかめます。 http://coffeescript.org/ また、下のリンク先のサイトはJavaScriptのコードをCoffeeScriptに変換してくれます(逆も可能)。 http://js2.coffee/ 最後に、質問のコードは次のようになります。 a = () -> 1 回答者: Anonymous

このコードを coffee script に変換していただきたいです

投稿者: Anonymous タイトルの通りです。このコードは coffee scriptでどう記述されるのでしょうか。 よろしくお願いいたします。 var app = angular.module(‘sampleApp’, []); function MyController($scope) { $scope.foo = “” $scope.lastSubmitted = “” $scope.submit = function() { $scope.lastSubmitted = $scope.foo; } } app.directive(‘enterSubmit’, function () { return { restrict: ‘A’, link: function (scope, elem, attrs) { elem.bind(‘keydown’, function(event) { var code = event.keyCode || event.which; if (code ===…(Continue Reading)