読者です 読者をやめる 読者になる 読者になる

wordpressをherokuで無料&簡単に始められないかなと思ったらほんとに出来た

はじめに

  • herokuアカウント(addonを使う場合はクレカ登録も)
  • 最低限のgitの知識 (なくても真似するだけで大丈夫ですがあるとよい。)

があればとりあえずできます。

手順

以下のサイトを通りにやってみたら、3分くらいでできました。びっくり。demo

blog.handswiz: 言語切り替え機能をつけたwordpressをherokuで動かす

紹介されているgistはこちら。MySQL版です。

試していませんがpostgreSQL版も書いてくださっています。マジ感謝です。

happtech: 日本語環境のwordpressをherokuで動かす方法

postgreSQL? MySQL?

じゃあ実際にやろうとなったとき、DBどうするの?と思った方もいると思います。

herokuでは無料の範囲だと容量の制限に違いがあり、

となっています。

さくらの共有サーバーでデーターベースはどれぐらいの容量まで使えて、WordPressだと何記事分なのか? | 9ineBB

を見ると、5Mだとだいたい記事250個分らしいので

までは記事を書いても無料ということになりそうです。

MySQLだときつかなと思いましたが、週1できっちり書いても一年で50記事程度ですから、とりあえず始めるならMySQLでも大丈夫そう。

【注意点1】プラグインとテーマはgitから追加する必要あり

herokuではdynoの再起動時にgit管理下にないものは消えてしまうので、プラグインやテーマがサイトから追加できないのが一つネックです。

ですが慣れれば簡単で、プラグイン、テーマはほぼzipでDLすることもできるので、

  1. plugin, themeをzipでDL&解凍
  2. wp-content/plugins, wp-content/themesにそれぞれフォルダごと配置
  3. git add & git commit
  4. herokuにデプロイ

とすればOK.

参考: 月10円!HerokuでWordpressを運用!! - のっぴきならない昨今です

【注意点2】画像は外部ストレージを利用する必要あり

こちらも注意点1と同じ理由で、再起動時に変更点は消えてしまうので、画像もgit管理されていないとなくなってしまいます。

でもそこは外部ストレージを使えばOK。そこでの選択肢はとりあえず2つありました。

それぞれの詳細な設定方法は以下を参照:

どちらもwordpress用のプラグインもあるので、wordpressの編集画面から使えます。

選択基準としては、楽なのはCloudinary、長くほぼ無料で使いたいならS3でしょうか。

Cloudinaryはsignupして、wpのプラグイン入れて、API_KEY入れればすぐ使えます。

S3は慣れてない人だとセットアップ作業がわりとあります。もちろんサイトで説明してくれているので迷わずできると思います。

Cloudinaryは編集機能もついているのでそのあたりも便利そうですね。

herokuの料金についてサクッと確認

herokuは価格がシンプルなようでわかりにくい?ので以下で確認しましょう。

Heroku | Pricing

Heroku で無料・有料でできること - 君の瞳はまるでルビー - Ruby 関連まとめサイト

まとめ

  • メリット
    • とうぶん無料で使える
    • セットアップが簡単ですぐ始められる
  • メリット
    • プラグイン、テーマ管理はgitで
    • 画像は外部ストレージを利用しなければいけない

といった感じでしょうか。デメリットも一旦準備してしまえばほぼ問題ないかなーと思いました。レンタルサーバでやると、面倒な登録作業もわりとあって安くても500円〜かかるので、どっちもやった印象だとherokuはけっこうオススメです。

SassのMixin&includeとExtend

Sassからは完全に離れられなくなっているけれど、なにげなく使っているMixinやextend. ここでいったん整理しておくとする。

mixin & include

共通の関数のようなもの。引数も定義でき、抽象化してDRYにかけるようになる。

@mixin box_shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

import 'pathtomixin';
.button {
    @include box_shadow(100px);
}

extend

継承。既存のcssを拡張して使える。

.text {
    font-size: 12px;
}
.title {
    @extend .text;
    font-weight: bold;
}

includeとextendの違い

なぜ @kotarok さんは mixin より extend を推すのか

名前のとおりだが、includeは複製をつくる, extendは継承して使うということで、どっちでもできる場合もあるが、まずひとつ、outputが明確に違う。

あとmixin&includeは変数が使える。

最近あったミス

extendはあくまで同ファイル上に展開されたものを継承するものなので、railsの場合、assetspiplineで同一ファイルにされるからといって、他のファイルにあるものをextendしようとしてもできません。 わかっちゃえば当たり前だけど最初は気づきにくかったので。

