ItoZyun - ぺったんR Wiki - ぺったんR

javascript のクリーンアップ、圧縮

クリーンアップ

javascript は、変数宣言時の区切り文字や、行の終わりのセミコロンなどを間違えていても、予期したとおりに動作したりして潜在的な問題を抱えることになる．
以上のものは、Aptana で警告されないものも結構ある．
jsDo.it にアップロードすると、Webコンソールで javascript の警告を教えてくれる．
その警告に従って修正したところ、Aptana2 の構文解析も動くようになった．コード量が増えると勝手に構文解析も止まるのかと思っていたけど、そのようなわけだった、、、

圧縮

以上を済ませた後に、圧縮（難読化）を行うことで、js ファイルの読み込みや動作を早くし、負荷を抑えることができる．
圧縮ツールには、Web アプリとして提供されているものもあって便利．
http://compressorrater.thruhere.net/ が、複数の圧縮エンジンに通した結果を比較表示してくれる．
現在 140KB 程度の js ファイルを 60KB 程度にすることができた．
ただし、その圧縮後のファイルが動かないこともあり（というかほとんど動かない、または操作中に動かなくなる）圧縮ツール用にコードを書く必要がある．
jsは、コードが実行される順番に変数宣言をしていけばいいのだが、圧縮ツール用には、変数の宣言を最初の変数の登場より先にしなくてはならない．

変数の宣言がないままに変数が登場すると、

 function createPopup(){
 // Popup クラスから Popup インスタンスを作る．
  var _popup = PopupClass.apply( {}, []);
 }
 ~
 // Popup クラスの宣言
 var PopupClass = function(){};

圧縮ツールは、最初に登場する PopupClass はそのまま．var PopupClass= のみ、var a= などと圧縮をかける．結果、createPopup() したときに PopupClass が未定義だよ！となる．

google 提供の clouser コンパイラではうまく動いた．

• 決定版はこれだ！ Javascriptの圧縮、難読化ツール 比較検討 http://gogolounge.blog.shinobi.jp/Entry/4/

javascript のメモリリーク

• 開発IEメモリリークの最後の壁はAjaxのonreadystatechangeやった！！ http://d.hatena.ne.jp/AWAWA/20071207/1197036423 http://web.archive.org/web/20100105063109/http://d.hatena.ne.jp/AWAWA/20071207/1197036423
• Internet Explorer リーク パターンを理解して解決する http://msdn.microsoft.com/ja-jp/library/bb250448

クロージャがまずい．
dom追加は、appendChild を先に．あとからプロパティをセット．
イベントハンドラに、グローバルで定義された 空の function を突っ込んで解除する．

JavaScript Memory Leak Detector (v2)

• DL先 http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak-detector-v2.aspx
• Pdm.dll がないよ、といわれるので、Script Debugger for Windows NT 4.0 and Later をdlしてインストール．
• 操作していってリークを検地すると教えてくれるらしい．http://kakutodani.blog91.fc2.com/blog-entry-156.html

スタンドアローン版 IE の通常版と異なる挙動

IETester で 条件付コメントによる、vml のインストールの有無のチェックができない挙動に遭遇.
vml のチェックは、現在は条件付コメントを動的に付与して行っている.（他にいい方法ないかな、、、？）

VML: ( function(){
	if( isIE === false || ieVersion > 8) return false;
	var globalObjectName = createGrobalObjectName(), script;
	document.writeln( [ '<!--[if gte vml 1]><script type="text/javascript">window.', globalObjectName,'=1;</script><![endif]-->'].join( ''));
	if( window[ globalObjectName] === 1){
		window[ globalObjectName] = undefined;
		return true;
	}
	return false;
})(),

XPsp3 に IETester をインストールして 6, 7, 8 をテストできる環境にしているが、6 と 7 では、vml のチェックが働かない.
これは、スタンドアローン版 IE は 条件付コメントが働かない、ためと思われる.（ 違うかもしれない．<!--［if IE 6］> などはちゃんと動いている。というわけで純粋にスタンドアローン版な挙動をしてくれる ie をまだ使ったことがない．）
一方で、8 で正しく動いているのは、8 が Windows 環境のデフォルトの ie なので通常版であるため、と思う.

