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

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

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

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

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

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

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

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

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

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

エラーの原因を改善する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント・シェア

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

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

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

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

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

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

コメント・シェア

フォントを変更する

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でのエラー

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

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

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

フッターの変化

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

アフター。すっきり。

コメント・シェア

仮想通貨マイニングプラットフォームNiceHash

仮想通貨マイニングとは？

送金者は、金額や受取人などの取引情報（トランザクション）を、ネットワークを構成するマイナー（miner, 採掘者）と呼ばれるノードにブロードキャストする。マイナーは、受け取った取引情報をブロックという形でまとめ、ブロックチェーンの末尾に追加する。ただし、新しいブロックを記録するためには計算量の大きな問題を解く必要がある。マイナーたちは競ってその問題を解き、最初にブロックを追加することに成功したマイナーだけが一定額の報酬を得ることができる。二重支払いなどの不整合性は、ブロックをブロックチェーンに記録する際に他のノードによってチェックされる。

問題は10分ほどで解けるように難易度が調整されており、送金者は、取引の整合性がマイナーたちによって確認され、ブロックチェーンに記録されるまで同程度の時間を待たねばならない。流通するすべての ビットコイン通貨は、このようにマイナーへの報酬という形で市場に供給される。

仮想通貨（CryptCurrency）のマイニングは、ハッシュ計算（ハッシュパワー）の対価に報酬を得る仕組み。

nicehash？

nicehashはスロベキアに本拠地を置くハッシュパワーを取引するハッシュパワ取引所サービス。仮想通貨（CryptCurrency）のマイニングプラットフォーム。
2017年12月7日、約4700BTCを奪われる事件が発生。2017年12月22日に営業を再開したがCEOのマルコ・コバル氏は辞任。その後サービスは再開されている。

なにをつかってマイニングするか？

GPUを使ってマイニングする。どの程度掘れるかの目安はminerstatで確認できる。
現在使用しているNvidia RTX 2070だと、2021年1月末ごろのレートで1日あたり大体2.5USD～3.5USDぐらい。

nicehashの導入

NiceHashのダッシュボードにアクセスする

a. NiceHashへアクセス

b. NiceHashのアカウントを登録

c. 登録したアカウントでログイン

d. ダッシュボード

NiceHash Minerのインストール

NiceHash Quick Minerというものもあるが、NiceHash Minerをダウンロードする
ダウンロードセンターからもダウンロードできる。

a. RIGの構築をはじめる

b. 指示されている以下の設定を実施する

• Method 1: Disabling Windows Defender real-time protection and making an exclusion
• Method 2: Allowing and restoring the false-positive files (recommended)

c. NiceHash Minerをダウンロード

d. ダウンロードしたインストーラーを実行

e. License AgreementにI Agree

f. Finish

g. NiceHash Minerを実行

h. TERMS OF SERVICEにI ACCEPT

i. Disclaimer on usage of 3rd party softwareにI ACCEPT

j. Choose LanguageはEnglishでNEXT

k. LOGIN

l. NIceHashのアカウントでログイン

m. マイナーアルゴリズムなどのモジュールがダウンロードされる。

HashMinerの調整

a. インストールしたNiceHash MinerがMyRigsに表示されている

b. BenchmarkタブのSTART BENCHMARKからベンチマークを行う

ベンチマークは時間がかかるのでしばらく時間を置く必要がある。

c. Pluginsタブで利用可能なマイナーモジュールを確認できる

マイニングに使用するアルゴリズムは自動選択されるが、特定のアルゴリズムで不具合が生じた場合はここで無効化できる

d. MyRigsに設定したRigが表示される

e. CPUでのマイニングを無効化

マイニング状況

インストール後から1週間後のマイニング状況

この1日後（おおむね $3/DAY）

コメント・シェア

パスワードマネージャー

主要なパスワードマネージャー

• 1Password　…　老舗
• LastPass　…　無料
• Dashlane　…　高機能
• Bitwarden　…　無料

比較

Bitwardenのコスパがすごくいい。

Bitwarden

特徴

• パスワードマネージャーの機能としては必要十分
• 無料プランで十分実用的
• OpenSource(GitHub)
• Bitwardenクラウドを利用できるが、パスワードマネージャーサーバを構築することも可能

End-to-End Encryption

end-to-end AES-256 bit encryption, salted hashing, and PBKDF2 SHA-256.

個人情報やパスワードはエンドエンド間で暗号化。暗号化アルゴリズムはAES256。ハッシュはPBKDF2。PBKDF2は安全なハッシュ方式でSHA-256をベースにソルトやストレッチ（複数回ハッシュ化を繰り返して解析耐性を上げる）。

Cross-Platform Applications

クロスプラットフォーム対応。主要なものは対応している。

• Desktop(Windows, macOS, Linux)
• Web Browser(GoogleChrome, Safari, Mozilla Firefox, Vivaldi, Opera, Brave, Microsoft Edge, Tor Browser)
• Mobile(Apple, Google)
• Command Line(Windows, macOS, Linux
• Web(Access Web Vault)

BitWartdenアカウントの作成

Create Your Free Accountからアカウント作成

保管庫にアカウントデータが保存される。

パスワード生成ツールによってポリシーに従ったランダムパスワードを付与できる

2段階認証で多要素認証の設定が可能。

Chromenに保存したID/パスワードのエクスポート

Chromeに保存されたID/パスワードをエクスポートする。設定->自動入力->パスワードから。

エクスポートにはWindowsの認証が必要。

Chromenに保存したID/パスワードのインポート

データをインポートから、ChromeのCSVを選択して、エクスポートしたデータをインポート。

保管庫にインポートされる。

BitwardenのChromeアドオン

Bitwarden無料パスワードマネージャーを追加。

アドオンにログインすれば、保管庫のID/パスワードを自動入力できるようになる。

コメント・シェア