2014年11月29日土曜日

オススメ!markdownエディタ MacDownのインストールして使う

MarkdDown エディタのMacDownのインストール方法です。
MacDown logo
MacDown 公式サイト

概要

Blogを書くときはStackEdit を使っているんです。
ローカルファイルのマークダウンファイルの編集でもStackEditを使いたいと思ったのですが、.mdの拡張子のファイルをクリックしたら、chromeのStackEditを起動してもらいたいと思ったのですが、うまくできなかったので一旦諦めました。
(もし、ご存知の方いらっしゃいましたら、教えてください。)
これまで、Mouを使っていたんですが、Mouからの進化系と信じして今回MacDownを採用しました。とりわけ、スタイルとかが綺麗で見やすいです。

インストール

インストールは公式サイトから、Appをダウロンロードできます。

起動

appを起動しようとすると
"MacDown.app"は、開発元が未確認のためひらけません。
と怒られて開けなかったです。
こちら、MacDownはあんまり関係なくって、macの設定で下記から、設定変更かのうです。
  1. システム環境設定から[セキュリティとプライバシー]
  2. [一般]タブの[ダウンロードしたアプリケーションの実行許可]

使い方

あとは、Markdodwnの記法で書いてください。
公式そのままですが、以下のような書き方はできます。

サンプル

MacDown

MacDown logo
Hello there! I’m MacDown, the open source Markdown editor for OS X.
Let me introduce myself.

Markdown and I

Markdown is a plain text formatting syntax created by John Gruber, aiming to provide a easy-to-read and feasible markup.
The original Markdown syntax specification can be found here.
MacDown is created as a simple-to-use editor for Markdown documents. I render your Markdown contents real-time into HTML, and display them in a preview panel.
I support all the original Markdown syntaxes. Various non-standard ones can also be turned on/off from the Markdown preference pane:
Markdown preferences pane
You can also specify extra HTML rendering options through the Rendering pane:
Rendering preferences pane
And you can also configure various behaviors in the General preferences pane.
General preferences pane

Block Formatting

Table

This is a table:
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
You can align cell contents with syntax like this:
Left Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1
The left- and right-most pipes (|) are only aesthetic, and can be omitted. The spaces don’t matter, either. Alignment depends solely on : marks.

Fenced Code Block

