BPS株式会社開発ブログ Beyond Perspective Solutions LTD. » baba

ドコモスマートフォンラウンジでSH-03C, T-01C, SC-01C, L-04Cを見てきた

baba — Tue, 16 Nov 2010 12:32:14 +0000

秋葉原の帰りに、ドコモスマートフォンラウンジに寄ってきました。

既に冬モデルの全機種が展示されており、SH-03C, T-01C, SC-01C (Galaxy Tab), L-04C の実機に触ることができました。
今回は主に、快適性に影響するタッチパネル感度を中心にチェックしてきました。

ちなみに、T-01CとSH-03Cはヨドバシにて予約してきました！

SH-03C (LYNX 3D)

初の3Dスマートフォンです。プリセットで3Dコンテンツが入っています。
3D液晶はとても目が疲れますが、注意して正面30cmくらいにあわせれば、そこそこ面白い映像が楽しめます。
ただ、想像以上に分厚いですね。Xperiaより厚いので、Galaxy SやiPhone 4に慣れているとショックを受けます。

タッチパネルは、今回比較した機種の中で最悪でした。2点タッチの段階で、既にガタガタ、1点と認識されたり4点と認識されたり、全く安定しません。
テストアプリではなく実際のMapアプリなどでも、スクロールのつもりがズームになったり、ピンチするとあらぬところが拡大されたり、かなり心配になります。

機能は面白いんですが、正直Xperia並に地雷な気がします・・・

T-01C (REGZA Phone)

初の防水スマートフォンです。ごついですが、赤色は格好いいですね。
大きくて重いものの、動作は予想以上にスムーズでした。Galaxy Sには及ばないものの、Android 2.1のNexus Oneくらいにはなっている感じです。

タッチパネルも以外に優秀。
3点までのタッチに対応していて、4点目をタッチした瞬間に全てのタッチが消える（4点目が無視されるのではなく、全ての点がリセットされる）のが不思議ですが、Nexus Oneのように各点のy座標が入れ替わることもありません。感動はないですが、全く不満無く使えるレベルの精度です。

水で濡れたときにどうなるのか、気になるところです。

SC-01C (Galaxy Tab)

Galaxy Tabは、1ヶ月前に見たときよりもチューニングが進んだのか、動作が若干なめらかになった印象です。
タッチパネルはGalaxy S相当で、今回の機種の中ではダントツです。5点タッチまで対応し、素早く動かしても精度は全く問題ありません。
かなり期待できますね！

L-04C (Optimus)

スライド式なので厚みがありますが、小さくて丸いので持ちやすいです。
キーボードは小型の割に打ちやすく、HT-03Aのように可愛ってあげられそうな機種です。

タッチパネルはNexus One相当。2点タッチ対応で、感度は特に問題ありませんが、Y座標が入れ替わる問題はNexus One同様に発生します。
通常の使用ではあまり気にならないでしょうが、注意が必要ですね。

冒頭の動画は、T-01Cです。片手で撮影したため、かなり見苦しくなってしまいましたが・・・

Galaxy Sを購入してきました

baba — Thu, 28 Oct 2010 10:50:34 +0000

最近テイラーに押されている馬場です。

本日はGalaxy Sの発売日！朝からヨドバシカメラに並んで買ってきました。
Galaxy Sの購入行列は以外と長く、購入完了まで2時間近くかかる羽目に。暇な気合いの入った人が多いですね！

ドコモのラウンジで見たときは気にならなかったのですが、いざ見比べてみると、iPhone 3G/GSにそっくりですね・・・

これ、なんてiPhone？

まだ少ししか触っていませんが、操作感は初期状態でもさくさく動くし、今のところプチフリもなくて快適です。
画面はかなり色味がかかっていて、あまり好きではないのですが、確かに視認性は高いし鮮やかです。
何より、デフォルトで猫の壁紙が入っているのが良いですね。

Galaxy S スクリーンショット

そして、また私物スマートフォンが増えてきました。
写真の他にも、貸し出し中のHT-03A（なぜか2台目）とDesire、iPhone 3Gがあるんですが・・・
（ちなみに自分の名誉のためにいっておくと、LYNXは持ってないしDesire HDは予約してません！）

