アニメイトラボ開発者ブログ

株式会社アニメイトラボの開発者ブログです


アニメイトラボ開発者ブログ

developer.animatelab.com


アニメイトタイムズが16倍早くみられるようになった話

(※この記事はiOSアニメイトタイムズにのみ言及しています)

 ごきげんよう、開発部のかんがーです。本日は皆様に素晴らしいTwitterアカウントをご紹介するために久々に筆を取っております。
 そのアカウントとはアニメイト百合部( @animateyuribu )でして、毎日新鮮な百合情報を取り入れるとともに、あの本を買っていなかったなど、罪深きことをしないようフォローをさせていただいております。(ここまでがあいさつ)

と、インターネットの歴史を感じる長い挨拶をしてしまいました。

 ところで私達アニメイトラボは先日、ニュースサイト「アニメイトタイムズ」のアプリをリリースさせて頂きました。🎊
リリース記事にてiOSアプリに関しては、Web版と比較し約16倍の表示速度を実現しています。 と紹介をしたのですが、こちらなぜ16倍なのか?と疑問を持たれている方もいるかと思います。今回の記事ではこの件について「iOSの表示速度を16倍とした根拠」に踏み込んで紹介させていただこうと思います。

従来(Web版)のアニメイトタイムズ

 アニメイトタイムズはアニメイトラボが始まるよりもずっと前、2002年2月に産声を上げたサービスでその歴史の中で技術にせよ、サービスにせよ、ビジネスにせよ、求められるものも当時とは大きく変化し、その変化になんとか追いついていこうとしていました。
 そのうちの一つとして今回リリースしましたアプリがあります。現状のWeb版でもスマートフォン向け画面を提供しておりましたが、どうしても現状のシステムでは十分に速度を出すことができませんでした。そこで我々はアプリ化すると同時にユーザーの皆様に「サクサク」と記事を読んでいただけるように大きな変更を加えました。それにより従来の16倍 という形でアニメイトタイムズの記事閲覧ができるようになりました。

比較方法

実装はいずれもSwift3.0で実装。

WebView

 WKWebViewを利用して、http://sp.animatetimes.com/news/details.php の任意記事を表示しました。 時間の測定開始は webView.load(request) する直前として、測定終了をWKNavigationDelegateのデリゲートメソッド func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)が呼ばれたタイミングとしました。

 またiOS 9 WKWebView 主な変更点をざっくりを参考にwebDataStoreを .nonPersistent() としました。
 さらに、How to remove cache in WKWebview?を参考にremoveDataをしました。

ネイティブ

 測定開始を記事一覧画面で記事を選択したときとし、測定終了をUITableViewのreloadDataを実行してCellのレイアウトが終了した時としました。ただし、reloadDataはそのままだと実行時点ではCellのレイアウトは終了していません。そこでUITableView / UICollectionView の reloadData が完了した直後にセルを参照したいを参考にして、GCD(Grand Central Dispatch)でメインスレッドで処理すると明示しました。
 なお、参考先はSwift2時代のGCDでしたので、Swift3のGCD(dispatch_async)を参考にしてSwift3用に書き換えて実験しました。

 また、Alamofireを利用していたので、How to disable caching in Alamofireを参考にして、Disabling the URLCache CompletelyとConfiguring the Request Cache Policyしました。

比較環境

項目 内容
端末 iPhone 7
OS iOS 10.1.1
通信回線 4G(au)

測定結果

WebViewでの表示

f:id:kangar:20161214103341g:plain

ネイティブでの表示

f:id:kangar:20161214175808g:plain

上記のような実験を50回試行した結果が下記のようになります。

WKWebView ネイティヴ
平均(s) 4.641 0.2935
標準偏差 1. 217 0.04311

 この結果の平均を持って「iOSの表示速度を16倍とした根拠」としています。 16倍早くなったアニメイトタイムズはいかがだったでしょうか。是非その速度を実際にアプリを触ることで試してみてください。

iOS版 Android版

(文・かんがー、調査・とぅーさー)

『夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro』を開催します

チーフ IT アーキテクト/開発部長の久松です。今週の金曜日、12月2日に『夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro』をドリコム様にて開催いたします!

adpr.connpass.com

このイベントの内容は、

20歳以上の学生 (高専生, 専門学校生, 大学生, 大学院生) を対象に、アニメイトラボ, ドリコム, GMOペパボ, Repro の4社のトップエンジニアが、お酒を交えながら本音で語り合うイベントです。

ということで弊社からCTOの小芝が参加いたします。また、現場のエンジニアを代表して私も参加する予定です。

興味がある学生の皆さんは是非ご参加ください!!!

こちらもオススメ

「学生だけど、12月2日はちょっと都合が……」という方、大丈夫です。こちらからいつでもお待ちしております!

www.wantedly.com

※「学生だったあの頃が懐かしい」という方向けのページもバッチリご用意しております

www.wantedly.com

インターンで「なんかよく」してきました

8月半ばからアニメイトラボでエンジニアインターンをしている、やましーです。

今日までの1ヶ月半で、どんなことを考えてやってきたのかを振り返ってみます。

概要をざっくり

「なんかよくしてほしい」

サービスの一つである animateTimes のラジオ配信ページ(スマホ版) をモダンにするお仕事を任されました。

反映されるのはまだちょっと先ですが、こんな感じになります。

(今とあまり見た目が変わっていないのは、今のUIに親しんでいるユーザを置いてきぼりにせず改良を進めるため)

f:id:yamasy1549:20160930183035p:plain f:id:yamasy1549:20160930183642g:plain

アニメイトタイムズのラジオのUI改善

抜本的なリニューアルではない。現在のラジオWebページをベースに、モダンにするチャレンジ。 最大で、デザイン、UI、スタイル、フロントエンドAP、バックエンドAPまで担う。データベースは変更なしとする。

-- 社内esaより

主な使ったもの

「最近流行りのモダンな構成だからアピールして欲しい」と言われたので書いておきます!

使ったもの 選定理由
Rails (5.0.0.1) やましーが比較的慣れてるから
browserify-rails sprocketsとの共存
npm JSのライブラリ管理
babel ES6で書きたい
React (15.3.1) ※後述
React Router (2.8.1) SPAを見据えて / デファクトっぽい
KSS スタイルガイドジェネレーター / 色々ある中で一番使われていそうだった

特にReactは

  • SPAを見据えて
  • 脱・jQuery
    • ちょっとモダンなことやろうとすると、jQueryではついていけなくなりつつある
  • そこそこの規模(ページ数)で、Componentベースで組んでいくと便利そう
  • 1ヶ月半という期間的にも、そもそもViewをいじるので精一杯かなと思った
  • 「「迷ったらReact」」

という理由で使ってみました。Reactを触るのはこれが始めてです。

なんかよくする

なんかよくすることが出来るなら、今なんかよくないところがあるはずです。

ここで大切なのは「誰にとっての」なんかよくないところを見つければいいのか?です。

それは「エンジニア、ユーザー」といったロールの区切りよりもっと細かい枠、例えばユーザーの中でも「初見さん、常連さん」、さらには

  • ユーザー
    • 初見
      • 好きな声優さんがラジオをやっているか知りたい人
      • 好きなアニメに関するラジオがないか知りたい人
      • PICK UP コーナーに載っているラジオをなんとなく聴いてみた人
    • 常連
      • 毎週○曜日の特定のラジオを聴きたい人
      • 自分の趣味に合うラジオが他にないか知りたい人
    • (共通)
      • なんとなくふらふら〜っとラジオをウィンドーショッピングしたい人

などかなぁと思っています。

各パターンから「〜をなんかよくしたい(e.g. ラジオが全画面で再生されて、聴いている間画面操作ができないのをなんかよくしたい)」項目を抜き出し、大まかにまとめます。本当はユーザーテスト/インタビューなどしたかったのですが、継続してやらないと意味がなさそうで、インターン中にやるには時間が足りませんでした。

なんかよくした

