2015年8月14日金曜日

Rubyでランダムなパスワードを生成する方法2

Rubyでランダムなパスワードを生成する方法

Rubyで下記の判断しずらい文字は使わないで、ランダムな8桁のパスワードを生成する方法です。

'0'', 'o' 'O', '1', 'l', 'I

サンプルコードは以下のようになります。

pw = [*2..9, *'a'..'z', *'A'..'Z'].delete_if {|str| str =~ /[lIoO]/}.sample(8).join

ワンライナーでいけます。

現在資料できる文字は、大文字小文字の英数字から、上記の禁止文字を抜いたものになります。
使用する文字や、制限する文字は都度変更してください。

2015年3月20日金曜日

Googelの検索結果内に検索フォームを表示させる方法

Googelの検索結果内に検索フォームを表示させる方法

Google とかで検索した際に、大きいサイトだと企業名のしたによく検索フォームが表示されているのをよく見かけると思います。

zozo.jpの場合

zozoの検索フォーム

大きな主要サイトだと、Googleが良きに計らってくれて表示させてくれているようですが、

小さなサイトだとなかなかやってくれないようなので、
自分で”もし良かったら、こんな感じでフォーム表示してもらってもいいですか?”的に設定が可能です。

下記より実装方法になります。

実装方法

今回の実装サンプルでは、Ruby on Rails で chema.org と JSON+LDを使っています。

common/_semantic_web.html.erb

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.example.com/search?keyword={keyword}",
    "query-input": "required name=keyword"
  }
}
</script>
* https://www.example.com/の部分はご自分のサイトURLに変更してください

* https://www.example.com/search?keyword={keyword}は自分のサイトの検索用URLを指定してください。

* "query-input": "required name=keyword"は検索フォームに入力されてワードを**keyword**という変数名定義します。そして、**required** をつけることで必須ですよと設定しています。必須でなくても問題ないようであれば、requiredは削除してください。

あとは、共通レイアウト等でrenderして読み込んでください。

layouts/application.html.erb

  (略)

  <%= render('common/semantic_web') %>

  </body>
</html>

まとめ

比較的簡単に設定ができて、SEOにも効果があると思うので、設定してもよいのではないでしょうか。
しかも、検索結果に表示された時にインパクトもありますしね。

参考サイト

今回の実装にあたり参考にしたサイトです。

Goolge 公式

Google ウェブマスター向けブログ

https://developers.google.com/structured-data/slsb-overview

schema.org

http://schema.org/WebSite

http://schema.org/SearchAction

http://schema.org/docs/actions.html

2015年3月13日金曜日

AWS CLIを使って OpsworksのSTACK_IDとAPP_IDを取得する

OpsWorksのSTACK_IDとAPP_IDの取得方法について下記します。
今回、値の取得にaws cliを使用しています。
aws cliの設定については、MacにAWS CLIをインストールする方法 をご参考ください。

Stack id 取得

aws cliから取得する場合は、describe-stacksを以下のように実行してください。

aws opsworks --region us-east-1 --profile myprj describe-stacks

–regionが東京(ap-northeast-1) かと思って頑張っていたけど、us-east-1を指定しないとダメらしい。

AWS - describe-stacks

※ は、OpsWorks IDと同じです。

app id 取得

aws cliから取得する場合は、describe-appsを以下のように実行してください。
には、前項で取得したSTACK_IDを指定してください。

aws opsworks --region us-east-1 describe-apps --stack-id <STACK_ID>

AWS - describe-apps

MacにAWS CLIをインストールする方法

pipのインストール

easy_installでpipをインストールします。

pipはphysonのパッケージ管理ソフト

以下を実行します。パスワードが求められるの合わせて入力します。

sudo easy_install pip
Password:

pipのインストールの確認

以下を実行して

pip -h

以下のようにUsageが出力されれば成功です。

Usage:
  pip <command> [options]

