{"id":1185,"date":"2011-08-06T09:11:00","date_gmt":"2011-08-06T09:11:00","guid":{"rendered":"https:\/\/rawbytes.org\/?p=1185"},"modified":"2025-11-24T02:59:58","modified_gmt":"2025-11-24T02:59:58","slug":"adobe-edge-preview%e3%81%ae%e6%9b%b8%e3%81%8d%e5%87%ba%e3%81%97%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e8%a6%81%e7%82%b9%e3%81%a0%e3%81%91%e3%83%81%e3%82%a7%e3%83%83%e3%82%af","status":"publish","type":"post","link":"https:\/\/rawbytes.org\/?p=1185","title":{"rendered":"Adobe Edge Preview\u306e\u66f8\u304d\u51fa\u3057\u30d5\u30a1\u30a4\u30eb\u3092\u8981\u70b9\u3060\u3051\u30c1\u30a7\u30c3\u30af"},"content":{"rendered":"

\u524d\u56de\u306e\u30a8\u30f3\u30c8\u30ea\u3067\u306f\u3001Adobe Edge Preview\u306e\u66f8\u304d\u51fa\u3057\u30d5\u30a1\u30a4\u30eb\u304c\u666e\u901a\u306eHTML+JS+CSS\u30d5\u30a1\u30a4\u30eb\u306b\u306a\u308b\u3068\u66f8\u304d\u307e\u3057\u305f\u3002<\/p>\n

<\/a><\/div>\n
\u3053\u3093\u306a\u611f\u3058\u3002\u4eca\u56de\u306f\u3001\u3053\u308c\u3089\u306e\u4e2d\u8eab\u3092\u7c21\u5358\u306b\u898b\u3066\u307f\u3088\u3046\u3068\u601d\u3063\u305f\u3002sample.edge\u30d5\u30a1\u30a4\u30eb\u306f\u5358\u306bEdge\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u4f7f\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u307f\u305f\u3044\u306a\u306e\u3067\u3001\u3044\u3063\u305f\u3093\u7121\u8996\u3059\u308b\u3002\u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e\u3082\u306e\u304csample.html, sample_edge.js, sample_edge.css\u306e3\u3064\u3002\u3042\u3068\u306f\u30e9\u30f3\u30bf\u30a4\u30e0\u3068\u601d\u308f\u308c\u308bedge_includes\u3002<\/div>\n
<\/div>\n

<\/p>\n

\uff08\uff11\uff09sample.html<\/b><\/div>\n
sample.html\u306e\u4e2d\u8eab\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3002\u308f\u304b\u308b\u3053\u3068\u306f\u3001<\/div>\n
<\/div>\n
    \n
  • jquery\u3092\u30d9\u30fc\u30b9\u306b\u69cb\u7bc9\u3055\u308c\u3066\u308b\u3089\u3057\u3044<\/li>\n
  • \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5236\u5fa1\u306fjQuery Easing\u3092\u4f7f\u3063\u3066\u3044\u308b\u3089\u3057\u3044<\/li>\n
  • Edge\u30e9\u30f3\u30bf\u30a4\u30e0\u3082jQuery plugin\u3068\u3057\u3066\u4f5c\u3089\u308c\u3066\u308b\u307f\u305f\u3044<\/li>\n<\/ul>\n

    <\/p>\n

    <\/div>\n
    <!DOCTYPE html><\/i><\/div>\n
    <html><\/i><\/div>\n
    <head><\/i><\/div>\n
    <\/span><title>Untitled<\/title><\/i><\/div>\n
    <!–Adobe Edge Runtime–><\/i><\/div>\n
        <script type=”text\/javascript” src=”edge_includes\/jquery-1.4.2.min.js”><\/script><\/i><\/div>\n
        <script type=”text\/javascript” src=”edge_includes\/jquery.easing.1.3.js”><\/script><\/i><\/div>\n
        <script type=”text\/javascript” src=”edge_includes\/edge.0.1.1.min.js”><\/script><\/i><\/div>\n
        <script type=”text\/javascript” src=”edge_includes\/edge.symbol.0.1.1.min.js”><\/script><\/i><\/div>\n
        <script type=”text\/javascript” charset=”utf-8″ src=”sample_edge.js”><\/script><\/i><\/div>\n
        <link rel=”stylesheet” href=”sample_edge.css”\/><\/i><\/div>\n
    <!–Adobe Edge Runtime End–><\/i><\/div>\n

    \n<\/i><\/div>\n
    <\/head><body><\/i><\/div>\n
    <\/span><div id=”stage” class=”symbol_stage”><\/i><\/div>\n
    <\/span><\/div><\/i><\/div>\n
    <\/body><\/i><\/div>\n
    <\/html><\/i><\/div>\n

    \n<\/i><\/div>\n
    \uff08\uff12\uff09sample_edge.js<\/b><\/div>\n
    js\u306e\u4e2d\u8eab\u3092\u898b\u3066\u307f\u308b\u3002\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306f<\/span><\/div>\n
    <\/div>\n
      \n
    • symbols\u3068\u3044\u3046\u8a2d\u5b9a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u3063\u3066\u3001<\/li>\n
    • $.Edge\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u6e21\u3057\u3066\u518d\u751f<\/span><\/li>\n<\/ul>\n
      \u3060\u3051\u307f\u305f\u3044\u3002\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3068\u304b\u304c\u5165\u3063\u3066\u304f\u308b\u3068\u3053\u306e\u3078\u3093\u306f\u3069\u3046\u306a\u308b\u306e\u304b\u306a\u3002<\/div>\n
      \n<\/div>\n
      <\/div>\n
      \/**<\/i><\/div>\n
       * Adobe Helium: symbol definitions<\/i><\/div>\n
       *\/<\/i><\/div>\n
      window.symbols = {<\/i><\/div>\n
      “stage”: {<\/i><\/div>\n
         version: “0.1”,<\/i><\/div>\n
         baseState: “Base State”,<\/i><\/div>\n
         initialState: “Base State”,<\/i><\/div>\n
         parameters: {<\/i><\/div>\n

      \n<\/i><\/div>\n
         },<\/i><\/div>\n
         content: {<\/i><\/div>\n
            dom: [<\/i><\/div>\n
              {<\/i><\/div>\n
                  id:’Rectangle1′,<\/i><\/div>\n
                  type:’rect’,<\/i><\/div>\n
                  rect:[109,80,84,96],<\/i><\/div>\n
                  fill:[‘rgba(192,192,192,1)’],<\/i><\/div>\n
                  stroke:[0,”rgba(0,0,0,1)”,”none”],<\/i><\/div>\n
              },<\/i><\/div>\n
      \uff08\u7565\uff09<\/i><\/div>\n
            ],<\/i><\/div>\n
            symbolInstances: [<\/i><\/div>\n
            ],<\/i><\/div>\n
         },<\/i><\/div>\n
         states: {<\/i><\/div>\n
            “Base State”: {<\/i><\/div>\n
               “#RoundRect1”: [<\/i><\/div>\n
                  [“transform”, “originX”, ‘50%’],<\/i><\/div>\n
                  [“transform”, “rotateZ”, ‘-31deg’],<\/i><\/div>\n
                  [“style”, “border-style”, ‘dashed’],<\/i><\/div>\n
                  [“style”, “border-width”, ‘5px’],<\/i><\/div>\n
                  [“style”, “width”, ‘181px’],<\/i><\/div>\n
                  [“transform”, “originY”, ‘50%’],<\/i><\/div>\n
                  [“style”, “height”, ‘180px’],<\/i><\/div>\n
                  [“color”, “border-color”, ‘rgba(255,0,0,1.00)’],<\/i><\/div>\n
                  [“transform”, “translateY”, ‘-3px’],<\/i><\/div>\n
                  [“style”, “border-top-right-radius”, [120,120],{valueTemplate:’@@0@@px @@1@@px’}]<\/i><\/div>\n
               ],<\/i><\/div>\n
      \uff08\u7565\uff09<\/i><\/div>\n
            }<\/i><\/div>\n
         },<\/i><\/div>\n
         actions: {<\/i><\/div>\n

      \n<\/i><\/div>\n
         },<\/i><\/div>\n
         bindings: [<\/i><\/div>\n

      \n<\/i><\/div>\n
         ],<\/i><\/div>\n
         timelines: {<\/i><\/div>\n
            “Default Timeline”: {<\/i><\/div>\n
               fromState: “Base State”,<\/i><\/div>\n
               toState: “”,<\/i><\/div>\n
               duration: 1000,<\/i><\/div>\n
               timeline: [<\/i><\/div>\n
                  { id: “eid7”, tween: [ “transform”, “#RoundRect1”, “translateY”, ‘-3px’, { valueTemplate: undefined, fromValue: ‘-3px’}], position: 0, duration: 0, easing: “linear” },<\/i><\/div>\n
      \uff08\u7565\uff09<\/i><\/div>\n
                  { id: “eid28”, tween: [ “transform”, “#Rectangle1”, “skewX”, ’39deg’, { valueTemplate: undefined, fromValue: ‘0deg’}], position: 0, duration: 1000, easing: “linear” }]<\/i><\/div>\n
            }<\/i><\/div>\n
         },<\/i><\/div>\n
      }};<\/i><\/div>\n

      \n<\/i><\/div>\n
      \/**<\/i><\/div>\n
       * Adobe Edge DOM Ready Event Handler<\/i><\/div>\n
       *\/<\/i><\/div>\n
      $(window).ready(function() {<\/i><\/div>\n
           $.Edge.initialize(symbols);<\/i><\/div>\n
      });<\/i><\/div>\n
      \/**<\/i><\/div>\n
       * Adobe Edge Timeline Launch<\/i><\/div>\n
       *\/<\/i><\/div>\n
      $(window).load(function() {<\/i><\/div>\n
          $.Edge.play();<\/i><\/div>\n
      });<\/i><\/div>\n

      \n<\/i><\/div>\n
      \uff08\uff13\uff09sample_edge.css<\/b><\/span><\/div>\n
      \u6700\u5f8c\u306fCSS\u3092\u898b\u3066\u307f\u308b\u3002<\/span><\/div>\n
      <\/div>\n
        \n
      • dom\u306eID\u306f\u3001Edge\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u4e0a\u306e\u30b7\u30f3\u30dc\u30eb\u540d\u304c\u305d\u306e\u307e\u307e\u4f7f\u308f\u308c\u308b\u307f\u305f\u3044\u3002\u65e5\u672c\u8a9e\u30b7\u30f3\u30dc\u30eb\u540d\u306f\u7121\u7406\u304b\u3057\u3089<\/li>\n
      • \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u63cf\u753b\u5c5e\u6027\u306f\u5358\u7d14\u306bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3060\u3063\u305f\u3002\u3060\u304b\u3089Rectangle\u3068RoundRect\u3060\u3063\u305f\u3002<\/li>\n<\/ul>\n
        \u81ea\u7531\u5f62\u72b6\u306eSVG\u3068\u304b\u304c\u5165\u308b\u3068\u3001\u3053\u306e\u3042\u305f\u308a\u306f\u3069\u3046\u306a\u308b\u306e\u304b\u306a\u3002<\/div>\n
        \/**<\/span><\/i><\/div>\n
         * Adobe Edge(TM): Generated CSS<\/span><\/i><\/div>\n
         * Do not edit this file.<\/span><\/i><\/div>\n
         *\/<\/span><\/i><\/div>\n
        \n<\/div>\n
        #RoundRect1 {<\/span><\/i><\/div>\n
            border-style: dashed;<\/span><\/i><\/div>\n
            border-width: 5px;<\/span><\/i><\/div>\n
            width: 181px;<\/span><\/i><\/div>\n
            height: 180px;<\/span><\/i><\/div>\n
            border-color: rgba(255,0,0,1.00);<\/span><\/i><\/div>\n
            -webkit-transform: translateY(-3px) rotate(-31deg);<\/span><\/i><\/div>\n
            -moz-transform: translateY(-3px) rotate(-31deg);<\/span><\/i><\/div>\n
            -ms-transform: translateY(-3px) rotate(-31deg);<\/span><\/i><\/div>\n
            -o-transform: translateY(-3px) rotate(-31deg);<\/span><\/i><\/div>\n
        }<\/span><\/i><\/div>\n
        #stage {<\/span><\/i><\/div>\n
            height: 400px;<\/span><\/i><\/div>\n
            background-color: rgba(255,255,255,1);<\/span><\/i><\/div>\n
            width: 550px;<\/span><\/i><\/div>\n
        }<\/span><\/i><\/div>\n
        #Rectangle1 {<\/span><\/i><\/div>\n
            background-color: rgba(192,192,192,1.00);<\/span><\/i><\/div>\n
            -webkit-transform: translateX(-30px) translateY(23px) skewX(0deg);<\/span><\/i><\/div>\n
            -moz-transform: translateX(-30px) translateY(23px) skewX(0deg);<\/span><\/i><\/div>\n
            -ms-transform: translateX(-30px) translateY(23px) skewX(0deg);<\/span><\/i><\/div>\n
            -o-transform: translateX(-30px) translateY(23px) skewX(0deg);<\/span><\/i><\/div>\n
        }<\/span><\/i><\/div>\n
        #Text1 {<\/span><\/i><\/div>\n
            -webkit-transform: translateX(-204px) translateY(-11px);<\/span><\/i><\/div>\n
            -moz-transform: translateX(-204px) translateY(-11px);<\/span><\/i><\/div>\n
            -ms-transform: translateX(-204px) translateY(-11px);<\/span><\/i><\/div>\n
            -o-transform: translateX(-204px) translateY(-11px);<\/span><\/i><\/div>\n
        }<\/span><\/i><\/div>\n

        \n<\/i><\/div>\n
        \u30b3\u30d4\u30da\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u57fa\u672c\u7684\u306b\u66f8\u304d\u51fa\u3057\u30d5\u30a1\u30a4\u30eb\u305d\u306e\u307e\u307e\u3002\u3064\u307e\u308a\u6539\u884c\u3084\u30a4\u30f3\u30c7\u30f3\u30c8\u306a\u3069\u3082\u7dad\u6301\u3055\u308c\u3066\u3044\u3066\u3001\u66f8\u304d\u51fa\u3057\u5f8c\u306b\u3044\u308d\u3044\u308d\u3068\u7de8\u96c6\u3082\u3067\u304d\u305d\u3046\u3067\u306f\u3042\u308b\u3002\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u9032\u3080\u306b\u3064\u308c\u3066\u5206\u304b\u3089\u306a\u3044\u3051\u3069\u3002<\/div>\n","protected":false},"excerpt":{"rendered":"

        \u524d\u56de\u306e\u30a8\u30f3\u30c8\u30ea\u3067\u306f\u3001Adobe Edge Preview\u306e\u66f8\u304d\u51fa\u3057\u30d5\u30a1\u30a4\u30eb\u304c\u666e\u901a\u306eHTML+JS+CSS\u30d5\u30a1\u30a4\u30eb\u306b\u306a\u308b\u3068\u66f8\u304d\u307e\u3057\u305f\u3002 \u3053\u3093\u306a\u611f\u3058\u3002\u4eca\u56de\u306f\u3001\u3053\u308c\u3089\u306e\u4e2d\u8eab\u3092\u7c21\u5358\u306b\u898b\u3066\u307f\u3088\u3046\u3068\u601d\u3063\u305f\u3002sample.edge\u30d5\u30a1\u30a4\u30eb\u306f\u5358\u306bEdge\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u4f7f\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u307f\u305f\u3044\u306a\u306e\u3067\u3001\u3044\u3063\u305f\u3093\u7121\u8996\u3059\u308b\u3002\u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e\u3082\u306e\u304csample.html, sample_edge.js, sample_edge.css\u306e3\u3064\u3002\u3042\u3068\u306f\u30e9\u30f3\u30bf\u30a4\u30e0\u3068\u601d\u308f\u308c\u308bedge_includes\u3002<\/p>\n","protected":false},"author":1,"featured_media":1186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,22],"tags":[],"class_list":["post-1185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe","category-html5"],"_links":{"self":[{"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/posts\/1185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rawbytes.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1185"}],"version-history":[{"count":1,"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/posts\/1185\/revisions"}],"predecessor-version":[{"id":1187,"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/posts\/1185\/revisions\/1187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rawbytes.org\/index.php?rest_route=\/wp\/v2\/media\/1186"}],"wp:attachment":[{"href":"https:\/\/rawbytes.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rawbytes.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rawbytes.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}