LLT LIVE in Shibuya に参加してきた

勉強会


前職の後輩のからはし君に誘ってもらって、第1回目の LLT LIVE に参加してきた。

LLTとは、reluxを運営している Loco Partnersさんが主催しているLT。
Loco partners Lightning Talk 略して LLT。それを外部の人を呼んでリアルで行うということで、LLT LIVEとのことでした。

初開催ということで、人数少なめ、ゆるーい感じでまったりでした。
今後も続けていって欲しいです。


ピザを食べつつ、ビールで乾杯してからスタート。


とっしーさん CakePHPで機械翻訳

Microsoft Translator API を使ったお話。200万文字まで無料とのことでした。
事前にわからない、運用時に管理画面等から登録される文章、例えば商品説明の文章などを登録・変更時にAPIで変換し、それを使うというような用途がこのようなAPIを使うことでできるとのことでした。

しんちゃん

タイトルをメモし忘れたけど、、Vagrant の紹介についての発表でした。
XAMPP、MAMP で基本環境を作れるけど、それ以上のOSから入れて同じ環境を複数人の手元で実行するのにイケるとのこと。

よっしーさん CakePHP + MySQL Replication

フルマラソン！を一昨年から走ってるとのことでした。自己紹介に食いついてしまった。
ぜひ、Lemonade 使ってみてくださいｗ

実際のサービスで、負荷対策で MySQLのレプリケーションを入れて、そのためにCakePHPで行った方法についてでした。

class AppModel の beforeFind、afterFind という、取得系処理の前後で設定を切り替えて戻すという方法。
CakePHPを詳しく知らないので、内部的にどういう実装がベストかはわからなかったけど、既存コードへの影響を最小限にしつつ、というアプローチはいいなと思った。

からはしくん

また、タイトルメモするの忘れた。。なんかのネタの長いタイトルだったｗ
実際にレスポンシブデザインのページを作ってみて。というお話。

https://rlx.jp/cp/xmas2013/

  • いままではPC版、スマートフォン版のカンプを作るが、今回はPC版のみでスマートフォン版は頭のなかだけでやった
    • 一般的にはスマートフォン版から起こした方がいいらしいが、PC版からでも先に考慮しておけば問題ないみたい
  • シンプルなデザインであれば問題なさそう
    • 逆に込み入ったものは別途作ったほうがいい
    • relux の本体サイトは別ページとのこと
  • common.css, pc.css, phone.css を作り、linkタグで読み込みを分ける方式
<link rel="stylesheet" type="text/css" href="/css/campaign/1/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="/css/campaign/1/pc.css" media="screen and (min-width: 481px)" />
<link rel="stylesheet" type="text/css" href="/css/campaign/1/phone.css" media="screen and (max-width: 480px)" />

@maru_cc で私。

何を発表しようか迷ったのですが、Lemonade の話と、開発中のスマートフォンアプリの話をしてきました。
ちょっと気合い入りすぎて時間オーバーだったと思います。すいません。。

  • Lemonadeとは
    • http://lemona.de
    • いま務めている会社で作成しているサービスで、ざっくり簡単に説明すると、スポーツする人向けのSNSです
    • 単に個人の記録を公開するだけでなく、リアルに一緒に走りに行くことをサポートしたい　というサービスです

LemonadeのiPhone, Androidアプリは、NativeとWebViewのハイブリットアプリで、その辺りを発表しました。

実際のRedmine資料やコードを交えつつなので、資料のみだと足りないところもありますが、slideshareに上げました。
http://www.slideshare.net/maru_cc/lltlive-in-shibuya

玉村さん

ポリゴン風デザインのお話と、簡単に画像からポリゴン風デザインの画像が作成できる triangulator というアプリの紹介。
まず、ポリゴン風デザインというのを初めて聞きました。
http://www.webcreatorbox.com/inspiration/low-poly-2/

グラフィック主体のデザインがあまり観測範囲ではなかったので知りませんでした。
インパクトの有るデザインメインなサイトとかで使えるのかな？

米山さん 脱・コピペプログラマー

コードの内容知らずにコピペしてませんか？というお話。
Google Analitics(以下GA) のコードを参考に、そもそもコピペして使われること前提のコードにも細かいノウハウが詰まってるので、コードリーディングしよう。というお話。

