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"
}
Todo
Aはマスト対応としたい
カラーもこだわるならAA判定目指す
ルーター実装
同一ページャー内になってるので戻るボタンなどで動くようにしたいyamanoku.icon
そうなるとbuttonタグ対応というかvue-paginate実装もやめたほうがよさそう。自前実装。
アプリ名・アイコン見直す
フォーマットも色々作っておきたい
このアプリについて呟いてもReadingで拾ってきてしまうからアプリ名自体を変更したい
検索機能
自分で使う用
あのニュース直近でみてたっけ？と確認したいときがある
いやそれはSlackのchannelで見とけよという話では？ yamanoku.icon そうなるとReading…自体をSlackとは別にパッと見分けが付きやすいようにデザインし直したほうがいいかも yamanoku.icon そもそもいるのか分からんけど知見として yamanoku.icon
もう少しコンポーネントがあってからやる分でいいかも