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でアクセス。
ちゃんと設定できていれば、表示されることを確認してください。

statistics