2019/05に投稿されたCodePen作品集

はじめに

Qiita初心者です。昨日の投稿にて

CodePenでグラフ表示すると動きが付けられてとても良いですね。

とお褒めの言葉をいただいたので、Qiita × CodePen力に磨きをかけようと思い、2019/05に投稿されたCodePenをQiitaAPIで取得したので掲載する。

使用した全コードはこちら

汚いので参考まで

getItems.js

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'));

createMd.js

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.

感想

敗北感がすごすぎる。。