なのでclearfixとかbuttonとかはextendでなく共通のmixinに入れて、必要なファイルでimportしておく感じにしましょう。

Flickr APIで著作権フリーの画像を取得

Flickr API Documentation

まずはFlickrAPIについてお勉強。

Flickr Service

ドキュメントめちゃ充実してるので必ず確認。

Flickraw Documentation

rubyのgemはいくつかあるが一番メジャーなflickrawを使う。

RDoc Documentation

こちらも各メソッドごとに詳細なドキュメントがあるので便利。

Setup手順

  1. accounts作成
  2. api keyを作成
  3. Authentication
    • 下記参照。access_token/access_secretを取得。 これでひと通りの準備は完了。

Authentication

アカウントを作って、api keyを手に入れたら、認証を行います。access_token/access_secret取得のためです。 このまま使わずkey/secretを入れてくださいね。

require 'flickraw'
FlickRaw.api_key="-- api key --"
FlickRaw.shared_secret="-- secret --"

token = flickr.get_request_token
auth_url = flickr.get_authorize_url(token['oauth_token'], :perms => 'delete')
puts "Open this url in your process to complete the authication process : #{auth_url}"
puts "Copy here the number given when you complete the process."
verify = gets.strip

begin
  flickr.get_access_token(token['oauth_token'], token['oauth_token_secret'], verify)
  login = flickr.test.login
  puts "You are now authenticated as #{login.username} with token #{flickr.access_token} and secret #{flickr.access_secret}"
rescue FlickRaw::FailedResponse => e
  puts "Authentication failed : #{e.msg}"
end

これを実行すると

Open this url in your process to complete the authication process : http://www.flickr.com/services/oauth/authorize?oauth_token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&perms=delete
Copy here the number given when you complete the process.

って言われるのでurlをブラウザで開く。そうすると番号(xxx-xxx-xxx)が出てくるのでそれをターミナルに貼ると

You are now authenticated as dev_grood with token XXXXXXXXXXXXXX-XXXXXXXXX and secret XXXXXXXXXXXXXX

そうすると無事に access_tokenとaccess_secretをゲット。 authenticationについての詳しい内容はこちら

railsでの使用例

flickrawをgemfileに追加&bundle installしたら、

  def flickr_search(word)
    FlickRaw.api_key       = Settings.flickr_api_key
    FlickRaw.shared_secret = Settings.flickr_shared_secret
    flickr.access_token    = Settings.flickr_access_token
    flickr.access_secret   = Settings.flickr_access_secret
    flickr.test.login
    @photos = flickr.photos.search(text: word, license:"1,2,3,4,5,6")
  end

photosの中身は、

[
{"id"=>"4468814441", "owner"=>"10519936@N07", "secret"=>"65580f2645", "server"=>"2752", "farm"=>3, "title"=>"China_12-10-07_273.jpg", "ispublic"=>1, "isfriend"=>0, "isfamily"=>0}, 
{"id"=>"3930972474", "owner"=>"29925020@N03", "secret"=>"35b2474f29", "server"=>"3446", "farm"=>4, "title"=>"China Backpacking Trip", "ispublic"=>1, "isfriend"=>0, "isfamily"=>0}, 
・・・
]

こんな感じのものがかえってきます。

Flickrは画像のURLがここではかえってこず、パラメータを組み合わせてURLを作ってあげる必要があるのがちょっと面倒。なので

- @photos.each do |photo|
    - url = "http://farm#{photo.farm}.static.flickr.com/#{photo.server}/#{photo.id}_#{photo.secret}_m.jpg"
    = image_tag(url)

viewでこんな感じにurlを作ってimage_tag(url)として表示。できたー。

CC = Creative Commonsについて

flickrには写真ごとにライセンスがあって、ブログなどで使う場合には、それを正しく確認しておかないといけません。

{"id"=>"0", "name"=>"All Rights Reserved", "url"=>""}
{"id"=>"1", "name"=>"Attribution-NonCommercial-ShareAlike License", "url"=>"http://creativecommons.org/licenses/by-nc-sa/2.0/"}
{"id"=>"2", "name"=>"Attribution-NonCommercial License", "url"=>"http://creativecommons.org/licenses/by-nc/2.0/"}
{"id"=>"3", "name"=>"Attribution-NonCommercial-NoDerivs License", "url"=>"http://creativecommons.org/licenses/by-nc-nd/2.0/"}
{"id"=>"4", "name"=>"Attribution License", "url"=>"http://creativecommons.org/licenses/by/2.0/"}
{"id"=>"5", "name"=>"Attribution-ShareAlike License", "url"=>"http://creativecommons.org/licenses/by-sa/2.0/"}
{"id"=>"6", "name"=>"Attribution-NoDerivs License", "url"=>"http://creativecommons.org/licenses/by-nd/2.0/"}
{"id"=>"7", "name"=>"No known copyright restrictions", "url"=>"http://www.flickr.com/commons/usage/"}
{"id"=>"8", "name"=>"United States Government Work", "url"=>"http://www.usa.gov/copyright.shtml"}
 
↓見難いので整形
 
0. All Rights Reserved
1. Attribution-NonCommercial-ShareAlike License
2. Attribution-NonCommercial License
3. Attribution-NonCommercial-NoDerivs License
4. Attribution License
5. Attribution-ShareAlike License
6. Attribution-NoDerivs License
7. No known copyright restrictions
8. United States Government Work
 

商用の場合、4,5,6 商用でなければ、1,2,3,4,5,6

といったところがfreeで使える可能性のあるライセンスとなります。

区分けについて日本語ではこちらにいろいろ書いてあるのでご参考:

Flickrで著作権的に問題のない画像を見つけて公開する方法 - 涙目で仕事しないSE

参考

topranker.tvをつくった理由(企画編)

先日, topranker.tvをリリースしました。http://topranker.tv

世界のトッププレイヤーのバドミントン動画が簡単快適に見れる、動画まとめサイトです。

f:id:shmztkyk:20140309195720p:plain

せっかくなので企画の上で考えたことなどをまとめておきます。

なぜtopranker.tvを作ったのか。

僕自身バドミントンをもう14年くらいやっているんですが、スポーツの世界にはまだまだITで解決できることがたくさんあると思ったのがきっかけです。

その一つが動画で、”見る価値のある”バドミントンの動画を見つけて見るって今でも非常に難しいことです。

Youtubeのような動画メディアの普及によって、世界中には超一流選手の動画がどんどんアップされるようになり、またスマホタブレットの普及、通信速度の向上もあり、だれでもどこでも写真だけでなく動画が気軽に楽しめる環境になりつつあります。

でもそれにアクセスするには、一定以上の知識と、高いリテラシーがまだ必要で、youtubeで「badminton」と検索すれば動画は出ては来ますが、そのクオリティはばらばらで、それこそ一流選手名を知っていなければよい動画にアクセスできず、結果ほんの一部の人の目にしか触れていないように思います。

そんなことを思っていて、バドミントンが好きな人がだれでも手軽にどこでも、一流選手の動画を快適に見れるようにしようと思い、topranker.tvを作りました。

5年,10年変わらないニーズにフォーカスする

個人的なテーマとして、は普遍的、恒久的なニーズにフォーカスしたものを作っていきたいなというのがありました。

つくろうと思えばゲームやらソーシャルアプリやらツールやらいろいろな選択がありますが、その開発の時間をかけるだけの価値ある、長く多くの人に役に立つものをつくりたいなという思いがあり、1人の作り手としてそういったものをより多く自分の手でつくりたいなと思います。

バドミントンにかぎらず、スポーツのようにグローバルに愛されているコンテンツを、より簡単に誰にでも届くようにする、という一番ベーシックなものですが、やる価値はあるなぁと思いました。

自分がほしいものを作る

最後はシンプルで、僕が昔からあったらいいなーと思ったものを作りました。

さまざまなサービスの開発手法はありますが、結局コアユーザのインサイトを得ることが一番の肝であるとすると、やっぱり自分でほしいものを作るというのは, モチベーション的にもよいものを効率よく作るという点でも大事だなと思います。

実装編は別途

まぁそんなこんなでtopranker.tvをつくった理由(企画編)でした。

本当に作る価値のあるものを自分ごととして作り続けていく、というのはひとつのライフワークとして続け、アウトプットでお伝えしていければと思います。

