ホームページリニューアルした際に遭遇した課題と解決方法について




* [Vagrant](https://www.vagrantup.com) + [Virtual Box](https://www.virtualbox.org) で仮想マシン作って開発したい。
* [Yeoman](http://yeoman.io) で開発を楽にしてみたい。
* [Materialize](http://materializecss.com)というフロントエンドフレームワーク見つけたので使ってみたい。
* [Tumblr](https://www.tumblr.com/)にブログ作って、そのRSSを使ってホームページにリンクを表示したい。
* [Bitbucket](https://bitbucket.org)にプライベートリポジトリ作ってgit経由でデプロイしたい。

という欲望が高まったので、直書きで放置していた自分のホームページである[OgwMtnr net](http://ogwmtnr.net)をリニューアルしてやろうと行動した際の記録です。
自分用ですが、誰かの助けになれば幸い。
開発環境の構築方法については後日アップしたい所存。

##yoの雛形
`generator-webapp`を使用。
Webサービス開発は覚える事が多いので、まずは基本的なものを使って開発環境に慣れるところから始めよう。

##`$ bower install`とか`$ npm install`が遅い

CentOS6.5のBoxを使っていたので、[Vagrant+VirtualBox（CentOS6）で「gem install rails」がすっごい遅い時の対処法](http://www.ideaxidea.com/archives/2013/08/resolv.html)に当てはまった。
書いてある通り、`/etc/resolv.conf`に以下を追記しよう。

```Bash:/etc/resolv.conf
options single-request-reopen
```

##`$ grunt serve`が起動しない
最近よくある nginx + php-fpm 構成が仮想マシン内で動いている場合、`php-fpm`が9000番を埋めているので、止めるなりポート番号を変更するなりしよう。
その場合に楽なのは、`Gruntfile.js`にある`connect:option:port`を9000以外にする方法。
この方法を実行した場合は、以下9000番で説明しているものは全て変更後のポート番号を適用してほしい。

##ポートフォワードが効かない？

`Vagrantfile`をいじって、`$ grunt serve`時に使用する9000と35729をポートフォワードしたのだが、`http://localhost:9000`にアクセスしてもエラーになってしまう。
仮想マシンを再起動してもダメ。
だったので、プライベートIPを与える事にした。

```ruby:Vagrantfile
-#config.vm.network "private_network", ip: "192.168.33.10"
+config.vm.network "private_network", ip: "192.168.33.10"
```

この場合、`Gruntfile.js`にある`connect:option:hostname`も`192.168.33.10`に変更しよう。
`$ grunt serve`した際は`http://localhost:9000`ではなく、`http://192.168.33.10:9000`にアクセスすれば見れる。
つまり、ポートフォワードが何故か効かない件はあきらめた！
良く言えば、解決に注ぐ時間を開発に充てた。

##`$ grunt build`してできるフォルダの名前を変えたい

`htdocs`の命名を使いたかったので、`Gruntfile.js`の20行目あたりにある`var config:dist`の値を`dist`から`htdocs`に書き換えた。

##`$ bower install`したライブラリで使用しているフォントがビルド後に反映されない

ビルドしたものをブラウザで見てみると、ライブラリで使用しているフォントの部分がちゃんと表示されていない。
四角にバツみたいなのになってた。
どうやらビルド先にフォントデータが存在しないため、不明な表示になっていた様子。
そのため`$ grunt build`した際、出力先にフォントデータをコピーしてやる必要があります。
自分は[Font Awesome](http://fortawesome.github.io/Font-Awesome/)と[Materialize](http://materializecss.com)を使っていたので、両方で使用しているフォントをコピーしました。
以下は`Gruntfile.js`に追記した部分の前後です。
300行目あたりにあるはず。


```javascript:Gruntfile.js
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= config.app %>',
          dest: '<%= config.dist %>',
          src: [
            '*.{ico,png,jpg,txt}',
            'images/{,*/}*.webp',
            '{,*/}*.html',
            'styles/fonts/{,*/}*.*'
          ]
        }, {
          src: 'node_modules/apache-server-configs/dist/.htaccess',
          dest: '<%= config.dist %>/.htaccess'
        }, {
          expand: true,
          dot: true,
          cwd: 'bower_components/font-awesome',
          src: ['fonts/*.*'],
          dest: '<%= config.dist %>'
        }, {
          expand: true,
          dot: true,
          cwd: 'bower_components/materialize',
          src: [
            'font/material-design-icons/*.*',
            'font/roboto/*.*'
          ],
          dest: '<%= config.dist %>'
        }]
      },
      styles: {
        expand: true,
        dot: true,
        cwd: '<%= config.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },
```

##初めて`jshint`監視下でjs書いたら思ったより厳しい

[JSHintで気軽なコーディングを](http://blog.craftgear.net/50832ff38cdc8fb415000001/title/JSHintで気軽なコーディングを)を参考にしました。
エラーや警告をされないように、jsを書いていこう。

###`use strict`を書け！
とにかく、関数開始時に`'use strict'`を書いておかないと相手にしてくれない。

###文字列はシングルクォーテーションで！
htmlタグとか出力しようとすると自然とシングルで統一したくなるよね。

###`alert()`がエラーになっちゃうんだけど...
プロジェクトルートにある`.jshintrc`に、

```javascript:.jshintrc
"devel": true
```

を追記しよう。
`console()`や`alert()`を定義済みと判断してくれるようになる。

###Google Feed API で定義されているものを使いたい
Tumblrで書いたものを、Google Feed API を使ってRSS拾ってきてjQueryからhtml吐き出すようにしたい。
と思ってjs書いてみたら、`googleオブジェクトが定義されていません`と怒られた。
ので、jsファイルの文頭に

```javascript:app/scripts/*.js
/*global google:false */
```

を書いておけば、`google`を定義済みとして扱ってくれます。

##favicon作る便利ツール

[【追記あり】Macでファビコンつくるなら。透過にも複数サイズにも対応したアイコン作成ウェブサービス「iconifier.net」](http://suikoudesign.com/suikolog/design/1811)を参考に、`260*260`の画像を用意してから

* [iconifier.net](http://iconifier.net)
* [Favicon Generator. For real.](http://realfavicongenerator.net)

を利用して、以下のように落ち着いた。

```html:app/*.html
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <meta name="msapplication-TileColor" content="#1e88e5">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    <meta name="theme-color" content="#ffffff">
```

多いなぁ〜！

##OGP対応

[Facebookなどでサイトが共有された時、リッチ表示するOGPの設定](http://millkeyweb.com/facebook-ogp/)を参考に、以下のようにした。

```html:app/*.html
    <meta property="og:site_name" content="OgwMtnr net" />
    <meta property="og:title" content="OgwMtnr net" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://ogwmtnr.net" />
    <meta property="og:image" content="http://ogwmtnr.net/ogimage.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    <meta property="og:description" content="have a nice day! this is ogwmtnr's homepage." />
    <meta property="og:email" content="mynameis@ogwmtnr.net" />
```

今は`index.html`しかないので、他にページ作ったら適時変更。

##`og:image`で使っている画像がリネームされてもタグ内要素が書き換わってくれない。

通常、`$ grunt build`した際は画像ファイルがリネーム、正確に言うとファイル名に接頭辞が付与されて（`blue.png -> asdfasdf.blue.png`など）それを使用している`*.html`の内部もリネームされる。

```html:ex)
image/blue.png
↓
image/asdfasdf.blue.png

<img src="image/blue.png" />
↓
<img src="image/asdfasdf.blue.png" />
```

上記OGPの`og:image`要素は絶対パスで画像ファイルを指定する必要がありそのように記述しているが、その場合リネームしてくれない。

```html:ex)
ogimage.png
↓
qewrqwer.ogimage.png

<meta property="og:image" content="http://ogwmtnr.net/ogimage.png" />
↓
<meta property="og:image" content="http://ogwmtnr.net/ogimage.png" />
```

この場合、`Gruntfile.js`に`ogimage.png`のリネームを無視してもらうよう設定する。
200行目あたりにある。

```javascript:Gruntfile.js
    // Renames files for browser caching purposes
    rev: {
      dist: {
        files: {
          src: [
            '<%= config.dist %>/scripts/{,*/}*.js',
            '<%= config.dist %>/styles/{,*/}*.css',
            '<%= config.dist %>/images/{,*/}*.*',
            '<%= config.dist %>/styles/fonts/{,*/}*.*',
            '<%= config.dist %>/*.{ico,png}',
            '!<%= config.dist %>/ogimage.png'
          ]
        }
      }
    },
```

##最後に

ベタ書きにせよYeoman環境で何がしかのページは作れたので、AltJSとかも徐々に触っていきたい！

##感謝

参考にさせていただいたサイト管理人の皆様、誠にありがとうございました。