Ruby 勉強会

  

■rbenvをシステムワイドにインストールする
http://office.tsukuba-bunko.org/ppoi/entry/systemwide-rbenv

### rbenvを使ったrubyのインストール方法
sudo rbenv install -l
sudo rbenv install 2.1.5
sudo rbenv global 2.1.5
ruby -v

■.gemrcの--no-ri, --no-rdocの書き方新旧
http://qiita.com/atakigawa/items/5debe1c351ee9a51ed3d

### /root/.gemrc
install: --no-document
update: --no-document

■環境設定(bashの例)

### ~/.bash_profile
export RBENV_ROOT="//img02.ti-da.net/usr/local/rbenv"
export PATH="${RBENV_ROOT}/bin:${PATH}"
eval "$(rbenv init -)”

■サンプルコード

cd /tmp
rails new myapp -TB
cd myapp
bundle install
rails g scaffold blog title content:text
rake db:migrate
rails s -b 0.0.0.0
# open http://192.168.1.1:3000/blogs/

  

L-05Aを入手しました。

調べてみると以下の手順が見つかる。

1. L-05Aを刺す。
2. cdromとして自動認識されるのでejectする。
$ eject /dev/cdrom
3. ppp接続

私の場合、手順2で認識されなかった。
更に調べてみると、usb-modeswitch が干渉するよなので削除。
$ apt-get remove usb-modeswitch

これで、cdromとして認識され手順が進んだ。  

$ ruby -v
ruby 2.0.0p643 (2015-02-25 revision 49749) [x86_64-linux]
$ rails -v
Rails 4.2.1

# HTML

<meta name="csrf-param" content="authenticity_token" />

<meta name="csrf-token" content="3qzVAnYwSX6VjH5NYY57cnokuwVBdfUmHo5zKIGYWvKSHOiJoqTNem3zjmK3+0idTczeYiVHyTJsg6sbXa1+DA==" />



<input type="hidden"

 name="authenticity_token"

 value="hWu4EQJayinqjvTqxRHVgRM5t6L7AiFDiC0X5rmU5RjJ24Wa1s5OLRLxBMUTZOZuJNHSxZ8wHVf6IM/VZaHB5g==" />

CSRF対策がdefaultでONになっています。
このとき、GETしたHTMLに、AUTHENTICITY_TOKENが埋め込まれるのですが、
ヘッダ内のmetaタグと、フォーム内のhidden属性のパラメータと、2箇所に埋め込まれています。
それぞれのTOKENは、値が異なるため、どちらを使っていいのか悩みます。
普通に考えると、送信フォームに埋め込まれたTOKENを使うのが自然だと思ってたが、
ブラウザの動きを観察していると、どうもmetaタグのTOKENを利用しているようだ。

調べてみると、値は異なるが、乱数がXORされており、
デコードしてみると、同じ値が取り出せることが分かった。
どうやら、metaタグを使っても、hiddenパラメータを使っても、
サーバ側では同じ扱いとなるようだ。

めでたし、めでたし。

https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/request_forgery_protection.rb#L312-L314

#!/usr/bin/ruby



require "base64"



token0="3qzVAnYwSX6VjH5NYY57cnokuwVBdfUmHo5zKIGYWvKSHOiJoqTNem3zjmK3+0idTczeYiVHyTJsg6sbXa1+DA=="

token1="hWu4EQJayinqjvTqxRHVgRM5t6L7AiFDiC0X5rmU5RjJ24Wa1s5OLRLxBMUTZOZuJNHSxZ8wHVf6IM/VZaHB5g=="



AUTHENTICITY_TOKEN_LENGTH=32



def xor_byte_strings(s1, s2)

  s1.bytes.zip(s2.bytes).map { |(c1,c2)| c1 ^ c2 }.pack('c*')

end



def decode_mask(encoded_masked_token)

  masked_token = Base64.strict_decode64(encoded_masked_token)

  one_time_pad = masked_token[0...AUTHENTICITY_TOKEN_LENGTH]

  encrypted_csrf_token = masked_token[AUTHENTICITY_TOKEN_LENGTH..-1]

  csrf_token = xor_byte_strings(one_time_pad, encrypted_csrf_token)

  Base64.strict_encode64(csrf_token)

end



p decode_mask(token0) # => "TLA9i9SUhAT4f/Av1nUz7zfoZWdkMjwUcg3YM9w1JP4="

p decode_mask(token1)  #=> "TLA9i9SUhAT4f/Av1nUz7zfoZWdkMjwUcg3YM9w1JP4="

「Can't verify CSRF token authenticity」
TOKENが誤ってたり、古かったりするとエラーになります。  

ハンズオンに参加してきました。

スライド
http://www.prime-strategy.co.jp/resource/pdf/WordPressOnAzureTokyo.pdf

一般的には、500～1000ms
高速化すると200msくらいになる。

Webサイト(共有モード)だと、
ページキャッシュによる高速化。
仮想マシンなら、更に高速化できる方法あり。

インスタンスの種類
A系インスタンス：CPU-AMD/HDD
D系インスタンス：CPU-Xeon/SSD+HDD。お値段は、A系より2割り増し。

高速化の手法
(1)PHPアクセラレータ
→PHPの中間コード(バイトコード)のキャッシュ
　5.4までは、APC
　5.5以降は、OPcache+APCu拡張
(2)MySQLのクエリキャッシュ
→参照系クエリー(select文の結果)のキャッシュ
(3)翻訳キャッシュ
→001 Prime Strategy Translate Accelarator
(4)Apache(mod_php)から、Nginx(fastCGI)+HHVM構成に変更
(5)ページ圧縮(gzip)

HHVM:HipHop Virtual Machine
FaceBook謹製のphp実行エンジン
公式のPHP実装であるZend Engine互換

Zend：中間言語→実行
HHVM：中間言語->マシン語->実行


測定
$ ab -n 200 -c 10 http://xxxxxx.cloudapp.net/wordpress/  

http://jaws-ug.jp/es/okinawa201501/

■チームメンバ
照屋さん(リーダ)
山城さん
後藤さん
當間さん


AWS
http://aws.amazon.com/jp/

CDP(Cloud Design Pattern)

