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】勤怠管理をネットで簡単に

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

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




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

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

アカウント発行画面


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

プロジェクト選択

作業時間が追加された。

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


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

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

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

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