2013年7月10日水曜日

② PhoneGap + Gruntjsの開発環境構築

この投稿へのリンク
前回の続きでPhoneGap + Gruntjsの環境を作ってみます。

ソースディレクトリ作成

coffee, jade, lessやstaticファイル用のフォルダを作りました。
それと「cordova.js」ファイルを「wwwsrc/static」にコピーしておきます。
$ cd ios_demo
$ mkdir -p wwwsrc/coffee
$ mkdir -p wwwsrc/jade
$ mkdir -p wwwsrc/less
$ mkdir -p wwwsrc/static
$ cp www/cordova.js wwwsrc/static/
こんな感じ

grunt-exec追加

前回「grunt-exec」プラグインインストールを忘れてしまいました。
「grunt-exec」をインストールします。
$ npm install --save grunt-exec
「package.json」に「grunt-exec」が自動に追加がされたのを確認します。
{                                    
  "name": "Demo",                    
  "version": "0.0.1",                
  "description": "BabukumaのPhoneGap + Gruntjsデモ",
  "author": "メールアドレス",        
  "dependencies": {                  
    "grunt": "~0.4.1",               
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-less": "~0.5.2",  
    "grunt-contrib-jade": "~0.4.0",  
    "grunt-contrib-uglify": "~0.1.2",                                                                                   
    "grunt-exec": "~0.4.2"           
  }                                  
} 

Gruntfile.coffee作成

次はGruntのビルドファイル作成を作成します。
# #####################################################################
#
# DEMO
#
# @author babukuma@gmail.com
#
# #####################################################################

module.exports = (grunt)->
  # grunt-contrib
  grunt.loadNpmTasks('grunt-contrib-coffee')
  grunt.loadNpmTasks('grunt-contrib-jade')
  grunt.loadNpmTasks('grunt-contrib-less')
  grunt.loadNpmTasks('grunt-contrib-uglify')
  grunt.loadNpmTasks('grunt-exec')

  # ##########################################################
  # Project configuration.
  # START : grunt.initConfig
  # ##########################################################
  grunt.initConfig
    # #########################################
    # exec
    # #########################################
    exec:
      clean:
        command: 'rm -rf www/*'
        stdout: true
        stderr: true
      copy:
        command: 'cp -R wwwsrc/static/* www/'
        stdout: true
        stderr: true
      run:
        command: './cordova/run --target="iPad"'
        stdout: true
        stderr: true

    # #########################################
    # Compile Coffeescript files
    # #########################################
    coffee:
      compile:
        options:
          bare: true
        files:
          "www/js/app.js":"wwwsrc/coffee/app.coffee"

    # #########################################
    # Minifying Javascript files
    # #########################################
    uglify:
      javascript:
        files:
          "www/js/app.js":"www/js/app.js"

    # #########################################
    # LESS
    # #########################################
    less:
      production:
        options:
          yuicompress: true
        files:
          "www/css/app.css":"wwwsrc/less/app.less"

    # #########################################
    # JADE -> HTML
    # #########################################
    jade:
      production:
        options:
          pretty: false
        files:
          "www/index.html": "wwwsrc/jade/index.jade"

  # ##########################################################
  # END : grunt.initConfig
  # ##########################################################


  # default task
  grunt.registerTask('default', ['exec:clean', 'coffee', 'less', 'jade', 'exec:copy', 'exec:run'])

  # clean task
  grunt.registerTask('clean', ['exec:clean'])

デモ用のファイル作成

