はてなブックマーク

はじめに チャートを使ったアプリを作りたいなと思っていて、自分が作りたいチャートを実装するにあたってSVGとCanvasのどちらがベターなのかを知るために、TypeScriptを使って、ほぼ同じロジックでローソク足のチャートを表示するツールを実装しました。 DEMO GitHub ツールについて Demoを見ていただければわかる通り、チャートの高さ、幅、表示データ数、スケール(Canvasのみで使用)が設定できるようになっています。 スケールとは、iPhoneのRetinaのような高精細ディスプレイの場合、Canvasをそのままで表示すると表示がぼやけてしまうため、devicePixelRatioで取得した値と同じだけCanvasを拡大させ、表示時に縮小させることでぼやけないようにするための設定です。100x100の場合、スケールが2だと200x200になるため4倍の広さになります。そのた

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxを導入する契機 ここ何年間かSPAアプリの構築にはBackbone.jsを使っています。 小さくて自由度が高いので、スマホのハイブリッドアプリによくマッチングするからです。 ただアプリが大きくなるにつれて、モデルのデータ管理が難しくなってきました。 SPAで作るにあたって、他の画面へモデルを引き継いだり、処理が完了すればモデルを初期化する必要が出てきます。 メニュー等で別の画面に直接飛んだり、入力をし直すために画面を戻った際にモデルのデータが意図せぬ状況になるパターンが増えてきました。 また、扱うモデルも増えてきたため、モデル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 経緯 casyというインターネットを使って手軽に家事代行を頼むことができるサービスのプログラマをしています。 Webだけでなく、スマホアプリも出すことにあたり、Webアプリサーバ(Rails)から機能を切り出し、APIサーバ(Rails)を別途作成し、Webアプリの場合はWebアプリサーバからAPIサーバを呼び出し、アプリからは直接APIサーバを呼び出すような仕組みにしました。 ただ、全部の機能をAPIサーバに移すのは容易なことではなかったため、いくつかの機能はまだWebアプリサーバに残っていて、アプリよりもWebのほうが機能が多い状態

#はじめに 普段はBackbone.jsでアプリを作成しているのですが、React.jsの評判が高まってきているので、簡易BlogをBackbone.jsとReact.jsの両方で実装して、比較してみました。 Demoではjs以外は同じサーバのAPIを使っているのでどちらにも反映されます。 Backbone.jsをつかったバージョン Source https://github.com/takeshy/backbone_socket_io Demo https://radiant-dawn-8878.herokuapp.com/backbone React.jsをつかったバージョン Source https://github.com/takeshy/react_socket_io Demo https://radiant-dawn-8878.herokuapp.com/react #HTML

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最初に Webの技術を使って、iOS、Androidアプリを作ることができるPhoneGapというツールを知っている人は多いと思います。 PhoneGapはAdobeが提供しているのですが、そのオープンソース版としてApache Cordovaというツールがあります。 Apache Cordovaを使った事例として、第2回Cordova勉強会でWebサービスとしてリリースした「smartFX」をハイブリットアプリとしてリリースすることになった背景やその効果についてと、ハイブリットアプリ化するにあたって出てきた問題点と対応について発表をし

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Cordova(PhoneGap)を使って、smartFX Virtual Tradeをネイティブアプリとしてリリースしました。 前回Cordova(PhoneGap)を使ったネイティブアプリ事例は概要でしたが、今回は実装のTipsを紹介します。 js、cssを動的に差し替える WebViewを使う利点として、バイナリを更新せずにアプリの動作を変更できるという点があります。 ただ、単にリンク先のjsの内容を書き換えても以前のファイルのcacheを参照する可能性があったり、逆に毎回最新のjsを取得するのはパフォーマンスが落ちるという問題があります。 これを回避するために、最新のJS、CSSのパスが記述されている小さなjsを毎回取得し、そこに記載されているjs,cssをロードするという方法を考えました。 //var JS_PATH="http://192.168.1.77:3000/

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前書き smartFXというモバイル向けFXの情報サイトを運営しています。 この度(2014/8/15)、smartFXのバーチャルトレード機能を Apache Cordova(PhoneGap)を使って、ネイティブアプリとしてリリースしました。smartFX Virtural Trade おかげ様で、リリース直後にマイナビニュースにとりあげていただき、そこから派生してYahooやGunosyにも掲載され、いきなりWebアプリ利用者を越えるぐらいの多くの人に使ってもらえるようになりました。 ここでは、Webアプリに対するネイティブアプリ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Socket.IO Meetupで発表した資料 SmartFXでのSocket.IO活用事例という題でLTを行ってきました。 英語版 日本語版 Socket.IOの作者がいらしているということもあって、英語のパワポで挑戦したものの、初めてのLTということもあり、自分でも何をいっているかわからなかったため、記事で補足します。 Socket.IO-reqevについて socket.io-reqevは、EventEmitterを活用することで、モジュール同士の結合をなくすというJavaScriptでよく使われる戦略を使っています。 イベントを送りたいモジュールは、socket.ioにまったく依存することなく、イベントをただemitするだけで、その内容がクライアントに届くようになります。 そのため、Socket.IO-ReqEv使いたくなくなった場合の対応も容易ですし、Socket.IO-ReqE

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 そこでの気づいた問題点とその対応方法を共有したいと思います。 直帰率が高くなりやすい！ SPAにより、各ページの遷移が一瞬でできるようにしたのに、最初のうちは約半数の人がTopページのみで離脱してていました。 理由なのですが、2つあると思っています。 SPAに対する認識 そもそもSPAって普通の人は知らないし、知っていたとしても見ためは普通のWebページとなんら変わらなければ

はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 前回はSinglePageApplicationにおける問題点と対応として全般的なSPAの問題を書きましたが、今回はスマホに特化したスマホサイトをSPAで構築するにあたって気づいた問題点とその対応方法を共有したいと思います。 画面遷移に思いのほか時間がかかる！ SPAで構築しているのに、次の画面の遷移が思っているより遅い感じがします。 サーバにアクセスしていないハズなのに。。 原因 clickイベントの発動にスマホの場合は時間がかかるためです。 スマホの場合はタッチがリンクを押したいのか、それともスクロールしたいだけなのかを判定するために一定時間経過しないとクリックと判定しません。 が、その判定時間がかなり長いものと思われます。

-- app.js |- public - index.html | |- backbone - spa.js | template - timer.jst.ejs | |- time.jst.ejs | |- app - router - sample_router.js.coffee |- models - timer.js.coffee |- views - timer_view.js.coffee |- time_view.js.coffee var express = require('express') var Timer = require('./timer') var path = require('path') var http = require('http') var app = express(); var Mincer = require('mincer'); v

はじめに スマートフォン向けFX情報サイトsmartfx.minkabu.jpをSocket.ioとBackbone.jsを使って今話題のSinglePageApplication(SPA)で構築しました。 想像していたよりも簡単にできたので、共有してみます。 Socket.ioを使う理由 マーケット情報は共通の情報のため、Socket.ioのBroadcastができ、かつ更新時のみ送信できるという性質がサーバにもクライアントにもやさしいです。 Backbone.jsを使う理由 SPAというと最近ではAngular.jsばかりが目立ちますが、Backbone.jsを選んだのは下記理由です。 1.AngularJSの場合は圧縮され最小化された状態で約36K、Backboneは6.4Kなのでスマホの回線を考えると、Backbone.jsのほうが優位です。 2. 拡張性もBackbone.jsは