Commands:
  install                     Install packages.
  uninstall                   Uninstall packages.
  freeze                      Output installed packages in requirements format.
  list                        List installed packages.
  show                        Show information about installed packages.
  search                      Search PyPI for packages.
  wheel                       Build wheels from your requirements.
  zip                         DEPRECATED. Zip individual packages.
  unzip                       DEPRECATED. Unzip individual packages.
  help                        Show help for commands.

General Options:
  -h, --help                  Show help.
  --isolated                  Run pip in an isolated mode, ignoring environment variables and user configuration.
  -v, --verbose               Give more output. Option is additive, and can be used up to 3 times.
  -V, --version               Show version and exit.
  -q, --quiet                 Give less output.
  --log <path>                Path to a verbose appending log.
  --proxy <proxy>             Specify a proxy in the form [user:passwd@]proxy.server:port.
  --retries <retries>         Maximum number of retries each connection should attempt (default 5 times).
  --timeout <sec>             Set the socket timeout (default 15 seconds).
  --exists-action <action>    Default action when a path already exists: (s)witch, (i)gnore, (w)ipe, (b)ackup.
  --trusted-host <hostname>   Mark this host as trusted, even though it does not have valid or any HTTPS.
  --cert <path>               Path to alternate CA bundle.
  --client-cert <path>        Path to SSL client certificate, a single file containing the private key and the certificate in PEM format.
  --cache-dir <dir>           Store the cache data in <dir>.
  --no-cache-dir              Disable the cache.
  --disable-pip-version-check

AWS CLIのインストール

上記でpipのインストールが完了したら、下記を実行します。
また、パスワードも聞かれるの再度入力してください。

sudo pip install awscli
Password:

AWS CLIのインストールの確認

以下を実行してみて

aws -h

以下のように usageが出力されればインストール完了です。

usage: aws [options] <command> <subcommand> [parameters]

設定の追加

以下を実行すると

aws configure

下記をきかれるの、順次入力していきます。

AWS Access Key ID [None]: XXXXXXXXXXXXXXXXXXXXXXXXXXX
AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Default region name [None]: ap-northeast-1
Default output format [None]: json

AWS Access Key IDやAWS Secret Access Keyは各自に環境に合わせて入力してください。

動作確認

以下を実行して、結果がかえってくることを確認してください。

aws ec2 describe-instances

インスタンスの情報を取得

複数アカウント運用する場合

.aws/configを以下のように設定します。

[default]
output = json
region = ap-northeast-1

[profile myprj]
aws_access_key_id = XXXXXXXXXXXXXXXXXXXXXXXXXXX
aws_secret_access_key = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
region = ap-northeast-1

[profile myprj]以下を追加するアカウント情報を追記する。

動作確認

以下を実行して、結果がかえってくることを確認できれば成功です。

aws ec2 describe-instances --profile myprj 

2015年3月11日水曜日

複数Bitbucketアカウントをsshで接続する方法

会社とプライベートで別々の複数のBitbucketアカウントを持っている時に、
同一端末から、sshでアクセスする方法です。

今回は仮に、bitbucket1とbitbucket2の2個を使用する事を想定しています。

SSHキーの作成

まず、SSHキーを作成します。
もし、既に自前のSSHがあるようであれば、自前の物を使ってください。

cd ~/.ssh

mkdir bitbucket1
ssh-keygen -t rsa -C ore-tec@example.com -f bitbucket1/id_rsa

mkdir bitbucket2
ssh-keygen -t rsa -C ore-tec@example.com -f bitbucket2/id_rsa

SSHキーの権限変更

sshきーの権限を変更します。

chmod 600 bitbucket1/id_rsa
chmod 600 bitbucket2/id_rsa

.ssh/configの設定

Host bitbucket.org1
  HostName bitbucket.org
  IdentityFile ~/.ssh/bitbucket1/id_rsa
  User bitbucket1
Host bitbucket.org2
  HostName bitbucket.org
  IdentityFile ~/.ssh/bitbucket2/id_rsa
  User bitbucket2

Bitbucketへのキーの追加

[アカウントの管理]画面 > SECURITY [SSH キー] をクリック
[鍵を追加]ボタンをクリック

bitbucket add ssh

