MkDocsサイトにLive2Dキャラクターを追加する方法¶

extra_css:
    - stylesheets/extra.css
    - stylesheets/live2d-custom.css

extra_javascript:
    - 'javascripts/extra.js'
    - 'javascripts/live2d-config.js'
    - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML
    - https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js

// Live2D Widget Configuration
window.live2d_settings = {
    // CDNパス設定
    "cdnPath": "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/",

    // ウィジェット設定
    "waifuSize": "280x250",    // キャラクターサイズ
    "waifuMinWidth": "768px",  // 最小表示幅（スマホ非表示）
    "waifuDraggable": "axis-x", // ドラッグ可能設定

    // モデル設定
    "modelAPI": "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api@gh-pages/",
    "modelStorage": true,  // モデル記憶
    "modelRandMode": "switch", // ランダムモード

    // メッセージ設定
    "waifuWelcomeMessage": {
        "homepage": "技術ノートサイトへようこそ！",
        "console": "デベロッパーツールを開いているんですね。",
        "copy": "何かをコピーしましたね？引用元を忘れずに！"
    },

    // ホバーメッセージ
    "waifuTips": {
        "mouseover[data-md-toggle=search]": [
            "検索機能を使ってくださいね！",
            "何かお探しですか？"
        ],
        "click.md-nav__link": [
            "その記事、面白そうですね！",
            "学習がんばってください！"
        ]
    }
};

/* Live2D Widget Custom Styles */
#waifu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

/* 吹き出しメッセージのスタイル */
#waifu-tips {
    position: absolute;
    top: -60px;
    left: 6px;
    color: #fff;
    background-color: rgba(51, 51, 51, 0.9);
    border-radius: 12px;
    font-size: 12px;
    line-height: 18px;
    padding: 8px 12px;
    max-width: 250px;
    min-height: 70px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* スマートフォンでは非表示 */
@media screen and (max-width: 767px) {
    #waifu {
        display: none !important;
    }
}

{
  "mouseover [data-md-toggle=drawer]": [
    "メニューを開こうとしていますね！",
    "ナビゲーションメニューはここから操作できます"
  ],
  "click [data-md-toggle=search]": [
    "検索機能を使ってくださいね！",
    "何かお探しですか？"
  ],
  "copy": [
    "コードをコピーしましたね！",
    "使用する際は、出典を忘れずに",
    "役立つ情報だったでしょうか？"
  ],
  "idle": [
    "何かお手伝いできることはありますか？",
    "技術学習、がんばってくださいね！",
    "新しい知識を発見しましたか？"
  ]
}

// 設定ファイルでモデルAPIを変更
"modelAPI": "https://your-custom-api.com/live2d/",

// 複数モデルのランダム切り替え
"modelRandMode": "switch",
"modelStorage": true

/* ダークモード時の吹き出しスタイル */
[data-md-color-scheme="slate"] #waifu-tips {
    background-color: rgba(45, 55, 72, 0.95);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

// ローディング最適化
document.addEventListener('DOMContentLoaded', function() {
    // スマートフォンでは読み込まない
    if (window.innerWidth < 768) {
        return;
    }

    // プリロード設定
    console.log('Live2D Widget loading...');
});

// ブラウザの開発者ツールでエラーを確認
console.log('Live2D settings:', window.live2d_settings);

// CDNの接続確認
// https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/

// CSS セレクタの確認
{
  "mouseover .correct-selector": ["メッセージ"],
  "click #correct-id": ["クリックメッセージ"]
}

/* CSS で確実に非表示 */
@media screen and (max-width: 767px) {
    #waifu {
        display: none !important;
    }
}

// 遅延読み込みを追加
setTimeout(function() {
    // Live2D Widget の初期化
}, 1000);