今日のお題：
http://www.slideshare.net/KoichiroNishijima/20150124-cdp
https://github.com/naotty/20150124-jawsug-cdp-theme/blob/master/draft.md
ハッシュタグ(#jawsug)


■照屋さんチーム
softbank
セキュアプロクシ

個人の認証サービス
amazon-SNS

AMI：サーバのすなっぷしょっと

ELB:ロードバランサ
EC2:

Elastic Cache
http://aws.amazon.com/jp/elasticache/

「Elastic Beans Talk」といサービスがある。
こみこみさーびす。



Cloud watchが監視してAutoScaleをする。


Autoscale Cloud watchはセットで利用できる。

ELBはEC2に付加分散する際に、Headlth チェックして死活する。


Root53:DNSサーバ

Multi-AZ:RDSデータベースの冗長化
http://aws.amazon.com/jp/rds/multi-az/


http://calculator.s3.amazonaws.com/index.html
見積もりツール


s3より安いストレージがある！Glacier(ぐらしあ)
http://aws.amazon.com/jp/glacier/



ワークスペーシーズ：ipadの中にwindowsを動かすことが出来る？！
シンクライアントサービス


Google画像検索で「aws autoscaling」とするとデザインパターンがたくさん見ることが出来る。


システムのアラート配信サービス？
SNS http://aws.amazon.com/jp/sns/
SES http://aws.amazon.com/jp/ses/


ラムダ？コマンド投げると実行してくれる。東京リージョンではまだサービス始まっていない。

クラウドフロントのキャッシュ機能を使うともっと効率が上がるか？

■福嶺さんチーム
TD:トレジャーデータ？
RD:れっどなんちゃら？
北京リージョンは、いろいろ問題ある？！

■与儀さんチーム
kinesis(きねしす)
http://aws.amazon.com/jp/kinesis/

Redshift(れっどしふと)
http://aws.amazon.com/jp/redshift/
http://gihyo.jp/dev/serial/01/redshift/0001


■西島さん
ログアグリゲーションパターン
EB？
NATはautoscaleできない。負荷に応じて手動で。(そんなに飽和しないが)
ELBでインバウンドのトラフィック制御も。

インターネットゲートウェイを VPC に追加する
http://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_Internet_Gateway.html
Amazon EC2 インスタンスの IP アドレッシング
http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-instance-addressing.html



  

参考URL: https://gihyo.jp/dev/serial/01/phonegap2/0003
「第3回　weinreを使ったiOS／Androidアプリの動作検証」
大変参考になりました。ありがとうございます。

weinre（WEb INspector REmote）とは，リモート接続可能な「Webインスペクタ」です！！

超まとめ

 # インスペクタ起動

DOS1> npm install weinre

DOS1> node_modules\.bin\weinre --boundHost -all-

 # ターゲットサーバ起動

DOS2> vi index.html # 以下のコード(a)を挿入

DOS2> grunt # サーバ起動

 # コード(a)

<script src="http://(IPアドレス):8080/target/target-script-min.js#(任意の文字列)"></script>

http://localhost:8080 # weinreの動作確認
http://localhost:8080/client/#(任意の文字列) # インスペクタ画面  

参考URL: http://qiita.com/nantekkotai/items/d2f6a697f7b12ff6245f
ありがとうございます。大変参考になりました。

超まとめ

npm init

npm install grunt-contrib-connect

vi Gruntfile.js

grunt [default]

 ##  Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    connect: {

      server: {

        options: {

          port: 9000,

          keepalive: true,

          hostname: 'localhost'

        }

      }

    }



  });

  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('default',['connect']);

};

  

参考URL: http://nantokaworks.com/p1047/
「Yeomanでフロントエンドとバックエンドサーバを一緒に開発する」
大変参考になりました。ありがとうございます。

Yeah men！！
Yeoman！すごく便利です！
バックエンドとの通信部分をモックサーバを立てて開発を進める方法が紹介されていたので実験してみました。
ツールのバージョンも上がって、少し様子が違ってました。
npm view yo version #=> 1.3.2
npm view grunt-cli version #=> 0.1.13
npm view bower version #=> 1.3.12
npm view generator-webapp version #=> 0.5.1
npm view easymock version #=> 0.2.6
npm view grunt-connect-proxy version #=> 0.1.11



Yomanで土台を作成

cd test_yeoman

yo webapp # テンプレートの生成

grunt serve # サーバの起動。動作確認。

モックサーバの用意

npm install -g easymock # 管理者権限で。

cd test_easymock

mkdir api

echo "{}" > api/config.yml # JSON形式(空)

cat <JSON > api/_get.json # コンテンツ

[

  { "id": 1, "user": "AAA", "message": "aaaa" },

  { "id": 2, "user": "BBB", "message": "bbbb" },

  { "id": 3, "user": "CCC", "message": "cccc" }

]

JSON

easymock # モックサーバ起動。

Proxy用パッケージ導入

npm install grunt-connect-proxy --save

# npm install -D grunt-connect-proxy # 同じ意味

#「--save/-D」をつけないとpackage.jsonに追記されないのでgruntがコケます。注意！

モックサーバとの通信デモの作成
app/scripts/main.jsに追加

'use strict';

$.getJSON('/api/', function(data){

  var ul, _i, row, li, txt, _arr;

  ul = document.querySelector('div.ajax > ul');

  _arr=[];

  for (_i=0; _i
    row = data[_i];

    li = document.createElement('li');

    txt = document.createTextNode(row.id+", "+row.user+", "+row.message);

    li.appendChild(txt);

    ul.appendChild(li);

    _arr.push(ul);

  }

  return _arr;

})

app/index.htmlに追加

<div class="ajax">

  <ul></ul>