「wwwsrc/jade/index.jade」
!!! 5
html(lang="ja")
  //- HEAD
  head
    meta(charset="utf-8")
    meta(http-equiv='pragma', content='no-cache')
    meta(http-equiv='cache-control', content='no-cache')
    meta(http-equiv='expires', content='0')
    meta(name="format-detection", content="telephone=no")
    meta(name="viewport", content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi")
    meta(name="apple-mobile-web-app-capable", content="yes")
    meta(name="apple-mobile-web-app-status-bar-style", content="black-translucent")
    title='DEMO'
    //- Cordova
    script(type="text/javascript", src="./cordova.js")
    //- app JS
    script(type="text/javascript", src="./js/app.js")
    //- CSS
    link(rel="stylesheet", href="./css/app.css")
  body
    #demoLabel Loading...

「wwwsrc/coffee/app.coffee」
window.onload = ->
  demoLabel = document.getElementById('demoLabel')
  demoLabel.innerHTML = 'Hello world!'

「wwwsrc/less/app.less」
#demoLabel {
  width: 500px;
  height: 100px;
  padding: 50px;
  background-color: yellow;
  font: bold 30pt #000000;
  text-align: center;
}

実行

gruntを実行するとビルド後iPadシミュレータが起動します。
$ grunt

クリンアップは
$ grunt clean

これで簡単にPhoneGap + Gruntjsの環境ができました。

2013年7月8日月曜日

① PhoneGap + Gruntjsの開発環境構築

この投稿へのリンク
久しぶりにアプリ開発でPhoneGapを選びました。
PhoneGapかつGruntjsで初めて環境を構築してみた事と、
PhoneGapの公式ドキュメントが最新版を微妙に違ったのでブログに内容をまとめってみます。
内容はMacOSX上でiOSアプリを作成することを想定しています。

今回選んだ環境は

PhoneGapを選んだ理由

  • 要件がiOSだけではなく出来るだけ多くのタブレットに適用する必要がある事。
  • OS関係なく同じUIを作成したいので、OS固有のUIよりはHTML5で同じインタフェースを作成。
  • 業務アプリで高いパフォーマンスを求めていない。

そしてGruntjsを選んだ理由

  • CoffeeScript, Jade, Lessを使いたいし、ビルド環境が欲しい。
  • Preprocessorを使ってLogやDebugコードを環境に制御したい。

1. ios-simインストール

必須ではないがXCodeを開かずにコマンドラインでiOSシミュレータを操作する為のユーティリティをインストールします。コマンドラインが嫌いならスキップしていいと思います。

Homebrewでインストール
$brew install ios-sim

Homebrewを使わない人は「https://github.com/phonegap/ios-sim」を参照してインストールしてください。

2. PhoneGapのインストール

PhoneGapサイトでダウンロードするだけです。

3. PhoneGapプロジェクト生成&ビルド方法

1) プロジェクト生成 :

プロジェクト作成スクリプトから作成します。
  • スクリプト : $ {phonegap-home}/lib/ios/bin/create {Project Path} {Package name} {Project name}
  • Project Path : ~babukuma/tmp/ios_demo
  • Package name : com.babukuma.ios_demo
  • Project name : iOSDemo
$ {phonegap-home}/lib/ios/bin/create ~babukuma/tmp/ios_demo com.babukuma.ios_demo iOSDemo


2) プロジェクトビルド :

$ ~babukuma/tmp/ios_demo/corodova/build

3) iOSシミュレータで実行 :

# iPhoneで実行
$ ~babukuma/tmp/ios_demo/corodova/run
# iPadで実行
$ ~babukuma/tmp/ios_demo/corodova/run --target="iPad"

4) プロジェクトクリンアップ :

$ ~babukuma/tmp/ios_demo/corodova/clean

5) Logging :

$ ~babukuma/tmp/ios_demo/corodova/log

4. Gruntjs開発環境構築

1) node.jsインストール

node.jsが入ってない人はnode.jsをインストールします。
$ brew install node
$ brew -v
v0.8以上

2) CoffeeScriptインストール

CoffeeScriptは色んなところで使いたいのでglobalにインストールしました。
$ npm install -g coffee-script
CoffeeScript version 1.x.x

3) grunt-cliインストール

gruntが0.4からgrunt-cliとgrunt-coreに分かれました。
gruntのコマンドラインを使う為にgrunt-cliをグローバルにインストールします。
$ npm install -g grunt-cli
$ grunt --version
grunt-cli v0.1.6以上

