2017/04/14 (更新日: 2017/04/14)

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

こんにちは、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はインラインで定義しないといけないのでインラインで定義します。

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

次にAMP boilerplateを定義します。

<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を編集します。

以下のように書き換える

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

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

1	theme: aminima

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

$ bundle

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

1	$ jekyll server

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

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

2017/03/06 (更新日: 2017/03/06)

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

こんにちは、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であれば以下で同様のことができるようです。

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を使いたい場合は、どのように回避すればいいんでしょうか。。。

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

2017/02/25 (更新日: 2017/02/25)

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

Twitter_Logo

Twitterカードとは

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

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

introduce_twitter_card_01

Twitterカードの設定

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

タグを設定する

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

Sample Code

<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カードのメタタグのプロパティは以下となります。

プロパティ	必須	説明
twitter:card	Yes	twitterカードの種類を設定します
twitter:site	No	twitterの@usernameを設定します
twitter:title	Yes	記事のタイトルを設定します
twitter: description	Yes	記事の説明を設定します
twitter:image	No	画像を設定します。サイズは横幅280px以上 × 縦幅150px以上です。サイズは1MB以下でないといけません。

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

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

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

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

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

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

introduce_twitter_card_02

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

Twitterカードの種類

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

Summary Card
Summary Card with Large Image
App Card
Player Card

Summary Card

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

summary_card_example

Summary Card with Large Image

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

summary_card_with_large_image_example

App Card

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

app_card_example

Player Card

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

player_card_example

おわりに

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

2017/01/13 (更新日: 2017/01/13)

Rails5からbelongs_toアソシエーションの挙動が変わった

Rails5から belogs_to アソシエーションの挙動が変わった。

親モデルに属している子モデルは親モデルの外部キーが存在しないとバリデーションエラーになるのがデフォルトの挙動となっている。
参照先レコードのidをnullで登録しようとした場合は以下のようなバリデーションエラーが出る。

1	ActiveRecord::RecordInvalid: Validation failed: Post must exist

DHHの一声で belogs_to の挙動が変わる様が垣間見れるイシュー。

https://github.com/rails/rails/issues/18233

DHHの言い分としては「普通 belongs_to って、参照先テーブルのIDは必ずもってるだろ。ならデフォルト required: true でよくね？」という話。

この挙動をRails4と同じにしたい場合は optional: true を使う(required: false は廃止予定なので使わないほうがいい)。


class Post < ApplicationRecord
  belongs_to :article , optional: true
end

belongs_to のオプションの詳細については以下のドキュメントで参照できる。

http://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html#method-i-belongs_to

2017/01/10 (更新日: 2017/01/10)

4億円調達したゼロアグリと農業の未来

Iotの技術を使ったゼロアグリを開発しているルートレック・ネットワークスが4億円の資金調達をした。
ゼロアグリは農作物の水や肥料の管理を独自のアルゴリズムとIoTの技術を使って機械化する取り組みを行っている。

http://jp.techcrunch.com/2016/12/26/zero-agri-raises-400m-yen/

私は農業とIoTの分野に大きな可能性を感じておりウォッチしているのだが、ゼロアグリのように進めているところはしっかり進めているように感じる。
まだまだ開発段階のものが多いが10年後には実用化レベルに達するものが結構出てくると思っており、新しい農業の形が形成されていくのではと思う。

ゼロアグリの佐々木氏は「農場に関するデータを可視化するものだけだと農家に受け入れられなかった」と語っているが、まさにその通りだと思う。
農業は数値ではなく感覚で判断するものだと思う。
そこにいきなり数値が出てきても受け入れられるのはなかなか難しいだろう。

私は家庭菜園をしているが、土がよければ放っておいても野菜は育つ。
そういうものだから、土の水分や養分をモニタリングしてもあまり意味がない。

じゃあ、何が必要かというと、目の前の農家が困っていることを解決出来る仕組みだと思う。
その問題を解決するにあたってどうしても物理的に制御が必要なものが出てくるはずだ。
IoTの技術の進化でその技術を多くの人が使えるようになってきている。
実際に困っていることを解決するためのものをそこらの人が作る。
そういうことができる時代がやってきていることに可能性を感じる。

私の友人は農家をやっているが、有機農法なので除草に手間がかかっているようだ。
その除草の手間をIoTの技術を使って軽減できないだろうかと考える(いいアイデアはない)。
また配達が手間のようなので、配達の手間を省けるような仕組みを考えるといいかもしれない。
例えばドローンを使って郵送するとか。
実際やろうとしたらものすごく大変そうだけど(野菜って重いんですよね)。