アプリコンテスト

931 views
881 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
931
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

アプリコンテスト

  1. 1. 舐め回す会 ブログ Div  山田友典
  2. 2. アジェンダ <ul><ul><li>自己紹介 </li></ul></ul><ul><ul><li>新エディタとは </li></ul></ul><ul><ul><ul><li>機能紹介 </li></ul></ul></ul><ul><ul><ul><li>新エディタの現状 </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>新エディタの技術的背景 </li></ul></ul><ul><ul><ul><li>YUI  </li></ul></ul></ul><ul><ul><ul><li>closure tools </li></ul></ul></ul><ul><ul><ul><li>WYSIWYG </li></ul></ul></ul><ul><ul><ul><li>compatibility view </li></ul></ul></ul><ul><ul><ul><li>アプリケーションログ </li></ul></ul></ul><ul><li>  </li></ul>
  3. 3. 自己紹介 <ul><li>var me = { </li></ul><ul><li>  name : &quot; 山田友典 &quot;, </li></ul><ul><li>  age : 30, </li></ul><ul><li>}; </li></ul>
  4. 4. 自己紹介 <ul><ul><li>中途入社1年目 </li></ul></ul><ul><li>  </li></ul><ul><ul><li>エンジニアではない </li></ul></ul><ul><ul><li>妻、娘と3人暮らし </li></ul></ul><ul><ul><li>池袋が好き </li></ul></ul>
  5. 5. 機能紹介 <ul><ul><li>画像フォルダとの統合 </li></ul></ul><ul><li>  </li></ul><ul><ul><li>自動バックアップ </li></ul></ul><ul><li>  </li></ul><ul><ul><li>WYSISYG モード、 HTML モードの統合 </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  6. 6. 新エディタの現状 <ul><ul><li>UU は堅調に推移しているものの旧エディタの 1/20 くらい </li></ul></ul><ul><ul><li>まだ不具合が多い </li></ul></ul><ul><ul><li>新規登録会員のデフォルトは旧エディタ </li></ul></ul><ul><ul><li>旧エディタから誘導動線 </li></ul></ul><ul><ul><li>「アメブロの設定」で選択できる </li></ul></ul>
  7. 7. YUI <ul><ul><li>V2 </li></ul></ul><ul><ul><li>OOP </li></ul></ul><ul><ul><li>CDN と loader </li></ul></ul><ul><ul><li>local storage </li></ul></ul>
  8. 8. YUI - oop <ul><li>クラス化されたライブラリ構成 </li></ul><ul><li>http://developer.yahoo.com/yui/docs/YAHOO.widget.Editor.html </li></ul>
  9. 9. YUI - oop <ul><li>継承のサポート </li></ul>var Class1 = function(info) {   alert(&quot;Class1: &quot; + info);  };   Class1.prototype.testMethod = function(info) {   alert(&quot;Class1: &quot; + info);  };   var Class2 = function(info) {   Class2. superclass .constructor.call(this, info);   alert(&quot;Class2: &quot; + info); };   YAHOO.lang.extend (Class2, Class1);   Class2.prototype.testMethod = function(info) {   Class2. superclass .testMethod.call(this, info);   alert(&quot;Class2: &quot; + info); };   var class2Instance = new Class2(&quot;constructor executed&quot;); class2Instance.testMethod(&quot;testMethod invoked&quot;);
  10. 10. YUI - CDN と loader <ul><ul><li>view-source:http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?editor_flg=2 </li></ul></ul><ul><ul><li>  http://developer.yahoo.com/yui/articles/hosting/ </li></ul></ul>
  11. 11. closure tools <ul><ul><li>closure templates </li></ul></ul><ul><ul><li>closure compiler </li></ul></ul>
  12. 12. closure tools <ul><ul><li>closure templates </li></ul></ul><ul><ul><ul><li>小さな MVC </li></ul></ul></ul><ul><ul><ul><li>作業者の MVC </li></ul></ul></ul><ul><ul><ul><li>  HTML がそのままかける </li></ul></ul></ul><ul><ul><ul><li>適度なロジック </li></ul></ul></ul><ul><ul><ul><li>soy -> js </li></ul></ul></ul>
  13. 13. 小さな MVC
  14. 14. 作業者の MVC <ul><ul><li>javascript 担当者は .js ファイルを </li></ul></ul><ul><ul><li>css 担当者は .css ファイルを </li></ul></ul><ul><ul><li>マークアップ担当者は テンプレートファイル を </li></ul></ul>
  15. 15. HTML がそのまま書ける <ul><li>{namespace templates} </li></ul><ul><li>/** </li></ul><ul><li>  * </li></ul><ul><li>  */ </li></ul><ul><li>{template .browserUpdate} </li></ul><ul><li>  <div id=&quot;ie6update&quot;> </li></ul><ul><li>  <div id=&quot;ie6updateClose&quot;> </li></ul><ul><li>  <a href=&quot;#&quot; onClick=&quot;this.parentNode.parentNode.style.display='none';&quot;><image src=&quot;http://stat.ameba.jp/common_style/img/common/icon/close.gif&quot; /></a> </li></ul><ul><li>  </div> </li></ul><ul><li>  <p> </li></ul><ul><li>  <span> </li></ul><ul><li>  お使いのブラウザはサポートされていません。 <a href=&quot;http://helps.ameba.jp/faq/others/5510/top_08.html&quot; target=&quot;_blank&quot;> 推奨環境 </a> をご確認の上、ブラウザをアップグレードしてください。 </li></ul><ul><li>  </span> </li></ul><ul><li>  </p> </li></ul><ul><li>  </div> </li></ul><ul><li>{/template} </li></ul>
  16. 16. 適度なロジック <ul><li>/** </li></ul><ul><li>  *@ param slotParams </li></ul><ul><li>  */ </li></ul><ul><li>{template .mdlWrapPict} </li></ul><ul><li>  <div class=&quot;mdlWrap&quot; id=&quot;mdlWrapPict&quot; style=&quot;padding-bottom:1px;&quot;> </li></ul><ul><li>    <p class=&quot;note&quot;> 画像をクリックして記事に貼りつけてください。 </p> </li></ul><ul><li>    { foreach $slotParam in $slotParams} </li></ul><ul><li>      { call .slot} </li></ul><ul><li>        {param height : $slotParam.height /} </li></ul><ul><li>        {param id     : $slotParam.id /} </li></ul><ul><li>        {param label  : $slotParam.label /} </li></ul><ul><li>      {/call} </li></ul><ul><li>    {/foreach} </li></ul><ul><li>  </div> //mdlWrapPict </li></ul><ul><li>{/template} </li></ul>
  17. 17. soy -> js <ul><li>java でコンパイルする </li></ul>  java -jar SoyToJsSrcCompiler.jar --outputPathFormat template.js template.soy
  18. 18. closure tools <ul><ul><li>closure compiler </li></ul></ul><ul><ul><ul><li>-optimization level </li></ul></ul></ul><ul><ul><ul><li>-extern </li></ul></ul></ul><ul><ul><ul><li>非コンパイル空間への export </li></ul></ul></ul><ul><ul><ul><li>コンパイル </li></ul></ul></ul>
  19. 19. -optimization level <ul><ul><li>WHITESPACE_ONLY </li></ul></ul><ul><ul><li>SIMPLE_OPTIMIZATIONS </li></ul></ul><ul><li>->  普通の難読化 </li></ul><ul><ul><li>ADVANCED_OPTIMIZATION </li></ul></ul><ul><li>        ->  パースして不要なコードを削除してくれる </li></ul><ul><li>http://closure-compiler.appspot.com/home </li></ul>
  20. 20. -extern <ul><li>非コンパイル空間のオブジェクトにコンパイル空間からアクセスするとき・・・ </li></ul><ul><li>例)すでに jquery が使われているページで、 &quot;$&quot; へのアクセスをコンパイルしたくない。 </li></ul><ul><li>↓ </li></ul><ul><li>指定された .js ファイル内に存在するグローバルオブジェクトへのアクセスはコンパイルさせないオプション </li></ul>-extern jquery.js
  21. 21. 非コンパイル空間への export <ul><li>非コンパイル空間からコンパイル空間内のオブジェクトにアクセスしたいんだけど… </li></ul><ul><li>例)インラインのソースコードからコンパイルされた外部 js ファイル内のメソッドを実行したい </li></ul><ul><li>↓ </li></ul><ul><li>文字列リテラルはコンパイルされない </li></ul>window[&quot;Amb&quot;]                  = window.Amb; window[&quot;Amb&quot;][&quot;Ameblo&quot;] = window.Amb.Ameblo;
  22. 22. コンパイル <ul><li>java でコンパイルする </li></ul><ul><li>・・・ということは </li></ul><ul><li>closure templates, closure compiler を勝手に実行しといてくれるサーバーがあれば楽じゃね、 soy とかがアップされたら自動的に </li></ul><ul><li>->   js.ameba.jp??? </li></ul>java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js
  23. 23. WYSIWYG <ul><ul><li>contenteditable と document.designMode </li></ul></ul><ul><ul><li>document.execCommand </li></ul></ul><ul><ul><li>キャレットと選択範囲 </li></ul></ul><ul><ul><li>browserscope </li></ul></ul>
  24. 24. contenteditable と document.designMode <ul><ul><li>contenteditable </li></ul></ul><ul><ul><ul><li>true -> そのエレメントを編集可能に </li></ul></ul></ul><ul><ul><li>document.designMode </li></ul></ul><ul><ul><ul><li>&quot;On&quot; -> document 配下を編集可能に </li></ul></ul></ul><ul><li>http://ameblo.jp </li></ul>
  25. 25. document.execCommand <ul><li>編集可能な要素に対して何らかの処理をする </li></ul><ul><li>例) </li></ul><ul><li>document.execCommand(&quot;bold&quot;, false); </li></ul><ul><li>->  選択範囲を太字に </li></ul><ul><li>document.execCommand(&quot;forecolor&quot;, false, &quot;#f00&quot;); </li></ul><ul><li>->  選択範囲を赤字に </li></ul><ul><li>太字とか赤字とかって HTML 的には何なの? </li></ul>
  26. 26. キャレットと選択範囲 <ul><li>http://www.w3.org/TR/html5/editing.html#attr-contenteditable </li></ul><ul><li>キャレットの振る舞いや選択範囲の処理などは HTML として規定がない </li></ul><ul><li>↓ </li></ul><ul><li>UA の無法地帯 </li></ul><ul><li>↓ </li></ul><ul><li>ライブラリによる差異の吸収? </li></ul>
  27. 27. browserscope <ul><li>http://www.browserscope.org/richtext2/test </li></ul>
  28. 28. compatibility view <ul><ul><li>ドキュメントモードとブラウザモード (ie8) </li></ul></ul><ul><ul><li>compatibility view list </li></ul></ul>
  29. 29. ドキュメントモードとブラウザモード <ul><ul><li>ドキュメントモード </li></ul></ul><ul><ul><ul><li>レンダリング方法を規定する </li></ul></ul></ul><ul><ul><ul><li>HTTP ヘッダか <meta> で強制できる </li></ul></ul></ul><ul><ul><li>ブラウザモード </li></ul></ul><ul><ul><ul><li>HTTP_USERAGENT を規定する </li></ul></ul></ul><ul><ul><ul><li>ドキュメントモードを規定する </li></ul></ul></ul><ul><li>以下はブラウザモード「 IE8 互換表示」 </li></ul><ul><li>レンダリングエンジン( Trident/4.0 )から判断する。以下はうまくいかない </li></ul>&quot;Mozilla/4.0 (compatible; MSIE 7.0 ; Windows NT 6.0; Trident/4.0 ; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)&quot; if (YAHOO.env.ua.ie && YAHOO.env.ua.ie < 8 ) { // rewrite class for IE < 8    Y.Selector.attrAliases[ 'class' ] = 'className' ; Y.Selector.attrAliases[ 'for' ] = 'htmlFor' ; }
  30. 30. compatibility view list <ul><ul><li>IE8 にバンドルされているデザイン崩れの激しいサイトのリスト </li></ul></ul><ul><ul><li>ameba.jp 、 ameblo.jp も入っていた </li></ul></ul><ul><ul><li>強制的にブラウザモードを「 IE8 互換表示」にする </li></ul></ul><ul><ul><ul><li>  browser detection しているライブラリはまるで動かない </li></ul></ul></ul><ul><ul><li>windows update でリストが更新される </li></ul></ul><ul><ul><ul><li>kb978506  -> 入っている </li></ul></ul></ul><ul><ul><ul><li>kb2447568  -> 入っていない </li></ul></ul></ul><ul><ul><ul><li>「重要な更新」に含まれない </li></ul></ul></ul>
  31. 31. アプリケーションログ <ul><ul><li>スタックトレース </li></ul></ul><ul><ul><li>サーバーサイド </li></ul></ul>
  32. 32. スタックトレース <ul><li>  /** </li></ul><ul><li>  * @description </li></ul><ul><li>  */ </li></ul><ul><li>  handleError : function (){ </li></ul><ul><li>    var self = this; </li></ul><ul><li>    if (0 < YAHOO.env.ua.ie){ </li></ul><ul><li>      window.attachEvent(&quot;onerror&quot;, function (message, file, line, stack){ </li></ul><ul><li>        if (stack == null){ </li></ul><ul><li>          self.stack = self.stackTrace( arguments.callee.caller , []); </li></ul><ul><li>        } else { </li></ul><ul><li>          self.stack = stack; </li></ul><ul><li>        } </li></ul><ul><li>      }); </li></ul><ul><li>    } </li></ul><ul><li>    // 以下で stack を送信 </li></ul><ul><li>  }, </li></ul>
  33. 33. スタックトレース <ul><li>  /** </li></ul><ul><li>  * @description </li></ul><ul><li>  */ </li></ul><ul><li>  stackTrace : function (caller, stack){ </li></ul><ul><li>    stack.push(caller. toString ()); </li></ul><ul><li>    </li></ul><ul><li>    var caller = caller. arguments.callee.caller ; </li></ul><ul><li>    if (caller != null){ </li></ul><ul><li>      stack = this.stackTrace(caller, stack); </li></ul><ul><li>    } </li></ul><ul><li>    return stack; </li></ul><ul><li>  } </li></ul>
  34. 34. サーバーサイド <ul><ul><li>http://js-errors.appspot.com </li></ul></ul><ul><ul><li>analytics のユーザー変数使ってもいいかも </li></ul></ul><ul><ul><li>今はまだただのエラーログ </li></ul></ul>

×