2015年1月30日金曜日

Skypeの背景色

Skypeの背景色
- 調べ方

Skypeの背景色

スカイプのあの水色の背景色のカラーコードを知りたくって調べました。
ちょっと調べたけど、検索では見あたらなかったので、、、

で、答えは。

#00AFF0

です。

調べ方

webのあるサイトで使っている色を調べる時に
chromeのエクステンションでColorZillaというモノを使いました。

クローム Webストア - ColorZilla

使い方は簡単で、起動して、色を調べたい場所にマウスを当てれば、カラーコードが表示されます。

ダミー画像を生成する方法

Placehold.jpを使ってダミー画像を生成する方法

Placehold.jpを使ってダミー画像を生成する方法

htmlでモックページを作成中にとりあえずの画像を入れたい時に、ダミーの画像を作りたい時があると思います。
そんな時の為に、下記に紹介するダミー画像生成のサービスがとても便利です。

ダミー画像生成サービス

ダミー画像生成のサービスの有名どころとして、以下の２つがあります。

ほぼほぼ、同じ昨日を提供してくれていて、大きな違いは日本語か英語かの違いぐらいです。
多少なりと使い方に違いはあるものの、日本人なので、Placehold.jpを使っています。
今回の説明も、Placehold.jpを対象としています。

使用方法

サイトにも書いてあるので、簡単な説明にとどめます。

基本の書き方と使用例

書き方

http://placehold.jp/幅x高さ.png

例

http://placehold.jp/400x300.png

とすると。以下のように400x300pxのダミー画像を作ってくれます。

400x300

後は、そのまま

imgタグに埋込んでしまっても大丈夫です。

 <img src="http://placehold.jp/400x300.png", alt='dumy'>

テキストの変更

画像に表示される文字を変更したい場合は、
textパラメータを使用します。

書き方

http://placehold.jp/幅x高さ.png?text=テキスト

例

http://placehold.jp/400x300.png?text=dumy+400x300

とすると。以下のようになります。

dumy 400x300

色の変更

色の変更の変更は、パスを区切る事で変更できます。
パスの指定方法は以下の通りです。

書き方

http://placehold.jp/背景色/文字色/400x300.png
http://placehold.jp/文字色/400x300.png

例

http://placehold.jp/ff00ff/00ff00/400x300.png
http://placehold.jp/ff0000/400x300.png

それぞれ以下のようになります。

背景文字色

画像種別の変更

上記のサンプルでは、すべてpng を指定していますが、
画像種類は、以下の指定が可能です。

書き方

http://placehold.jp/400x300.拡張子

例

http://placehold.jp/400x300.png
http://placehold.jp/400x300.jpg

とすると。以下のようになります。
違いは感じずらいと思いますが。

png
png 400x300

jpg
jpg 400x300

まとめ

あとは、上記の使い方の組み合わせになります。
サイト作成時にバナー画像等がもらえない時などにとりあえず入れておく時に最高に便利です。

2015年1月29日木曜日

rubyで先頭の文字だけ大文字に変更する方法

rubyで文字列の先頭の1文字だけ、大文字にしたい場合は、capitalize を呼び出します。

capitalizeを使うと以下のようになります。

'Aaa'.capitalize
 => "Aaa"

以下のように、どこが大文字でも先頭が大文字、以降は小文字になります。

'Aaa'.capitalize
 => "Aaa"

'aAa'.capitalize
 => "Aaa"

'aaA'.capitalize
 => "Aaa"

'AAA'.capitalize
 => "Aaa"

ちょっとした時に便利です。

2015年1月28日水曜日

Middlemanでmetatagを設定する方法

- layoutの編集
- 各ページのFrontmatterの編集

MiddlemanでMetatagを設定する方法です。
通常のメタタグとオープングラフ、Twitter Cardも合わせて設定しています。

metatag用のGemもあるようですが、今回はそれは使わずに、
各ページのフォーマッタからメタ用の情報を設定したものを、親のレイアウトで受け取ることを想定しています。

layoutの編集

layoutのメタタグ部分を以下のように編集する。

  <title><%= (current_page.data.title).present? ? "#{(current_page.data.title)} | SITE NAME" : 'SITE NAME' %></title>
  <meta name="keywords" content="<%= data.page.keywords %>">
  <meta name="description" content="<%= data.page.description %>">
  <%# OGP %>
  <meta content="<%= data.page.og_title %>" property="og:title"/>
  <meta content="<%= data.page.og_type %>" property="og:type"/>
  <meta content="<%= data.page.og_description %>" property="og:description"/>
  <meta content="http://www.example.com/<%= data.page.og_url %>" property="og:url"/>
  <meta content="SITE NAME" property="og:site_name"/>
  <meta content="http://www.example.com/<%= data.page.og_image %>" property="og:image"/>
  <meta content="99999999999999" property="fb:app_id"/>
  <%# Twitter card %>
  <meta content="summary" property="twitter:card"/>
  <meta content="@xxxxxxxxx" property="twitter:site"/>

各ページのFrontmatterの編集

各ページのFrontmatter部分を以下のように編集する。

---
title: 'ページタイトル'
keywords: キーワード1, キーワード2, キーワード3
description: 'メタ説明。あああああああ'

og_title: 'OPG用ページタイトル'
og_type: 'website'
og_description: 'OPG用メタ説明。あああああああ'
og_url: 'index.html'
og_image: 'img/index/sample.png'
---

li要素内のaタグのクリック範囲を広げる方法

li要素をつかってメニューを作る時に、
li要素内全てはリンク可能なクリック範囲にしたい場合がちょいちょいあります。

そんな時は、下記のように対処します。

htmlコード

<ul>
  <li><a href='#'>aaaa</a>
  <li><a href='#'>bbbb</a>
  <li><a href='#'>cccc</a>
