");background-repeat:no-repeat;-webkit-background-size:30px 24px;-moz-background-size:30px 24px;background-size:30px 24px;background-position:center center;border:none;margin:0;padding:0;width:60px;height:60px;cursor:pointer;-ms-flex-item-align:center;-ms-grid-row-align:center;-webkit-align-self:center;align-self:center;-ms-flex-item-align:center}.tab{position:relative;color:#424242;padding:6px;margin:0 4px;text-decoration:none;text-transform:uppercase;font-weight:400;-webkit-transition:.1s ease color;-webkit-transition:.1s ease color;-moz-transition:.1s ease color;-o-transition:.1s ease color;-ms-transition:.1s ease color;transition:.1s ease color}amp-sidebar{width:200px}amp-sidebar ul{padding:10px 0}amp-sidebar li a{display:block;padding:10px 20px}.title-cover{background-color:#4f7086;color:#fff;padding:30px 15px 20px 15px;text-align:center}.title-cover a{color:#fff}.title-cover a:hover{color:#fff}.meta-content{background-color:#e9e9e9;padding:20px 0}.meta-wrapper{margin:20px 20px;padding:20px 20px;background-color:#fff}#footer .copyright-tool,#footer .homeLink{margin:20px}.copyright-tool{color:#fff;font-size:.5em}.social-share{margin:10px 0 0 0;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.social-share amp-social-share{margin:5px}#totop{position:fixed;bottom:20px;right:20px;font-size:1.2em;z-index:995;line-height:1.8em}#totop a{background:rgba(152,209,245,.6);text-decoration:none;color:#fff;padding:0;text-align:center;display:block;width:1.2em;height:2.2em;line-height:2em;letter-spacing:0;position:relative;display:inline-block;padding:0 0 0 16px;vertical-align:middle;text-decoration:none;font-size:15px}#totop a:after,#totop a:before{position:absolute;top:0;bottom:0;left:0;margin:auto;content:"";vertical-align:middle}#totop a:before{left:12px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#totop a:hover{text-decoration:none;background:#4f7086;color:#fff;line-height:2.3em}.site-author-desc{font-size:1.2em;line-height:2em;margin-top:1em}.site-author-info{background-color:#fff;margin:20px}.gravatar-area{-webkit-border-radius:50%;border-radius:50%}.article-categories,.article-categories-list,.article-tag,.article-tag-list{padding:0;margin:0}.article-categories{margin-bottom:1.6em}.article-categories-list li,.article-tag-list li{list-style:none;display:inline-block;padding:0;margin:.2em 0}.article-categories-list li a,.article-tag-list li a{padding:.5em .6em;margin:.4em 0;background-color:#f5f2f0;color:#3a484b}.article-categories-list li a:before,.article-tag-list li a:before{content:"#"}.article-categories-list li a:hover,.article-tag-list li a:hover{color:#fff;background-color:#648aa4}.homeLink,.htmlPageLink{font-weight:700;-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-o-transition:.7s;-ms-transition:.7s;transition:.7s;padding:.4em 0}.homeLink a,.htmlPageLink a{color:#fff;display:block;padding:1em;text-align:center}.homeLink:hover,.htmlPageLink:hover{-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}.homeLink{font-size:120%;background:#7496ad}.homeLink:hover{background:#94afc0}.htmlPageLink{font-size:110%;background:#7496ad}.htmlPageLink:hover{background:#94afc0}.ad-footer,.googleAdPost,amp-instagram,amp-twitter,amp-video,amp-vimeo,amp-youtube{margin:2.8em 0}.sns-link{margin:1em 0}.sns-link a{font-size:2.6em;padding:.4em .1em;margin:0 .1em;color:#d0d0d0}.sns-link a:hover{color:#4f7086}.applink-wrapper .applink-col{width:100%}.applink-wrapper .applink-col a{display:block;width:60%;margin:0 auto}.applink-wrapper,.babylink-box{border:1px solid #f8981d;position:relative}.applink-wrapper .applink,.applink-wrapper .babylink-wrapper,.babylink-box .applink,.babylink-box .babylink-wrapper{margin:1em 1em 1em 1em}.applink-wrapper .app-image,.applink-wrapper .babylink-image,.babylink-box .app-image,.babylink-box .babylink-image{margin:0 5% 0 0;display:inline-block;vertical-align:middle;width:40%}.applink-wrapper .app-title,.applink-wrapper .babylink-info,.babylink-box .app-title,.babylink-box .babylink-info{margin:0;display:inline-block;vertical-align:middle;width:55%}.applink-wrapper .app-info,.applink-wrapper .babylink-description,.babylink-box .app-info,.babylink-box .babylink-description{margin:1em 1.2em .5em 1.2em}.applink-wrapper .babylink-description,.babylink-box .babylink-description{line-height:1.8em}.applink-wrapper .babylink-manufacturer,.babylink-box .babylink-manufacturer{margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title,.babylink-box .babylink-title{font-size:1em;margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title a,.babylink-box .babylink-title a{display:block;padding:1em 0}.applink-wrapper .aicon,.babylink-box .aicon{position:absolute;display:none}.applink-wrapper .babylink-amazonBtn,.babylink-box .babylink-amazonBtn{margin:1.4em 0 1em 0;height:4em}.applink-wrapper .babylink-amazonBtn a.amb,.babylink-box .babylink-amazonBtn a.amb{-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-ms-transition:.1s;transition:.1s;font-size:1em;height:3.5em;line-height:3.5em;text-align:center;color:#fff;width:85%;margin:0 auto;padding:0;display:block;background-color:#f8981d;border-top:1px solid #fff;border-bottom:4px solid #c27006;border-radius:4px}.applink-wrapper .babylink-amazonBtn a.amb:hover,.babylink-box .babylink-amazonBtn a.amb:hover{color:#fff;border-top:4px solid #fff;border-bottom:1px solid #c27006}.applink-wrapper .amazon-icon:before,.babylink-box .amazon-icon:before{content:"\f270";font-family:fontawesome;color:#fff}.entry-content p.openMap{text-align:center}.entry-content .attention{border:1px solid #ce8a8a}.entry-content .attention h5.label,.entry-content .attention h6.label{color:#ce8a8a}.entry-content .r-download{border:1px solid #88a3c1}.entry-content .r-download h5.label,.entry-content .r-download h6.label{color:#88a3c1}.entry-content .r-memo{border:1px solid #88b9c1}.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{color:#88b9c1}.entry-content .attention,.entry-content .babylink-box,.entry-content .r-download,.entry-content .r-memo{margin:2.2em 0;padding:0;border-radius:2px}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .babylink-box h5.label,.entry-content .babylink-box h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{background:0 0;background-color:none;border:none;border-bottom:none;border-left:none;border-right:none;border-top:none;margin:1.2em 1.5em;padding:0}.entry-content .attention h6.label,.entry-content .r-download h6.label,.entry-content .r-memo h6.label{font-size:1em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.5em;padding:0}.entry-content .attention .amp-img-wrapper,.entry-content .attention table,.entry-content .r-download .amp-img-wrapper,.entry-content .r-download table,.entry-content .r-memo .amp-img-wrapper,.entry-content .r-memo table{margin:1.8em 1.8em 0 1.8em}.entry-content .attention dl,.entry-content .attention ol,.entry-content .attention ul{margin:1em 1em 1em 2em}.entry-content .r-download dl,.entry-content .r-download ol,.entry-content .r-download ul{margin:1em 1em 1em 2em}.entry-content .r-memo dl,.entry-content .r-memo ol,.entry-content .r-memo ul{margin:1em 1em 1em 2em}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before{content:"\f071"}.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before{content:"\f019"}.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{content:"\f0f6"}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{margin:1.8em 1.8em 0}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before,.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before,.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{margin:0 .5em 0 0;font-family:fontawesome}.entry-content .attention ol li,.entry-content .attention ul li{font-size:.85em}.entry-content .r-download ol li,.entry-content .r-download ul li{font-size:.85em}.entry-content .r-memo ol li,.entry-content .r-memo ul li{font-size:.85em}.entry-content .attention ul li:after,.entry-content .r-download ul li:after,.entry-content .r-memo ul li:after{top:.85em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.8em}.amSimple{margin:1.8em 0;padding:1em 1.8em;position:relative;background-color:#f6f6f4}.amSimple p{margin:1em 0}amp-img,img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none}.imgCaption{text-align:center}.imgCaption span{font-size:.5em;color:#b6b6b6}.bcg{width:90%;margin:2.8em auto}.bcg-x-and-cell{width:100%;margin:0;position:relative;height:100%}.bcg-x-label{width:94%;margin:5px 0 0 6%;text-align:center}.bcg-y-label{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-orientation:sideways-right;width:6%;display:inline-block}.bcg-y-label-inner{position:absolute;top:50%;left:1%;display:inline-block;-webkit-transform:translate(-50%,-50%) rotate(180deg);-moz-transform:translate(-50%,-50%) rotate(180deg);-o-transform:translate(-50%,-50%) rotate(180deg);-ms-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotate(180deg);text-align:center;height:100%}.label-circle{display:inline-block;padding:.2em;border-radius:50%;width:1.6em;height:1.6em;line-height:1.6em;font-size:.8em}.label-week{background-color:#758f94;color:#fff}.label-strong{background-color:#3c4b4e;color:#fff}.label-desc{margin:.8em;display:inline-block}.bcg-table-wrapper{margin:0;padding:0;width:94%;display:inline-block}.bcg-table{border-collapse:collapse}.bcg-table .bcg-td{width:50%;text-align:center;height:100px;border:1px solid #fff;margin:0;padding:0;font-size:1.2em}.bcg-table .def{background-color:#758f94;color:#fff}.bcg-table .em{background-color:#55696e;color:#fff}.bcg-table .strong{background-color:#3c4b4e;color:#fff}@media (min-width:800px){.article-nav,.entry-content,.entry-header,.entry-title{width:780px;margin:0 auto}.nav-container{width:800px;margin:0 auto}.meta-wrapper{width:760px;margin:20px auto}.site-author-info{width:760px;margin:20px auto}#footer .copyright-tool,#footer .homeLink{width:760px;margin:20px auto}}
静的サイトジェネレータで比較的難しいのが関連記事や人気記事の表示です。
静的サイトジェネレータとは、htmlやjavascriptのような静的コンテンツのみで構築されたwebサイトを生成するプログラムのことです。Wordpressと異なり、デメリットとなるのは動的なページが生成できるphpが使えないことです。
tea dugong | Sony A7R2 + Sonnar T* FE 55mm F1.8 ZA photo by tea © 今回は、静的ジェネレータで関連記事や人気記事を生成するプラグインを作ってみましたので、静的サイトジェネレータで生成するアイディアを簡単にまとめてみたいと思います。
ブログで関連記事や人気記事を生成するプラグインを作った
タグの一致する記事を関連記事とする
静的ジェネレータのHugoやJekyllで度々話題になっているのが各記事のタグの一致を調べる方法です。最も手軽に実装できる方法です。
Googleアナリティクスのアクセス情報を活用する
Googleアナリティクスのページビュー数を取得して人気記事を選び出したり、関連度の参考にします。node.jsではga-analyticsでGoogle アナリティクスの情報を取得することができます。また外部サービスではZenbackやRankletをJavascriptから利用することもできます。
投稿記事本文の関連性を調べる
本文中の内容と関連する記事を選び出す方法です。WordpressではWordPress Related PostsやYet Another Related Posts Plugin YARPPが本文に共通する記事を選び出してくれるので有名ですね。静的サイトジェネレータでも同じ要領で本文の内容を解析し、関連記事を選び出すことができます。本文の解析は形態素解析の技術を使います。静的ジェネレータのMiddlemanにはmiddleman-blog-similarというプラグインが形態素解析してくれるみたいです。
まとめ
いかがだったでしょうか。静的サイトジェネレータでも関連記事や人気記事はアイディア次第ではWordpressに遜色なく表示させる事ができます。GUIが備わってるブログシステムの方がとっつきやすい印象ではありますが、静的サイトジェネレータはそれを上回るメリットが沢山あるのが魅力です。HugoやJekyll、gatsby、octopressをお使いの方にも何か参考になりましたら幸いです。