- 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とかも徐々に触っていきたい！
感謝
参考にさせていただいたサイト管理人の皆様、誠にありがとうございました。