HexoでMermaidを使ってダイアグラムを描く

 
カテゴリー SSG   タグ

HexoのMermaidプラグイン

hexo-filter-mermaid-diagramsのインストール

hexo-filter-mermaid-diagramsのインストール。

1
npm install hexo-filter-mermaid-diagrams --save

Tranquilpeakの設定

themes/tranquilpeak/_config.ymlにmermaidの設定を追加。

1
2
3
4
5
6
# Mermaid
mermaid:
    enable: true
    version: "7.1.2"
    # Available themes: default | dark | forest | neutral
    theme: default

Mermaidの読み込み

themes/tranquilpeak/layout/_partial/script.ejsに以下を追加。

1
2
3
4
5
6
7
8
<% if (theme.mermaid.enable) { %>
    <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
    <script>
        if (window.mermaid) {
            mermaid.initialize({theme: 'forest'});
        }
    </script>
<% } %>

ダイアグラムを描く

書き方

コードブロックでmermaidのコードであることを示して記述する。
コードブロックで書くことがサンプルで表現されていないので注意。

フローチャート

1
2
3
4
5
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
A
B
C
D

Sequence diagram

1
2
3
4
5
6
7
8
9
10
11
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

Gantt diagram

1
2
3
4
5
6
7
8
9
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
w. 01w. 02w. 03Completed task            Active task               Future task               Future task2               A sectionAdding GANTT diagram to mermaid

Class diagram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Class01int chimpint gorillasize()averylongclassClass09C3Class07Object[] elementDataequals()Class08C2cool class03 *-- class04 class05 o-- class06 class07 .. class08 class09 --> C2 : Where am i?Cool label<!------><!--|---->

Git graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
master, 886b817
8436117
61597e0
0ba3573
newbranch, fb5a2ff
2d47e44

コメント・シェア

Google Search Consoleのモバイルフレンドリーページ

 
カテゴリー Google   タグ

GoogleSearchConsoleでモバイルフレンドリーでないと判定されてしまう

モバイルユーザビリティでエラーがでている

  • テキストがちいさすぎて読めません
  • クリック可能な要素が小さすぎます
  • コンテンツの幅が画面の幅を超えています

SearchConsole width=640

エラー内容のページで再検査を試みるが……

SearchConsole width=640

検証プロセスを終了できませんで検査できない。

SearchConsole width=640

モバイルフレンドリーテストツールで原因を探る

モバイルフレンドリーのエラーはSearch Consoleにあるモバイルフレンドリーテストツールで検証できる。

SearchConsole width=640

SearchConsole width=640

SearchConsole width=640

検査の結果からエラー原因を突き止める

このページはモバイルフレンドリーではありませんと結果が表示されている。スクリーンショットをみると画面が崩れている。

SearchConsole width=640

エラーの詳細をみるとページが部分的に読み込まれましたとなっており、具体的に読み込めなかったファイルを確認していくと・・・CSSが読み込めていない。

SearchConsole width=640

エラーの原因を改善する

robots.txtテストツールで確認すると、robtos.txtでCSSが読み込めない設定になっている。
このサイトで使用しているHexoではassetsディレクトリーにCSSを含んでいるため、GoogleクローラーがCSSを読めない状態になっている。

1
2
3
4
5
6
7
8
9
User-agent: *
Disallow: /all-categories/
Disallow: /categories/
Disallow: /all-tags/
Disallow: /tags/
Disallow: /all-archives/
Disallow: /assets/images/
Disallow: /assets/
Sitemap: https://www.nullpo.io/sitemap.xml

該当の2行を削除。

1
2
3
4
5
6
7
User-agent: *
Disallow: /all-categories/
Disallow: /categories/
Disallow: /all-tags/
Disallow: /tags/
Disallow: /all-archives/
Sitemap: https://www.nullpo.io/sitemap.xml

修正したページで再検査する

再度検査を実行すると、このページはモバイルフレンドリーですとなり、スクリーンショットも正常。

SearchConsole width=640

SearchConsole width=640

1週間程度経過しても、GoogleSearchConsoleの状態が変わらない・・・

