2012-12-31

今年の自分まとめ的なもの

大晦日ということで、今年一年のまとめ的なエントリーでも書こうと思います。

自身の今年を一言で表すとすると、「外へ」でしょうか。

去年はGDDへの出展とかもありましたが、わりとInkpod Webの開発に専念していました。それに比べて今年は外向きの活動が多かったように思います。

HTML5とか勉強を始めいろんな勉強会に参加し、多くの方とお話しさせて頂いて繋がりができたことは大変貴重な経験となりました。なかでもアリエルさんの Sencha Touch 勉強会から特に大きな縁が広がり、本当によかったことの一つだったと思っています。その縁で、Japan Sencha User Group の共同運営者をすることになったり、勉強会で話したネタでITmediaさんへ記事（HTML5アプリのタッチUX）も書かせて頂きました。さらに、本の執筆の話まで広がりました。

先端IT活用推進コンソーシアムでもProject L.Aの開発はもちろん、次期検討委員会、運営委員としても協力させて頂き、こちらでも色々な繋がりが増えました。

仕事面でもデザイン事務所さんでの新技術支援や、ECサイトのコンサル・機能強化など普段あまりやらないお仕事にもチャレンジさせて頂きました。

また、プライベートでは南フランスをレンタカーで回り、最高の夏休みを過ごすことができました。思えばこれもやはり外での活動でした。

外部発信としてBlogももっと書いていこうと思っていたのですが、あまり継続的には書けませんでした。しかし、いくつかホッテントリ入りすることもでき、読者も少し増えました。更新頻度と内容の深掘りについては、今後も課題です。

振り返ってみると、ほんと外での活動が広がった一年でした。また、それは多くの方にお世話になった一年でもあります。本当に皆様ありがとうございました。この場で改めてお礼を申し上げたいと思います。

来年もデブサミ2013や、ソフトウエアジャパン2013といった大きなイベントで話すことになっています。今後もしばらくは外部への発信を積極的に行っていきたいと思います。

来年も引き続きよろしくお願いいたします。
それでは皆様よいお年を！

2012-12-23

ネイティブよりも速いと評判のfastbookの裏側を調べてみる

sencha HTML5 javascript

本記事は、Sencha Advent Calendar 2012 の23日目の記事です。~~1日遅れでごめんなさい！~~あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！

Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。

ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。

ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbook にあるようなのですが、~~メンテナンス中と出てアクセスできません。。ソースみたかった。。。~~（2012.12.26追記: 今見るとアクセスできますね。けど、本当にWebViewでラップしただけで中身はWebから表示してるだけでした。つまりJSのソースは無い）仕方ないので公開されているものを解析しつつ推測してみます。

基本的に３つのスクリプトファイルからできているようです

index.js: 他のスクリプトやCSSを読み込むローダー
app.js: アプリケーション本体
sdk.js: Sencha Touch SDK（3.0alpha！）

app.js にアプリのロジックが圧縮されて入っています。圧縮と言ってもそれほど複雑な物ではないので、Webインスペクターで Pretty print すれば、まあなんとか読めます。気になるのは、sdkですね。Ext.versionを見てみると、versionが "3.0alpha" とあります！まだ一般公開されていない、次期 Sencha Touch で作られてるんですね！

とりあえず app.js を記事で触れられている改善点を中心に見てみました。

パフォーマンス改善のポイントはいくつかありますが、特に無限Listコンポーネントが重要のようです。これは最近、Sencha Touch 2.1で改良された無限Listコンポーネント（What’s Coming in Sencha Touch 2.1）のことかと思ったら、実はそうでもないようです。

Sencha Touch 2.1.0 の SDK に含まれる examples に、touchtweets というTwitterアプリのサンプルがあります。これは新しい無限リストに対応しているそうです。（オンライン上のデモはまだ2.0.1のようだ）

fastbookではiframeを使ってDOMツリーを分割したとあります（実際はobjectタグだった。iframeではなくobjectなのはなぜだろう？）。しかし、先のサンプルのリストはiframeではありませんでした。fastbookで使われているのは「Sandboxコンテナー」というまったく新しい機能のようです。残念ながらまだSDKには入っていません。 Sencha Market なんかで出してくれないかなー、と期待してます。

次の、TaskQueueは、Ext.TaskQueueのことですね。これはSencha Touch 2.1から新しく追加された機能です。複数のDOM要素の操作をバッチ処理のようにまとめることで、DOMのリフローとリペイントを最小化するようです。リフローについてはブラウザ動作の理解－リフローとリペイント及びその最適化に詳しくあります。ただ、まだこのクラスはAPIドキュメント上はprivateとなっていて、フレームワーク内部での利用しか推奨されていません。

次に AnimationQueue を追加したとあります。これもfastbookのための新規クラスです。これは内部に taskQueue と idleQueue の二つのキューを持ち、taskQueueがある間はそれを実行し、taskQueueが無くなったら idleQueue を実行する、という仕組みでアニメーションやロードの処理を分割しているようです。特にアニメーションに特化した機能では無く、汎用的な仕組みなため、これも早く標準APIへ組み込んで欲しいですね。

Web Workerは、Ext.Xhrという新しいクラスに組み込まれています。また、これ用に xhr-worker.js が読み込まれています。このスクリプトでWorkerとのmessageやりとりをしているようです。Web WorkerではAjaxでのリソース取得、デコードを行っています。元々Ajaxで非同期通信ではあるのですが、WebWorkerを使うことでUIスレッドから切り離し、よりスクロールの滑らかさなどを維持するようです。特に現在のマルチコアプロセッサを持つスマートフォンなどでは有効だそうです。

総じて、やはりfastbookはかなりチューニングされています。通常Sencha Touchで使われるMVC アーキテクチャでのアプリケーションのロード方法とも少し違います。カリカリにチューニングされているからこそ、この性能が出るんですね。

単純にSencha Touchを使ったからといって、皆が皆ここまでのアプリケーションを作れるわけではありません。それはネイティブにとっても言えることでしょう。ネイティブだからパフォーマンスが良い、HTML5（Sencha Touch）だから優れている、というのはナンセンスです。大筋の傾向はありますが、個別事例ではそれが全てではありません。結局は作り手の技術と情熱次第。

そういう意味で、fastbookはSenchaが優れているということではなく、まさしく作り手次第でHTML5でもここまで出来るんだ、ということを証明してくれたのだと思います。

2012-12-12

HTML5で出来ないことまとめ 2012年12月版

HTML5

本記事は、HTML5 Advent Calendar 2012 の12日目の記事です。なんとか本日中にあげれるか・・アップできた！

業務やらイベントやら本やらで死ぬほど忙しいなか、無謀にもHTML5 Advent Calendarに参加してしまった@dsuketです。こんばんわ。

先月の段階ではここまで修羅場になるとは思わなかったのですが、師走は恐ろしいものですね。年末にこんな首を絞めるイベントが山ほど各所で行われているとは、つくづくエンジニアはM属性だと思いました。

本ネタは始めは「HTML5で出来ること」にしようかと思っていたのです。が、そんな話は山ほどある。もはや食傷気味ですよね。そこで逆転の発想で「出来ないこと」にすればいい！と閃いたわけです。さすが良い閃きだな−、俺冴えてる！と思ったのも束の間。念のためググってみると・・・「あれ？いっぱいあるぞ・・(￣0￣;)」

しかし、検索上位に表示されるものをよく読んでみると古い内容が多く、もうそれできるよ（できそうだよ）というのも多くある。日々進化の早いこの業界、2，3年も経つと情勢が大きく変わりますよね。そこで今回は、その先人達の記事を参照しつつ「HTML5で出来ないこと 2012年12月版」としてお送りしたいと思います。