</div>

Gruntfile.jsに追加。gruntも再起動する。

'use strict';

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest; // ★追加



livereload: {

  options: {

    middleware: function(connect) {

      return [

        proxySnippet, // ★追加

        connect.static('.tmp'),

        connect().use('/bower_components', connect.static('./bower_components')),

        connect.static(config.app)

      ];



    }

  }

},

// ★追加★ここから

proxies: [{

    context: '/api',

    host: 'localhost',

    port: '3000',

    https: false,

    changeOrigin: false

}],

// ★追加★ここまで



grunt.registerTask('serve', '----', function (target) {

  grunt.task.run([

    'clean:server',

    'wiredep',

    'concurrent:server',

    'autoprefixer',

    'configureProxies', // ★追加

    'connect:livereload',

    'watch'

  ]);

});

○API仕様とアクセスログはこちらから～
http://localhost:3000/_documentation/
http://localhost:3000/_logs/
  

参考URL:「RequireJSの導入から使い方（Bowerにも触れてみる）」
http://yutapon.hatenablog.com/entry/2014/02/16/003052

■チュートリアル
http://requirejs.org/docs/start.html

 <script src="require.js" data-main="main.js"></script> 

上記のようにrequire.jsを通して、各モジュールを呼び出して使用する。
各モジュールは、AMD（Asynchronous Module Definition)を利用して、非同期に依存関係のあるライブラリを読み込むような記述スタイルとなる。このままだと、依存関係は、クライアント側で非同期に解決することになる。
RequireJSは、コードを最適化(圧縮)するツールが付属していて(r.js)、依存関係をサーバ側で解決して、コードを置き換えて公開する。。。という感じでしょうか？

でも、更に調べてると、今後は推奨されないライブラリになりそうな予感。覚えたばかりなのにもう古いとは。悲しい。。
「AMD をサポートしない理由」
https://gist.github.com/uupaa/6290853

「RequireJS等はもう古い。WebPackとは？」
http://ameblo.jp/ca-1pixel/entry-11884453208.html

■デモ

git clone https://github.com/volojs/create-template

cd create-template

node tools\r.js -o tools\build.js

diff www\app.js www-built\app.js

# jsコードが圧縮されていることが分かります。

  

■まとめ
Yeomanは、MVCで言うところの「V」の部分の開発環境。

Yeomanを構成するツール群
「yo」ひな型生成ツール
「Bower」JavaScriptライブラリ依存管理
「Grunt」ビルド&タスクランナー

■Yeomanインストールと実行例

# nodejs と npmは、別途インストールする。

npm install -g yo grunt-cli bower # 一気にインストール

yo

grunt serve

■yoの実行例

[vagrant]$ yo

[?] What would you like to do? Install a generator

[?] Search NPM for generators: angular

[?] Here's what I found. Install one? generator-angular

npm http GET https://registry.npmjs.org/generator-angular

■bowerインストールと実行例
bower 自身のインストール(-g : グローバル)
npm install -g bower
Twitter製。設定ファイルは"bower.json"
bower_components以下にjsライブラリをインストールする

(0) bower init



(1a) bower install # 設定ファイル(bower.json)に従いインストール

(1b) bower install underscore --save # 個別インストール&設定追記

(1c) bower install modernizr jQuery normalize.css --save # 同上



(99) 移植の際は、bower.jsonをコピーして(1a)を実行するのみ。

■その他メモ
「--save」と「--save-dev」の違い
--save-devで追記されたパッケージは、
「--production」を付けるとインストールされない。

CentOSでインストール
rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
yum install nodejs npm --enablerepo=epel

■トラブルシュート

npm  ERR:  peerinvalid The package [パッケージ名] does not satisfy its siblings peerDependencies requirements

npm  ERR:  peerinvalid Peer generator-webapp@0.5.0 wants yo@>=1.2.0

解決方法
npm install -g yo@1.2.0
npm install -g npm@1.4.9 # 場合によっては、npm(node.js)も最新に！[参考URL]