numalog

ぬまおうの活動日誌

Archive for the ‘javascript’ tag

[AngularJS]controller宣言方法について

with one comment

最近、Webアプリケーション作成のためAngular.js勉強中です。
忘れないように自分用のメモもかねて、使い方の紹介など。

サンプルコードなどでは、

function HogeCtrl($scope) {
    $scope.hoge = {"foo":"bar"};
}

とコントローラーを宣言することが多いと思うのですが、
以下の形で宣言したほうがいいです。

angular.module('Controllers', [])
    .controller('HogeCtrl', function ($scope) {
        $scope.hoge = {"foo":"bar"};
    });

利用側

<script>
    angular.module('app', ['Controllers']);
</script>
<html ng-app="app">
~
<div ng-controller="HogeCtrl">
    <h1>{{hoge.foo}}</h1>
</div>

‘Controllers’という名前のmoduleを宣言、その中にHogeCtrlというcontrollerを宣言しています。
この方法の利点は、

  • functionとしてglobal宣言しなくてよい。スコープをより高次に隠蔽できる
  • module同士の依存関係がわかりやすくなる
  • moduleとして独立するので機能分割しやすく、再利用がしやすい

などです。

基本的にはfunctionをつなげていくというより、moduleとして宣言したコンポーネントをつなげていく方針でコーディングするほうが、可読性、メンテナンス性を上げることができるかと思います。
angular.jsのチュートリアルを一通りやり、実際の制作に取り掛かるとき、まずやるべきはmoduleの概念の理解だと感じました。


Written by numa

9月 25th, 2013 at 2:53 pm

ハイブリッドアプリ開発で役に立ったもの、感想#2

without comments

前回の続編のようなものです。

  • jQuery.clickは遅い

いろいろ調べてるうちに、どうもjQueryのclickイベントや、onclick、a href等をフックする方式は、レスポンスにラグが発生することがわかりました。
これは仕様で、タッチパネルの長押しや、その他操作を検知するためらしいです(300ms?)。
確かにもっともな理由ですが、実際ボタンだけを使いたい側としてはそんなもの必要ありません。
では自分はどうしたかですが

を使いました。 タップを高速で拾うことができるFastClick.jsというライブラリがあるのですが、それをjQueryでラップしたものです。
どんなアプリでもはっきりと分かるぐらい、タッチレスポンスが改善します。   ただし上のjsでは特にunbindする方法が明記されていないので、動的にハンドラーを入れ替えたいときは自分で追加する必要があります。
自分のアプリでは実際に必要があったので、

$.fn.unbindFastClick = function() {
        $(this).unbind('touchend');
        $(this).unbind('click');
        $(this).unbind('touchstart');
}

を追記して使いました。これで確実であるかどうかは分からないけど…。
ハイブリッドアプリでは、この方法を使わないにしても、タッチ周りの対策はほぼ必須といえるかもしれません。

また今回結局使うことは出来なかったのですが、

  • zepto.js (or zepto.min.js)をjqueryの代わりに使う

という方法もなかなか効果があるようです。zepto.jsは、jqueryとある程度互換性を保ちながらも、超軽量化に成功しているライブラリです。
実際にjQuery読み込み時間と比べて半分ぐらいになるそうです。検証はしていないけれど。
いくつかjQueryの機能で実装されていない物があるので注意が必要です。自分はちょうどそれで使用不可能でした。

他には、

  • jQueryMobileを使用していると mediba adのバナーが張れない

ということが発覚しました。jQueryMobileはインポートするだけでDOMを勝手にいじるらしいので、どこかへバナーを隠蔽してしまうのでしょう。多分・・・
これに気づき、UIをjQueryMobileで実装することをやめました。手間は少し増えましたが、幸か不幸かアプリ動作自体は軽くなり、
またレイアウトも細かく自分で実装する分、制御しやすくなった気がします。

その際は、CSSでのグラデーションを生成するサイトや、ボタン風レイアウトCSS生成サイトにお世話になりました。 最終的には動作も軽くなり、特に不自由するところもなかったので、jQueryMobileをなくしたことが良い結果になりました。


Written by numa

5月 2nd, 2013 at 1:15 am

ハイブリッドアプリを開発してみた感想

with one comment

今日と昨日で、HTML+CSS+Javascript製のAndroid/iPhoneアプリ、俗に言うハイブリッドアプリを作ってみました。
まだ公開できるような状態ではないので乗せることは出来ませんが、実際に自分で作ってみて思った感想など。

開発環境としてはMonacaを使用しました。
PhoneGapをベースに独自機能を追加し、WebIDE+実記プレビュー機能等…といったフレームワークです。

  • レスポンスが遅い

やはりnativeと比べると相当遅いです。ページ遷移や、読み込みの早さといった点で顕著に出ます。 単純な処理速度自体は簡単なアプリだったら実用レベルですが、そのアクションを起こすというレスポンスにおいていつもワンテンポ遅れる印象です

  • 開発効率は高い

自分が同じアプリをandroidのnativeで作るとしたら、おそらく3~5倍はかかっていたと思います。
HTML+CSS+Javascript開発の経験は無い(文法ぐらいは知ってた)かつ、Nativeでは知識とアプリ開発経験があるにもかかわらずです。
jQueryなども使いつつ試行錯誤しながら作りましたが、それでもnative開発よりは捗りました。  コード行数の絶対量がnativeよりかなり少ないです。
ただ、これは小規模アプリの話で、大規模になったら結局のところあまり変わりないんじゃないか という気もしています。

  • 大規模開発だと悪い意味でやばそう

自分のjavascriptテクニックが無いせいかも知れませんが、 プログラムが肥大化していったら全体の見通しが悪くなりそうな気がしました。
javascriptのオブジェクトの整合性チェックが実行してみないと分からない というのが気になります。
インターフェースの制定などで、複数人開発や大規模になってくると、ネイティブよりかえって大変な気がするのですがどうなんでしょうか…
プロってる人に聞いてみたいです

  • DOM操作はヤバイ臭いがする

今回自分は、$(“#hoge”)みたいなのを使ってDOM操作でページの見た目などを変化させたりしたのですが、これも肥大化すると後々やばくなる予感がしました。
アクセスされる可能性(javaでいう可視性みたいなイメージで)とかがカオスになりそうです
多分そういう観点から、MVCだのbackbone.jsだの言われてるのかなぁ というのがなんとなく理解できました。その具体的中身については知らないけれど…。

  • 見た目は割りとネイティブっぽく出来る

jQueryMobileのおかげで、デザイン心0の自分でもそれなりにいい感じのスタイルには出来ました。
Monacaのnative機能で、遷移アニメーションの作成や、ヘッダーバー、フッターの設計などもしなくてすむ というのもありがたい点です。
スクロールや長押し、ピンチアウトなどを無効にするとさらにネイティブ感が増しました

  • 現状は完全に開発者都合のものになっている?

ユーザーから見てハイブリッドアプリであることのメリットは、今のところなさそうです。
実装してて、特に機能面からハイブリッドアプリであるメリットは見出せませんでした。
今ハイブリッドアプリを選択する ということは、完全に開発効率のためである といえそうです。

ぱっと思い浮かんだところでこんな感じです。
intelがXDKという、これまたPhonegapベースの開発環境を発表したり、完全ブラウザベースのfirefoxOSが発表されていたりと、最近HTML+CSS+Javascriptプッシュが強くなってきている気がしますが、果たしてどこまでこれらが普及するのか。 個人的には、なんにしてもまずレスポンス改善が一番の課題だと思いました。


Written by numa

4月 28th, 2013 at 11:55 pm