Watson1978
7/3/2017 - 12:42 PM
README.md
セットアップ
$ brew install imagemagick@6
$ gem install nokogiri rmagick
(画像サイズの取得に RMagick を使用していて、それに imagemagick@6 が必要になります。)
# 使い方
# ruby amp.rb --help
# ruby amp.rb --html sample.html --css sample.css --template amp.tmpl --img_base ../PATH_TO_ROOT_IMAGE_DIR --canonical http://sample.com --output output.html
css_file_name = 'sample.css'
html_file_name = 'sample.html'
template_file_name = 'amp.tmpl'
output_file_name = 'out.html'
canonical_url = 'http://example.com'
img_base = '.'
require 'optparse'
require 'erb'
require 'nokogiri'
require 'RMagick'
def image_size(path)
image = Magick::ImageList.new(path)
[image.columns, image.rows] # width, height
end
def download_image(url)
# ファイルを /tmp にダウンロードする
file_name = File.basename(url)
downloaded_path = "/tmp/#{file_name}"
system "curl --silent '#{url}' -o '#{downloaded_path}'"
downloaded_path
end
OptionParser.new do |opt|
opt.on('--html HTMLファイル名') { |v|
html_file_name = v
}
opt.on('--css CSSファイル名') { |v|
css_file_name = v
}
opt.on('--template テンプレートファイル名') { |v|
template_file_name = v
}
opt.on('--canonical canonicalに埋め込むURL') { |v|
canonical_url = v
}
opt.on('--img_base ローカルの画像ファイルのルートパス') { |v|
# img タグで相対パスで画像ファイルが指定されていた場合に、
# どこを起点として画像を探すかを指定する
img_base = v
if img_base =~ /(.+)\/+$/
# / で終わっていると curl でダウンロードするときに失敗するので、削除しておく
img_base = $1
end
}
opt.on('--output 出力するファイル名') { |v|
output_file_name = v
}
opt.parse!(ARGV)
end
@canonical = canonical_url
# 各種ファイル読み込み
css = File.read(css_file_name)
html = File.read(html_file_name)
template = File.read(template_file_name)
doc = Nokogiri::HTML(html)
#-------------#
# HTML を処理 #
#-------------#
# <img> タグの width と height を更新、layout=responsive を付加
doc.xpath('//img').each do |img|
src = img["src"]
next unless src # src がなければ次へスキップ
if src.start_with?("http")
# img タグの src が http から始まる場合には、ネットから画像ファイルをダウンロード
src = download_image(src)
else
# img タグの src が http から始まらない場合は相対パスとみなす
# ローカル環境の画像を探すため、画像ファイルが置かれている起点となるディレクトリパスを補う
src = "#{img_base}/#{src}"
# 起点を http://~~ としたらネットから画像ファイルをダウンロードする
src = download_image(src) if src.start_with?("http")
end
begin
width, height = image_size(src)
img["width"] = width
img["height"] = height
rescue
puts "#{src} の width と height の取得に失敗しました。"
end
img["layout"] = "responsive"
end
# HTML の <head> 内の各タグを取得する (<head>タグは含まない)
@header = doc.xpath('//head/*').to_html
# HTML の <body> 内の内容を取得する (<body>タグを含む)
@body = doc.xpath('//body').to_html
# body 中の img タグを amp-img に置き換える
@body = @body.gsub("<img", "<amp-img")
@body = @body.gsub("</img>", "</amp-img>")
#-------------#
# CSS を処理 #
#-------------#
@css = css
# important! を削除する必要がある
@css = @css.gsub(/\s*important!/, "")
# @charset "XXXX" を削除する必要がある
@css = @css.gsub(/@charset.+;/, "")
# CSS の先頭と末尾の空白を除去
@css = @css.strip
#--------------------------#
# AMP HTML をファイルに出力 #
#--------------------------#
erb = ERB.new(template)
File.open(output_file_name, "w") { |f|
f.print erb.result
}
<html amp>
<head>
<style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<link href="<%= @canonical %>" rel="canonical" />
<%= @header %>
<style amp-custom>
<%= @css %>
</style>
</head>
<%= @body %>
</html>
@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}amp-img img{width:auto;height:auto}html{background-color:#ecece5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#4f5258}.container,.narrow-container{padding:0 .5rem;max-width:45rem;margin:0 auto}.a-card{background-color:#fff;border-radius:.1875rem;-webkit-box-shadow:rgba(0,0,0,0.07) 0 0.0625rem 0.125rem;box-shadow:rgba(0,0,0,0.07) 0 0.0625rem 0.125rem}.a-card__header{background-color:#f7d801;border-top-left-radius:0.1875rem;border-top-right-radius:0.1875rem;padding-top:0.75rem;padding-bottom:0.75rem}.a-card__header.is-lg{padding-top:1rem;padding-bottom:1rem}.a-card.is-primary .a-card__header{background-color:#61bb8d}.a-card.is-background-color-shade .a-card__header{background-color:#dcdcd4;border:solid 1px #c9c9ca}.a-card__title{font-size:0.875rem;line-height:1;text-align:center;font-weight:600}@media (max-width: 47.9375em){.a-card__title{font-size:.8125rem}}.a-card__header.is-lg .a-card__title{font-size:1.25rem}@media (max-width: 47.9375em){.a-card__header.is-lg .a-card__title{font-size:1.125rem}}.a-card.is-primary .a-card__title{color:white}.a-card.is-background-color-shade .a-card__title{color:#6d6d61}.a-card__body{border-top:none;border-bottom-left-radius:0.1875rem;border-bottom-right-radius:0.1875rem}.a-card__body.has-no-header{border-top-left-radius:4px;border-top-right-radius:4px}.header{background-color:#fff;position:relative;z-index:1}.header__container{height:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:relative}@media (max-width: 47.9375em){.header__container{height:3.125rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.header-logo{height:100%}.header-logo__link{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width: 47.9375em){.header-logo__link{padding-left:0.5rem;padding-right:0.5rem}}.header-logo__image-container{height:2.25rem;width:2.25rem}.header-logo__image{height:2.5rem;width:100%;max-height:2.5rem}@media (max-width: 47.9375em){.header-logo__image{height:2.25rem;max-height:2.25rem}}.header-logo:hover .header-logo__image{-webkit-animation:zoom .4s ease 0s forwards;animation:zoom .4s ease 0s forwards}.header-logo__labels{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-left:.625rem}@media (max-width: 47.9375em){body.is-signed-in .header-logo__labels{display:none}}.header-logo__site-name{font-size:1rem;line-height:1.3;margin-bottom:0.125rem;font-weight:600;color:#4f5258}.header-logo__lead{font-size:0.625rem;line-height:1.3;color:#a8abb1}.footer{padding-top:3rem;padding-bottom:3rem}@media (max-width: 47.9375em){.footer{padding-top:1rem;padding-bottom:6rem}body.is-no-header .footer,body.is-amp .footer{padding-bottom:1rem}}.footer__main-contens{font-size:.75rem}.footer.is-post .footer-copy{text-align:center}@media (max-width: 47.9375em){.footer-copy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.footer-copy__author{margin-left:0.25rem;margin-right:0.25rem}.footer-copy__author-link{color:#4f5258;text-decoration:none}.footer-copy__author-link:hover,.footer-copy__author-link:active{text-decoration:underline}.footer-copy__author-link:hover{color:#426352}.footer-nav__items{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:1rem}.footer.is-post .footer-nav__items{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width: 47.9375em){.footer-nav__items{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:15rem;margin-left:auto;margin-right:auto}}.footer-nav__item{margin-right:.75rem}.footer.is-post .footer-nav__item{margin-left:0.375rem;margin-right:0.375rem}@media (max-width: 47.9375em){.footer-nav__item{margin-right:0}}.footer-nav__item-link{color:#4f5258;text-decoration:none}.footer-nav__item-link:hover,.footer-nav__item-link:active{text-decoration:underline}.footer-nav__item-link:hover{color:#426352}.review{padding-top:1.5rem;padding-bottom:1.5rem}@media (max-width: 47.9375em){.review{padding-top:1rem;padding-bottom:1rem}}.review__main{position:relative}.review__main-inner{padding:2rem 2.5rem}.review__main.is-mine .review__main-inner{border-top-left-radius:0;border-top-right-radius:0;border-top:none}@media (max-width: 47.9375em){.review__main-inner{padding:.75rem 1rem}}.review__title{font-size:2rem;line-height:1.4 important!;margin-bottom:1.75rem;font-weight:600 important!;resize:none}@media (max-width: 47.9375em){.review__title{font-size:1.21875rem;line-height:1.5;margin-bottom:1.01562rem;font-weight:600}}.review.is-preview .review__title{color:#a8abb1}.review__body{margin-bottom:2rem}.review__body h1{font-size:2rem;line-height:1.4;margin-bottom:1.75rem;font-weight:600;resize:none}@media (max-width: 47.9375em){.review__body h1{font-size:1.53125rem;line-height:1.4;margin-bottom:1.09375rem;font-weight:600}}.review__body h1+*{margin-top:1.125rem !important}@media (max-width: 47.9375em){.review__body h1+*{margin-top:0.98438rem !important}}.review__body h2{font-size:1.5rem;line-height:1.4;font-weight:600;margin-top:2.25rem;margin-bottom:1.125rem;padding-bottom:0.5rem;border-bottom:solid 0.0625rem #ccc}@media (max-width: 47.9375em){.review__body h2{font-size:1.3125rem;line-height:1.4;font-weight:600;margin-top:1.96875rem;margin-bottom:0.98438rem;padding-bottom:0.4375rem}}.review__body h2+*{margin-top:1.125rem !important}@media (max-width: 47.9375em){.review__body h2+*{margin-top:0.98438rem !important}}.review__body h3{font-size:1.25rem;line-height:1.4;font-weight:600;margin-top:2.25rem;margin-bottom:0.75rem}@media (max-width: 47.9375em){.review__body h3{font-size:1.09375rem;line-height:1.4;font-weight:600;margin-top:1.96875rem;margin-bottom:0.75rem}}.review__body h3+*{margin-top:0.75rem !important}@media (max-width: 47.9375em){.review__body h3+*{margin-top:0.65625rem !important}}.review__body h4{font-size:1.125rem;line-height:1.4;font-weight:600;margin-top:2.25rem;margin-bottom:0.75rem}@media (max-width: 47.9375em){.review__body h4{font-size:0.98438rem;line-height:1.4;font-weight:600;margin-top:1.96875rem;margin-bottom:0.75rem}}.review__body h4+*{margin-top:0.75rem !important}@media (max-width: 47.9375em){.review__body h4+*{margin-top:0.65625rem !important}}.review__body h5{font-size:1rem;line-height:1.4;font-weight:600;margin-top:2.25rem;margin-bottom:0.75rem}@media (max-width: 47.9375em){.review__body h5{font-size:0.875rem;line-height:1.4;font-weight:600;margin-top:1.96875rem;margin-bottom:0.75rem}}.review__body h5+*{margin-top:0.75rem !important}@media (max-width: 47.9375em){.review__body h5+*{margin-top:0.65625rem !important}}.review__body p{font-size:1rem;line-height:1.9;margin-top:1.7rem;margin-bottom:1.7rem}@media (max-width: 47.9375em){.review__body p{font-size:0.875rem;line-height:1.9;margin-top:1.4875rem;margin-bottom:1.4875rem}}.review__body a{text-decoration:underline;-webkit-transition:color .2s ease-in;transition:color .2s ease-in;overflow-wrap:break-word;word-break:break-all;white-space:normal;display:inline}.review__body a:hover,.review__body a:active{text-decoration:none}.review__body a:link{color:#0085ff}.review__body a:visited{color:#076dca}.review__body a:hover{color:#0062ff}.review__body a:active{color:#da4453}.review__body .medium-insert-images{margin-top:2rem;margin-bottom:2rem}@media (max-width: 47.9375em){.review__body .medium-insert-images{margin-top:1.75rem;margin-bottom:1.75rem}}.review__body img{max-width:100%;max-height:32rem;height:auto;width:auto;display:block;margin-left:auto;margin-right:auto;margin-top:2rem;margin-bottom:2rem}@media (max-width: 47.9375em){.review__body img{margin-top:1.75rem;margin-bottom:1.75rem}}.review__body p img{margin-top:0;margin-bottom:0}.review__body blockquote{font-size:1rem;line-height:1.9;margin-top:2rem;margin-bottom:2rem;margin-top:2rem;margin-bottom:2rem;padding-left:1.125rem;border-left:solid 0.375rem #d6d6d6;color:#84888e}@media (max-width: 47.9375em){.review__body blockquote{font-size:0.875rem;line-height:1.9;margin-top:1.75rem;margin-bottom:1.75rem}}@media (max-width: 47.9375em){.review__body blockquote{margin-top:1.75rem;margin-bottom:1.75rem;padding-left:0.98438rem}}.review__body ul,.review__body ol{margin-top:1.5rem;margin-bottom:1.5rem}@media (max-width: 47.9375em){.review__body ul,.review__body ol{margin-top:1.3125rem;margin-bottom:1.3125rem}}.review__body li{font-size:1rem;line-height:1.9;margin-top:1rem;margin-bottom:1rem}@media (max-width: 47.9375em){.review__body li{font-size:0.875rem;line-height:1.9;margin-top:0.875rem;margin-bottom:0.875rem}}.review__body>ul{list-style:disc;margin-left:1.125rem}@media (max-width: 47.9375em){.review__body>ul{margin-left:0.98438rem}}.review__body>ol{list-style:decimal;margin-left:1.125rem}@media (max-width: 47.9375em){.review__body>ol{margin-left:0.98438rem}}.review__body li>ul{list-style:circle;margin-left:1.6875rem}@media (max-width: 47.9375em){.review__body li>ul{margin-left:1.47656rem}}.review__body li>ol{list-style:decimal;margin-left:1.6875rem}@media (max-width: 47.9375em){.review__body li>ol{margin-left:1.47656rem}}.review__body *:first-child{margin-top:0}.review__body *:last-child{margin-bottom:0}@media (max-width: 47.9375em){.review__body{margin-bottom:1.25rem}}.review__body.is-edit{min-height:6rem}.review__body.is-edit *:nth-last-child(n){margin-bottom:0}.review-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:1rem}@media (max-width: 47.9375em){.review-meta{margin-bottom:.75rem}}.review-meta__user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.review-meta__user-avatar{height:2.5rem;width:2.5rem;margin-right:.75rem}@media (max-width: 47.9375em){.review-meta__user-avatar{height:2rem;width:2rem}}.review-meta__user-avatar-image{height:100%;width:100%;max-height:100%;max-width:100%;border-radius:.1875rem}.review-meta__user-avatar-image:hover{-webkit-animation:zoom .4s ease 0s forwards;animation:zoom .4s ease 0s forwards}.review-meta__user-name-created-at{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.review-meta__user-name{font-size:0.875rem;line-height:1;margin-bottom:0.25rem;color:#a8abb1}.review-meta__user-name:hover{color:#426352;text-decoration:underline}@media (max-width: 47.9375em){.review-meta__user-name{font-size:0.75rem;line-height:1;margin-bottom:0.125rem}}.review-meta__created-at{font-size:0.875rem;line-height:1;color:#a8abb1;margin-top:.0625rem}@media (max-width: 47.9375em){.review-meta__created-at{font-size:0.625rem;line-height:1}}.review-meta__category{border:solid 0.0625rem #ccc;font-size:0.625rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;color:#a8abb1;height:1.5rem;width:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:0.5rem;padding-right:0.5rem;border-radius:.1875rem;-webkit-transition:color .2s ease-in, background-color .2s ease-in, border-color .2s ease-in;transition:color .2s ease-in, background-color .2s ease-in, border-color .2s ease-in}@media (max-width: 47.9375em){.review-meta__category{font-size:.625rem;height:1.5rem;padding-left:0.375rem;padding-right:0.375rem}}.review-meta__category:hover{border-color:#426352;background-color:#fff;color:#426352}.review-product{border:solid 0.0625rem #ccc;border-radius:.1875rem;max-width:31.25rem;margin-left:auto;margin-right:auto}.review-product__body{display:-webkit-box;display:-ms-flexbox;display:flex;padding:.75rem 1rem 1rem;cursor:pointer}@media (max-width: 47.9375em){.review-product__body{padding:.5rem .75rem .75rem;display:block}}.review-product__image-container{-webkit-box-flex:0;-ms-flex:0 0 6rem;flex:0 0 6rem;height:6rem;margin-right:1rem;width:6rem}@media (max-width: 47.9375em){.review-product__image-container{margin-right:.75rem;margin-bottom:.5rem;float:left}}.review-product__image{max-height:100%;max-width:100%;width:auto;height:auto;display:block;margin-left:auto;margin-right:auto}@media (max-width: 47.9375em){.review-product__image{max-height:6rem;max-width:6rem}}.review-product__image:hover{opacity:.8}.review-product__main{-webkit-box-flex:100;-ms-flex:100;flex:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (max-width: 47.9375em){.review-product__main{display:block}}.review-product__name{font-size:0.875rem;line-height:1.4;margin-bottom:0.25rem;color:#4f5258;font-weight:600}@media (max-width: 47.9375em){.review-product__name{font-size:0.8125rem;line-height:1.4;margin-bottom:0.25rem;color:#4f5258;font-weight:600}}.review-product__name:hover{color:#426352}.review-product__brand{font-size:0.75rem;line-height:1.3;margin-bottom:0.3125rem;color:#a8abb1}@media (max-width: 47.9375em){.review-product__brand{margin-bottom:.25rem}}.review-product__price{font-size:0.875rem;line-height:1;margin-bottom:0.5rem;color:#426352;font-weight:600}@media (max-width: 47.9375em){.review-product__price{font-size:0.75rem;text-align:right}}.review-product__action-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (max-width: 47.9375em){.review-product__action-container{clear:both}}.review-product__action{min-width:8rem}@media (max-width: 47.9375em){.review-product__action{width:100%}}.review-product__action i{margin-left:.5rem}body.is-amp .review-product__action i{display:none}.review-product__action:hover{opacity:.8}.review-product__action[class*=-amazon] i{color:#f69a20}body.is-amp .review-product__action{background-color:#61bb8d;color:white;height:2.25rem;border-radius:.25rem;font-size:0.75rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}body.is-amp .review-product__action[class*=-amazon]{background-color:#232f3e}.review-product__edit-action{margin-top:.25rem;border-radius:.25rem}@media (max-width: 47.9375em){.review-product__edit-action{width:100%}}.review-attention{margin-top:1.5rem;margin-bottom:1.5rem}@media (max-width: 47.9375em){.review-attention{margin-top:0.75rem;margin-bottom:0.75rem}}.review-attention p{font-size:0.625rem;line-height:1.4;color:#a8abb1}.review-next-prev{border-top:solid 0.0625rem #ccc}.review-next-prev__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (max-width: 47.9375em){.review-next-prev__items{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.review-next-prev__items.is-last-review{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}@media (max-width: 47.9375em){.review-next-prev__items.is-last-review{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.review-next-prev-item{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%}.review-next-prev-item.is-prev{border-right:solid 0.0625rem #ccc}@media (max-width: 47.9375em){.review-next-prev-item.is-prev{border-right:none;border-top:solid 0.0625rem #ccc}.review-next-prev__items.is-last-review .review-next-prev-item.is-prev{border-top:none}}.review-next-prev__items.is-first-review .review-next-prev-item.is-next{border-left:solid 0.0625rem #ccc}@media (max-width: 47.9375em){.review-next-prev__items.is-first-review .review-next-prev-item.is-next{border-left:none}}.review-next-prev-item__link{display:block;position:relative;padding-top:1rem;padding-bottom:1rem;-webkit-transition:color .2s ease-in;transition:color .2s ease-in}@media (max-width: 47.9375em){.review-next-prev-item__link{padding-top:0.5rem;padding-bottom:0.5rem}}.review-next-prev-item__link::before{height:100%;font-size:1.75rem;line-height:1;color:#a8abb1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:0;display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}@media (max-width: 47.9375em){.review-next-prev-item__link::before{font-size:1.25rem}}.review-next-prev-item__link:hover::before{color:#426352}.review-next-prev-item.is-next .review-next-prev-item__link{padding-left:1.75rem;padding-right:2.75rem}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link{padding-left:1.75rem;padding-right:1.75rem}@media (max-width: 47.9375em){.review-next-prev-item.is-next .review-next-prev-item__link{padding-left:0;padding-right:1.5rem}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link{padding-left:0;padding-right:0}}.review-next-prev-item.is-next .review-next-prev-item__link::before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"";right:0}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link::before{content:none}.review-next-prev-item.is-prev .review-next-prev-item__link{padding-left:2.75rem;padding-right:1.75rem}body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link{padding-left:1.75rem;padding-right:1.75rem}@media (max-width: 47.9375em){.review-next-prev-item.is-prev .review-next-prev-item__link{padding-left:1.5rem;padding-right:0}body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link{padding-left:0;padding-right:0}}.review-next-prev-item.is-prev .review-next-prev-item__link::before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"";left:0}body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link::before{content:none}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link,body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link{background-repeat:no-repeat;background-size:.75rem .75rem}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link{background-image:url(/assets/ui-icons/angle-right-499a2aa39cb22e9562f685d89d160f1377949d596088fc3bde157a577d31d2a1.svg);background-position:right center}body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link{background-image:url(/assets/ui-icons/angle-left-3fc5a05ff8ccb7b7aa5e6f77e2e028cc15c535686d6251122f1e05f7da86dd2c.svg);background-position:left center}.review-next-prev-item__link-inner{position:relative;padding-left:4.125rem;height:3.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width: 47.9375em){.review-next-prev-item__link-inner{height:3.25rem}.review-next-prev-item.is-next .review-next-prev-item__link-inner{padding-left:3.75rem}body.is-amp .review-next-prev-item.is-next .review-next-prev-item__link-inner{padding-left:0;padding-right:1.75rem}.review-next-prev-item.is-prev .review-next-prev-item__link-inner{padding-right:3.75rem;padding-left:0}body.is-amp .review-next-prev-item.is-prev .review-next-prev-item__link-inner{padding-right:0;padding-left:1.75rem}}.review-next-prev-item__title{font-size:0.8125rem;line-height:1.4;color:#4f5258;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.2em}@media (max-width: 47.9375em){.review-next-prev-item__title{font-size:.75rem}}.review-next-prev-item__link:hover .review-next-prev-item__title{color:#426352}.review-next-prev-item__image-container{height:100%;width:3.25rem;background-size:cover;background-repeat:no-repeat;background-position:center center;overflow:hidden;position:relative;border-radius:.1875rem;position:absolute;left:0;top:0}.review-next-prev-item__image-container img{position:absolute;left:-100%;top:0}.review-next-prev-item__image-container img.a-spacer{position:static;height:auto;width:100%;display:block}@media (max-width: 47.9375em){.review-next-prev-item__image-container{height:3.25rem;width:3.25rem}.review-next-prev-item__link.is-prev .review-next-prev-item__image-container{position:absolute;left:auto;right:0;top:0}}.review-next-prev-item__link:hover .review-next-prev-item__image-container{opacity:.8}.review-next-prev-item__image{max-width:3.25rem;max-height:3.25rem;display:block;margin-left:auto;margin-right:auto}@media (max-width: 47.9375em){.review-next-prev-item__image{max-width:2.25rem;max-height:2.25rem}}.review-sns-links{position:absolute;left:-4.75rem;top:0;width:2.75rem}.review-sns-links.is-stack{position:fixed;left:0;top:0}body.is-amp .review-sns-links{position:static;width:auto;margin-top:1rem;margin-bottom:1rem}@media (max-width: 47.9375em){body.is-amp .review-sns-links{margin-bottom:.5rem}}@media (max-width: 47.9375em){.review-sns-links{position:static !important;width:100%}}body.is-amp .review-sns-links__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width: 47.9375em){.review-sns-links__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.review-sns-links__item{width:2.75rem}.review-sns-links__item.is-line{display:none}@media (max-width: 47.9375em){.review-sns-links__item.is-line{display:block}}body.is-amp .review-sns-links__item{margin-left:0.25rem;margin-right:0.25rem}.review-sns-links__item-link{height:2.75rem;width:2.75rem;font-size:1.5rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;color:#ccc;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%}.review-sns-links__item-link:hover{color:white}.review-sns-links__item.is-twitter .review-sns-links__item-link:hover{background-color:rgba(85,172,238,0.7)}.review-sns-links__item.is-facebook .review-sns-links__item-link:hover{background-color:rgba(59,89,152,0.7)}.review-sns-links__item.is-hatena .review-sns-links__item-link:hover{background-color:rgba(0,143,222,0.7)}.review-sns-links__item.is-line .review-sns-links__item-link:hover{background-color:rgba(44,191,32,0.7)}.review-sns-links__item.is-line .review-sns-links__item-link-image{height:auto;width:66%;fill:#ccc}.review-sns-links__item.is-line .review-sns-links__item-link:hover .review-sns-links__item-link-image{fill:white}amp-social-share{border-radius:50%}.amp-social-share-twitter{background-size:60%}.amp-social-share-facebook{background-size:70%}.amp-social-share-hatena{background-color:#008FDE;height:2.75rem;width:2.75rem;background-image:url(/assets/sns-icons/hatena-2b83267003d8fb612e3c3ee52bed31301d0ec67cca8110cf887e556d58942af4.svg);background-size:50%}.amp-social-share-line{background-color:#2cbf20;height:2.75rem;width:2.75rem;background-image:url(/assets/sns-icons/line-f02ca149f3a699ab4071d4c1040c9b29d1bd76611cea6d7138736d04bb2944b2.svg);background-size:50%}.review-author{border-top:solid 0.0625rem #ccc;padding-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width: 47.9375em){.review-author{display:block;padding-top:1rem}}.review-author__user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:100;-ms-flex:100;flex:100}@media (max-width: 47.9375em){.review-author__user{padding-right:0;margin-bottom:1rem}}.review-author__user-name-profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:1rem}@media (max-width: 47.9375em){.review-author__user-name-profile{margin-right:0}}.review-author__user-name{font-size:1rem;line-height:1.4;margin-bottom:0.125rem;color:#4f5258;font-weight:600}@media (max-width: 47.9375em){.review-author__user-name{font-size:.875rem}}@media (max-width: 47.9375em){.review-author__profile{margin-bottom:.25rem}}.review-author__user-avatar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:1rem;-webkit-box-flex:0;-ms-flex:0 0 4rem;flex:0 0 4rem;height:4rem;width:4rem}@media (max-width: 47.9375em){.review-author__user-avatar{-webkit-box-flex:0;-ms-flex:0 0 2.75rem;flex:0 0 2.75rem;height:2.75rem;width:2.75rem}}.review-author__user-avatar-image{display:block;height:100%;width:100%;max-width:100%;max-height:100%;border-radius:.1875rem}.review-author__user:hover .review-author__user-avatar-image{opacity:.8}.review-author__profile p{font-size:0.75rem;line-height:1.45;color:#a8abb1}.review-author__profile *:last-child{margin-bottom:0}.review-author__link-label{font-size:0.75rem;line-height:1.45;text-decoration:underline;-webkit-transition:color .2s ease-in;transition:color .2s ease-in}.review-author__link-label:hover,.review-author__link-label:active{text-decoration:none}.review-author__link-label:link{color:#0085ff}.review-author__link-label:visited{color:#076dca}.review-author__link-label:hover{color:#0062ff}.review-author__link-label:active{color:#da4453}.review-author-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 8.5rem;flex:0 0 8.5rem}@media (max-width: 47.9375em){.review-author-actions{display:block}}.review-author-actions__items{width:100%}.review-author-actions__item-link{display:-webkit-box;display:-ms-flexbox;display:flex;width:7.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width: 47.9375em){.review-author-actions__item-link{margin-left:auto;margin-right:auto;width:100%}}
<!doctype html>
<html amp="">
<head>
<meta charset="utf-8" />
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport" />
<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<script async="" custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style amp-custom="">
</style>
</head>
<body class="is-amp is-reviews is-reviews-show is-no-post-review is-chrome reviews--show is-pc">
<header class="header" />
<div class="container">
<div class="header__container">
<div class="header-logo">
<a class="header-logo__link" href="/" />
<div class="header-logo__image-container">
<img alt="Boughtit 買ってよかった" class="header-logo__image" height="132" layout="responsive" src="/assets/logo-sm-c00d1018e03bf303b4a1cddbbcae5ea046382fa0260634ad7de93e41a9a39832.svg" width="132" />
</div>
<div class="header-logo__labels">
<div class="header-logo__site-name">Boughtit</div>
<div class="header-logo__lead">買ってよかった投稿サイト</div>
</div>
</div>
</div>
</div>
<div class="review">
<div class="narrow-container">
<div class="review-meta">
<a class="review-meta__user" href="/@komagata" />
<div class="review-meta__user-avatar">
<amp-img alt="komagata" class="review-meta__user-avatar-image" height="40" layout="responsive" src="https://boughtit.storage.googleapis.com/users/avatars/000/000/001/thumb/draw_komagata.png?1497337424" width="40" />
</div>
<div class="review-meta__user-name-created-at">
<div class="review-meta__user-name">komagata</div>
<time class="review-meta__created-at">2017年03月29日</time>
</div>
<a class="review-meta__category" href="/categories/9999">その他</a>
</div>
<main class="review__main a-card" />
<div class="review__main-inner a-card__body has-no-header">
<h1 class="review__title">1000円で懐かしくてかわいい腕時計</h1>
<div class="review__body">
<p>つい先日、スペイン旅行に行きました。そのときにApple Watchは充電用のモロモロを持っていくのも面倒だし、スリが多いそうなので盗まれたり壊れたりしたら嫌なので持っていきませんでした。</p>
<p>旅の間、電車の時間や次の観光スポットの予約時間など、時間を気にすることが多々あってスマホを出したり閉まったりが忙しかった記憶があります。</p>
<p>帰ってきてからは「なくしてもかまわない安い腕時計が欲しい」という気持ちが高まり、「チープカシオ」で色々検索した結果買ってしまいました。</p>
<div class="medium-insert-images ui-sortable">
<figure contenteditable="false"></figure>
<img alt="" class="ui-sortable-handle" src="https://boughtit.storage.googleapis.com/images/images/000/000/017/original/17596543_629818853871686_3403649062526779392_n.jpg?1490771177" />
</div>
<p>最近は百均の腕時計も人気とのことで、安くて1000円ぐらいでかわいい時計がたくさんあります。</p>
<p>リアル80年代世代としては懐かしさとかわいさが相まって物欲が爆発してしまいます。</p>
<p>ついでに奥さんにレディースを買ったら1000円としてはありえないほど喜ばれました。これはコスパが高い。</p>
<p>自分用にはTPOに合わせてアナログのを狙っているところです。</p>
</div>
<div class="review-product">
<a class="review-product__body" href="http://www.amazon.co.jp/exec/obidos/ASIN/B00O9ISJV6/p0t-22" target="_blank" />
<div class="review-product__image-container">
<amp-img alt="41ddyl9uirl" class="review-product__image" height="375" layout="fixed" src="https://images-fe.ssl-images-amazon.com/images/I/41DDYL9uiRL.jpg" width="500" />
</div>
<div class="review-product__main">
<div class="review-product__name-data">
<div class="review-product__name">カシオ CASIO スタンダード デジタル メンズ 腕時計 A158WA-1JF</div>
<div class="review-product__data">
<div class="review-product__price">¥1,410</div>
</div>
</div>
<div class="review-product__action-container">
<div class="review-product__action is-button-flat-sm-amazon">
amazon
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="review-sns-links">
<ul class="review-sns-links__items">
<li class="review-sns-links__item">
<amp-social-share height="44" type="twitter" width="44"></amp-social-share>
</li>
<li class="review-sns-links__item">
<amp-social-share data-param-app_id="1947323638822008" height="44" type="facebook" width="44"></amp-social-share>
</li>
<li class="review-sns-links__item">
<amp-social-share class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined amp-social-share-hatena i-amphtml-layout" data-share-endpoint="http://b.hatena.ne.jp/entry/https://boughtit.jp/reviews/30.amp" height="44" layout="container" type="hatena" width="44"></amp-social-share>
</li>
<li class="review-sns-links__item">
<amp-social-share class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined amp-social-share-line i-amphtml-layout" data-share-endpoint="http://line.me/R/msg/text/?TITLE%3ASOURCE_URLhttps://boughtit.jp/reviews/30.amp" height="44" layout="container" type="line" width="44"></amp-social-share>
</li>
</ul>
</div>
<div class="review-attention">
<p>この投稿は、komagataさんの主観的なご意見・ご感想であり、商品の価値を客観的に評価するものではありません。また、この投稿は購入した当時のものです。内容、金額等が現在と異なる場合がありますので、購入の際は必ず販売サイト、公式サイト等でご確認ください。</p>
</div>
<nav class="review-next-prev" />
<ul class="review-next-prev__items">
<li class="review-next-prev-item is-next">
<a class="review-next-prev-item__link is-next" href="/reviews/68" />
<div class="review-next-prev-item__link-inner">
<div class="review-next-prev-item__title">オリジナルマグネットでホワイトボードがクッソ捗るwww</div>
</div>
</li>
<li class="review-next-prev-item is-prev">
<a class="review-next-prev-item__link is-prev" href="/reviews/29" />
<div class="review-next-prev-item__link-inner">
<div class="review-next-prev-item__title">iPadスタンドが人間性を奪う</div>
</div>
</li>
</ul>
<div class="review-author">
<a class="review-author__user" href="/@komagata" />
<div class="review-author__user-avatar">
<amp-img alt="komagata" class="review-author__user-avatar-image" height="64" layout="responsive" src="https://boughtit.storage.googleapis.com/users/avatars/000/000/001/thumb/draw_komagata.png?1497337424" width="64" />
</div>
<div class="review-author__user-name-profile">
<div class="review-author__user-name">komagata</div>
<div class="review-author__profile">
<p>
合同会社フィヨルドでプログラマーをしています。
ストレスが溜まると便利グッズを衝動買いします。
主にゲームやガジェットをレビューしていきます。
</p>
</div>
<div class="review-author__link-label">komagataさんの買ってよかった一覧</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer" id="footer" />
<div class="container">
<div class="footer__main-contens">
<nav class="footer-nav" />
<ul class="footer-nav__items">
<li class="footer-nav__item">
<a class="footer-nav__item-link" href="/helps/tos">利用規約</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__item-link" href="/helps/pp">プライバシーポリシー</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__item-link" href="/helps">使い方</a>
</li>
</ul>
<div class="footer-copy">
<span class="footer-copy__icon">
<i class="fa fa-copyright"></i>
</span>
<span class="footer-copy__current-year">2017</span>
<span class="footer-copy__author">
<a class="footer-copy__author-link" href="http://fjord.jp" target="_blank">合同会社フィヨルド</a>
</span>
<span class="footer-copy__reserved">All Rights Reserved.</span>
</div>
</div>
</div>
</body>
</html>