シングルページアプリの初速を上げる取組み

3年弱前 | 2 points

OSCON 2014におけるInstagramのWebチーム責任者であるPete Huntの講演。PeteはInstagramに異動する前は、FacebookのPhoto/Video/Product Infraチームに在籍。

今回は、InstagramのwebサイトInstagram.comにおいて、シングルページアプリの課題である最初の読込みスピードを上げるために、どのような工夫をしたかについて紹介してくれてます。

  • Instagram.comのJavaScriptファイルは、縮小化後で9.5MB & gzip圧縮後で2.5MB。そのサイズだと、一つのファイルにまとめてダウンロードするには向いてないし、リソースに限りのあるモバイルサイトでパースするのもパフォーマンス的に問題。
  • そこで、17個のエントリーポイントを用意し、各ページに必要なJavaScriptだけをダウンロード。...

デザインアセットをiPhone6に対応するワークフロー

3年弱前 | 1 point

発表されたiPhone6のサイズからして、予想はしてましたが、MerchbarのEdward Atenがまとめてくれたブログを読むと、改めて対応の工数を認識させられます。

iPhoneのレイアウト/解像度がどう変更されてきたか

  • iPhone3 - iPhone4: キャンバスのサイズは 320x480 pointsと同じなのでレイアウトは変更なし。解像度が 640x960 pixelesに倍増するので、アセットをアップグレードする対応。
  • iPhone4 - iPhone5: キャンバスが縦方向に伸びて 568 pointsに。内製のアセット(tabバー / statusバー / バナー)は topとbottomが揃っているので、間を少し伸ばすだけで対応可能。
  • iPhone5 - iPhone6: レイアウトと解像度を両方変更することになる。

iPhone6のケース

  • 解像度は@2xのままだが、...

LinkedIn: iOSバックグランドタスクのスケジューリング

3年弱前

LinkedInが、iOSのbackground fetchのタスク実行をスケジュールしてくれるSelenを、オープンソースとして提供しています。

LinkedInの利用ケース

ユーザがConnectedアプリを起動した際に、background fetchを利用して、カレンダー/アドレス帳/イベントフラグなどの情報をやり取りする。- completion handlerは30秒以内に呼び出す。- アプリのパフォーマンス / バッテリー消費 / 帯域を考慮すると、background fetchのサイクルの都度、全部のタスクをこなす必要はない。そもそもbackgound fetchは、楽観的を前提とした仕様なので、重要なものから処理するべき。

主な仕様

  • application delegateが...

ブログのグラフィックデザインに便利なツール

3年弱前 | 2 comments

Wazanova Newsは、モノトーンでシンプルなサイトにしたいので、意識的に画像を全く使わないのですが(読みやすさとか、アクセスの喚起とかの法則には反するのですが、個人的な趣味でそういう方針にしてます。読みづらいと思ってる方はすみません。。)、もしグラフィックを使うなら、このNathan Barryのブログで紹介されてる一連のテクニックが多いに役立ちそうです。Mediumのブログのようにできますね。興味深いので、ブックマーク代わりにメモ残しておきます。

Nathanのような、効果的な画像コンテンツをつくれるようになるワークショップも、各地で開催しているようです。

1) フリーの写真素材

Instagram: Android/Java向けのJSONパース

3年弱前

Instagramが、ig-json-parserをオープンソースで提供しています。

背景

  • Androidにおける、JSONのエンコーディング/デコーディングは、dalvik特有の問題やメモリ消費が課題となる。
  • Jackson ObjectMapperで上記の問題は概ね解決できるが、シリアライズ/デシリアライズしたことのないオブジェクトを処理する際のペナルティが大きい。モバイルの起動時間に影響するケースもあるので、頭が痛い。メモリが大きく割り当てられるので、ガベージコレクタとの絡みを考慮する必要がある。作業が完了しても、大きめのメモリフットプリントを確保してしまう
  • Jackson stream parsingは、ObjectMapperの問題をクリアしてくれるが、手作りのコードを都度追加しなくてはいけなくなる。面倒だし、ミスが起きやすい。よって、Jackson stream...

Deviseでの二段階認証

3年弱前 | 1 point

LonelyPlanetは、devise_google_authenticatorを使って、Railsアプリ向けの認証管理ができる deviseGoogle Authenticatorを利用できるようにしているとのこと。

Google Authenticatorアプリの仕組みは、

  • QRコードを読込んで、モバイル端末上のGoogle Authenticatorアプリに、認証の対象としたいサービスを登録する。
  • 以降、認証の対象としたいサービスで、ID/パスワードの次に、トークンの入力が求められる。
  • Google Authenticatorアプリを開き、一覧の中から該当サービスのトークン(30秒間有効な6-8桁の数字)を選び、入力する。

devise_google_authenticator を実装する際の留意点として、

  • 無効なリクエストがくると root_pathにリダイレクトされる前提だが、...