navigator.ua で取得したバージョンと 動的に書き出した条件付コメント（内でスクリプトを使用）が不一致だったら、スタンドアローン版として処理する.（未検証）

• 条件付コメント文の誤算 http://bopsublog.blog.shinobi.jp/Entry/15/
• http://philip.html5.org/data/ccs.html

javascript の選択禁止

• ieでは、unselectable を使う．但しこの指定は継承しないため、全てのテキストを持つ要素に指定する．

  <div unselectable="on">テキスト</div>
  

• css を使う場合．

  <div style="-moz-user-select: none;">テキスト</div>
  <div style="-khtml-user-select: none;">テキスト</div>
  <div style="-webkit-user-select: none;">テキスト</div>
  <div style="user-select: none;">テキスト</div> css3 ??
  

• js を使う

  <div onMouseMove="window.getSelection().removeAllRanges();">テキスト</div> など
  

• http://www.programming-magic.com/20071217225449/

js で自動でテキスト選択を禁止する必要がある．

Opera 9 ～ 11 で動かない問題．

9.6, 10.1, 10.5, 11 のポータブル版と 11.5 をインストールして使っているが、pettanR 0.3以降で画像の反転操作を行うと、うまく動かなくなる．

この部分の値を書き出してみると、ありえないタイミングで undefined になってしまうようだ．反転をさせようとするとかなりの確立で起きるし、リサイズでも起きるみたいだ．

この症状は、他のブラウザ、ie6以降、firefox3.6 Chrome5 Safari3.2 ではまったく再現しない．アスペクト維持リサイズ機能を組み込んでいない0.2.0 でも再現しない．

画像反転部分は、現在プログラム中でもっとも入り組んでいる．より小さいオブジェクトは、それと関係する大きなオブジェクトの中に書くようにしてクロージャを利かせている．もっとも深い部分でその入れ子は、5段程度になるが、その部分がコミック要素の反転・リサイズ・移動 を担当している、件の部分だ．

0.4.0 では、この入れ子を 3段階程度に減らしたところ、9、10 では再現していないようだ． 11では、最初のうちは動いているが、他のアプリから戻ったときなどに症状が再発する．ちょ、、、（作業の途中、4段階に減らした段階でも、効果は実感できた．）

CoreDuo と Core2Duo Corei5 のマシンでチェックしているが、マシンスペックとの関連性はいまのところ感じない．

今回で完全とはいかないが対処法は見えてきたといえそうです．同様の問題の報告は見かけないので、コーディングのスタイルがちょっと特殊っぽいせいもあるかも、、、

以下は、0.3.0 の editor の階層．五段階目に問題の RESIZE_CONTROLER がいる．そういえば同じ段の COMIC_ELEMENT_CONSOLE でもよく仕事を忘れて表示がおかしくなが、こちらは機能が損なわれるほど深刻な問題にはならない．

 *   pettanr.editor
 *    - MENU_BAR_CONTROL
 *    - HISTORY
 *    - SAVE_CONTROL
 *    - TEXT_EDITOR_CONTROL
 *    - IMAGE_GROUP_EXPROLER
 *    - WINDOW_CONTROL
 *       - WindowClass
 *    - INFOMATION_WINDOW
 *    - TOOL_BOX_WINDOW
 *    - HELP_DOCUMENTS_WINDOW
 *    - CANVAS_CONTROL
 *       - GRID_CONTROL
 *       - WHITE_GLASS_CONTROL
 *       - PANEL_BORDER_CONTROL
 *       - COMIC_ELEMENT_CONTROL
 *          - PanelResizerClass
 *          - COMIC_ELEMENT_OPERATOR
 *             - COMIC_ELEMENT_CONSOLE
 *             - TAIL_CONTROLER
 *             - RESIZE_CONTROLER
 *             - POSITION_CONTROLER
 *          - AbstractComicElement
 *          - ImageElementClass
 *          - TextElementClass

リキッドレイアウト