私物がまた増えてきた

使わないSIMカードたちもこんなことに。過半数は契約が生きてます。
裏に電話番号を書いておかないと、どれだか分からなくなりそう。

使わないSIMカードたち

なにはともあれ、せっかく発売日に購入したGalaxy Sなので、次のAndroidが発売するまで大切に使っていこうと思います。

TwitterのXSS脆弱性をついたタイムライン汚染攻撃

baba — Tue, 21 Sep 2010 13:25:11 +0000

本日夕方から、TwitterのXSS（Cross Site Scripting：クロスサイトスクリプティング）脆弱性を突いた攻撃がすさまじいペースで広がっています。

私もWebで見る派なので、踏んでしまいました（それによりご迷惑をおかけした方申し訳ありません）。
リツイートされたものを解除しようにもログインできず、公式ReTweetはWebでしか解除できないので困っています。

公式ReTweetの仕様上の問題点も活用した、なかなか鮮やかな手口ですね。

問題のツイートの一例が↓です。

<span class="entry-content">
	<a
		href="http://a.no/@"
		onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()"
		style="color:#000;background:#000;/"
		class="tweet-url web"
		rel="nofollow"
		target="_blank">
	http://a.no/@"onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()" style="color:#000;background:#000;/
	</a>
</span>

要するに、マウスオーバーしたら自分と同じものをつぶやくというコードですね。

肝の部分は↓です。

http://a.no/@"onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()" style="color:#000;background:#000;/

httpで始まる文字列はリンクに変換されますが、@の認識の仕方にバグがあったようですね。文字列の最後までがリンクURLと認識され、見事にXSSが成功しています。

それにしても驚くのが、感染の早さ。
技術的なキモは、単純なURL判定アルゴリズムのミスですが、それをTwitter上で実施するだけでここまでのスピードで広がってしまうとは、リアルタイムなTwitterの怖いところです。

Twitterなので、直接的な被害はTwitter上に限られていると思いますが、どのくらい工夫した亜種が流れているのでしょうか？

2010/09/21 22:44追記
該当のXSS脆弱性がひとまず修正されたようですね。
また、原因になっていた公式リツイートは削除されているようです。
なお、ログインする際はブラウザのキャッシュとCookieを消してからのほうが良いです。

基本的にXSSでパスワードが知られてしまうことはありませんが（ブラウザに保存していたら知りません）、メールアドレスの変更→パスワードリセット　を使ってパスワードを変更することは理論上可能なので、プロフィールがおかしくなっていないかチェックしておいた方が良いですね。

2010/09/21 23:05追記
Twitter公式情報で、修正がアナウンスされています。
日本時間22:50の時点で、全世界に修正が行き渡ったようです。
http://status.twitter.com/post/1161435117/xss-attack-identified-and-patched

ZeroClipboardを使っていて、IEでのみ「未知の実行時エラーです」が発生する場合

baba — Sat, 11 Sep 2010 00:08:40 +0000

Webを作っていて、「このタグをコピー」ボタンはよく作ります。

HTML/JavaScriptのみでは、IE以外のブラウザでクリップボードにコピーする機能は対応できないため、基本的にFlashを使うことになります。
それを簡単に実現できるライブラリが、ZeroClipboardです。

使い方は簡単。$関数を作っておき、onloadのタイミングでZeroClipboard.Clientオブジェクトを初期化・設定するだけです。

<html>
<head>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function init() {
  clip = new ZeroClipboard.Client();
  clip.setHandCursor(true);
  clip.setText('コピーして欲しい文字列');
  clip.blue('button', 'container');
}
</script>
</head>
<body onload="init();">
  <div id="container">
    <img id="button" src="button.png" />
  </div>
</body>

ところが、HTMLを間違えると、IEでのみ「未知の実行時エラーです」となり、動作しないことがあります。
（Firefox/Chrome/Operaなどでは動作します）

未知の実行時エラーです

これは、glue()の第2引数として渡すcontainer要素が、pタグなどになっている場合に発生します。
ZeroClipboardは、内部的にembedタグを生成し、Flashを埋め込んでいるのですが、HTMLの仕様上pのなかにembedは入りません（詳細はDTD参照）。