// 時間帯別メッセージ取得関数
function getTimeBasedMessages() {
    const hour = new Date().getHours();

    if (hour >= 5 && hour < 12) {
        // 朝 (5-12時)
        return [
            "おはようございます！今日も勉強頑張るにゃ〜",
            "朝の時間は集中できるにゃ〜",
            "コーヒーでも飲みながら学習しましょ♪",
            "今日はどの技術について学ぼうかな？"
        ];
    } else if (hour >= 12 && hour < 17) {
        // 昼 (12-17時)
        return [
            "お昼休憩中ですか？軽く記事を読むのもいいにゃ〜",
            "午後の学習タイムだにゃ〜",
            "ランチ後の勉強は眠気に注意にゃ〜",
            "午後も頑張って学習しましょ！"
        ];
    } else if (hour >= 17 && hour < 22) {
        // 夕方〜夜 (17-22時)
        return [
            "お疲れ様でした〜一日の締めくくりに勉強にゃ〜",
            "夕方の時間を有効活用だにゃ〜",
            "今日学んだことを復習してみて♪",
            "夜の学習時間、始まりだにゃ〜"
        ];
    } else {
        // 深夜〜早朝 (22-5時)
        return [
            "夜更かしは体に良くないにゃ〜",
            "深夜の学習は適度にしてね",
            "たまには早く寝ることも大切だにゃ〜",
            "夜の静けさで集中できるけど、無理は禁物にゃ〜"
        ];
    }
}

// 季節別メッセージ取得関数
function getSeasonalMessages() {
    const month = new Date().getMonth() + 1; // 1-12月

    if (month >= 3 && month <= 5) {
        // 春 (3-5月)
        return [
            "桜の季節だにゃ〜新しい技術を学ぼう！",
            "春は新しいことを始める季節にゃ〜",
            "暖かくなってきたにゃ〜勉強も快適♪",
            "新年度、スキルアップの季節だにゃ〜"
        ];
    } else if (month >= 6 && month <= 8) {
        // 夏 (6-8月)
        return [
            "暑い日は涼しい部屋で勉強だにゃ〜",
            "夏休みは集中して学習できるチャンスにゃ〜",
            "冷房の効いた部屋で快適に学習♪",
            "夏の間にスキルを伸ばそうにゃ〜"
        ];
    } else if (month >= 9 && month <= 11) {
        // 秋 (9-11月)
        return [
            "秋は読書の季節だにゃ〜",
            "涼しくなって集中しやすいにゃ〜",
            "秋の夜長は学習にぴったり♪",
            "紅葉を見ながらの勉強もいいにゃ〜"
        ];
    } else {
        // 冬 (12-2月)
        return [
            "寒い日は暖かい部屋でコーディング♪",
            "年末年始、新しいスキルを身につけよう！",
            "冬の間に基礎をしっかり固めるにゃ〜",
            "温かい飲み物と一緒に学習タイムにゃ〜"
        ];
    }
}

// サイト案内・ナビゲーション支援機能
function setupSiteNavigation() {
    console.log('🧭 Setting up site navigation features...');

    // 現在のページに応じたガイドメッセージ
    const currentPath = window.location.pathname;
    let categoryMessage = "";

    if (currentPath.includes('/AI/')) {
        categoryMessage = "AI開発の記事を見てるにゃ〜最新技術が満載だよ♪";
    } else if (currentPath.includes('/Tips/')) {
        categoryMessage = "開発効率化のTipsを確認中にゃ〜便利な情報がいっぱい！";
    } else if (currentPath.includes('/MkDocs/')) {
        categoryMessage = "MkDocsでサイト構築中にゃ〜素敵なサイトを作ろう♪";
    } else if (currentPath.includes('/Infrastructure/')) {
        categoryMessage = "インフラ関連の記事だにゃ〜運用のコツを学ぼう♪";
    } else if (currentPath.includes('/Info/')) {
        categoryMessage = "学習リソースを見てるにゃ〜情報収集は大切だよ♪";
    } else if (currentPath === '/' || currentPath === '/index.html') {
        categoryMessage = "ホームページにゃ〜どのカテゴリから見始めようかな？";
    }

    // カテゴリメッセージがある場合は少し遅れて表示
    if (categoryMessage) {
        setTimeout(() => {
            showCatMessage(categoryMessage);
        }, 8000); // 8秒後に表示
    }
}

// 外部リンクへの警告
document.addEventListener('click', function(e) {
    const link = e.target.closest('a');
    if (link && link.href && link.hostname !== window.location.hostname) {
        if (!link.hasAttribute('data-external-warned')) {
            e.preventDefault();
            showCatMessage("外部サイトに移動しますにゃ〜");
            link.setAttribute('data-external-warned', 'true');
            setTimeout(() => {
                window.open(link.href, link.target || '_blank');
            }, 1500);
            console.log('🔗 External link warning shown for:', link.href);
        }
    }
});