サイトパフォーマンス: 1000msを目指す取組み

3年弱前 | 2 comments | 2 points

Guardian誌のPatrick HamannがLondon Web Performance Meetupで、モバイルサイトのパフォーマンス向上の取組みについて講演しています。

まずは、Web Performance TodayのeCommerceに関する調査で、

ユーザの期待するページ読込み時間は、2000年の8秒から、2012年には2秒を切るレベルまで下がってきている。

ことを挙げ、1秒以下を達成するには、

  • 3Gネットワークでは、DNS Lookup / TCP Connection / HTTP Request & Responseで 600ms (Guardianのある英国ではそれ以上)はかかる。残りの400msで、Server Response TimeとClient-side Renderingを最適化する必要がある。

...

Squareの内部APIの仕組み

3年弱前 | 2 points

SOAにおけるサービス間のコミュニケーションについては、CODE CLIMATEにおいて、Protocol Buffers vs JSONという比較が取り上げられていて、「ブラウザやJavaScriptが直接データを利用しないケース、特に内部サービス間のコミュニケーションにはProtocol Buffersの方が向いているのでは。」と紹介されています。

  • せっかく整合性のあるデータ構造を用意しても、サービス間のデータのやり取りの際に苦労させられることが多い。Protocol BuffersならProtoフォーマットにしてエンコーディングするだけで、意図するビジネスルールを維持できる。
  • 番号のフィールドがあるので、バージョンのチェックが不要。後方互換性を担保するために、コードの振る舞いを変更するような事態を避けられる。
  • 例えば、RubyとJSONのエンコード/デコードでは、...

コードを引継いでどこから手をつけるか

3年弱前 | 4 points

他人から引継いだコードを把握するのにどこから着手するかというテーマで、たまたまいくつかのエントリーを見かけました。「コードを読み切れないほど膨大にある。」「前任者、経緯のわかる人がいる/いない。」「ドキュメントがある/ない。」など様々な事情が想定されますが、全部まとめて主な声を拾ってみました。

  • 謙虚な姿勢で臨むこと。そのコードベースがわかりづらいのは、書き方が悪いコードだからかもしれないが、自分がその専門領域の知識がなかったり、ベースにあるアルゴリズムが本当に複雑な場合もありうる。それを、全てコードが悪いと思い込むと、自分にとってストレスだし、周りにも迷惑がかかる。
  • テストが完璧に用意されたコードはおそらくほとんどない。テストを追加、もしくは改善するという作業から着手すると、本番サービスに影響与えることなく、理解も進むし、コードの質も上がる。
  • 小さなタスクをこなして本番にアップしてみる。...

クラウドのOSを狙うMesos

3年弱前

MesosConのキーノートスピーチを紹介します。

まずは、Apache MesosのProgram Chairを務めるTwitterのBenjamin Hindmanが、Mesosの目指す立ち位置について、

  • 現代において「他のコンピュータ」と形容すると、データセンターを指すケースが多い。
  • アプリを動かすコンピュータという見地からは、PC / タブレット / スマホ / サーバにOSがあるように、データセンターにもOSが必要。
  • Mesosは、データセンターのOSである。つまり、分散システムにおけるkernelの役割を担う。

そのエコシステムの広がりは、

  • Mesosとつながっているプロジェクト: Hadoop, Storm, Jenkins, Cassandra, elasticsearch
  • ユーザ企業: Twitter, Airbnb, OpenTable, eBay, Netflixなど

...

Rustのあれこれ

3年弱前

Bjorn Tiplingが各プログラミング言語を武器に例えた、"If programming languages were weapons" というエントリーが秀逸ですね。公平に、どの言語も褒めていないところがよいです。どれも面白いので全部眺めていただければと思いますが、その中でRustは、

"Rust is a 3D printed gun. It may work some day."

と紹介されています。

とはいえ最近、 Rustに関する発信をよく見かけるようになったと思ったら、バージョン 1.0が近いのですね。"work some day" という日が来るということでしょう。

Bay Area Rust Meetupで、Niko MatsakisがRust 1.0に向けた方向性をシェアしています。

  • Rust 1.0...

Lineman.jsの立ち位置

3年弱前

Test Double社のJustin Searlsが、the changelogのpodcastで、Lineman.jsについてのインタビューに応えています。

Linemanは、JavaScriptのフロントエンドアプリ開発におけるコマンドラインツール。AngularJS / Ember.js / Backbone.js などがフレームワーク、Grunt / Gulp がビルドタスクの自動化ツールとすると、Linemanは慣習 & 設定(convention & configuration)ツールという位置づけのようです。各フレームワークにおいて、アセットの構築、サーバのmock、ファイル変更時のspec実行などの機能を提供します。Gruntのラッパーでもあるので、そのタスク自動化機能の抽象化レイヤとして、タスクをライフサイクルのフェーズにあわせて実行してくれます。

...