lowply

いつの間にかtmux1.8が出てた。

で、CentOS使い恒例のlibevent2.0系問題。epelやrpmforgeなどのレポジトリにもまだ2.0のrpmは出てないのでいろいろな手法がポストされてますね。

libevent1.4系はyum removeするとmemcachedが消えたりして依存関係がきついので、消さずに2.0をソースから（prefix切って）入れて共存させたいなー、と思ってたらすごくシンプルな方法を見つけたのでメモ。

まずlibeventをprefix付きでコンパイル

# ./configure --prefix=/usr/local/libevent2
# make
# make install

tmuxをconfigureするときにCFLAGSとLDFLAGSを指定

# ./configure --prefix=/usr/local/tmux CFLAGS="-I/usr/local/libevent2/include" LDFLAGS="-L/usr/local/libevent2/lib"
# make
# make install

あとはldconfig

# echo /usr/local/libevent2/lib > /etc/ld.so.conf.d/libevent2.conf
# ldconfig

これだけでOK。

参考にしたstack exchangeのフォーラムには、本来なら –with-libevent=dir みたいなconfigure optionがあるべきだよね、というコメントがあるので今後のtmuxに期待したい。

他には、こんな感じでldconfigとpkg-configを設定してやる方法もある。

tmux のインストール | ja.528p.com

タイトル通りではあるけど、いろいろハマったのでメモ。

dnsmasqというのは簡易DNS/DHCPサーバー。/etc/hostsを書き換えるよりもう少し低いレイヤーでレコードを書き換えてくれるイメージ（フォワーダーと呼ばれたりする）。なので、Aレコードだけではなくほとんどのレコード書き換えができたりします。詳細はWikipediaとかで。今回はMXレコードを書き換えたい事情があって導入してみた。

インストール

いつも通り、homebrew様。brew後に出てくるビールの絵文字がかわいい。

$ brew update && brew install dnsmasq

設定

- confを複製して編集

$ cp -a /usr/local/Cellar/dnsmasq/2.65/dnsmasq.conf.example /usr/local/etc/dnsmasq.conf
$ vim /usr/local/etc/dnsmasq.conf

- 以下を書き換え

resolv-file=/etc/resolv.dnsmasq.conf
listen-address=127.0.0.1
conf-dir=/usr/local/etc/dnsmasq.d

- conf用ディレクトリを作成

$ mkdir /usr/local/etc/dnsmasq.d

- plistを複製。Macの場合、launchctlがこのplistに書かれているオプションとかをつけてバイナリを実行する。

$ sudo cp /usr/local/Cellar/dnsmasq/2.65/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons

- 現在のDNSキャッシュサーバーのIPを、dnsmasq用のresolv.confに書く。フィルタにマッチしなかった場合これに問い合わせることになる。

$ cat /etc/resolv.conf
$ sudo vim /etc/resolv.dnsmasq.conf

- 起動

$ sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

- 確認

$ scutil --dns
$ ps ax | grep [d]nsmasq

- キャッシュサーバーをdnsmasqに変更（この時点でミスがあると名前が引けなくなる）

$ sudo networksetup -setdnsservers Wi-Fi 127.0.0.1

- 確認

$ dig apple.com A
;; ANSWER SECTION:
apple.com.		1715	IN	A	17.172.224.47
apple.com.		1715	IN	A	17.149.160.49

- ためしに変更をかける。書式はこんな感じで、confにいろいろヘルプが書いてある。

$ echo "address=/apple.com/127.0.0.1" > /usr/local/etc/dnsmasq.d/apple.com

- 再起動

$ sudo launchctl unload -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
$ sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
$ sudo dscacheutil -flushcache

- 見てみる

$ dig apple.com
;; ANSWER SECTION:
apple.com.		0	IN	A	127.0.0.1

変わってる。ちなみにMXレコードの場合はこんな感じで書く。

$ cat /usr/local/etc/dnsmasq.d/fixture.jp
mx-host=fixture.jp,mail.example.com,10

感想

はい、めんどくさいですね。けどレコードが自由自在に書き換えられて、ローカルで開発するときとか一つ世界が広がると思うのでオススメです。

備考

バグなのかわからないけど、launchctl unload && launchctl loadでうまくconfigを参照してくれないことがある。その場合はMacの環境設定側のDNSを一旦空にして（つまりルーターとかを見に行くようにして）もう一回127.0.0.1に設定してあげると直る。で、それを元に下記みたいな再起動スクリプトとかを書いておくと便利。

