前提
- 知識や技術としては下記の形です。デザインを10とした時の自己判断の値です。
- デザイン:10 > フロントコーディング:6 > サーバーサイド:1 > インフラ:0
- VueやNuxtの学習を兼ねてなにか作りたい
- サーバーサイドも少し触ってみたい
なにを題材にしようか？
- フロントがメインなのでなにかAPIを使ったものが良いのでは
- QiitaとかAPIがあって良さそう
どう作ろうか？
- 個人的にQiitaは興味のある読み物が沢山あるけど、基本的に記事へは検索からしか行かない。
- ランキングやタグを”わざわざ”掘って記事を読むほどのモチベーションは無い。
- キュレーションメディアの様に記事をピック&プッシュしてくれると嬉しい
自分に出来ることで整理
- Qiita APIを確認
- フォローしているタグの最新記事を「検索」出来ることを確認
- Vueを触っていたので、Nuxtで作ることに
- ログインとか追加機能（後ほど）をFirebaseで作成
さらっとリストで書いてますが、作りながら考えていました。
上記をモックなどを作りながら進めました。
基本機能
- メインはフォロータグのリスト表示
- リストから詳細記事
- それ以外はいいねやプロフィールなど必要最低限のページを作る
追加機能
Qiitaに無い機能として「あとで読む」を追加
基本機能がリスト表示なので、気になる記事が沢山目に付きます。また、記事を読んでいるとそこから別の記事に行くことがよくあります。あるいは知らなかった技術・サービスのタグを辿ったり。ただ、そうすると先程見た「気になるタイトルの記事」がなんだったか忘れたり、その記事を探すのが手間だったり。
そのような事を解決する方法として「あとで読む」機能を追加しました。
出来たもの
Qiitaビュワーなので「Viiwer」
* https://viiwer-eb350.web.app
概要
- Qiitaアカウントでのログイン
- フォローしているタグの最新記事をリストで表示
- 記事の詳細をマークダウンで読む
- 記事を「あとで読む」機能
- 記事のいいね＆ストックなど、QiitaAPIで可能な機能やページ
無い機能
- コメントの読み書き
- APIからの取得が古いものから取得など、満足な形に出来そうになかったのでドロップ。
- 各種検索
- このサービスがそもそもタグの検索に機能を絞っているのでシンプルにしました
特徴
-
新しい記事を流し見
- ログインしたQiitaアカウントがフォローしているタグから20個を選択し、そのタグがついた記事を時系列で表示します。
-
一覧から気になる記事を「あとで読む」
- 記事のリストから「ブックマーク」アイコンであとで読むに追加
- 各記事をの最下部にはあとで読むリストがあるので、あとで読むに気になる記事を入れて置けばスイスイ読み進めることが出来ます。
使い方
Genymotionでのキャプチャでお届けします。
Qiita連携
https://viiwer-eb350.web.app にアクセス。
アクセスするとQiitaとの連携をリクエストされますので、連携をしてください。
PWA対応なので、アプリのように使うときはホームスクリーンに追加してから連携した方が１手間省けます！
ホーム画面
何も設定していない状態では、最近の記事が作成日時順に表示されます。
フォローしているタグから、リスト表示したいタグを設定してください。
設定は下部のユーザーアイコン（右から３つ目）をクリック後、設定をタップしてください。
APIの制限で20個まで設定出来ます。
あとで読む
追加機能の「あとで読む」は、リストからブックマークアイコンをタップすると右下のブックマークにストックされます。
また、続けて読めるように書く記事の下部にはストックしている「あとで読む」がリスト化されています。
隠し機能
一応ホームのリストページで上部のロゴをタップするとQiitaの記事ランキングが見れます。なぜ隠しなのかと言うと、APIでは取得出来ないのでQiitaのページをクロールしている為です。一応正規のアプローチでは無いので、微妙に隠しています。
まとめ と 注意
最初にも書きましたが、フロント寄りの技術力ですので、セキュリティやAPIとのやりとりなど足らない部分があることをご了承ください。また、手元にiPhoneのみですので、期待した動作にならない場合もあるかと思います。
ですが、もしよろしければ一度触っていただけると嬉しいです。
どうぞよろしくお願いします。