そのため、HTMLとしては一見Validに見える以下のHTMLでも、

  <p id="container">
    <img id="button" src="button.png" />
  </p>

glue(’button’, ‘container’); とやった時点（InnerHTMLが編集される）で、IEのみ厳密なチェックが入るため、エラーになります。

対策として、container要素は必ずdivなどのembedを含める要素にしましょう。

また当然ですが、内部で$()関数を使うため、jQueryやprototypeとの併用には注意が必要です。

Google Font APIは誰でも出来る超簡単

baba — Fri, 10 Sep 2010 02:53:07 +0000

Web業界ではHTML5の採用実績も増えてきました。

動画機能がクローズアップされがちですが、Web開発者として見逃せないのがWebFont機能。
文字で良いのに、フォントが気に入らないというデザイナー様からの意見で、全部画像で作ることが多いはずです。

Google Font APIは、ブラウザごとの違いも吸収してくれる上、使い方もものすごく簡単です。

以下のように、GoogleのCSSを読み込んでfont-familyを指定するだけ。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular">
<style>
body {
  font-family: 'Reenie Beanie', serif;
  font-size: 28px;
  font-style: italic;
  text-shadow: 4px 4px 4px #bbb;
}
</style>
</head>
<body>
<p>Hello world! I am peter. Nice to meet you.</p>
</body>
</html>

サンプルを見てみる

Google Font プレビューページで、色々編集しながらフォントを決めることが出来ます。

Google Font APIの仕組み

読み込んでいるCSSを開くと、以下のようになっています。

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
  src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX4jjx0o0jr6fNXxPgYh_a8Q&chromeframe') format('truetype');
}

このうち、最後の行がWeb Fontの読み込み。これにより、Firefox/Opera/Chrome/Safariなどではtruetypeフォントを読み込めます。

最後から2番目の行は、User-Agent制御により、IEで開いたときのみCSSに出力されるようです。
このURLを開くと、.eot形式のファイルがダウンロードできます。IEはなんとIE4の時代からWeb Fontをサポートしていたようですが、そんな歴史的理由により.ttfではなく.eotファイルを読ませてあげないと動かないため、Google側で吸収してくれています。

これは便利！

こんな簡単にWeb側からフォントが指定できるのは、かなり便利ですね。
このAPIも、やっていることは要するにUser-Agentを見てttfとeotを振り分けているに過ぎないので、自前でやるのも十分可能です。

ただ、日本語フォントは重いので、サーバ負荷やローディング時間が気になるところです。
Google Codeを見ると、読み込み中の処理を（デフォルトフォントで表示するなど）制御できるJavaScriptも公開されています。

フォントのライセンス問題がクリアできれば、すぐにでも積極活用していきたいですね。

Google Chrome 6でHTTPSの警告が変わっている

baba — Thu, 09 Sep 2010 12:31:45 +0000

メモリを食うものの、軽快な動作でとても快適なGoogle Chrome。

バージョン6になってから（？）、アドレスバーのHTTPS警告が厳しくなったようです。

今までは、
・フルSSLのページ→緑
・SSLだけど一部SSLじゃないコンテンツが含まれる→黄色
・オレオレ証明書、期限切れ証明書、サーバ名が違う証明書→赤
だったのですが、

新しいChromeでは、証明書が正しくても、NonSSLのスクリプト類が含まれる場合、赤になるようです。
たとえばhttps://twitter.comが偽サイトみたいになってしまいました。

サイト制作者は、信頼を損なわないように気をつけないといけませんね。

正常なSSL

HTTPの画像が含まれるページ

HTTPのスクリプト類が含まれるページ

正常なSSLのタイトルバー

HTTPの画像が含まれるアドレスバー

HTTPのスクリプト類が含まれるアドレスバー

Twitter公式ツイートボタンをWordPressに設置するプラグイン

baba — Fri, 13 Aug 2010 02:36:03 +0000

Twitter公式のTweet Buttonが公開されたので、WordPressに設置するプラグインを作ってみました。

といっても、設定画面もないしデザインも作っていない、ただ機械的にボタンを入れるだけのものですが・・・