4) package.json作成

Gruntjs用の設定ファイルを「~babukuma/tmp/ios_demo/package.json」に作成しました。
{
  "name": "Demo",
  "version": "0.0.1",
  "description": "BabukumaのPhoneGap + Gruntjsデモ",
  "author": "メールアドレス",
  "dependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-less": "~0.5.2",
    "grunt-contrib-jade": "~0.4.0",
    "grunt-contrib-uglify": "~0.1.2"
  }
}

5) ローカルモジュールをインストール

$ cd ~babukuma/tmp/ios_demo
$ npm link coffee-script
$ npm install


一旦これで環境はできました。
次はビルドファイル作成と実際にファイル作成して実行してみる事です。

2013年7月1日月曜日

【Hachikin】勤怠管理をネットで簡単に

この投稿へのリンク
今日は弊社で提供している自社サービスをご紹介したいと思います。

中小企業向けの勤怠管理・経費管理・案件管理クラウド型サービスである




色んな機能がありますが、
まずは無料で提供している「勤怠管理」機能についてご紹介させて頂きます。

アカウント登録はトップ画面から簡単に申請できます。
アカウント発行申請をするとすると案内メールが配信されます。

アカウント発行画面


今回は実際に勤務時間を入力してみます。
作業時間を入力する前に自分のプロジェクト(作業カテゴリ)を選択して作業時間を入力します。

プロジェクト選択

作業時間が追加された。

デフォルトで当日の日付が表示されますが、日付を変える事も可能です。


日付変更も簡単。先日忘れた作業時間入力も安心。

一日中色んな作業をした場合は
作業ごとに時間を振り分けて入力するのも可能です。
プロジェクトごとに作業時間を入力

現在勤怠管理を含む色んな機能を無料で提供しておりますので、
気軽くご使用お願いします。

次回は経費管理をご紹介したいと思います。


2013年5月23日木曜日

Pebble Dance Girl

この投稿へのリンク
Pebble用Watchfaceを作ってみました。

毎分女性が踊ってくれます。



ダウンロードはこちら dance_girl.pbw

こちらは以前試しに作った「しょこたん時計」 babukuma_shokotan.pbw

2013年2月21日木曜日

iPadのHTMLコンテンツでバウンドを防ぐ方法

この投稿へのリンク
iPadなどでHTMLコンテンツ作成時、いつも気になった画面のバウンド問題の解決方法。

# CoffeeScript
# 初期化
$(document).ready ->
  # バウンド禁止
  $(document).on('touchmove', (e)->
    e.preventDefault()
  )

2013年2月1日金曜日

HomeBrewでインストールしたgitが使えない。

この投稿へのリンク
HomeBrewでインストールしたgitのバージョンは1.8.1.2だが、
$ brew info git
git: stable 1.8.1.2, HEAD
http://git-scm.com
Depends on: pcre
/usr/local/Cellar/git/1.8.1.2 (1286 files, 26M) *
....

実際に使用するgitのバージョンは1.7.9.6らしい。
 $ git --version
 git version 1.7.9.6 (Apple Git-31.1)

調べてみるとHomeBrewでインストールした「/usr/local/bin/git」ではなく、
Xcodeがインストールした「/usr/bin/git」を参照しているようだ。
$ which git
/usr/bin/git

HomeBrewでインストールした最新のgitが使いたいので「/etc/paths」を編集して
「/usr/local/bin」を優先するように変更。
$ sudo vim /etc/paths
Password:

編集前 : 「/usr/local/bin」が「/usr/bin」の後にある。
/usr/bin                                                                                                                
/bin
/usr/sbin
/sbin
/usr/local/bin

編集後 :「/usr/local/bin」を「/usr/bin」の前に。
/usr/local/bin
/usr/bin                                                                                                                
/bin
/usr/sbin
/sbin

ターミナルを再起動して確認。
$ git --version
git version 1.8.1.2
$ which git
/usr/local/bin/git