Galapagos Tech Blog

株式会社ガラパゴスのメンバーによる技術ブログです。

不具合見つけようとするとき、何考えてるのか考えてみた 〜ほかの人はどうしているの?〜

これはGalapagos Advent Calendar 12日目の記事です。

adventar.org

お初にお目にかかります。本丸に帰りたくて仕方ない、テストチームの文豪です。
日本語能力は並です。
今回は「不具合を見つけようとするとき、何を考えているのか?」の
第3弾「ほかの人はどうしているの?」です!
弊社テストチームとののさんから引き継いで、文豪が何を考えながらテストしているか書いていこうと思います。

今回、文豪が選んだのは、iPhoneのストップウォッチアプリです。
(文豪はAndroid使いです)
f:id:glpgsinc:20171211202252p:plain


まずは実際に行ったことから見ていきましょー。

目についたところから

・テキストは間違ってないか
・レイアウトに崩れはないか

触っていきます

・ボタンを押す
・フリックしてみる
・スクロールしてみる

時間を計ります

・開始で計測が始まるか
 →開始ボタンが停止ボタンになるか
・停止で計測が止まるか
 →停止ボタンが開始ボタンになるか
 →ラップボタンがリセットボタンになるか
・ラップでラップが追加されるか
・リセットでラップが消え、「00:00.00」になるか

※文豪に電波時計機能とかついていたら、10秒が本当に10秒かのテストとかしたかもですが、残念なことに文豪はただの人間でした。

画面を変えます

ストップウォッチアプリにはこっちのバージョンもあるんですね。
(便宜上こちらをアナログ、先にテストした方をデジタルと呼びましょう)
f:id:glpgsinc:20171211202240j:plain


こっちでも上と同じように見た目を確認し、画面を操作します。
あとはデジタルとアナログで連動しているかも確認します。

まだまだいじります

・ボタンの長押し
・ボタンを連打
・複数のボタンを同時に押す
・ラップを量産(100くらい)
・限界まで時間を計る(1時間以上)
・アプリをバックグラウンドにする
・端末をスリープモードにする

以上で大体触り終わったかなという感じなので、

何を考えていたのか

f:id:glpgsinc:20171211202312p:plain


基本的に考えていることは以下の3つです。

  1. 見た目がおかしくない

  2. 主要機能が正常である

  3. でたらめに触っても問題なさそう

と言いつつ

実際にやっていることは前々回前回のとののさんと大体同じです。
「目についたところから表示を確認→目についたところから画面の操作」という感じです。

結局

前回のブログで
・保証型
・検出型
とありましたが、好きにしていいとなったら文豪も保証型からになると思います。
とりあえずおかしくないことを確認して、不具合を探しにいきます。

ただ、今回は目についたところから触りましたが、複雑なアプリに対して目についたところから触るのは、何をして何をしてないのか分からなくなりそうではあります。
それでも画面毎、機能毎で区切ってテストすることで網羅しようとすると思うので、結局保証型からかなーと思います。

次回!

遂にシリーズ最終回の第4弾は「まとめと振り返り」です!
最終回の第4弾は、25日最終日更新予定です。
お楽しみに!

ProtoPie キミに決めた!(たぶん)第1回

はじめまして。まあのんです。普段はアプリのUIデザイナーをやっています。
好きな食べ物はゆでたまごです。


世の中にプロトタイプツールってたくさんありますよね。

私の場合、トランジション(遷移)系はProttもしくはinVisionで安定してきているんですが、(XDにシフトするかもしれないけれど)

インタラクション(動き)系はPixate勉強してみよっかなと思ったらサービス終了しちゃったり、Origami難しくて根気が続かなかったりで本命不在の状態でした。

でもやっぱりエンジニアやクライアントとイメージの共有には欠かせないので一つ選んで学習しよう!ということでProtoPieに決めました。

www.protopie.io



なんとこの記事 さよなら Pixate, よろしくProtoPie – heru – Medium によるとたった5時間学習するだけでこんなことができるようになるみたいなんです。 www.youtube.com

しゅごい。

ProtoPieはビデオチュートリアルとサンプルデータがあるんですよね。

ProtoPie - Learn

ページングとかスティッキーヘッダーとかかゆいところに手がとどくチュートリアルありがとうございます。 私もみんなみたいにProtoPieを使いこなせる希望が湧いてきました。

ということでこれを動かしてみたいと思います。

f:id:glpgsinc:20171207200238p:plain:w300f:id:glpgsinc:20171207200231p:plain:w300

つくってみた


やりたいことはこれ⬇️

  • スクロールする

  • イメージをタップすると詳細ページに遷移する

  • 詳細ページに遷移する時にイメージが拡がる

  • 一覧に戻る時イメージが縮む


    AppStoreのTodayタブがお手本です。


    実際に動きをつけるのは第2回から。
    今回はSketchデータをインポートするところまで。



Step1.Sketchデータをインポート

File→inport from Sketch(⌘I)を開いてみましょう。
f:id:glpgsinc:20171208181927p:plain:w300
うーーんわかりそうで何が何やらって感じです。説明していきます⬇️


■Artboard
→Sketchファイルの中でインポートするアートボードを選択します。
インポート前に画面が把握できるように名前をつけておきましょう!

■Import Size
→レイヤーの倍率を設定します。Sketchで制作したアートボードのサイズによって変わります。

■layer to import

All layer structure
→アートボード内の全てのレイヤーをフォルダ構造を維持したままインポートします。
Exportable layers
→アートボード内のレイヤーで、exportable(エクスポート可能)に設定されているレイヤーだけをインポートします。部分的にインポートしたい時に便利!


■Re-Import Options

Overwrite positions of layers
→再インポートする時にSketchレイヤーの位置の値を上書き。

Overwrite sizes of layers
→再インポートする時にSketchレイヤーのサイズの値を上書き。

Update layer orders and grouping structure
→再インポートする時にSketchレイヤーの順番と構造を上書き。

Remove layers deleted in Sketch
→再インポートする時にSketchから削除されたレイヤーがあればProtoPieからも削除します。

Re-Import項目はこまめにSketchと平行して作業したいなら全部チェックしちゃえばいいかもです。


ちなみにlayer to importとRe-Import Options機能は今年の2月にアップデートされました。細かい部分まで設定できるからprotopieを操作するときはぜひsketchとセットでチャレンジしてみてください!



f:id:glpgsinc:20171208185042p:plain:w300
ということで、インポートできた。いちいちparts化せずに済むのでとーーってもありがたきTT



今日はここまでー。

次回からがっつりアニメーションチャレンジしていきます!
12月18日更新予定です。


参考記事
https://www.protopie.io/learn/
さよなら Pixate, よろしくProtoPie – heru – Medium

3社合同反省会レポート

これはGalapagos Advent Calendar 8日目の記事です。

はじめまして、ガラパゴスAIチームの中の人まんだです。 AdventCalendarやりますよって話をいただいた時に、 ネタが準備できてない。。。って思ってたら、 「合同反省会レポートを書けば良いのでは?」って機運が高まったので 今日は12月7日に開催された合同反省会のレポートをします。

合同反省会とは?

LIGさん、SONICMOOVさんとガラパゴスの3社合同で2~3ヶ月に一度行われている勉強会です。 今回の正式名称は、「【年忘れ】3社合同反省会」で、 「モノ」を作ることにこだわりある3社が開発や運用で起きたトラブルをどのように解決したかを発信する技術者向けの勉強会です。

登壇者

今回は、 LIGさんから土屋さん、蓮子さん、 ソニックムーブさんから家永さん、 ガラパゴスからは平山さんが発表をしました。

以下、発表した皆様の発表内容の簡単なまとめです。

「草案」に注意!W3C勧告プロセスについて

位置情報と音楽が連動したアプリのweb版にて、 お披露目イベントの直前に突然音が出なくなる→急遽実装の変更を試みる→間に合わず。。。 結局イベントでは実演はできず動画の紹介という形になる。

f:id:glpgsinc:20171207193623j:plain

W3C勧告プロセスとは

W3C勧告とは、World Wide Web Consortium(W3C)の規格を扱うワーキンググループにおける批准プロセスの最終段階である(wikipediaより)。W3C勧告になるまでには次のような段階を経ていく。

  1. 作業草稿←めちゃめちゃ変わる
  2. 勧告候補←まだまだ変わる
  3. 勧告案←そろそろ大丈夫そう
  4. W3C勧告←大丈夫、安心して使える

原因

  • ブラウザのバージョンアップによる仕様変更

勧告より前段階の機能を利用したい場合は?

ラッパーライブラリを利用しよう。howler.jsがおすすめ。

勧告に至るまでの期間は?

  • html5 →7年
  • webaudioAPI→6年経過。未だに草稿段階。。。

教訓

  • まずは落ち着こう
  • コンソール警告はチェックしよう
  • 勧告の前段階の機能を仕様する時は特に注意しよう

WEB業界に来てから何度もしくじって転機を逃したが、頑張って生きています。

一つ目のトークからガラッと変わってエモい(?)お話。 自身の来歴を振り返りながら、反省と教訓がたっぷり聞けました。

f:id:glpgsinc:20171207194854j:plain

教訓

  • 受けた仕事は期限内にやりきる
  • やりたいことを常に考える
  • チャンスがあれば手を挙げてやってみる
  • 早いうちに苦労しておく

非同期処理が終わらない件…など

f:id:glpgsinc:20171207200744j:plain

サーバー編

  • 同期処理でのCSVインポートがつらくなったので非同期処理に切り替えるも、インポートができなかった話。
  • 非同期処理にするもCSVインポートできず
  • 非同期処理変更後に大量にメモリを使っている処理が残っていた
  • CSVインポート→Sidekiqがmonitに再起動されてリトライ→以下再起動ループ

教訓

  • テストでは大量データがないのでメモリが…みたいな問題は表面化しない
  • コードレビューの限界(遥か以前にアクセプトされたコードで問題が発生することも)

AI編

  • 別件で作られた単純なデータ構造のシステム
  • そこからもりもり増えるデータとテーブル
  • 無駄な正規化
  • 数ヶ月後…
  • IO祭りが始まる

教訓

  • 資源は有限である
  • 正規化すれば良い…というわけではない
  • 条件付きインデックスなどの活用

やらかすその前に、テスト駆動開発「Phalcon」編

f:id:glpgsinc:20171207202250j:plain

テスト駆動開発

  • 目的
  • 仕様どおりに動作するか
  • 想定外の動作に対応しているか
  • バグ消し込み、デグレの防止
  • 方針
  • Controllerテスト(相互作用中心のテスト)
  • テスト内容はコメントに(その他できるだけコメントは詳細に書く)

メリット

  • バグが減る
  • デバッグの時間が短くなる
  • 要件への理解が早まる
  • リグレッションテストができる

デメリット

  • コードを書く量が2倍以上になる。実装工数が膨らむ。
  • テストの品質保持の工数が必要

懇親会

ピザとお酒もあり様々な話で盛り上がりました。AIやらかし編データベースの話は、かなり皆様の興味を刺激したようです。

まとめ

3社合同反省会への参加は筆者は初めてでしたが、3社それぞれトラブルとその解決プロセスを惜しげなく披露していました。

おわりに

弊社では、失敗・やらかしを恐れず新しい技術にチャレンジするエンジニアを絶賛募集しています。ご応募お待ちしております。

www.glpgs.com

以上3社合同反省会参加レポートでした。明日以降の記事にもご期待ください。