京都発の創造的滞在を考える。京都を舞台に長期滞在で創作や研究などクリエイティブな活動を求める方々のために、京都市が地域や若者と連携する、新しいレジデンスの仕組みづくりを開始。
「*** In Reshidence（アスタリスク・イン・レジデンス）」として、アートからビジネスまで幅広い分野で、世界中のクリエイターとの交流を目指します。

＊＊＊ in Residence Kyoto

Resource Type

Publication Date

Author

Resource URL

管理タグ

カテゴリ

短い説明

名前

レジデンス運営をされている方

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Slick起動前に.notion-spacerを削除
            $('.injectHtml:has(#main_visual) + .notion-row .notion-spacer').remove();
            
            // 初期状態でfade-inクラスを適用
            setTimeout(function() {
                $('.injectHtml:has(#main_visual) + .notion-row').addClass('fade---in');
            }, 100);
            
            // Slickスライダーの初期化（各カラムを個別のスライドとして扱う）
            $('.injectHtml:has(#main_visual) + .notion-row').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                infinite: true,
                speed: 800,
                fade: true,
                cssEase: 'ease-in-out',
                autoplay: true,
                autoplaySpeed: 4000,
                pauseOnHover: true,
                arrows: false,
                adaptiveHeight: true,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            dots: true
                        }
                    }
                ]
            });
            
            // スライド変更時のイベント
            $('.injectHtml:has(#main_visual) + .notion-row').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
                // フェードアウト効果
                $(this).find('.notion-column').removeClass('fade-in');
            });
            
            $('.injectHtml:has(#main_visual) + .notion-row').on('afterChange', function(event, slick, currentSlide) {
                // フェードイン効果
                $(this).find('.slick-active .notion-column').addClass('fade-in');
            });
        });
    </script>

<script>
        // IntersectionObserverのオプション設定
const observerOptions = {
    root: null,
    rootMargin: '0px 0px -100px 0px',
    threshold: 0.1
};

// IntersectionObserverのコールバック関数
const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('fade-in');
            observer.unobserve(entry.target);
        }
    });
};

// IntersectionObserverのインスタンスを作成
const observer = new IntersectionObserver(observerCallback, observerOptions);

// 新しい要素を監視対象に追加する関数
function observeNewElements() {
    const targetElements = document.querySelectorAll('main [data-block-id]:not(.observed)');
    
    targetElements.forEach(element => {
        element.classList.add('observed'); // 重複監視を防ぐマーカー
        observer.observe(element);
    });
}

// wrapAdjacentDiv関数（改良版）
function wrapAdjacentDivRobust() {
    let targetElements;
    
    try {
        targetElements = document.querySelectorAll('.injectHtml:has(.section_enph):not(.processed)');
    } catch (e) {
        targetElements = Array.from(document.querySelectorAll('.injectHtml:not(.processed)'))
            .filter(el => el.querySelector('.section_enph'));
    }
    
    targetElements.forEach(injectHtml => {
        injectHtml.classList.add('processed'); // 重複処理を防ぐマーカー
        
        const nextDiv = injectHtml.nextElementSibling;
        
        if (nextDiv && 
            nextDiv.tagName.toLowerCase() === 'div' && 
            !nextDiv.closest('.section_enph_wrap')) {
            
            const wrapper = document.createElement('div');
            wrapper.className = 'section_enph_wrap';
            
            nextDiv.parentNode.insertBefore(wrapper, nextDiv);
            wrapper.appendChild(nextDiv);
        }
    });
}

// MutationObserverで動的な要素追加を監視
const fadeinmutationObserver = new MutationObserver((mutations) => {
    let shouldProcess = false;
    
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
            // 新しい要素が追加された場合
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    // data-block-id属性を持つ要素または.injectHtml要素が追加されたかチェック
                    if (node.querySelector && 
                        (node.querySelector('[data-block-id]') || 
                         node.matches('[data-block-id]') ||
                         node.querySelector('.injectHtml') || 
                         node.matches('.injectHtml'))) {
                        shouldProcess = true;
                    }
                }
            });
        }
    });
    
    if (shouldProcess) {
        // 少し遅延させて処理（DOM構築完了を待つ）
        setTimeout(() => {
            observeNewElements();
            wrapAdjacentDivRobust();
        }, 100);
    }
});

// 初期化処理
document.addEventListener('DOMContentLoaded', function() {
    // 初回処理
    observeNewElements();
    wrapAdjacentDivRobust();
    
    // MutationObserverを開始（document全体を監視）
    fadeinmutationObserver.observe(document.body, {
        childList: true,
        subtree: true // 子要素の変更も監視
    });
});

// 手動で再処理を実行する関数（必要に応じて外部から呼び出し可能）
window.refreshDynamicContent = function() {
    observeNewElements();
    wrapAdjacentDivRobust();
};
    </script>