第13回　来るべきHTML5の世界へ（後編）

まず、下記の記事からみてみましょう。2010年12月なのでちょうど2年前の記事ですね。
第13回　来るべきHTML5の世界へ（後編）

HTML5でできないこと
また，マルチメディア機能では，Flashがストリーミング動画を複数のブラウザに表示できるのに対し，HTML5ではその対応ができません。これは，HTML5向けのビデオエンコーディング技術がブラウザメーカで統一されていないためで，Internet Explorer 9やSafariなどは「H，264」を，MozillaやOperaは「WebM」をサポートしています。さらに，動画機能についても，動画制御や著作権管理，フルスクリーン表示などに未対応であり，マルチメディア機能を中心に実装する動きが活発化する中，できないことも明らかになってきました。

ここで上げられているコーディックの問題は今もあります。GoogleがH.264を長期的にサポートをしないと言いだした（GoogleがH.264問題を再説明、IEとSafariにはWebMプラグインを提供へ）かと思えば、MozillaはH.264サポートを打ち出したり（Mozilla が H.264 をサポートへ、webM 一本化を断念）、一方OperaはMobileに限っては H.264をサポートしたり（Web specifications support in Opera products 英語版）と混乱の極みですが、これでモバイルでは主要なブラウザが全てH.264をサポートすることになりました。（デスクトップ向けではまだ）

記事中で次に触れている動画制御が、何を指しているのか分かりませんがシークやループも可能です（参考: HTML5のvideo/audio＋JavaScript APIテクニック）。DRMは未だ解決していません。GoogleやMSが取り込んではいるようですが、標準化にはまだまだ遠そうです（GoogleとMicrosoftら、HTML5対応のコンテンツ暗号化APIの標準化を申請）。フルスクリーンについては Fullscreen API で標準化が進み、Firefox、Chrome、Safariでは既にサポートされています。

HTML5でアプリを開発するメリットとデメリット

次の記事はこちら。HTML5でアプリを開発するメリットとデメリットより

HTML5で出来ないことは以下の通り。

写真/動画撮影

Bluetoothへのアクセス

Gyroscope

プッシュ通知

バイブレーション

メディアファイルへのアクセス

バックグラウンドで起動

写真/動画撮影については、WebRTC や Media Capture API で仕様が策定中です。Media Capture API はiOS6でその一部が実装され、遂にカメラが使えるようになりました（参考: iOS6のSafariでサポートされるHTML5の機能）。Androidでもversion 3から対応しています（ Android 4の新機能でカメラWebアプリ作ってみた）。残念ながらPC向けブラウザは対応しているものはなさそうです。動画や音声のストリーミングが可能なWebRTCについては、Opera 12、Android版Opera mobileが標準で対応、Google Chrome がオプションで対応しています。

Gyroscope（ジャイロスコープ）は DeviceOrientation Event Specificationで仕様策定されています。最新のiOS/Androidなら結構動きます。

~~BluetoothはHTML5でデバイス機能を使うためのDevice API にも標準化されていません。今後の追加予定も無さそうです。~~（追記: あるよ、とご指摘いただきました。末尾で追加しました）プッシュ通知については、そのものではありませんが、Server-Sent Eventsというもので実現可能です。ブラウザでこれを受け取りOSの通知システムと連動すればネイティブアプリのようになるでしょう。

バイブレーションは Vibration APIで標準化されています。未だ Firefox Aurora でしかサポートされてませんが時間の問題でしょう。メディアファイルへのアクセスは前述の通り。バックグラウンドでの起動は Web Workers でできそうですが、現在のところ iOSなどではバックグラウンド中のJavaScriptは停止してしまうため無理そうです。今後の改善に期待！

HTML5で作るiPhoneアプリのできない5つのこと

続いての記事はこちら HTML5で作るiPhoneアプリのできない5つのこと。こちらも2年以上前なのでだいぶ変わりましたねー。ちなみに3が二つあるのは原文まま。

