{"data":{"site":{"siteMetadata":{"title":"bauhausify","subtitle":"美大出身のWEBエンジニアリング奮闘記","description":"バウシィファイ(bauhausify)は、Webサイト・アプリケーション制作におけるデザインと技術の情報発信ブログです。","descriptionMyself":"\n多摩美術大学<br>プロダクトデザイン専攻卒業 -> <br>GUIデザイン会社勤務 -><br>\n現在フロントエンジニア<br>\n<br>\nMy site -><br>\n<a href=\"http://www.mwrote.com\">www.mwrote.com</a>\n"}},"allMarkdownRemark":{"edges":[{"node":{"id":"96c4d80a-9bd7-527a-a593-6c037913609f","fields":{"slug":"/2019-10-09_WebにおけるVRコンテンツ制作について/"},"frontmatter":{"date":"2019/10/09","title":"WebにおけるVRコンテンツ制作について","category":"Coding","excerpt":"WebにおけるVRコンテンツの正体とサンプルサイト、VRのJavaScriptライブラリを紹介します。"}}},{"node":{"id":"7c296716-643d-52a9-9ff4-a82894e50453","fields":{"slug":"/2019-09-29_vrの雑感とwebエンジニアリング目線のvr/"},"frontmatter":{"date":"2019/09/29","title":"VRの雑感とWebエンジニアリング目線のVR","category":"Coding","excerpt":"最近Oculus Rift Sを購入したので、VRについて、特に酔うということに関して、そしてWebエンジニアリングという観点でもろもろ感じた感想を紹介します。"}}},{"node":{"id":"da4c68b8-f75b-5fb4-b43b-3758f33a3dcb","fields":{"slug":"/2019-09-24_日常的に使うシーン別Node-jsコマンド集/"},"frontmatter":{"date":"2019/09/24","title":"日常的に使うシーン別Node.jsコマンド集","category":"Coding","excerpt":"Macをお使いの人向けに、日常的に使っているNode.jsのコマンドや使い方をシーン別にご紹介します。"}}},{"node":{"id":"04cc99e4-2cc1-545c-af61-cfe82f4423bc","fields":{"slug":"/2019-09-20_2019年版Node-jsのおすすめインストール方法/"},"frontmatter":{"date":"2019/09/20","title":"2019年版Node-jsのおすすめインストール方法","category":"Coding","excerpt":"Macをお使いの人向けに、Node.jsのインストールする際の便利なツールの紹介とおすすめのインストール方法をご紹介します。"}}},{"node":{"id":"b24fa0f2-8884-5053-9f12-a2dbc1ab9fc6","fields":{"slug":"/2019-09-17_p5-jsをreactのコンポーネントとして実行する方法/"},"frontmatter":{"date":"2019/09/17","title":"p5.jsをReactのコンポーネントとして実行する方法","category":"Coding","excerpt":"p5.jsを直接ページ内に読み込ませるのではなく、Reactなどのコンポーネントの中で実行する方法をコードベースでご紹介します。"}}},{"node":{"id":"2e52640f-36d6-5268-99ea-9d58492ffec5","fields":{"slug":"/2019-09-14_p5-jsを本番サイトで使う方法/"},"frontmatter":{"date":"2019/09/14","title":"p5.jsを本番サイトで使う方法","category":"Coding","excerpt":"p5.jsをいざプロダクションビルド(本番サイト向け)で使う場合、一体どのような方法で使うのが最適でしょうか。p5.jsの特徴を踏まえ、代表的な使い方をご紹介します。"}}},{"node":{"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","fields":{"slug":"/2019-09-11_p5-jsスケッチトレーニング-円弧の線を円周上に沿って動かす/"},"frontmatter":{"date":"2019/09/11","title":"p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-","category":"Coding","excerpt":"p5.jsのarcと簡単なEasing式を使い、円弧の線を動かします。"}}},{"node":{"id":"f511504c-0429-54aa-a2b2-17d049680fa7","fields":{"slug":"/2019-09-08_アトミックデザインはコンポーネント再利用の設計方法/"},"frontmatter":{"date":"2019/09/08","title":"アトミックデザインはコンポーネント再利用の設計方法","category":"Design","excerpt":"アトミックデザイン(Atomic Design)はデザイン手法と思われがちですが、エンジニアリング、設計手法に近い考え方です。その考え方の一例を紹介します。"}}},{"node":{"id":"3a8f96d7-8238-57b2-be53-57c0bab5d727","fields":{"slug":"/2019-09-05_JSでアニメーションできるフォントleonsans/"},"frontmatter":{"date":"2019/09/05","title":"JSでアニメーションできるフォントleonsans","category":"Coding","excerpt":"CanvasやPIXI.js上で展開できるプログラマブルなフォントleonsansを紹介します。"}}},{"node":{"id":"aa5f4477-fc03-52d8-a793-d1abdb3a7ecd","fields":{"slug":"/2019-09-02_p5jsのコードをsketchファイル上で実行する方法/"},"frontmatter":{"date":"2019/09/02","title":"p5jsのコードをsketchファイル上で実行する方法","category":"Coding","excerpt":"Sketchで幾何学的なパターンを描くのに最適な、Processing(p5js)のコードをSketch上で実行できるPluginを紹介します。"}}},{"node":{"id":"b1d3973a-65b6-5631-ae87-d3334f795deb","fields":{"slug":"/2019-08-30_BEMSMACCSを受け継いだ書きやすいCSS記法RSCSS/"},"frontmatter":{"date":"2019/08/30","title":"BEM, SMACCSを受け継いだ書きやすいCSS記法RSCSS","category":"Coding","excerpt":"気軽にCSS書きたいけどGlobal汚染して破綻するのは避けたい。RSCSSというCSS記法(設計)はそんなケースにぴったりです。私は2年ほど前から今もずっと使い続けているので、その特徴などをコードベースでご紹介します。"}}},{"node":{"id":"6447a8c6-ecea-5d34-94f4-b65f0b6f3b70","fields":{"slug":"/2019-08-27_フォーミュラによる美しいパターンをjavascriptで描く/"},"frontmatter":{"date":"2019/08/27","title":"フォーミュラによる美しいパターンをJavaScriptで描く","category":"Design","excerpt":"美しいパターンというのは、JavaScriptで簡単に描くことができます。"}}},{"node":{"id":"97897291-11c4-5dba-b0d8-0bbcd0851d00","fields":{"slug":"/2019-08-24_Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法/"},"frontmatter":{"date":"2019/08/24","title":"Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法","category":"Design","excerpt":"アニメーション作成にはどのツールを使うべきでしょうか。SVGアニメーションのように拡大してもあれない、そして再利用しやすいアニメーションが作れるBodymovinというAfterEffectsのプラグインを紹介します。"}}},{"node":{"id":"156242f5-f991-540a-8b82-2321b7bbc8a9","fields":{"slug":"/2019-08-21_ブラウザで機械学習が実行できるml5jsを試してみる/"},"frontmatter":{"date":"2019/08/21","title":"ブラウザで機械学習が実行できるml5jsを試してみる","category":"Coding","excerpt":"フロントエンドエンジニアは絵を描くのが苦手だけど、絵をブラウザで表示するのは得意です。それと同じことが、機械学習でも起こるのでは？そんな近未来を予感させてくれるような、ブラウザ実行型のライトウェイトな機械学習ライブラリml5jsを紹介します。"}}},{"node":{"id":"120932f2-28cf-5e37-aaba-6aee6eea5714","fields":{"slug":"/2019-08-15_たった4ステップでVueを使う方法/"},"frontmatter":{"date":"2019/08/15","title":"たった4ステップでVueを使う方法","category":"Coding","excerpt":"実はVue.jsは、JavaScript初学者でも簡単に導入できるような仕組みがあります。この記事では、Vue.jsの強力な特徴と、導入するには何をしたらいいのかを説明します。"}}},{"node":{"id":"5732c3b3-4830-56a4-a897-9ad20e605e6f","fields":{"slug":"/2019-07-23_かわいいファミコン風CSSライブラリNEScss/"},"frontmatter":{"date":"2019/07/23","title":"かわいいファミコン風CSSライブラリNES.css","category":"Coding","excerpt":"簡単にファミコン風の見た目にするCSSライブラリ NES.css について、その内容や導入方法、使用感などをレポートします。"}}},{"node":{"id":"a9f2125a-caa7-5d36-a7d1-c68b1a35d0fa","fields":{"slug":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/"},"frontmatter":{"date":"2019/07/15","title":"Pts.jsによる実践ジェネラティブアート","category":"Coding","excerpt":"Ptsという幾何学的な図形を描画するのに特化したJavaScriptライブラリをご紹介します。"}}},{"node":{"id":"58798d4e-8c27-562f-9281-b460a21a2fdb","fields":{"slug":"/2019-07-10_UIデザインの原則デザインガイドライン/"},"frontmatter":{"date":"2019/07/10","title":"UIデザインの原則デザインガイドライン","category":"Design","excerpt":"UIのデザインって何から始めたらいいのでしょうか？実はデザイナーは特にアプリをデザインする際に、デザインガイドラインをベースにデザインをしています。この記事では、有名な3社、Apple、Microsoft、Goolgeのデザインガイドラインを紹介します。"}}},{"node":{"id":"4991411f-1b25-5a1b-9739-fe69caf8f920","fields":{"slug":"/2019-07-06_人生のパートナーとなるテキストエディタspacemacs/"},"frontmatter":{"date":"2019/07/06","title":"人生のパートナーとなるテキストエディタSpacemacs!","category":"Coding","excerpt":"近年VSCode[VisualStudioCode]というエディタが私の界隈では人気ですが、10年以上前から生存し、今もなお進化し続けるエディタSpacemacsがとてもおすすめなのでご紹介します。"}}},{"node":{"id":"1eb35481-156d-520b-ab66-a911316fe17b","fields":{"slug":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/"},"frontmatter":{"date":"2019/07/03","title":"Webで簡単にコードで絵を描くp5.js","category":"Coding","excerpt":"描画ライブラリp5.jsとCodepenを使い、ブラウザ上で簡単にスケッチを描く方法を紹介します。"}}},{"node":{"id":"288bb46c-ae25-5b44-b480-7260e1c15904","fields":{"slug":"/2019-07-01_このブログについて/"},"frontmatter":{"date":"2019/07/01","title":"このブログについて","category":"Other","excerpt":"このブログで書いていくこと、そしてこのブログの由来"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":true}}