less

きづかないくらいイージーなクオリティー

Archive

3月
8th
火
permalink

$.tmplの関数の挙動をいくつか確認した。ローカルのキーと名前が被らなければwindow直下かどうかに関係なく呼べるみたい。第2引数で関数を渡して$itemから呼んだ方が安心だけど、$itemって表記も直感的じゃなくて混乱しがち…。

${variable}と被るから混乱するのかな。{{= variable}}フォーマットで書けば${$item.func(variable)}は{{= $item.func(variable)}}となって$が一意になる。Smarty辺りと$の位置を間違えることもなくなる。

文字列を引数に取る時、「'」が使えない部分も引っかかりそう（テストを見た感じ、配列のキー等では「'」が想定されているのでバグのような気もする）。

何かと気を付ける必要がある。

3月
7th
月
permalink

pixiv SPRING BOOT CAMPでUIの話をしました

雪だー！ 全然春っぽくない中、pixivでは春のインターンシップ「SPRING BOOT CAMP」をやっています。講義の時間も設けられていて、そこで僕もUIについて発表させてもらいました。何人かにいいね！と言ってもらえたのでその時のスライドを公開しておきます。

UIについて思っていることと思考過程がメインになっています。きづかないくらいイージーなクオリティー！

3月
2nd
水
permalink

ブラウザ拡張版Tumblr Life作成で気を付けている所

  • Black Dashboardやイベント時にDashboardの色が変わっても表示がおかしくならないか
  • 英語以外の言語設定でも動くか
  • 各言語でレイアウトずれがないか

とりあえずSafari版をちまちま作っています。

2月
15th
火
permalink

URLの&を実体参照してない時の注意

HTMLの文字参照は<や<のように「&」で始めて「;」で終わらせるものだと思っていたら、どのブラウザも最後の「;」がなくても文字参照として扱うらしい。

問題になるのはURLのリンクに「&」がある場合。

<a href="foo?foo=1&bar=2">

本来&amp;bar=とすべき所をサボると、&以降=までの文字が文字参照に該当する場合に変換される。例えば

<a href="http://example.com/foo?foo=1&copy=2">

は&copy;として扱われ

http://example.com/foo?foo=1©=2

に飛ぶ（Chromeを除く。Chromeは文字実体参照では問題ないが、&#169のような数値文字参照で同様の問題が起こる（Mac版9.0.597.102で確認））。

&ltのような結果がURLエンコード出来る文字については、Firefoxはそのまま「<」に、SafariやOperaでは「%3C」（URLエンコードされた「<」）になる模様。

HTML 5の仕様

If the markup contains (not in an attribute) the string I'm &notit; I tell you, the character reference is parsed as “not”, as in, I'm ¬it; I tell you (and this is a parse error). But if the markup was I'm &notin; I tell you, the character reference would be parsed as “notin;”, resulting in I'm ∉ I tell you (and no parse error).

まあちゃんとHTMLに沿って書けばいいと思います＞＜

2月
14th
月
permalink

GoogleのジオコーディングAPIメモ

APIドキュメントはThe Google Geocoding API - Google Maps API Web Services - Google Code（日本語ドキュメントは古いことがあるかも）。Tumblrのオフィスを探してみる:

昔のAPI（日本語。英語ドキュメントは削除？）はAPIキーが必要な代わりにJSONP用のコールバックを指定出来た。

callbackパラメーターがある場合、outputをjson以外にしてもJSONフォーマットで返ってくる。まだ使えるみたいだけどいつまで使えるんだろう…。

1月
31st
月
permalink

sshコネクション張りすぎって言われたので設定を調べた。トンネリングする為にproxyCommandを設定していた所が問題だったみたい。

Host hostname
  proxyCommand ssh user@192.0.2.0 -p 12345 nc %h %p

ncにタイムアウトを指定していなかったのでずっとプロセスが残っていたみたい。タイムアウトオプションwを追加。

nc -w 5 %h %p

設定後、サーバに残っていたプロセスを殺した。

pkill -u user -f nc

すみません…。

1月
22nd
土
permalink

@aerithがFacebookを英語で使ってたので英語にしてみた。

英語は数字が揃ってかっこいい！

日本語版も「5 件の友達リクエスト」みたいにすべきな気がする。

1月
20th
木
permalink

FacebookはOpen Graph Protocolの処理をする際、og:imageで指定されている画像URLをそのまま使わずに自前でサムネイルを作成します。サムネイルを作る時は元画像に対して

User-Agent: facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)

でアクセスしてくる模様。

pixivのイラスト詳細をOGPに対応させてみたけど1枚マンガみたいな縦長い画像だとドキュメントにある

An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.

のアスペクト比に引っかかって表示されないみたいですね＞＜

1月
8th
土
permalink

ついったんをGAEに移した

いつの間にか4年目のついったん（詳しい説明）はよく落ちます。みんな以前ほど関心がなくなったこともあり、最近は落ちても放置されることが多い状況になっていました。今もダウンなうです＞＜ 今日さすがにいつまで落ちてるんだと突っ込まれたので、落ちないというか落ちても完全に死なないように仕組みを変えました。

ついったんには主に2通りの発言方法があります。

  1. Twitterでついったんをフォロー、フォロー返し（@hageatamaの人力による）の後にDM「d twittan にゃー」
  2. IRCチャンネル#twittan@ircnetでtwittanがいる時に「twittan: にゃー」

これまではIRCボット（本体）でDMの監視も行っていたので、本体が落ちるとDM機能も止まってしまっていました。そこで今回DMは残るように別のプログラムに分離することに。GAE上で動くのでDM経由での投稿はほぼ止まることがなくなると思います。コードは出来たのですがまだ細かい設定が終わっていないので、稼働まではもう少しお待ち下さい。稼働開始しました！

ソースはGitHubに置きました。

GAEに置くと常駐してチェック出来ないので、メールをトリガーにして発言するようにしています。メール受信は比較的新しい機能で日本語ドキュメントに載っていないので注意。GAEの開発では基本英語のドキュメントを見るのがいいようです。

1月
5th
水
permalink

jQuery Templatesプラグインが面白い

jQuery TemplatesプラグインはjQuery公式のテンプレートエンジンです。元々マイクロソフトのASP.NET Ajax Libraryで実装されていた機能を切り出したものらしい。

現在は1.0.0pre。そろそろ出るjQuery 1.5には標準で入る模様です。preですがマイクロソフトのCDNが利用出来ます。

配列を渡すと自動的にループして出力されるなど、JSONをそのまま渡して動くように意識されているところが面白いと思いました。

<ul id="name-list"></ul>

<script>
$.template('template-name-list-item', '<li>${name}</li>'); // テンプレートを登録

$.getJSON('/api/users', function(data) {
    $.tmpl('template-name-list-item', data).appendTo('#name-list'); // JSONをテンプレートに適用してノードに追加
    // dataが[{ name: 'foo' }, { name: 'bar' }]だった場合
    // <ul id="name-list"><li>foo</li><li>bar</li></ul>
    // のようになる
});
</script>

HTML上にテンプレートを置く際の記述もかっこいい。

<script id="template-name-list-item" type="text/x-jquery-tmpl">
<li>${name}</li>
</script>

この場合、

$('#template-name-list-item').tmpl(data);

で適用出来ます。

{{each}}や{{if}}、結果をHTMLエンコードするしない{{html}}（デフォルトでエンコードが行われる）なども一通り揃っているので複雑になっても大丈夫。小さくきれいに書けそうです。ちょっと試しに使ってみる(｀・ω・´)