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

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

2010.11.16 android, 馬場タグ: android, Galaxy Tab, L-04C, SC-01C, SH-03C, T-01C — baba コメントは受け付けていません。

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

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

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

(続きを読む…)

Galaxy Sを購入してきました

2010.10.28 android, 馬場タグ: Galaxy S — baba コメントは受け付けていません。

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

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

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

これ、なんてiPhone？

(続きを読む…)

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

2010.09.21 Web, セキュリティ, 馬場タグ: Twitter, 脆弱性 — baba コメント (2)

本日夕方から、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でのみ「未知の実行時エラーです」が発生する場合

2010.09.11 javascript, 馬場タグ: Flash, HTML, javascript, jQuery, エラー — baba コメントは受け付けていません。

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は誰でも出来る超簡単

2010.09.10 馬場タグ: CSS, Google, HTML, HTML5, デザイン, フォント — baba コメントは受け付けていません。

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の警告が変わっている

2010.09.09 馬場タグ: Chrome, https, SSL — baba コメントは受け付けていません。

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

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

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

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

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

正常なSSL

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

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

正常なSSLのタイトルバー

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

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

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

2010.08.13 馬場タグ: Twitter, wordpress, プラグイン — baba コメントは受け付けていません。

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

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

bps-tweet-button

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

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

馬場タグ: Twitter, wordpress — baba コメントは受け付けていません。

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をバージョンアップしました

2010.08.03 android, 馬場タグ: android, WebStation — baba コメントは受け付けていません。

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

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

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

やっぱり大きいWebStation

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

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

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

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

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

2010.08.01 android, 馬場タグ: android, Androider, IS01, LYNX, Sharp — baba コメントは受け付けていません。

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

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

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

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

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

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

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

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

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

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

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

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

古い投稿 »