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

# はじめに

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

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

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

<details><summary>使用した全コードはこちら</summary><div>

~~汚いので参考まで~~

``` javascript: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) => {});
});
```

</div></details>

## 注意

私のchrome環境では、記事へのリンクを押すと、記事先のCodePenにて「codepen.ioで接続が拒否されました」とのエラーが発生する場合がある（100%再現するわけではない？）。特に特殊なことをしてないが、記事主さんには申し訳ないので、原因等が分かれば対策させていただきたいです。

# 作品集

### [CSSだけでじゃんけんゲーム](https://qiita.com/kadowakid/items/5c6c4e0b6599e4bbca73)

 kadowakidさんの作品

<p class="codepen" data-height="560" data-default-tab="result" data-slug-hash="YbZbgY"><br>
  See the Pen <a href="https://codepen.io/kadowaki/pen/YbZbgY/" rel="nofollow noopener" target="_blank"><br>
  CSS JANKEN</a> by kadowaki (<a href="https://codepen.io/kadowaki" rel="nofollow noopener" target="_blank">@kadowaki</a>)<br>
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br>
</p>


### [Qiitaのタグを2018/12～2019/3の記事数、フォロワー数、いいね数で比較してみた](https://qiita.com/j5c8k6m8/items/ab1acf32f08d32292398)

 j5c8k6m8さんの作品

