ラジオ(radio) ボタンにチェックが入っているかをテストする、よくわからなくなるので覚書として描いておきます。

最初のラジオボタンが選択されていること ただ、最初のラジオボタンが選択されていることだけ検証してもしょうがない

expect(first('input[type=radio]')).to be_checked

'Credit Card'という文言のラベルが書かれたラジオボタンにチェックが入っていること チェックボックスに付けられたラベルで検証できるので順番は関係ない

expect(page.has_checked_field?('Credit Card')).to be_true

inputにフォーカスさせたい

execute_script("$('#search_word').focus()")

参考

Railsでspecを流してみたら、なぜだが標準出力にSQLなどが出力されるようになってた上に、log/配下に何も出力されなくてかなりハマった.

herokuにデプロイするときに、くわえていた rails_12factorproduction 限定にしていなかったのがよくなかったみたい。

たったそれだけのことだった。

 gem 'rails_12factor', group: :producdtion

https://github.com/heroku/rails_12factor

追記: 2016/03/06

ここにも困っている人がいた

http://ja.stackoverflow.com/questions/9597/%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E3%81%AEproduction-log%E3%81%AB%E3%83%AD%E3%82%B0%E3%81%8C%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84

とりえあえず、CoreOSを立ち上げるまで

brew cask install vagrant
ghq get  https://github.com/coreos/coreos-vagrant/
cd coreos-vagrant
git co -b spike
vagrant up

直前のwindowに移動

再度、実行すると直前にいたwindowに交互に移動することができる

直前のWindowへ移動 : Ctrl+w p

brew uninstall gnuplot brew cask install xquartz brew install gnuplot --with-x11

よく忘れるので gnuplotについてメモ 3次元のグラフを表示してみる

# x y z
11 11 11
21 21 21
31 31 31
41 41 41
51 51 51
61 61 61
71 71 71
81 81 81
type set to 'aqua'
set dgrid3d 100,100
set hidden3d
splot 'h' using 1:2:3 with line

postgres 使うときのGUI sequel Pro(mysql) の postgresql 版

http://www.psequel.com/

postgresqlで追加のsuperuserを作成する

createuser --createdb --superuser --password postgres
~/src/github.com/rails/rails/railties/bin/rails new auth_app -T --skip-bundle

generate migration

be rails g model user name:string
be rails g model identity user:reference email password_digest

イメージのあるディレクトリに移動する

cd ~/Desktop

isoをtarget.imgに変換する

hdiutil convert -format UDRW -o target.img ubuntu.iso

USBの/dev/disk?を探す、おおよそdisk2になるはず

diskutil list

アンマウントして、imgをUSBに書き込む

diskutil unmountDisk /dev/disk2
sudo dd if=target.img.dmg of=/dev/rdisk2 bs=1m

取り出して完成

diskutil eject /dev/disk2

やってみたこと

electronでとあるチャットの内容をみるだけのアプリを作ってみた。 macのメニューバーにアイコンが表示されて、クリックするとチャットの内容を 一覧で表示することができる。また、新着メッセージがあったときに デスクトップに通知を表示、メニューバーアイコンを未読有りののアイコンに 変更するなど基本的な動作を実装してみた。

https://github.com/fukajun/coincheck-chat-notifier

実装において、react.js と gulp を利用して開発を行っている。 実際の細かい実装はともかく、まず作る部分にフォーカスして書いてみた。

start

mkdir start
cd !$
npm init -y
npm install --save electron-packager
npm install --save electron-prebuilt
npm install --save menubar

index.js作る

var menubar = require('menubar')

var mb = menubar()

mb.on('ready', function ready () {
  console.log('app is ready')
})

package.js の main に書かれたファイルが アプリが起動する時のエンドポイントとなる メインプロセス側の処理となる

view.js作る

フロント側の表示に使用する処理のためのファイルを作成しておく

alert('run')
index.html作る
<body>
  <div id='app'></div>
  Hello everyone!
  <script type='text/javascript' src='./view.js'></script>
</body>

起動

$ electron .

これでメニューバーに猫のアイコンが現れて起動できたかと思う