GAのコードでは、スクリプト自体のダウンロードが完了していなくてもページが表示するような工夫がしてあります。
Webページの表示の高速化で、サーバサイドだけではなく、クライアントサイドでもできることはたくさんあるよ。
・ハイパフォーマンスWebサイト
・続・ハイパフォーマンスWebサイト
この辺りもクライアントサイド側が半分ぐらい入っているよ、と。
Lemonadeでも結構気にしてチューニングしているところだったりします。

さいごに

今回の場所の 21cafe は雰囲気もよく、いい場所でした。
Facebookでイベント取材記事が載ってました。
【イベント取材 vol.23】高級旅館予約サイト『relux』開発LTイベント／12月13日（金）

svn,git,hgコマンドのaliasあれこれ

開発環境

バージョン管理システム使ってますか？
最近、会社のリポジトリをSubversionからGitにがつがつ移行してます。Gitのブランチを使った Git Flowの考え方を浸透させるべく、反映ツールのGit対応などしております。


それと同時に、MyBikeJPプロジェクトは、Mercurialで管理を行っています。
微妙に似ているけど違う gitコマンドと hgコマンドに混乱しまくりで、先日、マージにミスって @key3 さんに迷惑かけちゃいました。


ということで、環境差異を吸収し、さらにミスが減って楽になるような aliasやシェル関数を設定しました。
ちなみに zshです。

Subversion

svnでは、元々、.zshrc を id:sotarok さんのをベースにしていた関係でショートカットを知りました。

http://trac.nequal.jp/browser/public/dotfiles/sotarok/zsh/.zshrc?PATH=$HOME/bin:/usr/gnu/bin:/opt/local/bin:/usr/local/bin:$PATH:/sbin#L128
久々に見たらまたバージョンあがったっぽい

たぶん参考にした当時はこんな感じだったと思います。

alias st='svn st'
alias stu='svn st -u'
alias sdi='svn di'
alias sad='svn add'
alias sp='svn up'
alias sup='svn up'
alias sci='svn ci'


さらにいくつか追加・変更して今はこんな感じ。

alias st='svn info; svn st'
alias stu='svn st -u'
alias stg='repos=`svn info|grep "URL: .*trunk"|sed "s/URL: \(.*\)trunk/\1/"`;list=`svn ls ${repos}tags`;echo -ne $list|grep "^release_"|sed "s/release_\(.*\)\//\1/"|sort -t . -k 1,1 -k 2,2n -k 3,3n|sed "s/\(.*\)/release_\1/";echo -ne $list|grep -v "^release_"|sort'
alias stl='stg'
alias sdi='svn di'
alias sad='svn add'
alias smv='svn mv'
alias srm='svn rm'
alias sp='svn up'
alias sup='svn up'
alias sci='svn ci'
  • st：今参照しているのがtrunkなのかブランチなのかがわかるように変更
  • stg：svnのタグ一覧を表示
    • 弊社では「release_1.2.3」のような命名規則のリリースタグを切るので、それをちゃんと並び替えて表示
  • smv, srm： 追加

Git

基本的には Subsersionの考え方を踏襲して省略コマンドを作成

alias gst='git status'
alias gtg='git tag'
alias gtl='list=`git tag`;echo -ne $list|grep "^release_"|sed "s/release_\(.*\)/\1/"|sort -t . -k 1,1 -k 2,2n -k 3,3n|sed "s/\(.*\)/release_\1/";echo -ne $list|grep -v "^release_"|sort'
alias gbl='git branch'
alias gbls='git remote prune origin;git branch -a'
alias gdi='git diff'
alias gad='git add'
alias gmv='git mv'
alias grm='git rm'
alias gci='git commit'
alias gcia='git commit -a'
alias gps='git push;git push --tags'
alias gpl='git pull;git pull --tag'
alias gmg='git pull origin'
alias gco='git checkout'
  • gtl：Gitでは、タグの概念がちょっと違うので、git tag と git tag -a 相当のコマンドを2つ用意
  • gbl、gbls：ブランチ用のコマンド用意　gblsはリモートも含めたブランチを表示
  • gps、gpl：pull pushはsvnには無い概念ですね
  • gmg：ブランチで作業中にmasterに入った新しい修正を取得するような時に使用
  • gco：作業ブランチの切り替え用