</ul>

cssコード

ul li a {
 display: block;
}
ul li a:hover {
 color: #ffffff;
 background-color: #000000;
}

li要素の「・」を削除する方法

メニューの項目等で li タグを使った時に、何もしないと「・」が表示されます。
その「・」をCSSで削除するするには、以下のように行います。

li {
  list-style-type: none;
}

2015年1月19日月曜日

RailsでActionMailerでファイルを添付する方法

ブラウザから、アップロードされたファイルをメールに添付して送信するようなことを想定しています。

Actionでのメール送信メソッド

送信用アクションメソッドは以下のようになります。
tmp_file はFile.class のオブジェクトを受け取る想定です。

  def send_mail

    to_mail = params['to_mail']
    tmp_file = params['tmp_file']

    SendsMailer.send_mail(to_email, tmp_file).deliver

  end

ActionMailerの実装

ActionMailerは以下のようになります。

# -*- encoding : utf-8 -*-
class SendsMailer < ActionMailer::Base

  default :from => 'from@example.com', :content_type => 'text/html'

  def send_mail(to_mail, tmp_file = nil)
    attachments[tmp_file.original_filename] = File.read(tmp_file.path) if tmp_file.present?

    mail(:to => to_mail,
         :subject => "メール送信テスト")
  end

end

重要な部分は

attachments[tmp_file.original_filename] = File.read(tmp_file.path)

attachments['ファイル名'] = 添付するファイル

2015年1月14日水曜日

Middlemanの多言語化(i18n)対応する方法

Middlemanで日英の多言語化にi18nで対応する方法です。

config.rbの設定
対応ロケールのファイル作成
テンプレートファイル作成
便利な使い方
- 配列とeachの利用

公式ドキュメントは下記を参考にしてください。
Middleman 多言語化 (i18n)

config.rbの設定

activate :i18n, :langs => [:ja, :en]

langs配列に、仕様する言語を指定します。
先頭の物が、デフォルト設定されます。上記の記述であれば、日本語が優先されます。

http://localhost:4567/index.html で日本語ページ
http://localhost:4567/en/index.html で英語ページ

のようにアクセス可能になります。

対応ロケールのファイル作成

各ロケールのYAML形式のファイルを作成します。

日英のロケールファイルを作成する場合、/locales 配下に下記のファイルを作成します。

ja.yml 
en.yml

ファイルの内容は、

ja.yml

ja:
  title: "タイトル"

en.yml

en:
  title: "TITLE"

テンプレートファイル作成

多言語化するファイルは、/source/localizable 配下に配置します。

例えば、/source/localizable/index.html.erb を作成して、タイトルには下記のようにアクセス可能です。

<%= t('title') %>

上記をした場合、それぞのURLでは以下のように表示されます。

/index.html の場合

タイトル

/en/index.html の場合

TITLE

便利な使い方

配列とeachの利用

メニューなども多言語をしたい時に、ついでに配列に指定した値でループを回しながら、メニューを生成する方法です。

ja.yml

ja:
  menu:
    items:
      - name: '会社情報'
        href: '/outline/index.html'
      - name: '店舗情報'
        href: '/shop/index.html'
      - name: 'お問い合わせ'
        href: '/contact/index.html'

/source/localizable/_menu.html.erb

<ul>
  <% t('menu.items').each do |item| %>
      <li>
        <%= link_to item['name'], item['href'] %>
      </li>
  <% end %>
</ul>

以下のようなhtmlが生成されます。

<ul>
      <li>
        <a href="/outline/">会社情報</a>
      </li>
      <li>
        <a href="/shop/">店舗情報</a>
      </li>
      <li>
        <a href="/contact/">お問い合わせ</a>
      </li>
</ul>

2015年1月7日水曜日

robots.txtにサイトマップを指定する方法

検索エンジンのクローラにサイトマップの場所を教える方法です。

robots.txtに下記のように追加して、自分のサイトのsitemapの場所を指定します。

Sitemap: http://ore-tech.blogspot.com/sitemap.xml

全体的には、こんな感じでしょうか。

User-agent: *
Disallow: 

Sitemap: http://ore-tech.blogspot.com/sitemap.xml

補足

ウェブマスターツールのrobots.txtの記事を読んでいたら下記の記載がありました。

robots.txt ファイルが必要になるのは、サイトに Google などの検索エンジンのインデックスに登録したくないコンテンツがある場合のみです。サイト全体が Google のインデックスに登録されるようにする場合は、robots.txt ファイルを（空のものでも）作成しないでください。

登録したくないコンテンツがある場合のみでだそうです。
Sitemap指定だけに作った方がよいのか不安になるところですが
私は、上記のように全て許可でSitemapを指定するようにしています。

robots.txtの指定の仕方によってはクロールが行われないこともありますので
取り扱いには十分注意してください。あくまで自己責任でお願い致します。

参考サイト

検索エンジンのクローラに通知

登録: 投稿 (Atom)

2015年1月30日金曜日

Skypeの背景色

調べ方

Placehold.jpを使ってダミー画像を生成する方法

ダミー画像生成サービス

使用方法

基本の書き方と使用例

テキストの変更

色の変更

画像種別の変更

まとめ

2015年1月29日木曜日

2015年1月28日水曜日

layoutの編集

各ページのFrontmatterの編集

htmlコード

cssコード

2015年1月19日月曜日

Actionでのメール送信メソッド

ActionMailerの実装

2015年1月14日水曜日

config.rbの設定

対応ロケールのファイル作成

テンプレートファイル作成

便利な使い方

配列とeachの利用

2015年1月7日水曜日

補足

参考サイト

statistics

Arsip

CB Blogger Lab