2012/05/13

[hokkaidopm]Hokkaido.pm#7 参加しました

Hokkaido.pm#7

Hokkaido.pmに行って来ました
私の今回の発表は「DancerでWebアプリ再入門」です。

Using Dancer

View more presentations from aloelight

また今回もJPA様の講師派遣支援制度でりーおさん(@riywo)にお越し頂き、Perlの運用ツールのお話しを聞くことができました。
Touryoのオープンソース化を待ち望んでいますので、是非お願いします！

以下はりーおさんのセッション時のメモです。

Ops Tools with Perl @riywoさん

スライドはこちら

CloudForecast

サーバリソースのモニタリング
Installが簡単
- SNMP, RRDs系が別途必要
軽量 5,000行程度（テンプレート含む)
WAF: Shirahata.pm

GrowthForecast

API and Graph
Installが簡単
- RRDsは別に必要
使用例
- fluentでGrowthForecastになげて、Webから見る

chase-tail

tail -f error_log | chase-tail -l 10 -t various_erro
エラー箇所に色付け
- 目grepを楽にする
エラーの流れ早すぎる場合は適度に省略してくれる

App::Ikachan

IRCのHTTP API

Percona Toolkit

MaartkitとAspersaが混ざってる
MySQL用のツール
- pt-query-digestがパフォーマンスチューニングに役立つ
  - tcpdumpをどばっと食わせると実行時間とかみれる

Touryo

Configuration Management Tool
Chefは良かったけど、カスタマイズが大変
Amon2で設定をWeb画面で可視化
CLI
- touryo test web01 環境があっているかテスト
- touryou run web01 間違っている箇所を訂正
設定
- roleを定義する
- roleは継承可能
blueprint
- crontab等のテンプレート
- Text::Xslate使ってる
roleだけじゃなくてnodeで特定のサーバ毎に設定を追加できる

2012/05/05

[JavaScript] Sapporo.js-20120505に行って来ました #sapporojs

Sapporo.js-20120505

今回は「8章メソッド」のArray#reverseからスタート

解説したメソッド

array.reverse()
array.shift()

一般発表

ぬるjs @PUPRLさん

ぬRubyからきました
node-five
- nodeでQtでcanvasでデスクトップアプリ
- 関係ないけどmake.js
  - この作者が使ってるjs製のMakefile

NotHub API の紹介 @tricknotesさん

githubの更新を表示するChrome Extension
用意しているI/F
- Socket.IO
- WebSocket
見えないときは心の目で確認する

Web Audio APIとNode.jsで楽々ウェブ楽器の作り方～Beatonica @aike1000さん

Beatonica
- twitterのソーシャルグラフを利用
- 人にランダムに音を割り当ててる
Web Audio API
- 音の加工が簡単

2012/04/21

[PHP][Security] PHPカンファレンス北海道に行って来ました

PHカンファレンス北海道に行って来ました。
目的は徳丸さんのセッションです。

徳丸本に載っていないWebアプリケーションセキュリティのメモ

Webアプリケーションとキャッシュ

色々なレイヤで高速化等のためにキャッシュを利用する - フレームワーク - リバースプロキシー

別人問題

別人のキャッシュされた情報が見れてしまう問題

OpenPNEのキャッシュ制御問題のDEMO

現在は修正済み
DEMO用に以前のバージョンを利用している

はてなブックマークのDEMO

ブラウザのキャッシュで前の人のデータが見える

これは脆弱性なのか？

ブラウザやキャッシュサーバの問題
でもWebアプリ側で対応したほうが安心
- cache-control: no-store
- pragma: no-cache

クリックジャッキング攻撃対策

X-Frame-Optionsを使う

evalインジェクション対策

JSONのレスポンスを返すときに正しいヘッダーを追加する
- Content-Type: application/json; charset=utf8
- X-Content-Type-Options: nosniff

JSONハイジャック対策

XMLHttpRequest時に特別なヘッダをいれておいてチェックする
- こっちを推奨
JSONの中にfor(;;)を入れておく

2012/04/19

[perl][hokkaidopm] Hokkaido.pm Casual#0

Hokkaido.pm Casual#0

Hokkaido.pm Casual#0に行って来ました。
参加者も10名を超える盛況ぶりで、今回の参加者はこちらのatndで確認できます。
何故かyappoさんがいたりとCasualなのか微妙な感じがしてましたが、行ってみると結構Casualでした！次回以降はもっとCasualに行きたいですね。

LTについて

全員LTということで、今回はimpress.js Remoteというのを作ってみました。
Keynote Remoteのようにimpress.jsをiPhoneから操作するというソフトウェアです。

実装の概要としてはnodeでWebSocket Serverを立てて、iPhoneのtouchイベントをPC側に送るシンプル実装です。
まだまだ機能が足りないので、後日整理してからgithubにあげようと思います。

TODOとして以下が残っています

Remote側のHTML出力の自動化
一覧ページの追加
カンペ表示の対応
jQueryを依存から外す
Web ServerとWebSocket Serverの共通化