#!/bin/sh

ps ax | grep [d]nsmasq
sudo launchctl unload -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
ps ax | grep [d]nsmasq
dscacheutil -flushcache
sudo networksetup -setdnsservers Wi-Fi empty
sudo networksetup -setdnsservers Wi-Fi 127.0.0.1

余談

# brew install zsh で5.0.2が入ってびっくりした。本家zsh.orgには今のところ5.0.0までしか出てないし。github側には5.0.2まで上がってるけど。

# brew install imagemagick が速すぎてもう一回びっくりした。しかもほぼ最新の6.8.0。コンパイル済みbottole.tar.gzを落としてきてるだけだから当たり前なんだけど、改めてhomebrewやばい。

vim + molokaiを使っていて背景がおかしいというエントリーを書いた後、これが再現するのはtmuxを使っている時だけということがわかった。具体的には

• Terminal.app on Mountain Lion
• declare -x TERM=”xterm-256color”
• tmux 1.7
• vim + molokai

という環境の時。

で、ある日何気なくsolarizedのreadmeを読んでいたらこんな記述が。

g:solarized_termtrans

If you use a terminal emulator with a transparent background and Solarized isn’t displaying the background color transparently, set this to 1 and Solarized will use the default (transparent) background of the terminal emulator. urxvt required this in my testing; iTerm2 did not.

Note that on Mac OS X Terminal.app, solarized_termtrans is set to 1 by default as this is almost always the best option. The only exception to this is if the working terminfo file supports 256 colors (xterm-256color).

要約すると、

g:solarized_termtrans

君がターミナルを透過背景に設定していて、Solarizedの時だけ透過にならないなら、これを1にするべし。そうすればSolarizedはしっかり透過になるよ。けどMac OS XのTerminal.appの場合はこれはデフォルトで1になってるよ。唯一、terminfoがxterm-256colorをサポートするときは例外だよ。

つまりどういうことだ？と思いつつ、とりあえずカラースキームをsolarizedに変えてまずはトライ。

やっぱり再現した。で、.vimrcにこれを追加。

let g:solarized_termtrans=1

うまくいった！こういう気づかいステキ。というわけでmolokaiからsolarizedに乗り換えました。solarizedのファイルサイズがmolokaiの約6倍ある理由がわかった気がする。

# dotfilesも更新。

2013/02/01 追記しました。結局ssh_configを修正。

コンソールメッセージが日本語なのは嫌じゃないですか。でlocaleの設定変えようと思って

# cat /etc/sysconfig/i18n
LANG="en_US.UTF-8"

こんな感じにしても、次回sshすると

# echo $LANG
ja_JP.UTF-8
# locale | grep LC_CTYPE
LC_CTYPE="ja_JP.UTF-8"

とか言われてイラッとする場合。

調べてみると[計算機] Lion からの ssh ログイン先で locale がどうのこうの、といわれる。という記事を発見。

どうやら Lion から ssh をするときに LC_* 環境変数を送っているのが問題らしい。

なるほど手元の10.8.2でも確かに /etc/ssh_config に

SendEnv LANG LC_*

という記述があった。ただ、これ編集したくないなあ。。。と思ってたら、Terminal.appにそれを制御する設定を見つけた。

この「起動時にロケール環境変数を設定」をオフにして、Terminal.appを再起動すればOK。

2013/02/01 追記：これを行うことで、Terminalがローカル環境の日本語ファイル名を正しく表示してくれないことがわかったので、結局 /etc/ssh_config を修正した。~/.ssh/configでSendEnvをOverrideできないか調べてみたけど、UnSendEnvとか各所から提案されつつも実現していないらしい。

# といってもOS Xの言語を英語にしている人には関係ないです。
# ココにそれっぽいことは書いてあったのは見つけた。→ Beginning OS X Lion/インフラ整備編

HUMAN ELEMENTS presents “ANOTHER GENERATION”
12.29.2012(Sat) @ LOOP

DJ:
GOTH-TRAD
MAKOTO (130BPM SET)
Dx
VELOCITY + HEAVY1 (B2B)
LOWPLY + JZT (B2B)
YMASA

MC:
MC CARDZ
KEY MC

http://humanelements.jp

