@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は変数が使える。

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

rails gem ruby flickr api

Flickr API Documentation

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

Flickr Service

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

Flickraw Documentation

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

RDoc Documentation

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

Setup手順

accounts作成
api keyを作成
- The App Garden on Flickr
  - Non-Commercial/Commercialを選択
  - アプリの説明を記入
  - key/secretを取得
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

参考

2014-03-09

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

topranker 企画 my product

先日, 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

2014-03-01

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

vps rails security

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/

2014-02-18

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

git

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 使い方

2014-02-13

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

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のマルチパートデータで送るということです。

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

はじめに

手順

postgreSQL? MySQL?

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

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

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

まとめ

mixin & include