Mercurial

ブランチ作業中に defaultに入った修正を取り込む方法と、ブランチの切り替えが Gitと大きく違うところなのでそこらへんを考慮しました（先日のミスもこの辺）
あとは、差分確認や diffコマンドなどは、Gitの方が使いやすかったので、色を付けたりとか less風に確認とかは、そちらを真似してみました。

alias hst='echo -n "# On branch ";hg branch; hg --config "extensions.color=" status'
alias hbl='hg --config "extensions.color=" branch'
alias hbls='hg --config "extensions.color=" branches'
hdi() {
    hg --config "extensions.color=" diff --color=always $1 | less -R
}
alias had='hg add'
alias hrm='hg rm'
alias hci='hg commit'
alias hps='hg push'
alias hpl='hg pull;hg update'
alias hup='hg update'
alias hmg='hg merge -r'
hco() {
    hst
    FROM=`hg branch`
    TO=$1
    hg pull
    RET=`hg update -c -r $TO`
    if [ -n "$RET" ]; then
        hg --config "extensions.color=" update -r $TO
        hg --config "extensions.color=" diff -r $FROM --stat
    fi 
}
  • hdi：diffを色を付けて表示と同時に、ファイルを個別指定でも動くようにしたかったので、シェル関数として設定
  • hco：ブランチ切り替えの仕方が Gitと違って混乱するので新しいコマンド作成　切り替えた時にどのファイルが変更されたのかわからないのでわかるような機能を追加

作業している領域の確認

いま、どのブランチにいるのかというのがわからなくなってしまうので、常に見えるように設定

autoload -Uz vcs_info
zstyle ':vcs_info:*' formats '(%s)-%b '
zstyle ':vcs_info:*' actionformats '(%s)-%b|%a '
precmd () {
        psvar=()
            LANG=en_US.UTF-8 vcs_info
                [[ -n "$vcs_info_msg_0_" ]] && psvar[1]="$vcs_info_msg_0_"
}
RPROMPT="%1(v|%F{green}%1v%f|)[%~]"

入力しているコマンド行の右側に、リポジトリの種別、ブランチ名、今いるパス が表示されるようになりました。


こんな感じです。

dotfiles

こういう設定系は、新しいサーバに環境作る場合に同じものを反映できるように githubに放り込んであります。
https://github.com/marucc/dotfiles


ほかにも、このような設定を公開している人はたくさんいるので（このあたりとか＞ http://coderepos.org/share/browser/dotfiles/ ）、いろいろ試してみるといいと思いますし、もっといい設定があったらぜひ教えてください。

参考

http://d.hatena.ne.jp/mollifier/20090814/p1

MyBike.JP Studyなるものをやった

Django 勉強会

まず、MyBike.JPとは。

  • http://mybike.jp/
  • @key3 さんが先日リリースしたサービス


今のところは、自転車の写真投稿自慢サイトっぽくなっているが、今後に期待してください。
ずいぶん前から、一緒に飲みに行くと、自転車関連のサービスを何かということで　あれやこれや話していたのを実現させた感じだと思います。


私は、内部のソースを見たいなーとういのもあり、開発の手伝いができればと思い、bitbucketのプロジェクトに招待してもらって環境構築とかしていました。


今回、開発やサービスの今後を考えようということで、ビープラウドさんの会社を借りてハッカソン的な勉強会をしてきました。



日曜日の11時すぎにまったり集合。
keyさんが作ってきたスライドを見て（これは、すでにいろいろ話を聞いているので改めてって感じ）、環境構築。


Djangoは、軽くしか触ったことがないので、環境構築からはまりまくりです。
すでにある程度動くようになっていたのですが、画像投稿周りが動かず四苦八苦。

おもな構成


とりあえず、勉強兼ねていわゆるガラケー対応をbpmobileとか使ってしてみているところです。



関連

携帯の空メールで、拡張アドレスのデリミタをプラスにしているとauではまる

mobile

久々にはまったので、メモ兼ねて調べてみました。