This is a fenced code block:
p 'Hello world!'
You can also use waves (~) instead of back ticks (`):
~
print('Hello world!')
~
In either case, you can add an optional language ID at the end of the first line:
<div>
    Copyright © 2014
    <a href="https://uranusjr.com">Tzu-ping Chung</a>.
</div>
The language ID will be used to highlight the code inside if you tick the Enable highlighting in code blocks option. This is what happens if you enable it:
Syntax highlighting example
I support many popular languages as well as some generic syntax descriptions that can be used if your language of choice is not supported. See relevant sections on the official site for a full list of supported syntaxes.

2014年11月28日金曜日

Rails でサイトマップ目的のRSSフィードを配信する

概要

GoogleがXMLサイトマップとRSSの両方を送信することを推奨しているようなので、XMLサイトマップと追加でRSSを設定するようにしました。
RSSをwebマスターツールに登録するにあたって、当然のことながらRSS自体を配信できるようにします。

実装

rss配信用のcontrollerを作成するような設計にしました。
そこから、商品であったりブログであったりのRSSを生成していくことを想定しています。

routes.rd

resources :rss, :only => [:index] do
    member do
      get "blog"
    end
  end

rss_controller.rd

# -*- encoding : utf-8 -*-
class RssController < ApplicationController


  def blog

    start_id = params[:id].to_i
    @blogs = Blog.order('updated_at desc')
    @blogs = @blogs.where('id >= ? AND id < ?', start_id, start_id + 500)

  end

end
最大で、500件づつ区切って指定することを想定しています。

blog.rss.builder

xml.instruct! :xml, :version => "1.0"
xml.rss("version" => "2.0", "xmlns:dc" => "http://purl.org/dc/elements/1.1/") do
  xml.channel do
    xml.title 'ブログRSSテスト'
    xml.link 'http://www.sample.com/blogs'
    xml.description "新着ブログのお知らせ"
    xml.language "ja-jp"
    xml.ttl "40"

    @blogs.each do |blog|
      xml.item do
        xml.title blog.title
        xml.description blog.description if blog.description.presents?
        xml.pubDate blog.updated_at.in_time_zone("Asia/Tokyo").to_s(:rfc822)
        xml.guid blog_url(blog.code)
        xml.link blog_url(blog.code)
      end
    end
  end
end
実装は、というような感じです。

webマスターツールへの設定

あとは、webマスターツール > サイトマップ画面 > [サイトマップの追加/テスト] ボタンをクリックして以下のようにURLを指定します。
rss/1/blog.rss
rss/500/blog.rss
rss/1000/blog.rss

2014年11月27日木曜日

RailsでHashからcheckboxを生成する方法

RailsでHashからcheckboxを生成する方法です。
複数チェックボックスに対応することを想定しています。
<%
sex = {
  unisex: 0,
  men: 1,
  women: 2
}
%>
<div class="form-group">
  <%= f.label :sex, '性別' %>
  <% sex.each do |key, value| %>
    <div class="checkbox">
      <%= f.check_box :sex, {checked: false, multiple: true}, value, nil %><%= key %>
    </div>
  <% end %>
</div>
とすると、下記のようなcheckboxが生成されます。
<div class="form-group">
<label for="sex">性別</label>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="0">unisex
</div>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="1">men
</div>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="2">women
</div>
</div>

Dropzoneで非同期ファイルアップロードをする方法

ファイルアップロードを非同期でかつ、ファイル選択をドラッグ&ドロップでおこなうため、Dropzoneを使って実装する方法です。
デフォルトのまま使ってもUIがかっこよくっておすすめです。
公式のページはいかになります。
http://www.dropzonejs.com/
GitHub - enyo/dropzone

インストール

dropzone.jsのダウンロードは、公式サイト or GitHubからダウンロードして読み込み。
<script type="text/javascript" src="js/dropzone.js"></script>

フォームの追加

<form id="my-awesome-dropzone" action="/target" class="dropzone">
      <div class="dz-default dz-message"><span>「ドラッグ&ドロップ」またはここをクリック</span></div>
      <div id="upload_message"></div></form>
dz-messageで、デフォルトの表示メッセージを変更しています。

configファイルの設定

dropzone用のconfigファイル(dropzone_config.js)を作成します。
Dropzone.optionsのオブジェクとを定義して行きます。
Dropzone.options.myAwesomeDropzoneのmyAwesomeDropzoneはformのidをキャメルケースにした文字列を指定します。
jQuery(function () {
    if ($('form.dropzone').length > 0) {
      Dropzone.options.myAwesomeDropzone = {
            maxFiles: 2,
            autoProcessQueue: true,
            init: function () {
                this.on("maxfilesexceeded", function (file) {
                    this.removeAllFiles();
                });
                this.on("addedfile", function (file) {
                    if (this.files[1] != null) {
                        this.removeFile(this.files[0]);
                    }
                    return $('#upload_message').html("");
                });
                this.on("success", function (file) {
                    var shop_category = jQuery.parseJSON(file.xhr.response).shop_category;
                    return $('#upload_message').html("
                      <b style='color: green;'>アップロード成功しました。</b>");
                });
                this.on("error", function (file) {
                    return $('#upload_message').html("<b style='color: red;'>アップロードに失敗しました。</b>");
                });
                this.on("complete", function (file) {
//                    this.removeFile(file);
                });

            }
      }
    }
});
上記設定では、maxFiles: 2としていますが、1個づつファイルをアップロードするようにしています。
addedfileイベントで、2個目のファイルをアップロード使用とした時に、0番目のファイルを削除しています。
こうすることで、ファイルを先入先出にして、使い勝手がよくなると思います。
上記で作成した、dropzone_config.jsは、scriptタグで使う場所に読み込みます。
<script type="text/javascript" src="js/dropzone.js"></script>
<script type="text/javascript" src="js/dropzone_config.js"></script>
これまでの設定で、Server側へのファイルの送信が可能となります。

今回使用した、オプションとイベントは下記の通りです。
他にもオプションやイベントが使えるので詳細は、公式ページをご確認ください。

オプション

option 説明
maxFiles 指定できるファイル数を指定する。指定数を超えた場合、dz-max-files-reached が呼ばれます。
autoProcessQueue 複数ファイルアップロードした場合に、アップロードを自動でqueueで処理するかの設定。falseにした場合、.processQueue() を自分で呼び出す必要がある。基本 true でよいと思います。

イベント

event 説明
maxfilesexceeded ファイル数がmaxFilesの指定を超えてた時に呼び出される。
addedfile ファイルを追加した時に呼び出される。
success ファイルアップロード成功時に呼び出される。
error ファイルアップロードでエラーが発生した時に呼び出される。
complete ファイルアップロードが成功 or エラーの時に呼び出される。

2014年11月25日火曜日

ActiveRecordのMigrationでAddColumnしたカラムに別カラムの値を代入する。

ActiveRecordのMigrationでAddColumnしたカラムに別カラムの値を代入する方法です。
結果直接、SQLを投げる結論に行き着きました。
def change
  add_column :users, :value2, :integer
  execute 'UPDATE users SET value2 = value1'
end
Usersテーブルにvalue2カラムを追加して、初期値として、value1の値をいれるようなケースを想定しています。

他の方法として、modelを使うパターンもあります。
class User < ActiveRecord::Base; end

def change
  add_column :users, :value2, :integer

  User.all.each do |user|
      user.value2 = user.value1
      user.save
  end
end

bash_profileを再読み込みする方法

bash_profileに変更を加えたときなどに、bash_profileをさい読み込みさせたい時は、下記を実行する。
source .bash_profile
ターミナルを立上げ直す方法もあるが、面倒なので上記方法がおすすめです。

2014年11月24日月曜日

Macにhomebrewをインストールする


MacのOSXのパッケージマネージャー homebrewのインストール方法です。
公式サイトはこちら
GitHub - Homebrew/homebrew
下記をターミナルで実行します。
途中でEnter とpasswordの入力を求められます。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2014年11月23日日曜日

Macにxcode コマンドラインツールをインストールする


環境

OS Yosemite
xcode 6.1

概要

xcodeをインストールして、コマンドラインツールもインストールしようかと思ったら、すでにインスールされていたので、インストール不要でした。

方法

もしインストールする場合は、ターミナルから下記を実行する
xcode-select --install

2014年11月21日金曜日

iTerm2に色を付けて見やすくする

.bash_profileに下記を追加する。
#iterm
#color setting
bind "set completion-ignore-case on"

export PS1="[\[\033[01;38m\]\u\[\033[00m\]@\[\033[01;32m\]\h\[\033[00m\]:\[\033[01;36m\]\w\[\033[00m\]]\$"
export CLICOLOR=1
export LSCOLORS=DxGxcxdxCxcgcdabagacad

export LESSHISTFILE="-"
unset HISTFILE
# iterm
この設定を追加するだけで、可読性がかなりよくなります。

Sublime Text 2 をVimのキーバインディングにして使う

そもそもVimを使いなさいよっ!という話に簡単にもっていくことはできますが、
Sublime Text 2 をVimのキーバインディングにして使います。
メニューの[Preference] > [Settings - User]を開いて
下記を追加。
{
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "ignored_packages":
    [
    ],
    "vintage_ctrl_keys": true,
    "vintage_start_in_command_mode": true
}
これだけで、結構 Vimっぽい動きになります。

Macにインストールした開発に必要なツール

Macを新調したので、よいタイミングか思いインストールしたツールをメモしたものです。基本的に無料のものを積極的に使っています。

主に、開発に使うものメインです。

ブラウザ

Google Chrome

http://www.google.com/intl/ja/chrome/

Firefox

https://www.mozilla.org/ja/firefox/new/

一応、主要ブラウザをサポートするために。。。

ターミナル

iTerm2

http://iterm2.com/

Mac標準のターミナルでもよいかもしれませんが、私はこのiTerm2を愛用させていただいております。

ランチャー

alfred

http://www.alfredapp.com/

ファイル、app、ブラウザでの検索。ほぼほぼやりたいことは、かなえてくれる凄いやつです。
一度使ったら手放せなくなりました。 気がつけば option + space を押してしまいます。
未体験の方はぜひ使ってみれください。

FTP クライアント

cyberduck

https://cyberduck.io/?l=ja

主にAWSのS3に画像を手動でアップする時に使用しています。

テキストエディタ

sublime text

http://www.sublimetext.com/

IDE

xcode

https://developer.apple.com/jp/xcode/downloads/

RubyMine

https://www.jetbrains.com/ruby/

一度使い始めたら、やめられなくなってしまいました。
Eclipseなどに比べたら断然動きが軽くrubyを使っている人にはオススメです。

ただし、有料のツールになります。個人版で$99 です。

30日間お試しもあるので、使ってみてから決めるのもありかと思います。

クラウド系ストレージ

Google Drive

https://tools.google.com/dlpage/drive?hl=ja
メインのOnline ストレージです。

Drop Box

https://www.dropbox.com/ja/

Google Driveとどっちつかずになる時があるので注意。
浮気をするとどっちにデータ入ってたっけ?って気分になります。

Evernote

https://evernote.com/intl/jp/?PHPSESSID=cab8ca5dca16b0bc2937fff529d3d1c0

Simplenote

http://simplenote.com/

タイトルに偽りなし、本当にシンプルで気にっています。ちょっとしたメモに最適です。iPhone, Mac App, Chromeアドオンになるので共有も楽チンです。
Evernoteを使うまでもない時に。

スクリーンショット

Skitch

https://itunes.apple.com/jp/app/skitch-cuoru-miaoki-rumu-gong/id490505997?mt=8

スクリーンショットを取るのに使っています。


ざっとこんな感じでしょうか。
まだまだ、これから出てきそうですが、ひとまず今回はこのへんで。

2014年11月20日木曜日

小さなCSSのインライン化で読み込み時間を短縮する

CSSのインライン化

小さなCSSに限っての話になりますが、外部ファイル化せずに、そのままHTML内に記述した方が、読み込み時間を短縮できます。

変更前

test.html
<html>
  <head>
   <link href="/css/home.css" media="all" rel="stylesheet" type="text/css">
  </head>
  ....
/css/home.css
p {
  font-size: 20px;   
}

変更後

test.html
<html>
  <head>
    <style type="text/css">
        .p {
          font-size: 20px;   
        }  
    </style>
  </head>
  ....

CSSのサイズと可読性にも影響してくるので一概にメリットだけとは思いませんが、とことんスピードを追求したい人は是非お試しください。

StackEdit + Blogger で MarkdownでBlogを書く

このブログがまさにそうですが、BlogをMarkdownで書きたいなぁと思って探してみました。
その結果、私は StackEdit + Blogger の組み合わせを採用することにしました。
ほかにも、はてなブログtumblrも簡単にMarkdownは使えそうです。
なぜ、StackEdit + Bloggerの組み合わせかと言えば、ほぼほぼの理由は StackEdit がいろいろとやってくれるかですね。
ブラウザ上でMarkdownのEditorが使えて、GoogleDrive,Dropboxなんかと同期をとれたり、下記のサービスに簡単に公開できたりとなかなかの優れものなんです。
  • Blogger
  • Github
  • tumblr
  • Drop Box
  • Google Drive
  • WordPress
私の使い方としては、StackEditで書いたものをGoogle Driveに保存しておいて、公開できそうなものをBloggerにアップするようにしています。
当然、Google Driveに保存しているので、自宅と出先とで1つのものを編集できるので何かと重宝しています。

2014年11月18日火曜日

画像をロスレス圧縮する方法

googleのPageSpeedで分析をかけたら、画像をロスレス圧縮するように言われたので、その対応方法です。

PNG画像

PNGの圧縮はtinypng (https://tinypng.com/)

JPEG画像

jpegの圧縮はmedia4x (http://media4x.com/)
いずれのサイトも、D&Dで画像を圧縮した画像をダウンロードできます。

結果

PNGで試したところ、以下のようにサイズが小さくなりました。
2.7KB => 804B
1.1KB => 159B
コツコツやっていけば、相当量のサイズ削減できるかもしれないです。

2014年11月14日金曜日

Railsでmeta-tagsやOpen Graphを設定する方法

SEO対策として、Railsのmeta-tagsを設定するために、GitHub - kpumuk/meta-tags を使ったやりかたです。

Gemのインストール

Gemfileに下記を追加して、bundle install
# https://github.com/kpumuk/meta-tags
gem 'meta-tags'

書き方

以下の様にset_meta_tagsして、<%= display_meta_tags %>場合のシンプルな例です。
<% set_meta_tags :title => ‘Member Login’ %>
Member Login

<% set_meta_tags :site => ‘Site Title’, :title => ‘Member Login’ %>
Site Title | Member Login

<% set_meta_tags :site => ‘Site Title’, :title => ‘Member Login’, :reverse => true %>
Member Login | Site Title

Open Graph

Open Graphの設定は下記のように行います。

書き方

set_meta_tags 
  :title => 'item AAAA',
  :og => {
         :title => "Member Login",
         :type => 'website',
         :url => 'https://www.sample.com/',
         :site_name => 'SITE',
         :description => '説明アアアア',
         :image => 'https://www.sample.com/logo.jpg'
 }
}
とすると、下記のようになります。
<meta content="product" property="og:type" />
<meta content="https://www.sample.com/" property="og:url" />
<meta content="SITE" property="og:site_name" />
<meta content="説明アアアアア" property="og:description" />
<meta content="https://www.sample.com/logo.jpg" property="og:image" />
typeは色々とあるようなので、ページに適宜指定してください。
詳しくは、下記のページを参照ください。
https://developers.facebook.com/docs/reference/opengraph
ちなみに、topページにはwebsite を商品ページには、productを指定したりしています。

app_idの取得

それから、facebookのapp登録をして、app_idを取得します。
Appの登録は下記より行ってください。
https://developers.facebook.com/apps
登録したapp_idをもとに、meta-tagにapp_idも設定します。
<meta property="fb:app_id" content="111111111111111" />
※ 111111111111111部分に取得した、app_idを指定

設定の確認

Open Graphの確認は下記から確認できます。
https://developers.facebook.com/tools/debug/og/object/

Twitter Cards

summaryカード

上記のOpen Graphの設定を行っておくと、Twitter Cardsの指定が、かなり簡単になります。
<%
set_meta_tags :site => 'RESTIR リステア',
                     :reverse => true,
                     :og => {
                       ・・・・・・
                     }
                     :twitter => {
                             :card => 'summary',
                             :site => '@twitter_id',
                     }
%>                    
twitterのcardとsiteを指定すれば、あとの画像や説明は、Open Graphから取得してくれます。

Productカード

Productカードの設定サンプルは下記です。
Open Graphが未設定な状態を想定して書きました。
brand_name = 'BrandA'
item_name = 'ItemA'

set_meta_tags 
  :title => 'item AAAA'
  :twitter => {
                         :card => 'product',
                         :site => '@twitter_id',
                         :domain => 'www.sample.com',
                         :title => "#{brand_name} - #{item_name}",
                         :description => '説明AAAAA',
                         :image => ['http://www.sample.com/item-img.jpg',
                                    {       :width => 207,
                                            :height => 234
                                    },
                         ],
                         :label1 => 'BRAND',
                         :data1 => brand_name,
                         :label2 => 'PRODUCT NAME',
                         :data2 => item_name
                 }
とすると、下記のようなタグが発行されます。
<meta content="product" property="twitter:card" />
<meta content="@twitter_id" property="twitter:site" />
<meta content="www.sample.com" property="twitter:domain" />
<meta content="BrandA - ItemA" property="twitter:title" />
<meta content="説明AAAAA" property="twitter:description" />
<meta content="http://www.sample.com/item-img.jpg" property="twitter:image" />
<meta content="BRAND" property="twitter:label1" />
<meta content="BrandA" property="twitter:data1" />
<meta content="PRODUCT NAME" property="twitter:label2" />
<meta content="ItemA" property="twitter:data2" />
imageに指定する画像サイズは160 x 160pxが推奨されています。
imageのwidthとheightを指定すると、縦横比を維持してくれるようです。
GitHubの公式サイトをみると下記のようにしてしていますが
:image => {
    :_      => "http://example.com/1.png",
    :width  => 100,
    :height => 100,
  }
下記のように指定した方が、きれいにタグが生成されました。
:image => ["http://example.com/1.png",
  {
    :width  => 100,
    :height => 100,
  }
]

その他

SEOの効果出て欲しいです。
経過を見守ります。

参考サイト

Twitter Card

Railsでテキストのhtmlタグを削除する方法

RailsのViewでHTMLタグを含んだStringからHTMLたぐだけを削除したい場合、strip_tags を使います。

サンプル

html_str = '<p>test</p>'
strip_tags(html_str)
上記のようにすると、以下の結果が帰ってきます。
test

Bootstrapのテーマサイト Black Tieがかっこいい

Bootstrapのテーマを探している方は、是非こちらのサイトもご覧ください。







Black Tie というサイトです。
有料・無料のテーマがありますが、
無料のテーマでもシンプルながらかっこいいです。
テーマを使わなくても、デザインの参考にもなると思います。

2014年11月13日木曜日

RailsのActive RecordでDISTINCTする方法

商品一覧の中から、重複を除いたブランドIDの一覧を取得したい場合、SQLのDISTINCTの代わりに、
Active Recordではuniqを使います

コード

@items = Item.select('bland_id').uniq

結果

結果として以下のような結果が返却されます
selectしているので、selectに指定したカラムにしかアクセスできません。
<Item bland_id: 3249>
<Item bland_id: 3250>
<Item bland_id: 1737>

使い方

ループでまわした場合は、以下のようにします。
@items.each do |item|
  p item.bland_id
end

2014年11月12日水曜日

Rubyのハッシュでeach_with_indexする方法

Rubyのハッシュでeach_with_indexする方法です。
key_value_hash.each_with_index do |(key, value), i|
  break if i >= limit_count
  p "#{key} => #{value}"
end
下記のようにkey , valueを括弧で囲ってください。
(key, value)

2014年11月11日火曜日

SSL3.0の脆弱性POODLEへの対応

SSL3.0の脆弱性POODLEが騒がれているので、下記のサイトで確認したら、
しっかりアウトでした。
https://www.ssllabs.com/ssltest/index.html
Nginxをつかっているので、nginxの設定でSSL3.0を使わないようにすればOKです。
ssl_protocolsのデフォルトが以下なので
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
以下のように設定変更して、nginxをreload
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
server {
    listen       443;
    server_name          www.example.com;
    ssl                  on;
    ・・・・・
    #ssl_protocols  SSLv2 SSLv3 TLSv1; # POODLE対応
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ・・・・・
}

参考サイト

下記を参考にさせて頂きました。
http://nginx.org/ja/docs/http/configuring_https_servers.html
http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_protocols
http://dev.classmethod.jp/cloud/aws/cve-2014-3566-poodle-issue/

2014年11月10日月曜日

Rails3のasstsのコンパイル速度をturbo-sprockets-rails3を使って改善する

Railsのassetsのコンパイルに時間がかかっていたので、改善するために、下記のGemを試してみました。
GitHub - ndbroadbent/turbo-sprockets-rails3
変更があった、assetsのみ再コンパイルしてくれるので、時間が短縮されます。
Rails4からは、この方法が採用されているみたいです。

インストール

Gemfileのassetsグループに下記を入れて、bundle install
group :assets do
  ...
  # turbo-sprockets-rails3
  # https://github.com/ndbroadbent/turbo-sprockets-rails3
  gem 'turbo-sprockets-rails3'
end

有効期限設定

assetsファイルに有効期限をつける場合は、以下のように設定します。
下記では2週間の設定を行っています。
config/environments/production.rb
config.assets.expire_after 2.weeks
インストール&設定は以上なので、とても簡単です。

実行結果

実際に動かしてみたところ、以下のように改善されました。
これだけで、成果がでるのでありがたいです。

環境A

約 55秒 => 30秒

環境B

1分56秒 => 1分6秒

2014年11月8日土曜日

RailsにWebアイコンフォント Font Awesomeを導入する方法

Webアイコンフォント Font Awesomeの導入方法です。
フォントのアイコンなので、簡単に使えて便利でしかも、かっこ良くなります。
今回は、GitHub - bokmann/font-awesome-railsを使って、導入します。

インストール

gemの追加

Gemfileに下記を追加して、bundle install します。
Gemfile
# font-awesome
# https://github.com/bokmann/font-awesome-rails
gem "font-awesome-rails"

cssの読み込み

application.css
/*
 *= require font-awesome
 */
以上で完了です。簡単です。

使い方

こんな感じです
Link <i class="fa fa-external-link"></i>
あとの使い方は、font-awesomeと変わらないので、公式の使い方 を参照して頂ければと思います。

Rubyで文字列からTime型に変換する方法

任意の時間のTime型のオブジェクトを生成したい場合は、parse関数を利用します。
こんな感じ。
order_t = Time.parse('2014-11-08 12:34:30 +0900')
指定する時間の部分は、日本なので、+0900しています。
日時だけでなく、UTCの考慮もお忘れなく
ちなみに、他の時間関係の型も使えます。

Date型

order_d = Date.parse('2014-11-08')

DateTime型

order_dt = DateTime.parse('2014-11-08 12:34:30 +0900')

2014年11月7日金曜日

Rubyで現在時刻と特定の時間を判定する方法

今日の15時までなら、当日出荷、15時以降なら翌日出荷なんてことをしたい時に
Rubyで判定するロジックです。
if Time.now.beginning_of_day + 15.hours <= Time.now
    ## 当時つ出荷の処理
else
    ## 翌日出荷の処理
end
様は、今日の00:00を取得して、それに15時間足してやります。

2014年11月6日木曜日

Googleアナリティクスのイベント トラッキングを設定する方法

Googleアナリティクスでクリックしたボタンを計測したい時など、イベントトラッキングを設定することで、計測が可能になります。

jQueryでの実装

コードは以下のようになります。

$('.button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons', 4);
});

ga 関数の send コマンドを利用します。


旧バージョンはこちら

  $('.button').on('click','a',function(event) {
        _gaq.push(['_trackEvent', 'button', 'click', 'nav-buttons', 4])
  });

オプション

必須 説明
Category String 通常は操作対象のオブジェクト(例: button)。
Action String 操作の種類(例: click)。
Label String イベントの分類に便利(例: nav-buttons)
Value Number 正数値を指定する必要があります。

statistics

Arsip