バドミントン好きな方はお気軽に感想・要望など、こちらの twitter(https://twitter.com/takayuki_shmz )まで。

f:id:shmztkyk:20140309195726p:plain

さくらVPSのセキュリティ対策メモ

rootログインを禁止

rootを禁止

# vi /etc/ssh/sshd_config
PermitRootLogin no

sshを再起動

# service sshd restart

logwatchでレポートログを送る

設定ファイルを変更。

# sudo vim /usr/share/logwatch/default.conf/logwatch.conf
MailTo = hogehoge@gmail.com

iptablesの設定

# sudo vi /etc/sysconfig/iptables
*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
:RH-Firewall-1-INPUT - [0:0]

-A INPUT -j RH-Firewall-1-INPUT
-A FORWARD -j RH-Firewall-1-INPUT
-A RH-Firewall-1-INPUT -i lo -j ACCEPT
-A RH-Firewall-1-INPUT -p icmp --icmp-type any -j ACCEPT
-A RH-Firewall-1-INPUT -p 50 -j ACCEPT
-A RH-Firewall-1-INPUT -p 51 -j ACCEPT
-A RH-Firewall-1-INPUT -p udp --dport 5353 -d 224.0.0.251 -j ACCEPT
-A RH-Firewall-1-INPUT -p udp -m udp --dport 631 -j ACCEPT
-A RH-Firewall-1-INPUT -p tcp -m tcp --dport 631 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

# SSH (Please adjust SSH_PORT)
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport SSH_PORT -j ACCEPT

# HTTP, HTTPS
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 443 -j ACCEPT

-A RH-Firewall-1-INPUT -j REJECT --reject-with icmp-host-prohibited
COMMIT

再起動をして変更を反映

 sudo /etc/rc.d/init.d/iptables restart

デフォルトで起動にする。

sudo chkconfig iptables on

参考:http://morizyun.github.io/blog/iptable-sakura-vps-centos63/

今更git stashについて調べてみた

stashをメッセージ付きで残せるといいなと思いつつ調べていなかったので。

いつもの

git stash

これは

git stash save

と同義とのこと。

メッセージをつけて保存するには

簡単だった。笑

git stash save 'message'

保存したものを確認

$ git stash list
stash@{0}: On master: temporary save

って感じで見れる。

指定したstashを適用したいとき

適用&stashから削除。

git stash pop stash@{1}

適用&stashから削除しない

git stash apply stash@{1}

stashから削除だけする

あんまり使わなそうだけど

git stash drop stash@{1}

で、できる。

まぁ一旦これくらいで事足りそう。

もっと調べたい方はこちらがまとまっております

transitive.info - git stash 使い方

railsでメジャーな画像保存用のgemを使ってみる

imageの保存について

選択肢

pageclipの場合

基本READMEどおりだけど作業メモとして。

手順としては、インストールは飛ばすと

  1. モデルで設定を追記
  2. migrationを追加
  3. formを作成
  4. upload & done

といった感じ。

imageMagickが必須なので入れる。

brew install imagemagick

gemfileに追加

gem "paperclip", "~> 3.0"

modelはこんな感じに

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
  validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
end

migrationには以下を追加

add_attachment :users, :avatar

これはコマンドでもできるとのこと。

rails generate paperclip user avatar

formはこんな感じでOK。

<%= form_for @user, :url => users_path, :html => { :multipart => true } do |form| %>
  <%= form.file_field :avatar %>
<% end %>

multipartをtrueにすると、enctype="multipart/form-data" とformタグに追加されます。MIMEのマルチパートデータで送るということです。

MIMEのマルチパートデータとは

データをheaderとbodyの2つじゃなく、もっと複数にわけて送るよって仕様みたい。

で、表示はこんな感じ。

<%= image_tag @user.avatar.url %>
<%= image_tag @user.avatar.url(:medium) %>
<%= image_tag @user.avatar.url(:thumb) %>

carrierwaveの場合

gemfileにまずは追加

gem 'carrierwave'

generateコマンドをする.

rails generate uploader Avatar

するとapp/uploaders/avatar_uploader.rbのファイルができる。ここにいろいろとカスタマイズする内容を書くそう。

追加したいモデルにimage columnを追加

rails g migration add_image_to_users image:string

フォームはpageclipとほぼ同じで

<%= form_for @user, :html => {:multipart => true} do |f| %>  
  <p>  
    <%= f.file_field :image %>  
  </p>  
  <p><%= f.submit %></p>  
<% end %>  

multipartにして、uploadフォームを用意してpostすればOK.

S3を使う場合

ここ見とく。

RailsとCarrierWaveでAmazon S3に画像を保存する | Workabroad.jp

関連して

carrierwaveを使うとき、単純にmountするんじゃなく、imageクラスをつくって、ポリモーフィック関連をつくることがあります。

【Rails】ActiveRecord:単一テーブル継承(sti)とポリモーフィック関連を未だにぱっと思い出せないのでまとめ。 - 記すに足らず。

例えばParentA,ParentBクラスが画像をもつ場合はこんな感じ。

class ParentA < ActiveRecord::Base
  has_many :images, :as => :imageable
end

class ParentB < ActiveRecord::Base
  has_many :images, :as => :imageable
end

class Image < ActiveRecord::Base
  belongs_to :imageable, :polymorphic => true
  mount_uploader :file, ImageUploader
end

実際に使い込むとなるとCarrierWaveのほうがいろいろできるそうですが、まぁそのあたりはまたの機会に。