仮説① google側がrobots.txtのキャッシュをもっているのではないか？

robots.txtテストツールで送信からGoogleに通知できるようなのでトライする。

SearchConsole width=640

しかし、送信しました。すぐにテスターページを再読み込みしてタイムスタンプを確認してください。という表示がされた。つまり、テスターで読み込めていればGoogle側は更新したrobots.txtを読み込み済ということだ。

SearchConsole width=640

仮説② Googleのロボットが古いコンテンツキャッシュを持っているのではないか？

GoogleSearchConsoleのURL検査から検索ウインドにURLを入力して実行すると、検査ページが現れる。
検査ページではモバイルユーザビリティに問題があると報告されている。

SearchConsole width=640

検査ページで公開URLのテストを実行。

SearchConsole width=640

テストが終わるとライブテストというタブで結果が表示されている。エラーもない。

SearchConsole width=640

もうひとつのGOOGLEインデックスというタブを開くと……エラーのある状態だ。

SearchConsole width=640

表示されているインデックス登録をリクエストをクリック。

SearchConsole width=640

数日後、全ページのエラーが解消

モバイルユーザビリティで発生していたエラーはすべてて解消！

SearchConsole width=640

SearchConsole width=640

コメント・シェア

HexoでGoogle Chartを使って様々なチャートを描く

 
カテゴリー Google SSG   タグ

HexoのGoogleChartプラグイン

hexo-tag-googlechartsのインストール

1
npm install hexo-tag-googlecharts -- save

GoogleChartを読み込む

themes/tranquilpeak/layout/_partial/head.ejsに<script type="text/javascript" src="//www.google.com/jsapi"></script>を読み込むように追記する。

1
2
3
    <!-- Google Chart -->
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>

チャートを描く

書き方

1
2
3
4
5
6
7
8
9
{% googlecharts ChartType [width [height]] %}
  Title for the Graph
  { "customOptions": true }
  'Column1', 'Column2', 'Column3'
  1000, 28, 5
  5000, 71, 19
  10000, 143, 37
  20000, 282, 68
{% endgooglecharts %}
  • ChartTypeにはチャート名を記載
  • オプションはJSON形式で渡す
  • データはCSV形式で記述

Pie Chart

1
2
3
4
5
6
7
8
9
10
11
{% googlecharts PieChart 100% %}
Pie Chart
{}
'Task', 'Hours per Day'
'Work',              11
'Eat',                2
'Commute',            2
'Watch TV',           2
'Sleep',              7
{% endgooglecharts %}

Pie ChartWorkEatCommuteWatch TVSleep45.8%29.2%8.3%8.3%8.3%
TaskHours per Day
Work11
Eat2
Commute2
Watch TV2
Sleep7

Donut Charts

1
2
3
4
5
6
7
8
9
10
{% googlecharts PieChart 100% %}
Donut Charts
{"pieHole": 0.4}
'タスク', '時間'
'仕事',      11
'食事',       2
'通勤',       2
'テレビ',     2
'睡眠',       7
{% endgooglecharts %}
Donut Charts仕事食事通勤テレビ睡眠45.8%29.2%8.3%8.3%8.3%
タスク時間
仕事11
食事2
通勤2
テレビ2
睡眠7

Table Charts

1
2
3
4
5
6
7
8
9
{% googlecharts Table 100% 100% %}
Table Charts
{"showRowNumber": true}
'Name',   'Salary',                'Full Time Employee'
'Mike',  {v: 10000, f: '$10,000'}, true
'Jim',   {v:8000,   f: '$8,000'},  false
'Alice', {v: 12500, f: '$12,500'}, true
'Bob',   {v: 7000,  f: '$7,000'},  true
{% endgooglecharts %}
 NameSalaryFull Time Employee
1Mike$10,000✔
2Jim$8,000✗
3Alice$12,500✔
4Bob$7,000✔

Bar Charts

