SHOYAN BLOGを0円でSSL対応しました

こんにちは、SHOYANです。

SHOYAN BLOGを0円でSSL対応しました。
というのも、SHOYAN BLOGをホスティングしているロリポップ！が無料SSL証明書の取り扱いを開始したからです。

2017/07/11 無料の独自SSLがご利用いただけるようになりました！

しかも、HTTP/2という通信速度を速くするテクノロジー(httpsプロトコルでしか使えない)を使っており、httpsにしたことで体感的にも速くなったように感じます。

2017/04/11 次世代通信プロトコル「HTTP/2」に対応しました！

SSLはSEOの観点でもメリットがあるので、これはもう導入するしかないということで、ささっとSSL対応しました。

SSLの導入方法

SSLの導入は簡単です。
コントロールパネルのSSLの設定画面でドメインを選択するだけです。

リアルタイムアクセス

数分経つとhttpsでアクセスできるようになります。
httpのサイトはそのまま使えるので何もデメリットはありません。

ロリポップ！がコスパ最強のレンタルサーバー

レンタルサーバーは色々ありますが、無料SSL証明書の導入でコストパフォーマンスではロリポップ！が圧倒的になりました。
有料のSSL証明書を購入すると年間20,000円ほどかかりますからね。。

私はライトプランを使っているので月額250円ほどで複数サイトを運営しています。
この金額でSSLやらワードプレスを運用できるのですから、趣味でサイトを運営するならレンタルサーバーはロリポップ！以外は考えられないなーという感じです。

安定性も問題ない

安いから安定性が心配という人もいるかと思いますが、全然問題ないと思っています。
はてなブックマークのホットエントリーに掲載された時はそれなりのアクセス数がありましたが、全然捌けていたので。

アクセスが多かった時のGoogle Analyticsのリアルタイムアクセス数のキャプチャです。

リアルタイムアクセス

キャンペーン中のお申し込みがお得

通常、初期費用(1,500円)がかかるのですが、時々キャンペーンをやっていて初期費用が半額や無料になります。
いまなら7/20まで初期費用が無料なのでこの機会に申し込んでおくと実質5ヶ月分のお得です。

WEB+DB PRESS Vol.99に寄稿しました

こんにちは、SHOYANです。

2017年6月24日に発売されたWEB+DB PRESS Vol.99に寄稿させていただきました。

wdpress99.jpg

テーマについて

テーマは「良いコードってなんだろう？」です。

自分が何となく考えている良いコードを文章にするのは思っていた以上に難しいテーマでした。それでも、自分なりに良いコードとはこういうものではないかということを明文化できたのは非常にいい経験になりました。良いコードに対しての考え方は様々であるのは当然だと考えていて、今回の記事もその考えの1つだと思って読んでいただけるとよいかと思います。

目次

［Rubyで学ぶ！］良いコードって何だろう？
現場で光る 変数，メソッド，クラス，モジュール活用法

  • 第1章：良いコードを書く理由
    • 10年利用されるソフトウェアに必要なこと ……髙橋 健一，谷口 禎英
  • 第2章：変数，定数，メソッド
    • 意図を伝える書き方，名前の付け方……井本 大登，山崎 勝平
  • 第3章：クラス
    • 責務の分割，デザインパターンの活用……山崎 勝平，大和田 純
  • 第4章：モジュール
    • 理解しやすい形で振る舞いを共有する……内村 元樹
  • 第5章：チーム開発でのテクニック
    • コードレビュー，開発の指針，アーキテクチャ……坂東 昌哉

執筆について

執筆は東京と福岡の2拠点で行いました。そちらについては次のブログで紹介しています。

まとめ

紹介した特集以外にも様々な興味深い記事が掲載されています。
私はwebpack、Rails5.1、チーム内の対立解消の記事が面白そうだな〜と思っています。
ぜひ、書店で手にとってご覧ください！

毎日技術ブログを書いたらアクセスは増えるの？

2017-03-08-main

こんにちは、SHOYANです。

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

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

結論

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

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

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

2017-03-08-01

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

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

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

2017-03-08-02

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

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

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

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

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

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

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

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

2017-03-08-02

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

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で拡散してもらいやすくする

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

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

2017-03-08-03

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

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

まとめ

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

Rubyのモジュールはあと勝ち

こんにちは、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

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 が出力されました。
予想通り、後から読み込まれたモジュールのメソッドで上書きされていました。

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

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

こんにちは、SHOYANです。

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

名前は AMP + Minima = AMinima です。

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

Minimaとは

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

どのように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です。

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

amp-analyticsを使う

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

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

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などでお気軽にご連絡ください！