はてなブックマーク

アプリケーションをデプロイした後、利用者から「リロードしてもデータが最新にならない」「更新したはずのデータが書き変わらない」というクレームを受けたので調べてみると以下のようなログが出ていた。 データの更新後、$location.path("/path")内部パスを変える処理を行っているのだが、パスを変えた後のGETリクエストが全てHTTP 204で返って来ていることが分かる。(後で調べるとと304の時もあった) 普段、開発とテストに使用しているChromeでは見たことが無いので、UAを調べると案の定IE(IE10、IE11)だった。 調べてみるとIE(少なくとも10と11)はAjaxのリクエストを勝手にキャッシュするようで、このログが表示されている間はサーバに全く問合せに行っていなかった。 この問題(IEだけのようだが)解決するにはHTMLのヘッダーのようにリクエストのヘッダを明示的にキャ

AngularJSでページ遷移を実行する際に、ルーティングを端折ったり、従来のリダイレクトのようについつい低レベルのAPIで $window.location.href="#/foo/hoge?reset"; 等と書いたりすると※、一見上手く動くように見えたりするのだが(実際Chrome等では問題なく動作する)、AngularJSのダイジェストサイクルはWebブラウザ(のレンダリングエンジン)に依存するのかIEでは再帰エラーを起こしたりする。 Chromeでは問題ないのにIEではダイジェストループの再帰でエラーになる様子(IE11のデバッグコンソール) SCRIPT5022: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! AngularJSはメジャーなWebブラウザを一通りサポートしているが、ブラウザのURLを

iOS6からiOS7への移行で困った点の第二弾。 バー系ビューの透過設定のデフォルトとTint(色合い)の違い iOSアプリケーションで重要な役割を占めるバー系のビュー(ナビゲーションバー、ステータスバー、ツールバー等)の背景は透過するのがデフォルトとなった。これはiOS7の基本的なデザインの考え方が透過、又は半透過のレイヤを重ね合わせることを前提にしているからだと思われる。 これも例を見てもらうと分かりやすい。 Xcode5でデフォルトで生成されたナビゲーションコントローラにおける、ナビゲーションバーのプロパティは以下のようになっている。 Navigation Bar/Bar TintとView/Tintに着目して欲しい。 この状態で実行するとiOS6、iOS7ではそれぞれ以下のようになる。 実行結果 (Translucent=YES, Bar Tint=Default, Tint=De

iOSアプリの開発を初めてから一年半というところだが、その間に一度OSのメジャーバージョンアップを体験している。その時はiOS5→iOS6であり、画面サイズも3.5インチから4インチであり互換性に心配したのだが、Xcodeのシミュレータとデザイナ(Interface Builder)で画面サイズの違いをきちんと使い分けることが出来たため、必要なアセット(リソース)を用意すれば良くあとは細かいAPIの違い程度だった。 で、今回はiOS6→iOS7である。また今回もXcode側で違いを吸収してくれるものだと思っていたので、正直あまり心配はしていなかったのだが、いざ既存のプロジェクトを新しい開発環境であるXcode5に移行するに辺り、それほど簡単ではないことが分かって困惑しているところだ。 iOS6以前とiOS7のデザインの違い これは色々な所で語られているので、敢えてここで取り上げなくても良い

先日のエントリでも書いたが、iOS6→iOS7への移行で最も酷いなと感じたのはステータスバーの問題である。 ステータスバーのレイヤの違いと画面に与える影響 iOS7においてはステータスバーはコンテンツとは完全に独立したレイヤとして扱うことになったようで、基本的に透過レイヤであり座標系もビューのルートと共有していない。つまりはiOS6までのアプリケーションをiOS7上で動かすとこのようにステータスバーがビューに覆い被さるように描画されてしまう。 この問題はステータスバーを表示している、つまりフルスクリーンを使う画面以外全ての画面が影響を受けてしまう凶悪なものだ。 ステータスバーをiOS6同様に非透過レイヤとすることで回避できそうなものだが、iO7ではステータスバーを非透過にする事は(今のところ)方法は無いので、これに合わせるしかない。ということは...iOS6まででステータスバーを透過にデザ

ng-optionsディレクティブはng-repeat同様に列挙子風の記述するのだが、モデルとのバインドの仕方がちょっと分からなかったので、メモ 例えばコントローラーの$scopeにこのようなJSONモデルがあったとして js/controllers.js function CategoryController($scope) { $scope.categories = [ {name:'スマートフォン', value:'smartPhone'}, {name:'タブレット', value:'tablet'}, {name:'ノートPC', value:'notepc'}, {name:'デスクトップPC', value:'desktop'} ]; $scope.category = $scope.categories[0].value; } HTMLはこんな感じで。 index.html

E2EテストをWebStormから実行できるようになったので、最後の仕上げとして同karmaを使ったテストをWebStormからデバッグしてみる。 が、これがまた中々分からなかった。 karmaのwebサーバはポート9876で起動されるので、デバッガはそのポートにアタッチするような実行設定を用意すれば良いのは分かるのだが、スクリプトのテストを行うためのスタブ用のHTMLが無いのにどうやって(どのURLを指定して)起動するのか? 答えは、この動画にあった (12:18辺りから) Testacular (now Karma) - JavaScript Test Runner - YouTube デバッグの実行設定で注意する点は以下。 WebStormデバッガが開く際のURLは(デフォルトのポートならば) http://localhost:9876/debug.html プロジェクトのリソースル