// 学習支援機能
function setupLearningSupport() {
    console.log('📚 Setting up learning support features...');

    let startTime = Date.now();
    let scrollProgress = 0;
    let hasScrolled = false;

    // ページ滞在時間の追跡
    function trackReadingTime() {
        const currentTime = Date.now();
        const timeSpent = Math.floor((currentTime - startTime) / 1000); // 秒単位

        // 3分経過
        if (timeSpent === 180 && !hasScrolled) {
            showCatMessage("じっくり読んでくれてありがとう♪理解できてる？");
        }
        // 5分経過
        else if (timeSpent === 300) {
            showCatMessage("5分も読んでくれてるにゃ〜勉強熱心だね！");
        }
        // 10分経過
        else if (timeSpent === 600) {
            showCatMessage("もう10分！集中してるにゃ〜素晴らしい♪");
        }
    }

    // スクロール進捗の追跡
    function trackScrollProgress() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        const newProgress = Math.round((scrollTop / scrollHeight) * 100);

        if (newProgress > scrollProgress + 20) { // 20%ずつ
            scrollProgress = newProgress;
            hasScrolled = true;

            if (scrollProgress >= 50 && scrollProgress < 70) {
                showCatMessage("記事の半分まで読んだにゃ〜頑張って！");
            } else if (scrollProgress >= 90) {
                showCatMessage("最後まで読んでくれてありがとう♪他の記事もどうぞ〜");
            }
        }
    }

    // イベントリスナーの設定
    setInterval(trackReadingTime, 1000); // 1秒ごと
    window.addEventListener('scroll', trackScrollProgress);
}

// 高度なインタラクション検出
function setupAdvancedInteractions() {
    // コピー検出
    document.addEventListener('copy', () => {
        showCatMessage("コピーしたにゃ〜");
    });

    // 開発者ツール検出
    let devtools = { open: false };
    setInterval(() => {
        if (window.outerHeight - window.innerHeight > 160) {
            if (!devtools.open) {
                devtools.open = true;
                showCatMessage("にゃーん、開発者ツールを開いてるにゃ〜");
            }
        } else {
            devtools.open = false;
        }
    }, 1000);

    // ページ離脱・復帰検出
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            showCatMessage("おかえりなさい〜");
        }
    });
}

// スマートフォンチェック
function isMobile() {
    const mobile = window.innerWidth < 768 || 
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    return mobile;
}

// モバイルでは機能を制限
if (!isMobile()) {
    initializeTororoCat();
    setupCatMessages();
    setupSiteNavigation();
    setupLearningSupport();
}

// デバッグ用のテスト関数
function testCatMessage(text = "テストメッセージだにゃ〜") {
    console.log('🧪 Testing cat message...');
    showCatMessage(text);
}

// システム情報表示
function debugInfo() {
    console.log('🔍 Debug Info:');
    console.log('- L2Dwidget loaded:', typeof L2Dwidget !== 'undefined');
    console.log('- Canvas elements:', document.querySelectorAll('canvas').length);
    console.log('- Screen size:', window.innerWidth + 'x' + window.innerHeight);
    console.log('- Is mobile:', isMobile());
    console.log('- Message styles loaded:', !!document.querySelector('#cat-message-styles'));
}

// グローバルテスト関数
window.testCatMessage = testCatMessage;
window.debugInfo = debugInfo;

// 安全な初期化
function safeInitialize() {
    try {
        if (typeof L2Dwidget === 'undefined') {
            console.error('❌ L2Dwidget library not loaded!');
            return;
        }

        // 初期化処理
        initializeTororoCat();

    } catch (error) {
        console.error('❌ Live2D initialization failed:', error);
    }
}

name: Deploy MkDocs with Live2D
on:
  push:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Python
        uses: actions/setup-python@v2
        with:
          python-version: '3.x'
      - name: Install dependencies
        run: |
          pip install mkdocs-material
      - name: Build site
        run: mkdocs build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./site

// 必要な機能のみ読み込み
window.live2d_settings = {
    "cdnPath": "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/",
    "modelAPI": "", // 外部APIを使わない場合は空文字
    "waifuDraggable": false, // ドラッグ機能を無効化
    "modelRandMode": false, // ランダム機能を無効化
};

<!-- Service Worker でキャッシュ -->
<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}
</script>