1
2
3
4
5
6
7
8
9
{% googlecharts BarChart 100% %}
Bar Charts
{}
'Element', 'Density',     { role: 'style' }
'Copper',       8.94,     '#b87333'
'Silver',      10.49,     'silver'
'Gold',        19.30,     'gold'
'Platinum',    21.45,     'color: #e5e4e2'
{% endgooglecharts %}
Bar ChartsDensity0510152025CopperSilverGoldPlatinum
ElementDensity
Copper8.94
Silver10.49
Gold19.3
Platinum21.45

Goe Charts

1
2
3
4
5
6
7
8
9
10
11
{% googlecharts GeoChart 640 480 %}
GeoCharts
{}
'Country',          'Popularity'
'Germany',                   200
'United States',             300
'Brazil',                    400
'Canada',                    500
'France',                    600
'RU',                        700
{% endgooglecharts %}
200700

Bubble Charts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% googlecharts BubbleChart 640 480 %}
Bubble Charts
{"hAxis": {"title": "Life Expectancy"}, "vAxis": {"title": "Fertility Rate"}, "bubble": {"textStyle": {"fontSize": 11}}}
'ID',     'Life Expectancy',  'Fertility Rate', 'Region',         'Population'
'CAN',    80.66,              1.67,             'North America',  33739900
'DEU',    79.84,              1.36,             'Europe',         81902307
'DNK',    78.6,               1.84,             'Europe',         5523095
'EGY',    72.73,              2.78,             'Middle East',    79716203
'GBR',    80.05,              2,                'Europe',         61801570
'IRN',    72.49,              1.7,              'Middle East',    73137148
'IRQ',    68.09,              4.77,             'Middle East',    31090763
'ISR',    81.55,              2.96,             'Middle East',    7485600
'RUS',    68.6,               1.54,             'Europe',         141850000
'USA',    78.09,              2.05,             'North America',  307007000
{% endgooglecharts %}
Bubble ChartsNorth AmericaEuropeMiddle EastUSARUSDEUEGYIRNGBRIRQ6570758085012345Life ExpectancyFertility Rate
IDLife ExpectancyFertility RateRegionPopulation
CAN80.661.67North America33,739,900
DEU79.841.36Europe81,902,307
DNK78.61.84Europe5,523,095
EGY72.732.78Middle East79,716,203
GBR80.052Europe61,801,570
IRN72.491.7Middle East73,137,148
IRQ68.094.77Middle East31,090,763
ISR81.552.96Middle East7,485,600
RUS68.61.54Europe141,850,000
USA78.092.05North America307,007,000

コメント・シェア

HexoのTranquilpeakをみやすくカスタマイズ

 
カテゴリー SSG   タグ

フォントを変更する

Webフォントを読み込む

themes/tranquilpeak/layout/_partial/head.ejsに<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">を読み込むように追記する。

1
2
3
    <!-- Web Fonts -->
    <link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
</head>

フォントを使用する

themes/tranquilpeak/source/_css/utils/_variables.scssをカスタマイズする。
Noto Sans Japaneseフォントを読み込み、codeとhighlight以外を置き換える。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Font families
$open-sans:            'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif:   'Merriweather', serif;
$monospace:             Menlo, Consolas, monospace;
$noto-sans-japanese:   'Noto Sans Japanese';

//$font-family-base: $open-sans-sans-serif;
$font-family-base: $noto-sans-japanese;

$font-families: (
   //// base
   //'headings':          $open-sans-sans-serif,
   //// components
   //'code':              $monospace,
   //'caption':           $merriweather-serif,
   //'image-gallery':     $open-sans,
   //'post-header-cover': $merriweather-serif,
   //'post-meta':         $open-sans-sans-serif,
   //'post-content':      $merriweather-serif,
   //'post-excerpt-link': $open-sans-sans-serif,
   //'highlight':         $monospace,
   //// layout
   //'sidebar':           $open-sans-sans-serif
   // base
   'headings':          $noto-sans-japanese,
   // components
   'code':              $monospace,
   'caption':           $noto-sans-japanese,
   'image-gallery':     $noto-sans-japanese,
   'post-header-cover': $noto-sans-japanese,
   'post-meta':         $noto-sans-japanese,
   'post-content':      $noto-sans-japanese,
   'post-excerpt-link': $noto-sans-japanese,
   'highlight':         $monospace,
   // layout
   'sidebar':           $noto-sans-japanese
);