上記のkeyの部分に以下でコピーしたモノをペーストします。

cat ~/.ssh/bitbucket1/id_rsa.pub | pbcopy

Labelも自分で認識しやすいモノを設定する。

同様にbitbucket2も別bitbuckeアカウントに鍵を追加します。

.git/configの設定

プロジェクトのルートに移動して.git/configを下記のように設定します。

my_project1の場合

[remote "origin"]
         url = ssh://git@bitbucket.org1/bitbucket1/my_project1.git
         fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
        remote = origin
        merge = refs/heads/master

my_project2の場合

[remote "origin"]
         url = ssh://git@bitbucket.org2/bitbucket2/my_project2.git
         fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
        remote = origin
        merge = refs/heads/master

重要なところは url = の部分で以下のように指定します。

ssh://git@[ssh/config のHOSTで設定したラベル]/[Bitbucketのユーザー名]/[リポジトリ名].git

ディレクトリ構成を維持したままコピーするコマンド

ディレクトリ構成を維持したままコピーするコマンドの使い方です。

シンタックス

cp -r [fromdir] [to-dir]

サンプル

Desktopのtestディレクトリ配下を一式、test_backにコピーするイメージです。

cp -r ~/Desktop/test Desktop/test_back

2015年3月3日火曜日

saveで ActiveRecord::ReadOnlyRecordの対処方法

RailsのActiveRecordでsaveしようとしたら、ActiveRecord::ReadOnlyRecordが発生しました。
私の原因として、joinsメソッドを使って取得したレコードに対して、saveしようとしたのがダメなようです。

発生事象

ダメ例を簡単に書くと下記のようになります。

user_items = UserItems.joins(:user)

user_items.each do |user_item|
  user_item.name = 'aaaaa'
  user_item.save ## ここでエラー
end

対処方法

対象方法としては、readonly(false) メソッドを呼び出します。

user_items = UserItems.joins(:user).readonly(false) ## <= 追加

user_items.each do |user_item|
  user_item.name = 'aaaaa'
  user_item.save
end

とやると、saveに成功します。

2015年2月25日水曜日

Middlemanでちゃんとsitemap.xmlを生成する方法

以前に簡単にMiddlemanでsitemapを動的に生成する方法という記事をエントリーしましたが、
本当に簡単なサイトマップで、priorityが固定だったり、lastmodがなかったりと手抜きな感じのサイトマップだったので、もう少しちゃんとした、sitemap.xmlを生成でるような設定のメモです。

Gemfileの追加

Gemfileに下記を追加して、bundle install

# https://github.com/jimweirich/builder
# sitemap.xml feed.xml
gem 'builder'

sitemap.xml.builderの作成

source/sitemap.xml.builder を下記のように作成します。

拡張子が.htmlのファイルに対してのサイトマップを生成していきます。

xml.instruct!
xml.urlset "xmlns" => "http://www.sitemaps.org/schemas/sitemap/0.9" do
  sitemap.resources.each do |resource|
    xml.url do
      xml.loc "http://example.com#{resource.url}"
      xml.lastmod File.mtime(resource.source_file).strftime('%Y-%m-%d')
      xml.priority (1.1 - resource.url.count("/") * 0.1).round(1).to_s
      xml.changefreq "daily"
    end if resource.destination_path =~ /\.html$/
  end
end

http://example.com部分は、環境に合わせて変更してください。

lastmod

ファイル自体の、最終更新時刻からlastmodを指定しています。

priority

priorityはroot直下の階層が1.0
2階層目が0.9
2階層目が0.8

と階層を追う毎に0.1づつpriorityが下がっていきます。

changefreq

changefreqは、上記の書き方では、daily固定になっています。
上記に合わせて、値を変更してください。

説明
always 毎回内容が更新
hourly 1時間毎に変更
daily 1日毎に変更
weekly 1週間毎に変更
monthly 月毎に変更
yearly 年毎に変更
never 基本変わらないページ

また、urlのpath等をみて、振り分けを行ってもよいと思います。

sitemap.xmlの作成

