RoadMovie

write down memos or something I found about tech things

ng-mtg#4 AngularJS勉強会 #ng_jp

勉強会

Togetter
http://togetter.com/li/598391?utm_source=dlvr.it&utm_medium=twitter

2013/12/03＠サイバーエージェントでのAngularJS勉強会に行ってきました！

僕は普段JSを書きまくってるわけではないですが前回のプロジェクトでBackboneを使っていたので最近話題のAngularにも興味を持ち始めた（とはいえ触ったことは一切ない）という状態で参加しました。

楽しかったー！ほとんどメモですが書きますー。 　

AngularJS 20min

AngularJS 20min #ng_jp // Speaker Deck

@naoya_ito さん
はじめにこの発表があったおかげでかなりangularが腹落ちした感じでこの後のセッションをきくことが出来ました。さすがでした。初心者or まだ触ったことがない方はぜひスライドを見てみるといいと思います！

# memo

AngulerJSはjs MVW Framework
Model View Whatever
(初期はMVVMっぽかったけどそういう議論は時間の無駄)

MVCとかっていう型よりangularjsはangularjsって思って学ぶ方がいい

特徴
・htmlそのものがテンプレート
・双方向バインディング

ng-controllerとかng-repetとかをhtmlに書いていく感じ
アプリ側に関数用意して$scopeで渡す

アプリ側（angularjs側）はDOMの構造を知らない
DOM関連の値がない。HTMLからアプリを掴みに行く

HTML構造の変更に強い
要するにtemolate-toolkitとかerbとかみたいなもの

アプリ側から見た目を動的に替えたい時はngshowとかで
なるだけDomを掴まない

制約ある
HTMLにロジックは書けない

リモートのJSONデータもバインド

フィルター機能も簡単
FormValidationもある

HTMLを拡張して動的なアプリを作るのに必要な機能をいっぱい追加してるのがangularjs

本格的に使おうとすると大変な部分もある

簡単なものをさらっと作る場合には本当に労力使わずに綺麗に高機能に作れそうだなという印象。とりあえず使ってみたい！
　

OnsenUI

続いてOnsenUIを作っているお二方の登壇。
Home | Onsen UI

OnsenUI モバイル用のUIを簡単に作れる

元自衛隊員の方とカンボジア出身の方の発表でした。なんとメモを取っていない、、AngularJSを多少使っている方には良いプレゼンだったかも！AngularというよりOnsenUIに興味を持ちました！ （スライドも発見できず。。見つけたら追記します！）

　

実践! AngularJS

@sakatam さん

AngularJS 勉強会 #4 - 実戦！AngularJS // Speaker Deck

実践でどうAngularを使っていくかという発表とその時のTipsなど。実務で導入できるようになったらもう一度見直したいスライドでした！開発スケジューリングも勉強になりました。

# memo

柔軟性にはbakboneに劣るが
モジュール／ベースの開発を強制
DI/Module
 APIレスポンスもmock可能

week1-3
開発基盤づくり
　ファイル構成、ビルドプロセスを調べたり
　APIクライアントなどの基底クラス
week4-5
チーム展開
　フロントエンドエンジニアにしっかり慣れてもらう
　DI/モジュール志向/テストファーストの概念理解
　ちょっとしたdirectiveを作ってみる
week6-12
実開発


普通にテストファーストでできる
モデリング→UnitTest→Viewスケルトン実装
End2EndTestはクリティカル・パス確認用

　　

目指せ脱初心者！あなたの知りたかったAngularJS

@agektmr さん

Directiveの話をかなり詳しくしてくださってましたが、聞き入ってしまっていてほとんどメモとれず。。後日スライドあげてくださるようなのでこちらも追記します。

# memo

これ使うと便利
http://jsbin.com/welcome/1/edit


書き方が超勉強になると実力者の方々がおっしゃっていたもの。
本家の方々が書いたやつ
http://demo.agektmr.com/flexbox/

web-components
polymer-project

　

以下LTメモです。一人目の方のしかメモしてなかった、、

angularjs入門 @Tkashiro さん。kayacの方

social-counter <- Angularで作ったもの

【初心者が学ぶときにおすすめなリンク集】
動画で学べるサイト。これが全てといってもいい
egghead.io: Learn AngularJS with Tutorial Videos & Training @eggheadio

Page not found · GitHub Pages
AngularUI for AngularJS
Popular Modules - AngularJS Modules, Plugins and Directives

　

まとめ

JSそのものを書くことが楽になりそう。backboneよりも最初の勉強コスト低い？業務で一度使ってみたいなーー！！！って感じ！

かなり有意義な勉強会でした！
主催者のみなさん、登壇者の皆さん、ありがとうございました！

Capybara使うときに横に置いておくと有用なリンク集

Capybara

　

他にあればぜひ教えて下さい！

CapybaraでE2Eテストを始める

Capybara Ruby

WAFに依存しない形でCapybaraを導入してE2Eテストを書けるようになるところまでの導入です。テストの実行自体はRSpecを使います。

$ mkdir capybara-test
$ cd capybara-test

適当にGemfileを作ってbundle installで入れます

# Gemfile
source "http://rubygems.org"

gem "rspec"
gem "capybara"
gem "capybara-webkit"

今回はcapybaraのドライバーはcapybara-webkitを使用しています。

※capybaraのドライバについては下記リンクが詳しいです。
poltergeist - Capybaraを使う際に知っておきたいこと - Qiita [キータ]

　

$ bundle install

ここでqtがないからインストールできない的なエラーが出るかもしれません。上記リンクに記述がある通りcapybara-webkitがqtに依存しているからです。 その場合は下記リンクより自分の環境に合わせた解決策を実行してみてください。（私の場合はmacだったので、brew install qtでできました）

Installing Qt and compiling capybara webkit · thoughtbot/capybara-webkit Wiki · GitHub

　

インストールできたら、次にrspec initでspecディレクトリとspec_helper.rbを作ります。

$ bundle exec rspec --init

capybaraを使うためspec_helperに次の記述を追加します。

# spec_helper.rb
require 'capybara/rspec'
require 'capybara-webkit'

# ここは各自合わせて下さい
Capybara.app_host = 'url'
Capybara.javascript_driver = :webkit

RSpec.configure do |config|
  …

  config.include Capybara::DSL
end

ここまでできたらあとはspecファイルをsepcディレクトリ内に作っていってテストを実行していきます。

# spec/login_spec.rb

require 'spec_helper'

describe 'login', :type => :feature, :js => true do
  it do
    visit 'http://test.com/login'
    fill_in 'login', :with => 'test_user'
    fill_in 'password', :with => 'password'
    click_button 'Login'
    expect(page).to have_content('Logged in as')
  end
end

詳しい書き方はREADMEを見て下さい。

https://github.com/jnicklas/capybara

　

あとはアサーションを書いてキャプチャを撮ったりも簡単にできるのでどんどん書いて実行していってみてください。

Rubyのワンコールブロックがイケメンな話

Ruby

またメタプログラミングRubyネタ。小ネタです。

著者がRubyは簡潔にかけていいけどイケてないと言っているのが

name = ["i", "my", "me"]
name.map{|n| n.capitalize }
#=> ["I", "My", "Me"]

って感じのが、パイプとか中括弧とかでブロック作ってややこしい、と。 確かにその通りです。ちなみにこれをワンコールブロックというそうです。

ですが、これをRuby1.9以降ならSymbolのProc変換という方法で超簡潔にかけちゃいます！

name = ["i", "my", "me"]
name.map(&:capitalize)
#=> ["I", "My", "Me"]

string_numbers = ["1", "2", "3"]
string_numbers.map(&:to_i)
#=> [1, 2, 3]

イケメン！！ ちなみに1.8系とかでも自分で簡単に実装できちゃいます。

なぜこれが動くかとかは下記のサイトが丁寧だったのでご参考まで。

Symbol#to_proc でワンコールブロックを簡潔に書こう - わからん

Rubyのメソッドの引数あれこれメモ

Ruby

配列引数

複数の引数を1つの配列として扱うにはアスタリスクをつける

def my_mthod(*args)
  args
end

my_method(1, 'hoge', 'three')
#=> [1, 'hoge', 'three']

キーワード引数

Ruby 2.0からの機能（同じことは1.9系とかでもできるがハッシュを展開しないとダメ）

def my_method(name: 'test user')
  name
end

my_method(name: "test new user")
#=> "test new user"

メソッド定義の際の引数にdef my_method(:name => 'test user')って書き方はできないみたい。 ただ、メソッドを呼び出す際の引数に上記は可能。つまりmy_method(:name => 'test new user')はOK

Rubyist Magazine - Ruby 2.0.0 のキーワード引数

　

ブロック引数、Procの引数に関しては下記のQiitaの記事が非常にわかりやすかったのでぜひご一読下さい。

[Ruby基礎] ブロックとProcをちゃんと理解する - Qiita [キータ]

MySQLのデータを定期実行でバックアップ

mysql サーバー

サービス運用してるとバックアップ取ると思うのですが、
毎回調べるので自分のブログにメモ。

backup_db.shとかで。 このシェルスクリプトをcronで定期実行するイメージです。

#!/bin/bash

TODAY=`date +%Y%m%d`
BACKUP_DIR=/data/backup/db
BACKUP_INTERVAL='+3'

for database in `mysql -uroot -N -s -e"show databases"`; do
    if [ $database == 'DB名' ]; then
        nice mysqldump -uroot --single-transaction --no-autocommit ${database} | pbzip2 -cv -p4 > ${BACKUP_DIR}/${database}-${TODAY}.sql.bz2
    fi
done

find ${BACKUP_DIR} -type f -name "*.bz2" -mtime ${BACKUP_INTERVAL} | xargs rm -Rf

　

ちなみにcronはこんな感じ

0  4 * * * root sh /path/to/backup_db.sh   > /dev/null 2>&1

Rubyでxls(Excelファイル)を簡単にパースする方法

Ruby Rails

すごく簡単でドキュメント通りな内容なのですが、非常に便利だったのでメモ。

その名もSpreadsheetというgemを使います。 https://github.com/zdavatz/spreadsheet/blob/master/GUIDE.md

# Gemfile
gem 'spreadsheet'

# vim hoge.rb
Spreadsheet.client_encoding = 'UTF-8'

book = Spreadsheet.open '/path/to/an/excel-file.xls'
sheet1 = book.worksheet 0 # スプレッドシートの1枚目を指定

sheet1.each do |row|
  # do something interesting with a row
end

たったこれだけです！超簡単！ 配列でrowの部分にデータが入ってくるので扱いやすくてよいです。

スプレッドシートの指定の仕方はindexで指定しているのですが（なので2枚目だと1を指定すればよいです）、シート名をそのまま書いても大丈夫なようです。(ex. sheet1 = book.worksheet 'Sheet1')

また、Spreadsheet.open部分はRailsの場合だとexpand_pathとか使えなくてめんどくさそうと思ったのですが、普通にアプリルートからのパスで通りました。

なのでbatchスクリプト内で実行する際は

book = Spreadsheet.open 'bin/batch/excel-file.xls'

などと書いておいて、コンソールから

$ rails r bin/batch/hoge.rb

で大丈夫です。