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

2021/02/20 2021/02/20
カテゴリー SSG タグ Hexo Mermaid

HexoのMermaidプラグイン

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

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

Tranquilpeakの設定

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

# Mermaid
mermaid:
    enable: true
    version: "7.1.2"
    # Available themes: default | dark | forest | neutral
    theme: default

Mermaidの読み込み

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

<% 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のコードであることを示して記述する。
コードブロックで書くことがサンプルで表現されていないので注意。

フローチャート

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence diagram

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!

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 
prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram

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

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

Class diagram

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

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

Git graph

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

コメント・シェア

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

2021/02/19 2021/03/08
カテゴリー Google タグ GoogleSearchConsole SEO

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

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

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

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

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

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

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

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

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

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

エラーの原因を改善する

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

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行を削除。

User-agent: *
Disallow: /all-categories/
Disallow: /categories/
Disallow: /all-tags/
Disallow: /tags/
Disallow: /all-archives/
Sitemap: https://www.nullpo.io/sitemap.xml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント・シェア

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

2021/02/19 2021/02/20
カテゴリー Google SSG タグ GoogleChart Hexo

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>

チャートを描く

書き方

{% 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

{% googlecharts PieChart 100% %}
Pie Chart
{}
'Task', 'Hours per Day'
'Work',              11
'Eat',                2
'Commute',            2
'Watch TV',           2
'Sleep',              7
{% endgooglecharts %}

Donut Charts

{% googlecharts PieChart 100% %}
Donut Charts
{"pieHole": 0.4}
'タスク', '時間'
'仕事',      11
'食事',       2
'通勤',       2
'テレビ',     2
'睡眠',       7
{% endgooglecharts %}

Table Charts

{% 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 %}

Bar Charts

{% 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 %}

Goe Charts

{% googlecharts GeoChart 640 480 %}
GeoCharts
{}
'Country',          'Popularity'
'Germany',                   200
'United States',             300
'Brazil',                    400
'Canada',                    500
'France',                    600
'RU',                        700
{% endgooglecharts %}

Bubble Charts

{% 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 %}

コメント・シェア

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

2021/02/19 2021/02/19
カテゴリー SSG タグ Hexo Tranquilpeak

フォントを変更する

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以外を置き換える。

// 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にして

<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をカスタマイズして、フッターからタグを削除。

タグをフッターに表示しない

    <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

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

HexoのMermaidプラグイン

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

Tranquilpeakの設定

Mermaidの読み込み

ダイアグラムを描く

書き方

フローチャート

Sequence diagram

Gantt diagram

Class diagram

Git graph

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

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

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

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

エラーの原因を改善する

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

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

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

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

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

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

HexoのGoogleChartプラグイン

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

GoogleChartを読み込む

チャートを描く

書き方

Pie Chart

Donut Charts

Table Charts

Bar Charts

Goe Charts

Bubble Charts

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

フォントを変更する

Webフォントを読み込む

フォントを使用する

ヘッダーのカスタマイズ

フッターのカスタマイズ

ベフォーアフター

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

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

フッターの変化

nullpo

プロセスのメモリダンプをとる

KeyringでOSのパスワード管理機構を利用する

PythonでGmailを使ったメール送信

SMTPHandlerでログ出力をメール通知する

SlackのIncoming WebHooksを使う

Hexoを使った静的サイト作成

モダンWebホスティングサービスNetlify

Hexoの基本操作チュートリアル

Hexo Markdown

画像の引用

ハイパーリンク

カテゴリ・タグ

続きを読む

CI/CD