{"id":1561,"date":"2010-02-17T10:37:28","date_gmt":"2010-02-17T01:37:28","guid":{"rendered":"http:\/\/www.systex.co.jp\/wordpress\/?p=1561"},"modified":"2010-02-17T10:37:28","modified_gmt":"2010-02-17T01:37:28","slug":"ajax3","status":"publish","type":"post","link":"http:\/\/www.systex.co.jp\/officialblog\/?p=1561","title":{"rendered":"Ajax\u5165\u9580\uff08Adobe Spry\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff09"},"content":{"rendered":"

\u3064\u3065\u304d\u307e\u3057\u3066<\/h2>\n

\u300cAdobe Spry\u300d\uff08\u30a2\u30c9\u30d3 \u30b9\u30d7\u30e9\u30a4\uff09\u3092\u5fdc\u7528\u3057\u305f\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u5b9f\u73fe\u4f8b\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n

Adobe Spry<\/h2>\n

\u3010\u516c\u5f0f\u30b5\u30a4\u30c8\u3011
\n\u30fb\u300cAdobe Spry framework for AJAX<\/a>\u300d\uff08\u82f1\u8a9e\uff09<\/p>\n

\u3010\u7279\u5fb4\u3011
\nAdobe Spry \u3068\u306f\u3001Adobe\u304c\u63d0\u4f9b\u3059\u308bAjax\u5bfe\u5fdcJavascipt\u3067\u3059\u3002<\/p>\n

Adobe Spry \u306e\u7279\u5fb4\u306f\u3001\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u201cXML\u30c7\u30fc\u30bf\u201d\u3092\u6271\u3048\u308b\u70b9\u306b\u3042\u308a\u307e\u3059\u3002
\n\u3064\u307e\u308a\u3001XML\u30c7\u30fc\u30bf\u306e\u30c7\u30fc\u30bf\u30d5\u30a1\u30a4\u30eb\u3092\u5143\u306b\u3057\u305fWeb\u30da\u30fc\u30b8\u3092\u624b\u8efd\u306b\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u300cPartyWeb<\/a>\u300d\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u6a5f\u80fd<\/a>\u306f\u3001\u3053\u306eAdobe Spry \uff08\u300cPhoto Gallery Demos<\/a>\u300d\uff09\u3092\u5fdc\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u306a\u304a\u3001Adobe Spry \u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u4ee5\u5916\u306b\u3082\u3001\u3044\u308d\u3093\u306a\u52d5\u304d\u30fb\u52b9\u679c\u30fb\u6f14\u51fa\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u5177\u4f53\u7684\u306b\u3069\u3093\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u304b\uff1f\u306b\u3064\u3044\u3066\u306f\u3001\u4e0b\u8a18URL\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u3092\u3054\u89a7\u4e0b\u3055\u3044\u3002
\n\u30fb\u300cSpry Demo Gallery<\/a>\u300d<\/p>\n

\u3010\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3011<\/p>\n

(1) Adobe ID \u3092\u5165\u624b\u3059\u308b\u3002<\/p>\n

Adobe Spry \u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u305f\u3081\u306b\u3001\u307e\u305a\u300cAdobe ID\u300d\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u4e0b\u8a18URL\u306e\u300cAdobe ID \u3092\u4f5c\u6210\u300d\u3092\u62bc\u3057\u3066\u3001\u3054\u81ea\u5206\u306e Adobe ID \u3092\u4f5c\u6210\u3057\u3066\u4e0b\u3055\u3044\u3002\uff08\u7121\u6599\u3067\u3059\u3002\uff09
\n\u30fb\u300cAdobe – \u30b5\u30a4\u30f3\u30a4\u30f3<\/a>\u300d<\/p>\n

(2) Adobe Spry \u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3002<\/p>\n

\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u306b\u3066\u3001\u53f3\u4e0a\u306e\u300cDownload vX.X\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002
\n\u3053\u306e\u5f8c\u3001\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u305f\u65b9\u306f\u3001(1)\u3067\u4f5c\u6210\u3057\u305f Adobe ID \u3067\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n\u6700\u65b0\u7248\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u753b\u9762\u306b\u9077\u79fb\u3059\u308b\u306e\u3067\u3001\u4e0b\u8a18\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u4e0b\u3055\u3044\u3002
\n\u30fbspry_X-X-X_YYMMDD.zip
\n\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305fzip\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u306b\u306f\u3001Adobe Spry \u672c\u4f53\u306f\u3082\u3061\u308d\u3093\u3001\u4f7f\u3044\u65b9\u3092\u8a18\u3057\u305f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3084\u30c7\u30e2\u7528\u306eHTML\u30d5\u30a1\u30a4\u30eb\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\uff08\u305f\u3060\u3057\u3001\u82f1\u8a9e\u3067\u3059\u3002\uff09<\/p>\n

\u3010\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3011<\/p>\n

\u203b\u3054\u6ce8\u610f\u203b<\/strong>
\n\u5404\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u6587\u5b57\u30b3\u30fc\u30c9\u304c\u7570\u306a\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u898b\u305f\u3068\u304d\u306b\u6587\u5b57\u5316\u3051<\/strong>\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002
\n\u3053\u308c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306b\u3001\u4e0b\u8a18\u306e\u5168\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u540c\u3058\u6587\u5b57\u30b3\u30fc\u30c9\uff08UTF-8\u306a\u3069\uff09\u3067\u4fdd\u5b58\u3059\u308b\u3053\u3068<\/strong>\u3092\u30aa\u30b9\u30b9\u30e1\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n

\u226aSlideShowData.xml\u226b<\/p>\n

<?xml version="1.0" encoding="utf-8"?><\/span>\n<SlideData><\/span>\n  <Slides><\/span>\n    <Slide path=<\/span>"1.jpg"<\/span> width=<\/span>"500"<\/span> height=<\/span>"334"<\/span> thumbpath=<\/span>"1_t.jpg"<\/span> thumbwidth=<\/span>"75"<\/span> thumbheight=<\/span>"50"<\/span> caption=<\/span>"\uff11\u679a\u76ee\u306e\u5199\u771f\u3067\u3059\u3002"<\/span>\/><\/span>\n    <Slide path=<\/span>"2.jpg"<\/span> width=<\/span>"500"<\/span> height=<\/span>"334"<\/span> thumbpath=<\/span>"2_t.jpg"<\/span> thumbwidth=<\/span>"75"<\/span> thumbheight=<\/span>"50"<\/span> caption=<\/span>"\uff12\u679a\u76ee\u306e\u5199\u771f\u3067\u3059\u3002"<\/span>\/><\/span>\n    <Slide path=<\/span>"3.jpg"<\/span> width=<\/span>"500"<\/span> height=<\/span>"334"<\/span> thumbpath=<\/span>"3_t.jpg"<\/span> thumbwidth=<\/span>"75"<\/span> thumbheight=<\/span>"50"<\/span> caption=<\/span>"\uff13\u679a\u76ee\u306e\u5199\u771f\u3067\u3059\u3002"<\/span>\/><\/span>\n  <\/Slides><\/span>\n<\/SlideData><\/span><\/pre>\n
\u226aSlideShow.html\u226b<\/p>\n
<html><\/span>\n<head><\/span>\n    <meta http-equiv=<\/span>"Content-Type"<\/span> content=<\/span>"text\/html; charset=UTF-8"<\/span>><\/span>\n    <meta http-equiv=<\/span>"Content-Style-Type"<\/span> content=<\/span>"text\/css"<\/span>><\/span>\n    <title><\/span>\u30b5\u30f3\u30d7\u30eb<\/title><\/span>\n    <meta http-equiv=<\/span>"Pragma"<\/span> content=<\/span>"no-cache"<\/span>><\/span>\n    <meta http-equiv=<\/span>"Cache-Control"<\/span> content=<\/span>"no-cache"<\/span>><\/span>\n    <meta http-equiv=<\/span>"Expires"<\/span> content=<\/span>"Thu, 01 Dec 2000 00:00:00 GMT"<\/span>><\/span>\n    <link href=<\/span>"SlideShow.css"<\/span> type=<\/span>"text\/css"<\/span> rel=<\/span>"stylesheet"<\/span>><\/span>\n    <script type=<\/span>"text\/javascript"<\/span> src=<\/span>"xpath.js"<\/span>><\/span><\/script><\/span>\n    <script type=<\/span>"text\/javascript"<\/span> src=<\/span>"SpryData.js"<\/span>><\/span><\/script><\/span>\n    <script type=<\/span>"text\/javascript"<\/span> src=<\/span>"SpryEffects.js"<\/span>><\/span><\/script><\/span>\n    <script type=<\/span>"text\/javascript"<\/span> src=<\/span>"galleryEx.js"<\/span>><\/span><\/script><\/span>\n    <script type=<\/span>"text\/javascript"<\/span>><\/span>\n        var dsPhotos = new Spry.Data.XMLDataSet(".\/SlideShowData.xml","SlideData\/Slides\/Slide");\n    <\/script><\/span>\n<\/head><\/span>\n<body><\/span>\n    <div id=<\/span>"Slideshow"<\/span>><\/span>\n        <div id=<\/span>"Transport"<\/span>><\/span>\n            <ul><\/span>\n                <li><\/span><a href=<\/span>"#"<\/span> onclick=<\/span>"StopSlideShow(); AdvanceToNextImage(true);"<\/span> title=<\/span>"\u524d\u3078"<\/span> class=<\/span>"On"<\/span>><\/span><span><\/span>\u524d\u3078<\/span><\/span><\/a><\/span><\/li><\/span>\n                <li><\/span><a href=<\/span>"#"<\/span> onclick=<\/span>"if (!gSlideShowOn) StartSlideShow();"<\/span> title=<\/span>"\u518d\u751f"<\/span> class=<\/span>"Off"<\/span> id=<\/span>"playButton"<\/span>><\/span><span><\/span>\u518d\u751f<\/span><\/span><\/a><\/span><\/li><\/span>\n                <li><\/span><a href=<\/span>"#"<\/span> onclick=<\/span>"if ( gSlideShowOn) StopSlideShow();"<\/span> title=<\/span>"\u505c\u6b62"<\/span> class=<\/span>"On"<\/span> id=<\/span>"stopButton"<\/span>><\/span><span><\/span>\u505c\u6b62<\/span><\/span><\/a><\/span><\/li><\/span>\n                <li><\/span><a href=<\/span>"#"<\/span> onclick=<\/span>"StopSlideShow(); AdvanceToNextImage();"<\/span> title=<\/span>"\u6b21\u3078"<\/span> class=<\/span>"On"<\/span>><\/span><span class=<\/span>"FontSpace"<\/span>><\/span>\u6b21\u3078<\/span><\/span><\/a><\/span><\/li><\/span>\n                <li><\/span><span id=<\/span>"playLabel"<\/span>><\/span>\u518d\u751f\u4e2d...<\/span><\/span><\/li><\/span>\n            <\/ul><\/span>\n            <div style=<\/span>"clear: both;"<\/span>><\/span>\n            <\/div><\/span>\n        <\/div><\/span>\n        <div id=<\/span>"Middle"<\/span>><\/span>\n            <table><\/span>\n                <tr><\/span>\n                    <td><\/span>\n                        <div id=<\/span>"thumbnails"<\/span> spry:region=<\/span>"dsPhotos"<\/span>><\/span>\n                            <div spry:repeat=<\/span>"dsPhotos"<\/span> onclick=<\/span>"HandleThumbnailClick('{ds_RowID}');"<\/span> \n                                 onmouseover=<\/span>"GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');"<\/span> \n                                 onmouseout=<\/span>"ShrinkThumbnail(this.getElementsByTagName('img')[0]);"<\/span>><\/span>\n                                <img id=<\/span>"tn{ds_RowID}"<\/span> alt=<\/span>""<\/span> src=<\/span>"{@thumbpath}"<\/span> width=<\/span>"24"<\/span> height=<\/span>"24"<\/span> \/><\/span>\n                            <\/div><\/span>\n                        <\/div><\/span>\n                    <\/td><\/span>\n                <\/tr><\/span>\n            <\/table><\/span>\n            <div style=<\/span>"clear: both;"<\/span>><\/span>\n            <\/div><\/span>\n            <div id=<\/span>"Slide"<\/span>><\/span>\n                <div id=<\/span>"mainImageOutline"<\/span>><\/span>\n                    <img id=<\/span>"mainImage"<\/span> alt=<\/span>""<\/span> src=<\/span>""<\/span> \/><\/span>\n                <\/div><\/span>\n                <div id=<\/span>"Caption"<\/span>><\/span>\n                    <span id=<\/span>"mainMessage"<\/span>><\/span><\/span><\/span>\n                <\/div><\/span>\n            <\/div><\/span>\n        <\/div><\/span>\n        <div id=<\/span>"Footer"<\/span>><\/span>\n        <\/div><\/span>\n    <\/div><\/span>\n<\/body><\/span>\n<\/html><\/span>\n<\/pre>\n
\u226agalleryEx.js\u226b
\ngalleryEx.js \u306f\u3001\u300cPhoto Gallery Demos<\/a>\u300d\u3067\u4f7f\u308f\u308c\u3066\u3044\u308b gallery.js \u3092\u3001\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u7528\u306b\u5c11\u3057\u6539\u826f\u3057\u305f\u3082\u306e\u3067\u3059\u3002
\ngallery.js \u3092\u6539\u826f\u3057\u305f\u90e8\u5206\u3092\u629c\u7c8b\u3057\u307e\u3059\u3002\uff08\u4ed6\u306f gallery.js \u3068\u5909\u308f\u308a\u307e\u305b\u3093\u3002\uff09<\/p>\n
\/*\ndsPhotos.addObserver(function(nType, notifier, data) {\n    if (nType == "onPreLoad")\n        StopSlideShow();\n});\n*\/<\/span>\n\nfunction<\/span> SetMainMessage(msg)\n{\n    var<\/span> spn = document.getElementById("mainMessage"<\/span>);\n    if<\/span> (spn) {\n        spn.innerHTML = msg;\n    }\n    var<\/span> cap = document.getElementById("Caption"<\/span>);\n    if<\/span> (cap) {\n        if<\/span> (msg != ""<\/span>) {\n            cap.style.display = ""<\/span>;\n        } else<\/span> {\n            cap.style.display = "none"<\/span>;\n        }\n    }\n}\n\nfunction<\/span> ShowCurrentImage()\n{\n    var<\/span> curRow = dsPhotos.getCurrentRow();\n    SetMainImage(curRow["@path"<\/span>], curRow["@width"<\/span>], curRow["@height"<\/span>], "tn"<\/span> + curRow["ds_RowID"<\/span>]);\n    SetMainMessage(curRow["@caption"<\/span>]);\n}\n\nfunction<\/span> StartSlideShow(skipTimer)\n{\n    gSlideShowOn = true<\/span>;\n    if<\/span> (!skipTimer)\n        SetSlideShowTimer();\n    var<\/span> playLabel = document.getElementById("playLabel"<\/span>);\n    if<\/span> (playLabel)\n        playLabel.firstChild.data = "\u518d\u751f\u4e2d..."<\/span>;\n    var<\/span> playButton = document.getElementById("playButton"<\/span>);\n    if<\/span> (playButton)\n        playButton.className = "Off"<\/span>;\n    var<\/span> stopButton = document.getElementById("stopButton"<\/span>);\n    if<\/span> (stopButton)\n        stopButton.className = "On"<\/span>;\n}\n\nfunction<\/span> StopSlideShow()\n{\n    gSlideShowOn = false<\/span>;\n    KillSlideShowTimer();\n    var<\/span> playLabel = document.getElementById("playLabel"<\/span>);\n    if<\/span> (playLabel)\n        playLabel.firstChild.data = "\u505c\u6b62\u4e2d"<\/span>;\n    var<\/span> playButton = document.getElementById("playButton"<\/span>);\n    if<\/span> (playButton)\n        playButton.className = "On"<\/span>;\n    var<\/span> stopButton = document.getElementById("stopButton"<\/span>);\n    if<\/span> (stopButton)\n        stopButton.className = "Off"<\/span>;\n}<\/pre>\n
\u226aSlideShow.css\u226b<\/p>\n
\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc *\/<\/span>\ndiv<\/span>#Slideshow<\/span>\n{\n    margin-top<\/span>: 10px<\/span>;\n    margin-left<\/span>: 5px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> *\n{\n    padding<\/span>: 0px<\/span>;\n    margin<\/span>: 0px<\/span>;\n}\n\n\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff1a\u64cd\u4f5c\u30d1\u30cd\u30eb *\/<\/span>\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span>\n{\n    font-size<\/span>: 12px<\/span>;\n    line-height<\/span>: 120%<\/span>;\n    text-align<\/span>: center<\/span>;\n    width<\/span>: 700px<\/span>;\n    height<\/span>: 53px<\/span>;\n    background-color<\/span>: #333333<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span>\n{\n    list-style<\/span>: none<\/span>;\n    margin-left<\/span>: 5px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span> li<\/span>\n{\n    float<\/span>: left<\/span>;\n    margin-top<\/span>: 5px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span> li<\/span> a<\/span>.On<\/span>\n{\n    display<\/span>: block<\/span>;\n    float<\/span>: left<\/span>;\n    color<\/span>: #ffffff<\/span>;\n    width<\/span>: 92px<\/span>;\n    height<\/span>: 34px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span> li<\/span> a<\/span>.Off<\/span>\n{\n    display<\/span>: block<\/span>;\n    float<\/span>: left<\/span>;\n    color<\/span>: #00ffff<\/span>;\n    width<\/span>: 92px<\/span>;\n    height<\/span>: 34px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span> li<\/span> span<\/span>\n{\n    display<\/span>: block<\/span>;\n    margin-top<\/span>: 10px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Transport<\/span> ul<\/span> li<\/span> span<\/span>#playLabel<\/span>\n{\n    display<\/span>: block<\/span>;\n    color<\/span>: #ffffff<\/span>;\n    margin<\/span>: 18px<\/span> 0px<\/span> 0px<\/span> 10px<\/span>;\n    font-size<\/span>: 16px<\/span>;\n}\n\n\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff1a\u4e2d\u9593\u90e8\u5206\uff08\u30b5\u30e0\u30cd\u30a4\u30eb\uff0b\u30b9\u30e9\u30a4\u30c9\uff09 *\/<\/span>\ndiv<\/span>#Slideshow<\/span> div<\/span>#Middle<\/span>\n{\n    width<\/span>: 700px<\/span>;\n    background-repeat<\/span>: repeat-y<\/span>;\n    padding<\/span>: 0px<\/span>;\n    background-color<\/span>: #333333<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Middle<\/span> table<\/span>\n{\n    width<\/span>: 700px<\/span>;\n    border-width<\/span>: 0px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Middle<\/span> table<\/span> td<\/span>\n{\n    text-align<\/span>: center<\/span>;\n}\n\n\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff1a\u30b5\u30e0\u30cd\u30a4\u30eb *\/<\/span>\ndiv<\/span>#Slideshow<\/span> div<\/span>#Thumbnails<\/span>\n{\n    width<\/span>: 400px<\/span>;\n    margin-left<\/span>: auto<\/span>;\n    margin-right<\/span>: auto<\/span>;\n    margin-top<\/span>: 0px<\/span>;\n    margin-bottom<\/span>: 0px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Thumbnails<\/span> div<\/span>\n{\n    position<\/span>: relative<\/span>;\n    width<\/span>: 24px<\/span>;\n    height<\/span>: 24px<\/span>;\n    float<\/span>: left<\/span>;\n    margin<\/span>: 8px<\/span>;\n    padding<\/span>: 0px<\/span>;\n    float<\/span>: left<\/span>;\n    display<\/span>:inline<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Thumbnails<\/span> img<\/span>\n{\n    border-right<\/span>: #404040<\/span> 1px<\/span> solid<\/span>;\n    border-top<\/span>: #999999<\/span> 1px<\/span> solid<\/span>;\n    right<\/span>: 0px<\/span>;\n    left<\/span>: 0px<\/span>;\n    float<\/span>: left<\/span>;\n    border-left<\/span>: #404040<\/span> 1px<\/span> solid<\/span>;\n    width<\/span>: 24px<\/span>;\n    border-bottom<\/span>: #333333<\/span> 1px<\/span> solid<\/span>;\n    position<\/span>: absolute<\/span>;\n    height<\/span>: 24px<\/span>;\n    cursor<\/span>: pointer<\/span>;\n    cursor<\/span>: hand<\/span>;\n}\n.selectedThumbnail<\/span> {  border<\/span>: solid<\/span> 2px<\/span> #ffcc00<\/span> !important<\/span>; }\n.inFocus<\/span> {  border<\/span>: solid<\/span> 1px<\/span> #ffcc00<\/span> !important<\/span>; }\n\n\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff1a\u30b9\u30e9\u30a4\u30c9 *\/<\/span>\ndiv<\/span>#Slideshow<\/span> div<\/span>#Slide<\/span>\n{\n    margin-top<\/span>: 5px<\/span>;\n    padding<\/span>: 0px<\/span>;\n    text-align<\/span>: center<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#mainImageOutline<\/span>\n{\n    margin-top<\/span>: 0px<\/span>;\n    margin-bottom<\/span>: 0px<\/span>;\n    margin-left<\/span>: auto<\/span>;\n    margin-right<\/span>: auto<\/span>;\n    padding<\/span>: 0<\/span>;\n    background-color<\/span>: #333333<\/span>;\n    padding<\/span>: 10px<\/span>; \n    overflow<\/span>: hidden<\/span>; \n    width<\/span>: 0px<\/span>;\n    height<\/span>: 0px<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> img<\/span>#MainImage<\/span>\n{\n    width<\/span>: 100%<\/span>;\n    height<\/span>: 100%<\/span>;\n}\ndiv<\/span>#Slideshow<\/span> div<\/span>#Slide<\/span> div<\/span>#Caption<\/span>\n{\n    padding-right<\/span>: 11px<\/span>;\n    padding-left<\/span>: 11px<\/span>;\n    padding-bottom<\/span>: 10px<\/span>;\n    margin<\/span>: 1px<\/span> 0px<\/span> 0px<\/span> 0px<\/span>;\n    color<\/span>: #ffffff<\/span>;\n    padding-top<\/span>: 10px<\/span>;\n    background-color<\/span>: #333333<\/span>;\n    text-align<\/span>: left<\/span>;\n    font-size<\/span>: 14px<\/span>;\n    width<\/span>: 500px<\/span>;\n    margin-left<\/span>: auto<\/span>;\n    margin-right<\/span>: auto<\/span>\n}\n\n\/* \u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\uff1a\u30d5\u30c3\u30bf\u30fc\u90e8\u5206 *\/<\/span>\ndiv<\/span>#Slideshow<\/span> div<\/span>#Footer<\/span>\n{\n    width<\/span>: 700px<\/span>;\n    height<\/span>: 16px<\/span>;\n    background-repeat<\/span>: no-repeat<\/span>;\n    background-color<\/span>: #333333<\/span>;\n}<\/pre>\n
\u226axpath.js\u226b
\n\u226aSpryData.js\u226b
\n\u226aSpryEffects.js\u226b
\n\u3053\u308c\u3089\uff13\u3064\u306f\u3001\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u3082\u306e\u3092\u305d\u306e\u307e\u307e\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306e\u89e3\u8aac<\/h2>\n
\u300cPhoto Gallery Demos<\/a>\u300d\u3092\u5143\u306b\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n
SlideShowData.xml \u3067\u306f\u3001<Slide>\uff11\u3064\u3067\u3001\uff11\u3064\u306e\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u8868\u3057\u3066\u3044\u307e\u3059\u3002
\n\u5404\u5c5e\u6027\u306f\u3001\u4e0b\u8a18\u3092\u8868\u3057\u3066\u3044\u307e\u3059\u3002
\n\u30fbpath \u2026 \u30aa\u30ea\u30b8\u30ca\u30eb\u753b\u50cf\u3078\u306e\u30d1\u30b9
\n\u30fbwidth \u2026 \u30aa\u30ea\u30b8\u30ca\u30eb\u753b\u50cf\u306e\u5e45\uff08\u30d4\u30af\u30bb\u30eb\uff09
\n\u30fbheight \u2026 \u30aa\u30ea\u30b8\u30ca\u30eb\u753b\u50cf\u306e\u9ad8\u3055\uff08\u30d4\u30af\u30bb\u30eb\uff09
\n\u30fbthumbpath \u2026 \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u3078\u306e\u30d1\u30b9
\n\u30fbthumbwidth \u2026 \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u306e\u5e45\uff08\u30d4\u30af\u30bb\u30eb\uff09
\n\u30fbthumbheight \u2026 \u30b5\u30e0\u30cd\u30a4\u30eb\u50cf\u306e\u9ad8\u3055\uff08\u30d4\u30af\u30bb\u30eb\uff09
\n\u30fbcaption \u2026 \u753b\u50cf\u306e\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\uff08\u984c\u540d\uff09<\/p>\n
SlideShow.html \u3092\u898b\u308b\u3068\u3001\u3061\u3087\u3063\u3068\u30b3\u30e0\u30ba\u30ab\u30b7\u30a4HTML\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30dd\u30a4\u30f3\u30c8\u306f\uff12\u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n
\uff11\u3064\u76ee\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u3001<\/p>\n
<script type=<\/span>"text\/javascript"<\/span>><\/span>\n    var dsPhotos = new Spry.Data.XMLDataSet(".\/SlideShowData.xml","SlideData\/Slides\/Slide");\n<\/script><\/span>\n<\/pre>\n
\u3067\u3059\u3002
\n\u3053\u308c\u306b\u3088\u308a\u3001SlideShowData.xml \u306e\u753b\u50cf\u30c7\u30fc\u30bf\u306e\u96c6\u307e\u308a\uff08\u914d\u5217\uff09\u304c\u3001dsPhotos \u306b\u8aad\u307f\u8fbc\u307e\u308c\u307e\u3059\u3002<\/p>\n
\uff12\u3064\u76ee\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u3001<\/p>\n
<div id=<\/span>"Thumbnails"<\/span> spry:region=<\/span>"dsPhotos"<\/span>><\/span>\n    <div spry:repeat=<\/span>"dsPhotos"<\/span> onclick=<\/span>"HandleThumbnailClick('{ds_RowID}');"<\/span> \n         onmouseover=<\/span>"GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');"<\/span> \n         onmouseout=<\/span>"ShrinkThumbnail(this.getElementsByTagName('img')[0]);"<\/span>><\/span>\n        <img id=<\/span>"tn{ds_RowID}"<\/span> alt=<\/span>""<\/span> src=<\/span>"{@thumbpath}"<\/span> width=<\/span>"24"<\/span> height=<\/span>"24"<\/span> \/><\/span>\n    <\/div><\/span>\n<\/div><\/span><\/pre>\n
\u3067\u3059\u3002<\/p>\n
\u6642\u6298\u51fa\u3066\u304f\u308b\u300cspry:\uff5e\u300d\u3084\u300c{\uff5e}\u300d\u306e\u90e8\u5206\u304c\u3001Adobe Spry\u72ec\u81ea\u306e\u69cb\u6587\u3067\u3059\u3002<\/p>\n
\u5177\u4f53\u7684\u306a\u69cb\u6587\u306e\u8aac\u660e\u306f\u7701\u304d\u307e\u3059\u304c\u3001\u4e0a\u8a18\u306e\u3088\u3046\u306a\u8a18\u8ff0\u3092\u3059\u308b\u3053\u3068\u306b\u3088\u308a\u3001dsPhotos \u306b\u8aad\u307f\u8fbc\u307e\u308c\u305f\u753b\u50cf\u30c7\u30fc\u30bf\u306e\u96c6\u307e\u308a\uff08\u914d\u5217\uff09\u304c\u9806\u756a\u306b\u8aad\u307f\u51fa\u3055\u308c\u3001\u305d\u306e\u5ea6\u3001<div> \u3084 <img> \u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n
SlideShowData.xml \u306b\u306f\u3001\uff13\u3064\u306e <Slide> \u304c\u3042\u308b\u306e\u3067\u3001\u6700\u7d42\u7684\u306b\u306f\u3001<\/p>\n
<div id=<\/span>"Thumbnails"<\/span>><\/span>\n    <div onclick=<\/span>"HandleThumbnailClick('0');"<\/span>\n         onmouseout=<\/span>"ShrinkThumbnail(this.getElementsByTagName('img')[0]);"<\/span>\n         onmouseover=<\/span>"GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');"<\/span>><\/span>\n        <img id=<\/span>"tn0"<\/span> alt=<\/span>""<\/span> src=<\/span>"1_t.jpg"<\/span> width=<\/span>"24"<\/span> height=<\/span>"24"<\/span>><\/span>\n    <\/div><\/span>\n    <div onclick=<\/span>"HandleThumbnailClick('1');"<\/span>\n         onmouseout=<\/span>"ShrinkThumbnail(this.getElementsByTagName('img')[0]);"<\/span>\n         onmouseover=<\/span>"GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');"<\/span>><\/span>\n        <img id=<\/span>"tn1"<\/span> alt=<\/span>""<\/span> src=<\/span>"2_t.jpg"<\/span> width=<\/span>"24"<\/span> height=<\/span>"24"<\/span>><\/span>\n    <\/div><\/span>\n    <div onclick=<\/span>"HandleThumbnailClick('2');"<\/span>\n         onmouseout=<\/span>"ShrinkThumbnail(this.getElementsByTagName('img')[0]);"<\/span>\n         onmouseover=<\/span>"GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');"<\/span>><\/span>\n        <img id=<\/span>"tn2"<\/span> alt=<\/span>""<\/span> src=<\/span>"3_t.jpg"<\/span> width=<\/span>"24"<\/span> height=<\/span>"24"<\/span>><\/span>\n    <\/div><\/span>\n<\/div><\/span>\n<\/pre>\n
\u3068\u3044\u3046HTML\u304c\u51fa\u529b\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u3084\u3063\u3066\u307f\u308b\u3068\u5206\u304b\u308a\u307e\u3059\u304c\u3001SlideShowData.xml \u306e <Slide> \u3092\u5897\u6e1b\u3055\u305b\u305f\u308a\u3001\u5404\u5c5e\u6027\u306e\u5024\u3092\u5909\u3048\u305f\u308a\u3059\u308b\u3068\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u5185\u5bb9\u3092\u81ea\u7531\u306b\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\uff08\u305f\u3060\u3001XML\u30c7\u30fc\u30bf\u3068\u3057\u3066\u69cb\u6587\u304c\u6b63\u3057\u304f\u306a\u3044\u3068\u52d5\u304d\u307e\u305b\u3093\u306e\u3067\u3001\u3054\u6ce8\u610f\u4e0b\u3055\u3044\u3002\uff09<\/p>\n
\u3010\u53c2\u7167URL\u3011
\n\u30fb\u300cSpry Documentation<\/a>\u300d\uff08\u82f1\u8a9e\uff09
\n\u3000Adobe Spry \u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u3059\u3002<\/p>\n
\u30fb\u300c\u9006\u5f15\u304dAdobe Spry\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/a>\u300d
\n\u30fb\u300c\u9006\u5f15\u304dAdobe Spry\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\uff08Spry pre release 1.6.1\uff09<\/a>\u300d
\n\u3000\u300cAdobe Spry\u3067\u3001\u3053\u3093\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u304b\u306a\uff1f\u300d\u3068\u601d\u3063\u305f\u3089\u3001\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u30fb\u300cAdobe Edge: 2007\u5e742\u6708 \u300cAjax \u3057\u305f\u3044\uff01\u300dWeb \u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u305f\u3081\u306e Spry \u96c6\u4e2d\u8b1b\u5ea7<\/a>\u300d<\/p>\n
\u30fb\u300c@IT – \u30a2\u30c9\u30d3\u306eAjax\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u300cSpry\u300d\u3092\u4f7f\u3063\u3066\u307f\u3088\u3046<\/a>\u300d<\/p>\n
\u7d42\u308f\u308a\u306b<\/h2>\n
\u3055\u3066\u3001\uff13\u56de\u306b\u308f\u305f\u3063\u3066\u3001Ajax \u306b\u3064\u3044\u3066\u3054\u7d39\u4ecb\u3092\u3055\u305b\u3066\u9802\u304d\u307e\u3057\u305f\u304c\u3001\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n
Ajax\u5bfe\u5fdcJavascript \u306e\u767b\u5834\u306b\u3088\u308a\u3001\u30ea\u30c3\u30c1\u306aWeb\u30da\u30fc\u30b8\u4f5c\u6210\u306e\u6577\u5c45\u304c\u30b0\u30c3\u3068\u4e0b\u304c\u308a\u307e\u3057\u305f\u3002
\n\u6700\u8fd1\u3067\u306f\u3001\u5b89\u5b9a\u6027\u3082\u52d5\u4f5c\u901f\u5ea6\u3082\u5897\u3057\u3066\u3001\u591a\u304f\u306eWeb\u30b5\u30a4\u30c8\u304c\u3001Ajax \u3092\u5229\u7528\u3057\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u63a1\u308a\u5165\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3082\u3057\u3001\u4eca\u56de\u306e\u300cAjax\u5165\u9580\u300d\u3067 Ajax \u306b\u8208\u5473\u3092\u6301\u3063\u3066\u9802\u3051\u305f\u306e\u306a\u3089\u3001\u307e\u305a\u306f\u3001\u30b5\u30f3\u30d7\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3001\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u308b\u3068\u3053\u308d\u304b\u3089\u59cb\u3081\u3066\u307f\u308b\u3053\u3068\u3092\u30aa\u30b9\u30b9\u30e1\u3044\u305f\u3057\u307e\u3059\u3002
\n\u4eca\u307e\u3067\u5b9f\u73fe\u3057\u305f\u304f\u3066\u3082\u96e3\u3057\u305d\u3046\u3067\u3067\u304d\u306a\u304b\u3063\u305f\u3053\u3068\u304c\u3001\u610f\u5916\u306b\u30ab\u30f3\u30bf\u30f3\u306b\u5b9f\u73fe\u3067\u304d\u3066\u3057\u307e\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3088\u3002<\/p>\n
\u7686\u69d8\u306eWeb\u30b5\u30a4\u30c8\u4f5c\u308a\u306b\u3001\u4eca\u56de\u306e\u300cAjax\u5165\u9580\u300d\u304c\u304a\u5f79\u306b\u7acb\u3066\u307e\u3057\u305f\u3089\u5e78\u3044\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3064\u3065\u304d\u307e\u3057\u3066 \u300cAdobe Spry\u300d\uff08\u30a2\u30c9\u30d3 \u30b9\u30d7\u30e9\u30a4\uff09\u3092\u5fdc\u7528\u3057\u305f\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u5b9f\u73fe\u4f8b\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3057\u3087\u3046\u3002 Adobe Spry \u3010\u516c\u5f0f\u30b5\u30a4\u30c8\u3011 \u30fb\u300cAdobe Spry framework for AJAX\u300d\uff08\u82f1\u8a9e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[8],"class_list":["post-1561","post","type-post","status-publish","format-standard","hentry","category-business-material","tag-web"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=\/wp\/v2\/posts\/1561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1561"}],"version-history":[{"count":0,"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=\/wp\/v2\/posts\/1561\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1561"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.systex.co.jp\/officialblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}