スマートフォンサイトを大量に作る案件があったので、自分の作業用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

続きを読む

grunt自体がNode.jsで動いてるんでややこしいですが、Node.jsでアプリケーションを開発している時、foreverとかnode-devを使って、更新ファイルがあれば再起動してブラウザをリロードして確認すると思います。gruntがあるならサーバーの再起動もブラウザのオートリロードもできるやろ!と思って作りました。 Qiitaにも投稿しました。 はじめに Node.jsをExpressで作る際に、app.js, routes, jade, stylus, publicの中にあるファイルなどを更新した際に、serverがrestartしてブラウザもreloadされる。ようなGruntfileを作りました。まぁまぁ開発が早くなるんちゃうかと思います。 環境 Node.js v0.10.26 Express v3.0.0 node-supervisor テンプレートはJadeを使ってます。 CSSは、stylusからCSSを書き出してます。その際に、ベンダープレフィックスを追加するautoprefixerが動いてます。 JavaScriptファイルは全てcoffeeで書きます。 vendorsフォルダーは、distにコピーしているだけです。 Nodeプロセス node-supervisorを使って起動しますので、npm install -g node-supervisor してください。 ファイル構成 . ├── Gruntfile.coffee ├── app │ ├── app.coffee │ ├── bin │ │ └── www │ ├── public │ │ ├── images │ │ ├── javascripts │ │ └── stylesheets │ ├── routes │ │ ├── index.coffee │ │ └── user.coffee │ └── views │ ├── error.

続きを読む

あけましておめでとうございます。新年を迎えるたびに、ブログの継続を意気込むものの3日足らず3時間で挫折してしまいますが、今年も宜しくお願いいたします。 さて、昨年末にGruntファイルを1つ作ってみました。ぐぐればたくさんサンプルがありますが、jade、stylus、coffeeをビルドするgruntファイルが無かったので、自分で作りました。 良かったら使ってみてください。詳しくはQiitaに投稿しましたので、こちらを御覧ください。

続きを読む

スマフォのブラウザで遊ぶソーシャルゲームでは、Mobageは「ExGame」、GREEは「Reel」または「Theatrical」というSWF変換エンジンが提供されています。その場合は、Flash Lite 1.1でパブリッシュされたSWFファイルを変換してくれるので、JavaScriptを使ってcanvasでガリガリ演出を作るよりは、まだまだFlashが活躍している現状があります。今回は、Flash Lite 1.1で重複しないランダムを作る方法を紹介します。 Flash Lite 1.1では配列が使えません。 配列が使うことさえできれば、いろんな方法がありますが、Flash Lite 1.1はActionScript4相当なので、配列というのがありません。こういう場合は、set()関数とeval()関数を駆使して、重複しないランダムを扱う方法があります。最初に、set()関数とeval()関数のおさらいから。 js 1 2 3 4 5 6 // set()関数は変数を作って値を代入することができます。 set("hensu", "ほげほげ"); trace(hensu); //ほげほげ と出ます。 // eval()関数は文字列で変数を呼び出すことができます。 trace(eval("hensu")); // ほげほげ とでます。 重複しない乱数を作ってみましょう。 0〜19まで数字を20個ランダムで作る例です。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

続きを読む