<script>
    // ヘッダーカラー変更の実装
(function() {
  // 監視対象の要素を取得
  const targetElement = document.querySelector('.injectHtml:has(#main_visual) + .notion-row, .coverImage');
  
  if (!targetElement) {
    console.warn('監視対象の要素が見つかりません');
    return;
  }
  // ロゴ画像のURL
  const blackLogoUrl = 'https://www.notion.so/image/attachment%3A06efb5e2-565e-4295-a299-af46d12bcea7%3Alogo-b.svg?table=block&id=240244a9-faec-80ca-b1b8-c92bcc090b7a';
  const whiteLogoUrl = 'https://www.notion.so/image/attachment%3A5b203c03-7384-4cbc-a03e-2f1d9387eec3%3Alogo-w.svg?table=block&id=240244a9-faec-80c9-8424-f64a712a776c';
  // ヘッダー要素を取得
  const headerBtns = document.querySelectorAll('.header__btn');
  const headerLogo = document.querySelector('#header-logo');
  
  // スタイルを適用する関数
  function applyDarkTheme() {
    // .header__btnの色を黒に変更
    headerBtns.forEach(btn => {
      btn.style.color = '#000';
    });
    
    // SVGのfillを黒に変更
    const menuOpenSvgs = document.querySelectorAll('.header__menuOpenBtn svg');
    const menuCloseSvgs = document.querySelectorAll('.header__menuCloseBtn svg');
    
    menuOpenSvgs.forEach(svg => {
      svg.style.fill = '#000';
    });
    
    menuCloseSvgs.forEach(svg => {
      svg.style.fill = '#000';
    });
    
    // #header-logo::beforeの背景画像を黒ロゴに変更
    if (headerLogo) {
      const style = document.createElement('style');
      style.id = 'dynamic-header-dark-style';
      style.textContent = `
        #header-logo::before {
          background-image: url('${blackLogoUrl}') !important;
        }
      `;
      document.head.appendChild(style);
    }
  }
  
  // スタイルを元に戻す関数
  function applyLightTheme() {
    // .header__btnの色を元に戻す
    headerBtns.forEach(btn => {
      btn.style.color = '';
    });
    
    // SVGのfillを白に戻す
    const menuOpenSvgs = document.querySelectorAll('.header__menuOpenBtn svg');
    
    
    menuOpenSvgs.forEach(svg => {
      svg.style.fill = '#fff';
    });
    
    
    // #header-logo::beforeの背景画像を白ロゴに戻す
    const existingStyle = document.getElementById('dynamic-header-dark-style');
    if (existingStyle) {
      existingStyle.remove();
    }
  }
  // Intersection Observer のコールバック関数
  function handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 監視対象が画面内にある場合（元のスタイル）
        applyLightTheme();
        console.log('要素が画面内に入りました - ライトテーマ適用');
      } else {
        // 監視対象が画面外にある場合（黒いスタイル）
        applyDarkTheme();
        console.log('要素が画面外に出ました - ダークテーマ適用');
      }
    });
  }
  // Intersection Observer のオプション
  const options = {
    root: null, // ビューポートを基準にする
    rootMargin: '0px',
    threshold: 0 // 要素が少しでも見えなくなったらトリガー
  };
  // Intersection Observer を作成
  const observer = new IntersectionObserver(handleIntersection, options);
  
  // 監視を開始
  observer.observe(targetElement);
  
  console.log('Intersection Observer による監視を開始しました');
  
  // オプション: 監視を停止する関数を返す
  return function stopObserving() {
    observer.disconnect();
    console.log('Intersection Observer による監視を停止しました');
  };
})();

let watchingInterval = null;
        
function navigateToHash() {
    const hash = window.location.hash.substring(1);
    if (!hash) return;
    
    const element = document.getElementById(hash);
    
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
        clearInterval(watchingInterval);
    } else {
        startWatching(hash);
    }
}

function startWatching(elementId) {
    clearInterval(watchingInterval);
    
    let retries = 0;
    const maxRetries = 100;
    
    watchingInterval = setInterval(() => {
        const element = document.getElementById(elementId);
        
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
            clearInterval(watchingInterval);
        } else {
            retries++;
            if (retries >= maxRetries) {
                clearInterval(watchingInterval);
            }
        }
    }, 100);
}

// イベントリスナー
window.addEventListener('load', navigateToHash);
window.addEventListener('hashchange', navigateToHash);

function isExternalDomain(href) {
    try {
        // 相対パスや#から始まるリンクは内部リンク
        if (href.startsWith('/') || href.startsWith('#') || href.startsWith('./') || href.startsWith('../')) {
            return false;
        }
        
        // プロトコルがない場合は内部リンク
        if (!href.includes('://')) {
            return false;
        }
        
        const url = new URL(href);
        const currentDomain = window.location.hostname;
        
        return url.hostname !== currentDomain;
    } catch (e) {
        // URLが無効な場合は内部リンクとして扱う
        return false;
    }
}

