10万PVの収益や掛かる費用など公開する

先月、約8万PV、2.2万ユーザー訪問がありました（タイトル嘘

※2月は10万PVちゃんと超えました（パチパチ👏

10万PVも十分見込める範囲内なのでここまできた考察と収益やサーバーの維持費、その他サーバーにおけるコストなど公開します。

対象サイト

mygkrnk.com

アナリティクス

このサイトは1人のユーザーが何ページも跨ぐサイトではないので、ユーザー数が実際の流入になります。現状、流入は多いけど直帰、離脱率が比較的高い傾向にあります。1人のユーザーが3.5ページ閲覧しているということになります。見てもらえればわかるのですが、SEOが強く、その他の流入（SNS等）は弱いです。

ユーザー数

PV数

Search Console

クリックされているキーワードを確認します。「洋楽ランキング 2020」というキーワードが多くクリックされていることがわかります。ユーザーが最新情報を検索する場合は「最新」ではなく西暦を検索する傾向ですが、年初ということもあるので中盤に差し掛かると「最新」と検索する人が増えるかもしれません。「洋楽ランキング」でも3位と上位に位置しているものの、クリック数がそこまで多くないので「最新の洋楽ランキングを知りたい」と思っているユーザーが多いことがわかります。

SEO頑張った過程については以下をご覧ください。
tekitoumemo.hatenablog.com

サーバー代

サーバーとデータベースはAzureを利用しているのですが、月2000円程度かかっています。VPSなど使えばまだ安くできると思うのですが、CIとかその他もろもろのインフラを管理するのが大変なのでPaas使えると楽ですね。現状このプランでも十分すぎるほど捌けているのでまだまだ余裕があります（後ほど負荷について記載します）。ちなみにLinuxを選んでいるのでここまで安いのですが、Windowsサーバーになるとこれの4〜5倍します。

負荷

平均応答時間

大体300ミリ秒前後なので、そこまでストレスが掛かる時間ではないのかなと思います。ただし、PageSpeed Insightsでは200ミリ秒以下は遅いと判断されます。

サーバーの応答時間は 200 ミリ秒以下に抑える必要があります。

CPU

10％以下に抑えられているので大丈夫でしょう。グラフでちょくちょく負荷が多くみられるのは夜間バッチによる高負荷が原因です。今後改善の予知がありそう。

メモリ

60〜70%の間を行き来しています。プランでは1.75 GBなので約1GB使っていることになります。リアルタイムの訪問数が40近くいく時があるのですが、まぁ耐えられているんだろうなぁというところです。

データベース

DTUはAzure特有の単位で以下の通りになります。

DTU(Database Transaction Unit)という単位で定義され、CPU、メモリ、I/Oの組み合わせからなります。
DTUが大きくなるほど、コンピューティングリソースが多く使えるようになり、標準で付属するストレージ、追加できるストレージも大きくなります。後述するように、ダウンタイムを発生させずにスケールの変更ができます。

1%台と全然問題ない結果となっています。

その他

パフォーマンス改善については以下に書きましたので興味があれば
tekitoumemo.hatenablog.com

収益

一番気になるところだと思います。ずばり

3,882円

でした。結局はクリックが増えれば収益も増えるので大きく前後しそうです。PVに大してクリック数が160と相当少ないので、ここら辺が増えればもっと収益が上がるハズです。

Adsenseの画像は載せられないのでご了承ください。

利益

3,882 - 2,229 = 1,653円
夢がないですねー。逆にいうと元を取るのに5万PVぐらい稼がなければいけないので広告で利益をあげるのはかなり厳しい気がします。ここら辺は胡散臭いい記事が多すぎるので、騙されないようにしましょう。

感想

サーバー台の元が取れれば御の字
儲かるにはAdsense等の広告以外で考える必要あり
.Net Coreだから低予算で捌けてるのか、他のフレームワークはどうなのか気になる
10万いくとそれっぽいデータが取れるので次仕掛けることが明確になって良い

Javascriptで基底クラスで子クラスのインスタンスを返す

class Parent {
  static getChildClass() {
    return new this()
  }
}
class Child extends Parent {
  static start() {
    console.log(this.getChildClass())
  }
}
Child.start()
// Child {}

C#でmarkdownを書く（Markdig）

サイトを運用する人あるあるで

「ガイドとかヘルプ、マジめんどくせ〜」

ってなりませんか？僕はめっちゃなります、
CSSとかマークアップがとりあえずだるいし、wordpress運用してAPIで取り込むとかもだるいです。
今回はC#でmarkdownが書けるライブラリを紹介します。ちなみに今のご時世MVCが少なくなってきているので
フロントエンドだったらmarkedおすすめです（僕はブログのネタ用でC#で書きました。）

