- Vagrant + Virtual Box で仮想マシン作って開発したい。
- Yeoman で開発を楽にしてみたい。
- Materializeというフロントエンドフレームワーク見つけたので使ってみたい。
- Tumblrにブログ作って、そのRSSを使ってホームページにリンクを表示したい。
- Bitbucketにプライベートリポジトリ作ってgit経由でデプロイしたい。
という欲望が高まったので、直書きで放置していた自分のホームページであるOgwMtnr netをリニューアルしてやろうと行動した際の記録です。
自分用ですが、誰かの助けになれば幸い。
開発環境の構築方法については後日アップしたい所存。
##yoの雛形
generator-webapp
を使用。
Webサービス開発は覚える事が多いので、まずは基本的なものを使って開発環境に慣れるところから始めよう。
##$ bower install
とか$ npm install
が遅い
CentOS6.5のBoxを使っていたので、Vagrant+VirtualBox(CentOS6)で「gem install rails」がすっごい遅い時の対処法に当てはまった。
書いてある通り、/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を与える事にした。
-#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とMaterializeを使っていたので、両方で使用しているフォントをコピーしました。
以下はGruntfile.js
に追記した部分の前後です。
300行目あたりにあるはず。
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で気軽なコーディングをを参考にしました。
エラーや警告をされないように、jsを書いていこう。
###use strict
を書け!
とにかく、関数開始時に'use strict'
を書いておかないと相手にしてくれない。
###文字列はシングルクォーテーションで!
htmlタグとか出力しようとすると自然とシングルで統一したくなるよね。
###alert()
がエラーになっちゃうんだけど...
プロジェクトルートにある.jshintrc
に、
"devel": true
を追記しよう。
console()
やalert()
を定義済みと判断してくれるようになる。
###Google Feed API で定義されているものを使いたい
Tumblrで書いたものを、Google Feed API を使ってRSS拾ってきてjQueryからhtml吐き出すようにしたい。
と思ってjs書いてみたら、googleオブジェクトが定義されていません
と怒られた。
ので、jsファイルの文頭に
/*global google:false */
を書いておけば、google
を定義済みとして扱ってくれます。
##favicon作る便利ツール
【追記あり】Macでファビコンつくるなら。透過にも複数サイズにも対応したアイコン作成ウェブサービス「iconifier.net」を参考に、260*260
の画像を用意してから
を利用して、以下のように落ち着いた。
<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の設定を参考に、以下のようにした。
<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
の内部もリネームされる。
image/blue.png
↓
image/asdfasdf.blue.png
<img src="image/blue.png" />
↓
<img src="image/asdfasdf.blue.png" />
上記OGPのog:image
要素は絶対パスで画像ファイルを指定する必要がありそのように記述しているが、その場合リネームしてくれない。
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行目あたりにある。
// 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とかも徐々に触っていきたい!
##感謝
参考にさせていただいたサイト管理人の皆様、誠にありがとうございました。