phoenix-power私もたまにアニメの感想とか読みたいな思って、検索することがあるのですが、まともなサイトが全くヒットしないので、困っています。

ごちうさ感想でGoogle検索し、10ページ以内にあったまともな記事は、たった2つでした。

『ご注文はうさぎですか?』感想。 - ぱっしょん

Clap your Sunday!: ご注文はうさぎですか? を考える。感想。

後は、まとめサイトFC2かどちらかという感じでした。FC2は、広告が凄くてあまり好きではないので除きました。また、文字数が極端に少ない場合も除外しています。

スマホでも苦もなく読めて、かつ自分好みのアニメ感想サイトがなかなか見つかりません。

よって、作ってみることにしました。使ったのは、以下の様なものです。良さそうなテンプレートが公開されていたので、それを参考にしました。

実際、サイトを立ち上げるまでは一瞬でできます。

1
2
3
4
5
6
7
8
9
$ gem install middleman

$ git clone https://github.com/biblichor/middleman-blog-bootstrap-template.git ~/.middleman/blog-bootstrap

$ middleman init my_new_project --template=blog-bootstrap

$ cd my_new_project

$ bower install

こんな感じで必要な物をインストールして、後は設定ファイルを書いて、

my_new_project/config.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Build-specific configuration
configure :build do
  #activate :gzip
  activate :minify_css
  activate :minify_javascript
  activate :asset_host, :host => "/my_new_project"
  activate :asset_hash
  set :relative_links, true
end

activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

デプロイするだけです。

$ middleman deploy

しかし、調整には結構面倒でした。slimを書き始めたばかりというのや、そもそもbootstrapのカスタマイズをあまり分かってないことが大きかったです。

とりえず、時間がかかったところだけ紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/! 記事全体にエフェクト
- page_articles.each_with_index do |article, i|
  .article-o [onclick="location.href=".#{article.url}";" style="cursor: pointer;"]

/! アイキャッチ画像
img[width="600" height="300" id="img-responsive" src=article.data.image_src]

/! なんか知らないけど、タグだけリンクが動作しなかったので、その対応(root urlの/animeを追加)
.well
  h4 アニメ一覧
  ul.list-unstyled
    - blog.tags.each do |tag, articles|
      li
        = link_to tag, "/anime#{tag_path(tag)}"
        |  (
        = articles.size
        | )

一番最後のリンクが動作しない奴は、多分、GitHub Pagesのプロジェクトページを使っていることが原因だと思われます。設定で対応できそうだけど、分からなかったので、強引にURLを修正して対応しました。

あとは、CSS周りも。特にモバイル対応ですが、ちょっとよく分からなかったです。iPhoneで確認したのですが、前、Middleman触った時とだいぶフォントサイズが違うので。20px -> 35pxにしないと、小さい感じになってしまう。

bower_components/sass-bootstrap/lib/_variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  992px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

$font-size-base:          16px !default;
$font-size-large:         ceil($font-size-base * 1.25) !default; // ~18px
$font-size-small:         ceil($font-size-base * 1.0) !default; // ~12px

$font-size-h1:            floor($font-size-base * 2.6) !default; // ~36px
$font-size-h2:            floor($font-size-base * 2.15) !default; // ~30px
$font-size-h3:            ceil($font-size-base * 1.7) !default; // ~24px
$font-size-h4:            ceil($font-size-base * 1.25) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil($font-size-base * 0.85) !default; // ~12px

フォントサイズとか一括設定があって、便利。

source/css/_mobile.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media screen and (max-width: 992px) {

  body {
    font-size: 35px;
  }

  .container {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .col-lg-3.col-md-3 {
    padding-left: 4;
    padding-right: 4;
  }
  .col-lg-9.col-md-9 {
    padding-left: 4;
    padding-right: 4;
  }

}

ここで、アニメブログの方針としては、自分が読みたい感想を書く感じでやってくつもりです。具体的には、①BD、OP、CMとかの情報、②好きなキャラとキャラ解説、③物語の評価という感じです。

目次とかアマゾンとかもそのうち付けられれば付けるかもしれません。

https://github.com/AknEp/middleman-toc-sample

https://github.com/andrusha/middleman-cloudfront