こんにちは、SHOYANです。

SHOYAN BLOGでは平日毎日更新を目標としてWeb技術に特化した記事を書いていました。
その期間は2016年4月13日〜2016年12月31日です(後半はモチベーションが保てず、週1回程度の更新となっていましたが・・・)。

毎日更新することでブログのアクセス数はどうなったかということをまとめました。

結論

結論ファーストです。結論として毎日記事を公開しても、思ったよりもアクセス数は伸びませんでした。その理由とアクセスを増やすために有効であろう手法をまとめました。

100記事書いた後と前のアクセス数の比較

下のグラフは2017年1月1日〜2017年2月1日(青線)と1年前(オレンジ線)のセッションの比較です。

記事数が増えたことによりセッションは171%増加しました。なるほど、記事を増やせばアクセスを増やすことができるのかと思われるはずです。しかし、この結果から記事数を増やせばアクセス数は増えると結論づけるのは時期尚早です。

アクセス数の伸び悩み現象

下に表示しているのは直近1年のグラフです。グラフを見てもらえばわかる通り、アクセス数の伸び悩みが顕著です。

記事数は増えているのになぜでしょうか。

検索されるキーワードで記事を書かなければアクセスは増えない

私のブログは検索エンジンとSNSからの流入がほとんどです。そのうち、アクセス数のベースとなっているのは検索エンジンからの流入です。

検索エンジンからの流入はみなさんが検索エンジンで検索して検索結果に表示され、そのリンクをクリックしていただかない限りは発生しません。ですので、検索結果の上位に表示されない、もしくは、そもそも検索されない記事を書いてもアクセスは増えません。

私のブログですが、118記事のうち32記事は流入がまったくありません。4分の1の記事にまったくアクセスがないという状態です。

次に私が実践から学んだSEOの知見を紹介します。

独自ドメインはキーワードに関係のある名前でないと効果がない

独自ドメインはSEOに有利と言われていますが、効果はありませんでした。最初はgithub.ioのサブドメイン、shoyan.github.ioで運営していましたが、2016年11月29日に独自ドメイン 48n.jp を設定しました。グラフを見ればわかる通り、アクセスは変わっていません。キーワードに関係のある独自ドメインでないと効果がないと思われます。

ドメインを変更しても適切にリダイレクトの設定を行えばアクセスは減少しない

2016年11月29日に独自ドメイン 48n.jp を設定しました。以前のドメインにアクセスした場合は301リダイレクトするように設定していたのでアクセスの減少は見られませんでした。適切にリダイレクト設定を行うことでアクセスの減少を防ぐことができます。

有名なサイトのサブドメインかどうかは検索順位に関係ない

有名なサイトのサブドメインが有利という説があります。例えば私の使っていたgithub.ioドメインは世界中のIT技術者から利用されています。この事実からgithub.ioドメインはIT技術のSEOに強いといった考え方ができるでしょう。

しかし、私は関係ないと考えています。というのも、github.ioドメインとはいえ、いいサイトもしょぼいサイトもあります。中には不正をしているサイトもあることでしょう。

はたしてGoogleはそのようなサイトを全部ひっくるめて良いサイトと判断するでしょうか。テック系のサイトであろうという判断くらいはするかもしれません。しかし、あとはコンテンツ次第。あくまでもコンテンツでサイトは評価されるはずです。

実際にどこの馬の骨ともわからない(Googleからみたら)独自ドメインにしてみましたが、それによるアクセスの減少はありませんでした。

技術ブログでアクセスを集めるには

最後に技術ブログでアクセスを集めるために有効ではないかと考えていることを紹介します。

キーワードを意識してコンテンツを作る

私はこの基本ができていなかったために誰からも人に読まれない記事をせっせと量産していました。

以下の2つは押さえておきたいポイントです。

• 検索されそうなキーワードを選定すること
• タイトルにキーワードを含めること

キーワードの検索ボリュームはGoogleが提供しているキーワードプランナーで確認できます。またKeyword Toolでどんなキーワードが検索されているかを確認することができます。

この2つのツールを使って検索されているキーワードを確認して、そのキーワードをタイトルに含めてください。

良質なコンテンツを作る

良質なコンテンツを作ることがアクセスを集める大前提であることに異論がある人は少ないでしょう。有益な情報を継続して発信することで読者が増えていくのは自然なことです。私はSlackのRSSインテグレーションを使って面白いと思ったブログを購読しています。

購読してもらえる仕組みを用意する

ブログを購読してもらえる仕組みを用意しましょう。はてなブログであれば購読機能がついていますし、RSSのリンクを設置することでRSSリーダーに登録してもらいやすくなります。ブログを作成するサービスやツールにはRSSの機能が備わっているので、それを使うとよいでしょう。

SNSで拡散してもらいやすくする

良質なコンテンツを書いてバズるとアクセスが爆発的に増えます。技術系のブログだとはてなブックマークのホットエントリーに掲載されることで結構なアクセスを稼ぐことができます。

はてなブックマークに掲載された時のアクセスです。

1日で私のブログの2ヶ月分くらいのアクセスを叩き出しています。また、外部リンクを得ることができるのでサイトの評価にも良い影響があると思われます。ちなみに2件ブクマしてもらえると、はてなブックマークの新着に掲載されるとのことです。セルフブクマ(自分自身でのブクマ)もカウントされるので、実質誰か1人にブクマしてもらえばいいわけです。

はてなブックマークとTwitterのSNSボタンは用意しておきましょう。Twitterカードも設定しておくとよいと思います。設定方法をまとめているので参考にしてください。

• Twitterカードをサイトに設定する手順

まとめ

技術ブログを2年ほど書いてきましたが、単純に記事を書けばアクセスが増えるわけではないのでなかなか難しいですね。あまりアクセスにこだわることなく記事の内容にこだわったほうが良いように思っているこの頃です。とはいえ、この記事に書いていることはアクセスアップにそれなりの効果があるはずなので参考にしてみてください。

こんにちは、SHOYANです。

今回はRubyのモジュールについての話しです。
結論ファーストです。Rubyのモジュールはあと勝ちということを知りました。

もう少し正確に言うと、異なるモジュールに同じ名前のメソッドが定義してあった場合、後にinclude されたメソッドで上書きされます。
この知見はActiveRecordのソースコードを読んでいて知りました。

ActiveRecord::Validationsモジュールのソースコードを読んでいて、ActiveRecord::Validationsモジュールにsaveメソッドがあるのが気になりました。
というのも、saveメソッドはActiveRecord::Persistentモジュールにも定義してあるからです。

ActiveRecord::ValidationsモジュールのAPIのドキュメントによると、以下のように書いてあります。

The regular ActiveRecord::Base#save method is replaced with this when the validations module is mixed in, which it is by default.

訳: 通常、ActiveRecord::Base#メソッドはバリデーションモジュールが混在している場合にはこれと置き換えられます。これはデフォルトです。

ここでActiveRecordの仕組みについて少し説明しておくと、ActiveRecord::Baseというクラスがあり、そのクラスで各モジュールをincludeしています。

2017年5月現在では、以下のようにincludeされています。

1
2
3
4
5
6
7
8
9

module ActiveRecord
  class Base
    include 様々なモジュール
    include Persistence
    include 様々なモジュール
    include Validations
    include 様々なモジュール
  end
end

• https://github.com/rails/rails/blob/master/activerecord/lib/active_record/base.rb

ActiveRecord::Persistenceの後にActiveRecord::Validationsモジュールがincludeされています。
どうやら後にincludeされたモジュールのメソッドで上書きされているようです。

ここでサンプルコードを使って確かめてみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module Hoge
  def name
    'hoge'
  end
end

module Moge
  def name
    'moge'
  end
end

class Man
  include Hoge
  include Moge
end

man = Man.new
p man.name

実行してみると、moge が出力されました。
予想通り、後から読み込まれたモジュールのメソッドで上書きされていました。

メソッド名が重複するということは普通にありそうなので、この挙動については知っておいたほうがいいかもしれませんね。

こんにちは、SHOYANです。

JekyllテーマのminimaをAMP対応しました。

• https://github.com/shoyan/aminima

名前は AMP + Minima = AMinima です。

デモサイトも用意していてこちらで確認できます。

• https://shoyan.github.io/aminima/

Minimaとは

MinimaはJekyllのテーマです。
jekyll new で作成した場合にデフォルトでインストールされるテーマです。
URLはこちらです。

• https://github.com/jekyll/minima

どのようにAMP対応したのか

どのようにAMP対応をしたのかを説明します。
わりとあっさりできました。

まず、ampを宣言します。

1

<html amp>

そして、charsetを定義します。

1

<meta charset="utf-8">

次にampランタイムをロードします。

1

<script async src="https://cdn.ampproject.org/v0.js"></script>

また、AMPはcanonicalの宣言が必要なので定義します。

1

<link rel="canonical" href="https://shoyan.github.io/aminima/2016/05/20/welcome-to-jekyll.html">

CSSはインラインで定義しないといけないのでインラインで定義します。

1
2
3
4
5

<style amp-custom
  h1 {
    color: red;
  }
</style

次にAMP boilerplateを定義します。

1

