Categories: よもやま話

ソースコードの投稿共有コミュニティサイトは見て楽しい触って楽しい

今回は、たまたま見つけたソースコード投稿共有コミュニティサイトのアニメーションが色々と面白かったので書いておきたいと思います。

ソースコード投稿共有コミュニティサイトとは?

ざっくり言うとWebエンジニア向けのpixiv (ピクシブ) といった感じでしょうか。

国内で運営されている jsdo.it の紹介内容を見るとわかりやすいですね。

jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。
書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。技術に自信がなくても大丈夫!共有されているコードをアレンジして、最先端のテクニックを手に入れましょう。

jsdo.it – Share JavaScript, HTML5 and CSS

こちらは海外のサイトで一番人気があるサイトのようです。
CodePen – Front End Developer Playground & Code Editor in the Browser

ブログにコードを埋め込んでみる

ソースコード投稿共有コミュニティサイトに投稿されているソースコードはダウンロードできるだけでなく、SNSで拡散したりブログに埋め込むことができるようになっています。

表示画面上部のボタンで各種ソースコードと動作結果を切り替えることができるようになっています。

CodePen の場合

See the Pen WpPmxx by otwo (@otwo) on CodePen.

jsdo.it の場合

HTML5のCanvasを使って桜を降らせるアニメーション

上で紹介した CodePen のコード はブログで詳しい解説がされています。とても分かりやすいので、近いうちに実際に試してみたいと思います。

Canvasで桜を降らせてみました _ 株式会社オーツー|スタッフブログ
https://www.otwo.jp/blog/canvas_sakura/

corevale