後は、以下を実行しれば、build/sitemap.xmlが生成されるので確認して、サーバーにアップしてください。

middleman b

2015年2月12日木曜日

簡単にMiddlemanでsitemapを動的に生成する方法

Middleman環境で、動的にsitemap.xmlを動的に生成する方法です。

特に、gem等は利用せずに、erbファイルから生成する方法になります。
SEO的にも最低限 サイトマップは用意しておくべきだと思います。

以下がその手順になります。

sitemap.xml.erbの生成

source/sitemap.xml.erbを下記のように作成します。

<% pages = sitemap.resources.find_all{|p| p.source_file.match(/\.html/) } %>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
pages.each do |p|
  <url>
    <loc>http://www.example.com/<%= p.destination_path.gsub('/index.html','') %></loc>
    <priority>0.5</priority>
  </url>
<% end %>
</urlset>

上記の場合、build時に生成される、htmlファイルにたいして、priorityを全て0.5を設定するようになっています。

必要があれば、pages.each do |p| の ループの中でディレクトリ名を見ながら、
以下の値を変更していってください。

<lastmod> 最終更新日
<changefreq> 更新頻度
<priority> 優先順位

sitemapのタグの定義方法に関しては、Goolge - サイトマップを作成する を参考ください。

config.rbへの設定追加

config.rbに以下を追加します。

page "/sitemap.xml", :layout => false

上記で、生成した、source/sitemap.xml.erbを元に、/sitemap.xml を生成してくれます。

ためしに、以下にアクセスして、saitemapが取得できれば成功です。

http://localhost:4567/sitemap.xml

まとめ

比較的簡単に、saitemapの生成が可能です。
細かく設定していこうとすると大変かもしれませんが、必要最低限のサイトマップの生成はできると思います。

参考サイト

http://benfrain.com/understanding-middleman-the-static-site-generator-for-faster-prototyping/

2015年2月6日金曜日

別ドメインのiframeの親のURLを取得する方法

概要

ことなるドメインのiframeを使用した時に、子供のiframeから親のurlを取得する方法です。

そもそも、こんな事をしないといけない時点で、設計ミスなような気がしますが、

今回のケースでは、

iframeでフォームを用意して、親がそれを読み込んでいます。
親は複数ページで同じiframeのフォームを読み込んでいるので、どのページのフォームかを識別する為に、
親のURLを取得したくなってしまったので、その時のメモになります。

結論

結論からすると

document.referrer

を使用するです。

サンプルコード

参考までに、iframe側のフォームのコードになります。

<form id="xxx-form">
    <input id="page_url" name="page_url" type="hidden" value="">
    <div class="form-group">
      <label class="control-label" for="name">name</label>
      <div class="">
        <input class="form-control" id="name" name="name" type="text" value="">
      </div>
    </div>
    <div class="form-group">
      <div class="">
        <input class="form-control btn btn-default" id="submitBtn" name="commit" type="submit" value="送信">
      </div>
    </div>
  </form>


<script>
 $(document).ready(function(){
        $('input#page_url').val(document.referrer);
    });
</script>

ページ読みこみ時に、page_urlのhiddenフィールドに親のurlを設定しています。

まとめ

そもそも、こんなことをしないですむように設計しましよう。

2015年2月4日水曜日

S3+Rout53+独自ドメインで静的サイトをホスティングする方法

静的なサイトをS3のホスティングと独自ドメインで構築する方法です。
今回は、awsの登録や、ドメインの購入は完了済みということを前提にしています。

また、ドメインは、仮にexample.com としてありますので、ご自分で取得したドメインに読み替えて読み進めてください。

S3 の設定

バケットの作成

ホスティングでメインとなるバケットを作成します。
簡単ですが、作成手順は以下になります。

  • S3 > [Create Bucket] ボタンをクリック
  • Bucket Name に ドメイン名[example.com]を指定して、[Create]ボタンをクリック
Bucket Name: example.com
Region: Tokyo

バケットの設定

上記で、バケットの作成が完了したら、propertyから以下を変更します。

Permissions

