Androidアプリプログラマとして振り返ってみる

Android Advent Calendar 2013 12日目の記事です。

勢いでAdvent Calendarにエントリしたものの、最近新しいことあんまり触ってないし、
ndkでいろいろやっているのですが、記事にするほど自分の中で整理されていません。
前日までのエントリでみなさんとてもおもしろい記事を書いていてどうしたものかと思っております。

ただ、Androidアプリプログラマとしてもう３年以上も立つ訳で、これを機会になにをやってきたかを整理してみたら、
なんだか車輪の再発明的なことをたくさんやってきたような気がします。
ただ、実装しているときにはそれは気がついておらず、後で結果的に車輪の再発明になったものがほとんどでした。

今回はそれについて振り返ってみようかなと思います。

DownloaManagerrの実装

昔ブラウザアプリを作っていたのですが、
その当時Android2.2ではDownloadManagerというものはなく、
自分で実装する必要がありました。

そこで、Link先のMIMEタイプがpdfだったりdocだったりしたら、
Threadをつくり、その中でHTTPのgetでデータを取得し、
OutputFileStreamでデータをファイルに書き出すということをしました。
もちろん、Notificationに進捗率の表示だったり、タップしたらキャンセルを行うという処理もしました。

これが面倒くさかったのは、エラー処理をいろいろしなければいけなくて、

• SDカードがないとき
• SDカードが途中で引っこ抜いたとき/マウント解除したとき
• 通信が途中で切れた時

などなど、例外処理やらif文でエラー処理やらを行わなければなりませんでした。

2sprintなので、だいたい１ヶ月ぐらいの実装でしたが(今考えると結構時間使ったなぁ。)、
最後の最後まで、テストしてエラー処理を追加してを行っていた気がします。

しかし、Android2.3からはDownloadManagerが使えるようになったので、
Android2.3以降はこの実装は使う必要がなくなったわけです。
もっと早くDownloadManagerが使えるようになってればこんな苦労はしなかったのに。。。。

FaceBook型メニュー(Drawer)の実装

Facebook型のメニューは

• RelativeLayoutにViewを２枚重ねる
• 左上のメニューボタンを押されたらTranslateAnimationで上のViewを左に移動
• アニメーションが終わった時点で、View.layout(メニューの幅、0, view.getRight(), view.getBottom())で上のViewを左に余白を作ってlayoutして、requestLayout()
• closeはその逆

をして実装しました。
(実際はいろいろ細かい小細工をして苦労させられました。。。)

こちらは、AndroidではNavigation Drawerと呼ばれ
今は、DrawerLayoutを使って簡単に実装できます。
http://developer.android.com/training/implementing-navigation/nav-drawer.html

当時はこれ実装するのはすんごく苦労したんですよ。。。

Pull to refreshの実装

あのtwitterアプリでおなじみの引っ張って更新する
pull to refresh。
これも頑張って実装しました。

これは、上のツールバーにViewを隠しておいて、
コンテンツのViewをスクロール可能だったらコンテンツのViewにイベントを流して
スクロールさせ、
スクロールできないところまでスクロールしたら、
今度はイベントをコンテンツの外側のLayoutに渡して、余白のViewをすこしずつ下にさげるという実装だった気がします。
イベントをどこに渡すかどうかの判断はonInterceptTouchEvent()だったかな？
ここら辺の実装はすごく苦労した割にはよく覚えていないのです。

ただこれはいろんあバージョンをつくってためしてみました。
ListViewを使った結滞な実装もありました。

しばらくはこの自作のpull to refreshを使っていたのですが、
あるとき、スクロールがかくかくするというバグが発生し、
そのときボスが見つけてきてくれた
https://github.com/chrisbanes/Android-PullToRefresh/
と置き換えてためしてみることになりました。
今は有名なライブラリですが、当時はあまり使われていなかった気がします。