<p class="codepen" data-height="1062" data-default-tab="result" data-slug-hash="zQjKxJ">
  See the Pen <a href="https://codepen.io/j5c8k6m8/pen/zQjKxJ/" rel="nofollow noopener" target="_blank">
  qiita_tag_score_v2</a> by j5c8k6m8 (<a href="https://codepen.io/j5c8k6m8" rel="nofollow noopener" target="_blank">@j5c8k6m8</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [「正」の数でオセロするWebComponentを作った](https://qiita.com/KuwabataK/items/a8cfe495189a7206eb85)

 KuwabataKさんの作品

<p class="codepen" data-height="265" data-default-tab="html,result" data-slug-hash="YbLrMa">
  See the Pen <a href="https://codepen.io/kuwabatak/pen/YbLrMa/" rel="nofollow noopener" target="_blank">
  counting-othello</a> by KuwabataK (<a href="https://codepen.io/kuwabatak" rel="nofollow noopener" target="_blank">@kuwabatak</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [位置情報を取得するAPIを解説してみた](https://qiita.com/yakeyu36/items/82c19add895debd3b822)

 yakeyu36さんの作品

<p class="codepen" data-height="265" data-default-tab="js,result" data-slug-hash="NVXQYE"><br>
  See the Pen <a href="https://codepen.io/yuji-yakena/pen/NVXQYE/" rel="nofollow noopener" target="_blank"><br>
  NVXQYE</a> by Yuji Yakena (<a href="https://codepen.io/yuji-yakena" rel="nofollow noopener" target="_blank">@yuji-yakena</a>)<br>
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br>
</p>


### [CodePenでWeekly Coding Challengeに参加してみた](https://qiita.com/hiromir13/items/bbe4f294302705b67d53)

 hiromir13さんの作品

<p class="codepen" data-height="700" data-default-tab="css,result" data-slug-hash="XweygL">
  See the Pen <a href="https://codepen.io/hiromir13/pen/XweygL/" rel="nofollow noopener" target="_blank">
  Weekly Coding Challenge #1 - Sign in/up Form</a> by hiromir13 (<a href="https://codepen.io/hiromir13" rel="nofollow noopener" target="_blank">@hiromir13</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [Qiitaで良い記事を書く技術](https://qiita.com/t12u/items/8c28484100dfd3a6351b)

 t12uさんの作品

<p class="codepen" data-height="265" data-default-tab="css,result" data-slug-hash="yWzdWd">
  See the Pen <a href="https://codepen.io/HikaruTakakura/pen/yWzdWd/" rel="nofollow noopener" target="_blank">
  yWzdWd</a> by HikaruTakakura (<a href="https://codepen.io/HikaruTakakura" rel="nofollow noopener" target="_blank">@HikaruTakakura</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [【CSS】flexboxにjustify-selfは効かない](https://qiita.com/mishiwata1015/items/7c26ea7bc80a9200ad78)

 mishiwata1015さんの作品

<p class="codepen" data-height="265" data-default-tab="css,result" data-slug-hash="EzXeaw"><br>
  See the Pen <a href="https://codepen.io/mishiwata1015/pen/EzXeaw/" rel="nofollow noopener" target="_blank"><br>
  EzXeaw</a> by mishiwata1015 (<a href="https://codepen.io/mishiwata1015" rel="nofollow noopener" target="_blank">@mishiwata1015</a>)<br>
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br>
</p><p class="codepen" data-height="265" data-default-tab="css,result" data-slug-hash="pmrVBP">
  See the Pen <a href="https://codepen.io/mishiwata1015/pen/pmrVBP/" rel="nofollow noopener" target="_blank">
  pmrVBP</a> by mishiwata1015 (<a href="https://codepen.io/mishiwata1015" rel="nofollow noopener" target="_blank">@mishiwata1015</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [Qiitaタグの記事数とフォロワー数を比較してみた](https://qiita.com/j5c8k6m8/items/b184ca0f43517ad5fcf3)

 j5c8k6m8さんの作品

<p class="codepen" data-height="860" data-default-tab="result" data-slug-hash="vwJgOm">
  See the Pen <a href="https://codepen.io/j5c8k6m8/pen/vwJgOm/" rel="nofollow noopener" target="_blank">
  qiita_tag_score_over_0_18</a> by j5c8k6m8 (<a href="https://codepen.io/j5c8k6m8" rel="nofollow noopener" target="_blank">@j5c8k6m8</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [文字の回り込みを図形で制御できるCSS Shapesを勉強してみた](https://qiita.com/okumurakengo/items/7de8d25107212e35d871)

 okumurakengoさんの作品

<p class="codepen" data-height="415" data-default-tab="result" data-slug-hash="PvjdpY">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/PvjdpY/" rel="nofollow noopener" target="_blank">
  css shapes example1</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="448" data-default-tab="result" data-slug-hash="xNryJx">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/xNryJx/" rel="nofollow noopener" target="_blank">
  css shapes example2</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="490" data-default-tab="result" data-slug-hash="YbQdvb">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/YbQdvb/" rel="nofollow noopener" target="_blank">
  css shapes example3</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="510" data-default-tab="result" data-slug-hash="LoLvEd">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/LoLvEd/" rel="nofollow noopener" target="_blank">
  css shapes example4</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="497" data-default-tab="result" data-slug-hash="KLqYeW">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/KLqYeW/" rel="nofollow noopener" target="_blank">
  css shapes example5</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="421" data-default-tab="result" data-slug-hash="KLqLXR">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/KLqLXR/" rel="nofollow noopener" target="_blank">
  css shapes example6</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="455" data-default-tab="result" data-slug-hash="byRPgQ">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/byRPgQ/" rel="nofollow noopener" target="_blank">
  css shapes example7</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="461" data-default-tab="result" data-slug-hash="rgwEPM">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/rgwEPM/" rel="nofollow noopener" target="_blank">
  css shapes example8</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [巡回セールスマン問題を遺伝的アルゴリズムで解く](https://qiita.com/gushwell/items/e5f4888b20c63aca9510)

 gushwellさんの作品

<p class="codepen" data-height="480" data-default-tab="js,result" data-slug-hash="LoPdYJ">
  See the Pen <a href="https://codepen.io/gushwell/pen/LoPdYJ/" rel="nofollow noopener" target="_blank">
  tsp</a> by Gushwell (<a href="https://codepen.io/gushwell" rel="nofollow noopener" target="_blank">@gushwell</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [Reactで作る「令和」パズル](https://qiita.com/hashito/items/5e324762d7cd9e8c9297)

 hashitoさんの作品

<p class="codepen" data-height="400" data-default-tab="js,result" data-slug-hash="GaKzYz">
  See the Pen <a href="https://codepen.io/hashito/pen/GaKzYz/" rel="nofollow noopener" target="_blank">
  reiwa puzzle</a> by hashito (<a href="https://codepen.io/hashito" rel="nofollow noopener" target="_blank">@hashito</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [何も知らないところからのhtml、CSS](https://qiita.com/tenpoul/items/4ce608943421261c2638)

 tenpoulさんの作品

<p class="codepen" data-height="265" data-default-tab="html,result" data-slug-hash="yWMWXr">
  See the Pen <a href="https://codepen.io/tenpoul/pen/yWMWXr/" rel="nofollow noopener" target="_blank">
  yWMWXr</a> by Kohei (<a href="https://codepen.io/tenpoul" rel="nofollow noopener" target="_blank">@tenpoul</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="265" data-default-tab="html,result" data-slug-hash="zQZVYo">
  See the Pen <a href="https://codepen.io/tenpoul/pen/zQZVYo/" rel="nofollow noopener" target="_blank">
  zQZVYo</a> by Kohei (<a href="https://codepen.io/tenpoul" rel="nofollow noopener" target="_blank">@tenpoul</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="265" data-default-tab="html,result" data-slug-hash="dERmdJ">
  See the Pen <a href="https://codepen.io/tenpoul/pen/dERmdJ/" rel="nofollow noopener" target="_blank">
  dERmdJ</a> by Kohei (<a href="https://codepen.io/tenpoul" rel="nofollow noopener" target="_blank">@tenpoul</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [Vue.js製のブロックエディタを作ってみた話（WYSIWYGエディタの代替として）](https://qiita.com/takitakit/items/5717c16c99b7c2b29c86)

 takitakitさんの作品

<p class="codepen" data-height="595" data-default-tab="result" data-slug-hash="RmpVKL">
  See the Pen <a href="https://codepen.io/takitakit/pen/RmpVKL/" rel="nofollow noopener" target="_blank">
  block-editor-vue with source output demo</a> by takitakit (<a href="https://codepen.io/takitakit" rel="nofollow noopener" target="_blank">@takitakit</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [CSSで作るテキスト装飾デザイン（サンプル付き）](https://qiita.com/yamaki/items/b783d64679fea65a05d8)

 yamakiさんの作品

<p class="codepen" data-height="480" data-default-tab="result" data-slug-hash="MdaJVK">
  See the Pen <a href="https://codepen.io/yamaki0405/pen/MdaJVK/" rel="nofollow noopener" target="_blank">
  text decoration1</a> by yamaki (<a href="https://codepen.io/yamaki0405" rel="nofollow noopener" target="_blank">@yamaki0405</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="480" data-default-tab="result" data-slug-hash="dEYzKL">
  See the Pen <a href="https://codepen.io/yamaki0405/pen/dEYzKL/" rel="nofollow noopener" target="_blank">
  text decoration2</a> by yamaki (<a href="https://codepen.io/yamaki0405" rel="nofollow noopener" target="_blank">@yamaki0405</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [shepherd.jsを使えばあなたのWebサービスに簡単にガイド(チュートリアル)を組み込める！](https://qiita.com/okumurakengo/items/df3a6de8c1ab6d81b8f8)

 okumurakengoさんの作品

<p class="codepen" data-height="565" data-default-tab="result" data-slug-hash="qGNpNR">
  See the Pen <a href="https://codepen.io/okumurakengo/pen/qGNpNR/" rel="nofollow noopener" target="_blank">
  Shepherd Sample</a> by &#x5965;&#x6751;&#x5065;&#x543E; (<a href="https://codepen.io/okumurakengo" rel="nofollow noopener" target="_blank">@okumurakengo</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [【jquery】年月を取得して、今日の年月をURLに追加する](https://qiita.com/sgtknoko/items/6a8047f257ddd0285fa7)

 sgtknokoさんの作品

<p class="codepen" data-height="393" data-default-tab="js,result" data-slug-hash="gyZjdV">
  See the Pen <a href="https://codepen.io/sgtknoko/pen/gyZjdV/" rel="nofollow noopener" target="_blank">
  neko</a> by sgtknoko (<a href="https://codepen.io/sgtknoko" rel="nofollow noopener" target="_blank">@sgtknoko</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [canvasを使って画像中の特定範囲にテキストを描画する (文字画像ジェネレーター)](https://qiita.com/icchi_h/items/f978f391367510392a8e)

 icchi_hさんの作品

<p class="codepen" data-height="480" data-default-tab="js,result" data-slug-hash="mYdaJe">
  See the Pen <a href="https://codepen.io/icchi/pen/mYdaJe/" rel="nofollow noopener" target="_blank">
  sentence-image-generator</a> by icchi (<a href="https://codepen.io/icchi" rel="nofollow noopener" target="_blank">@icchi</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [::slottedについて](https://qiita.com/smspp/items/759950709ac5cd2f1690)

 smsppさんの作品

<p class="codepen" data-height="265" data-default-tab="js,result" data-slug-hash="mYbarR">
  See the Pen <a href="https://codepen.io/smspp/pen/mYbarR/" rel="nofollow noopener" target="_blank">
  ::slotted(*), ::slotted(selector)</a> by &#x3053;&#x306F; (<a href="https://codepen.io/smspp" rel="nofollow noopener" target="_blank">@smspp</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="265" data-default-tab="js,result" data-slug-hash="EzYGpa">
  See the Pen <a href="https://codepen.io/smspp/pen/EzYGpa/" rel="nofollow noopener" target="_blank">
  ::slotted(*:hover)</a> by &#x3053;&#x306F; (<a href="https://codepen.io/smspp" rel="nofollow noopener" target="_blank">@smspp</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="265" data-default-tab="js,result" data-slug-hash="XwroOJ">
  See the Pen <a href="https://codepen.io/smspp/pen/XwroOJ/" rel="nofollow noopener" target="_blank">
  ::slotted(*)::after</a> by &#x3053;&#x306F; (<a href="https://codepen.io/smspp" rel="nofollow noopener" target="_blank">@smspp</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p><p class="codepen" data-height="265" data-default-tab="js,result" data-slug-hash="mYbvRK">
  See the Pen <a href="https://codepen.io/smspp/pen/mYbvRK/" rel="nofollow noopener" target="_blank">
  ::slotted not work</a> by &#x3053;&#x306F; (<a href="https://codepen.io/smspp" rel="nofollow noopener" target="_blank">@smspp</a>)
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.
</p>


### [BEMでElement__Elementを許容するのを検討する](https://qiita.com/wintyo/items/fc57d01434f44cc89701)

 wintyoさんの作品

<p class="codepen" data-height="320" data-default-tab="result" data-slug-hash="QPXoKO"><br>
  See the Pen <a href="https://codepen.io/wintyo/pen/QPXoKO/" rel="nofollow noopener" target="_blank"><br>
  Element2&#x968E;&#x5C64;&#x306E;BEM&#x30B5;&#x30F3;&#x30D7;&#x30EB;</a> by wintyo (<a href="https://codepen.io/wintyo" rel="nofollow noopener" target="_blank">@wintyo</a>)<br>
  on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br>
</p>


<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
# 感想

敗北感がすごすぎる。。