最近Vue.jsを勉強してます。Nuxt v2が半年ほど前にアナウンスされ、先日ようやくリリースされました。良い機会なのでTypeScriptで開発できる環境構築をメモしておきます。Vueファイル内のHTMLはPug（Jade）にします。 Nuxt.js v2 TypeScript eslint nuxt-class-component Pug（Jade） Nuxt.js v2 setup vue cli を使うのでインストールしておきます $ npm i -g vue-cli スターターテンプレートから始めます。Nuxtのインストールはこちらを参考にしてます。 https://ja.nuxtjs.org/guide/installation $ vue init nuxt-community/starter-template example $ cd example $ yarn or npm i（以下yarn） これを書いてる現時点ではversionが 1.0.0 のままなので、 yarn remove して再インストールします。 $ yarn remove nuxt $ yarn add nuxt package.json を開いて確認してみてください package.json 1 2 - "nuxt": "^1.0.0" + "nuxt": "^2.

続きを読む

勉強がてらTypeScriptで運営してるサービスを作りなおしているんですが、mongooseのところでちょっとハマったのでメモします。 monooseをインストールして、型定義ファイルもインストールします。 command 1 $ npm i -S mongoose $ typings install -SG dt~mongoose TypeScriptファイルにmongooseをimportします。 command 1 import * as mongoose from 'mongoose'; これでコンパイルすると、 command 1 Error TS2307: Cannot find module 'mongodb'. mongodbがないよ。と怒られるのでインストールします。 command 1

続きを読む

先人の知恵を借りるべく、ググッたりして調べましたが、なかなかできずに試行錯誤した結果、なんとかmigrateができたんでメモしておきます。 作業環境 Node.js v0.10.26 PostgreSQL Sequelize [CLI: v0.2.4, ORM: v1.7.9] もろもろインストール Node.jsはインストールしている前提に話を進めますね。 PostgreSQLをインストール 自分はbrewで入れました。 command 1 $ brew install postgresql パスを通しておきます command 1 export PGDATA=/usr/local/var/postgres node-postgresをインストール アプリとグローバル両方インストールします。ちなみにnpm install は npm i で略せます(^ ^) command 1 2 $ npm install pg -S $ npm i pg -g sequelizeをインストール command 1

続きを読む

対処法ってことじゃないですが、メモです。pgはnode-postgresのことで、postgresはpostgresSQLのことでデータベースのことです。 Sequelizeを使ってみようと思い、 ドキュメントのセットアップ通りに進めてたら、npm install –save sequelize pg mysql のところでコケました。 command 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $ npm install --save sequelize pg mysql ...(ry > pg@3.4.0 install /Users/home/Dropbox/tk-box/server/node_modules/pg > node-gyp rebuild || (exit 0) /bin/sh: pg_config: command not found gyp: Call to 'pg_config --libdir' returned exit status 127. gyp ERR! configure error gyp ERR!

続きを読む

package.jsonをどう書けばいいのかよくわからない・・・。jade, coffee-script, stylusだけをgitで管理し、gruntでビルドしたjs, css, bower_componentsとかは、gitで管理する必要がない。流れ的には下記の通り。 jade, stylus, coffee-scriptで開発。 gruntで更新ファイルを監視し、jadeはcopy、stylusはcssへ、coffee-scriptはjsへ。 gitで管理するのは、1.のファイルたち。 Herokuへdeploy。 gruntが実行して、1.のファイルたちが2.になってサーバーが動く。 この流れに行き着くまでに色々理由がある。 coffeeファイルでNode.jsを動かしてもいいが、syntaxerrorが事前にわかりにくい。 → grunt-coffeelintで文法チェックをする → 文法チェックしても動くかどうかはわからない。 → やっぱりjsファイルにしてから動作確認したい。 grunt-autoprefixerを使えば、-webkit, -mozなどを書かなくても保管してくれる。 → stylusには効かない。 → stylusからcssに変換してからautoprefixerを掛ける。 Herokuへdeployするにはgitで管理しているファイルに限る。 → gruntで書きだしたファイルをgitで管理する？いやそれはない。 → gruntで書きだす前のファイルをgitで管理しないと意味がない。 Herokuへdeployする時にgruntを動かしたい。 → 方法としては、package.jsonのscriptにpostinstallを追記する。 → または、Herokuが提供しているbuildpackを使ってgruntを叩くようにheroku configで設定をする。 4.の項目に関して、具体的なpackage.jsonは下記の通り。 package.json 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

続きを読む

Titaniumでアプリを開発する言語はJavaScriptです。ということは、Coffee-Scriptで開発をしたいですよね。そして、Coffee-Scriptで書かれたファイルが更新されたら、自動的にビルドして、iOSシミュレーターが自動的にリロードしてほしいですよね。TiShadowとGruntを使えば、そんな願いを叶えてくれます。また、TDD(Test Driven Development)やBDD(Behavior Driven Development)を実施することもできます。 TiShadowのインストール npmでインストールするのと、iOSシミュレーターとAndroidエミュレータに、TiSharowをインストールする必要があります。両方共簡単です。 command 1 $ npm install -g tishadow インストールが完了したら、tishadow server とコマンドを打ってください。このコンソール画面は、サーバーが起動していますので、ウィンドウは閉じないでください。 command 1 2 $ tishadow server [DEBUG] TiShadow server started. Go to http://localhost:3000 たぶん、localhostにアクセスしてと、メッセージが出ると思います。 実際にアクセスしてみて、このような画面が出ればOKです。今回は、この画面は使いません。 次に、GithubにあるTiShadowのページからファイルをcloneします。zipをダウンロードしても構いません。 https://github.com/dbankier/TiShadow この中にある、appフォルダーの中に移動して、アプリをビルドします。 command 1 2 3 4

続きを読む

スマートフォンサイトを大量に作る案件があったので、自分の作業用Gruntfileを作ったので晒します。 最大のミソはgrunt-syncというものです。 PCとスマホが同じWifiに接続されていれば、ブラウザの動作をsyncしてくれます。 つまり、PCで作業し、PCのブラウザがLive Reloadすれば、スマホのブラウザも自動でリロードしてくれるので、 表示確認の為にアップロードをする必要もなく、各端末を触ってリロードボタンを押すこともなく、 iPhoneだろうがAndroidだろうが関係なくサクサク制作ができるわけです。 AdobeのEdge Inspectみたいなことができるってことですね。 Edge Inspectは使ってみましたが、スマホに専用アプリをインストールしなければならなかったりするので、 会社の方針などで自由にインストール出来ないとかあれば、Gruntのほうが自由度高いと思います。 自分の場合はよく接続が切れたりしてたのでやめました。 package.json 自分はjadeとstylusとcoffee-scriptが好きなので、主にこれらで制作する前提になってしまいます。他のパッケージは好みで追加や削除してください。 package.json 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

続きを読む