今後について

これから毎月1回開催していくということで、もっとCasualになるといいですね。
LTの途中とかで随時質問していける雰囲気があるといいんじゃないでしょうか。後、最初からビールがあるといいと思います。

2012/03/31

Sapporo.js-20120331

テストフレームワークの紹介

QUnit

jQueryから分離
XUnit系

jasmine

BDD for JavaScript
RSpecっぽい

whiskey

最近よさげ？
Nodeで使いやすいように作ってある
ドキュメントが少ない

mocha

@tricknoesさんがお気に入り
フレキシブル
実行結果の出力形式が豊富
- JSONとかTAPとか

mochaの準備

npm install -g mocha
npm install expect.js

current dirにtest/を作ってテスト用ファイルを作る

describe('Example', function() {
    it('should passed test', function() {})
}

mochaを実行すると、test/以下のファイルを実行してくれる

追記: mochaのinstall時に-gをつけないと、mochaコマンドを直接叩けない

mochaのその他メモ

-Rで出力を切り替えられる。指定できるフォーマットは--reportersで確認
-wでtest以下のディレクトリの変更をwatch
-Gを付けるとGrowlに通知

JavaScript: The Good Partsの読み合わせ

P.90のarray.pop()まで進んだ

"hoge"とString("hoge")の違いについて

確認方法

Object.prototype.self = function() {
    return this;
}
 
 
typeof ("hoge").self();
// "object"
 
 
("hoge").self().valueOf();
// "hoge"

tricknotesのぼうけんのしょ jsのプリミティブな型について

遅延再定義 @oosugi20さん

    var func = function() {
        var count = 0;
        var hoge = $('#hoge');
        $hoge.text('1回目のクリック');
 
        // 2回目以降は↓の関数のみ実行される
        func = function () {
            count += 1;
            hoge.text('2回目以降のクリック(' + count + ')');
        };
    }
 
    $(function(){
        $('#btn').on('click', function() { func(); });
    });

countによって処理をわけているけど、毎回countを比較しないので効率がよい
jQueryオブジェクトを入れる変数にはプレフィックスとして$をつけてる

2012/03/24

SaCSS vol.32 CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips

SaCSS vol.32

CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips
h2hamさん

box-shadow

本体をpoisition:relativeにする
before, afterで影を作る
z-indexを使用して、擬似要素の上にbox要素が来るようにする

transition-*

transition-durationで変更にかかる時間を指定できる
transition-delayで変更開始時間を指定
transition-timing-functionでアニメーションの挙動を変更できる
- linear
- ease
- ease-in
- ease-out
- ease-in-out

@-webkit-keyframes

動作時間の割合毎に変化して欲しいプロパティを指定する

/* 移動させるアニメーション */
@-webkit-keyframes move {
    0% {left: 0; top: 0;}
    50% {left: 200px; top: 200px;}
    100% {left: 500px; top: 500px;}
}

-webkit-animation-* で作成したkeyframeの実行回数、時間等を指定する

UI/ボタン

display:inline-blockが良さげ
- blockだと横に伸びる
- inlineだとmargin等が効かない
グラデーションを入れてそれっぽく
- Ultimate CSS Gradient Generatorで簡単にグラデーションのCSSを作れる
使うタグは用途によって使い分ける

UI/タブ

labelで作りcheckboxと連動させて、アクティブな状態を保持できる
- input自体はdisplay:noneで隠しておく
- 擬似要素の:checkedとnth-of-typeでボタンのCSSを変更する
inputタグはlabelの前に置く
- 前の要素をCSSで指定するのは面倒
- nth-of-typeを使うためにlabelタグの前に置く模様

UI/アコーディオン

checkboxをradioに変更
inputとlabelの並び順も書きやすい用に変更しておく
閉じてる状態では高さは0, 開いてる状態ではautoを指定している
autoではアニメーションさせられないので、高さをちゃんと指定する必要がある

その他

要素によってはアニメーションできないこともある
- グラデーション、角丸とか
- ブラウザ依存なので確認が必要
jQuery Mobileの紹介

2012/03/19

第10回北海道情報セキュリティ勉強会の備忘録

2012/03/17(土)に開催された第10回北海道情報セキュリティ勉強会を行って来ました。

テーマは「バイナリ解析」

メインセッションがeagle0wlさんの「OSS/Java/.NETプログラマが意識すべきバイナリ解析の素養」でした。

最近Androidを触っている
目grep が面白かった

という個人的事情もあり、ホットなテーマなので拝聴してきました。

内容はリバースエンジニアリングとソフトウェアコピーの歴史的な話しで前半が終わり、後半は最近のスマートフォン周りの難読化の必要性、リバースエンジニアリングの前向きな利用方法と言った感じでした。

歴史的な話はそれはそれで面白かったですが、解析技法等が紹介されるわけでもなくイントロダクション的な感じで終わったのが残念でした。

登録: 投稿 (Atom)