ヘッダーのカスタマイズ

themes/tranquilpeak/layout/_partial/post/meta.ejsをカスタマイズして、見やすくする。

  • 記事投稿日だけでなく記事の更新日も表示する
  • 各メタ情報のアイコンを表示する
  • カテゴリーだけでなくタグもヘッダーに表示する
  • カテゴリーもタグと同じ表示形式にする
  • フォントをtext-smallからtext-mediumにして
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="<%= (classes ? classes.join(' ') : '') %>">
    <!-- 記事投稿日 -->
    <i class="fas fa-file-alt"></i>
    <time datetime="<%= post.date.format() %>">
        <span class="text-color-light text-medium">
            <% if (post.lang) { %>
                <%= post.date.locale(post.lang).format(__('date_format')) %>
            <% } else { %>
                <%= post.date.locale(page.lang).format(__('date_format')) %>
            <% } %>
        </span>
    </time>
    &nbsp;
    <!-- 記事更新日 -->
    <% if (post.updated) { %>
        <i class="fas fa-redo-alt"></i>
        <time datetime="<%= post.updated.format() %>">
            <span class="text-color-light text-medium">
                <% if (post.lang) { %>
                    <%= post.updated.locale(post.lang).format(__('date_format')) %>
                <% } else { %>
                    <%= post.updated.locale(page.lang).format(__('date_format')) %>
                <% } %>
            </span>
        </time>
    <% } %>
    <br>
    <!-- カテゴリー -->
    <% if ((post.categories) && (post.categories.length > 0)) { %>
        <i class="far fa-folder-open"></i>
        <span class="text-color-light text-medium"><%= __('post.categorized_in')  %> </span>
        <%- partial('category', {categories: post.categories})%>
    <% } %>
    &nbsp;
    <!-- タグ -->
    <% if ((post.tags) && (post.tags.length > 0)) { %>
        <i class="far fa-folder-open"></i>
        <span class="text-color-light text-medium"><%= __('post.tagged_in')  %> </span>
        <%- partial('tag', {tags: post.tags})%>
    <% } %>
</div>

フッターのカスタマイズ

themes/tranquilpeak/layout/_partial/post.ejsをカスタマイズして、フッターからタグを削除。

  • タグをフッターに表示しない
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <div id="post-footer" class="post-footer main-content-wrap">
        <!--
        <% if ((post.tags) && (post.tags.length > 0)) { %>
            <div class="post-footer-tags">
                <span class="text-color-light text-small"><%= __('post.tagged_in') %></span><br/>
                <%- partial('post/tag', {tags: post.tags})%>
            </div>
        <% } %>
        -->
        <% if (post.actions === undefined || post.actions) { %>
            <%- partial('post/actions', {postContent: postContent}) %>
        <% } %>
        <% if (post.comments) { %>
            <% if (theme.disqus_shortname) { %>
                <%- partial('post/disqus') %>
            <% } else if (theme.gitment.enable) { %>
                <%- partial('post/gitment') %>
            <% } else if (theme.gitalk.enable) { %>
                <%- partial('post/gitalk') %>
            <% } %>
        <% } %>
    </div>
</article>

ベフォーアフター

元々発生していたGoogleAnalyticsでのエラー

GoogleAnalytics Error width=640

ヘッダーおよびフォントの変化

ビフォー。アルファベットと日本語のバランスが良くない。

Hexo Tranquilpeak width=640

アフター。統一感があって読みやすい。カテゴリーとタグも視認しやすくなったが、ゴチャついてる感じも。

Hexo Tranquilpeak width=640

フッターの変化

ビフォー。記事が長いとアクセスしにくいタグ。

Hexo Tranquilpeak width=640

アフター。すっきり。

Hexo Tranquilpeak width=640

コメント・シェア

  • page 1 of 1


nullpo

めも


募集中


Japan