画面をフルに使ってもいい感じに見せてくれるレイアウト手法をリキッドレイアウトという．Local wiki で痛感したけど、ディスプレイのスペースを有効に使える、リキッドレイアウトをこれから勉強です．

Android, iPad のテスト環境

タイタニウムスタジオ という アプリで IDE環境 とエミュレーションができるらしい． できない．とりあえず Android には Android SDK からエミュレータを使う．OSのバージョンはさまざま選べるが、2.1 になるとエミュレータがモッサリしてくるので、1.6 で主にチェックする．

Webリソースを抽象化するOS

• OS が ハードウェアを抽象化するのに対し、WebOS は WebAPI を抽象化する．
• このような仕組みが必要なのは、サーバがコアなサービスに専念し、それ以外のものをWebAPIで補うため．結果堅牢なサービスになり作品を守ることができる．
• pettanR ドライバ がファイルシステムに登録されると（resisterDriver）ドライバは ファイルのルートに フォルダを作ることができる．そのフォルダには pettanR ドライバがファイルドライバとして指定されていて、このドライバがまだWebの向こうにあるファイルへのアクセスといった実際の作業を行う．

itozyun のクライアント制作の方針

• サーバは作品を守り、クライアントはサーバを（負荷から）守る．
• pettanR 以外の WebAPI を使って機能を追加するのは、サーバに中心テーマから外れる機能追加を強いずにユーザーの要望に応えるため．
• クライアントにエラーがあっても影響は知れているので、（作品を勝手に削除してしまう、とかは論外として）アグレッシブにいく．
• とはいえ、クライアントコードの中身は最小限のコアと追加機能部分、という書き方になっているので、安定とアグレッシブのグラデーションができる（はず）．
• javascript の理解を深め、コーディングスタイルを定める．0.4.x までのコードは人に見せたらまずいレベル．

メモ

• Mozilla のモバイル用ブラウザ Fennec のx86版．おそらく最終バージョン．小さい画面を有効に使うアイデアがいい．http://www.mozilla.org/projects/fennec/1.0a1-wm/releasenotes/
• No Browser Left Behind
• ブロードウェイhttps://www.google.co.jp/search?um=1&q=%E3%83%96%E3%83%AD%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A7%E3%82%A4&ie=UTF-8&hl=ja&tbm=isch&source=og&sa=N&tab=wi&authuser=0&ei=FX-5T4OYF4LcmAWPmvC3CQ&biw=1920&bih=893&sei=GX-5T-jlIsb4mAWG1uXHCQ
• パブリックドメイン/CCライセンスのピクトグラムアイコン素材のみを配布するThe Noun Project http://kachibito.net/web-design/the-noun-project.html
• css
  • http://allabout.co.jp/gm/gc/24009/3/, http://blog.antenna.co.jp/CSSPage/2010/07/textalign_justify.html
  • http://momdo.s35.xrea.com/web-html-test/CSS3-memo/-ms-interpolation-mode.html
  • https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css#L35-37
• lib
  • http://modernizr.com/docs/#load
• info
  • http://www.quirksmode.org/dom/events/scroll.html
  • http://cou929.nu/data/google_javascript_style_guide/
  • http://www.studyinghttp.net/cgi-bin/rfc.cgi?3986#Sec3.4
  • http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#Parser_Lexer_combination
  • http://d.hatena.ne.jp/pyopyopyo/20070922/p1
• js 省メモリ
  • http://yabooo.org/archives/70
  • http://blog.tojiru.net/article/238901975.html
• metro ui
  • http://metroui.org.ua/typography.html
  • http://blogs.msdn.com/b/windowsappdev_ja/
  • http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/04/16/managing-app-lifecycle.aspx
  • http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465403.aspx
  • http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx

css

js 経由で css を操作する方法．safari ではできない、となっているが、、、 javascript - CSSをいじくる http://blog.livedoor.jp/dankogai/archives/50784253.html

以下によると safari 3.0 以降では css の操作ができる． http://www.lizard-tail.com/isana/slugheap/?tumblelogging_with_tdiary

about itozyun

• 目立ちたがり屋という点でフロント向き．
• 好奇心に負けて地雷を踏む性格なので、API 設計などを任せてはいけない．