bps-tweet-button

【使い方】
1. ダウンロードして拡張子を「.php」に変更する
2. wordpress/wp-content/plugins フォルダに入れる
3. 管理画面から有効化する

Twitterの公式ツイートボタンをブログに入れよう

baba — Fri, 13 Aug 2010 01:18:16 +0000

TweetmemeやTopsyと競合するツイートボタンが、Twitter公式で公開されました。

特長は、

・Tweetmemeなどと同じく、ボタンを押すとツイートできる
・ツイート数の表示は、上・右・無し　の3種類から選べる
・ツイート後、指定ユーザをフォローするようにおすすめする

といったところですね。

試しに貼ってみました。社長用です。

ボタンを押すとツイート画面へ

ツイート後、piichan1031をフォローしていない人は、フォローするように言われます

公式らしく、機能はシンプルですが、デザインや動作速度は良い感じですね！

WordPressに入れる方法

テーマファイルを編集する場合、single.phpにはそのまま出力されたものを貼り付ければOKです。

<a href="http://twitter.com/share" class="twitter-share-button"
data-count="horizontal" data-via="piichan1031" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

index.phpにも付けたい場合は、一覧ページではなく記事ページをツイートできるようにするため、以下のようにpermalinkを設定します。

<a href="http://twitter.com/share" class="twitter-share-button"
data-count="horizontal" data-via="piichan1031" data-lang="ja"
data-url="<?php echo get_permalink(); ?>">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

カスタマイズ方法も公開されています

WebStationをバージョンアップしました

baba — Tue, 03 Aug 2010 02:34:22 +0000

社内にあったWebStationを、バージョンアップしてもらいました。

元々初期バージョンで、AndroidもどきのKatDroidだったため、アップデートのためいったんCamingiに本体を送付していました。

途中何回か心配になることもありましたが、本日無事戻ってきました！

やっぱり大きいWebStation

晴れて、Android 1.5に仲間入りです。

やはりこのサイズでメモリ128MBは少ないだろうとか、タッチパネルの感度は相変わらずかなり悪いとか、実用には程遠い感じですが、WiFiが30回に1回しかつながらない問題が直っただけでも御の字です。

そもそもAndroid 1.5でWVGAという無謀な感じなので、動作検証用にはぴったりです。

というより、他の使い道があったら誰か教えて下さい・・・

SHARP Androidアプリ開発テクニカルセッションに参加してきました

baba — Sun, 01 Aug 2010 01:01:57 +0000

7月31日土曜日、秋葉原で開催された、Androidアプリ開発テクニカルセッションに参加してきました！

シャープさん、主催のアンドロイダーさんたちに感謝です。

また例のごとく写真を撮り忘れてしまったのですが、

・SHARP端末の特徴
・ヨコ画面、折りたたみ端末ならではの注意点
・IS01とLYNXの違いについて

など、技術的な解説があった後、各人にIS01またはLYNXが配布され、自由にアプリの動作検証を行う、と言った内容でした。

前半のセッションで今まで知らなかった点としては、

・電話帳制限機能を使うと、ContentProviderで取得しようとした際にもnullが返るようになっている
・よく文字のレイアウトが崩れる原因は、モリサワ新ゴフォントの幅だった
・IS01とLYNXで、特にホームスクリーンウィジェットの動作、表示に違いがある
・IS01では、他の端末と違い、端末ID（IMEI）にa-fまでの英字が含まれる

などがあり、短時間でも結構良い情報がもらえました。

後半では、もともとIS01を持っていたので、LYNXをいじって遊び、適当に自作アプリを入れてみました。

LYNXはIS01より格好いいですね！本体も画面も、デザインはこちらのほうが好みです。
ただ、全体的にIS01より動作が遅い、と言うか反応が遅いです。ハードウェアスペックは共通なので、ソフトウェアのチューニングが違うみたいですね。

とりあえず、手元のアプリではLYNXはIS01と同様に動きました。

終わり方が流れ解散みたいな感じだったのが残念でしたが、メーカー開発者の方ともお話しでき、有意義な休日でした。
また参加したいですね。

BPS株式会社 開発ブログ Beyond Perspective Solutions LTD. » baba