Reading…
https://gyazo.com/60ae2a3a628a1c6b7ed77bc356fbaeab
https://reading.yamanoku.net
GitHub.icon https://github.com/yamanoku/reading/
日頃自分が見ているニュースを集約してまとめてみたやつ
情報の蓄積・可視化みたいなのを考えていた
https://yamanoku.net/LT/lt04/
PWAというものを作ってみたかった
https://gyazo.com/8418eadc1713fd8f083a625706757786
流れ
https://gyazo.com/7fbb45f382fd01ae32bb2fa58a8cea53
投稿自体はTwitter
Reading... と文頭につけるようにする
例
Reading... 日本のエンジニアの質について - ヨーロッパで働く社長のブログ https://t.co/1Eqy1auczC
— やまのく🐙 (@yamanoku) May 22, 2018
https://gyazo.com/48625deaaa820f1765a081103fc285bb
yamanoku.icon 別にReadingじゃなくてもいいけど、昔使ってたニュースアプリの名残で自発的にやってる
主な発言地帯がTwitterなだけなので、別にIFTTTと連携できるならなんでもいい
DBはSlack
IFTTTで投稿連携
Zaiperに移行予定(2019/5/1)反映が早いので
freeだと実行回数(100回)に制限あった…課金するほどかなー…
Twitterから「Reading...」と紐づけた特定のものを拾ってくる
連携して個人Slackに投稿されて全件検索される
https://gyazo.com/1948eaf267fa165a4b4b1fef5afff211
APIの制約とかもあって100件までの抽出。古いものは取得内から消えていく。
なぜSlackをデータベースにするのか?
AWSでAPI GatewayとLambda FunctionにてAPI変換
Slack APIからだと色々と制約があってしんどかった
nuxt generateしてもJS内にAPI Tokenとかがあると警告メールが来る(4敗)
https://gyazo.com/22343b9c3de68ed9a44d24d81064bc6b
変えてよかったこと
CORS対応したのでどこでも取得できる
gzip配信もできる
yamanoku.icon Netlify Meetup Tokyo #2でNetlify Functionsでもいけそうって話を聞いたので変えようかと思ってる
Netlifyでホスティング
GitHubリポジトリと紐づけてる
nuxt generate & push-dir --dir=dist --branch=master --cleanup
静的書き出ししたdistをmasterブランチにプッシュ
フレームワーク
Nuxt.jsNuxt.js.icon
pwa-module
Vueプラグイン
vue-paginate
lighthouse
https://gyazo.com/798f53d86ca89daf3d3d2c02187c44c2
2018/9/6
https://gyazo.com/ddd040cf32e25fc716b04542d117a031
2019/5/29
WebPageTest
https://www.webpagetest.org/result/180905_90_60fd3b52c101b6aaeb61fda8ac192468/
https://www.webpagetest.org/result/190528_7H_77739b7c0d4d4486e534addba1dc2163/
Updates
ページネーションをクリックするとスクロール位置が保存されたままになってる
中間くらいまでスクロールした状態で移動するとページ間でその位置のまま
position: fixedとvhを使っているせい
ページが切り替わったときの制御にscrollTopをかませた
code:fixScroll.js
onPageChange() {
document.getElementsByClassName('news-list')0.scrollTop = 0;
}
code:template.html
<paginate-links
for="lists"
@change="onPageChange" <!-- ここ -->
:show-step-links="true"
:limit="2">
</paginate-links>
絵文字がパースされていない
https://gyazo.com/515ea122571f395b03d8be35b82e4469
node-emoji 使った
https://gyazo.com/6586344df213347f483f99f7ea95c014
👍👍👍👍👍
ナイトモード実装
21時〜翌6時までの間は適応
https://gyazo.com/b93728512267de56f767bdd13f119781
code:nightmode.js
if((new Date()).getHours() >= 21 || (new Date()).getHours() < 6 ) {
document.body.className += "night-mode";
}
htmlとかbodyをマウントするのよくないらしい
https://jp.vuejs.org/v2/api/index.html#el
ナイトモード実装後、夜以外のアクセスは現状真っ白になってた
night-modeのときにbodyにbackground-color: #fffにした
yamanoku.icon 2019/5/11 一旦やめた。カラーを再考
Reading…#5cd28cffc2cd3f00006bdb33
ページネーションのボタンアクセシビリティ対応
GitHub.icon https://github.com/TahaSh/vue-paginate
aタグのみで明確なリンク遷移がない
buttonに変えたい
forkして自分専用用のモジュールにしたほうがいいかも
GitHub.icon https://github.com/yamanoku/vue-paginate
forkして a => buttonに変更
https://gyazo.com/42475acc4d4f26575615095b57d77a70
tabボタンでの選択・遷移ができるように
SSR化
asyncData()で動かすようにした
code:page/index.js
async asyncData({ params, error }) {
try {
const { data } = await axios.get(TOKEN);
return {
lists: data.api
};
} catch {
error({ statusCode: 404, message: "Connection Error" });
}
},
async/await実装
エラーハンドラも変更した
componentsで呼び出そうとして呼び出せず????となった
一度読み込んだ一覧は更新するまでキャッシュ化したい
SlackへのAPI通信を毎回やってるので必要なとき(オンライン環境)だけやってみる
SSR化したら対応できた気がする(実機確認)
メインカラーのコントラスト比をAA判定
https://gyazo.com/00508adbaefc3d16b5647de3a7cc91dd
https://gyazo.com/cdec8c90eea2babf6090bd7ecfdc7bbd
https://gyazo.com/000c4d2082c861c1dc3568ef3db14c68
#0c9bf3 => #36465d
GitHub.icon https://github.com/yamanoku/reading/commit/5def3ca6d627a687b6872f48331e0ab40b5be10c#diff-900d45d66169dd4fa5d133402f1e50cfL145
CircleCIによる定時デプロイ自動化
CircleCI.icon https://github.com/yamanoku/reading/blob/master/.circleci/config.yml
code:config.yml
deploy:
docker:
- image: circleci/node:8
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- run: git config user.name $GITHUB_NAME
- run: git config user.email $GITHUB_EMAIL
- run:
name: Deploy gh-pages
command: |
yarn && \
echo $tokenAPI | base64 --decode > ./static/config.js && \
yarn generate && \
yarn deploy:gh-pages && \
curl -X POST -d {} https://api.netlify.com/build_hooks/5cc93fb77d8bfbb0cf910b05
gh-pagesでmasterにpushしたのち
ホスティングしているNetlifyにデプロイするhooks発動
code:config.yml
workflows:
version: 2
commit:
jobs:
- build
nightly:
triggers:
- schedule:
cron: "0 1,10 * * *"
filters:
branches:
only: master
jobs:
- deploy
crontabの指定
10時と19時だったら 0 1,9 * * *という指定
Typescript 導入
Feature/typescript by yamanoku · Pull Request #149 · yamanoku/reading GitHub.icon
asyncDataらへんが苦労してる
Sentry導入
API側での吐き出しエラーを受け取りたい・Slackで通知したい
Sentry で Nuxt.js のエラー検知 + 環境変数の扱いに関する Tips - Qiita
Slackでの通知は有料yamanoku.icon
とおもったらfreeでも使えそう
https://sentry.io/integrations/slack/
2019/9/1 入れた
https://github.com/yamanoku/reading/pull/152 GitHub.icon
https://user-images.githubusercontent.com/1996642/64139130-d2b4cc80-ce3a-11e9-85d6-c3d92fb05ea0.png
generalのエラーも拾ってAPIにしちゃう…設定というかエラーの名前変えよかな…yamanoku.icon
RSS feed設置
https://gyazo.com/3dc7fe79f239b26b3785a98a0d763fa6
https://github.com/yamanoku/reading/pull/190
@nuxtjs/feedで簡単に作れた
code:nuxt.config.ts
feed: [
{
path: "/feed.xml",
async create(feed: any) {
feed.options = {
title: "Reading…",
link: "https://reading.yamanoku.net/feed.xml",
description: "yamanoku's reading feed"
};
const posts = await (await axios.get(TOKEN)).data.api;
const urlRender = function(text: string) {
if (text === null) {
return;
}
return text.match(/ <(^\s+)/)!1.slice(0, -1);
};
const emojiRender = function(text: string) {
return emoji.emojify(text);
};
posts.forEach(
(post: { attachments: { key: number: any }; iid: string }) => {
if (!post.attachments0.title) {
feed.addItem({
title: emojiRender(post.attachments0.text),
guid: post.iid,
link: urlRender(post.attachments0.text)
});
} else {
feed.addItem({
title: emojiRender(post.attachments0.title),
guid: post.iid,
link: post.attachments0.title_link
});
}
}
);
},
cacheTime: 1000 * 60 * 15,
type: "rss2"
}
Archive Pageを作成
https://gyazo.com/31b3df865d164526b78d3b09601bb674
TOPより遷移
フロントページは年別のものに遷移
検索機能
自分で使う用
あのニュース直近でみてたっけ?と確認したいときがある
Keywords Searchで絞り込み
https://gyazo.com/807bf568516e02f0c53698c5d1107025
ただ2000件くらいあるJSONを描画するので単純なレイアウトとはいえ重い
チューニングをTODOとする
Todo GitHub.icon https://github.com/yamanoku/reading/issues
ダークモード再定義
https://github.com/yamanoku/reading/issues/100
ナイトモードもといダークモードについて考え直してみる
Reading…#5b8e9817c2cd3f0000d9c879
Figma.icon https://www.figma.com/file/IHsJKRaJXepsqcbX91iQ6YNV/Components
WCAG 2.1適応確認
https://github.com/yamanoku/reading/issues/140
Aはマスト対応としたい
カラーもこだわるならAA判定目指す
Reading…#5cca21e9c2cd3f0000d7d82e
アプリ名・アイコン見直す
https://github.com/yamanoku/reading/issues/136
フォーマットも色々作っておきたい
png, svgは欲しい yamanoku.icon
このアプリについて呟いてもReadingで拾ってきてしまうからアプリ名自体を変更したい
アプリの説明を入れる
https://github.com/yamanoku/reading/issues/135
自分用だけど、ポートフォリオとしての説明はあってもいいと思った
Web Share APIを導入してみる
https://github.com/yamanoku/reading/issues/208
対応しているやつだけでも
#idea #PWA #portfolio #icon