Kindle Paperwhiteが来たから、箱から出して、電源入れて、Wi-Fiにつなごうと思ったらつながらない。ルーターはAirmac Expressの2012モデル。手持ちのイーモバイル（GL01P）のWi-Fiにはつながるので、Kindleの初期不良じゃないっぽい。

WPA2の認証までは通ってるので、なんとなくDHCP周りかなと思ってスタティックに切り替えて適当に192.168.1.100とかを振ってあげたらあっさりつながった。悩んでる人はお試しを。

# ちなみに本体のレビューとしては、軽いし読みやすいくて、旅に良さそう。

2012年9月26日 追記しました。

要約エントリー。

元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas>

アップルのサイトのiPhone5のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします）

–

もともとh.264とWebMの動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhoneなどは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションにvideoタグを使うことは最適解ではなかったらしい。

そこで発想の転換をして、Retina MBPのページでは、蓋が開くたった2秒間のアニメーションに60枚のJPGをぶん回すという荒業を使っていた。これは実に5MBもの画像を使っていることになる（そのかわりRetinaディスプレイに対応した画像サイズにはなっていない）↓ これ。

で、今回のiPhone5のアンロックアニメーションは更に手法を更に進化させて、1MBに収まる2枚のJPG画像をJSで高速に差し替えてcanvasタグ内に描画している。各フレームごとのJPGの位置はJSONで記述されていて、全体的な制御は ac_flow.js が行なっていると。圧縮されたJPG画像はこんな感じ。注：バグってるわけではありません。元画像はこちら。http://www.apple.com/iphone/design/images/unlock/unlock_001.jpg

ここまで来ると誰にも真似できないというか、驚きを通り越して恐怖。昔から思ってたけど、Appleのウェブサイトって本当に一つの目指すべき姿だと思う。

元記事にはより技術的な詳細や、EarPodsのQTVR的な動きの実装についても言及されているので、すべてのUI/UXデザインに関わる人にとって一読の価値ありかと。

2012年9月26日 追記

昨夜、この記事がFICCの@akirafukuokaさんに紹介され、さらに尊敬する@fladdictさんにRTされた形で一気に拡散し、ホットエントリー入りしました。まさか自分のVPSが最大瞬間7.5Mbpsのトラフィックを出すとは思ってもいなかったです。

感動して勢いで書いた部分もあり、読み返して表現が間違ってるなーと思う部分もあったので訂正しつつ追記。

各方面のコメント

はてブ
http://b.hatena.ne.jp/entry/fixture.jp/blog/2012/09/how-apple-compresses-video-in-iphone5-website/

Twitter
https://twitter.com/i/#!/search/?q=fixture.jp

一番見かけたのが「こんなん目指すべき姿じゃない」というご意見。

アホ言え! 一番真似しちゃアカンタイプのバッドノウハウの塊やないかい!!
こんなん目指してどうするんだよ。こういう事やらなくて良い世界目指す方でおねがいします。
まずSafariでインライン再生できるようにするのが先じゃないのか

バッドかどうかは後述するとして、このノウハウそのものが「目指すべき姿」だとは思っていないのですが、言葉足らずでした。スミマセン。

ここで書きたかったことは、この10年Appleのサイトを見てきて一度も「大規模リニューアル」とかをせず、新製品が登場するごとに部分的に変化し、HTML5, JS, CSSを使って新しい技術を積極的に取り入れながら、まるで生き物のように成長していく全体的なサイト運営手法が、大規模オフィシャルサイトのひとつの「目指すべき姿」だと感じたということです。これは昔から思っていたことです。

Appleサイトに見るグローバルメニューの画像置換手法 | fixture.jp

ウェブ上での表現、特にモーションがあるものに関してはFlashからJSへの過渡期であったり、まだまだ模索段階だと思います。だから、一つの技法を編み出して、それを大規模サイトに躊躇なく投入していく実験的な姿勢が、次の時代の流れを作っていくのではないかと思っています。そういう意味で、今はバッドノウハウでも、やがて最適化されて未来の標準技術になっていく可能性は大いにあると思います。AJAXのように。

これがバッドノウハウを使わないと実装できないのなら、間違ってるのは仕様の方です。実装は結果のためにあるのであって、逆ではありません。

MotionJPEGが普及しなかったように、実装と仕様には常にタイミングの問題が絡みついてきますね。

あと次に見かけて驚いたのが、実は昔からある技法ということ。

