日々バグ報告やご提案を受けているのですが、昨日は一日でたくさんのご報告を受けました。
嬉しい限りです。
今日はそれらのバグの一部をご紹介します。
アプリケーションは、環境による差異が大きく、iOSとAndroid、スマホとPC、通信環境等で挙動が変わることもあるので、想定外のバグがよく起きます(特に複数の挙動の違いが絡み合ったものは原因究明から超面倒)。

関係ないですが、僕はバグという言葉を自分のコードに使うのに少し違和感を抱くんですが、どうでしょう。
想定の動き ⇔ 実際の動き に差があるときに第三者がバグ(虫が入って悪さをしてる)って言うのは分かります。
が、 間に自分のコードが挟まっているとき( 想定の動き ⇔ コード ⇔ 実際の動き )は、いやその虫って自分で入れた自分のコードじゃん、ってなって、第三者面すんなや直せ！って思うわけです。
なのでエンジニア以外の視点だと自分のプロダクトでもバグって使いますね。
まぁ何でもいいんですけど。

画像が上下逆さまになるバグ

練習日記に画像を添付してコメントしたときに、反映されると画像が上下逆さまになるというバグ。
調べてみたところ、デジカメで撮った写真などによく付与されているExif 情報によって回転させられてたっぽいです。

撮影したカメラのメーカー
機種
撮影日時
画像方向
ISO感度
画像圧縮率
位置情報

等が含まれているとのこと。
これらをアップロード時に消すことが必要なのですが(そもそもblobファイルでクライアントでサムネ生成時等はExif情報で回転されないんでしょうか…)、珍しいケースかなと思い、今回は優先順位的に対処は保留にしました。
とりあえず、こういうことがこういう原因で起き得ると知っておくのが大事(と自分に言い聞かせる)。

サムネ反映が追い付かない

スクロールしたときに、サムネイル反映が追い付かないバグ。

実はこれはバグではなく、わざと。
遅延ロードを行うことで、インタラクティブになるまでの時間を短くする意図でした。
(全ての画像の読み込みを待っていると、ユーザーが自由に操作できるまで時間がかかるので、ある程度スクロールしないと見えない画像は、スクロールして近づいたときに初めて読み込むようにします。)
Google Pagespeed Insightsでもこれが出来てないと、指摘されます。
ちなみに、使っているのはecho.jsで

<img src="dummy.jpg" data-echo="image.jpg">

みたいなコードを書いて、何px近づいたら読み込むかを設定するだけです。
近づくまではdummy.jpgが表示されていて、設定距離まで近づくとimage.jpgが読み込まれて表示されます。
jquery.lazyloadが遅延ロードでは有名ですが、非jquery依存で軽量なため、好んで使う人が多いようです。

echo.jsでやってることとそのための準備

echo.jsでやってることは単純で(いくつかオプションもありますが)、ある距離までスクロールで画像に近づいたら、imgタグのsrcのpathを、data-echoで指定したpathに書き換えることで読み込ませるだけです。
もはや自分で書くレベル。

ただ、いままで書いたHTMLファイルのimgタグを全部書き換えるのはキツかったので、このecho.jsの前に、逆にsrcのpathをdata-echoに移し替えるコードを書きました(ダミーの画像はなしの方針)。

//imgタグのに対して
image.attr('data-echo', media.attr('src'))
image.removeAttr('src')

これでめでたく、既存のHTMLを変えずに遅延ロードすることが出来ました。

っておーい

もともとその遅延ロードが裏目に出てしまったという話でした。
ユーザー視点では、画像の読み込みが間に合ってないとだけになってしまいました。
で、何が問題か聞くと、練習動画を探してスクロールしているときにサムネイルが反映されるの遅くて探しづらいらしい。
なるほど。
設定距離を長くしてもスクロールが速くては読み込みが間に合わない可能性があります。
泣く泣く、遅延ロードは多くのページで諦めました。

他の「バグ」に関しては明日にでも！

今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！