Code

2015年3月29日日曜日

モバイル App 起動とApp Store, Play Store に Redirect する Landing Page

 先週、メールを使って、情報をシェアしたりする機能がうちのアプリに追加されました。メールには HTML リンクがあって、その後ろに token があります。具体的に言うと、もしユーザーが App をすでにインストールしたら、直接アプリを起動します。もしユーザーがアプリをインストールしてなかったら、App Store か Play Store に転送します。
 これを実現するにはメール中のリンクをクリックするとき、 Landing Page をモバイルのブラウザーに開いて、JavaScript で userAgent をチェックして、まず App を立ち上がることを試して、もし起動しなかったら、iOS なら、App Store, Andorid なら Play Sotre を開きます。
 コード:
  isIos = /iP(one|ad|od)/i.test(navigator.userAgent);
  isAndroid = /Android/i.test(navigator.userAgent);
 
  redirectUrl = {
      iOS : {
         app: 'appscheme://path/parameter',
         store: 'https://itunes.com/abc123456'
      },
      android : {
         app: 'appscheme://path/parameter',
         store: 'https://play.google.com/abc124?token=123abc'
      }
  };

  if(isIos || isAndroid) {
      redirect = isIos : redirectUrl.iOS : redirect.android;
      launchTime = +new Date();

      window.location.href = redirect.app;  // You can add any query string here
      setTimeout(function() {
        if((+new Date() - launchTime) < 2000) {
          window.location.href = redirect.store;
        }
      }, 100);
  }

 説明すると、まず iOS か Android かを userAgent をチェックして、そのあと、アプリを起動するのを試します。こちらはアプリ特有の scheme を使って、url を転送するのを試します。もしアプリが起動したら、ブラウザーからアプリに切り替えるので、次の setTimeout の関数は 2 秒ご実行されるはずです。そうすると、store url への転送が実行されないはずです。
 もしアプリが起動されてない場合、 100 msを待ってから、store url への転送が実行されます。
 今後、たぶん widows phone バージョンも追加されるだろう。ただ、原理は同じです。
 それでは。

モバイル Click イベント遅延

 今週、開発したプロジェクトのリリースがありました。その中の一つの改善ポイントはモバイルでの Click を早くすることです。モバイルなら、Touch イベントが追加されて、指をタッチパネルに触れた瞬間 TouchStart が発生します。そのあと、 TouchMove と TouchEnd, 次に Mouse から継承された MouseMove などが発生して、さらに、そのあと Click が発生します。主に、ダブルタッチを検知するために Click を遅らせたことです。一般的にこの遅延は 300 milliseconds と言われています。自分で試したところ、320-350 ぐらいでした。
 これを解決するためには、TouchEnd の後に、すぐ自分で Click イベントをトリッガーすればいいです。ただし、そのあとシステムの Click を抑制する必要があります。これをプロダクトで使えるライブラリは幾つかあります。今回ちょっと修正して、使ったのは fastclick です。基本的には機能が十分ですが、少しコードを参考にして、うちのサイトにあった軽量のライブラリを作りました。
 実際その 300 milliseconds を感じるサンプルも提供されています。
http://ftlabs.github.io/fastclick/examples/layer.html

 Android Chrome ブラウザーの一部がすでに改良されて、viewport を探知したら、Click イベントは早めにトリッガーする仕組みがすでにありましたので、fastclick ではそれをチェックして、もしすでにあったら、何もしないことになります。
 iOS で開くと、改良版とnative の click を使ったバージョンの区別がすぐわかります。ぜひ上記のリンクを iPhone などで開いて、クリックしてみてください。
 他には hammer.js と polymer gesture があります。ploymer gesture は ploymer のライブラリですが、基本的に stand along で使えるものです。
 
 将来 Windows Phone がもう少し普及したら、Xmarine や HTML5 Web App がさらに有利になりますので、Native なみの User Experience を実現するには、この遅延をなくすことは大事です。
 それでは。

2015年3月11日水曜日

ASP.NET Lib Practice

 最近、つい完全に Back End 開発者になりました。毎日 C# コードだけを書いて、なんだか JavaScript が使い易いなと思いました。同じ機能だったら、JavaScript のほうが少ない行数でできるはずです。将来は Node.js かな?でも、Strongly Typed 言語はやはり錯誤が少なくなります。ちょっと面倒くさいですけど。
 最近面白そうな ASP.NET のライブラリをリストしよう(まぁ、幾つかの機能は Java なら Spring だけで全部できてしまいますけど。。。):

 まず、Hangfire です。これは ASP.NET MVC と並行して、Background でタスクを実行するライブラリです。例えば、ユーザーが登録したら、email を出すと。現在一般的には1日終わる時点で、バッチタスクで新規登録したユーザーにメールを出します。Hangfire には fire-forget Job Queue がありますので、しかも別スレッドで実行してます。Controller 関数の最後に BackgroudJob.Enqueue を実行すれば、関数がすぐ返しますが、Email が別 job で送られます。しかも、遅延とか循環 job も作れますので、使い易いです。まぁ、個人的には Redis を使う意味があまりないと思うので、フリーバーションで十分だと思います。

 次、Autofac です。DI Container なら、Ninject とか Unity とかもありますが、Autofac の機能とSyntax は使い易いと思います。ILifeTimeScope も inject できますので、Life time scope を使いたいとき、または使ったほうがいい時、すぐ使えるので。例えば、DBContext は Thread Safe ではないため、一つのスレッドに一つ定義したほうがいいでしょう。MVC になると、一つの Request に合わせて、一つの DBContext を定義するなら、.AsPerRequest() 関数が提供されてますので、すぐできてしまいます。

 あと、Coypu です。これは Protractor や、Capybara みたいに、Selenium Server を使って、自動テストを C# コードで実現するライブラリです。個人的には AngularJS の Protractor のほうが AngularJS にあってるので、でも C# でテストケースをかけるなら、結構な人数の Backend 開発者も End 2 End テストができます。

 他に CacheCow 自動的に ETag を追加して、in memery cache のライブラリです。CacheCow-Server と HttpClient 対象の CacheCow-Client があります。

 Unit test 用の FluentAssertions, Object 属性をマップする Auto Mapper, OR Map の Dapper.NET、Validation 用の FluentValidation, Moq 以外 NSubstitute なども使い易いです。次のプロジェクトにいろいろ使ってみよう。

 でも、こちらのライブラリは、SignalR と Socket.io 比べるように、やっぱり JavaScript のほうが面白いな〜

 それでは。