ぜんぜん違うけど何となくMSX時代の裏ページに置く展開前の超圧縮画像を思い出した
変態というか、8ビット時代のプログラミングって感じだな。
昔ながらのビデオプログラミングのやり方をHTML5流で。
古典的な技術の昇華がすごい。

リソースが少なかった頃のレトロゲーム時代によくこういう実装をしていた、ということ。なるほど先人の知恵が細い3G回線とモバイルデバイスの環境でまた生きてくるわけですねー。ダブルバッファリングという単語も見かけましたが、ちょっと詳しくは調べきれていません。

技術的にはすごいんだろうけど開いたらCPU使用率MAXになったので結果的にはイケてないサイトになってる

これはスゴイ嫌ですね。昔のFlashサイトはこういうことよくありました。ただ今回の例では、自分の環境ではCPUは一瞬上がるだけで特に問題ないように思いました。

あと、いま話題のBranchにて、僕も大好きなエディタ「Sublime Text」のサイトでも同じ事やってるよ、という記事。by ONO TAKEHIKO氏。

「Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装」の実装方法

アップルがやっていることを、実はSublime Textのサイトでもやっていて、解説と共に圧縮画像とタイムラインJSファイルの書き出し用エンコーダが公開されています。

そうだったんですねー。エンコーダも公開されているし。

最後に、今回の元記事を見つけたのは、元Tumblrの開発者でInstapaperの作者でスーパーテックオタクのMarcoのブログのこの記事。いつも最先端のネタをポストしてくれるので要チェックです。

2013/02/11 追記：tmux+vim+solarizedの人はsolarized_termtransオプションを使おうに続く。

vimのカラースキームにmolokaiを使ってる人、少なくないんじゃないかと思う。vim.orgのColor Scheme部門でRating 1位だし。僕もずっとこれ使ってますが、一つだけ、背景色の表示が気に入らない。これ、バグではないっぽいけど表示的に絶対おかしい気がする。

.vimrcをvimで開いた例。左がmolokaiの初期状態で、テキストの背景だけ薄いグレーになっていて、それ以外は背景色がない。右が修正後。ハイフンが続いてるコメント部分とかわかりやすいと思う。それで、これがタブ文字やスペースにもかかってくるから、ネストが深いコードとかはいい感じに違和感たっぷりになってくれる。

で、これを無効にするために、vimのカラースキーム定義とかいう完全に未知の世界を必死にさまよって、やっと該当の行を発見したのでpatch化した。たった1行だけど。。。

「molokaiのこれは仕様です」とか、「このパッチはカラースキーム的におかしい」とかあったら教えて下さい。

120817 UPDATE :
パッチを当てるときはこんな感じで。（vim プラグインの位置は適宜変更）

# cd /tmp
# git clone git://gist.github.com/3351367.git
# patch -u ~/dotfiles/.vim/bundle/molokai/colors/molokai.vim < /tmp/3351367/molokai.patch

ここ数日、何台かのMacに山ライオンを入れていて、何度も同じOSの初期設定をするのに疲れていたら、タイムリーにも.osxなるものが流行っていた。

dotfiles/.osx at master · mathiasbynens/dotfiles · GitHub

要はdefaultsコマンドで大概の設定、例えばDockのサイズとか、Trackpadの設定とかをGUIを通さずにできるので、これをまとめてスクリプトにしたということで。これを叩けば一発で自分好みのFinderになるよ、と。でFinderだけではなくSafariやTerminal, TimeMachineなども設定できる。

それと、GUIではできない設定、例えば ~/Library を表示させたり、Dashboardを無効化したりするのも含めて何入れてもいいので、じっくり自分の.osxを作ると良い。とりあえず今のところ、こんな感じの簡単な設定を入れて、dotfilesの仲間に加えた。

dotfiles/.osx at master · lowply/dotfiles · GitHub

#
# ~/.osx
#

# disable dashboard
defaults write com.apple.dashboard mcx-disabled -boolean YES

# I like overlay scrollbars
defaults write NSGlobalDomain AppleShowScrollBars -string "WhenScrolling"

# make ~/Library visible
chflags nohidden ~/Library

#
# Killall Apps
#
for app in Finder Dock SystemUIServer
do
  killall "$app" > /dev/null 2>&1
done

NEXTSTEP/OSXのこういうところが本当にすごいと思う。

# mathiasbynensさんのdotfilesに.brewってのがあって、これもいいなと思った。あとbootstrap.shが参考になりそう。

Coming up next Confusion on Aug 4th. Check out more details at confusion.jp