小さな面倒を解消するjsx群（+そのプラグイン化について） - Photoshop and me

スライドのURLリンク一覧です。
「moremorefor/PhotoshopTinyPatch」 https://github.com/moremorefor/PhotoshopTinyPatch
「Adobe-CEP/CEP-Resources」 https://github.com/Adobe-CEP/CEP-Resources
「Creative Cloud Extension Builder for Brackets」 http://davidderaedt.github.io/CC-Extension-Builder-for-Brackets/
「davidderaedt/CC-EXT-SDK」 https://github.com/davidderaedt/CC-EXT-SDK
「moremorefor/PhotoshopSampleExt」 https://github.com/moremorefor/PhotoshopSampleExt

Transcript

1. খ͞ͳ໘౗Λղফ͢ΔKTY܈
   ʢ
   ͦͷϓϥάΠϯԽʹ͍ͭͯʣ 2014/06/18 - Photoshop and me @more_more_for @more_more_for
2. @more_more_for UI Design & Illustration
3. Private Project GHFeed ੜ͖ΖʂϚϯϘ΢ʂ ԯඖͷ஥ؒ͸ΈͳࢮΜͩɺ์ஔܥυοτҭ੒ήʔϜ Feed reader for GitHub. σβΠϯ΍Πϥετ୲౰ͯ͠·͢ɻ
4. ɾখ͞ͳKTYΛॻ͘εεϝ ࠓ೔ͷ಺༰ ɾKTYʹ؆୯ʹ(6*Λ͚ͭΔํ๏
5. ಥવͰ͕͢ɺ
   1IPUPTIPQͰ࡞ۀͯ͠Δͱ
   ࡉ͔͍ૢ࡞ײ͕ؾʹͳΓ·͢ΑͶʁ
6. ͳΜͰ͜Ε͕ग़དྷΔػೳ͕ແ͍Μͩʜ
   ƅЧƅ Z__ŘŽŘŽ ‣ ςΩετϨΠϠʔͷ໊લ͕ೖྗ಺༰ͱҧ͏ʜ ͜͏͍͏ܦݧ͋Γ·ͤΜ͔ʁ ‣ ͳΜͰ͜ͷύεͷେ͖͞੔਺͡Όͳ͍ͷʜ ‣ ϨΠϠʔ໊ͰϨΠϠʔॱΛฒͼସ͍͑ͨʜ ‣ ը૾ෳ੡ͯ͠࿈൪Λৼͬͨμϛʔը૾࡞Γ͍ͨʜ ‣ *MMVTUSBUPSͱಉ͡Α͏ͳҠಈύωϧཉ͍͠ʜ
7. খ͞ͳKTYΛॻ͚ͩ͘Ͱ
   ͦͷετϨε͔Β
   ։์͞Ε·͢
8. 1IPUPTIPQ5JOZ1BUDI IUUQTHJUIVCDPNNPSFNPSFGPS1IPUPTIPQ5JOZ1BUDI
9. ApplyTextToLayerName.jsx
10. ‣ ςΩετͷϨΠϠʔ໊͕ςΩετͷ಺༰ͱͣΕͯΔʜ
11. %FNP
12. /*    *  ApplyTextToLayerName.jsx    *    *  Copyright  (c)  more_more_for.    *    *  This  software  is  released  under  the  MIT  License.    *  http://opensource.org/licenses/mit-­‐license.php    *    */       preferences.rulerUnits  =  Units.PIXELS;       var  openDoc  =  activeDocument;       main();       function  main()  {          openDoc.suspendHistory('ApplyTextToLayerName','ApplyTextToLayerName(openDoc)');   }           function  ApplyTextToLayerName(doc)  {      var  arr  =  getSelectedLayersIdx();      for(var  i=0;  i<arr.length;  i++)  {          var  idx  =  arr[i];          getLayerFromIndex(idx);              doc.activeLayer.name  =  doc.activeLayer.textItem.contents;      }   }       //////////////////////////////////////////////////   //  Select  layers  from  index   //////////////////////////////////////////////////   function  getLayerFromIndex(index)  {      var  idslct  =  charIDToTypeID(  "slct"  );          var  desc6  =  new  ActionDescriptor();          var  idnull  =  charIDToTypeID(  "null"  );                  var  ref4  =  new  ActionReference();                  var  idLyr  =  charIDToTypeID(  "Lyr  "  );                  ref4.putIndex(  idLyr,  index  );          desc6.putReference(  idnull,  ref4  );          var  idMkVs  =  charIDToTypeID(  "MkVs"  );          desc6.putBoolean(  idMkVs,  false  );   executeAction(  idslct,  desc6,  DialogModes.NO  );   }       function  getLayerReference(index)  {      var  idTrnf  =  charIDToTypeID(  "Trnf"  );                  var  desc48  =  new  ActionDescriptor();                  var  idnull  =  charIDToTypeID(  "null"  );                          var  ref36  =  new  ActionReference();                          var  idLyr  =  charIDToTypeID(  "Lyr  "  );                          var  idOrdn  =  charIDToTypeID(  "Ordn"  );                          var  idTrgt  =  charIDToTypeID(  "Trgt"  );                          ref36.putEnumerated(  idLyr,  idOrdn,  idTrgt  );                  desc48.putReference(  idnull,  ref36  );   }       };   ! function  getSelectedLayersIdx(){              var  selectedLayers  =  new  Array;              var  ref  =  new  ActionReference();              ref.putEnumerated(  charIDToTypeID("Dcmn"),  charIDToTypeID("Ordn"),  charIDToTypeID("Trgt")  );              var  desc  =  executeActionGet(ref);              if(  desc.hasKey(  stringIDToTypeID(  'targetLayers'  )  )  ){                    desc  =  desc.getList(  stringIDToTypeID(  'targetLayers'  ));                      var  c  =  desc.count                      var  selectedLayers  =  new  Array();                      for(var  i=0;i<c;i++){                          try{                                activeDocument.backgroundLayer;                                selectedLayers.push(    desc.getReference(  i  ).getIndex()  );                          }catch(e){                                selectedLayers.push(    desc.getReference(  i  ).getIndex()+1  );                          }                      }                }else{                    var  ref  =  new  ActionReference();                    ref.putProperty(  charIDToTypeID("Prpr")  ,  charIDToTypeID(  "ItmI"  ));                    ref.putEnumerated(  charIDToTypeID("Lyr  "),  charIDToTypeID("Ordn"),  charIDToTypeID("Trgt")  );                    try{                          activeDocument.backgroundLayer;                          selectedLayers.push(  executeActionGet(ref).getInteger(charIDToTypeID(  "ItmI"  ))-­‐1);                    }catch(e){                          selectedLayers.push(  executeActionGet(ref).getInteger(charIDToTypeID(  "ItmI"  )));                    }            var  vis  =  app.activeDocument.activeLayer.visible;                  if(vis  ==  true)  app.activeDocument.activeLayer.visible  =  false;                  var  desc9  =  new  ActionDescriptor();          var  list9  =  new  ActionList();          var  ref9  =  new  ActionReference();          ref9.putEnumerated(  charIDToTypeID('Lyr  '),  charIDToTypeID('Ordn'),  charIDToTypeID('Trgt')  );          list9.putReference(  ref9  );          desc9.putList(  charIDToTypeID('null'),  list9  );          executeAction(  charIDToTypeID('Shw  '),  desc9,  DialogModes.NO  );          if(app.activeDocument.activeLayer.visible  ==  false)  selectedLayers.shift();                  app.activeDocument.activeLayer.visible  =  vis;              }              return  selectedLayers;   100 lines
13. ࣮࣭ߦ͘Β͍ function  ApplyTextToLayerName(doc)  {      var  arr  =  getSelectedLayersIdx();      for(var  i=0;  i<arr.length;  i++)  {          var  idx  =  arr[i];          getLayerFromIndex(idx);              doc.activeLayer.name  =  doc.activeLayer.textItem.contents;      }   } ຊ࣭తͳͷ͸ߦ
14. MoveObjects.jsx
15. ‣ *MMVTUSBUPSͱಉ͡Α͏ͳҠಈύωϧཉ͍͠ʜ
16. %FNP
17. /*     <javascriptresource>   <name>Move  Objects</name>   <category>web</category>   </javascriptresource>   */       /*    *  auther:  Tsukada  Takumi  (@more_more_for)    *  ver:  1.0.3    */            preferences.rulerUnits  =  Units.PIXELS;       var  d  =  activeDocument;   d.suspendHistory("Move  Objects",  "main()");       function  handle_key  (event)  {      //Check  keyName      //alert(event.keyName);      var  step;      ScriptUI.environment.keyboardState['shiftKey']  ?  step  =  10  :  step  =  1;      if(event.keyName  ==  'LeftBracket'){          this.text  =  Number(this.text)-­‐step;          event.preventDefault();      }      if(event.keyName  ==  'RightBracket'){          this.text  =  Number(this.text)+step;          event.preventDefault();      }   }       function  createDialog()  {          var  wMargin  =  20;      var  hMargin  =  10;      var  wWidth  =  340;      var  wHeight  =  240;      var  characterHeight  =  20;      var  previousObj;      w  =  new  Window("dialog","Move  Objects",[100,100,100+wWidth,100+wHeight]);          var  textObjectX  =  new  Object();      textObjectX.left  =  wMargin;      textObjectX.top  =  hMargin*2;      textObjectX.right  =  wWidth  -­‐  150  -­‐  wMargin;      textObjectX.bottom  =  textObjectX.top  +  characterHeight;      w.labelX  =  w.add("statictext",  textObjectX,  "moveX:");          var  editObjectX  =  new  Object();      editObjectX.left  =  wMargin  +  150;      editObjectX.top  =  hMargin*2;      editObjectX.right  =  wWidth  -­‐  wMargin;      editObjectX.bottom  =  editObjectX.top  +  characterHeight;      w.movingX  =  w.add("edittext",  editObjectX);      previousObj  =  editObjectX;          var  textObjectY  =  new  Object();      textObjectY.left  =  wMargin;      textObjectY.top  =  previousObj.bottom  +  hMargin*2;      textObjectY.right  =  wWidth  -­‐  150  -­‐  wMargin;      textObjectY.bottom  =  textObjectY.top  +  characterHeight;      w.labelY  =  w.add("statictext",  textObjectY,  "moveY:");          var  editObjectY  =  new  Object();      editObjectY.left  =  wMargin  +  150;      editObjectY.top  =  previousObj.bottom  +  hMargin*2;      editObjectY.right  =  wWidth  -­‐  wMargin;      editObjectY.bottom  =  editObjectY.top  +  characterHeight;      w.movingY  =  w.add("edittext",  editObjectY);      previousObj  =  editObjectY;          var  checkboxObj  =  new  Object();      checkboxObj.left  =  wMargin;      checkboxObj.top  =  previousObj.bottom  +  hMargin*2;      checkboxObj.right  =  wWidth  -­‐  wMargin;      checkboxObj.bottom  =  checkboxObj.top  +  characterHeight;      w.duplicate  =  w.add("checkbox",  checkboxObj,  "Duplicate");      previousObj  =  checkboxObj;     !    var  cancelButtonObj  =  new  Object();      cancelButtonObj.left  =  wMargin;      cancelButtonObj.top  =  previousObj.bottom  +  hMargin*2;      cancelButtonObj.right  =  wWidth  -­‐  160  -­‐  wMargin;      cancelButtonObj.bottom  =  cancelButtonObj.top  +  characterHeight*2;      w.cancelButton  =  w.add("button",  cancelButtonObj,  "cancel");          var  okButtonObj  =  new  Object();      okButtonObj.left  =  wMargin  +  160;      okButtonObj.top  =  previousObj.bottom  +  hMargin*2;      okButtonObj.right  =  wWidth  -­‐  wMargin;      okButtonObj.bottom  =  okButtonObj.top  +  characterHeight*2;      w.okButton  =  w.add("button",  okButtonObj,  "OK");      previousObj  =  okButtonObj;          w.movingX.addEventListener  ("keydown",  handle_key  );      w.movingY.addEventListener  ("keydown",    handle_key  );          w.movingX.text  =  0;      w.movingY.text  =  0;      w.movingX.active  =  true;      w.duplicate.value  =  true;      return  w;   }       function  initializeDialog(w)  {      w.okButton.onClick  =  function()  {              var  moveLayer  =  d.activeLayer;                  var  _x  =  w.movingX.text  *  1.0;              var  _y  =  w.movingY.text  *  1.0;                  var  xx;              var  yy;              if(_x  ==  null){                  xx  =  0;              }else  {                  xx  =  _x;              }                  if  (_y  ==  null)  {                  yy  =  0;              }else  {                  yy  =  _y;              }                  var  duplicateOption  =  w.duplicate.value;                  if(duplicateOption)  {                  _moveLayer  =  moveLayer;                  var  duplicateLayer  =  moveLayer.duplicate();                  duplicateLayer.translate(xx,yy);                  }  else  {                  moveLayer.translate(xx,yy);              }                  w.close();      }   }       function  runDialog(w)  {          return  w.show();   };         function  main()  {      var  win  =  createDialog();          initializeDialog(win);          runDialog(win);   }   151 lines
18. ͜Ε΋࣮࣭ߦ moveLayer.translate(xx,yy);
19. ཁ͢Δʹɺ
20. ƂŖŘʋ ƅ˲ƅ Ÿ ƅ˲ƅ Ÿ ƅ˲ƅ ůƂŖŘ KTYͷϦϑΝϨϯε͕͔ͳΓΘ͔Γʹ͍͘ͷͰ
    1IPUPTIPQͷ"1*Λཧղ͢Δͱ͍͏
    ॳظίετ͸͔͔Γ·͕͢ɺ
    1IPUPTIPQͷόάΛ౿Έ͑͞͠ͳ͚Ε͹
    Ұ౓֮͑ΔͱɺखܰʹετϨεΛղফͰ͖Δʂ
21. ؤுΕ͹৭Μͳ͜ͱ͕
    KTYͰࡁΉ
    ˞
    ΍Γա͗஫ҙ
22. ʮ
    Ͱ΋KTYͬͯύωϧԽͰ͖ͳ͍͔Β
    ࢖͍ʹ͍͘৔໘΋͋Δɻ
    (6*ͷίʔυॻ͘ͷͩΔ͍͠ɻ
    ෍ڭ͢ΔͳΒ(6*ඞਢͰ͠ΐɻ
    ʯ ʅɾТɾʆ
23. ࿕ใ
24. )5.-$44Ͱ؆୯ʹύωϧԽ
    ग़དྷΔΑ͏ʹͳΓ·ͨ͠
    ʢݩʑ͸qBTIqFYʣ "EPCF$&1
    ʢ"EPCF
    $PNNPO
    &YUFOTJCJMJUZ
    1MBUGPSNʣ ֤ΞϓϦέʔγϣϯ͕$ISPNF
    &NCFEFE
    'SBNFXPSLΛ
    ϑϩϯτͱͯ͠಺ଂ͠ɺ$4*OUFSGBDFΫϥεΛ௨ͯ͡
    &YUFOE4DSJQUͷ%0.ʹΞΫηεͰ͖Δ
27. &DMJQTFͰॻ͖ͨ͘ͳ͍
28. https://github.com/Adobe-CEP/CEP-Resources
29. http://davidderaedt.github.io/CC-Extension-Builder-for-Brackets/
30. ૢ࡞ޙ1IPUPTIPQΛ࠶ىಈ͢Δͱ΋͏ύωϧ͕࢖༻Ͱ͖Δ
31. w #SBDLFUTͰ΋ॻ͖ͨ͘ͳ͍
    ! w ϓϩδΣΫτͷ࡞੒͕
    
    
    
    ΤσΟλʹґଘͯ͠Δͷ࢖͍ʹ͍͘
32. https://github.com/davidderaedt/CC-EXT-SDK ˞લड़ͷ"EPCF$&1ͷϥούʔΈ͍ͨͳײ͡Ͱ͢
33. ؆୯ͳϓϥάΠϯ࡞ͬͯΈ·ͨ͠
34. ύωϧԽʹඞཁͳ΋ͷ
    )5.-ɺ$44ɺ+4 ͜ͷϝΠϯͷ+4͔ΒKTYͷؔ਺Λݺͼग़͢
35. jsx
36. $ Grunt ͦͷޙɺ1IPUPTIPQΛ࠶ىಈ
37. Demo - CreateSelection
38. KTYͷࢿ࢈Λར༻ͯ͠
    ؆୯ʹϓϥάΠϯ͕࡞ΕΔʂ
39. ݱࡏ$$ΞϓϦ͸$&1Ͱ͕͢
    ࣍ظ$&1Ͱ͸ڧྗͳػೳ͕ʜ /PEFKT
    BOE
    /1.
    TVQQPSU 8FC35$
    TVQQPSU *OWJTJCMF
    )5.-
    FYUFOTJPOT $BMM
    GSPN
    &YUFOE4DSJQU
    JOUP
    )5.-
    %0.
40. ͓·͚ HSVOUͰΑ͠ͳʹ΍ͬͯ͘ΕΔͻͳܗ࡞ͬͯΈ·ͨ͠ +BEF
    TUZMVT
    BVUP3FMPBE
    BVUP%FQMPZʜ ͍͍ײ͡ʹվมͯ͠࢖͍ͬͯͩ͘͞
    ʢ1VMM3FRVFTU౳΋͓଴ͪͯ͠·͢ʣ IUUQTHJUIVCDPNNPSFNPSFGPS1IPUPTIPQ4BNQMF&YU
41. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