wordpressをherokuで無料&簡単に始められないかなと思ったらほんとに出来た
はじめに
- herokuアカウント(addonを使う場合はクレカ登録も)
- 最低限のgitの知識 (なくても真似するだけで大丈夫ですがあるとよい。)
があればとりあえずできます。
手順
以下のサイトを通りにやってみたら、3分くらいでできました。びっくり。demo
blog.handswiz: 言語切り替え機能をつけたwordpressをherokuで動かす
紹介されているgistはこちら。MySQL版です。
試していませんがpostgreSQL版も書いてくださっています。マジ感謝です。
happtech: 日本語環境のwordpressをherokuで動かす方法
postgreSQL? MySQL?
じゃあ実際にやろうとなったとき、DBどうするの?と思った方もいると思います。
herokuでは無料の範囲だと容量の制限に違いがあり、
- postgreSQL:1K行(10,000行)
- MySQL:5M
となっています。
さくらの共有サーバーでデーターベースはどれぐらいの容量まで使えて、WordPressだと何記事分なのか? | 9ineBB
を見ると、5Mだとだいたい記事250個分らしいので
- postgreSQL:1万件
- MySQL:250件
までは記事を書いても無料ということになりそうです。
MySQLだときつかなと思いましたが、週1できっちり書いても一年で50記事程度ですから、とりあえず始めるならMySQLでも大丈夫そう。
【注意点1】プラグインとテーマはgitから追加する必要あり
herokuではdynoの再起動時にgit管理下にないものは消えてしまうので、プラグインやテーマがサイトから追加できないのが一つネックです。
ですが慣れれば簡単で、プラグイン、テーマはほぼzipでDLすることもできるので、
- plugin, themeをzipでDL&解凍
- wp-content/plugins, wp-content/themesにそれぞれフォルダごと配置
- git add & git commit
- herokuにデプロイ
とすればOK.
参考: 月10円!HerokuでWordpressを運用!! - のっぴきならない昨今です
【注意点2】画像は外部ストレージを利用する必要あり
こちらも注意点1と同じ理由で、再起動時に変更点は消えてしまうので、画像もgit管理されていないとなくなってしまいます。
でもそこは外部ストレージを使えばOK。そこでの選択肢はとりあえず2つありました。
- Cloudinary - Cloud-based image management & upload
- 500MB, 5千枚/月まで無料
- Amazon S3
- 1Gあたり9円~/月
それぞれの詳細な設定方法は以下を参照:
- Cloudinary
- S3
どちらもwordpress用のプラグインもあるので、wordpressの編集画面から使えます。
選択基準としては、楽なのはCloudinary、長くほぼ無料で使いたいならS3でしょうか。
Cloudinaryはsignupして、wpのプラグイン入れて、API_KEY入れればすぐ使えます。
S3は慣れてない人だとセットアップ作業がわりとあります。もちろんサイトで説明してくれているので迷わずできると思います。
Cloudinaryは編集機能もついているのでそのあたりも便利そうですね。
herokuの料金についてサクッと確認
herokuは価格がシンプルなようでわかりにくい?ので以下で確認しましょう。
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についてお勉強。
ドキュメントめちゃ充実してるので必ず確認。
Flickraw Documentation
rubyのgemはいくつかあるが一番メジャーなflickrawを使う。
こちらも各メソッドごとに詳細なドキュメントがあるので便利。
Setup手順
- accounts作成
- api keyを作成
- The App Garden on Flickr
- Non-Commercial/Commercialを選択
- アプリの説明を記入
- key/secretを取得
- The App Garden on Flickr
- Authentication
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
世界のトッププレイヤーのバドミントン動画が簡単快適に見れる、動画まとめサイトです。
せっかくなので企画の上で考えたことなどをまとめておきます。
なぜtopranker.tvを作ったのか。
僕自身バドミントンをもう14年くらいやっているんですが、スポーツの世界にはまだまだITで解決できることがたくさんあると思ったのがきっかけです。
その一つが動画で、”見る価値のある”バドミントンの動画を見つけて見るって今でも非常に難しいことです。
Youtubeのような動画メディアの普及によって、世界中には超一流選手の動画がどんどんアップされるようになり、またスマホやタブレットの普及、通信速度の向上もあり、だれでもどこでも写真だけでなく動画が気軽に楽しめる環境になりつつあります。
でもそれにアクセスするには、一定以上の知識と、高いリテラシーがまだ必要で、youtubeで「badminton」と検索すれば動画は出ては来ますが、そのクオリティはばらばらで、それこそ一流選手名を知っていなければよい動画にアクセスできず、結果ほんの一部の人の目にしか触れていないように思います。
そんなことを思っていて、バドミントンが好きな人がだれでも手軽にどこでも、一流選手の動画を快適に見れるようにしようと思い、topranker.tvを作りました。
5年,10年変わらないニーズにフォーカスする
個人的なテーマとして、は普遍的、恒久的なニーズにフォーカスしたものを作っていきたいなというのがありました。
つくろうと思えばゲームやらソーシャルアプリやらツールやらいろいろな選択がありますが、その開発の時間をかけるだけの価値ある、長く多くの人に役に立つものをつくりたいなという思いがあり、1人の作り手としてそういったものをより多く自分の手でつくりたいなと思います。
バドミントンにかぎらず、スポーツのようにグローバルに愛されているコンテンツを、より簡単に誰にでも届くようにする、という一番ベーシックなものですが、やる価値はあるなぁと思いました。
自分がほしいものを作る
最後はシンプルで、僕が昔からあったらいいなーと思ったものを作りました。
さまざまなサービスの開発手法はありますが、結局コアユーザのインサイトを得ることが一番の肝であるとすると、やっぱり自分でほしいものを作るというのは, モチベーション的にもよいものを効率よく作るという点でも大事だなと思います。
実装編は別途
まぁそんなこんなでtopranker.tvをつくった理由(企画編)でした。
本当に作る価値のあるものを自分ごととして作り続けていく、というのはひとつのライフワークとして続け、アウトプットでお伝えしていければと思います。
バドミントン好きな方はお気軽に感想・要望など、こちらの twitter(https://twitter.com/takayuki_shmz )まで。
さくら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}
で、できる。
まぁ一旦これくらいで事足りそう。
もっと調べたい方はこちらがまとまっております
railsでメジャーな画像保存用のgemを使ってみる
imageの保存について
選択肢
pageclipの場合
基本READMEどおりだけど作業メモとして。
手順としては、インストールは飛ばすと
- モデルで設定を追記
- migrationを追加
- formを作成
- 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のマルチパートデータで送るということです。
データを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のほうがいろいろできるそうですが、まぁそのあたりはまたの機会に。