C#でMarkdownが書けるライブラリ

Markdigってやつです。
github.com

とりあえずNuget

dotnet add package Markdig

使う

using Markdig;
var markdown = File.ReadAllText(path);
var html = Markdown.ToHtml(markdown);
Console.Write(html);
/*
    markdown -> #見出しです。
    html -> <h1>見出しです。</h1>
*/

ちなみに拡張機能を使いたい場合はこうやるらしいです。

// Configure the pipeline with all advanced extensions active
var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
var result = Markdown.ToHtml("This is a text with some *emphasis*", pipeline);

拡張機能はこちらに載ってます。UseAutoLinkstとか便利そうね使わないけど。

実際作ったやつはこんな感じになりました。

（Jest）引数で渡したcallbackのmockをテストする

mockしたメソッドの引数にcallbackを渡してそれをテストしたい。

( ͡° ͜ʖ ͡°)

べつにテストしたくないけどカバレッジが100%にならないからテストしたい。

こういうのがあったとする

func(() => { console.log('callback') })

mockImplementationOnceを使う

func = jest.fn().mockImplementationOnce((cb) => cb())

MacBook Pro買うた

macbook買った。

私が買ったMacBook Pro

￥267,080　高っ。

なぜ買うた

今の仕事はPC至急してくれないので自分のPCを使わなければいけません。macbook airを持っていたのですが、
開発環境をdockerで完結する職場なのでメモリが8Gじゃ全然足りず、やむなくPCを買うことになりました。

グレード上げたところ

CPU

• 第8世代の2.4GHzクアッドコアIntel Core i5プ‍ロ‍セッサ

少なくともWEB系の開発なら、2.4GHzあれば充分。xcodeなど使う人はどうだろ？

メモリ

• 16GB 2,133MHz LPDDR3メモリ

Docker使うと結構食うので、16GBは最低でも必要。これぐらいあればしばらくは安心な気がする。

SSD

• 512GB SSDストレージ

128だと話にならないし、256でもちょっと気になるかなぐらい。なにも考えずに使いたい場合は512あれば無難。

MacBookの良いところ

キーボードと打ちやすい

いろんなPCを持ったけど、MacBookが最強な気がする。MacBookを買った理由のほとんどがこれ

トラックパッドが使いやすい

めっちゃ使いやすいと思う。macはインターフェースがめちゃくちゃ良い！

見た目がかっこいい

これでしょ大半の理由は。

電池持ちがよい

他のPCと比べて良い気がする。毎回充電するのがめんどくさいので助かる

MacBookの悪いところ

値段が高すぎ

zenbookとか約半分の値段でほぼ同じスペックなんだよね。。

エイスース 12.5型ノートパソコン ASUS ZenBook UX390UA ロイヤルブルー【Core i7/メモリ 16GB/SSD 512GB】 UX390UA-512GP

軽くない

うん、軽くはない。

Touch Barいらない

必要ないとまでは言わないが、その分安くしてくれ。。

色が少ない

黒とシルバーだけ。airの方が選択肢が多い。高い買い物なのに選択肢が少なくなるなんて。。

結論

zenbook買ってubuntuとかでもよかったかもー。オーディオとかドライバの関係がめんどくさそうだなーと思ってチキったんですが、
別にオーディオつかわねぇー。損もせず、得もせずって買い物でした・

rails sでWebpacker configuration file not found

令和になってこれやってるワロタ😇
railsguides.jp

Rails6でrails sすると

Webpacker configuration file not found .. etc

Webpackerってなんやねんって思ったらwebpack関連のやつ

でこれ

rails webpacker:install

yarn入れてない人はこれがでる

Yarn not installed.  etc.

yarnいれて再度実行

brew install yarn
rails webpacker:install

で起動

rails s

素直にwebpack使わせてくれればいいのに。。

NuxtJSでloglevelを扱う

nodeのロガーはfsに依存しているものが多く、
クライアントで気軽に使えるのが少ない（Winston 、Bunyan、log4js-node全部だめ）
loglevelはなんでも行けるマンなのでこちらをNuxtJSで使う。

github.com

plugins/logger.js

/**
 * ref. https://github.com/pimterry/loglevel
 */
import Vue from 'vue'
import * as log from 'loglevel'

// 必要であれば log.noConflict();
log.setLevel('trace')
Vue.prototype.$log = log

nuxt.config.js

  plugins: [
    ... 
    { src: '~/plugins/logger.js', ssr: false },
  ],

this.$log.error(e)