Skip to content

Instantly share code, notes, and snippets.

@Watson1978

Watson1978/README.md

Last active July 6, 2017 04:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Watson1978/efee57b15e2f3f8e3e22d58eddc7b5db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Watson1978/efee57b15e2f3f8e3e22d58eddc7b5db to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

セットアップ

$ brew install imagemagick@6
$ gem install nokogiri rmagick

(画像サイズの取得に RMagick を使用していて、それに imagemagick@6 が必要になります。)

Raw
amp.rb
# 使い方
# 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
}
Raw
amp.tmpl
<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>
Raw
sample.css
@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&gt;ul{list-style:disc;margin-left:1.125rem}@media (max-width: 47.9375em){.review__body&gt;ul{margin-left:0.98438rem}}.review__body&gt;ol{list-style:decimal;margin-left:1.125rem}@media (max-width: 47.9375em){.review__body&gt;ol{margin-left:0.98438rem}}.review__body li&gt;ul{list-style:circle;margin-left:1.6875rem}@media (max-width: 47.9375em){.review__body li&gt;ul{margin-left:1.47656rem}}.review__body li&gt;ol{list-style:decimal;margin-left:1.6875rem}@media (max-width: 47.9375em){.review__body li&gt;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:&quot;&quot;;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:&quot;&quot;;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%}}
Raw
sample.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment