Javascript | Scimpr Blog

三目並べゲームのAI〜原始モンテカルロ法

2017/02/05 -Backbone.js
ai, backbone.js, coffee, Electron

By: Luca Galli – CC BY 2.0 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おのおの１００回位ずつランダムでゲームを最後までやってみて、勝 …

Electron＋Backbone.jsでボードゲーム〜３目並べ

2017/01/29 -Backbone.js
backbone.js, Electron

By: sopasnor – CC BY 2.0 ボイラープレート前回までのをまとめた. github.com/seventhsense/my_electron_boilerplate …

Backbone.Marionette+NedbでElectron♪

2017/01/21 -Backbone.js
backbone.js, Electron, marionette.backbone

By: Jairo – CC BY 2.0 はじめに Electronにsqlite3が同梱できずに詰まっていたんだけど、NeDBというnode.jsでできたデータベースを知って試してみた …

Ubuntu12.04にnode6.9をインストール～nodebrew

2016/10/27 -node.js
node.js, nodebrew

By: Kazuyoshi Kato – CC BY 2.0 nodebrew自身のアップデート

nodebrew selfupdate

1	nodebrew selfupdate

インストールできるパッケ …

Electron+Browserify(debowerify)+jQueryUi

2016/02/24 -jQuery UI, node.js
Electron, jQuery UI

By: Wilson Hui – CC BY 2.0 bower install

bower i -S jquery-ui

1	bower i -S jquery-ui

