ハミングバード図書館

レイアウトのスクリーンショット

概要

Hummingbird ライブラリ: 人気のアニメのウォッチ トラッカー / 発見サイトである Hummingbird の新しいフロントエンドです。

好きな点

アニメファン(私のような – スクリーンショットの視聴回数は本当です!)は、以前から視聴内容の記録に夢中になっています。この分野で人気のサイトには AniDB や MyAnimeList がありますが、Hummingbird はこれらの中で最も見栄えが良いサイトです。

既存の Hummingbird API の上に構築された Hummingbird ライブラリは、さらに一歩踏み込んで、Angular とマテリアル デザインを使用してゼロから構築されています。テーマカラーマニフェストにより、ホーム画面と一体化してインストール可能なデザインになっています。また、メインサイトのコア機能に重点を置いた全体的なエクスペリエンスが、非常に軽快に感じられます。

改善の余地あり

パフォーマンス: アプリは Service Worker を利用して、最初のページ読み込み後に結果と UI をオフライン キャッシュに保存することで、大きなメリットを得られます。gzip 圧縮を有効にすると、読み込み時間が大幅に短縮され、HTML で静的な初期ベアボーン レイアウトを使用することで、知覚パフォーマンスが向上します。

UX: 番組リストの表示に使用される Flex ボックス モデルは、大画面では適切に機能しますが、小さな画面ではアピールできなくなります。モバイル デバイスでは、中央に配置されていない、幅の狭いバージョンのタイルの方がはるかに良好に動作します。

Leif Thomas との Q &A

なぜウェブなのか

ウェブ向けの開発では、1 つのコードベースで実質的にすべてのプラットフォームにアクセスできます。これは、1 人のデベロッパーにとって大きな利点です。また、ホーム画面に追加などの優れた機能により、ネイティブ アプリとほぼ同じエクスペリエンスをユーザーに提供できます。

開発中に本当にうまくいった点は何ですか?

GitHub の angular/material プロジェクトが完全に機能しました。AngularJS とマテリアル デザインでプロジェクトを開始するのに必要なものがすべて揃っていました。

アプリの改善に役立つ API があるとしたら、それはどのような API ですか?

ブラウザレベルでは、ウェブアプリ内で音声検索を行うための API が役立つと思います。Android には最近多くの音声コマンドが追加されています。そのような入力をモバイルウェブで利用できるようにすれば、優れたユーザー エクスペリエンスが実現します。

幸いなことに、すでにこの API があります。Web Speech API を試してみてください。

最後に、アプリはどのようにマーケティングしましたか?

Facebook、Google+、Twitter を使って www.hummingbirdlibrary.com へのトラフィックを増加させましたが、Reddit でリンクを投稿した後にトラフィックが急増しました。開発している商品やサービスに本当に関心を持っている ユーザーをターゲットにするには効果的な方法です