１、clipboardの利用
２、ファイルのアップロード
３、カメラ
３、シェイクイベント
４、加速度センサー
５、バックグラウンド起動

クリップボード欲しいですよねぇ。無いことが意外だとクライアントによく言われます。未だ実装はありませんが、仕様はあります。 Clipboard API and events です。最終更新が去年の2月ですね。なにやらパテントの関係で難航しているようです。。。

ファイルのアップロートは先のMedia Capture APIとFile APIによってiOS6から対応済みです。ただしアルバム内に限る。任意のファイルできません。カメラは前述の通り。シェイクイベントはDeviceOrientation Eventで実現可能です。加速度センサーも同様ですね。

Flashだとここまでできる! HTML5とFlashの機能比較

だいぶ疲れてきました。しかも時間無い。。最後はFlashとの比較。 Flashだとここまでできる! HTML5とFlashの機能比較

クロスブラウザの映像対応
依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。

これは前述の通り。モバイルはだいぶH.264に寄ってきましたが、デスクトップはまだまだ。

Flash だと縦書きができる

CSS3でwriting-modeがサポートされました。コレを使えば縦書きもできます。こちらのサンプルの右下 Vertical Textで確認できます。

Flash だとタイムラインアニメーションに映像を組み込める

HTML5のオーサリングツールも出始めました。

これらを使えばFlashのようにCanvasアニメーションを作ることが出来ます。

Flash の 3D は進化している

HTML5の3Dも進化しています。WebGLの性能もあがり、便利なライブラリも充実してきています。tree.jsのサンプルで体験することが出来ます。

Flash だとウェブカメラが利用できる

先のWebRTCを使えばHTML5でもウェブカメラが使えます。 WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012
ChromeのCanaryビルドなどで使うことが出来ます。正式サポートまでもう少し！？

Flash 内部で音を生成して再生することができる

HTML5でもこんなドラムマシーンができます。 HTML5 AudioとJavaScriptで作った簡易ドラムマシン

まとめ

時間が無いので手短にまとめます。

ここ2年くらいでHTML5で出来ることが随分増えた。
特にモバイルの進化がすごい。
これからの2年もきっとすごい進化する。

ということで、本来ならばまだできないことをまとめたいところですが、~~早くしないと今日が終わってしまうため今回はここまで！~~

と、してたのですが、やっぱり気持ち悪いので簡単にまとめを追加。
これまで上げた点から、今でもどのブラウザでも出来ない、2012年12月版HTML5で出来ないことは以下の5点！

DRM
Bluetooth通信
OSへのプッシュ通知
バックグラウンドでの起動
クリップボード

個人的には 3，4，5あたりができるようになるともう最高なんだけどなー。これらはまだまだ先の話になりそうです。

追記:
ブクマやtwitterでコメントいただきました。ありがとうございます。
アレが入ってないぞ，このヤロー！とかあるとおもうので、ジャンジャン突っ込んで下さい！

んーこれ dsuket.hatenablog.com/entry/2012/12/… 頑張って書いてくれてるけどBluetoothはSysApps w3.org/2012/09/sysapp… PushやクリップボードはWebApps w3.org/2012/webapps/c… が議論の場で、実装も結構進んでるのよ〜
— dynamis (でゅなみす)さん (@dynamitter) 12月 13, 2012

ご指摘ありがとうございます。勉強になります。
System Applications Working Group というので、WebのNative化に対する標準化を進めているそうです。詳しくは小松さんの記事で！WebのNative化に対する標準化が始まる？

Web Applications Working Group では、アプリケーションとして必要な機能の標準化を進めています。クリップボードだけじゃなく、先に挙げたFullscreen APIやFile API、Server-Send Eventsなんかもこれに含まれています。他にも Database and Offline Application APIs、Web Intents、Web Sockets、Widgetsなんかもあります。

ブコメより