投稿が半年も抜けちゃいました・・・。いかんですね。皆さまお元気でしたでしょうか? サイトのドメインを決める際に「www」をつけるかつけないか、少しは考えることがあると思います。今回は、Node.jsで「www」の有り無しで正しくリダイレクトさせる方法をご紹介します。 app.configureの直下に書きます。index.htmlにあたる、app.get ‘/‘以降に書いてしまうと、こちらが先に有効になってしまいますので、app.get群の一番最初に書きましょう。 wwwなしでアクセスがあった時に、wwwありにリダイレクトさせる方法 coffee 1 2 3 4 5 6 7 8 app.get '/*', (req, res, next) -> # req.headresの中にwwwが含まれていれば、 if req.headers.host.match(/^www/) is null # wwwをつけた状態でリダイレクトします。 res.redirect 'http://www.' + req.url else # それ以外は次へ進みます。 next() 記述自体はとても簡単です。よくあるWEBサーバーソフトウェアのApacheですと、.htaccsessに書いて、301リダイレクトしますが、Node.jsの場合は、res.redirectで自動的に301を返すようになっています。今度は逆に、wwwありでアクセスがあった場合に、wwwを取ってリダイレクトする方法です。 wwwありでアクセスがあった時に、wwwを取ってリダイレクトさせる方法 coffee 1 2 3 4 5 6 7 8 app.get '/*', (req, res, next) -> # req.

続きを読む

今更ですがTitaniumでアプリを作ってみようかと思います。今までたくさん買ったObjective-CやXcodeの本たちンゴ・・・。 Titanium Studioというのでゴリゴリ書いていくのが普通かと思いますが、自分の場合は、エディタはEmacsがいい!Coffeeで書きたい!保存したら自動でビルドして!と思ったので色々調べると先人様達のお知恵がたくさんありました。特に自動でビルドしてくれる方法はありがたいです。 今回は、その自動でビルドしてくれるRubyのコードが、どうも自分の環境でうまく動かなかった。そして解決したので、同じ境遇の方でこの記事にたどり着いた方のお役に立てるよう、メモを残しておきます。 まずはこちらをご覧ください。 自分がたどりついたのはこちらの記事でした。 http://a-h.parfe.jp/einfach/archives/2011/0106224213.html ミソとしては、コマンドラインでbuild.rbというのを実行して、http://127.0.0.1:9090/runにアクセスすれば、iPhoneシュミレーターが起動する。というところです。そのbuild.rbはGitHubに公開されてまして、それを実行してみた結果、自分は下記のようなエラーになりました。 $ ruby build.rb [2013-02-20 11:16:46] INFO WEBrick 1.3.1 [2013-02-20 11:16:46] INFO ruby 1.9.3 (2012-04-20) [x86_64-darwin12.2.0] starting server at localhost:9090 [2013-02-20 11:16:46] INFO WEBrick::HTTPServer#start: pid=55265 port=9090 localhost - - [20/Feb/2013:11:16:58 JST] "GET /run HTTP/1.1" 200 2 - -> /run build.rb:25:in `exec': No such file or directory - /Library/Application Support/Titanium/mobilesdk/osx/1.5.1/iphone/builder.py (Errno::ENOENT) from build.rb:25:in `block (2 levels) in <main>' from build.rb:24:in `fork' from build.rb:24:in `block in <main>' from /Users/cotapon/.

続きを読む

明けましておめでとうございます!2013年最初の投稿です^^; ちょっとだけサクッと近況報告で、年末年始は色々ありまして、2月に入ってから少し落ち着き、1月20日に入籍しました。 とまぁ、近況はこんなもんで。(´∀`∩) Underscore.jsとは 簡単に言いますと、Underscore.jsというのは、JavaScriptのライブラリです。簡単すぎますが、つべこべ言わずに何がどう便利なのか、Underscore.jsのドキュメンに書かれている最初のメソッド、eachのサンプルを見てみましょう。 underscore.js eachの使い方 underscore.js ライブラリはこれで、読み込むと _ ←アンダースコアを定義します。これで連想配列をパースしてみましょう。 js 1 2 3 4 5 obj = {A: 'a', B: 'b'}; _.each(obj, function(v) { console.log(v); // a b と出力されます。 }); さて、もうお気づきかもしれませんが、連想配列などをパースする際には、for in やjQuery.eachなどを使っていました。キーとバリューを出力する際、必ずキーが必要でしたが、Underscore.jsのeachを使えば、最初にバリューが第一引数で戻ってきます。たったこれだけですが、わかりやすくていいですよね。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo