Reading…
https://gyazo.com/60ae2a3a628a1c6b7ed77bc356fbaeab
日頃自分が見ているニュースを集約してまとめてみたやつ
情報の蓄積・可視化みたいなのを考えていた
https://gyazo.com/8418eadc1713fd8f083a625706757786
流れ
https://gyazo.com/7fbb45f382fd01ae32bb2fa58a8cea53
Reading... と文頭につけるようにする
例
https://gyazo.com/48625deaaa820f1765a081103fc285bb
yamanoku.icon 別にReadingじゃなくてもいいけど、昔使ってたニュースアプリの名残で自発的にやってる freeだと実行回数（100回）に制限あった…課金するほどかなー…
Twitterから「Reading...」と紐づけた特定のものを拾ってくる
https://gyazo.com/1948eaf267fa165a4b4b1fef5afff211
APIの制約とかもあって100件までの抽出。古いものは取得内から消えていく。 Slack APIからだと色々と制約があってしんどかった nuxt generateしてもJS内にAPI Tokenとかがあると警告メールが来る（4敗）
https://gyazo.com/22343b9c3de68ed9a44d24d81064bc6b
変えてよかったこと
nuxt generate & push-dir --dir=dist --branch=master --cleanup
静的書き出ししたdistをmasterブランチにプッシュ
フレームワーク
Vueプラグイン
https://gyazo.com/798f53d86ca89daf3d3d2c02187c44c2
2018/9/6
https://gyazo.com/ddd040cf32e25fc716b04542d117a031
2019/5/29
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
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をマウントするのよくないらしい
ナイトモード実装後、夜以外のアクセスは現状真っ白になってた
night-modeのときにbodyにbackground-color: #fffにした
yamanoku.icon 2019/5/11 一旦やめた。カラーを再考
aタグのみで明確なリンク遷移がない
buttonに変えたい
forkして自分専用用のモジュールにしたほうがいいかも
forkして a => buttonに変更
https://gyazo.com/42475acc4d4f26575615095b57d77a70
tabボタンでの選択・遷移ができるように
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" });
}
},
エラーハンドラも変更した
componentsで呼び出そうとして呼び出せず？？？？となった
一度読み込んだ一覧は更新するまでキャッシュ化したい
SlackへのAPI通信を毎回やってるので必要なとき（オンライン環境）だけやってみる メインカラーのコントラスト比をAA判定
https://gyazo.com/00508adbaefc3d16b5647de3a7cc91dd
https://gyazo.com/cdec8c90eea2babf6090bd7ecfdc7bbd
https://gyazo.com/000c4d2082c861c1dc3568ef3db14c68
#0c9bf3 => #36465d
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 && \
code:config.yml
workflows:
version: 2
commit:
jobs:
- build
nightly:
triggers:
- schedule:
cron: "0 1,10 * * *"
filters:
branches:
only: master
jobs:
- deploy
10時と19時だったら 0 1,9 * * *という指定
asyncDataらへんが苦労してる
Slackでの通知は有料yamanoku.icon
とおもったらfreeでも使えそう
2019/9/1 入れた
https://user-images.githubusercontent.com/1996642/64139130-d2b4cc80-ce3a-11e9-85d6-c3d92fb05ea0.png
generalのエラーも拾ってAPIにしちゃう…設定というかエラーの名前変えよかな…yamanoku.icon
RSS feed設置
https://gyazo.com/3dc7fe79f239b26b3785a98a0d763fa6
@nuxtjs/feedで簡単に作れた
code:nuxt.config.ts
feed: [
{
path: "/feed.xml",
async create(feed: any) {
feed.options = {
title: "Reading…",
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とする
Aはマスト対応としたい
カラーもこだわるならAA判定目指す
アプリ名・アイコン見直す
フォーマットも色々作っておきたい
このアプリについて呟いてもReadingで拾ってきてしまうからアプリ名自体を変更したい
アプリの説明を入れる
自分用だけど、ポートフォリオとしての説明はあってもいいと思った
対応しているやつだけでも