テックブログに自動投稿システム導入してみた

はじめに

2020年1月にテックブログをリニューアルして以来、メンバーに記事を投稿してもらう度に記事のレビューや記事投稿を手作業で行ってきましたが、せっかくなので記事を自動投稿できるようにしたいと思います。

やること

記事のアップロード(下書き状態)
記事内の画像アップロード(フォトライフ)

をGitHubへのプルリクの作成時に起動するようにしたいと思います。

記事のアップロード(下書き状態)

はてなブログAPIのOAuth認証で記事をアップロードしたいと思います。まずOAuth認証のアクセストークンを発行するためにConsumer KeyとConsumer Secretを取得します。 Consumer KeyとConsumer Secretを利用してAccess Tokenを取得するコードは以下となります。

require 'oauth'
require 'mechanize'

class HatenaAPI
  def initialize
    @consumer = OAuth::Consumer.new(
      ENV['CONSUMER_KEY'],
      ENV['CONSUMER_SECRET'],
      site: 'https://www.hatena.com',
      request_token_url: '/oauth/initiate?scope=read_public%2Cread_private%2Cwrite_public%2Cwrite_private',
      access_token_url: '/oauth/token',
      oauth_callback: 'oob',
      timeout: 300
    )
    @agent = Mechanize.new
  end

  def oauth_authorize
    request_token =  @consumer.get_request_token
    oauth_verifier = ''
    page = @agent.get(request_token.authorize_url)
    form = page.forms[0]
    form.field_with(name: 'name').value = ENV['USER_NAME']
    form.field_with(name: 'password').value = ENV['PASSWORD']
    @agent.submit(form)
    page = @agent.get(request_token.authorize_url)
    form = page.forms[1]
    page = @agent.submit(form)
    oauth_verifier = page.css('div.verifier').text
    @consumer.options.delete(:oauth_callback)
    request_token.get_access_token(oauth_verifier: oauth_verifier)
  end
end

hatena = HatenaAPI.new
access_token = hatena.oauth_authorize
puts "AccessToken: #{access_token[:oauth_token]}"
puts "AccessTokenSecret: #{access_token[:oauth_token_secret]}"

Consumer KeyとConsumer Secret、ユーザ名とパスワードを環境変数として定義しておくとAccess Tokenを取得することができます。

続いて、Access Tokenを利用して記事の投稿を行います。

class HatenaAPI
  attr_reader :header, :hatena_blog, :photolife
  class << self
    def generate_access_token(site)
      consumer = OAuth::Consumer.new(
        ENV['CONSUMER_KEY'],
        ENV['CONSUMER_SECRET'],
        site: site,
        timeout: 300
      )

      OAuth::AccessToken.new(
        consumer,
        ENV['ACCESS_TOKEN'],
        ENV['ACCESS_TOKEN_SECRET']
      )
    end
  end

  def initialize
    @hatena_blog = HatenaAPI.generate_access_token('http://blog.hatena.ne.jp')
    @photolife = HatenaAPI.generate_access_token('http://f.hatena.ne.jp')

    @header = { 'Accept' => 'application/xml', "Content-Type" => "application/xml" }
  end

  def upload_article(file_path)
    body = File.read(file_path)
    @hatena_blog.request(:post, "https://blog.hatena.ne.jp/#{ENV['USER_NAME']}/#{ENV['BLOG_ID']}/atom/entry", Oga.parse_xml(body).to_xml, @header)
  end
end

hatena = HatenaAPI.new
hatena.upload_article('article.xml')

また、アップロードする記事はxmlである必要があるため、以下のテンプレートに記事内容やタイトルを置き換えてアップロードします。

<?xml version="1.0" encoding="utf-8"?>
<entry xmlns="http://www.w3.org/2005/Atom"
       xmlns:app="http://www.w3.org/2007/app">
  <title>{{title}}</title>
  <author><name>{{author}}</name></author>
  <content type="text/x-markdown">
{{content}}
  </content>
  <updated>{{time}}</updated>
  <app:control>
    <app:draft>yes</app:draft>
  </app:control>
</entry>

title: 記事のタイトル
author: 執筆者のはてなID
content: 記事内容
time: 投稿時刻となっています。また、 <app:draft>yes</app:draft> とすることで下書きとしてアップロードしてくれます。

記事内の画像アップロード(フォトライフ)

最後に、画像のアップロードですがこちらも記事とほぼ同様の手順でアップロードすることができます。

@photolife.request(:post, '/atom/post', body, @header).body)

また、画像アップロードようのxmlのテンプレートは以下となります。

<entry xmlns="http://purl.org/atom/ns#">
  <title>{{title}}</title>
  <content mode="base64" type="{{mime_type}}">{{content}}</content>
  <dc:subject>{{dirname}}</dc:subject>
</entry>

title: 画像のタイトル
mime_type: 画像のmimeタイプ
content: 画像をBase64エンコードしたもの
dirname: フォトライフのアップロードするディレクトリ(Hatena Blog等)