下記ã®è¨˜äº‹ã§æ›¸ã„ãŸã‚ˆã†ã«ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®éšŽå±¤åŒ–ã®ãƒ–ãƒã‚°ãƒ‘ーツã¯ã€æ³¨ç›®è¨˜äº‹ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®è¡¨ç¤ºã«ã¯ã€ãŠãらã対応ã§ãã¦ã„ã¾ã›ã‚“。
【解説】はてなブログ：カテゴリを階層化する（補足と問題点を追記） - daisukeの技術ブログ
ãã“ã§ã€æä¾›ã•ã‚Œã¦ã„るソースコードを解æžã—ã¦ï¼ˆãƒ‡ãƒ™ãƒãƒƒãƒ‘ーツールã§è§£æžã™ã‚‹æ–¹æ³•ã‚‚記載ã™ã‚‹ï¼‰ã€ç°¡å˜ã«å¯¾å¿œã§ããã†ãªã‚‰ã€æ³¨ç›®è¨˜äº‹ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®è¡¨ç¤ºã«å¯¾å¿œã—ã¦ã„ãã¾ã™ã€‚
ãªãŠã€JavaScriptã¯ã€ã»ã¨ã‚“ã©ä½¿ã£ãŸã“ã¨ãŒãªã„ã®ã§ã€åŸºæœ¬çš„ãªã“ã¨ã‚’メモã—ãªãŒã‚‰ã‚„ã£ã¦ã„ãã¾ã™ã€‚
解æžã—ãŸçµæžœã€çµè«–ã¨ã—ã¦ã¯ã€ç¾æ™‚点ã§ã¯ã€æ³¨ç›®è¨˜äº‹ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®éšŽå±¤åŒ–ã¯ã€ä¸å¯èƒ½ã ã¨æ€ã‚ã‚Œã¾ã™ã€‚
ç†ç”±ã¯ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼éšŽå±¤åŒ–ã®JavaScriptã€ã¤ã¾ã‚Šã€ãƒ¦ãƒ¼ã‚¶ãŒé…ç½®ã§ãã‚‹JavaScriptãŒå®Ÿè¡Œã•ã‚Œã‚‹ã‚¿ã‚¤ãƒŸãƒ³ã‚°ã§ã¯ã€æ³¨ç›®è¨˜äº‹ã¯ã¾ã 何も書ã‹ã‚Œã¦ã„ãªã‹ã£ãŸãŸã‚ã§ã™ã€‚ãŠãらãã€ãƒšãƒ¼ã‚¸è¡¨ç¤ºã®æœ€å¾Œã®æ–¹ã®ã‚¿ã‚¤ãƒŸãƒ³ã‚°ã§ã€ã¯ã¦ãªãƒ–ãƒã‚°ã®é‹å–¶ãŒç”¨æ„ã—ã¦ã„るプãƒã‚°ãƒ©ãƒ ã§ã€ãã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®æ³¨ç›®è¨˜äº‹ã‚’特定ã—ã¦ã€æ³¨ç›®è¨˜äº‹ã®å†…容を書ã込んã§ã„ã‚‹ã¨æ€ã‚ã‚Œã¾ã™ã€‚
何ã‹ã«ä½¿ãˆã‚‹ã¨ãã‚‚ã‚ã‚‹ã‹ã‚‚ã—ã‚Œãªã„ã®ã§ã€è§£æžã—ãŸå†…容を書ã„ã¦ãŠãã¾ã™ã€‚
å‚考文献
ã¯ã˜ã‚ã«
ブãƒã‚°ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã®ä¸€è¦§ã§ã™ã€‚良ã‹ã£ãŸã‚‰å‚考ã«ã—ã¦ãã ã•ã„。
ブãƒã‚°ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã®ã¾ã¨ã‚
JavaScriptã®åŸºæœ¬
JavaScriptã«ã¤ã„ã¦ã¯ã€éŽåŽ»ã«å°‘ã—使ã£ãŸã“ã¨ãŒã‚ã£ãŸãらã„ã§ã€å…¨ã覚ãˆã¦ãªã„ã®ã§ã€Webã‚’é ¼ã‚Šã«åŸºæœ¬çš„ãªå†…容をメモã—ã¦ãŠãã¾ã™ã€‚
JavaScriptã®åŸºæœ¬
JavaScriptã®è¨˜è¿°å ´æ‰€
</body>ã®ç›´å‰ã«ã€<script>JavaScriptã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰</script>ã€ã‚‚ã—ãã¯ã€<script type="text/javascript" src="JavaScriptã®ãƒ•ã‚¡ã‚¤ãƒ«ãƒ‘ス"></script>ã§è¨˜è¿°ã™ã‚‹<head>ã¨</head>ã®é–“ã«ã€ä¸Šè¨˜ã¨åŒã˜å†…容ã§è¨˜è¿°ã™ã‚‹
ã—ã‹ã—ã€<body>コンテンツ</body>ã®è¡¨ç¤ºã‚’優先ã™ã‚‹ãŸã‚ã€<head>～</head>ã«æ™‚é–“ãŒã‹ã‹ã‚‹å†…容ã¯é¿ã‘ãŸæ–¹ãŒã„ã„よã†ã§ã™ã€‚よã£ã¦ã€é€šå¸¸ã¯ã€ã€Œ1.ã€ãŒé¸æŠžã•ã‚Œã¾ã™ã€‚
カテゴリーã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’解æžã™ã‚‹
本題ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’解æžã—ã¦ã„ãã¾ã™ã€‚
JavaScriptã®æ–‡æ³•ã¯ã€ã»ã¨ã‚“ã©åˆ†ã‹ã‚‰ãªã„ã¾ã¾ã§ã™ãŒã€ã¨ã‚Šã‚ãˆãšè¦‹ã¦ã„ãã¾ã™ã€‚
デベãƒãƒƒãƒ‘ーツールを使ã£ã¦ã€å‹•ã‹ã—ãªãŒã‚‰ã€ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’ç†è§£ã™ã‚‹
ã¾ãšã€minã®ã‚½ãƒ¼ã‚¹ã§ã¯ã€è¦‹ã«ãã„ã®ã§ã€GitHubã‹ã‚‰ã€é€šå¸¸ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’入手ã—ã¾ã™ã€‚
github.com
public/v1.1ã«å¯¾è±¡ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ãŒå…¥ã£ã¦ã„ã¾ã™ã€‚
解æžã«å¿…è¦ãã†ãªã®ã¯ã€ã€Œbreadcrumb.jsã€ã¨ã€Œcategory_archive.jsã€ã§ã™ã€‚
ã“れらをã€ãƒ†ã‚¹ãƒˆç”¨ã®ãƒ–ãƒã‚°ã§ã€ãƒ•ãƒƒã‚¿ã«è²¼ã‚Šä»˜ã‘ã¦ã„ãŸã€Œbreadcrumb.min.jsã€ã¨ã€Œcategory_archive.min.jsã€ã‚’削除ã—ã¦ã€è²¼ã‚Šä»˜ã‘ã¾ã™ã€‚
変更をä¿å˜ã—ã¦ã€ãƒšãƒ¼ã‚¸ã‚’表示ã—ã¦ã¿ã‚‹ã¨ã€æ™®é€šã«ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®éšŽå±¤åŒ–ãŒå‹•ä½œã—ãŸã®ã§ã€æ¬¡ã¯ã€ãƒ‡ãƒ™ãƒãƒƒãƒ‘ーツールを使ã£ã¦ã€å‹•ã‹ã—ã¦ã„ãã¾ã™ã€‚
é©å½“ãªè¨˜äº‹ã‚’表示ã•ã›ã¦ãŠãã€ãƒ‡ãƒ™ãƒãƒƒãƒ‘ーツールを起動ã—ã¾ã™ã€‚ソースタブを開ãã€è¡¨ç¤ºã•ã›ãŸè¨˜äº‹ã‚’クリックã™ã‚‹ã¨ã€HTMLソースãŒè¡¨ç¤ºã•ã‚Œã‚‹ã®ã§ã€è¦‹ãŸã„ã¨ã“ã‚ã§ãƒ–レークãƒã‚¤ãƒ³ãƒˆã‚’è¨å®šã—ã¦ã€ãƒšãƒ¼ã‚¸ã‚’リãƒãƒ¼ãƒ‰ã™ã‚‹ã¨ã€ãƒ–レークãƒã‚¤ãƒ³ãƒˆã§åœæ¢ã—ã¾ã™ã€‚
ã‚ã¨ã¯ã€ã‚¹ãƒ†ãƒƒãƒ—インã€ã‚¹ãƒ†ãƒƒãƒ—オーãƒãƒ¼ã€ã‚¹ãƒ†ãƒƒãƒ—アウトãªã©ã‚’使ã£ã¦ã€å¤‰æ•°ã®å€¤ã‚’確èªã—ãªãŒã‚‰ã€è§£æžã—ã¦ã„ã‘ã°OKã§ã™ã€‚
デベãƒãƒƒãƒ‘ーツールã§JavaScriptã®ãƒ‡ãƒãƒƒã‚°
カテゴリーã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã®æ§‹æˆ
カテゴリーã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã¯ã€ä»¥ä¸‹ã®æ§‹æˆã§ã™ã€‚
- ヘッダ：
fulldisplay.min.cssã‚’è¿½åŠ â†’ 今回ã®ä»¶ã«ã¯ç„¡é–¢ä¿‚
- フッタ：以下ã®3ã¤ã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’追åŠ
https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js → 外部ã‹ã‚‰æä¾›ã•ã‚ŒãŸãƒ©ã‚¤ãƒ–ラリãªã®ã§è§£æžå¯¾è±¡å¤–breadcrumb.min.js → パンããšãƒªã‚¹ãƒˆã®å‡¦ç†ã‚„ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼åを変æ›ã™ã‚‹å‡¦ç†ã‚’è¡Œã£ã¦ã„る（今回ã®è§£æžå¯¾è±¡ï¼‰category_archive.min.js → サイドãƒãƒ¼ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã®éšŽå±¤åŒ–ã®åカテゴリã®é–‹é–‰å‡¦ç†ã‚’è¡Œã£ã¦ã„る（今回ã®è§£æžå¯¾è±¡å¤–）
breadcrumb.min.js
breadcrumb.min.jsã«ã¯ã€5ã¤ã®é–¢æ•°ãŒå®Ÿè£…ã•ã‚Œã¦ã„ã¾ã™ã€‚
ready関数ã¯ã€ãƒšãƒ¼ã‚¸ãŒãƒãƒ¼ãƒ‰ã•ã‚ŒãŸã¨ãã«å‘¼ã°ã‚Œã‚‹é–¢æ•°ã§ã‚ã‚Šã€ã‚¨ãƒ³ãƒˆãƒªãƒ¼ãƒã‚¤ãƒ³ãƒˆã§ã™ã€‚
記事ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã¨ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼åをクリックã—ãŸã¨ãã«è¡¨ç¤ºã•ã‚Œã‚‹ã‚«ãƒ†ã‚´ãƒªãƒ¼å†…ã®è¨˜äº‹ä¸€è¦§ï¼ˆã‚¢ãƒ¼ã‚«ã‚¤ãƒ–）ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã¨ã§ã€å¤§ãã2ã¤ã«åˆ†ã‹ã‚Œã¦ã„ã¾ã™ã€‚
最åˆã®2ã¤ã®é–¢æ•°ã®ã€ŒremapBreadcrumb関数ã€ã¨ã€ŒremapArticleCategory関数ã€ã¯ã€è¨˜äº‹ãŒè¡¨ç¤ºã•ã‚Œã‚‹ã¨ãã«å®Ÿè¡Œã•ã‚Œã‚‹é–¢æ•°ã§ã™ã€‚
次ã®2ã¤ã®é–¢æ•°ã®ã€ŒremapCategoryBreadcrumb関数ã€ã¨ã€ŒremapArchiveCategory関数ã€ã¯ã€è¨˜äº‹ä¸€è¦§ãŒè¡¨ç¤ºã•ã‚Œã‚‹ã¨ãã«å®Ÿè¡Œã•ã‚Œã‚‹é–¢æ•°ã§ã™ã€‚
以é™ã§ã€å‡¦ç†ã•ã‚Œã‚‹é †ã«ã€ãã‚Œãžã‚Œã®é–¢æ•°ã®æ¦‚è¦ã‚’説明ã—ãŸå¾Œã€è©³ç´°ãªè§£æžã—ãŸå†…容ã¯ã€ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã«ã‚³ãƒ¡ãƒ³ãƒˆã—ãŸã‚‚ã®ã‚’示ã—ã¾ã™ã€‚
ready関数
記事ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã®å‡¦ç†ã§ã€è¨˜äº‹ã‚¿ã‚¤ãƒˆãƒ«ä¸‹ã®ãƒ‘ンããšãƒªã‚¹ãƒˆï¼ˆå¤‰æ›å‰ã®ã€Œãƒ–ãƒã‚°ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã€ãƒ–ãƒã‚°ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚º-JavaScriptã€ãªã©ï¼‰ã‚’å–å¾—ã—ã¦ã€ãれを引数ã«ã—ã¦ã€remapArticleCategory関数（パンããšãƒªã‚¹ãƒˆã‚’åカテゴリーã«å¤‰æ›ã™ã‚‹å‡¦ç†ï¼‰ã‚’呼ã³å‡ºã—ã¾ã™ã€‚ãªãŠã€è¨˜äº‹ä¸€è¦§ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã¯ã€ã“ã®é–¢æ•°ã¯å‘¼ã³å‡ºã•ã‚Œã¾ã›ã‚“。
次ã¯ã€è¨˜äº‹ä¸€è¦§ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã®å‡¦ç†ã§ã€ä¸Šã¨åŒæ§˜ã«ãƒ‘ンããšãƒªã‚¹ãƒˆã‚’å–å¾—ã—ã¦ã€ãれを引数ã«ã—ã¦ã€remapCategoryBreadcrumb関数（-ã§çµåˆã•ã‚ŒãŸã€Œãƒ–ãƒã‚°ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚º-JavaScriptã€ã‚’åカテゴリーã ã‘「JavaScriptã€ã«å¤‰æ›ã™ã‚‹å‡¦ç†ï¼‰ã‚’呼ã³å‡ºã—ã¾ã™ã€‚ãã®å¾Œã€remapArchiveCategory関数（å„記事ã«æ›¸ã‹ã‚Œã¦ã„るカテゴリーåを変æ›ã™ã‚‹å‡¦ç†ï¼‰ã‚’呼ã³å‡ºã—ã¾ã™ã€‚ãªãŠã€è¨˜äº‹ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã¯ã€ã“ã®é–¢æ•°ã¯å‘¼ã³å‡ºã•ã‚Œã¾ã›ã‚“。
$(document).ready(function(){
var $entry_categories = $('#main-inner > article.entry > div.entry-inner > header > div.entry-categories > a');
if($entry_categories.length>0) {
remapArticleCategory($entry_categories);
}
var $archive_entries = $('#main-inner > div.archive-entries');
if($archive_entries.length > 0) {
$breadcrumb_child = $('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first');
breadcrumbs = $breadcrumb_child.find('span').text().split('-');
remapCategoryBreadcrumb(breadcrumbs);
$archive_entries.each(function(){
remapArchiveCategory($(this).find('section > div.categories > a'));
});
}
});
remapBreadcrumb関数
記事ãŒè¡¨ç¤ºã•ã‚Œã‚‹æ™‚ã®ãƒ‘ンããšãƒªã‚¹ãƒˆå¤‰æ›å‡¦ç†ã®ã‚µãƒ–関数ã§ã™ã€‚
最åˆã¯ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼åãŒ'-'ã§çµåˆã•ã‚Œã¦ã„ã¾ã™ã€‚ã“ã®é–¢æ•°ã¯ã€çµåˆã—ãŸåå‰ã§URLを作æˆã—ã€è¨˜äº‹ã«è¡¨ç¤ºã™ã‚‹æ–‡å—列ã¯ã€åカテゴリーã®åå‰ã ã‘を使ã£ã¦ã„ã¾ã™ã€‚
var host = $(location).attr('host');
function remapBreadcrumb(breadcrumb){
new_breadcrumb_html='';
for(var i=0;i<breadcrumb.length;i++) {
url_category=[];
for(var j=0;j<=i;j++) {
url_category[j]=breadcrumb[j];
}
var category_url = 'https://'+host+'/archive/category/'+url_category.join('-');
new_breadcrumb_html += '<span class="breadcrumb-child""><a class="breadcrumb-child-link" href="'+category_url+'"><span>'+breadcrumb[i]+'</span></a></span>';
if(i+1<breadcrumb.length) {
new_breadcrumb_html += '<span class="breadcrumb-gt"> ></span>';
}
}
if(new_breadcrumb_html != '') {
$('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first').prop('outerHTML',new_breadcrumb_html);
}
}
remapArticleCategory関数
記事ãŒè¡¨ç¤ºã•ã‚Œã‚‹æ™‚ã®ãƒ¡ã‚¤ãƒ³é–¢æ•°ã§ã™ã€‚
最åˆã¯ã€ä¸€ç•ªéšŽå±¤ãŒæ·±ã„åå‰ã‚’å–å¾—ã—ã¦ã€ãれを分割ã—ã€ä¸Šã§ç¤ºã—ãŸã€remapBreadcrumb関数を呼ã³å‡ºã—ã¾ã™ã€‚
ãã®å¾Œã®å‡¦ç†ã¯ã€å¼•æ•°ã§æ¸¡ã•ã‚ŒãŸã‚«ãƒ†ã‚´ãƒªãƒ¼åを上書ãã—ã¦ã„ã¾ã™ãŒã€ãã®å¾Œã€ä½¿ã‚ã‚Œãªã„ã®ã§ã€å¿…è¦ãªã„処ç†ã§ã™ã€‚å…¬å¼ã®ãƒ‘ンããšãƒªã‚¹ãƒˆã®æ©Ÿèƒ½ãŒã€ã¾ã æä¾›ã•ã‚Œã¦ã„ãªã‹ã£ãŸã¨ãã®ãƒ‘ンããšãƒªã‚¹ãƒˆã®æ©Ÿèƒ½ã‚’æµç”¨ã—ãŸã¨ã®ã“ã¨ãªã®ã§ã€æœ€åˆã«ä½œã‚‰ã‚ŒãŸã¨ãã«ã¯ä½•ã‹ã«ä½¿ã‚ã‚ŒãŸå‡¦ç†ã ã£ãŸã®ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。
function remapArticleCategory(categories) {
var index=0;
while(typeof categories[index+1] != 'undefined' && categories[index+1].text.includes('-')) {
index+=1;
}
breadcrumb_array = categories[index].text.split('-');
remapBreadcrumb(breadcrumb_array)
category_num = categories.length;
for(var i=0;i<category_num;i++) {
category_branch = categories[i].text.split('-');
categories[i].text=category_branch[category_branch.length-1];
}
}
remapCategoryBreadcrumb関数
記事一覧ãŒè¡¨ç¤ºã•ã‚Œã‚‹å ´åˆã«å‘¼ã³å‡ºã•ã‚Œã‚‹å‡¦ç†ã§ã€remapBreadcrumb関数ã¨ã‚„ã£ã¦ã‚‹ã“ã¨ã¯ã€ã ã„ãŸã„åŒã˜ã§ã‚ã‚Šã€ãƒ‘ンããšãƒªã‚¹ãƒˆã®ã‚«ãƒ†ã‚´ãƒªãƒ¼åã®å¤‰æ›å‡¦ç†ã§ã™ã€‚
function remapCategoryBreadcrumb(breadcrumb) {
new_breadcrumb_html='';
for(var i=0;i<breadcrumb.length;i++) {
if(i+1<breadcrumb.length) {
url_category=[];
for(var j=0;j<=i;j++) {
url_category[j]=breadcrumb[j];
}
var category_url = 'https://'+host+'/archive/category/'+url_category.join('-');
new_breadcrumb_html += '<span class="breadcrumb-child"><a class="breadcrumb-child-link" href="'+category_url+'">'+breadcrumb[i]+'</span></a></span>';
new_breadcrumb_html += '<span class="breadcrumb-gt"> ></span>';
} else {
new_breadcrumb_html += '<span class="breadcrumb-child">'+breadcrumb[i]+'</span>';
}
}
if(new_breadcrumb_html != '') {
$('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first').prop('outerHTML',new_breadcrumb_html);
}
}
remapArchiveCategory関数
記事一覧ã®å„記事ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼åãŒé…列ã§æ¸¡ã•ã‚Œã¾ã™ã€‚ãれを1ã¤ãšã¤æœ€ä¸‹å±¤ã®åå‰ã«ç½®ãæ›ãˆã‚‹å‡¦ç†ã§ã™ã€‚
function remapArchiveCategory(categories) {
for(var i=0;i<categories.length;i++) {
category_branch = categories[i].text.split('-');
categories[i].text=category_branch[category_branch.length-1];
}
}
category_archive.min.js
å„関数ã®æ¦‚è¦ã¯ä»¥ä¸‹ã®é€šã‚Šã§ã™ã€‚サイドãƒãƒ¼ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã‚’対象ã¨ã—ãŸå‡¦ç†ã§ã‚ã‚Šã€ã€Œâ–¶ã€ã‚’押ã•ã‚ŒãŸã¨ãã«ã€éšŽå±¤åŒ–ã•ã‚ŒãŸã‚«ãƒ†ã‚´ãƒªãƒ¼ã®åカテゴリーを表示ã—ãŸã‚Šã€ã€Œâ–¼ã€ãŒæŠ¼ã•ã‚ŒãŸã¨ãã«ã€è¡¨ç¤ºã•ã‚Œã¦ã‚‹åカテゴリーをéžè¡¨ç¤ºã«ã™ã‚‹æ©Ÿèƒ½ã‚’実ç¾ã—ã¦ã„ã¾ã™ã€‚
- processArchive関数：サイドãƒãƒ¼ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«å†…ã«ã‚ã‚‹
liã‚¿ã‚°ã‚’å†å¸°çš„ã«è¦‹ã¦ã„ãã€éšŽå±¤åŒ–ã•ã‚ŒãŸã‚«ãƒ†ã‚´ãƒªãƒ¼ã®é–‹é–‰ã‚’制御ã—ã¦ã„ã‚‹
- toggleCategory関数：processArchive関数ã‹ã‚‰å‘¼ã°ã‚Œã€éšŽå±¤åŒ–ã•ã‚ŒãŸåカテゴリーã®é–‹é–‰ã®æ©Ÿèƒ½ã‚’æä¾›ã—ã¦ã„ã‚‹
- ready関数：processArchive関数を呼ã³å‡ºã™
カテゴリーã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã®è§£æžçµæžœ
カテゴリーã®éšŽå±¤åŒ–ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’ã€ä¸€é€šã‚Šç¢ºèªã—ãŸãŒã€ã‚„ã¯ã‚Šã€æ³¨ç›®è¨˜äº‹ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã«ã¤ã„ã¦ã¯è€ƒæ…®ã—ã¦ã„ãªã„よã†ã§ã™ã€‚
記事を表示ã—ãŸå ´åˆã¨ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼ã‚’クリックã—ãŸã¨ãã®ã‚«ãƒ†ã‚´ãƒªãƒ¼å†…ã®ä¸€è¦§ã®å ´åˆã§ã€2通りã®å¯¾å¿œãŒå¿…è¦ã«ãªã‚Šã¾ã™ã€‚
ãŠã‚ã‚Šã«
最終的ãªçµè«–ã¯ã€å†’é ã«æ›¸ã„ãŸé€šã‚Šã€ç¾çŠ¶ã¯ã€æ³¨ç›®è¨˜äº‹ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã«ã¤ã„ã¦ã€éšŽå±¤åŒ–ã«å¯¾å¿œã™ã‚‹ã®ã¯ä¸å¯èƒ½ã§ã™ã€‚
今回ã¯ä»¥ä¸Šã§ã™ï¼
最後ã¾ã§ãŠèªã¿ã„ãŸã ãã€ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã—ãŸã€‚