browserify(debowerif …

Electronでmaterialize

2016/02/21 -node.js
Electron, node.js

By: Vancouver Film School – CC BY 2.0 Materialize Materializeは、マテリアルデザインにもとづいたCSSフレームワーク mater …

Electronでsql.js

2016/02/07 -node.js
Electron, node.js, sql.js

By: Dmitry Baranovskiy – CC BY 2.0 sql.js github.com/kripken/sql.js sql.jsはsqliteをEmscriptonとい …

ElectronでTrayアイコン

2016/02/02 -node.js
Electron, node.js

By: Cooks & Kitchens – CC BY 2.0 Tray github.com/atom/electron/blob/master/docs-translati …

Electronで簡単にMac風UI〜Photon

2016/02/02 -node.js
Electron, node.js, Photon, sass

By: Patrick Hoesly – CC BY 2.0 Photon PhotonはElectronで簡単にMac風UIを実現できるCSSフレームワーク photonkit.com/ …

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

2016/01/31 -node.js
Electron, node.js

By: Jean-Pierre Dalbéra – CC BY 2.0 はじめに今後は、Electronの機能をつかって、アプリケーションメニューからセーブダイアログを表示して、ファイル …

Todolistをmarionette化

2016/01/31 -Backbone.js, node.js
Electron, marionette.backbone, node.

By: Jackie – CC BY 2.0 Marionette.js 前回のElectron製のTodolistをmarionette化してみた. marionettejs.com/ …

Electron + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

2016/01/28 -node.js
Electron, node.js

By: Purple Slog – CC BY 2.0 はじめに次のサイトを参考にした. Electronでクロスプラットフォームのデスクトップアプリを作る Backbone.Local …

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

2016/01/25 -MacOSX, node.js
Electron, node.js

By: Nrico – CC BY 2.0 package.json

  "browserify": {
    "transform": [
      "coffeeify",
      "debowerify"
    ]
  },
  "devDependencies": {
    "browserify": "^13.0.0",
    "coffee-script": "^1.10.0",
    "coffeeify": "^2.0.1",
    "debowerify": "^1.3.1",
    "electron-connect": "^0.3.7",
    "gulp": "^3.9.0",
    "gulp-coffee": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-eco": "0.0.2",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.1.1",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "vinyl-source-stream": "^1.1.0"
  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

"browserify": {

"transform": [

"coffeeify",

"debowerify"

]

},

"devDependencies": {

"browserify": "^13.0.0",

"coffee-script": "^1.10.0",

"coffeeify": "^2.0.1",

"debowerify": "^1.3.1",

"electron-connect": "^0.3.7",

"gulp": "^3.9.0",

"gulp-coffee": "^2.3.1",

"gulp-concat": "^2.6.0",

"gulp-eco": "0.0.2",

"gulp-plumber": "^1.1.0",

"gulp-sass": "^2.1.1",

"gulp-util": "^3.0.7",

"gulp-watch": "^4.3.5",

"vinyl-source-stream": "^1.1.0"

}

gulpfile.coffee 多くはドットインスト …

Electronでsqlite3を使ったアプリ

2016/01/24 -node.js
Electron, node.js

By: fdecomite – CC BY 2.0 環境 Windowsではsqlite3がうまく動かず. 以下は、OSX el capitanで行った. electronでnpmモジュー …

デスクトップアプリを作成できるフレームワークをWindowsで触ってみた～Electron

2016/01/24 -node.js
Electron, node.js

By: Adam Jenkins – CC BY 2.0 Electron Electronは、htmlやjavascriptといったウェブテクノロジーを使って、クロスプラットフォームなデ …

RailsのフォームにjQuery UIのSliderを使う

2015/05/02 -jQuery UI, Railsでの製作Tips
jQuery UI, rails

By: woodleywonderworks – CC BY 2.0 jQuery UI Slider slider 数値を選ぶ際に、視覚的にもわかりやすいし、ドラッグやワンクリックで選び …

Railsでdate_fieldにjquery uiのdatepickerを使おうとしたらchromeのdatepickerとかち合ってしまったとき

2015/04/30 -jQuery UI, Railsでの製作Tips
jQuery UI, rails

By: Randy Heinitz – CC BY 2.0 text_fieldにしとけば、jQuery UI datepickerは使える. [crayon-5952f3eb4a1c60 …

簡単にグラフが作成できるC3.jsをRailsでつかってみた

2015/04/27 -D3.js, Railsで使えるGem
d3.js, rails

By: Nguyen Hung Vu – CC BY 2.0 C3.js C3.jsはD3.jsをベースにしたグラフ描画のライブラリ. データを与えるだけできれいなグラフが描ける上に、カス …

jQueryプラグインでHTML5のデスクトップ通知〜HTML5-Desktop-Notifications

2014/12/20 -jQuery
html5, jquery

By: Chris Bowman – CC BY 2.0 デスクトップ通知 github.com/ttsvetko/HTML5-Desktop-Notifications src [cra …

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails＆marked.js

2014/11/24 -Backbone.js, JavaScript
backbone.js, markdown, marked.js, rails4

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 前回 Rails4でMarkdownをリアルタイムプレビュー〜vue. …

Rails4でMarkdownをリアルタイムプレビュー〜vue.js＆marked.js

2014/11/24 -JavaScript
markdown, rails4, vue.js

By: Matthew Wilkinson – CC BY 2.0 vue.jsとは vue.jsはインタラクティブなウェブインターフェイスのための軽量なJavascriptのフレームワー …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

2014/11/15 -JavaScript, jQuery, RailsでTwitterBootstrap, Railsで使えるGem
x-editable

x-editable 文字をダブルクリックして編集できるやつ x-editable vitalets.github.io/x-editable/index.html x-editable-rails …

軽快なアニメーションでソーティング・フィルタリングできるMixItUpを試してみた

2014/03/18 -jQuery
jquery

By: Soctech – CC BY 2.0 MixItUpは要素をアニメーションでソーティング・フィルタリングするjQueryプラグイン前に試してみたときは少し重かったけど、バージョ …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

2014/02/21 -Backbone.js, Railsで使えるGem
middleman, node.js

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

RailsでこんにちはBackbone.Marionette

2014/01/22 -Backbone.js, Railsで使えるGem
backbone.js, marionette.backbone

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

2014/01/12 -D3.js
d3.brush, d3.js

参考（というかほぼそのまま）【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) コントロール用のグラフ領域を作成するこのとき、便宜上、上をfocus、下をconten …

d3.jsのグラフにマウスオーバーでツールチップをつける

2014/01/12 -D3.js
d3.js

決め打ちでスタイルでフォントサイズを指定したツールチップがはみ出す場合の条件と処理を追加

  # interactive
  color = null
  svg.selectAll("rect")
    .on("mouseover", (d)->
      color = d3.rgb d3.select(@).attr("fill")
      d3.select(@).attr(
        cursor: "pointer"
        fill: color.darker()
      )
      info = svg.append("g")
        .attr
          class: 'info'
      info_width = 70
      info_height = 62
      info_x = if x_scale(d.tradeDate) + 30 + info_width< width
        x_scale(d.tradeDate) + 30
      else
        x_scale(d.tradeDate) - 30 - info_height
      info_y = if y_scale_reverse(d.highValue) - 30 > 0
        y_scale_reverse(d.highValue) - 30
      else
        y_scale_reverse(d.lowValue) + 30

      info.append("rect")
        .attr(
          x: info_x
          y: info_y
          width: info_width
          height: info_height
          stroke: "black"
          fill: "white")
      info.append("text")
          .text(d.tradeDate)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 10
            stroke: "black"
          )
     info.append("text")
          .text("始値: " + d.startValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 22
            stroke: "black"
          )
      info.append("text")
          .text("高値: " + d.highValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 34
            stroke: "black"
          )
      info.append("text")
          .text("安値: " + d.lowValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 46
            stroke: "black"
          )
     info.append("text")
          .text("終値: " + d.lastValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 58
            stroke: "black"
          )
    )
    .on("mouseout", ()->
      d3.select(@).attr
        fill: color
      svg.select('g.info')
        .remove()
    )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

# interactive

color = null

svg.selectAll("rect")

.on("mouseover", (d)->

color = d3.rgb d3.select(@).attr("fill")

d3.select(@).attr(

cursor: "pointer"

fill: color.darker()

)

info = svg.append("g")

.attr

class: 'info'

info_width = 70

info_height = 62

info_x = if x_scale(d.tradeDate) + 30 + info_width< width

x_scale(d.tradeDate) + 30

else

x_scale(d.tradeDate) - 30 - info_height

info_y = if y_scale_reverse(d.highValue) - 30 > 0

y_scale_reverse(d.highValue) - 30

else

y_scale_reverse(d.lowValue) + 30

info.append("rect")

.attr(

x: info_x

y: info_y

width: info_width

height: info_height

stroke: "black"

fill: "white")

info.append("text")

.text(d.tradeDate)

.attr(

x: -> info_x + 5

y: -> info_y + 10

stroke: "black"

)

info.append("text")

.text("始値: " + d.startValue)

.attr(

x: -> info_x + 5

y: -> info_y + 22

stroke: "black"

)

info.append("text")

.text("高値: " + d.highValue)

.attr(

x: -> info_x + 5

y: -> info_y + 34

stroke: "black"

)

info.append("text")

.text("安値: " + d.lowValue)

.attr(

x: -> info_x + 5

y: -> info_y + 46

stroke: "black"

)

info.append("text")

.text("終値: " + d.lastValue)

.attr(

x: -> info_x + 5

y: -> info_y + 58

stroke: "black"

)

.on("mouseout", ()->

d3.select(@).attr

fill: color

svg.select('g.info')

.remove()

)

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

2014/01/12 -D3.js, Railsで使えるGem
d3.js, rails4

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 jsonデータこんなかんじで

[{"tradeDate":"2001-07-13","startValue":1258,"highValue":1258,"lowValue":1239,"lastValue":1241,"dealings":706400},{"tradeDate":"2001-07-16","startValue":1245,"highValue":1249,"lowValue":1237,"lastValue":1241,"dealings":50200},{"tradeDate":"2001-07-17","startValue":1225,"highValue":1229,"lowValue":1220,"lastValue":1224,"dealings":78700},{"tradeDate":"2001-07-18","startValue":1226,"highValue":1226,"lowValue":1197,"lastValue":1199,"dealings":113100},{"tradeDate":"2001-07-19","startValue":1195,"highValue":1200,"lowValue":1189,"lastValue":1193,"dealings":93400},{"tradeDate":"2001-07-23","startValue":1196,"highValue":1196,"lowValue":1158,"lastValue":1159,"dealings":96900},{"tradeDate":"2001-07-24","startValue":1157,"highValue":1174,"lowValue":1155,"lastValue":1174,"dealings":99700},{"tradeDate":"2001-07-25","startValue":1174,"highValue":1198,"lowValue":1172,"lastValue":1188,"dealings":76300},{"tradeDate":"2001-07-26","startValue":1192,"highValue":1195,"lowValue":1187,"lastValue":1192,"dealings":17000},{"tradeDate":"2001-07-27","startValue":1192,"highValue":1194,"lowValue":1179,"lastValue":1185,"dealings":33200},{"tradeDate":"2001-07-30","startValue":1195,"highValue":1195,"lowValue":1165,"lastValue":1170,"dealings":48200},{"tradeDate":"2001-07-31","startValue":1177,"highValue":1190,"lowValue":1176,"lastValue":1190,"dealings":45200},{"tradeDate":"2001-08-01","startValue":1200,"highValue":1207,"lowValue":1192,"lastValue":1205,"dealings":61600},{"tradeDate":"2001-08-02","startValue":1225,"highValue":1238,"lowValue":1221,"lastValue":1237,"dealings":90700},{"tradeDate":"2001-08-03","startValue":1230,"highValue":1231,"lowValue":1220,"lastValue":1220,"dealings":42900},{"tradeDate":"2001-08-

1

[{"tradeDate":"2001-07-13","startValue":1258,"highValue":1258,"lowValue":1239,"lastValue":1241,"dealings":706400},{"tradeDate":"2001-07-16","startValue":1245,"highValue":1249,"lowValue":1237,"lastValue":1241,"dealings":50200},{"tradeDate":"2001-07-17","startValue":1225,"highValue":1229,"lowValue":1220,"lastValue":1224,"dealings":78700},{"tradeDate":"2001-07-18","startValue":1226,"highValue":1226,"lowValue":1197,"lastValue":1199,"dealings":113100},{"tradeDate":"2001-07-19","startValue":1195,"highValue":1200,"lowValue":1189,"lastValue":1193,"dealings":93400},{"tradeDate":"2001-07-23","startValue":1196,"highValue":1196,"lowValue":1158,"lastValue":1159,"dealings":96900},{"tradeDate":"2001-07-24","startValue":1157,"highValue":1174,"lowValue":1155,"lastValue":1174,"dealings":99700},{"tradeDate":"2001-07-25","startValue":1174,"highValue":1198,"lowValue":1172,"lastValue":1188,"dealings":76300},{"tradeDate":"2001-07-26","startValue":1192,"highValue":1195,"lowValue":1187,"lastValue":1192,"dealings":17000},{"tradeDate":"2001-07-27","startValue":1192,"highValue":1194,"lowValue":1179,"lastValue":1185,"dealings":33200},{"tradeDate":"2001-07-30","startValue":1195,"highValue":1195,"lowValue":1165,"lastValue":1170,"dealings":48200},{"tradeDate":"2001-07-31","startValue":1177,"highValue":1190,"lowValue":1176,"lastValue":1190,"dealings":45200},{"tradeDate":"2001-08-01","startValue":1200,"highValue":1207,"lowValue":1192,"lastValue":1205,"dealings":61600},{"tradeDate":"2001-08-02","startValue":1225,"highValue":1238,"lowValue":1221,"lastValue":1237,"dealings":90700},{"tradeDate":"2001-08-03","startValue":1230,"highValue":1231,"lowValue":1220,"lastValue":1220,"dealings":42900},{"tradeDate":"2001-08-

y_scale …

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

2014/01/11 -D3.js, Railsで使えるGem
d3.js, rails4

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

Backbone-formsをさわってみた

2013/12/22 -Backbone.js
backbone.js

github.com/powmedia/backbone-forms backbone-formsの特徴簡単なスキーマでフォームを生成バリデーションネストしたフォーム使えるそしてカスタマイズ可 …

「 JavaScript 」一覧

Redmine Backlogsではじめてのスクラム

RubyでWebを操作できるMechanizeの利用例を集めてみた

Redmine2.0にファイル管理プラグインを導入～redmine_dmsf

ActiveRecord使い方まとめ

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

TortoiseSVNをsvn+sshリモートリポジトリで使う準備

d3.jsでグラフ描画するときの枠組み作成のメモ

Redmineのトラッカー、チケットのステータス、ワークフローを考える

MSWord2010で領収書を差し込み印刷

Rails4.0でBootstrap導入のあれこれ～bootstrap-sass simple_form kaminari dataTables

「 JavaScript 」 一覧

「 JavaScript 」一覧