<style amp-boilerplatebody{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style<noscript<style amp-boilerplatebody{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style</noscript

これでAMPの基本設定はOKです。

実際のコードはリポジトリを参照してみてください。

• https://github.com/shoyan/aminima/blob/master/_includes/head.html

amp-analyticsを使う

通常のAnalyticsのタグはAMPでは動かないのでamp-analyticsを使います。
amp-analyticsはAMP用に用意されたコンポーネントです。

• https://ampbyexample.com/components/amp-analytics/

テーマのソースコードはこの辺りです。

• https://github.com/shoyan/aminima/blob/master/_includes/google-analytics.html

Aminimaのインストール方法

Jekyllをインストールしていない場合はjekyllをインストールしてください。

1

$ gem install jekyll

ブログを作成します。

1

$ jekyll new blog

Gemfileを編集します。

1
2
3
4
5

以下のように書き換える

gem "minima", "~> 2.0"
↓
gem "aminima"

_config.yml のthemeを編集します。

1

theme: aminima

bundleコマンドを実行します。

1

$ bundle

サーバーを立ち上げます。

1

$ jekyll server

ブラウザで http://localhost:4000 にアクセスすればサイトが表示されます。

動かない部分や不明な点はコメント欄やTwitterなどでお気軽にご連絡ください！

こんにちは、SHOYANです。

Railsには様々な予約語がありますが、歴史の長いシステムを扱っているとDBのカラムがその予約語に該当する場合があります。
例えば classというカラム名があった場合、そのカラムの影響で以下のエラーが発生します。

1
2

pry(main)> User.all.first
NoMethodError: undefined method `fetch_value' for nil:NilClass

これを回避する方法の1つがDBのカラム名の変更です。
しかし、DBのカラム名の変更は様々な影響が考えられるため簡単に変更できない場合があります。

その場合はアプリケーション側で回避します。

Rails5のignored_columnsで予約語のエラーを回避する

Rails5で追加された ignored_columns を使えばこのカラム自体が無視されるようになり、エラーを回避できます。

1
2
3

class User < ApplicationRecord
  self.ignored_columns = %w(class)
end

Rails4であれば以下で同様のことができるようです。

1
2
3
4
5
6
7

class User < ActiveRecord::Base

  def self.columns
    super.reject {|column| column.name == 'class'}
  end

end

ignored_columnsで防げないパターン

ただし、ignored_columns でも完全に防げない場合があります。

to_json メソッドでエラーが発生します。

1
2

pry(main)> User.all.to_json
SystemStackError: stack level too deep

この場合は、except オプションで回避できます。

1

User.all.to_json(except: [:class])

今回の場合は、classカラム自体が不要だったので ignore_columns で対応しました。
classを使いたい場合は、どのように回避すればいいんでしょうか。。。

どなたか知っている人がいれば情報をいただきたいです。

Twitterカードとは

Twitterカードはタイムラインに表示される情報をカスタマイズできる機能です。
Twitterカードを設定することでタイムラインに表示される情報をよりリッチなものにすることができます。
現在はSNSにより拡散されることも多いため、Twitterカードの設定をしておくとより多くの人の目にとまるようになり、記事への流入が期待できます。

Twitterカードを設定すると以下のようになります。

Twitterカードの設定

Twitterカードの設定手順を紹介します。

タグを設定する

Twitterカードのを利用するためにはメタタグの設置が必要です。
以下は30歳から始める数学に設定しているTwitterカードのサンプルコードです。

Sample Code

1
2
3
4
5

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@sinn_shoyan" />
<meta name="twitter:title" content="30歳から始める数学" />
<meta name="twitter:description" content="とあることから、30歳にして数学を学び始めました。いまは毎日楽しく数学の書籍を読んだり方程式を解いたりしています。本記事では、僕と同じようにもう一度数学を学びたいなと思っている人向けに、数学の魅力を再発見する方法を紹介します。" />
<meta name="twitter:image" content="http://48n.jp/images/math-1547018_640.jpg" />

Twitterカードのメタタグのプロパティは以下となります。

他にも設定できるオプションがありますが長くなるのでここでは割愛します。
詳しくはドキュメントを参照してください。

• https://dev.twitter.com/cards/markup

Twitterが提供しているCard Validatorで申請を行う

Twitterカードを有効にするにはTwitterが提供しているCard Validatorで申請を行う必要があります。
こちらの作業は1度行えば今後は必要ありません。

• https://cards-dev.twitter.com/validator

テキストフォームに確認したいページのURLを入力します。
エラーがなければ以下のように表示され、Twitterカードが有効になります。

一度認証が成功するとそのドメインでTwitterカードの利用が有効となります(サブドメインも含む)。

Twitterカードの種類

最後にTwitterカードの種類を紹介します。
仕様変更が行われたようで、現在は以下の4つのTwitterカードが利用できます。

• Summary Card
• Summary Card with Large Image
• App Card
• Player Card

Summary Card

URLの概要をまとめて表示してくれるTwitterカードです。

Summary Card with Large Image

Summary Cardとほとんど同じですが、画像がより大きなサイズで表示されます。

App Card

モバイルのアプリを紹介するためのTwitterカードです。ダウンロードリンクも表示されます。

Player Card

ツイートに動画、オーディオを埋め込めるTwitterカードです。

おわりに

以上がTwitterカードの導入に関する説明となります。
Twitterカードについての詳しい情報は公式ドキュメントをご覧ください。
また、Twitterカードの設置に関して疑問点などあれば、ブログのコメント欄やTwitterでお気軽にご連絡ください。