んー、出来ないことの範囲が狭い気がするよ、自由にローカルファイルを扱わせろとかOSコマンド実行させろとかあると思うんだけどなあ

確かに、File APIでローカルファイルが扱えるようになった、といっても <input type="file"> か、ドラッグ＆ドロップしないとファイルハンドラを受け取れないのは不便ですよね。OSのファイルシステムにそのままアクセスはセキュリティ上問題でしょうけど、サンドボックスみたいな環境があっても良いかもですねー。同様に、OSのシステムコマンド実行も難しいでしょうねぇ。システムコールを呼べるようになると凄いんですが、セキュリティが心配すぎる。。

E4Xが使えない、なんて話しもどこかから。
E4Xありましたね。。。当時は画期的だ！と思ったのですが、JSONが普及してからはXMLがあんまり出番が無くなったような。FireFox もついに打ち切るそうです。E4X は衰退しました

他にもツッコミお待ちしてますー

2012-12-03

Sencha Touch 2.1の変更点まとめ

sencha javascript

本記事は、Sencha Advent Calendar 2012 の3日目の記事です。Sencha Advent Calendar ですが、今のところ参加者がとても少ないです。。どんなネタでも大歓迎ですので、ご参加お待ちしています！

先月、11月6日に Sencha Touch 2.1 がリリースされました。ざっくりと以下のような点が追加・改善されたようです。

パフォーマンスの改善
- ネストしたレイアウトでのパフォーマンス改善
- paintedイベントへの変更
- TaskQueueメカニズムの追加
Chart の機能改善
- Drawパッケージの改善
  - 拡張可能なスプライト
  - 修飾子と属性の定義
  - フライウェイト・インスタンス化・スプライト
  - Retinaディスプレイサポート
- Chartパッケージに新しいチャートを追加
  - 集合チャート
  - 金融チャート
コンポーネントの強化
- 無限スクロール付きリスト
新しいSencha Cmd
- 強化されたネイティブサポート

詳しくは以下をみてください。

ところが、2.1で新しくなったのはこれだけではありません。というか、全然もっとある！！ということで Release Notesから、個人的に興味あるものをピックアップして紹介したいと思います。

チャート系

Implemented SVG support for Draw
SVG is now forced on Android 4.1 devices due to Canvas issues
Added webkitBackingStorePixelRatio support
- CanvasのRetina対応

チャート系のアップデートに伴い、draw系パッケージも各種強化されました。詳細は割愛。詳しくはRelease Notesみて下さい。Android 4.1 ではCanvasの問題から強制的にSVGになるようです。

dataパッケージ系

[TOUCH-2792] Implemented filters, sorters and paging into WebStorage proxy
[TOUCH-2844] Optimized clear method on WebStorage Proxy

WebStorageでもフィルタ、ストア、クリアができるようになった！

[TOUCH-2800] Implemented new WebSQL proxy
[TOUCH-3551] Added filtering and sorting capabilities to the SQL proxy

ようやくWebSQLプロキシが実装されました！！フィルタとソートも追加。

Sencha Command 関連

in-app purchases API for iOS
Contacts APIs for iOS and Android
Push notifications for iOS
openURL support

アプリ内課金、連絡先API、プッシュ通知などにも対応！

パフォーマンス

SizeMonitor refactored for improved performance
Improved Android 4 Scroll Indicator performance
Update Button SASS so it looks better on device
Change ListItems to not use vertical docking for headers. This improves performance since there is less DOM and less box layouts

スクロールや回転、リストのパフォーマンスアップ。ボタンデザインの修正。

[TOUCH-3497] Added support for iPhone 5 resolution startup screen

解像度が変わりましたからねー。

その他