携帯サイトで空メールを受け取るとういのは、アプリを作る上でよくある手段だと思います。
ユーザにメールアドレスを手入力してもらう手間を防ぐという理由以外に、確実に有効なアドレスを登録してもらえるという利点もあるからです。
また、画像投稿についても、一部のdocomoの新しい端末などを除き、ブラウザからは投稿が出来ないので、メールに添付をしてもらうというのはよくある手です。


それらの場合に、送信先をメールアドレスを複数用意しなければならない場合に出くわします。
そんな場合に使うのが拡張アドレスです。

user-ext@example.com
user+ext@example.com

user-、user+ 以降は自由になにを指定されても受け取るという仕組みです。
gmailでは+(プラス記号)が実際に使うことができます。


うちでは、もともとqmailを使用していたという理由から、拡張アドレスの区切り記号はハイフンを使用していました。
その後、MTAをpostfixに切り替えた時も、その設定を引き継ぎ、拡張アドレスの区切り記号はハイフンで通していました。


今回、とある案件を構築したのですが、サーバ環境側の都合で、MTAにsendmailを使用することになり、出来るだけ初期設定のままということで、拡張アドレスの区切り記号もプラス記号になることになりました。
まぁ、gmailでもやってるし大丈夫だろう。思えばこの判断が大きな誤りでした。
はまったはまった。はまりまくりました。

プラス記号が使えないau

結論から言うと、プラス記号だとau端末で空メールをhtmlのmailtoを使うと、普通の方法ではできません。

簡単なhtmlを作ってみます。

<html>
<head>
</head>
<body>
<a href="mailto:[email protected]">[email protected]</a><br />
<br />
<a href="mailto:user%[email protected]">user%[email protected]</a><br />
</body>
</html>


パターン1は、プラス記号をそのまま書いたパターン。
パターン2は、プラス記号をurlencodeした「%2B」を書いたパターン。

どうなると思いますか？ちなみに、検証した限りでは、docomo、softbank、willcom(WX330K)では、どちらでも正常に動きました。


結果

パターン1を開くと、プラス記号が空白になってしまう端末があります。つまり、メーラーは開くのですが、宛先の中身が
「user ext@example.com」になってしまっています。
そのまま送信しようとしても、端末のメーラー側のエラーが発生していまいます。


パターン2を開くと、urlencodeしている文字がちゃんとプラス記号として認識されて開く端末がありますが、逆にurlencodeしている文字のままメール作成画面が開いてしまう端末もあります。当然、そのまま送信しても宛先不明でサーバ側で受け取ることができません。

  • パターン1（[email protected]）
    • 空白になってしまう端末
    • 正常に動く端末
      • W61T、SH001
  • パターン2（user%2Bext@example.com）
    • 正常に動く端末
    • urlencodeがそのまま出てしまう端末
      • W61T、SH001


この記事を書く段階でテストに使用できる最新の端末が少なかったのですが、実案件で検証した範囲では、最新の世代ではプラス記号そのままで動くが、旧世代はurlencodeしないとダメみたいでした。
どこかで仕様を変更したのは明白ですが、探した範囲では、どこにも情報がありません。


解決方法

sendmailで拡張アドレスのデリミタを変更する方法がわからず、調査を続行することも、MTAをpostfix等にいまさら切り替えるわけにもいかず。。。
Win系以前は旧式、新形式は新世代だとわかりやすいのですが、K002とかが微妙な感じです。


あれやこれやテストを繰り返していたところ、ある法則を発見しました。

UserAgent

  • A5401CA
    • KDDI-CA23 UP.Browser/6.2.0.3.111 (GUI) MMP/2.0
  • W21S
    • KDDI-SN31 UP.Browser/6.2.0.7.3.129 (GUI) MMP/2.0
  • W31KII
    • KDDI-KC33 UP.Browser/6.2.0.9 (GUI) MMP/2.0
  • W41H
    • KDDI-HI36 UP.Browser/6.2.0.10.4 (GUI) MMP/2.0
  • W61T
    • KDDI-TS3I UP.Browser/6.2_7.2.7.1.K.1.5.1.120 (GUI) MMP/2.0
  • K002
    • KDDI-KC3O UP.Browser/6.2.0.15.1.1 (GUI) MMP/2.0
  • SH001
    • KDDI-SH38 UP.Browser/6.2_7.2.7.1.K.3.341 (GUI) MMP/2.0


