React + kuromoji.js + D3-CloudでWordCloudをブラウザに描画
なにこれWordCloudをJSだけで生成したい。Pythonとか使わずにフロントエンドだけでやりたい。というモチベーションで、kuromoji.jsとD3-Cloudを使って文字列をインプットにWordCloudを描画するReactアプリ...
2019/05/04
ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方
なにこれSNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。ただTwitterやYouTubeなどの埋め込...
2019/01/11
Reactコンポーネントをnpmで公開する（GitHub Pages付き、Babel7、webpack4）
なにこれTIS Advent Calendar 2018の13日目の記事です。よろしくお願いします！最近Reactコンポーネントをnpm公開してみました（参考記事：CSSのclip-pathでSlit Animationを実現する）。そこで...
2018/12/12
CSSのclip-pathでSlit Animationを実現する
なにこれSlit Animationを実現するReactコンポーネントをCSSのclip-pathを使って作りました。Slit Animation(スリットアニメーション)は下記のようなものです。コマ画像を縞々にして合成した画像に、スリット...
2018/12/02
unifiedでMarkdownをHTMLに変換 & ReactでQiitaっぽい目次を作る
なにこれ自分のブログの目次をQiitaっぽくしたい...現在表示中の章をハイライトする目次を作りたい...ということで作りました。マークダウンをHTMLに変換するのにunifiedという構文解析ライブラリを使っています。メモ用にReactサ...
2018/10/29
Gatsbyにおけるコンポーネント分割とCSS Module
なにこれGatsbyでブログを作っていて、機能拡張とともにテンプレートが肥大化してきたので、下記図の青枠単位でコンポーネント分割しました。あわせてCSS Moduleも採用しました。そのときのメモです。CSSをコンポーネントスコープにする方...
2018/10/14
Reactで構造化データマークアップ（JSON-LD対応）
なにこれググった時に自分のブログ(React製)でパンくずを表示させたいということでJSON-LD対応しました。JSON+LDについてググると色々良い記事がでてきて一通り学ぶことができました。ここでは、それら記事の紹介を兼ねて、構造化データ...
2018/09/30
ReactでSNS対応（Gatsby製ブログでSNSシェアボタン、OGPタグ追加）
なにこれGatsby製ブログ(Reactアプリ)でSNS対応した時のメモです。(1) SNSシェアボタンと(2) 自分のSNSへのリンクを設置して、ブログの記事をSNSでシェアできるように、、、また、(3) OGPタグを設定し、SNSでシェ...
2018/09/17