react + es2015 で作る準備

reactを使うためのパッケージインストール

$ npm install --save react react-dom

jsx es2015 gulpを使うためのパッケージインストール

$ npm install --save-dev babel babel-preset-es2015 babel-preset-react gulp gulp-babel gulp-load-plugins gulp-notify gulp-plumber

gulpファイルの作成

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var plumber = require('gulp-plumber')

function errorHandler(err) {
  var list = err.message.split(':')
  var head = list.shift()
  var body = list.join(':')
  var paths = head.split('/')
  console.log(err.message)
}

gulp.task('build', function() {
  return gulp.src('./source/*.js')
  .on('error', errorHandler)
  .pipe($.babel({presets: ['es2015', 'react']}))
  .pipe(plumber({errorHandler: errorHandler}))
  .pipe(gulp.dest('./'))
})

gulp.task('watch', function() {
  gulp.watch('./source/*', ['build'])
})

gulp.task('default', ['build', 'watch'])

ソースコードの場所の移動

mkdir source
mv index.js source/
mv view.js source/

reactを使用したコードを書く

source/view.js

document.addEventListener("DOMContentLoaded", ()=> {
  ReactDom.render(<div>Hello react</div>, document.getElementById('app'))
})

gulpを実行

gulp

electronを起動

electron .

これでひとまず、react.jsが使えて、es2015な書き方もできるようになった

メインプロセスとレンダラープロセス

メインプロセス : node.js レンダラープロセス : chroium

2つの違いは、

  • レンダラープロセスではGUI関連のAPIの呼び出しを許可されていない
    • これは、Webページ(レンダラープロセス)でGUIリソースを扱うことは危険
    • 簡単にリークされてしまう

なのでレンダラープロセスからGUI関連の処理を行いたい場合は、 electronが用意しているipc(プロセス間通信)を通して行う必要がある。

http://electron.atom.io/docs/v0.36.0/tutorial/quick-start/#differences-between-main-process-and-renderer-process

メインプロセスが使えるモジュールを見るとこの辺かなという感じ

http://electron.atom.io/docs/v0.36.0/#modules-for-the-main-process

  • トレイアイコンの変更
  • メニュバーの操作
  • Windowの表示周り
  • アプリケーションのアップデート周り

レンダラープロセスでしかできないこと

http://electron.atom.io/docs/v0.36.0/#modules-for-the-renderer-process-web-page

  • もちろんWebページ内の操作 html操作
  • デスクトップキャプチャー

プロセス間での情報のやり取り方法

メインプロセス: ipcMain レンダラープロセス: ipcRenderer

をそれぞれ require して使う

レンダラープロセス側

import { ipcRenderer } from 'electron';

ipcRenderer.on('response', (event, arg)=> {
  // メインプロセスからレスポンスが帰ってくる
  console.log(arg)
})
ipcRenderer.send('request');

メインプロセス側

import { ipcMain } from 'electron';

ipcMain.on('request', (event, arg) => {
  // ココで何か処理をして送り返すデータを作る 
  event.sender.send('response', data);
});
module Document
  def self.included(arg)
    puts 'in included'
    p arg
  end
  def print_to_screen
    puts 'd pirnt to screen'
  end
end

module Printable
end

#p self

puts 'before main'
#include Document
#include Printable
#print_to_screen

puts '----'

class Moge
  include Printable
end
p Moge.ancestors
class Moge
  include Document
end
p Moge.ancestors
#Moge.new.print_to_screen
#
p Class.new.class.class
MyClass = Class.new
class MyClass
end
myclass = MyClass.new
p myclass.class
MyModule = Module.new
module MyModule
end

mymodule = MyModule.new
p mymodule.class
before main
----
[Moge, Printable, Object, Kernel, BasicObject]
in included
Moge
[Moge, Document, Printable, Object, Kernel, BasicObject]
Class
MyClass
/var/folders/y5/17_0d4z511n05lp3b34bzghh0000gn/T/v9uQTSD/5:44:in `<main>': undefined method `new' for MyModule:Module (NoMethodError)

Recent Entries