はじめに
Qiita初心者です。昨日の投稿にて
CodePenでグラフ表示すると動きが付けられてとても良いですね。
とお褒めの言葉をいただいたので、Qiita × CodePen力に磨きをかけようと思い、2019/05に投稿されたCodePenをQiitaAPIで取得したので掲載する。
使用した全コードはこちら
汚いので参考まで
const moment = require('moment')
const cheerio = require('cheerio')
const DATE_PIRIOD = [ '2019-05-01', '2019-05-31' ];
let request = require('request');
let fs = require("fs");
let headers = {
'Authorization': 'Bearer 1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcd' // token
};
let ret_list = [];
function getDayItems(argMoment, cnt, callback) {
let options = {
url: `https://qiita.com/api/v2/items?page=${cnt}&per_page=100&query=created:<${argMoment.format('YYYY-MM-DD')}`,
headers: headers
}
request(options, function(error, response, body) {
if (error) {
return console.error('ERROR!', error);
} else {
let subtractDate = moment(argMoment.format('YYYY-MM-DD') + 'T09:00:00+09:00').subtract(1, 'days');
console.log(subtractDate.format('YYYY-MM-DD'));
let tmp = JSON.parse(body).filter( v => subtractDate.isSameOrBefore(v.created_at));
tmp.forEach( v => {
let $ = cheerio.load(v.rendered_body);
let codepens = $('p.codepen').toArray().map( p => $.html(p) );
if (codepens.length > 0) {
console.log(codepens);
ret_list.push({ id: v.id, title: v.title, url: v.url, user: v.user, codepens: codepens });
}
});
if (tmp.length === 100) {
setTimeout( () => getDayItems(argMoment, cnt + 1, callback), 3600); // 3,600秒 / 1,000回
} else {
callback();
}
}
});
}
function getPeriod(target_moment, end_moment) {
if (end_moment.isSameOrBefore(target_moment)) {
getDayItems(target_moment, 1, () => getPeriod(target_moment.subtract(1, 'days'), end_moment));
} else {
fs.writeFile('codepens.json', JSON.stringify(ret_list) , (err, data) => {});
}
}
getPeriod(moment(DATE_PIRIOD[1]).add(1, 'days'), moment(DATE_PIRIOD[0]).add(1, 'days'));
let fs = require("fs");
let ret = ''
fs.readFile('./codepens.json', 'utf8', function (err, text) {
let items = JSON.parse(text);
items.forEach(item => {
ret += `### [${item.title}](${item.url})\n\n ${item.user.id}さんの作品\n\n${item.codepens.join('')}\n\n\n`;
});
ret += '<script async src="https://static.codepen.io/assets/embed/ei.js"></script>';
fs.writeFile('ret.md', ret, (err, data) => {});
});
注意
私のchrome環境では、記事へのリンクを押すと、記事先のCodePenにて「codepen.ioで接続が拒否されました」とのエラーが発生する場合がある（100%再現するわけではない？）。特に特殊なことをしてないが、記事主さんには申し訳ないので、原因等が分かれば対策させていただきたいです。
作品集
CSSだけでじゃんけんゲーム
kadowakidさんの作品
See the Pen
CSS JANKEN by kadowaki (@kadowaki)
on CodePen.
Qiitaのタグを2018/12～2019/3の記事数、フォロワー数、いいね数で比較してみた
j5c8k6m8さんの作品
See the Pen qiita_tag_score_v2 by j5c8k6m8 (@j5c8k6m8) on CodePen.
「正」の数でオセロするWebComponentを作った
KuwabataKさんの作品
See the Pen counting-othello by KuwabataK (@kuwabatak) on CodePen.
位置情報を取得するAPIを解説してみた
yakeyu36さんの作品
See the Pen
NVXQYE by Yuji Yakena (@yuji-yakena)
on CodePen.
CodePenでWeekly Coding Challengeに参加してみた
hiromir13さんの作品
See the Pen Weekly Coding Challenge #1 - Sign in/up Form by hiromir13 (@hiromir13) on CodePen.
Qiitaで良い記事を書く技術
t12uさんの作品
See the Pen yWzdWd by HikaruTakakura (@HikaruTakakura) on CodePen.
【CSS】flexboxにjustify-selfは効かない
mishiwata1015さんの作品
See the Pen
EzXeaw by mishiwata1015 (@mishiwata1015)
on CodePen.
See the Pen pmrVBP by mishiwata1015 (@mishiwata1015) on CodePen.
Qiitaタグの記事数とフォロワー数を比較してみた
j5c8k6m8さんの作品
See the Pen qiita_tag_score_over_0_18 by j5c8k6m8 (@j5c8k6m8) on CodePen.
文字の回り込みを図形で制御できるCSS Shapesを勉強してみた
okumurakengoさんの作品
See the Pen css shapes example1 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example2 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example3 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example4 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example5 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example6 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example7 by 奥村健吾 (@okumurakengo) on CodePen.
See the Pen css shapes example8 by 奥村健吾 (@okumurakengo) on CodePen.
巡回セールスマン問題を遺伝的アルゴリズムで解く
gushwellさんの作品
See the Pen tsp by Gushwell (@gushwell) on CodePen.
Reactで作る「令和」パズル
hashitoさんの作品
See the Pen reiwa puzzle by hashito (@hashito) on CodePen.
何も知らないところからのhtml、CSS
tenpoulさんの作品
See the Pen yWMWXr by Kohei (@tenpoul) on CodePen.
See the Pen zQZVYo by Kohei (@tenpoul) on CodePen.
See the Pen dERmdJ by Kohei (@tenpoul) on CodePen.
Vue.js製のブロックエディタを作ってみた話（WYSIWYGエディタの代替として）
takitakitさんの作品
See the Pen block-editor-vue with source output demo by takitakit (@takitakit) on CodePen.
CSSで作るテキスト装飾デザイン（サンプル付き）
yamakiさんの作品
See the Pen text decoration1 by yamaki (@yamaki0405) on CodePen.
See the Pen text decoration2 by yamaki (@yamaki0405) on CodePen.
shepherd.jsを使えばあなたのWebサービスに簡単にガイド(チュートリアル)を組み込める！
okumurakengoさんの作品
See the Pen Shepherd Sample by 奥村健吾 (@okumurakengo) on CodePen.
【jquery】年月を取得して、今日の年月をURLに追加する
sgtknokoさんの作品
See the Pen neko by sgtknoko (@sgtknoko) on CodePen.
canvasを使って画像中の特定範囲にテキストを描画する (文字画像ジェネレーター)
icchi_hさんの作品
See the Pen sentence-image-generator by icchi (@icchi) on CodePen.
::slottedについて
smsppさんの作品
See the Pen ::slotted(*), ::slotted(selector) by こは (@smspp) on CodePen.
See the Pen ::slotted(*:hover) by こは (@smspp) on CodePen.
See the Pen ::slotted(*)::after by こは (@smspp) on CodePen.
See the Pen ::slotted not work by こは (@smspp) on CodePen.
BEMでElement__Elementを許容するのを検討する
wintyoさんの作品
See the Pen
Element2階層のBEMサンプル by wintyo (@wintyo)
on CodePen.
感想
敗北感がすごすぎる。。