よーくみるとUserAgentの規則が変わっています！

http://www.au.kddi.com/ezfactory/tec/spec/4_4.html
KDDIの仕様によると、ブラウザバージョンをしめす部分が変わっています。

  • 6.2.0.3.111
  • 6.2.0.7.3.129
  • 6.2.0.9
  • 6.2.0.10.4
  • 6.2.0.15.1.1
  • 6.2_7.2.7.1.K.1.5.1.120　　！区切りがアンダーバーになってる
  • 6.2_7.2.7.1.K.3.341　　！区切りがアンダーバーになってる

対策

ブラウザバージョンが \d.\d. (数字＋ドット＋数字＋ドット）の場合だけurlencodeしてあげるようにしました。


うちでは、Ethna+Smartyなので、こーいうめんどくさいキャリアしばりは smartyのプラグインで回避しました。

<?php
/**
* Smarty修正子ラグイン
*/

/**
* mailtoで au旧端末で使えないプラス記号をエスケープする
*
* <pre>
* ex.)
*
* </pre>
*/
function smarty_modifier_mailtoescape($string)
{
    if (strlen($string)) {
        // + をエスケープするUA
        // KDDI-KC33 UP.Browser/6.2.0.9
        // KDDI-KC3O UP.Browser/6.2.0.15.1.1
        // そのままでOKなUA
        // KDDI-SH3K UP.Browser/6.2_7.2.7.1.K.5.205
        // KDDI-TS3I UP.Browser/6.2_7.2.7.1.K.1.5.1.120
        // 6.2の後ろがドットのみ置換
        if (isset($_SERVER['HTTP_USER_AGENT']) && preg_match('!^KDDI-[^ ]+ UP\.Browser/6\.2\.!', $_SERVER['HTTP_USER_AGENT'])) {
            $string = str_replace('+', '%2B', $string);
        }
    }
    return $string;
}

使い方

<html>
<head>
</head>
<body> <a href="mailto:{'[email protected]'|mailtoescape}">[email protected]</a><br />
</body>
</html>

まとめ

auさん、仕様変えるなら言ってください。変えるとしても後方互換性を多少は気にしてください。
今回の件で言えば、docomo、softbankと同じように、プラス記号直書きでも、urlencodeした「%2B」でも動くようにしてもらえればすんだ話だと思うのは、考えが浅いだけでしょうか？


というわけで、auの新しい世代が出る前に作ったサイトで、空メールアドレスに拡張アドレスを使い、urlencodeしているサイトは、新端末で動いていないかもしれません。
逆に、auの新世代でだけ動作確認をしていると、旧端末で動いていないかもしれません。


最善の手は、postfixにして、デリミタはハイフンにすることだと思います。
sendmailは、他にも送信元情報等がphpで受けた時に環境変数で取得ができなかったりしたので、次回からはpostfixに絶対してもらおうと思います。

全文検索エンジンgroongaについて中の人に来ていただき社内勉強会をやった

groonga

とある案件で日本語の全文検索をする必要があり、MySQLを使っていることからTritonnを候補にしていたのだが、新規開発は行わず、groonga(グルンガ)という新しいプロダクトに引き継がれているという状況でした。

そこで、Tritonn＆「groongaストレージエンジン(MySQL 5.1対応の全文検索エンジン)」の中の人である id:mirさんに来ていただき社内勉強会を開きました。
堅苦しい感じではなく、ざっくり現状をいろいろ聞く感じ。


「groonga」と「groongaストレージエンジン」を混同していたのですが、groonga本体は最近1.0がリリースされていたのですが、MySQLの全文検索エンジンである「groongaストレージエンジン」は、まだ0.1でこれからという感じだそうです。
なので、案件に使うのは、2010/09/08現在では無理とのこと。


Tritonnの話は以前聞いたことがあったので、groongaの話をメインにしていただきました。

詳しくはサイト参照してください。
ちなみに、猫は開発者のぐにゃらくんの猫だそうですｗ

  • groonga本体は、Tritonnでも使用していた Sennaという組み込み型の全文検索エンジンの後継プロダクトで、検索機能だけではなく、ストレージの機能を合わせもったものです。
  • httpのサーバとして立てることとかできる　jsonでやり取りができる
  • オリジナルプロトコルもある
  • memcachedのバイナリプロトコルもある
    • 作ってみたらテキストプロトコルの方がはやっていて　バイナリプロトコルは流行っていないｗという感じらしい


メインな売りは、リアルタイム　インデックス更新。
ちょー大規模だったらgoogleさんとか買うとか他の手段がいろいろある。
でも、短時間でそれほど大規模じゃないシステムで簡単に管理コストも下げて　というところに手軽に使えるというのがターゲットだそうです。


以前のTritonnでは、MyISAMをベースにしていたこともあり、更新時には検索もロックされてしまっていたが、groongaでは、更新時はテーブルロックがかかるのは同じだが、検索は更新中もOKとのこと。


言語バインディングとしては、ruby拡張とMySQL(groongaストレージエンジン)がある。


特徴いくつか

  • 「タンデム構成」という名前を付けていたが、別々の方式で同じデータを扱うことができる。
    • つまり、ruby拡張でデータを高速に登録しておいて、groongaストレージエンジンでSQLを使ってアクセスとかが出来る。
  • ドリルダウン
    • 検索で絞り込んだ先の件数が簡単に取れる
    • オフレコ　事例がある
  • データ量による更新スピードの劣化が少ない
    • Sennaの場合、データが数Gできつくなる　更新時に内部でコピーが発生する
      • Senna 二次関数的
      • groonga 一時関数的
  • NASでの共有はむり
    • nmap使っているので同一サーバ内で
  • ライセンスはLGPL
    • 「おとといLGPLになりました」(2010/9/8時点で)
  • yum aptで入れられる

groongaストレージエンジンの2010/9/8時点での現状

  • ヒットしたのが順不同で返ってくる
  • スコア無い
  • 年内に
    • マルチカラムなどができれば・・
    • Tritonn相当の機能を開発するのがまずは優先課題

あと、参考になったざっくり感覚

  • MySQLで like とかで検索するか、全文検索を導入する必要があるかの目安
    • 10MB切っていたら全文検索必要ない
    • 100MBだと頑張ればなんとかできなくはない
    • 1Gだと10秒とかかかる

けっきょく

Tritonnは先方の要件もありNGになったので、groongaを使って構築中です。
いくつかメモもあるので随時エントリあげようと思います。

phpカンファレンス2010に参加

php

phpカンファレンス2010にスタッフとして手伝いをしています。


今年はまったく動けていなかったのですが、直前にMLを見ていたら24日のビジネスDayのスタッフが足りないとのことで、急遽有休を取って参加することに。
仕事的にも忙しいのだが、そこは多少無理を言ってしまったかもしれない。


ビジネスDayは2部屋に分かれているので、片方の部屋のUst&撮影のスタッフが足りないとのことなので、そこら辺とその他雑用あれこれをしていました。
講演が始まると作業は手が空くので、話を聞いたりしつつ。


詳しくはUstの撮影動画やgihyo.jpの当日レポートなどを参照してみてください。
PHPカンファレンス2010
PHPカンファレンス2010スペシャルレポート：レポート｜gihyo.jp … 技術評論社

Becky!2からThunderbird3への移行あれこれ

アプリ

私がPCを使い始めた時から10年近く愛用していた Becky! Internet Mail Ver.2 をついに手放す時が来てしまいました。


家の環境はMacになり、メールは Gmail only。Android端末との親和性も高く個人メールはすべてGmailで完結しています。
会社での業務では、Becky!を使用してきました。


移行した理由は、Becky!を見限ったということでは全くなく、使い続けたいのですが、以下のような理由で泣く泣く切り替えをしました。

  • 基本、個人で買ったシェアウェアはNG。全社的に Thunderbird推奨。
    • 古株の特権(?)で、個人で買ったアカウントを使って少数派として使い続けてきました
  • 最近、PCが不調でバックアップしてリカバリをしたところ、ミスでバックアップに失敗して過去メールが消失。。
  • 新規に設定するのであれば、Thunderbirdへ　ということに。


当然、切り替えたら、いろいろなところが気になります。
慣れれば解決する問題や、拡張機能で解決することもあると思うので、備忘録的に残しておこうと思います。


※随時追記していきます。

Ctrl+Spaceが効かない

振り分け設定がめんどくさい

Agante機能がほしい