この1ヶ月半でなんかよくしたこと一覧です。

  • ラジオを聞いている時は何もできない
    • 画面下部固定コントローラでもラジオの操作ができるようにして、記事を読みながらラジオを聞けるようになった(Android
  • ごちゃごちゃしてどこ見ればいいかわかんない
    • コンテンツの並べ方を見直した
    • ラジオ再生パーツをファーストビューに持ってきた
    • ボタンに統一感をもたせた
  • 表示時間が遅い・広告が読み込まれて誤タップしてイライラ
    • 広告の量や配置を見直してもらった
  • 長年保守され続けたコード
    • PHPから Rails / React に書き換えた

やったこと

洗い出した「なんかよくない」をひとつひとつ改善していくことにしました。

やったことは

  • 画面案を作る
    • 一度画面の要素を分解して(Atomic Design でいうMoleculesレベル)、再構成してみる
    • イラレでぽちぽちモックアップをつくる
    • 意見を聞いてだいたいの方向が固まったら、ざっくり動くプロトタイプを作る
      • gulpやjadeを使った。軽く何か書きたいなーってときに便利
    • プロトタイプを見せて完成イメージを共有
  • コードを書いていく
    • どんな設計にしようと思ってるか、など esa にまとめながらやる
    • 適宜レビューをもらう

です。

画面案(一部)

f:id:yamasy1549:20160930183303p:plain f:id:yamasy1549:20160930183325p:plain

考えたこと

フロントのスタイルガイド

コーディング規約とかじゃない方です。

今後他のコンテンツ(ニュース配信など)でもUIに関するコードを使いまわせるように、見本帳となるようなフロントのスタイルガイドを作りました。プロトタイプの段階から簡単なスタイルガイドを用意していたので、いざ腰を入れて実装していくときもUIに関してはそれをチラ見しながらサクサク進め、機能本体やデータの流れに集中することができて良かったです。

ユーザーになりきるのが難しい

作っているうちに「この機能/情報ってほんまに必要なん?」と思うことがちょこちょこあって、やっぱりユーザーインタビューしたい、ユーザーテストしたいなぁという気持ちになりました。短期間で「なんかよくする」のつらいところだと思います。

「なんかよく」ありたい

ユーザーにとっての「なんかよく」を実現するには、まず開発側の地ならしというかモダンな環境構築というか、そういうのが必要だと思いました。今回は改修(ユーザーから見たアプリケーションの改修)と地ならし(開発者から見たアプリケーションの改修/モダン化)の両方を実質一気にしていたのでちょっときつかったです。

インターンを終えて

私は一応エンジニアのところに入ってインターンをしていたのですが、デザイナーっぽいことなどもやらせてもらったので、複数の目線でサービスを見ることができました。どうしたらなんかよくなるか考えるところからはじめて、デザインを考えコードを書きイメージを形にしていくのは本当に楽しかったです。

以前こんな記事を書いたことがあって、そこでも言っているのですが

デザイナーさんもエンジニアさんも結局思ってることは同じで、良いものを作りたいはずです。ただ、良いものを作るための道のり・表現が違うだけだと思います。

もちろんデザイン・エンジニアリングに特化したひとがいれば今までどおり作業をすすめることはできます。でももし「中間」のひとがいれば、デザイナーさんとエンジニアさんどちらの気持ちもわかるひとがいれば、その翻訳・橋渡しができ、もやっとした気持ちも少し減るのではないでしょうか。

-- FRONTEND CONFERENCE 2016 で基調講演をしました #frontkansai

デザインとエンジニアリングの両方を一人でやってしまうという、ある意味理想の究極系を実現させてくれたアニメイトラボに感謝です。

他にもインターン用のプログラムじゃなくて実際の業務にガチコミットさせてもらったり、Reactなんて触ったこともなかったのに選定は全部おまかせしてくれたり、エンジニア見習いとして嬉しいことがたくさんでした。

あとは改修したラジオ機能が修正を経て世の中に出ていくのを見守るだけです。

メンター陣からのメッセージ

せっかくの就業体験の機会なので、実はあえて難しい前提条件を設定しました。ところがそのハードルを飛び越えて、素晴らしいプロダクトになり瞠目しています。 これからも色々な技術を身につけて、新しいものを生み出す活動をしてくれたらうれしいなと思います。

この先どんな勉強をするか、仕事をするかは色々迷ってるかと思いますが、何をやっても将来の糧になります。やって損なものはありません。今回同様、貪欲に古いものを知り、新しいものを取り入れ、突き進んでいってください!


最終発表会のときに「ドキュメントがない」って言ってましたが、私が入社したとき(1年前)も同じ感想でしたし、今もそこまで整備されているとは言い難い状況です。

そんな中、表向きのWebサイトとソースコード・データベース構造だけしか渡してないのに、ここまで動くものを作って、かつドキュメントも十分に残してくれたのはいちエンジニアとして本当にすごいと思います。一覧画面が間に合わなかった〜とか歯がゆいところはあるかもしれませんが、あの1画面が動いただけでも十分にすごいです。

今回1人での開発になりがちでしたが、次回があればもっとチーム開発っぽいことしたいね!と思ってます。是非また遊びにきてください!


1ヶ月半のインターンシップお疲れ様でした。 資料や発表を拝見しましたが、短い期間で良くできているなと感銘を受けました。 特に持っている知識や技術を使って、新しい事に積極的に挑戦するというスタイルに関しては既におっさんに膝まで浸かっている自分としては見習うべき点だと痛感致しました。 残してもらったソースとか見て、自分の勉強に活かしたいと思います。

これからも大変なことや苦労することもあるかもしれませんが、草葉の陰から応援しております。 お疲れ様でした。


私は前職ではユーザーとエンジニアの間に立つ「中間」の仕事をしていました。結構、社会に出ると頭固くて、自分の立場以外の意見を理解できない人って多くて苦労しました。なのでいろんな立場で物事を考えられるってすごい大事なことだと思います。しかもデザイン、エンジニアリングの両方ともセンスがあるので、これからどんどんいい物を作って行ってください!


人生の貴重な貴重な1ヶ月半という時間をアニメイトラボのために費やしてくれてありがとうございました。

ITの領域は日進月歩の世界。iPhoneが発売したのは2007年6月29日、それから10年にも満たない間に、世界を変革するほどの進化がありました。

つまり、10年後は全く違う。先も見えない。そんな可能性が十二分にある世界。ですが、今の積み重ねでしか未来はない。今をガンバってこそ、将来の自分が素敵になっていると思います。

若いうちからたくさんの経験を積むということはとても大事。これからも技術、デザイン、コミュニケーションを学びながら、最高の人生を歩んでください。また、東京に来るときは遊びにきてね。


1か月半ほど、お疲れ様でした!

アニメイトタイムズのコードは正直読んでて色々わからんかったり辛い部分があったと思いますがここまで動くものを作れるのは素晴らしいと思いました。

振り返りでも言っていた通り特に「スピード感」が魅力的だなーと思っていたので見習いたいと思います。一方で「自分で考えこみすぎてしまう」「集中しすぎてしまう」などで最初はなかなか周りに話を聞きにいけない様子もありましたが、後半になるにつれてどんどん色々なことを聞いたり追いかけしてたりで社会人スキルの成長が目覚ましいなーと思っておりました。

今後も頑張ってください!