[TOUCH-2888] Changed the default zIndex in message box to a larger number to stop accidental zIndex issues when creating other floating panels/components
- 1.xの頃からあるバグで昔私も報告したなー。ようやく直ったようで。
[TOUCH-3042] Allow hideOnMaskTap to be changed dynamically
- これは地味に欲しい機能。
[TOUCH-3031] Allow JS files to be specified as remote
- JSの部分遅延ロードができるのかな？
Ext.browser, Ext.feature, Ext.os が追加
- 機能判別やブラウザ、OS判定が便利になった！
POST calls will now honor the disableCache option
- 例の iOS6 のPOSTキャッシュのバグ回避？
Added proper support for IE10 animateStartTime
- IE10サポートも進んでいるようです。

総括

Release notesからざっくりと拾い出してみました。実はまだドキュメントに載っていない新機能が色々とありました。ソースを見ると入っているのですが、ドキュメント化が間に合ってないみたい。2.1 になって、細かい使い勝手などが結構改善されています。2.0 → 2.1 への乗り換えはそんなにコスト掛からないと思うので、是非検討されるとよいんじゃないでしょうか？

あと、たまにRelase notesを見ると思わぬ情報があったりしておもしろいですねー。ちゃんとドキュメント読みましょう、ということですね。

さて、Sencha Advent Calendar 明日は、また @kawanoshinobu さんです！その次が未定なので、ぜひ誰かJOINしてください！（切実

2012-11-19

Objective-Cの循環参照について

Objective-C

2年ほど前に書いた記事 #import の使いどころ：循環参照しないために。が未だにそれなりにアクセスがあるのですが、これは間違いがあります。正確にいうと、間違いでは無いのですが、冗長であまり意味のない記述でした。

#import は C言語の #includeを拡張して、一度だけしかヘッダファイルを読み込まないようになっています。そのため基本的には循環参照は起こらないようになっています。

では、何が問題になるか。
先の記事のコードは、以下のようなものでした。

ClassA.h

#import "ClassB.h"

@interface ClassA {
  ClassB variableB;
}
@end

ClassB.h

#import "ClassA.h"

@interface ClassB {
  ClassA variableA;
}
@end

これをコンパイルすると、以下のような処理が行われます。

ClassA.h を読み込む
ClassA.h の先頭の#import 宣言により、ClassB.h を読み込む
1. ClassB.h を読み込む
2. ClassB.h の先頭の#import 宣言により、ClassA.h を読み込もうとするが、既に読み込み済みのためスキップする。
3. @interface で ClassB を宣言
4. 型 ClassA の変数 variableA を宣言
5. エラー!! 型 ClassA が見つからない!!

ClassB.h を読み込んだときに、まだClassAの宣言が見つからないため、このエラーが発生します。そこで、@class ディレクティブで、ClassA はクラスだということを教えてあげる必要があります。@class 宣言を追加した正しいコードは以下の通り。

ClassA.h

#import "ClassB.h"
@class ClassB;

@interface ClassA {
  ClassB variableB;
}
@end

ClassB.h

#import "ClassA.h"
@class ClassA;

@interface ClassB {
  ClassA variableA;
}
@end

実装ファイルとヘッダファイルにimportを分ける必要は特にありません。全部ヘッダファイルに書いてOKです。

もう1点。
そのクラスのメンバーにアクセスしない場合は、import宣言は特に不要です。メソッドの戻り値のように、実装ファイルの中でそのオブジェクトのメンバーにアクセスする必要が無い場合などは、@class でクラス宣言だけしてやればOKです。インスタンス変数やメソッド引数のような場合は、実装中で使用するはずですので、importは必要でしょう。

@class は、その型がクラスであることを示しているだけです。逆に言うと使用するクラスを全部 @class で宣言しておいても特に問題はありません。（めんどくさいので普通はやらない）循環しそうだな−、というのは @class で宣言しておくと幸せになれるかもしれません。

ということで、まとめ。

循環参照しそうな場合は、ヘッダに @class を宣言しとくと良い
実装ファイルで別途 importする必要は無い。

こちらも是非参考に：
Objective-Cのクラスの前方宣言がないと困ること

