var/cache/dev/twig/01/01e79143cf092d4c3d60a2ae714410cc.php line 53

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* index.twig */
  16. class __TwigTemplate_1288a8c934165619861e7a1b14d9faa4 extends \Eccube\Twig\Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'main' => [$this, 'block_main'],
  29.             'stylesheet' => [$this, 'block_stylesheet'],
  30.             'javascript' => [$this, 'block_javascript'],
  31.         ];
  32.     }
  34.     protected function doGetParent(array $context)
  35.     {
  36.         // line 1
  37.         return "default_frame.twig";
  38.     }
  40.     protected function doDisplay(array $context, array $blocks = [])
  41.     {
  42.         $macros = $this->macros;
  43.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  44.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  46.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  47.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  49.         // line 2
  50.         $context["body_class"] = "front_page";
  51.         // line 1
  52.         $this->parent = $this->loadTemplate("default_frame.twig", "index.twig", 1);
  53.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  54.         
  55.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  57.         
  58.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  60.     }
  62.     // line 3
  63.     public function block_main($context, array $blocks = [])
  64.     {
  65.         $macros = $this->macros;
  66.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  67.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  69.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  70.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  72.         // line 4
  73.         echo "<div class=\"mycarousel-wrapper\">
  74.     <div class=\"mycarousel-slider\">
  75.         ";
  76.         // line 7
  77.         echo "        ";
  78.         $context["pc_images"] = [0 => "main-visual.jpg", 1 => "main-visual.jpg", 2 => "main-visual.jpg"];
  79.         // line 12
  80.         echo "        
  81.         ";
  82.         // line 14
  83.         echo "        ";
  84.         $context["sp_images"] = [0 => "sp-topImages.jpg", 1 => "sp-topImages.jpg", 2 => "sp-topImages.jpg"];
  85.         // line 19
  86.         echo "        
  87.         ";
  88.         // line 21
  89.         echo "        ";
  90.         $context["display_images"] = [0 => 0, 1 => 1, 2 => 2];
  91.         // line 22
  92.         echo "        
  93.         ";
  94.         // line 23
  95.         $context['_parent'] = $context;
  96.         $context['_seq'] = twig_ensure_traversable((isset($context["display_images"]) || array_key_exists("display_images", $context) ? $context["display_images"] : (function () { throw new RuntimeError('Variable "display_images" does not exist.', 23, $this->source); })()));
  97.         foreach ($context['_seq'] as $context["_key"] => $context["index"]) {
  98.             // line 24
  99.             echo "            <div class=\"mycarousel-slide\">
  100.                 <img class=\"desktop-image\" src=\"";
  101.             // line 25
  102.             echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["pc_images"]) || array_key_exists("pc_images", $context) ? $context["pc_images"] : (function () { throw new RuntimeError('Variable "pc_images" does not exist.', 25, $this->source); })()), $context["index"], [], "array", false, false, false, 25))), "html", null, true);
  103.             echo "\" alt=\"スライド画像\">
  104.                 <img class=\"mobile-image\" src=\"";
  105.             // line 26
  106.             echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["sp_images"]) || array_key_exists("sp_images", $context) ? $context["sp_images"] : (function () { throw new RuntimeError('Variable "sp_images" does not exist.', 26, $this->source); })()), $context["index"], [], "array", false, false, false, 26))), "html", null, true);
  107.             echo "\" alt=\"スライド画像\">
  108.             </div>
  109.         ";
  110.         }
  111.         $_parent = $context['_parent'];
  112.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['index'], $context['_parent'], $context['loop']);
  113.         $context = array_intersect_key($context, $_parent) + $_parent;
  114.         // line 29
  115.         echo "    </div>
  116. </div>
  117. ";
  118.         
  119.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  121.         
  122.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  124.     }
  126.     // line 32
  127.     public function block_stylesheet($context, array $blocks = [])
  128.     {
  129.         $macros = $this->macros;
  130.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  131.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  133.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  134.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  136.         // line 33
  137.         echo "<style>
  138. /* slickのデフォルト黒丸（before擬似要素）を無効化 */
  139. .mycarousel-slider .slick-dots li button::before {
  140.     display: none;
  141.     content: '';
  142. }
  143. .slick-dots li {
  144.     position:unset;
  145.     display: inline-block;
  146.     width: 20px;
  147.     height: 20px;
  148.     margin: 0 5px;
  149.     padding: 0;
  150.     cursor: pointer;
  151. }
  152. .mycarousel-slider .slick-dots li {
  153.     width: 10px;
  154.     height: 10px;
  155. }
  156. .mycarousel-slider .slick-dots li button {
  157.     width: 100%;
  158.     height: 100%;
  159.     padding: 0;
  160.     border: none;
  161.     border-radius: 50%;
  162.     background-color: #ccc;
  163.     opacity: 0.7;
  164.     transition: all 0.3s ease;
  165.     font-size: 0;
  166.     cursor: pointer;
  167. }
  168. .mycarousel-slider .slick-dots li.slick-active button {
  169.     background-color: #b8860b;
  170.     transform: scale(1.3);
  171.     opacity: 1;
  172. }
  174. /* フルワイドの外枠 */
  175. .mycarousel-wrapper {
  176.     width: 100vw;
  177.     max-width: none;
  178.     margin-left: calc(-50vw + 50%);
  179.     margin-right: calc(-50vw + 50%);
  180.     overflow: hidden;
  181.     padding: 0;
  182.     /* 初期化時のちらつき防止 */
  183.     visibility: hidden;
  184. }
  186. /* slickのトラック修正 */
  187. .slick-track {
  188.     display: flex !important;
  189.     align-items: center;
  190. }
  191. .slick-slide {
  192.     padding: 0 !important;
  193.     margin: 0 !important;
  194. }
  196. /* スライド本体（動的高さ対応） */
  197. .mycarousel-slide {
  198.     box-sizing: border-box;
  199.     padding: 0 !important;
  200.     margin: 0 !important;
  201.     position: relative;
  202.     transition: all 0.5s ease;
  203.     overflow: hidden;
  204.     /* 高さは動的に設定される */
  205.     height: 60vh; /* 初期値：JavaScript で調整される */
  206. }
  208. /* 画像の基本スタイル */
  209. .desktop-image,
  210. .mobile-image {
  211.     position: absolute;
  212.     top: 0;
  213.     left: 0;
  214.     width: 100%;
  215.     height: 100%;
  216.     transition: all 0.5s ease;
  217.     /* object-fit は JavaScript で動的に調整 */
  218.     object-fit: contain;
  219. }
  221. /* デスクトップ時のスタイル（768pxより大きい） */
  222. @media (min-width: 769px) {
  223.     .desktop-image {
  224.         display: block !important;
  225.     }
  226.     .mobile-image {
  227.         display: none !important;
  228.     }
  229. }
  231. /* モバイル時のスタイル（768px以下） */
  232. @media (max-width: 768px) {
  233.     .mycarousel-wrapper {
  234.         width: 100vw;
  235.         margin-left: calc(-50vw + 50%);
  236.         margin-right: calc(-50vw + 50%);
  237.     }
  238.     
  239.     .mycarousel-slide {
  240.         width: 100vw !important;
  241.         height: auto !important;
  242.         padding: 0 !important;
  243.         margin: 0 !important;
  244.         opacity: 1 !important;
  245.         filter: none !important;
  246.     }
  248.     .desktop-image {
  249.         display: none !important;
  250.     }
  251.     
  252.     .mobile-image {
  253.         display: block !important;
  254.         position: relative !important;
  255.         width: 100% !important;
  256.         height: auto !important;
  257.         object-fit: contain !important;
  258.         filter: brightness(1) contrast(1) !important;
  259.     }
  260. }
  262. /* 左右の画像を暗くするエフェクト（デスクトップのみ） */
  263. @media (min-width: 769px) {
  264.     .mycarousel-slide.side-slide {
  265.         opacity: 0.6;
  266.     }
  267.     .mycarousel-slide.side-slide .desktop-image {
  268.         filter: brightness(0.7) contrast(0.9);
  269.     }
  270.     .mycarousel-slide.center-slide {
  271.         opacity: 1;
  272.     }
  273.     .mycarousel-slide.center-slide .desktop-image {
  274.         filter: brightness(1) contrast(1);
  275.     }
  276.     .mycarousel-slide.side-slide:hover {
  277.         opacity: 0.8;
  278.         transform: scale(1.02);
  279.     }
  280.     .mycarousel-slide.side-slide:hover .desktop-image {
  281.         filter: brightness(0.85) contrast(0.95);
  282.     }
  283. }
  285. /* 動的高さ調整用のユーティリティクラス */
  286. .dynamic-fit-contain {
  287.     object-fit: contain;
  288. }
  289. .dynamic-fit-cover {
  290.     object-fit: cover;
  291. }
  292. </style>
  293. ";
  294.         
  295.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  297.         
  298.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  300.     }
  302.     // line 190
  303.     public function block_javascript($context, array $blocks = [])
  304.     {
  305.         $macros = $this->macros;
  306.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  307.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  309.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  310.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  312.         // line 191
  313.         echo "<script>
  314. \$(function() {
  315.     // 動的レスポンシブ設定
  316.     const RESPONSIVE_CONFIG = {
  317.         desktop: {
  318.             targetAspectRatio: 16/9,
  319.             minHeight: '30vh',
  320.             maxHeight: '60vh',
  321.             marginThreshold: 0.15
  322.         },
  323.         mobile: {
  324.             targetAspectRatio: 4/3,
  325.             minHeight: '35vh',
  326.             maxHeight: '85vh',
  327.             marginThreshold: 0.12
  328.         }
  329.     };
  331.     let isInitialized = false;
  332.     let currentImages = [];
  334.     // 画面幅に応じた動的centerPadding計算
  335.     function calculateCenterPadding() {
  336.         const windowWidth = \$(window).width();
  337.         let padding;
  338.         
  339.         // 画面幅に応じてcenterPaddingを計算（調整可能な閾値）
  340.         if (windowWidth <= 768) {
  341.             // モバイル: 余白なし
  342.             padding = '0';
  343.         } else if (windowWidth <= 1024) {
  344.             // タブレット: 小さめの余白
  345.             padding = '8vw';
  346.         } else if (windowWidth <= 1200) {
  347.             // 小型デスクトップ: 中程度の余白
  348.             padding = '12vw';
  349.         }else if (windowWidth <= 1440) {
  350.             // 小型デスクトップ: 中程度の余白
  351.             padding = '15vw';
  352.         
  353.         } else if (windowWidth <= 1920) {
  354.             // 標準デスクトップ: やや大きめの余白
  355.             padding = '20vw';
  356.         } else {
  357.             // 大型ディスプレイ: 最大余白を制限
  358.             padding = '25vw';
  359.         }
  360.         
  361.         return padding;
  362.     }
  364.     // centerPaddingを動的に更新する関数
  365.     function updateCenterPadding() {
  366.         const newPadding = calculateCenterPadding();
  367.         const windowWidth = \$(window).width();
  368.         
  369.         // モバイルはcenterMode自体を無効にする
  370.         const centerModeEnabled = windowWidth > 768;
  371.         
  372.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  373.             \$('.mycarousel-slider').slick('slickSetOption', 'centerMode', centerModeEnabled, false);
  374.             \$('.mycarousel-slider').slick('slickSetOption', 'centerPadding', newPadding, true);
  375.         }
  376.     }
  378.     // 現在のデバイスに応じた画像を取得
  379.     function getCurrentImages() {
  380.         const isMobile = \$(window).width() <= 768;
  381.         return isMobile ? \$('.mobile-image') : \$('.desktop-image');
  382.     }
  384.     // 画像プリロード関数
  385.     function preloadImages() {
  386.         return new Promise((resolve) => {
  387.             const images = getCurrentImages();
  388.             let loadedCount = 0;
  389.             const totalImages = images.length;
  391.             if (totalImages === 0) {
  392.                 resolve();
  393.                 return;
  394.             }
  396.             images.each(function() {
  397.                 const img = this;
  398.                 
  399.                 if (img.complete && img.naturalWidth > 0) {
  400.                     loadedCount++;
  401.                     if (loadedCount >= totalImages) {
  402.                         resolve();
  403.                     }
  404.                 } else {
  405.                     \$(img).on('load error', function() {
  406.                         loadedCount++;
  407.                         if (loadedCount >= totalImages) {
  408.                             resolve();
  409.                         }
  410.                     });
  411.                     
  412.                     // 強制的に再読み込みをトリガー（キャッシュ対策）
  413.                     if (!img.src) {
  414.                         img.src = img.getAttribute('src');
  415.                     }
  416.                 }
  417.             });
  418.         });
  419.     }
  421.     // スライダー初期化（動的centerPadding対応版）
  422.     function initializeSlider() {
  423.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  424.             \$('.mycarousel-slider').slick('unslick');
  425.         }
  427.         const initialPadding = calculateCenterPadding();
  428.         const windowWidth = \$(window).width();
  429.         const centerModeEnabled = windowWidth > 768;
  431.         \$('.mycarousel-slider').slick({
  432.             centerMode: centerModeEnabled,
  433.             centerPadding: initialPadding,
  434.             slidesToShow: 1,
  435.             autoplay: false, // 初期化時は自動再生を無効にして安定性を確保
  436.             autoplaySpeed: 5000,
  437.             arrows: true,
  438.             dots: true,
  439.             adaptiveHeight: false,
  440.             fade: false,
  441.             speed: 300
  442.             // responsive設定は削除（動的制御に切り替え）
  443.         });
  445.         // スライド変更時にクラスを更新
  446.         \$('.mycarousel-slider').on('afterChange', function(event, slick, currentSlide) {
  447.             updateSlideClasses();
  448.         });
  449.     }
  451.     // 動的な表示最適化メイン関数
  452.     function optimizeCarouselDisplay() {
  453.         const isMobile = \$(window).width() <= 768;
  454.         const config = isMobile ? RESPONSIVE_CONFIG.mobile : RESPONSIVE_CONFIG.desktop;
  455.         const \$currentImages = getCurrentImages();
  456.         
  457.         if (\$currentImages.length === 0) return;
  459.         // モバイル時は簡単な設定にする
  460.         if (isMobile) {
  461.             // モバイル時：width 100vw、height auto
  462.             \$('.mycarousel-slide').css({
  463.                 'height': 'auto',
  464.                 'width': '100vw'
  465.             });
  466.             \$currentImages.css({
  467.                 'width': '100%',
  468.                 'height': 'auto',
  469.                 'object-fit': 'contain',
  470.                 'position': 'relative'
  471.             });
  472.             
  473.             // 初期化完了後に自動再生を開始
  474.             if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  475.                 \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  476.             }
  477.             return;
  478.         }
  480.         const \$firstImage = \$currentImages.filter(':visible').first();
  481.         if (\$firstImage.length === 0 || !\$firstImage[0].complete || !\$firstImage[0].naturalWidth) {
  482.             return;
  483.         }
  485.         const imageWidth = \$firstImage[0].naturalWidth;
  486.         const imageHeight = \$firstImage[0].naturalHeight;
  487.         const imageAspectRatio = imageWidth / imageHeight;
  488.         
  489.         const containerWidth = \$('.mycarousel-wrapper').width();
  490.         const containerAspectRatio = config.targetAspectRatio;
  491.         
  492.         const maxRenderWidth = Math.min(imageWidth, containerWidth);
  493.         const maxRenderHeight = maxRenderWidth / imageAspectRatio;
  494.         
  495.         const viewportMinHeightPx = parseFloat(config.minHeight) * \$(window).height() / 100;
  496.         const viewportMaxHeightPx = parseFloat(config.maxHeight) * \$(window).height() / 100;
  497.         
  498.         let optimalHeight;
  499.         let objectFitMode = 'contain';
  501.         const aspectRatioDiff = Math.abs(imageAspectRatio - containerAspectRatio) / containerAspectRatio;
  503.         if (maxRenderHeight <= viewportMaxHeightPx && maxRenderHeight >= viewportMinHeightPx) {
  504.             optimalHeight = maxRenderHeight;
  505.         } else if (maxRenderHeight > viewportMaxHeightPx) {
  506.             if (aspectRatioDiff <= config.marginThreshold) {
  507.                 optimalHeight = viewportMaxHeightPx;
  508.             } else {
  509.                 optimalHeight = Math.min(containerWidth / imageAspectRatio, viewportMaxHeightPx);
  510.             }
  511.         } else {
  512.             if (maxRenderHeight < viewportMinHeightPx) {
  513.                 const scaleUpLimit = Math.min(2.0, viewportMinHeightPx / maxRenderHeight);
  514.                 if (scaleUpLimit <= 1.5) {
  515.                     optimalHeight = viewportMinHeightPx;
  516.                 } else {
  517.                     optimalHeight = maxRenderHeight;
  518.                 }
  519.             } else {
  520.                 optimalHeight = maxRenderHeight;
  521.             }
  522.         }
  524.         // 最終的な制限適用
  525.         optimalHeight = Math.max(viewportMinHeightPx, Math.min(viewportMaxHeightPx, optimalHeight));
  527.         // 画像の品質を考慮したobject-fit調整
  528.         const renderScale = optimalHeight / maxRenderHeight;
  529.         if (renderScale > 1.2) {
  530.             objectFitMode = 'contain';
  531.         } else {
  532.             objectFitMode = 'contain';
  533.         }
  535.         // スタイル適用（デスクトップのみ）
  536.         \$('.mycarousel-slide').css('height', optimalHeight + 'px');
  537.         \$currentImages.css({
  538.             'object-fit': objectFitMode,
  539.             'image-rendering': renderScale > 1.1 ? 'smooth' : 'auto'
  540.         });
  542.         // 初期化完了後に自動再生を開始
  543.         if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  544.             \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  545.         }
  546.     }
  548.     // スライドのクラスを更新する関数
  549.     function updateSlideClasses() {
  550.         \$('.mycarousel-slide').removeClass('center-slide side-slide');
  551.         
  552.         if (\$(window).width() > 768) {
  553.             \$('.slick-center .mycarousel-slide').addClass('center-slide');
  554.             \$('.slick-slide:not(.slick-center) .mycarousel-slide').addClass('side-slide');
  555.         } else {
  556.             \$('.mycarousel-slide').addClass('center-slide');
  557.         }
  558.     }
  560.     async function initialize() {
  561.         try {
  562.             // カルーセルを一時的に非表示にしてちらつき防止
  563.             \$('.mycarousel-wrapper').css('visibility', 'hidden');
  564.             
  565.             await preloadImages();
  566.             
  567.             initializeSlider();
  568.             
  569.             optimizeCarouselDisplay();
  570.             
  571.             updateSlideClasses();
  572.             
  573.             isInitialized = true;
  574.             
  575.             // 6. 少し待ってから表示（slickの初期化完了を確実にする）
  576.             setTimeout(() => {
  577.                 \$('.mycarousel-wrapper').css('visibility', 'visible');
  578.                 // 初期化後にもう一度表示を最適化
  579.                 optimizeCarouselDisplay();
  580.                 updateSlideClasses();
  581.             }, 50);
  582.             
  583.             console.log('Carousel initialized successfully');
  584.             
  585.         } catch (error) {
  586.             console.error('Carousel initialization failed:', error);
  587.             // エラー時も表示を戻す
  588.             \$('.mycarousel-wrapper').css('visibility', 'visible');
  589.         }
  590.     }
  592.     let resizeTimer;
  593.     \$(window).on('resize', function() {
  594.         clearTimeout(resizeTimer);
  595.         resizeTimer = setTimeout(async () => {
  596.             // centerPaddingを動的に更新
  597.             updateCenterPadding();
  598.             
  599.             // デバイス切り替わり時は再初期化
  600.             const newImages = getCurrentImages();
  601.             const imagesSwitched = !currentImages.length || 
  602.                 newImages.length !== currentImages.length ||
  603.                 newImages[0] !== currentImages[0];
  604.             
  605.             if (imagesSwitched) {
  606.                 currentImages = newImages;
  607.                 await preloadImages();
  608.             }
  609.             
  610.             optimizeCarouselDisplay();
  611.             updateSlideClasses();
  612.         }, 200);
  613.     });
  614.     
  615.     \$(document).ready(function() {
  616.         currentImages = getCurrentImages();
  617.         initialize();
  618.     });
  619.     
  620.     \$(window).on('load', function() {
  621.         if (!isInitialized) {
  622.             initialize();
  623.         }
  624.     });
  625. });
  626. </script>
  627. ";
  628.         
  629.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  631.         
  632.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  634.     }
  636.     public function getTemplateName()
  637.     {
  638.         return "index.twig";
  639.     }
  641.     public function isTraitable()
  642.     {
  643.         return false;
  644.     }
  646.     public function getDebugInfo()
  647.     {
  648.         return array (  313 => 191,  303 => 190,  137 => 33,  127 => 32,  115 => 29,  106 => 26,  102 => 25,  99 => 24,  95 => 23,  92 => 22,  89 => 21,  86 => 19,  83 => 14,  80 => 12,  77 => 7,  73 => 4,  63 => 3,  52 => 1,  50 => 2,  37 => 1,);
  649.     }
  651.     public function getSourceContext()
  652.     {
  653.         return new Source("{% extends 'default_frame.twig' %}
  654. {% set body_class = 'front_page' %}
  655. {% block main %}
  656. <div class=\"mycarousel-wrapper\">
  657.     <div class=\"mycarousel-slider\">
  658.         {# PC用画像リスト　main-visual.jpg #}
  659.         {% set pc_images = [
  660.             'main-visual.jpg',
  661.             'main-visual.jpg',
  662.             'main-visual.jpg'
  663.         ] %}
  664.         
  665.         {# SP用画像リスト　sp-topImages.jpg #}
  666.         {% set sp_images = [
  667.         'sp-topImages.jpg',
  668.         'sp-topImages.jpg',
  669.         'sp-topImages.jpg'
  670.         ] %}
  671.         
  672.         {# 実際に表示する画像を選択（0から始まるインデックス番号で指定） #}
  673.         {% set display_images = [0,1,2] %}
  674.         
  675.         {% for index in display_images %}
  676.             <div class=\"mycarousel-slide\">
  677.                 <img class=\"desktop-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ pc_images[index]) }}\" alt=\"スライド画像\">
  678.                 <img class=\"mobile-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ sp_images[index]) }}\" alt=\"スライド画像\">
  679.             </div>
  680.         {% endfor %}
  681.     </div>
  682. </div>
  683. {% endblock %}
  684. {% block stylesheet %}
  685. <style>
  686. /* slickのデフォルト黒丸（before擬似要素）を無効化 */
  687. .mycarousel-slider .slick-dots li button::before {
  688.     display: none;
  689.     content: '';
  690. }
  691. .slick-dots li {
  692.     position:unset;
  693.     display: inline-block;
  694.     width: 20px;
  695.     height: 20px;
  696.     margin: 0 5px;
  697.     padding: 0;
  698.     cursor: pointer;
  699. }
  700. .mycarousel-slider .slick-dots li {
  701.     width: 10px;
  702.     height: 10px;
  703. }
  704. .mycarousel-slider .slick-dots li button {
  705.     width: 100%;
  706.     height: 100%;
  707.     padding: 0;
  708.     border: none;
  709.     border-radius: 50%;
  710.     background-color: #ccc;
  711.     opacity: 0.7;
  712.     transition: all 0.3s ease;
  713.     font-size: 0;
  714.     cursor: pointer;
  715. }
  716. .mycarousel-slider .slick-dots li.slick-active button {
  717.     background-color: #b8860b;
  718.     transform: scale(1.3);
  719.     opacity: 1;
  720. }
  722. /* フルワイドの外枠 */
  723. .mycarousel-wrapper {
  724.     width: 100vw;
  725.     max-width: none;
  726.     margin-left: calc(-50vw + 50%);
  727.     margin-right: calc(-50vw + 50%);
  728.     overflow: hidden;
  729.     padding: 0;
  730.     /* 初期化時のちらつき防止 */
  731.     visibility: hidden;
  732. }
  734. /* slickのトラック修正 */
  735. .slick-track {
  736.     display: flex !important;
  737.     align-items: center;
  738. }
  739. .slick-slide {
  740.     padding: 0 !important;
  741.     margin: 0 !important;
  742. }
  744. /* スライド本体（動的高さ対応） */
  745. .mycarousel-slide {
  746.     box-sizing: border-box;
  747.     padding: 0 !important;
  748.     margin: 0 !important;
  749.     position: relative;
  750.     transition: all 0.5s ease;
  751.     overflow: hidden;
  752.     /* 高さは動的に設定される */
  753.     height: 60vh; /* 初期値：JavaScript で調整される */
  754. }
  756. /* 画像の基本スタイル */
  757. .desktop-image,
  758. .mobile-image {
  759.     position: absolute;
  760.     top: 0;
  761.     left: 0;
  762.     width: 100%;
  763.     height: 100%;
  764.     transition: all 0.5s ease;
  765.     /* object-fit は JavaScript で動的に調整 */
  766.     object-fit: contain;
  767. }
  769. /* デスクトップ時のスタイル（768pxより大きい） */
  770. @media (min-width: 769px) {
  771.     .desktop-image {
  772.         display: block !important;
  773.     }
  774.     .mobile-image {
  775.         display: none !important;
  776.     }
  777. }
  779. /* モバイル時のスタイル（768px以下） */
  780. @media (max-width: 768px) {
  781.     .mycarousel-wrapper {
  782.         width: 100vw;
  783.         margin-left: calc(-50vw + 50%);
  784.         margin-right: calc(-50vw + 50%);
  785.     }
  786.     
  787.     .mycarousel-slide {
  788.         width: 100vw !important;
  789.         height: auto !important;
  790.         padding: 0 !important;
  791.         margin: 0 !important;
  792.         opacity: 1 !important;
  793.         filter: none !important;
  794.     }
  796.     .desktop-image {
  797.         display: none !important;
  798.     }
  799.     
  800.     .mobile-image {
  801.         display: block !important;
  802.         position: relative !important;
  803.         width: 100% !important;
  804.         height: auto !important;
  805.         object-fit: contain !important;
  806.         filter: brightness(1) contrast(1) !important;
  807.     }
  808. }
  810. /* 左右の画像を暗くするエフェクト（デスクトップのみ） */
  811. @media (min-width: 769px) {
  812.     .mycarousel-slide.side-slide {
  813.         opacity: 0.6;
  814.     }
  815.     .mycarousel-slide.side-slide .desktop-image {
  816.         filter: brightness(0.7) contrast(0.9);
  817.     }
  818.     .mycarousel-slide.center-slide {
  819.         opacity: 1;
  820.     }
  821.     .mycarousel-slide.center-slide .desktop-image {
  822.         filter: brightness(1) contrast(1);
  823.     }
  824.     .mycarousel-slide.side-slide:hover {
  825.         opacity: 0.8;
  826.         transform: scale(1.02);
  827.     }
  828.     .mycarousel-slide.side-slide:hover .desktop-image {
  829.         filter: brightness(0.85) contrast(0.95);
  830.     }
  831. }
  833. /* 動的高さ調整用のユーティリティクラス */
  834. .dynamic-fit-contain {
  835.     object-fit: contain;
  836. }
  837. .dynamic-fit-cover {
  838.     object-fit: cover;
  839. }
  840. </style>
  841. {% endblock %}
  842. {% block javascript %}
  843. <script>
  844. \$(function() {
  845.     // 動的レスポンシブ設定
  846.     const RESPONSIVE_CONFIG = {
  847.         desktop: {
  848.             targetAspectRatio: 16/9,
  849.             minHeight: '30vh',
  850.             maxHeight: '60vh',
  851.             marginThreshold: 0.15
  852.         },
  853.         mobile: {
  854.             targetAspectRatio: 4/3,
  855.             minHeight: '35vh',
  856.             maxHeight: '85vh',
  857.             marginThreshold: 0.12
  858.         }
  859.     };
  861.     let isInitialized = false;
  862.     let currentImages = [];
  864.     // 画面幅に応じた動的centerPadding計算
  865.     function calculateCenterPadding() {
  866.         const windowWidth = \$(window).width();
  867.         let padding;
  868.         
  869.         // 画面幅に応じてcenterPaddingを計算（調整可能な閾値）
  870.         if (windowWidth <= 768) {
  871.             // モバイル: 余白なし
  872.             padding = '0';
  873.         } else if (windowWidth <= 1024) {
  874.             // タブレット: 小さめの余白
  875.             padding = '8vw';
  876.         } else if (windowWidth <= 1200) {
  877.             // 小型デスクトップ: 中程度の余白
  878.             padding = '12vw';
  879.         }else if (windowWidth <= 1440) {
  880.             // 小型デスクトップ: 中程度の余白
  881.             padding = '15vw';
  882.         
  883.         } else if (windowWidth <= 1920) {
  884.             // 標準デスクトップ: やや大きめの余白
  885.             padding = '20vw';
  886.         } else {
  887.             // 大型ディスプレイ: 最大余白を制限
  888.             padding = '25vw';
  889.         }
  890.         
  891.         return padding;
  892.     }
  894.     // centerPaddingを動的に更新する関数
  895.     function updateCenterPadding() {
  896.         const newPadding = calculateCenterPadding();
  897.         const windowWidth = \$(window).width();
  898.         
  899.         // モバイルはcenterMode自体を無効にする
  900.         const centerModeEnabled = windowWidth > 768;
  901.         
  902.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  903.             \$('.mycarousel-slider').slick('slickSetOption', 'centerMode', centerModeEnabled, false);
  904.             \$('.mycarousel-slider').slick('slickSetOption', 'centerPadding', newPadding, true);
  905.         }
  906.     }
  908.     // 現在のデバイスに応じた画像を取得
  909.     function getCurrentImages() {
  910.         const isMobile = \$(window).width() <= 768;
  911.         return isMobile ? \$('.mobile-image') : \$('.desktop-image');
  912.     }
  914.     // 画像プリロード関数
  915.     function preloadImages() {
  916.         return new Promise((resolve) => {
  917.             const images = getCurrentImages();
  918.             let loadedCount = 0;
  919.             const totalImages = images.length;
  921.             if (totalImages === 0) {
  922.                 resolve();
  923.                 return;
  924.             }
  926.             images.each(function() {
  927.                 const img = this;
  928.                 
  929.                 if (img.complete && img.naturalWidth > 0) {
  930.                     loadedCount++;
  931.                     if (loadedCount >= totalImages) {
  932.                         resolve();
  933.                     }
  934.                 } else {
  935.                     \$(img).on('load error', function() {
  936.                         loadedCount++;
  937.                         if (loadedCount >= totalImages) {
  938.                             resolve();
  939.                         }
  940.                     });
  941.                     
  942.                     // 強制的に再読み込みをトリガー（キャッシュ対策）
  943.                     if (!img.src) {
  944.                         img.src = img.getAttribute('src');
  945.                     }
  946.                 }
  947.             });
  948.         });
  949.     }
  951.     // スライダー初期化（動的centerPadding対応版）
  952.     function initializeSlider() {
  953.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  954.             \$('.mycarousel-slider').slick('unslick');
  955.         }
  957.         const initialPadding = calculateCenterPadding();
  958.         const windowWidth = \$(window).width();
  959.         const centerModeEnabled = windowWidth > 768;
  961.         \$('.mycarousel-slider').slick({
  962.             centerMode: centerModeEnabled,
  963.             centerPadding: initialPadding,
  964.             slidesToShow: 1,
  965.             autoplay: false, // 初期化時は自動再生を無効にして安定性を確保
  966.             autoplaySpeed: 5000,
  967.             arrows: true,
  968.             dots: true,
  969.             adaptiveHeight: false,
  970.             fade: false,
  971.             speed: 300
  972.             // responsive設定は削除（動的制御に切り替え）
  973.         });
  975.         // スライド変更時にクラスを更新
  976.         \$('.mycarousel-slider').on('afterChange', function(event, slick, currentSlide) {
  977.             updateSlideClasses();
  978.         });
  979.     }
  981.     // 動的な表示最適化メイン関数
  982.     function optimizeCarouselDisplay() {
  983.         const isMobile = \$(window).width() <= 768;
  984.         const config = isMobile ? RESPONSIVE_CONFIG.mobile : RESPONSIVE_CONFIG.desktop;
  985.         const \$currentImages = getCurrentImages();
  986.         
  987.         if (\$currentImages.length === 0) return;
  989.         // モバイル時は簡単な設定にする
  990.         if (isMobile) {
  991.             // モバイル時：width 100vw、height auto
  992.             \$('.mycarousel-slide').css({
  993.                 'height': 'auto',
  994.                 'width': '100vw'
  995.             });
  996.             \$currentImages.css({
  997.                 'width': '100%',
  998.                 'height': 'auto',
  999.                 'object-fit': 'contain',
  1000.                 'position': 'relative'
  1001.             });
  1002.             
  1003.             // 初期化完了後に自動再生を開始
  1004.             if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  1005.                 \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  1006.             }
  1007.             return;
  1008.         }
  1010.         const \$firstImage = \$currentImages.filter(':visible').first();
  1011.         if (\$firstImage.length === 0 || !\$firstImage[0].complete || !\$firstImage[0].naturalWidth) {
  1012.             return;
  1013.         }
  1015.         const imageWidth = \$firstImage[0].naturalWidth;
  1016.         const imageHeight = \$firstImage[0].naturalHeight;
  1017.         const imageAspectRatio = imageWidth / imageHeight;
  1018.         
  1019.         const containerWidth = \$('.mycarousel-wrapper').width();
  1020.         const containerAspectRatio = config.targetAspectRatio;
  1021.         
  1022.         const maxRenderWidth = Math.min(imageWidth, containerWidth);
  1023.         const maxRenderHeight = maxRenderWidth / imageAspectRatio;
  1024.         
  1025.         const viewportMinHeightPx = parseFloat(config.minHeight) * \$(window).height() / 100;
  1026.         const viewportMaxHeightPx = parseFloat(config.maxHeight) * \$(window).height() / 100;
  1027.         
  1028.         let optimalHeight;
  1029.         let objectFitMode = 'contain';
  1031.         const aspectRatioDiff = Math.abs(imageAspectRatio - containerAspectRatio) / containerAspectRatio;
  1033.         if (maxRenderHeight <= viewportMaxHeightPx && maxRenderHeight >= viewportMinHeightPx) {
  1034.             optimalHeight = maxRenderHeight;
  1035.         } else if (maxRenderHeight > viewportMaxHeightPx) {
  1036.             if (aspectRatioDiff <= config.marginThreshold) {
  1037.                 optimalHeight = viewportMaxHeightPx;
  1038.             } else {
  1039.                 optimalHeight = Math.min(containerWidth / imageAspectRatio, viewportMaxHeightPx);
  1040.             }
  1041.         } else {
  1042.             if (maxRenderHeight < viewportMinHeightPx) {
  1043.                 const scaleUpLimit = Math.min(2.0, viewportMinHeightPx / maxRenderHeight);
  1044.                 if (scaleUpLimit <= 1.5) {
  1045.                     optimalHeight = viewportMinHeightPx;
  1046.                 } else {
  1047.                     optimalHeight = maxRenderHeight;
  1048.                 }
  1049.             } else {
  1050.                 optimalHeight = maxRenderHeight;
  1051.             }
  1052.         }
  1054.         // 最終的な制限適用
  1055.         optimalHeight = Math.max(viewportMinHeightPx, Math.min(viewportMaxHeightPx, optimalHeight));
  1057.         // 画像の品質を考慮したobject-fit調整
  1058.         const renderScale = optimalHeight / maxRenderHeight;
  1059.         if (renderScale > 1.2) {
  1060.             objectFitMode = 'contain';
  1061.         } else {
  1062.             objectFitMode = 'contain';
  1063.         }
  1065.         // スタイル適用（デスクトップのみ）
  1066.         \$('.mycarousel-slide').css('height', optimalHeight + 'px');
  1067.         \$currentImages.css({
  1068.             'object-fit': objectFitMode,
  1069.             'image-rendering': renderScale > 1.1 ? 'smooth' : 'auto'
  1070.         });
  1072.         // 初期化完了後に自動再生を開始
  1073.         if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  1074.             \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  1075.         }
  1076.     }
  1078.     // スライドのクラスを更新する関数
  1079.     function updateSlideClasses() {
  1080.         \$('.mycarousel-slide').removeClass('center-slide side-slide');
  1081.         
  1082.         if (\$(window).width() > 768) {
  1083.             \$('.slick-center .mycarousel-slide').addClass('center-slide');
  1084.             \$('.slick-slide:not(.slick-center) .mycarousel-slide').addClass('side-slide');
  1085.         } else {
  1086.             \$('.mycarousel-slide').addClass('center-slide');
  1087.         }
  1088.     }
  1090.     async function initialize() {
  1091.         try {
  1092.             // カルーセルを一時的に非表示にしてちらつき防止
  1093.             \$('.mycarousel-wrapper').css('visibility', 'hidden');
  1094.             
  1095.             await preloadImages();
  1096.             
  1097.             initializeSlider();
  1098.             
  1099.             optimizeCarouselDisplay();
  1100.             
  1101.             updateSlideClasses();
  1102.             
  1103.             isInitialized = true;
  1104.             
  1105.             // 6. 少し待ってから表示（slickの初期化完了を確実にする）
  1106.             setTimeout(() => {
  1107.                 \$('.mycarousel-wrapper').css('visibility', 'visible');
  1108.                 // 初期化後にもう一度表示を最適化
  1109.                 optimizeCarouselDisplay();
  1110.                 updateSlideClasses();
  1111.             }, 50);
  1112.             
  1113.             console.log('Carousel initialized successfully');
  1114.             
  1115.         } catch (error) {
  1116.             console.error('Carousel initialization failed:', error);
  1117.             // エラー時も表示を戻す
  1118.             \$('.mycarousel-wrapper').css('visibility', 'visible');
  1119.         }
  1120.     }
  1122.     let resizeTimer;
  1123.     \$(window).on('resize', function() {
  1124.         clearTimeout(resizeTimer);
  1125.         resizeTimer = setTimeout(async () => {
  1126.             // centerPaddingを動的に更新
  1127.             updateCenterPadding();
  1128.             
  1129.             // デバイス切り替わり時は再初期化
  1130.             const newImages = getCurrentImages();
  1131.             const imagesSwitched = !currentImages.length || 
  1132.                 newImages.length !== currentImages.length ||
  1133.                 newImages[0] !== currentImages[0];
  1134.             
  1135.             if (imagesSwitched) {
  1136.                 currentImages = newImages;
  1137.                 await preloadImages();
  1138.             }
  1139.             
  1140.             optimizeCarouselDisplay();
  1141.             updateSlideClasses();
  1142.         }, 200);
  1143.     });
  1144.     
  1145.     \$(document).ready(function() {
  1146.         currentImages = getCurrentImages();
  1147.         initialize();
  1148.     });
  1149.     
  1150.     \$(window).on('load', function() {
  1151.         if (!isInitialized) {
  1152.             initialize();
  1153.         }
  1154.     });
  1155. });
  1156. </script>
  1157. {% endblock %}", "index.twig", "/home/iseyabread/www/iseya/app/template/default/index.twig");
  1158.     }
  1159. }