試して見たところ、実は原因は別のところにあったようで、
動作的にはあまりかわりませんでした。
(実装見てみると、自分が書いたコードとほとんど似たようなものだったので、
当然ですが。)

で、結局オープンソースのライブラリの方が安定していていいだろうということになり、
私が作ったコードは使わないことになってしまいました。
これは悔しい思いもしましたが、
今思い返すと最初からライブラリを探していれば、その工数をべつなことに費やすことができたのでは・・・と思ってしまいます。

まとめ

今は必要で一生懸命実装しても

• 後々そのコンポーネントが標準で用意されるかもしれない
• オープンソースでライブラリがあるかもしれない。

ということがあります。

前者は逆に言えば後方互換性をかんがえると実装しておいて損はないと思いますが、後者はオープンソースのライブラリを使用できれば工数を大幅に削減できるはずです。
ちょっと難しいUIを実装する時は、GoogleなりGithubなりつかって、同様なことを実装しているライブラリがないか必ず探すようにしましょう。
最近はAndroidオープンソースライブラリ徹底活用(http://www.amazon.co.jp/dp/4798040029/ref=cm_sw_r_tw_dp_IFYPsb1MYGA62)
やAndroidライブラリ実践活用[厳選111](http://www.amazon.co.jp/dp/4774161284/ref=cm_sw_r_tw_dp_KGYPsb0JBRP63)のような本も出ていますので、手元においておくといいと思います。

ただ、こういった「あのとき苦労したけど、苦労する必要がなかったのでは」的な実装をしても、自分自身では難しい実装を体験することによりスキルアップにつながりました。
今ではちょっと凝ったUIでもそれなりに実装できるようになりました。
もし工数が許すのであれば、自分で実装してしまうのも一つの選択肢かもしれません。自分で実装すれば、その部分のカスタマイズが必要があるときにすぐに対応できるという利点もあります。

結論：頑張って実装したら、その努力そのものは無駄にはならない。

以上、本日のAndroid Advent Calendarに記事でした。
お粗末様でしたm(_ _)m

ng-mtg#4 AngularJS勉強会 に行ってきました。 #ng_jp

12/3に行われたAngularJS勉強会に行ってきました。

そのメモを載せておきます。

本当は整理してからと思ったのですが、結局整理して書こうとすると何も書かずに終わってしまうので。

気が向いたらきちんとまとめます。

あと間違いがあればご指摘いただければ修正します。

---

ng-mtg#4 AngularJS勉強会 2013/12/03 @サイバーエージェント

# 動機
* 最近JavaScriptの勉強していて、クライアントサイドのJSライブラリを習得したかったから。
* 勉強してみてAngularJSがよさげで、さらに理解を深めようと思ったから。
* 最初は簡単だけど、ちゃんと勉強すると難しいと聞いて

# 自分の背景知識
* ドットインストール(http://dotinstall.com/lessons/basic_angularjs )
* tutorial(http://docs.angularjs.org/tutorial )
をひと通りいじってあとは適当にアプリとかつくって遊んでいる状況
本格的にアプリつくっているわけではない

# 内容
## introduction
* 金井さんから説明

## AngularJS 20min @naoya_ito
https://speakerdeck.com/naoya/angularjs-20min-number-ng-jp
初心者向けにチュートリアル的な内容。AngularJSの特徴/主な機能の説明がメイン

* AngularJSがBackbone.jsよりもgithubで★がたくさんついてる状態
* JavaScript "MVW" Framework (Model View Watever) (MV* の議論の無駄 )
* AngularJSの基本
** HTMLそのものがテンプレート
*** HTMLに ng-xxxを埋め込んで、jsがそれに対応する処理をする
*** $scopeがHTMLとapp(js)の橋渡し 
** 双方向データバインディング
** HTMLフォームを変えると$scopeのオブジェクト(app側の値)が変わる/$scopeが変わるとHTML側が変わる
** しかもリアルタイムに$scopeが変わる
* アプリがDOMの構造をしらなくてよい => HTML変更をしても動かなくなるようなことが起きづらい
* ロジックでDOMの構造を構築しないようにする
* 制約によってコードが綺麗に保たれる

* いくつかの機能
** angular-resource.js
*** サーバーサイドからデータを取得するのに使える
** フィルタがすごく簡単に書ける
** Form validation
*** 必須だとrequiredつけるとか、フォームに条件をつけてvalidation可能

* コンセプトとしてJavaScriptの構造を整理するというよりもHTMLを拡張して機能を追加している
* DIによってテストしやすい

* 雑感
** DIの仕組み
*** function()定義を文字列として扱っているから、$scopeをsとか書き換えてしまうと動かない
** JSONサーバーが後ろに控えたCRUDアプリ
** グラフィックやゲーム系が苦手
** 簡単に動かすまでは簡単だけど、本格的に学習するとコスト高め
** 制約やテストしやすさで複数人数での開発は向いてる?


## OnsenUIについて ~Angular.js+Topcoat~  Kruyさん/四方さん(アシアル株式会社)
OnsenUIがどういうものかの説明。デモ等が中心
OnsenUI => https://github.com/OnsenUI/OnsenUI

* AngularJSとTopcatを組み合わせたMobile UI
* モバイル向けのUIをHTML5で簡単につくる方法を提供したかった
** jQueryMobileだとUXがいまいち/ソースコードが冗長
* 簡単/使えるUIコンポーネント
** 独自タグをHTMLに書くだけ
** 基本的なコンポーネントがデフォルトで用意されている
* ぬるぬる動く
** CSSを利用して滑らかなアニメーション
* テーマ機能
** デザインの一括変更/Font Awesome/CSS独自カスタマイズ
* 独自タグでコンポーネントを定義して、属性でアニメーション等を設定している印象
* 今後
** Onsen UIのGUIツール「UIBuilder」の提供
** Webコンポーネントを公開・共有できるしくみ

## AngularJSを実サービスで使ってみて @sakatam
AngularJSを使った実際のプロジェクトの話
https://speakerdeck.com/sakatam/angularjs-mian-qiang-hui-number-4-shi-zhan-angularjs

* プロジェクト
** 3ヶ月
** Eコマースのリニューアル
** Mobile Firstアプローチ
** ついでにAngularJS
** うまくいった

* システム構成&人員構成
** 旧構成 => jsp/Java servlet , Legacy API(RPC), DB
** 新構成 => AngularJS APp/Node.js, Legacy API(RPC), DB
** 人員:AngularJS App => UXデザイナ2 Frontend JSエンジニア2 Backend jsエンジニア2
*** フロントエンドエンジニアがBackendも踏み込める/その逆も

* なんでAngularJS?
** backbone.js => 開発者の力量でコードの品質がばらつく等　スケールしづらい
** 柔軟性では劣る
** モジュール・ベースの開発を強制 (DI/Module・Directive)
** ビューとモデルの自動バインディングのせいでコントロールが単純化・コードのメンテナンス性が高い
** 開発がスケールし易い

* 開発フロー
** 基盤づくりに時間をかけた(3week)のが功を奏した
** チーム展開(2week)でFrontendエンジニアにしっかり慣れてもらった
*** FエンジニアはDIやモジュール志向に慣れてないため
** 開発イテレーションは一般的なウェブ開発とほとんど同じ
** テストファーストができるのがメリット (プロジェクトではUnit Testは必須にした/E2E Testはクリティカルパス確認用)

* 実戦投入次のTips
** 複雑なモデル・データの状態管理
*** モデルが複雑になるとAngularJSは管理してくれない => AngularJSの長所はシンプルなモデル
*** モデルを浅くして問題回避
** $rootScope $broadcast
*** 便利だけど使いすぎるとDIの意味がなくなるので危険
** 仮引数Minify対応の紹介
** リクエスト数の肥大化に注意する(モバイル等で)
*** ビルド時にバンドルする( webmake/angular-template)
** SEO/Crawwler対策
*** UserJSで判別してPhantomJSで対応

* ほどよい制約・モジュール化の強制
* Frontendエンジニアの底上げも


## 目指せ脱初心者！あなたの知りたかったAngularJS @agektmr
初心者が中級者になるためのセッション
AngluraJSの具体的なプラクティスの紹介(でもなんだかディレクティブの話が中心)

* Angularユーザの悩み =>ドキュメントが英語/Angular Wayがあるっぽい/日本語情報が少ない/相談相手がいない/ドキュメントがわかりにくい

* AngularJSでDOMをいじるには
** ディレクティブをつくる => ハードルが高い?
*** linkがあればDOMの操作はできる

app.directive('fileSelect',function() {
  return {
     link : function(scope, elem, attr) {  //elemはjqueryオブジェクト
        elem.bind('change', xxxx);
    }
  }
});

*** AngularJSはjqueryの機能を使える(JQliteというJQueryのLite版を持っている)
*** restrict:でタグ等を指定できる
** 独自タグを定義
<script type="text/ng-template"> でテンプレートを定義
*** templateUrlでテンプレートを指定すれば、定義したhtmlを呼び出せる

* コントローラ間で変数を跨って使う => moduleを使ってvalueに割り当てる
** デモ：http://demo.agektmr.com/flexbox/ 
* DOMの塊がオブジェクトとしてそのオブジェクトを誰が所有しているか

* Web Components
** 自分の独自のelementを作れる
* AngularはWeb Componentsをとりこもうとしている
* ディレクティブはPolymerに置き換わる
** Polymer.js (Web Componentsのは http://www.polymer-project.org/ )


## LT
メモなし

# 懇親会は体調が思わしくなかったので参加せず(残念)

# リンク
toggtter => http://togetter.com/li/598391

# 感想
* AngularJSの初心者でも勉強になった。
* ただまだまだAngularJS力が足りない
* directive周りはちゃんと勉強しようと思った。ここが使いこなせないと、ちゃんと使いこなしたことにならないと思った。

---

明日からもがんばろ

株式会社ACCESSに入社してました。

久しぶりにブログ書きます☆

私事ですが、11月1日より株式会社ACCESSに入社しました。

路頭をさまよっていた(といってもフリーで仕事していましたけど・・・)私を
よき友であり、よきライバルであり、よき嫁でもある@gm_kouに声をかけていただき、
話しているうちに気がついたら戻ってみたくなってしまいました。

まさか古巣に戻ってくるとは自分でも思っていませんでしたが、
僕の中でそこで働く価値というのは働きたい人がいるかどうかなので、 
ー緒に働きたい人がいるその場所に戻ることにしました。

たぶん、辞めた時からひとまわりもふたまわりも成長していると思うので、
お役に立てるのではないかと思っているし、
そこで使い物にならなかったらエンジニアとして足を洗うつもりでいます。
ただ、まだまだ未熟な点もあると思うので、
これから成長できればいいなと思っています。
よろしく御願いします。


それから、フリーランスの期間には、
株式会社CONNEXT様にお世話になりました。
こんな未熟な私をわざわざ東京まで呼び寄せてくれて働く機会を与えてくれたことは感謝しています。
とても働きやすい環境を提供してくれて、たいへんありがたかったです。
これからまたお仕事でご一緒できる機会があればいいなとおもっています。

あとは、フリーの期間に
いろんな方からお仕事の依頼をいろいろいただきありがとうございます。
お受けすることはできなかったのは大変申し訳なかったのですが、
声をかけてくれたのはとてもうれしかったです。
人と人とのつながりはたいせつなんだなと実感しました。

簡単ですが、ブログ上でごあいさつさせていただきました。
これからも自分なりに頑張って行こうと思っているので、
今後ともよろしく御願いします！

ももクロReader(仮)というサイトをつくってみました。

なにかサービスを作りたいなと思ったので、
試しにももクロのアンテナサイトを作ってみました。

http://momoclo-service.herokuapp.com/

あんまり難しいことはやっていません。

• とりあえず、Herokuを使ってみた
• Herokuなので、Ruby on Railsで作ってみる
• Railsといっても、ほとんどRubyは書かず、もっぱらJavaScript(というかCoffeeScript)で頑張る

という感じです。

Google Feed APIで各種ブログのRSSを取得するのと、

Youtube APIで動画検索してリンク一覧を作成するのみで、
デザインはTwitter Bootstrapでごにょごにょしました。

半日ぐらいで作成しました。

他にもなんか作りたいなーと思いつつ、
ネタがない。。。
アイディア募集中です。

超AndroidユーザーがiPhoneを買ってみた

ついにiPhoneを買いました。キャリアはauです。 

いまつかってるGalaxy Nexusがバッテリーも半日しか持たないし、 (電池パックかえればいいんですけどね。)
しかもなんだか最近思いし、よくアプリが落ちるようになってしまったので、 ちょっと使い倒し過ぎかなと思い買い替えを検討してました。
ただ、基本的にAndroidはNexusシリーズしか正直欲しくないしー、と思っていたので、
もう思い切ってiPhoneにしてしまおうと思った次第です。

 感想としては

• スクロールの早さとかフィードバックの早さとか超ハンパない！
• バックキーを押す習慣があるので、バックキーがないのが慣れない
• キーボードが慣れない
• UIが全般的に違うので、一瞬考えることが多い

なにかあったときにとりあえずバックキーで元の状態に戻すのがAndroidユーザーの基本的な行動だと思うのですが、

何かあった時はホームボタンになってしまうので、ホームに戻って一瞬戸惑ってしまいます。

キーボードはATOKが個人的に使いやすかったので、そこがかわっちゃうとテキスト入力が全般的に使いづらくなっちゃう。

AndroidからiPhoneに買い替えた人、みんな戸惑うんじゃないでしょうかねー。

個人的にはiPhoneユーザとAndroidユーザのUXは根本的に違うということが

身をもって体験できたのは収穫でした。

慣れればすごく使いやすいんでしょうけどね、iPhone。

GREEのSocial Feedbackのブックマークレットを作ってみる

GREEのSocial Feedbackのボタンの設置方法を参考に、 GREEのSocial FeedBackのブックマークレットを作ってみました。 こちらをブックマークに入れれば、いろんなサイトでGREEに共有ができると思います。

グリー株式会社を退職します

私事ですが、この度、2月28日をもってグリー株式会社を退職することになりました。
昨日2月15日が最終出社日でした。

１年半、在職中は皆様に支えられ充実した日々を過ごすことができました。特にSNSのチームの皆様、中でもアプリ開発チームの皆様にはとてもお世話になりました。コミュニケーションな苦手な私ですが、楽しく仕事をさせていただきました。

やりたいことが別にできてわがままを言って辞めさせていただいたのに、最後に花束まで用意していただき、暖かく見送っていただきました。
みなさま、ありがとうございました。

思えば、GREEは大学４年生のときに僕がはじめてふれたSNSでした。この体験が僕がインターネットに興味を持ったきっかけであり、そのGREEのSNSに携わることができたのは僕にとってはとても幸せな体験でした。

今後もGREEはユーザーとして楽しみたいと思います。GREEをやっている人はぜひ友達になってください！
http://gree.jp/114804

今後についてはまた別のエントリーで書きたいと思います。
今後ともよろしくお願いいたします。

AKB48で理解するUIとUXの違い

UI

(画像は公式サイトより)

UX

僕なりの解釈です。勘違いだったら教えてください。