2012-10-05

Chrome/Safari でスマホサイズの表示テストをする方法

Safari Chrome Web javascript

スマホ用のWebページ（アプリ）なんかを作っていると、Chrome や Safari でその画面サイズで表示を確認したいことが多いですよね。インスペクタ便利だし。実機とかエミュレータとかめんどくさい。

一般的なスマホの画面サイズ 320 x 480 にブラウザのウインドウサイズを変更すれば、メディアクエリとかで自動的に表示を切り替えてくれるはず。が、私のMacだとなぜか Chrome/Safariの横幅が 400px までしか縮められない！微妙に足りない！！（Windowsならもうちょっと縮むとか？？）

サイズを変更する Chrome Extension とか試してみましたが、だめでした。やはり 400px 以下になりません。しかし、JavaScriptで別窓を開けば自由にリサイズできることが分かりました。

そこで、今見てる画面を、スマホサイズで別窓で開くブックマークレットを使うことにしました。コードは以下の通り。 javascript:window.open(location.href, 'phone', 'width=320,height=480'); このアドレスを適当な名前（PhoneViewとか）でブックマークに登録しておくと、一発でスマホサイズで確認できて便利！（ブラウザのポップアップブロックにひっかかる場合があるので注意）

ほんとは UA とかも変えたかったけど、JSでは変更できないため断念。Extension作ればUAの変更できるらしいが、とりあえずそれはまた別の機会に。

2012-09-25

Safari6 の Web インスペクタで行番号がずれる問題

mac Safari

前回の記事「iPhone5 と iOS6 での HTML5開発についてあれこれ」で書いたように、Safari6 の Web インスペクタで iOSのリモートでバッグが出来るようになりました！

が、また日本語（マルチバイト文字）を含むコードを表示すると行番号がずれている。。この問題は以前からあって、一応解決策もしたはずだった。参考: Safari の Webインスペクタで行番号がずれる問題を解決

しかし、Safariのバージョンが上がる度にこの辺りの設定箇所がコロコロ変わってしまうのです。Safari 5.0 までは /System/Library/Frameworks 以下にあった WebKit.framework が、Safari 5.1 では /System/Library/StagedFrameworks へ移動し、WebCore.framework となりました。（StagedFrameworks の説明はここが詳しい: 新・OS X ハッキング! 39 実は大きく変わった「Safari 5.1.4」）それが、いつのまにやらまた /System/Library/PrivateFrameworks に移動されたようです。で、とりあえず現在（Safari 6.0.1で確認）のパスはここ /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources

ここにある、Main.css を編集します。ミニファイ化されているので、適当なエディタで展開するといいと思います。 .text-editor { display: -webkit-box; position: relative; overflow: hidden; / 以下を追加 / font-family: "好みのフォント", monospace; font-size: 11px; line-height: 13px; }

編集内容は以前とほぼ同様。line-height が 13px とピクセル指定にしています。 .text-editor>.gutter>.line-number で指定されている物と合わせる必要があります。

ファイルを書き換えて管理者権限で保存し、Safari を再起動すると反映されます。

これで私の環境では直りましたが、まだ直らないようなら、こちらを参考にすると良いかもしれません。 Webインスペクタの行番号がズレてたら直しましょう

これで、リモートでバッグもばっちり！！と、いきたいところですが、Safari6 のWebインスペクタて使いにくいですよね。。次回は使い方なんかを。

第13回 来るべきHTML5の世界へ（後編）

HTML5でアプリを開発するメリットとデメリット

HTML5で作るiPhoneアプリのできない5つのこと

Flashだとここまでできる! HTML5とFlashの機能比較

まとめ

チャート系

dataパッケージ系

Sencha Command 関連

パフォーマンス

その他

総括

ClassA.h

ClassB.h

ClassA.h

ClassB.h

第13回　来るべきHTML5の世界へ（後編）