Edit bucket policy に以下を追加します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::example.com/*"
        }
    ]
}

バケットポリシーの詳細はこちらから確認してください。

Static Website Hosting

  • Enable website hosting に チェックをいれます。

表示されるフォームに以下のように設定します。

Index Document: index.html
Error Document: 404.html

Indexページは、たいていindex.htmlになると思いますが、errorページに関しては、error.html 等、自分のサイトのエラーページに合わせて変更してください。

www.examle.comからのリダイレクト

今回は、サブドメインなしの、examle.com でアクセスをすることを想定していますが、
もし、www.examle.com でurlが来た時に、examle.comにリダイレクトするように、別途バケットを作成しておきます。

www.examle.comバケットの作成

examle.comと同様に、
* S3 > [Create Bucket] ボタンをクリック
* Bucket Name に ドメイン名[www.example.com]を指定して、[Create]ボタンをクリック

www.examle.comバケットの設定

上記手順で、バケットの作成が完了したら、propertyから以下を変更します。

Static Website Hostingの設定

Redirect all requests to another host name にチェック。

Redirect all requests to にリダイレクト先のホスト名を入力する。

今回の例では、以下を指定します。

examle.com

以上で、S3でのバケットの設定は終わりになります。

Rout53

続いて、Route53を使って、DNSの設定をしていきます。

Hoste Zoneの設定

  • Rout53 > Hosteed Zone > [Create Hosted Zone]をクリック
  • Domain Name と Comment と Type を入力して [create] ボタンをクリック。

今回 Domain Nameには、example.com を入力。
Commentには任意のコメントを設定してください。

無事に設定が終わると、Name Serversが設定されるので、これを後でレジストラに設定します。

Aレコードを作成

続いて、Aレコードを作成していきます。

  • 今 作成した、HostZoneを選択して、[Go to Record Sets]をクリック
  • [Create Record Set] ボタンをクリック

設定は以下のように行う。

Name: example.com.
Type: A - IPv4 address
Alias: Yes
Alias Target: 作成したS3のバケットを指定
Routing Policy: Simple

サブドメインには、CNAMEレコードを作成

www.example.comを作成した場合、下記のように設定してください。
また、テスト環境 (test.example.com)のような環境を作成した場合も同様の手順で対応可能です。

Name: www.example.com.
Type: CNAME
TTL 300
Value: www.example.com.s3-website-ap-northeast-1.amazonaws.com
Routing Policy: Simple

これで、DNSの設定は以上です。

レジストラの設定

今回、お名前.com での設定になります。
先ほど、生成されたName Serverをレジストラに設定して行きます。

ネームサーバーの変更

  • ドメイン設定タブのネームサーバーの設定 > ネームサーバーの変更
  • 他のネームサーバーを利用タブを選択
  • ネームサーバー情報を入力のフォームが表示されるのでそこに、Route53で生成された、NameServerの宛先を入力して来ます。

以下のような値を一個づつ入力して、確認画面に進む > 登録

ns-9999.awsdns-99.co.uk
ns-999.awsdns-99.com
ns-999.awsdns-99.net
ns-999.awsdns-99.org

確認

example.comのバケットに index.htmlを配置して ブラウザでhttp://example.comでアクセス。
ちゃんと設定できていれば、表示されることを確認してください。

2015年1月30日金曜日

Skypeの背景色

Skypeの背景色

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

で、答えは。

#00AFF0

です。

調べ方

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

クローム Webストア - ColorZilla

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

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

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

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

ダミー画像生成サービス

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

ほぼほぼ、同じ昨日を提供してくれていて、大きな違いは日本語か英語かの違いぐらいです。
多少なりと使い方に違いはあるものの、日本人なので、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 を指定していますが、
画像種類は、以下の指定が可能です。

  • png
  • jpg

書き方

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を設定する方法

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で対応する方法です。



公式ドキュメントは下記を参考にしてください。
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の指定の仕方によってはクロールが行われないこともありますので
取り扱いには十分注意してください。あくまで自己責任でお願い致します。

参考サイト

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

statistics