function processNotionLinks() {
    const notionLinks = document.querySelectorAll('a.notion-link');
    
    notionLinks.forEach(link => {
        const href = link.getAttribute('href');
        
        if (href && !isExternalDomain(href)) {
            link.removeAttribute('target');
        }
    });
}

function resetLinks() {
    const notionLinks = document.querySelectorAll('a.notion-link');
    
    notionLinks.forEach(link => {
        link.setAttribute('target', '_blank');
    });
}

// ページ読み込み時に自動実行
window.addEventListener('load', () => {
    processNotionLinks();
});

// 動的に追加されたリンクを監視（MutationObserver使用）
const mobserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) { // Element node
                // 追加された要素自体がnotion-linkの場合
                if (node.classList && node.classList.contains('notion-link')) {
                    const href = node.getAttribute('href');
                    if (href && !isExternalDomain(href)) {
                        node.removeAttribute('target');
                    }
                }
                
                // 追加された要素の子要素にnotion-linkがある場合
                const childLinks = node.querySelectorAll && node.querySelectorAll('a.notion-link');
                if (childLinks) {
                    childLinks.forEach(link => {
                        const href = link.getAttribute('href');
                        if (href && !isExternalDomain(href)) {
                            link.removeAttribute('target');
                        }
                    });
                }
            }
        });
    });
});

// DOM変更の監視を開始
mobserver.observe(document.body, {
    childList: true,
    subtree: true
});

function setupImageClicks() {
    const columns = document.querySelectorAll('.notion-column');
    
    columns.forEach(column => {
        const imageCenter = column.querySelector('.notion-image-align-center');
        const linkElement = imageCenter ? imageCenter.querySelector('a') : null;
        
        if (linkElement) {
            // 既存のクリックイベントを削除
            column.onclick = null;
            
            // 新しいクリックイベントを設定
            column.onclick = function(e) {
                // aタグ自体がクリックされた場合は何もしない
                if (e.target.closest('a') === linkElement) {
                    return;
                }
                
                e.preventDefault();
                
                const href = linkElement.getAttribute('href');
                const target = linkElement.getAttribute('target');
                
                if (href) {
                    if (target === '_blank') {
                        window.open(href, '_blank');
                    } else {
                        window.location.href = href;
                    }
                }
            };
            
            // カーソルスタイルを設定
            column.style.cursor = 'pointer';
        } else {
            // リンクがない場合はクリック機能を無効化
            column.onclick = null;
            column.style.cursor = 'default';
        }
    });
}

function addDynamicImage() {
    const container = document.getElementById('dynamic-container');
    const newColumnDiv = document.createElement('div');
    newColumnDiv.className = 'notion-column';
    newColumnDiv.innerHTML = `
        <div class="notion-image-align-center">
            <a href="https://github.com" target="_blank">
                <img src="https://via.placeholder.com/300x200/ffc107/black?text=動的追加画像" alt="動的追加">
            </a>
        </div>
    `;
    
    container.appendChild(newColumnDiv);
    
    // 新しく追加された画像にもクリック機能を適用
    setupImageClicks();
}

// ページ読み込み時に初期設定
window.addEventListener('load', () => {
    setupImageClicks();
});

// 動的に追加された要素を監視
const setimglinkobs = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) {
                // 追加された要素自体がnotion-columnの場合
                if (node.classList && node.classList.contains('notion-column')) {
                    setupImageClicks();
                }
                
                // 追加された要素の子要素にnotion-columnがある場合
                const childColumns = node.querySelectorAll && node.querySelectorAll('.notion-column');
                if (childColumns && childColumns.length > 0) {
                    setupImageClicks();
                }
            }
        });
    });
});

setimglinkobs.observe(document.body, {
    childList: true,
    subtree: true
});

document.querySelector('.container').classList.add('notion-full-width');

// ブロック内がリンクだけの場合のみ、ボタン用クラスを付与
function markButtonLinks() {
    document.querySelectorAll('main a.notion-link').forEach(link => {
        const block = link.closest('.notion-text, [data-block-id]') || link.parentElement;
        const isBtn = block.textContent.trim() === link.textContent.trim();
        link.classList.toggle('notion-link--btn', isBtn);
    });
}

let markBtnTimer = null;
const btnLinkObserver = new MutationObserver(() => {
    clearTimeout(markBtnTimer);
    markBtnTimer = setTimeout(markButtonLinks, 100);
});

window.addEventListener('load', () => {
    markButtonLinks();
    btnLinkObserver.observe(document.body, { childList: true, subtree: true });
});
</script>

京都からはじまる“創造的滞在”
Creative Stays in Kyoto

ハンズオン用