bauhausify

WebにおけるVRコンテンツ制作について

Wed, 09 Oct 2019 00:00:00 GMT

WebVRのサンプル集

まずは、手軽に体験できるWeb上のVR作品のリンクを紹介します。
※インタラクティブなコンテンツの場合はVRデバイスが必要です。

SueprMedium

SuperMeidumはMozillaの元エンジニアが作成したVRブラウザです。
OculusStoreやSteamStoreで無料でインストールできるVRアプリです。
URLを直に入力してサイトを試すこともできますが、あらかじめホーム画面に厳選されたサイトが並んでおり、クリックすると実行できます。
コンテンツをやめたい場合は、右コントローラーのスティックを下方向にしばらく押し込むとホームに戻れます。

WebVR Direcctory

WebVR Directoryというサイトでは、様々なVRサイトが一覧で表示されます。私は、Oculus RiftでバーチャルデスクトップごしのFirefoxからアクセスしました。各ページへ移動し、CardoboardアイコンをクリックするとVRモードに切り替わります。
コンテンツによっては終了ボタンがないので、Oculusボタンを長押しして無理やり起動中のアプリを終了することで抜け出すことができました。
SuperMediumから見れるようですが、URLを入力してもなかなか表示されなかったので断念しました。

VRコンテンツの正体

コンテンツ制作の前にVRの正体について話しておきます。 VRコンテンツとは以下の特徴を持ったコンテンツのことを言います。

左右それぞれの目線の画面を描画し、1つの立体感のある映像にみせる
VRデバイスのセンサー値を検出できること

VirtualReality(仮想現実)というと大げさに聞こえますが、その実態は、左右の目それぞれからみた視点の異なる映像をVRデバイスに出力しているだけです。
２つの映像を脳が処理し一つの映像のように見せることで遠近感、立体感が増します。

そして、顔の傾き体の動き、手や指の動作をセンサーが検知し、体を動かせば視点が変わり、腕を振れば映像の中のモデルも腕をふるようにつくることで、あたかも仮想現実の中にいるように錯覚します。

リアルタイムで3Dコンテンツを処理するデバイスの能力、自分と周囲の状況を把握するセンサーの技術の発達により、近年どんどん没入感がますようになってきています。
今後はより解像度や、デバイスの小型化が進み、発達していく分野でしょう。

WebにおけるVRコンテンツの制作について

WebでVRコンテンツを作る簡単な方法はライブラリを使用することです。
ライブラリが前項の2画面出力やデバイス情報の取得を補ってくれて、製作者は3D空間上のコンテンツ制作にのみ集中することができます。

Three.jsを使い3Dコンテンツを作成しVR対応させる
VRに特化したA-Frameを使いより簡単に制作する

Three.js(Gihubスター数55156)の対抗馬としてBablylon.js(スター数10212)が、A-Frame(スター数10542)にはReact 360(7576)があります。
2019年10月現在では、Githubのスター数や実績の多さからみて、Three.js、A-Frameが代表的なライブラリと言えるでしょう。

Three.js

Three.jsはそのままではVR対応できませんが、たった数行で対応することができます。
やり方は、公式サイトのVRページにかかれています。
こちらの方がカスタマイズ性や自由度が高そうですが、3Dの基礎を理解していないと敷居が高いかと思います。
ライト、ジオメトリ、マテリアル、メッシュ、カメラ、マッピング、このあたりのワードが理解できる方は簡単に始めれるでしょう。

A-Frame

redditのWebVRに関する質問でもどのフレームワークがいいか質問が上がっていますね、A-Frameに軍配が人気のようです(MozillaのVRチームもGoogleのA-Frame使っているそうです)。

まだ、さらっとドキュメントを見ただけですが、Introductionのページに以下のHTMLがあります。

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

HTMLとしてみても、非常にわかりやすくとても使いやすそうです。
面白そうなので、次回記事にしたいと思います。

VRの雑感とWebエンジニアリング目線のVR

Sun, 29 Sep 2019 00:00:00 GMT

私は酔いやすく、スーパーファミコンのマリオカートやマリオオデッセイで酔ったりします。
なので、個人的にはこの酔いやすいかどうかという観点が非常に重要です。

Oculus Rift Sを体験して、酔いやすいコンテンツがなんなのか少しわかったのでご紹介します。

※あくまで位置個人の意見です。人によりやはり酔ってしまうということはありえますのでご了承ください。

VR(仮想現実)はデバイスの技術向上により一人称視点でも酔わない

これには以下の条件があります。

[デバイス側] 6DoFに対応していること
[コンテンツ側] ユーザーの意図せず視点が変わらないこと

この条件を満たすと酔わないです。

[デバイス側] 6DoFに対応していること

6DoFというのは、頭の回転方向に加え、頭の上下左右前後を検出できるということです。
6DoFが登場するまでは3DoFが一般的で、頭の回転方向しか検出しません。
この仕組により、自分が歩りたり、しゃがんだり、しても視点が追従し、自分の意図したとおりに視点が動く ようになります。

[コンテンツ側] ユーザーの意図せず視点が変わらないこと

いくらデバイスが発達してもコンテンツ側が不意に視点を変えてしまうと酔ってしまいます。

酔わないタイプのゲーム

酔わないタイプのゲームには以下の特徴があります。

移動するが、移動先を自分で指定してテレポートするタイプのもの
プレイエリア(Oculusの場合はGuardianガーディアン、HTCの場合はChaperoneシャペロン)内でのみ行動するもの

例

酔うタイプのゲーム

逆に以下の特徴のゲームはやはり酔ってしまいます。
オープンワールドタイプのものはこのケースが多いです。

コントローラーのスティックやボタンで移動するもの
無重力空間など、意図せず視点が動いてしまうもの

例

酔わないコンテンツ制作のポイント

以上から以下の条件を満たすと良いづらいコンテンツができそうです。

体を左右前後に動かせばカメラが追従する
顔を動かせばカメラが追従する
移動させる場合はテレポートタイプ
勝手に視点を変える仕組みをつくらない(ボタンやスティックでの操作も含む)

ネットサーフィンの一部としてVRが存在している

最後にWebとVRについて、基本的にVRはネイティブアプリですが、WebでもWebVR(WebXR)を使いVRコンテンツを実行することができます。

Oculus Riftの場合は、仮想空間上でデスクトップのFirefoxを起動し、VRコンテンツがあるサイトに訪れます(SUPERMEDIUMのサイトなど、、、)。
そしてVRコンテンツを実行すると、自動でVRモードに切り替わります。
360°動画の場合は、GoogleのCardboardアイコンをクリックするとVRモードに切り替わります。

このようにサイトの一部として、ネットサーフィンの行為の中にVR体験が埋め込まれます。
VRコンテンツの中では、サイト制作者が自由に世界を表現できるので、表現の場としても、非常に可能性を秘めています。
デバイスが進化すればより身近な存在になるでしょう。

ちなみに、サイトwebvr.infoにデバイスごとのWebVRの実行環境が記載されています。
共通して言えるのはFirefox系列のブラウザが対応していることです(Google CardboardのみAndroidのChromeで動きます)。

次回は、実際のWebVRコンテンツづくりについて紹介したいと思います。

日常的に使うシーン別Node.jsコマンド集

Tue, 24 Sep 2019 00:00:00 GMT

この記事は以下のソフトウェアがMacにインストールされていることが前提となっています。

もしインストールされていない方は、一つ前の記事の2019年版Node-jsのおすすめインストール方法をご覧ください。

JavaScriptを実行する

index.jsというJavaScriptファイルを実行する場合、以下のコマンドだけで実行できます。

node index.js

npmのモジュールを使いたい

npm install <モジュール名>でモジュールをインストールします。
が、ここで注意点です。
モジュールのインストール先は２つあります。
npm install <モジュール名>の場合は、Terminalで現在いる場所、ローカルディレクトリにインストールされます。 npm install <モジュール名> -gのように-gをつけるとグローバルインストールとなり、Node.jsのプログラムのある場所にインストールされます。インストールされたモーウールの場所はTerminalでnpm root -gを実行するとわかります。-gをつけた場合、Terminalでどの場所にいても再インストールせずにモジュールを使うことができます。
Terminalから直接実行するようなモジュールやいつでも使いたいモジュールの場合に使います。

インストールするとnode_modulesというディレクトリが作成され、その中にモジュールの実態がダウンロードされます。
JavaScriptファイルで以下を実行すると、モジュールを使うことができます。

index.js

const someModule = require('モジュール名');

モジュールの使用例puppeteerを使いブラウザのキャプチャをとる

サンプルとして、puppeteerというモジュールをインストールし、サイト https://example.com のキャプチャを撮ってみましょう。

デスクトップにsampleというディレクトリを作り移動します。

cd ~/Desktop
mkdir sample
cd sample

puppeteerをインストールします。

npm install puppeteer

同じ場所で、index.jsというファイルを作り以下を記述します。

index.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

最後に実行しましょう。

node index.js

すると、同じディレクトリにexample.pngという名前のキャプチャー画像が生成されているはずです。

npmを使ったプロジェクトディレクトリを作成したい

好きな名前のディレクトリを作成し、npmの初期化コマンドを使います。

mkdir test
cd test
npm init # これがnpmの初期化コマンド

すると、プロジェクトの設定をどうするか、英語で対話的に質問されます。
質問内の()の中は初期値です。よくわからなければ、何も入力せずにEnterを押すと初期値で設定されていきます。
答えた内容は、このあと生成されるpackage.jsonというファイルに記載されます。

チップスとして、npm init -yと実行すると対話なしで、初期値で設定されたpackage.jsonがいきなり生成されます。
package.jsonの各プロパティは公式ドキュメント(英語)か翻訳されたドキュメントをご確認ください。

package.jsonのあるプロジェクトで依存モジュールを設定したい

モジュールをインストールする際のnpm install <モジュール名>のコマンドに--saveオプションをつけると、依存モジュールのバージョン情報がpackage.jsonに追記されます。

puppeteerモジュールを設定したい場合は、以下のコマンドを実行します。

npm install puppeteer --save

注意点として、--saveの他にも--save-devというオプションがあります。
インストールするモジュールがプロジェクトの開発時にのみ使用される場合は--save-devを、プロジェクトが実行されているときに使用する場合は--saveを使います。
--saveの場合はdependencies、--save-devの場合はdevDependenciesのプロパティ名で、package.json内に記述されます。
プロジェクトを配布する場合にとても重要なオプションです。

既存のNode.jsプロジェクトを動かしたい

次は誰かが作成したプロジェクトを実行してみます。
Gitなどでプロジェクトをダウンロードした場合、node_modulesはファイル数とサイズが重く、Gitの管理から除外されており生成されません。

なので、まずプロジェクトのディレクトリにpackage.jsonがあることを確認し、以下のコマンドを実行しましょう。 node_modulesディレクトリが生成され依存モジュールがダウンロードされます。

npm install

npmのモジュールを使いたいではnpm install <モジュール名>とモジュール名を記入していましたが、モジュール名を省略するとpackage.jsonの記載されている依存モジュールがすべてダウンロードされます。

注意点として、ロックファイルがある場合は、必ずそのファイルに対応したコマンドを使います。

package-lock.jsonがある場合は、必ずnpm installを実行
yarn.lockファイルがある場合は、必ずyarnを実行

もしyarnをまだインストールしていない場合は、以下のコマンドでyarnをインストールしましょう。

brew install yarn

よく使うNode.jsのコマンドのショートカットを作りたい

package.jsonのscriptsというプロパティを使用します。
例えばindex.jsを実行する以下のコマンドを頻繁に使っているとします。

node index.js

このショートカットを作成したい場合、package.jsonのscriptsの中に、"ショートカット名": "ショートカットしたいコマンド"を定義します。

package.json

{
  "scripts": {
    "start": "node index.js"
  }
}

このように記述すると、npm run <ショートカット名>でショートカットしたいコマンドが実行されます。
以下を実行すると、node index.jsが実行されます。

npm run start

もしyarnで実行したい場合は、yarnのあとにショートカット名を入力するだけです。

yarn start

まとめ

この記事の内容を覚えると、誰かが作成したプロジェクトでも、ドキュメントを見ずに簡単に実行できてしまうケースが多いです。
例えば、mikeyさんのreact-scaffoldというプロジェクトを試してみたいとします。
package.jsonのscriptsにstartという記述があるので、以下のコマンドを実行します。

git clone https://github.com/mikeyamadeo/react-scaffold
cd react-scaffold
yarn
yarn start

すると、特にドキュメントなども見なくても、Webサーバーが立ち上がり、いつでも開発できる状態になります。

コードがオープンに公開されるこの時代、リポジトリの多いNode.jsを習得することはとても有意義なことです。
おすすめするのは、0からnpmのプロジェクト(パッケージ)を作ってみることです。
一つ一つ何が起こっているのか理解することで、誰かのパッケージを使う際や、エラーなどが発生した際に、その知識が役立ちます。

2019年版Node-jsのおすすめインストール方法

Fri, 20 Sep 2019 00:00:00 GMT

簡単なNode.jsの特徴

まずNode.jsの特徴を簡単におさらいしましょう。 Node.jsの大きな特徴は2つあります。

サーバーサイドでできることがJavaScriptでできる(ファイルの読み書き、サーバーの起動などなど)
npmというパッケージ管理ツールで世界中の人のコードが使える

Node.jsとは一言でいうとサーバーサイドJavaScript環境です。
今までクライアントサイドでしか動かなかったJavaScriptですが、Webサーバーやファイル操作など、Java、Ruby、Python、PHPなどの言語でしかできなかった領域に足を踏み入れることができるようになりました。
そして、強力なnpmというJavaScriptのパッケージ管理ツールがあり、世界中のプロフェッショナルが作成したコードを簡単に使えます。
もしすでにNode.jsをインストールされている場合は、次の記事でよく使うコマンドをまとめているのでご覧ください。

事前にインストールすること

では早速必要なツールをインストールしていきます。
使いたいのはNode.jsだけなのですが、はじめにインストールしておいたほうがいいツールも合わせてご紹介します。
大きく以下の２つをインストールします。

Homebrew
Node.jsバージョン管理ツール

Homebrewのインストール

Homebrewとは、Terminalなどのコマンドラインから、コマンドラインツールやMacAppを管理するツールです。
エンジニアならただちにインストールしましょう。
ツールやアプリは、その提供元により様々なインストール方法がありますが、それらをすべてbrew install <パッケージ名>というコマンドで統一できます。
アプリをインストールする場合はbrew cask install <アプリ名>というようにbrewのあとにcaskを追加します。

インストールは、公式サイトにも記載されている以下のコマンドをTerminalに貼り付けEnterキーで実行します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.jsバージョン管理ツールのインストール

Node.jsは公式サイトにかかれているインストール方法ではなく、バージョン管理ツールからインストールする方法をおすすめします。
公式の方法は、1つのバージョンしかインストールできないので、複数プロジェクトを横断していると、バージョンを変えないと動かないことが多々あり、その際に都度アンインストールとインストールを繰り返すのは手間です。

おすすめはnodenvですが、他にもRubyやPythonなどのバージョンも管理したい場合はanyenvからインストールすることをおすすめします。

nodenvのいいところは、プロジェクトごとに使うバージョンを指定でき、バージョンを手動で変える手間すら不要なところです。anyenvはnodejsだけでなく多言語のバージョン管理ツールもまとめて管理できる1つ上のレイヤーのツールです。

brew install anyenv
anyenv init

~/.bash_profile(or ~/.zshrc)にeval "$(anyenv init -)"を記述します。

# Terminal再起動
anyenv install --init
anyenv install nodenv

これでnodenvがインストールされました。

Node.jsのインストール

それでは最新バージョンのNode.jsをインストールしましょう。

nodenv install -lを実行すると、インストール可能なバージョンがすべて表示されます。
この中から数字で始まる最新バージョンを調べます。
そして、以下を実行します。

最新バージョンが11.10.0の場合

nodenv install 11.10.0

これでインストール完了です。
node --versionを実行し、インストールしたバージョンが表示されれば成功です。

次回は、実際に業務でよく使うNode.jsのコマンドたちを紹介したいと思います。

p5.jsをReactのコンポーネントとして実行する方法

Tue, 17 Sep 2019 07:53:50 GMT

p5.jsを本番サイトで使う方法では、グローバルスコープ内(windowオブジェクト直下)に直接p5.jsを読み込ませ、p5.jsのグローバルモードとしてp5jsを実行する方法を解説しました。

この記事では、p5jsのインスタンスモードを使用し、Reactなどのコンポーネントとしてp5.jsを読み込ませる方法を解説します。
インスタンスモードとグローバルモードの違いはp5.jsを本番サイトで使う方法をご覧ください。

p5.jsのWrappingコンポーネントをゼロから作る

動くサンプルコードはCodeSandBoxにあります。コードのみ見たい方はそちらをご覧ください。

まずreactとp5をインストールしましょう。
関数コンポーネントで書きたいので、ReactのuseEffect, useStateあたりを使いたいので、Reactのバージョンは16.8以上が前提です。クラスコンポーネントで書きたい方は適宜置き換えてください。

npm install react react-dom p5 --save

次にWrappingコンポーネントを作成してきます。
P5Wrapperという名前のReactの関数コンポーネントを作成します。
同時に、p5jsからcanvas要素を生成する先のdiv要素をwrapperという参照名で作成します。

const P5Wrapper = props => {
  const wrapper = React.createRef();
  return <div ref={wrapper} />;
}

p5jsは圧縮版を_p5として読み込ませます。

import _p5 from "p5/lib/p5.min";

クラスコンポーネントのStateとComponentDidMountに変わる関数を使いたいので、依存モジュールをimportします。
useStateがStateを扱う役割をし、useEffectがComponentDidMountの役割をします。

import React, { useState, useEffect } from "react";

p5のインスタンス格納用に、stateを宣言します。
ここでp5という名前を使いたかったので、p5js本体は_p5という名前にしています。

const const [p5, setP5] = useState(0);

useEffectを使い、p5jsをwrapperにマウントさせます。
wrapperはdiv要素なので、div要素がレンダリングされたあと実行されるuseEffectの中でないと、p5jsをマウントできません。
第2引数にprops.sketchを渡さないと無限にcanvasが生成されてしまいますのでご注意ください。

useEffect(() => {
  setP5(new _p5(props.sketch, wrapper.current));
}, [props.sketch]);

全体のコードは以下のようになります。
これでp5jsのWrapperコンポーネントが完成しました。

P5Wrapper.js

import React, { useState, useEffect } from "react";
import _p5 from "p5/lib/p5.min";
import PropTypes from "prop-types";

const P5Wrapper = props => {
  const [p5, setP5] = useState(0);
  const wrapper = React.createRef();

  useEffect(() => {
    setP5(new _p5(props.sketch, wrapper.current));
  }, [props.sketch]);

  return <div ref={wrapper} />;
};

P5Wrapper.propTypes = {
  sketch: PropTypes.func
};

export default P5Wrapper;

つぎにsketchファイルを別ファイルとして用意しておきます。
内容は300x300pxのcanvas内でマウス座標に従い赤い丸が描画されるというものです。

sketches/sketch1.js

const sketch = p => {
  p.setup = () => {
    p.createCanvas(300, 300);
  };
  p.draw = () => {
    p.background(240);
    if (p.mouseX === 0 && p.mouseY === 0) return;
    p.fill(255, 0, 0);
    p.noStroke();
    p.ellipse(p.mouseX, p.mouseY, 100, 100);
  };
};

export default sketch;

上記で作成したP5Wrapper.jsとsketch1.jsファイルを使用し。 Reactのindexファイルから参照します。

import React from "react";
import ReactDOM from "react-dom";
import P5Wrapper from "./P5Wrapper";
import sketch1 from "./sketches/sketch1";

function App() {
  return (
    <div className="App">
      <h1>Hello p5.js in React</h1>
      <P5Wrapper sketch={sketch1} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以上で完了です。
動くサンプルコードはCodeSandBoxにありますのでご覧ください。

[おまけ]react-p5-wrapperライブラリ編

上でp5jsのwrappingコンポーネントを自作しましたが、もっとお手軽に使いたい方は、同様の機能が実装されているreact-p5-wrapperを使うのがおすすめです。
コードはGithubのREADMEより拝借いたしました。
内容も同じなので、そちらを見ていただいても同じです。

それではまず、既存プロジェクトに依存モジュールをインストールします。

npm install react-p5-wrapper --save

まずsketchファイルは1つのJSファイルとして完結させます。
グローバルモードから移植する場合は、すべてのp5js関数の先頭にp.をつけるだけです。
Reactのアプリケーションスコープから値もpropsとして渡せます。
myCustomRedrawAccordingToNewPropsHandler関数で値を受け取り、内部スコープの変数に格納しています。

sketch.js

export default function sketch (p) {
  let rotation = 0;

  p.setup = function () {
    p.createCanvas(600, 400, p.WEBGL);
  };

  p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    if (props.rotation !== null){
      rotation = props.rotation * Math.PI / 180;
    }
  };

  p.draw = function () {
    p.background(100);
    p.normalMaterial();
    p.noStroke();
    p.push();
    p.rotateY(rotation);
    p.box(100);
    p.pop();
  };
};

あとはreact-p5-wrapperコンポーネントのpropsに上で作成したsketch.jsファイルを渡します。

import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketch.js';

<P5Wrapper sketch={sketch} />

P5Wrapperコンポーネント内で自動でcanvasが生成されp5jsが実行されます。

以上でライブラリ版は完了です。

まとめ

react-p5-wrapperを使った例も書きましたが、自分でいろいろカスタマイズしたい場合は、冒頭のカスタムコンポーネントを作成することをおすすめします。
Vueのコンポーネントは書いていませんが、考え方はReactと同じです。
他にもiframeで動かすケースも考えられますが、iframeの参照URL先でグローバルモードのp5jsを動かすだけですので省略します。
後日余力があれば、nodejsとかと組み合わせて書いていきたいと思います。

それでは、よいp5ライフを!

p5.jsを本番サイトで使う方法

Sat, 14 Sep 2019 00:00:00 GMT

前提知識 p5.jsの書き方とその特徴

p5.jsはその書き方に着目すると2パターンあります。

標準の書き方(グローバルモード)

まず公式のGet Startedページに記載されている書き方です。
後で登場するインスタンスモードと区別するためにこの記事ではグローバルモードと呼ばせてください。

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  fill(100);
  noStroke();
  ellipse(width/2, height/2, 50);
}

本家のProcessingの書き方にできるだけ似せており非常に書きやすいです。
簡単にsketchを書きたい場合、プロトタイプや研究用として暫定的に使いたい場合、他のJSライブラリを使わない小規模なサイトの場合に向いています。
しかし、グローバル領域を汚染している(windowオブジェクトの中に直接p5.jsが定義されている)ので、他のJSファイルや今後書いていくJSファイルと定義がコンフリクトする可能性があり、プロダクションビルドではあまり使いたくない方法です。

インスタンスモード

公式のInstance Containerページに記載されています。

index.html

<div id='container'></div>

index.js

const sketch = function(p) {
  p.setup = function() {
    p.createCanvas(100, 100);
  }

  p.draw = function() {
    p.background(0);
    p.fill(100);
    p.noStroke();
    p.ellipse(width/2, height/2, 50);
  }
}


new p5(sketch, 'contaienr');

グローバルモードと比べると、表示結果は同じなのですが、明らかに記述量が多く書きづらいですね。
ただしこの場合、グローバル領域を汚染しているのはp5という関数のみです。
なので、こちらは少し書きづらいけど、安全な書き方です。さらに、p5を実行する場所も指定できます。

注意点として、window直下にsetupもしくはdraw関数を定義しないことです。
もし定義してしまうと、インスタンスモードではなくなりグローバルモードになります。

ちなみにBabelなどのES6環境下であれば、functionを省略できる文、少しコード量は減ります。

const sketch = p => {
  p.setup = () => {
    p.createCanvas(100, 100);
  }

  p.draw = () => {
    p.background(0);
    p.fill(100);
    p.noStroke();
    p.ellipse(width/2, height/2, 50);
  }
}

p5.js具体的な読み込ませ方

ざっと考えると以下のパターンが考えられます。

scriptタグで読み込ませ、グローバルモードで実行
作品ごとに別URLで準備しておき、使いたいページ内でiframeとして実行する
scriptタグで読み込ませ、インスタンスモードで実行

scriptタグで読み込ませ、グローバルモードで実行

小規模なサイトや他のJSライブラリを使っていなく、自由にJSを書ける環境であればおすすめです。
しかし、大概の本番サイトの場合、グローバル汚染するのでおすすめしません。

作品ごとに別URLで準備しておき、使いたいページ内でiframeとして実行する

ハック的なやり方です。
ただサイト構造やサーバーサイドを設計する必要があり、iframeをページ内で扱う必要があるため、扱いづらく複雑です。
iframeを前提とした環境を整備できるのであれば、おそらく一番スマートなやり方ですが、導入の敷居が高いです。

scriptタグで読み込ませ、インスタンスモードで実行

書きづらさを除けば、導入の敷居が低く、グローバル汚染もほぼなく一番現実的な方法です。
いきなりインスタンスモードで書いてもいいですが、ローカルや公式のp5.jsのブラウザ実行環境でグローバルモードで最終的なコードを完成させたあと、インスタンスモードに変換するのがおすすめです。

まとめ

setupかdraw関数をグローバルスコープで定義するとグローバルモードになる、それ以外だとインスタンスモード
グローバルモードは書きやすいけど、グローバル汚染する
インスタンスモードは書きづらいけど、グローバル汚染しない
練習、プロトタイプ、研究では、書きやすいグローバルモードがおすすめ
本番サイトではグローバル汚染を避けるため、インスタンスモードかおすすめ
サーバーサイドも手を出せるのであれば、グローバルモードでiframeもあり
ReactやVueのコンポーネントとして使う場合は後日、別記事でご紹介

p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-

Wed, 11 Sep 2019 00:00:00 GMT

今回はp5jsのトレーニングとして、arcと簡単なEaseOut関数を使ったコードを作りました。

このコードの要点のみ解説したいと思います。
最終的なコードはCodepenでご確認いただけます。

arc関数で円弧を描く
描画する円弧の定義を、オブジェクトとして格納する
複数生成したいので配列に格納する
Easingで動きをつける
draw関数内で最終的な円弧を描く

arc関数で円弧を描く

一見複雑にみえますが、主な描画関数はarcです。

noFill(); // 塗りつぶしをなくします。
stroke(線の色);
strokeWeight(線の太さ);
arc(円弧の中心x座標, 円弧の中心y座標, 円弧の幅, 円弧の高さ, 円弧の開始角度, 円弧の終了角度);

描画する円弧の定義を、オブジェクトとして格納する

円弧の定義の内、動的に変えたい値を1つのオブジェクトに格納します。
動的に変えたいのは色、太さ、円弧の大きさ、円弧の長さです。
自動で様々な円弧を生成したいので、値の初期値にrandom関数を使い、オブジェクトを定義します。

{
  color: color(random(255), random(255), random(255)), // 線の色
  weight: random(1, 3), // 先の太さ
  arcWidth: random(50, width), // 円弧の幅と高さ、正円は幅と高さも同じなので幅のみ定義
  startDegree: random(360), // 円弧の開始角度
  arcLength: radians(random(30, 120)), // 円弧の長さを角度で定義、開始角度とると円弧の終了角度になる
}

複数生成したいので配列に格納する

for文を使い、好きな数の円弧の定義を生成し、arcsに格納します。

let arcs = [];

for(let i = 0; i < 30; i++) {
  arcs.push({
    color: color(random(255), random(255), random(255)),
    weight: random(1, 3),
    arcWidth: random(50, width),
    startDegree: random(360),
    arcLength: radians(random(30, 120)),
  })
}

Easingで動きの緩急をつける

Easing[イージング]に関しては、CodeGridさんの記事で詳しく解説されているのでわからない方はざっと見たほうがいいかもしれません。

ここでは、Processing内でサクッと書きたかったので、こちらの記事の式が簡単だったので、引用させていただきました。

nowValue += (tagetValue - nowValue) * 0.05;

要は目的の値までの距離を均等に徐々に足していくという式です。
目的の値に近づくほど足す値が小さくなっていくので、EaseOut[イーズアウト]の形になります。

他にも、Robert Pennerさんのeasing関数など、様々なEasing関数があるようです。後日チャレンジしてみたいと思います。

そして、Easingの値を格納するために、円弧の定義に新たにdelayDegを追加します。
円弧は0から360の角度で指定するので、目標角度を360としdelayFinalDegに格納します。
上記のEasing式に当てはめると以下の様なコードになります。

const delayFinalDeg = 360;

// Easing部分の式
delayDeg += (delayFinalDeg - delayDeg) * 0.05;

delayDegは円弧ごとに変えたいので、先ほどのオブジェクトに追加します。

{
  color: color(random(255), random(255), random(255)),
  weight: random(1, 3),
  arcWidth: random(50, width),
  startDegree: random(360),
  arcLength: radians(random(30, 120)),
  delayDeg: random(360), // この行を追加
}

draw関数内で最終的な円弧を描く

最後に、p5jsのdraw関数内でcanvasの中心座標に円弧を描きます。
Easing値となるdelayDegは円弧の開始と終了座標にそれぞれ加算します。

arc(
  width/2,
  height/2,
  arcWidth,
  arcWidth,
  radians(delayDeg + startDegree) - arcLength,
  radians(delayDeg + startDegree),
);

delayDegが360まで到達(一回転する)したあと、再度ループして描画させたいので、360に近づいたタイミングで0に戻します。
今回使用したEasing式だと360に値に収束しますが、360になることはないので、-1した値とdelayDegを比較させます。

if (delayDeg > delayFinalDeg - 1) arcLine.delayDeg = 0;

以上のコードをp5jsのライフサイクル内に当てはめ、コードを完成させます。
最終的なコードはCodepenでご確認いただけます。

アトミックデザインはコンポーネント再利用の設計方法

Sun, 08 Sep 2019 00:00:00 GMT

会社でアトミックデザインをここ3年ほど導入していますので、そもそもそれはなんなのか、誤解しやすい点、重要なポイントなどを、あくまで一個人の意見としてご紹介します。

アトミックデザインとは

Brad Frostさんが2013年に記事で公開したUIの設計システムです。
公式のドキュメントはBradさんのアトミックデザインの記事を見てください。
アトム(原子)、モレキュール(分子)、オーガニズム(生物)、テンプレート、ページという定義があり、UIをそれぞれに分類します。

ちなみに、情報が確かかはわかりませんが、こちらの記事によると、1998年に同様の考えをMark Rolstonさんが提唱していたようです。
Mark RolstonさんはAppleのインターフェースなどをデザインしたことで有名なFrogDesignに所属されていたそう。

デザイン手法ではない

A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective.

作者のBradさんは、色、テクスチャ、などの表現で設計システムを語ることにあまり興味がないと言っています。
そして、インスピレーションとして、化学(原子、分子、生物など)に着目した設計手法として提案されています。
なので、デザイン手法ではなく、化学から着想したコンポーネントの考え方となります。

エンジニアとデザイナーのフローは真逆

実際にアトミックデザインを導入しようとすると、エンジニアは導入していこうと意欲的ですが、デザイナーはいまいち感覚がつかめなかったりします。
というのもデザインとアトミックデザインはその作業フローが全く逆です。

デザイナーのフロー

デザインをするときは、いきなりコンポーネントの細部からデザインし始めません。
アイデアスケッチもしていないのに、いきなり図面を引き始めるようなものです。
まずはページ全体を捉えながら、あくまで全体として絵を考え、仕上げていきます。
アトミックデザインで例えると、Pages -> Organism -> Molecule -> Atoms というようにデザインしていきます。

どのコンポーネントがどこと共通化でき、どのようなくくりになるのかは、使い勝手なども考慮して複数画面デザインてはじめて見えてきます。

エンジニアのフロー

逆にエンジニアは、おそらく部品からおいていく人が多いでしょう。
そして、グルーピングする必要があればdiv要素で囲んでいきますよね。

このようにデザイナーはマクロからミクロ、エンジニアはミクロからマクロと作業をする傾向があるので、なかなか足並みを揃えて進めていくのが難しいです。

コンポーネントの分け方として他チームに共有

大事な考え方として、 アトミックデザインはあくまでエンジニアが使うもの として共有することです。
デザイナーには、
「このように分類しています。」
「再利用するときはここから使うか、なければ新しく作ってください。」
などと伝えましょう。

やってはいけないこととして、無理やりアトミックデザインの分け方を強要することです。
エンジニアリングの考え方を他チームに強要してはいけません。

アトミックデザインの本質はUIの再利用

ここからは少し実践的な内容も入れていきます。

アトミックデザインを導入するときに、いちばん大事な考え方は 再利用 することです。
再利用しないのであれば、そもそもアトム、モレキュールなどに分類することに意味がないので。

なので、再利用するUIのみコンポーネント化していきます。
一度しか登場しないUIはコンポーネント化しません。

全ページのデザインが完成してから導入する

再利用するくらいなので、できるだけ多くのページのデザインができていることが好ましいです。
すでにサービスがスタートしており、デザインも含めてリファクタリングするのであれば絶好のタイミングです。
もし、スタートアップ時で全体像がまだ無い場合は、 おそらく使い回すだろう という単位でUIを分けていきます。

実際には以下の手順で分類していきます。

全ページが完成したら、プリントアウトし、同じUIに丸と連番をつけていく
連番をつけたものに``button-default``などと命名し、Atom, Molecule, Organismに分類する
必要であれば分担し、コンポーネントを実装していく

では、どこにグルーピングするかの判断基準をご紹介します。

Atom

再利用する単位で分けていく、ただし、子にさらに再利用するUIがあってはいけない
再利用しないものはいくら大きくても一枚画像のように、アトムでいい

Organism

ページ直下のレイアウトを除くUI

Organismは作者のサイトをみても抽象的なことが書かれており、捉え方が千差万別です。なので、使用しないか、プロジェクト、チームごとに再定義することをおすすめします。

私は、*ページ直下のレイアウトを除くUI* と定義しました。
ヘッダー、ページコンテンツ、ナビ、フッターなどが該当します。

Molecule

AtomやMoleculeを組み合わせたもの

AtomとOrganismに当てはまらないすべてのコンポーネントがここに分類されます。
Atomのみで構成すべきと主張する意見もありますが、作者が提唱しているスタイルガイドのページでもMoleculeの中にMoleculeがあります。

新たなルールが増えるのであまりおすすめはしません。
もし、肥大化する場合は、HTMLのsection要素のように、完全に独立して使用できるものはOrganismにするか、別のグルーピング種別を用意し間引くのも手だと思います。

Template

使用していません。
意見が分かれるところですが、ページテンプレートを共通化する意味があまり見当たりません。

Pages

これは、実際に動くページですね。なので、再利用化、コンポーネント化の時点でこの考えは不要です。
ページごとに実装するタイミングで、Atom, Organism, Moleculeなどの共通コンポーネントとは別のディレクトリで実装していきます。
アトミックデザインに該当しない、そのページ固有のスタイルなどはすべてこの個別ページに作成していきます。

ディレクトリに関しては、別途別記事でご紹介します。

最後にスタイルガイドを作成する

実際にコードを書き始めたら、
コンポーネントを作成した時点で、FEとデザイナー双方への共有のためにスタイルガイドを作成しましょう。

デザイナー、エンジニアともに人が入れ替わった際に、どのようなコンポーネントがあるのか把握できる
実装する際に同じコンポーネントを作ってしまうことを防止する、コードを再利用する

実際はStorybookを導入するか、最短工数でやるなら、コンポーネント専用の開発用Pageを追加し、アトム、モレキュール、オーガニズムを配置しましょう。

まとめ

以上を実践すると、アトミックデザインは、UIを分類し、再利用する際に非常に有効な方法です。

アトミックデザインは銀の弾丸ではなく、そしてデザイン手法でもなく、
実態はコンポーネントのグルーピング、再利用の話です。
特に、エンジニアの観点では、コンポーネントを探すときにある程度どのグループにあるか予測でき、発見しやすくなります。
コンポーネントを探すという行為は、1日になんども発生するのでとても重要です。

また、CSSの設計手法であるSMACCSやBEMなどのように、
すでにあるていど広まっている設計手法だと、
ドキュメントを作成する必要がなく、チーム内で使用しやすいです。

アトミックデザインを通して、コンポーネントの付き合い方を今一度考えてみましょう。

JSでアニメーションできるフォントleonsans

Thu, 05 Sep 2019 00:00:00 GMT

leonsansというライブラリを使うと、Canvas上にJavaScriptで文字を描くことができます。

公式のサンプルをみると実際にどんなことができるのかがわかります。
組み合わせとアイデア次第では無限大にいろいろできすそうです。
メニューごとのサンプルやGithubにGIF画像もあります。

使い方

CDNやnpmパッケージは用意されていません。
Githubからダウンロードし、 zip展開したあとにでてくるdist/leon.jsファイルをHTMLから読み込ませましょう。

<script src="leon.js"></script>

描画する

LeonSansをnewし、draw関数の引数にCanvasの2D Contextをわたすことで、Canvas上に描画されます。

const canvas = document.createElement('canvas');
cosnt ctx = canvas.getContext("2d");

leon = new LeonSans({
    text: 'The quick brown\nfox jumps over\nthe lazy dog',
    color: ['#000000'],
    size: 80,
    weight: 200
});

leon.draw(ctx);

PIXIの場合は、drawの代わりにdrawPixi関数を使用します。

leon.drawPixi(graphics)

p5jsのコードをsketchファイル上で実行する方法

Mon, 02 Sep 2019 00:00:00 GMT

以前TidalCyclesというコーディングによる作曲ツールで簡単なBGMを作りました。
そのときに、ジャケットもコーディングでつけれないかなと思って、
試しに、P5.sketchpluginというプラグインを使って絵をかいたら、
とても簡単にコードで絵を書けたので、今回はそのプラグインを紹介したいと思います。

そのジャケットはこちらです。

P5.sketchpluginの特徴

大量の類似パターンの繰り返しに強い

手作業だと時間がかかるような、幾何学形態の繰り返しなどに強いです。

後の加工がしやすい

作った絵に対して、

ちょっとロゴをのせたい
部分的に手直ししたい

など、あとから加工する場合に最適です。

インストール

まずSketchがインストールされていることを確認してください。有償ですが無料使用できます。バージョンアップしないなら1万円前後で買い切りです。
Githubのリリースノートから最新のp5.*.*.*.sketchplugin.zipをダウンロードしましょう。
zipファイルを解答して、p5.sketchpluginというファイルをダブルクリックして実行しましょう。もしSketchを起動していたら再起動してください。
メニュー > Plugins > p5 という項目があればインストール完了です。

コードを実行する

sketchを起動し、空の新規ファイルを作成してください。
メニュー > Plugins > p5 > Edit and run を実行しましょう。
表示されたウィンドウに以下のコードを貼り付け、左上のPlayを押してみてください。コードが実行されSketch上で描画されます。

//Simple palette of pretty colors
var palette = ["#2C3E50","#FC4349","#D7DADB","#6DBCDB","#FFFFFF"]
var num = 8
function setup() {
    createCanvas(1400, 1400);
}
function draw() {
  noStroke();
  var size = width/num;
  for(y=0;y<height;y=y+size){

    for(x=0;x<width;x=x+size){

      fill(palette[floor(random(5))]);
      rect(x,y,size,size);
      if (random()>0.7){
        fill(palette[floor(random(5))]);
        push();
        translate(+size/2,+size/2);

        var temp = random();
        if(temp < 0.3) {
          ellipse(x,y,size,size);
        }else if(temp >= 0.3 && temp <= 0.6) {
          triangle(x - size/2, y + size/2, x + size/2, y + size/2, x, y - size/2);
        }else if(temp > 0.6 && temp <= 0.7) {
          triangle(x - size/2, y - size/2, x - size/2, y + size/2, x + size/2, y);
        }else {
          triangle(x - size/2, y - size/2, x + size/2, y - size/2, x, y + size/2);
        }

        pop();
      }
    }
  }
}

サポートされているメソッド

ソースを見ると以下の箇所のmethodがサポートされているようです。

メイン関数 ... 代表的な関数のみ移植されていますね
図形描画 ... サポートしている2Dプリミティブの関数です
未サポート ... サポートしていない関数が列挙されています

どこでコードを書くか

Sketchのプラグイン上でコードを書く

簡単に実行できますし、最終的には必ずここで実行して試します。
ただし、Sketchファイル自体に保存できないので、
Sketchファイルとは別にp5Sketch.jsなどように、
JavaScriptファイルとしてSketchファイルと同じ場所に保存することをおすすめします。

p5jsオンラインエディタ上で書く

p5jsオンラインエディタはブラウザ上で実行できる公式のオンラインエディタです。
ファイルをダウンロードできますし、
アカウントを作ればオンラインで保存することもできます。
はSketchのプラグイン上で動くか確認しながら書いていきましょう。

BEM, SMACCSを受け継いだ書きやすいCSS記法RSCSS

Fri, 30 Aug 2019 00:00:00 GMT

以前は、SMACCSやBEMを仕事で使っていました。しかし、今はRSCSSというCSS記法に落ち着いています。

ルーズだけど破綻しない

RSCSSの特徴は一言で言うなら、ミニマムです。

公式のドキュメントは絵が殆どで非常にわかりやすい、Google翻訳で問題なく読める
ルールが厳選されており、覚えることが少なく導入しやすい
BEMのコンポーネントの捉え方が取り込まれている。Block,Element,Modifierあたり
SMACCSのようなマルチクラス前提。Modifierもマルチクラスで指定
書き方が非常に簡潔。例えばModifierは-で始まり、打ち消し系クラスは_で始まる

これだけは守らないといけないこと

RSCSSのルールの中から、これだけは守らないと破綻します。

コンポーネントベースでUIを捉える

コンポーネントでデザインを捉えることが前提です。
2箇所以上同じコードの塊があり、見た目が同じか派生している場合、私はコンポーネントと捉えます。
あっこれどっかで似たようなの書いてるとあれば、コンポーネント化を考えましょう。

コンポーネントは2単語以上ハイフンつなぎ、子要素は1単語

以下のように2単語以上でコンポーネントを命名し、子要素(Element)は1単語で命名します。

.primary-button {
  > .icon {

  }

  > .text {

  }
}

以下のようなコードを書くと、
簡単にGlobal汚染してしまいます。

1単語のコンポーネントはだめです。

.button {

}

コンポーネントの中にコンポーネントではない2単語以上もだめです。それが他で定義済みのコンポーネントなら問題ないです。

.primary-button {
  > .button-icon {
    /* コンポーネントじゃないここでしか登場しないスタイル */
  }

  > .text {

  }
}

コンポーネントの中の要素の指定はすべてセレクタを使用する

子セレクタを使用して、
必ずそのコンポーネント直下の1単語のクラス にのみスタイルが適用されるようにします。

.description-panel {
  > .title {

  }
}

以下のようにしてしまうと、.description-panelのDOM要素以下のコンポーネント.titleを使ったすべてコンポーネントに影響がでてしまいます。

.description-panel {
  .title {

  }
}

コンポーネント自身に自信のサイズ定義をかかない

コンポーネント自身のサイズは親に書きます、
これをしないと他の場所でそのコンポーネントを使い回せません。

.button-group {
  > .primary-button {
    width: 100px;
  }
}

.primary-button {
  /* 自身のサイズ定義はかかない */
}

例えば幅100%で使いたいといったときに、わざわざ打ち消さないといけません。

.primary-button {
  width: 100px;
}

コンポーネント単位でファイルを区切る

クラス名の重複 を防ぐことができます。
2単語以上ハイフンつなぎの命名規則は、チーム人数多いとかぶりやすいです。

追加したほうが良さそうなルール

命名するときの共通の言葉集が必要

見た目や機能に対してどんな英語を使うのか共通化すると、
チームで運営した際に、もっとリーディングしやすくなります。

codicなどの辞書サイトで、検索した言葉を使うようにしましょう。
一人でしか触らない場合はあまり必要はないです。

Media Queryの中に原則クラス定義をかかない

あとからコードを移植しやすいように、クラス定義の中にスタイルを書きます。

.primary-button {
  font-size: 20px;

  @media (min-width: 480px) {
    font-size: 14px;
  }
}

以下のように書いてしまうと、.primary-buttonを移植する場合、場所が離れてしまい移動しづらいです。

.primary-button {
  font-size: 20px;
}

/* ここに他のコンポーネントの定義も書かれている */

@media (min-width: 480px) {

  /* ここに他のコンポーネントの定義も書かれている */

  .primary-button {
    font-size: 14px;
  }
}

破ったルール

ネストはDOMの階層構造とリンクしていればOK

SCSSであることが前提ですが、HTMLの構造を維持して、CSSを書いていきます。

.description-panel {

  > .main {

    > .title {

    }

  }

}

RSCSSでは、ネストは直接の子までです。
しかし、深いネストを避けるにはコンポーネントをさらに分けなければなりません。
そうすると、時間がかかり、コンポーネントの場所が離れてしまい編集しづらくなります。ただ、チーム共通のライブラリの用途等の場合は、しっかりコンポーネントを分けて作りましょう。

以上になります。

どうでしょうか、長々しく書いてしまいましたが、
まずは公式のドキュメントをみるのをおすすめします。
非常にわかりやすいです。

そして実際に書いてみてください。
今までBEMなどで厳格に書いていた人は非常に書きやすいと感じるかと思います。

他にも、CSSの種別と読み込み順の設計方法であるitcssと組み合わせるとよりいいのですが、
それは後日書きます。

Happy Coding CSS!

フォーミュラによる美しいパターンをJavaScriptで描く

Tue, 27 Aug 2019 00:00:00 GMT

こちらのgenerative artistryというサイトで、
巣のJavaScriptのみで美しいパターンのチュートリアル集を発見しました。

https://generativeartistry.com

今回は、上記リンク内の01番目のコードをsketchのインスタンスモードで書き直しましたので、パターンを作る際の簡単な考え方について説明します。

考え方はざっくりまとめると、

ルール(フォーミュラ)を考える
フォーミュラをもとに実行する

です。

ルール(フォーミュラ)を考える

これがパターンを作る際の最も大事なポイントです。
これは言い換えると、最終的な絵はどうなるか作る本人もわからないということです(ある程度想像はしますが)。

デザイナーやアーティストは、最終的にどんな絵を描くか決めてからペンを走らせます。
そして、その描いたとおりに、絵を描いて完成させます。

一方、パターンを作る場合は、まずはじめにルールを決めます。
そして、そのルールに従い、反復して実行し続けます。
最終的な絵は連続して無限に広がる模様を切り取ったような絵になります。

これが大きな考え方の違いです。
つまり、最終的な絵を始めに描いてコードを書き始めるのではなく、
ルールを実行することで絵を描いていきます。

この記事ではそのルールをフォーミュラ[Formula]と名付けます。

では、コードを見てみましょう。冒頭でお見せしたCodepenのフォーミュラ部分はこちらです。

let step = 25;

function formula(x, y) {
  const leftToRight = Math.random() >= 0.5;
  p.stroke('#FFFFFF');
  if (leftToRight) {
    p.line(x, y, x + step, y + step);
  } else {
    p.line(x + step, y, x, y + step);
  }
}

これは言葉で言い換えると、

「25pxのマスの中を、ランダムで左上から右下、もしくは右上から左下に線を描く。」

となります。

Math.random()は0〜1の間の少数値をランダムで返します。
それが0.5より大きければ左上から右下へ、
そうでないなら、右上から左上へ線を描くという条件分岐ですね。

ここで非常に重要なのは、 マスのいずれかの角に線がつながっている ということです。

これでルールは完成です。

フォーミュラをもとに実行する

先程25pxのマスの中のルールを考えたので、
キャンバスすべてが25pxのマスでうまるように、
xとyを25pxずつ移動させ、先程の線を描く関数を実行します。

for (let x = 0; x < p.width; x += step) {
  for (let y = 0; y < p.width; y += step) {
    formula(x, y);
  }
}

先程のマスの特徴は マスのいずれかの角に線がつながっている ことです。
そのマスを連続して並べることで、連続した線が完成しました。

これで完成です。
いかがでしょうか。
このように、ルールを作り、それを実行することで、
簡単にパターンを生成することができます。

あとは自分の納得の行くまで、このパターンと実行を繰り替えることで、
美しい自分だけのパターン見つけることができます。

Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法

Sat, 24 Aug 2019 00:00:00 GMT

Framer XやPrincipleといったすばらいいツールもありますが、なかなかデファクトスタンダードにはなっていない印象です。
そこで、アニメーション制作に関して、特に映像分野ですでに地位を獲得している、AfterEffects(以下AE)を使ったアニメーションの書き出し方法を説明します。

なぜAEがいいのか、以下の理由があげられます。

コーディングでSVGアニメーションを作る場合と比べて、再利用、再加工、管理がしやすい
精密なアニメーションも簡単に作成できる
企業ですでにをAdobeのコンプリートプランに加入していると、すぐに使うことができる

さらに、Bodymovinというプラグインを使うと、デザイナーが作ったものを二次加工や書き写ししなくても、そのままWebやアプリで使えることができます。

Bodymovinとは

hernanさんが制作された、AEのアニメーションを解析し、Webで読み込み可能なJSONファイルとして出力するAEプラグインです。宿泊予約サイトAirbnbが公開しているLottieという、ネイティブアプリやWebで書き出せる方法の中で使われています。余談ですが、Airbnbのデザインチームが以下にすばらしいかは、https://airbnb.design/で見ることができます。
また、GoogleのデザインチームもBodymovinを利用しているようです。Mediumの記事にアプリで使用している形跡がありますし、実際にブラウザ上のコードの中身をみるとBodymovinの文字がありました。

これだけでも使う価値がありますね。特に企業ユースで。

インストール手順

念のためAEは終了してください
AEのプラグインをインストールするためZXP Installerをインストールします。公式サイトからダウンロードしましょう。
homebrewをインストールしている人は以下のコマンドでインストールできます。
```
brew cask install zxpinstaller
```
BodymovinはAirbnbのlottie-webリポジトリから最新のzipファイルをダウンロードできます。リンク先の最新のv*.*.*の箇所をクリックし、Source code(zip)をダウンロードしましょう。
解答した中にある、bodymovin.zxp(build > extension > bodymovin.zxp)を、先程インストールしたZXP Installelrを起動し、ウィンドウ内にドラッグします。
AEを起動します。メニュー > Window > 拡張機能を確認し、Bodymovin が追加されていたらインストール完了です。
頻繁に更新されるので、定期的に新しいバージョンにすることをお勧めします。
最後に設定を変更します。環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスをチェックしてください。

アニメーションを作る

AEのすべての機能が使えるわけではありません。
公式サイトを確認して、対応している機能のみを使ってアニメーションを作りましょう。
AEの使い方は長くなるので割愛します。
このようなデザインツールのリソースの勉強にはYoutubeをおすすめします
ae bodymovinなどで検索するとたくさんでてきますね。
例えばDesignCourseさんはアイコンアニメーションを作り、Bodymovinで書き出す方法を紹介されています。
https://www.youtube.com/watch?v=2Tm8ijJsuMc

Web向けに書き出す

メニュー > Window > 拡張機能 > Bodymovin を選択します。
書き出したいコンポジションを選択し > 歯車アイコンを選択します。
書き出したい種類を選択し、demoを選択するとHTMLファイル１つに書き出してくれます。
Destination Folder(3点リーダーのアイコン)をクリックして保存先を指定します。
Renderを実行すると、指定したフォルダに書き出してくれます。
書き出されたHTMLをブラウザーで表示し、アニメーションが動いていることを確認します。

完成したらフロントエンドエンジニアに、Webの実装方法のURLとAEファイルか書き出したファイルを渡しましょう。

参考です。powermojoさんが動画で書き出し方法を説明されています。
https://www.youtube.com/watch?v=5XMUJdjI0L8

Lottieのサイトをみると、見ていて楽しい魅力的なアニメーションがたくさんありますね。
フロントエンドエンジニアとしても、このようなアニメーションを実装するのは楽しいはずです。

今回はAdobeのAEを使った手法を紹介しましたが、
後日、Framer XやPrincipleなどの他のツールを使ったアニメーション構築方法も記事にしたいと思います。

Happy Designing Animation!

ブラウザで機械学習が実行できるml5jsを試してみる

Wed, 21 Aug 2019 00:00:00 GMT

なぜかp5jsと間違えやすい、ml5jsという機械学習をブラウザ上で実行するライブラリが気なったので、その所見を書きたいと思います。
(p5jsはPtsjsによる実践ジェネラティブアートで紹介しています。)

まず機械学習について簡単に

以前私は、PythonのKerasを用いて少しだけ機械学習に触れたことがあります。
その時の、雑感を端的に説明すると、

学習
推論

この２つが機械学習の大きなフェーズとなり、
一番重要な、そして用意するのが難しい学習のためのデータが存在します。
開発者側はデータから学習したモデルを事前に用意し、
なんらかのサービスのユーザーはそのモデルをもとに機械学習を実行します。ここが推論です。

そのときの機械学習への印象は以下です。

学習させるためのデータが必要、より多く、正確なもの
学習にはマシンスペックが必要、お金を出せば出すほど早くできる、時間とお金の相談
学習させるノウハウは専門家レベルの習得に時間がかかる、素人はトライアンドエラー
学習したモデルをもとにインタラクティブに推論を得るにもある程度のマシンスペックがいる

1-3は到底ブラウザで実行するにはお門違いです。
ml5js は4の実行させるところに主眼をおいたものに思われます。

では実際にサンプルを触ってみます。

ml5jsのはじめのサンプルを試す

ここからの内容は公式のチュートリアルに沿っています。その簡略版です。

まず<head>内にml5jsとp5jsを読み込ませます。
なぜp5jsを使うのかというと、機械学習は画像に対してわかりやすい効果がだしやすいので、画像を取り扱いやすいp5jsが採用されたのでしょう
この記事では最低限のもののみ読み込みます。

<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>

つぎにp5jsのみの機能を使いcanvas要素を作成し、画像を表示します。
今回は、この画像が何の画像なのかを推論します。

let img;

function preload() {
  img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');
}

function setup(){
  createCanvas(200, 133); // 今回読み込んでいる画像のサイズ
  image(img, 0, 0);
}

そこで、肝心のml5jsの登場です。追加しているのは4箇所です。

let classifier, img; // ここと
function preload() {
  classifier = ml5.imageClassifier('MobileNet'); // ここと
  img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');
}

function setup(){
  createCanvas(200, 133);
  classifier.classify(img, gotResult); // ここと
  image(img, 0, 0);
}

// ここ
function gotResult() {

}

まず、TensorFlowの提供する学習済み画像モデルMobileNetを使うと宣言し、

let classifier = ml5.imageClassifier('MobileNet');

画像を読み込ませ、callback関数のgotResult(名前なんでもOK)を指定します。

classifier.classify(img, gotResult);

すると画像解析の数秒後にgotResult関数が呼ばれます。

事前にhtmlにて簡単な受け皿を用意し、

<span id="result"></span>

gotResult関数には以下を書きましょう。

function gotResult(results) {
  console.log(results);
  document.querySelector('#result').textContent = results[0].label;
}

すると、ブラウザコンソールには画像の推論結果が表示され、
span#result要素にはそのテキストデータが表示されます。

詳しいサンプルコードは、記事冒頭のCodePenのリンク先でご覧いただけます。

雑感まとめ

冒頭の機械学習の概要と照らし合わせせつつ、雑感としてまとめます。

実行時のNetwork通信をみると学習済みモデルデータは都度ダウンロードしている。ライブラリ内には存在しない。
場所: https://storage.googleapis.com/tfhub-tfjs-modules/google/imagenet/mobilenetv1100_224/classification/1/model.json
圧縮版のml5jsだけでも1.6MBあり、モデルデータは64KB。モデルデータが軽いが、ライブラリだけでも重い
静止画の推論実行に数秒かかる。動画などにリアルタイムではだいぶ未来の話

やはり、ブラウザ上ではなかなか現状厳しいデータですね。
しかし、ブラウザで実行できることが最大のメリットです。
そして、クライアント側でのモデルの読み込みと推論がこんなに簡単にできることが触っていて楽しいですね。

たった4ステップでVueを使う方法

Thu, 15 Aug 2019 00:00:00 GMT

本来Vue.js(以下Vue)は、JavaScriptによるコンポーネントベースのアプリケーション構築が得意です。
特に状態管理によるUIの切り替えが完結にかけるので、非常に強力です。
しかし、このように話すと難しいのではという印象がありますが、
Reactなどと違い、実は非常に簡潔に、わかりやすくコードが書けるように設計されています。

強力なVueの機能

簡単な例で説明します。
以下のようにJavaScriptでA,B,CそれぞれがtrueかfalseかをもつBooleanを定義したとします。

data: {
  isA: true,
  isB: false,
  isC: false,
}

それをチェックボックスのdataに紐付けます。
v-modelというのがVue特有のデータとHTMLを紐付ける仕組みです。

<input type="checkbox" v-model="isA" />
<input type="checkbox" v-model="isB" />
<input type="checkbox" v-model="isC" />

そうすると以下のコードを書くだけで、
A,B,Cのいずれかがチェックされると表示するようになります。
v-ifという属性がデータのboolean値により表示を切り替える仕組みです。

<div v-if="isA">Aが表示されました。</div>
<div v-if="isB">Bが表示されました。</div>
<div v-if="isC">Cが表示されました。</div>

このように、動的に変化する値に応じて、UIを変えることが非常に簡単に実現できます。

最も簡単な導入方法

この記事では、既存サイトでも最も簡単に導入できるCDN(コンテンツデリバリネットワーク)方式を説明します。
ステップは以下です。

head内にVue.jsを挿入
Vueを使いそうな箇所にidを設定
自分で用意したJavaScript内でVueを実行
v-cloakを設定する

head内にVue.jsを挿入

本番サイトを想定して、最新の固定バージョン(2019/8/15日最新バージョン2.6.10)のvueをhead内で読み込ませます。
最新のバージョンや開発バージョンを使いたい場合は公式サイトを参考にしてください。

2.6.10の部分を最新バージョンにしてください

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

合わせて、Vueを使うためのJavaScriptファイルをbodyの最後で読み込みます。
名前は仮にyour-js-file.jsとしています。

  <script src="./your-js-file.js"></script>
</body>

Vueを使いそうな箇所にidを設定

指定する要素の中にHTMLが存在していても問題ないです。
よくわからなければ、bodyにidを設定しましょう。

<div id="app">
  <p>ここに既存のHTMLが存在していても問題ありません</p>
</div>

自分で用意したJavaScript内でVueを実行

先程用意したyour-js-file.jsでVueを実行しましょう。
HTML内からVueの機能を使うには、このnew Vueの中にデータを記述する必要があります。
参考として、先程のdataを記述しています。

new Vue({
  el: "#app",
  data: {
    isA: true,
    isB: false,
    isC: false,
  }
})

v-cloakを設定する

そのままだと、HTML内のVueの機能を使った箇所が一瞬そのままレンダリングされてしまいます。
例えば、ブラウザ表で一瞬{{ isA }}とそのまま表示され、その後すぐにtrueに切り替わります。
これを防ぐために、Vueが用意しているv-cloak属性を利用して、JavaScriptが読み込まれるまで要素を非表示にします。
ここでは、上で付与したid="app"の箇所にv-cloakを設定しました。

<div id="app" v-cloak>
</div>

CSSの記述も必要です。
既存のCSSに追加するか、CSSファイルを作成し、head内で読み込ませましょう。

[v-cloak] {
  display: none;
}

以上で完了です。

これからJavaScriptを学びたいといった方も、Vueの強力な機能を使いながら、少しづつ勉強してくと楽しいかと思います。
Happy coding JavaScript!

かわいいファミコン風CSSライブラリNES.css

Tue, 23 Jul 2019 00:00:00 GMT

早速ですが、こちらのデモをご覧ください。

装飾的なCSSは一切かかずに、すべてNES.cssというライブラリのみで装飾しています。
(演出として、タイピングエフェクト部分はTyped.jsというJSライブラリを使っています)

デモ以外にも、チェックボックスやリスト、テーブルなど基本的なHTML要素のスタイルはそろっています。
詳しくは公式サイトをご覧ください。

作者は日本人です。作者自身の紹介記事はこちらです。

導入方法

CDN版

ページの内を編集できる場合は、こちら

<link href="https://unpkg.com/nes.css@2.2.0/css/nes.min.css" rel="stylesheet" />

package版

インストールします。

npm install nes.css
# or
yarn add nes.css

css-loaderが設定されている場合は、JSファイルでcssをインポート

import "nes.css/css/nes.css";

scssの場合は、scssファイル内でインポートします。

@import "~nes.css/scss/nes.scss";

使用する上での注意点

日本語はフォントの準備が必要

英語のレトロフォントはGoogle Fontsにあるのですぐ使えますが、
日本語を使う場合は、別途サーバーなどにWebフォントを準備する必要があります。

大抵のフォントファイルはTTF形式で配布されているので、WOFFコンバータなどを使ってEOT, WOFF形式のWebフォントを生成し、サーバーに配置してCSSから読み込みましょう。この記事ではその方法は割愛します。

dialogを使う場合はpolyfillの導入が必要

dialogにはhtmlの<dialog>要素が使われているため、デフォルトだと対応しているブラウザしか動きません。
JSとCSSの２つのpolyfillファイルのimportが必要です。
CDNの場合は以下を<head>タグ内で読み込みましょう

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>

Bootstrapやtailwindcssなどのレイアウト系クラスと組み合わせると使いやすい

NES.cssはあくまでウィンドウやボタンなどの単体コンポーネントの装飾スタイルのみ提供します。
デモのコードもそうですが、Bootstrapやtailwindcssなどと組み合わせることにより、CSSは書かずに使うことができます。

CSSアーキテクチャはBootstrapベース？

Bootstrapではお馴染みのカラー、Primary, Info, Danger, Warn, Successが用意されています。
prefixとしてis-primaryといったようにis-***がつきます。暗くしたい場合はis-dark、丸みをもたせる場合はis-roundedとなります。とてもシンプルです。

このライブラリの使い所

趣向性が高い分、使い所はけっこう限られていますが、なんといっても見た目がかわいいので個人的にはうまく使っていきたいところです。

ゲーム紹介サイトなど
レトロな考えでやるてきな思想のサイトやサービスなど
開発者向けのサイトなど、ファミコン好き多いでしょう、たぶん受けはいいはず

Pts.jsによる実践ジェネラティブアート

Mon, 15 Jul 2019 00:00:00 GMT

Ptsというライブラリが面白そうなので、公式チュートリアルを触ってその感想などをレポートしたいと思います。
初見としては、デモサイトにあるとおり、複雑な計算式による図形描画が簡単なメソッドで高速で動くのかなという印象です。

概念

スペース(PtsSpace): 紙
フォーム(Form): 鉛筆
ポイント(Point): アイデア

この3つの概念で描きたいものを考えるようです。3Dプログラミングをする際のライトやカメラ、シーンのような物事の捉え方の概念でしょうか。詳しくはここ(英語)に書かれています。

コードペンでの土台作り

まずはコードペンでPtsライブラリを追加しましょう。
Settings -> JavaScript -> 検索欄でPtsで検索し、追加します。

ベースとなるCanvas作成

まずはhtmlのcanvas作成します。これがPtsでいうスペースですね。

これには、通常版と簡易版が用意されています。

まず通常版から、グローバルスコープ(window)にPtsの関数を定義します。

Pts.namespace(window)

#hello箇所はcanvas要素のidになり、setup関数では背景の他に、オフスクリーンレンダリング、リサイズ、retina対応の有無を設定できます。

const space = new CanvasSpace("#hello");
space.setup({ bgcolor: "#fff" });

const form = space.getForm();

以上の簡易版として、quickStart関数を使い一行で書けます。
この場合、グローバルスコープにPtsのメソッドや変数、さらにspaceとform変数が作成されます。

Pts.quickStart("#hello", "#fff");

描画処理をかく

quickStart関数の戻り値の関数の引数が毎フレーム実行される関数です。
これは標準のrequestAnimationFrame関数やProcessingのdraw関数に非常によく似ています。

const run = Pts.quickStart("#hello", "#fff");
run((time, ftime) => {
  // ここに毎フレーム実行する描画処理を記述します。
});

他にも、スペースに対して関数を追加(space.add(() => { }))するとその関数が毎フレーム実行されるようです。

図形を描画する

form.pointは、指定した座標に図形を追加します。
デフォルトでは幅5pxの赤い四角が追加されます。
また、space.pointer変数にはマウス座標が格納されています。
以下のコードでは、マウス座標に追従して、幅10pxの円を描画しています。

form.point(space.pointer, 10, 'circle')

アニメーションさせる

アニメーションフレーム関数の引数timeにはフレーム数が格納されています。
以下のように書くと円が伸縮するアニメーションが実行されます。

space.add((time) => {
  const radius = 5 + Num.cycle(time%1000/1000) * 5;
  form.point(space.pointer, radius, 'circle');
})

2行目のNum.cycle(time%1000/1000)の部分を少し解説しておきましょう。

まずtime%1000/1000の部分から解説します。
timeはフレームなので、毎フレームずつ1が追加された整数が入ります。
それを1000で割り、その余りをえることで 0~1000の値にフレームの値を制限します。
最後にそれを1000で割、0~1の値に変換します。
つまり0からはじまり徐々に増え続け、1に近づくとまた0からはじまる数値になります。

Num.cycleは引数に円の角度をラジアン(0~1の値)単位で渡すsin関数です。
サイン関数はイージングの動きを得るときなどに使用します。
ここにtime%1000/1000を渡すことで、イージングのついた0から1の増え続ける値を得ることができます。

関数ベースの使いやすく非常にわかりやすい設計

この記事の内容は公式ドキュメントのGet startedから抜粋したものです。

基本的な構造は以下のように完結にかくことができ、非常に簡単です。

const run = Pts.quickStart("#hello", "#fff");
run((time, ftime) => {
  // ここで以下にアニメーションを記述するかがキモ
});

あとは、Ptsの関数を使い、いかに描画を記述していくかがキモになります。
2章のPt以降は様々な描画方法(命令的なアニメーション手法など)が紹介されていますので、興味があればぜひご覧ください。

UIデザインの原則デザインガイドライン

Wed, 10 Jul 2019 00:00:00 GMT

そもそもデザインガイドラインとは何？

デザイナーによる、アプリやWeb製作者に向けた、デザイン指示書です。
デザイナーが直接指示をしなくても、常に一定の品質のデザインを担保するために作ります。
内容に決まりはないですが、画面ごとの詳細の設計方法ではなく、製品全体を通したデザインの共通ルールが記載されています。
アプリのプラットフォームを展開している大手企業(AppleやMicrosoft、Google)は、無料でデザインガイドラインを公開しており、それぞれのプラットフォームのアプリの品質を担保しています。

OSやデバイスなどのプラットフォームごとにデザインガイドラインがありますが、たとえそのプラットフォームのデザインをするつもりはなくても、UIデザインに関する多くの知見を得ることができます。

Apple Human Interface Guidelines(英語)

アップル製品をデザインする際のデバイスごとの最新のガイドラインです。英語ですが、Chromeの自動翻訳を使えば問題なく読めます。

実は最新のドキュメントよりも、初期のヒューマンインターフェースガイドラインのほうが、文量が少なく読みやすいです。かろでん☆みゅーあさんが保管されています。アップルヒューマンインターフェースガイド。

Microsoft WindowsアプリUXデザインガイドライン(日本語PDF)

Microsoftのデザインガイドラインです。
特に37ページの"デザイナー向けユニバーサル Windows プラットフォーム (UWP) アプリの概要"の章にデザインに関する記述がまとめられています。

開発者用デザインガイドラインはWebで公開されています。内容はPDF版と少し重複していますが、一部デザインに関する内容の除外とコーディングに関する記述が追加されています。

こちらも、Windows7時代のUXデザインガイドラインがおすすめです Windows ユーザーエクスペリエンスガイドライン。最新のものは抽象的でボリュームも少ないですが、デザインに関する細かいコンセプトが多く記載されており勉強になります。
特に645ページのレイアウトに関する記述を見て、僕がデザインしていた当時(2010年ごろ)、要素をどこにおけばいいのかということが少しわかりました。

Google Material Design(英語)

Googleが提案しているマテリアルデザインのガイドラインサイトです

AppleやMicrosoftと比較すると、よりコンセプチュアルになっています。こちらは勉強するというよりは、非常によく考えられたデザインの設計書を読むという感じです。UIをマテリアル(素材)と考え、物質的に捉えます。それがどんな薄さなのか、影を落とすのか、といった内容です。

AppleやWindowsと異なり、面白いなと思うのは、Galleryというデザインコミュニケーションツールを公開していたり、Device Metricsというデバイスの情報一覧ページを作っていたり、音に関するガイドを体験できたりするところです。
ガイドライン自体もかっこよくレイアウトされており、絵と文章のバランスが絶妙で見ていて楽しいです。やはりWebで一気に世界に名を馳せらせたGoogleらしいアプローチですね。

その他のガイドラインについて

デザインの勉強となる情報として、続けて紹介するとボリュームがとても多くなるので、別記事で紹介します。

BtoB向けのUIフレームワークにもデザインガイドライン
ユーザビリティに関する研究や論文

人生のパートナーとなるテキストエディタSpacemacs!

Sat, 06 Jul 2019 00:00:00 GMT

普段よく書く言語が、HTML, CSS, JavaScriptなどの場合、ライトウェイトなテキストエディタが非常に重宝します。
主観ですが、ここ近年の私の界隈での人気のエディタは、Sublime Text, Atom, VSCode[VisualStudioCode]と遷移してるように感じます。今はVSCodeで収まっているのかなという印象です。しかし、それでもやはりSpacemacsはいいと思います。この記事ではその魅力をご紹介したいと思います。

Spacemacsとは

Spacemacsとは、Emacs(GNU Emacs)というエディタの拡張機能セットです。
EmacsはLisp(Emacs Lisp)という言語でエディタ自体を自分で拡張することも、他の人が書いた拡張機能を自分のエディタに設定することもできます。
しかし、いざ設定してみると、うまく動かなかったり、時間がかかったり、使いづらいショートカットキーになったります。
そこで、みんなのベスト機能を選別して、さらに使いやすくチューンナップしてあげよう！といったのがSpacemacsになります。

このエディタを使うメリットはたくさんあります。

メリット

無料。無料に勝るものはないです
かっこいい。無駄なUIが無いので玄人プログラマー感がでます。マウスを一切使わないので、手がキーボードから離れることがなく効率がいいです。
高機能。IDEと言われるようなIntellijIDEAとかXcodeとかVisualStudioに勝る機能がたくさんあります。
org-modeがすばらしい。Markdownに似ているorgというドキュメント形式があるのですが、そのためだけに使うでも価値があります
Mac標準でemacsのキーに対応している。これはMac開発者にemacsユーザーが多いかららしいです
有名な人が使っていたりします。Rubyの作者の松本さんも使われているそうです。個人的にはアート界隈で尊敬しているJosh Nimoy さんが使っているのに注目しています。映画 Tron: Legacy のかっこいい3D部分の原型をコーディングして作った人です。http://www.talisman.org/~erlkonig/misc/tron-legacy-effects-blog/

デメリットは特殊なキーバインド？

もちろんデメリットもあります。それは特殊なショートカットキーです。
Ctrl + Y で貼り付け, Ctrl + W で切り取りといった具合です。一旦覚えると非常に早くコードがかけるのですが、他のソフトを触った時にご作動が多発します。
正直これはなれるしかないです、、、ただなれた先には爆速コーディングがまっています。

インストールしてみよう

前提条件

Mac向けです。Windowsでも動きます。この記事はMac向けです。
homebrewの事前インストールをお願いします。
gitSpacemacsの設定を管理するのに必要です。もしhomebrewがインストールされているなら、ターミナルで brew install gitを実行してください。

Emacsのインストール

まずはhomebrewからGUI版のEmacsをインストールします。すでにインストールされているなら不要です。

brew install emacs-plus

他のアプリケーションと同じように起動できるようにシンボリックリンクを作っておきましょう。

ln -s /usr/local/opt/emacs-plus/Emacs.app /Applications/Emacs.app

Spacemacsの設定のインストール

Spacemacsのメインとなる設定を適用していきます。
もし、すでにemacsを起動していたら既存の設定を退避するか、削除してください。

cd ~/

# .emacs.d.bakというフォルダに既存の設定を退避します。
mv .emacs.d .emacs.d.bak

# 既存の設定を削除します。
rm -rf .emacs.d

次にSpacemacs本体を落とします。

git clone https://github.com/syl20bnr/spacemacs ~/.emacs.d

この状態でEmacsを起動するとSpacemacsとして起動できます。

初期設定を変更してみよう

一度Spacemacsを起動するとホームフォルダ以下に.spacemacsというファイルが生成されます。
このファイルがSpacemacsの命です!

ファイルを開いて中身を確認しましょう。場所がわからない人は、以下のコマンドをターミナルで実行すると開きます。

open ~/.spacemacs

このファイルの大事な箇所は以下です。

(defun dotspacemacs/layers ()
  (setq-default
   dotspacemacs-configuration-layers
   '(
    ;; ここにSpacemacsでデフォルトで用意されているパッケージを追加します。
    ;; 例えばjavascriptを追加すると
    ;; https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Blang/javascript
    ;; にかかれている設定が適用されます。
    ;; 設定可能なパッケージ(レイヤーと呼びます)は
    ;; https://github.com/syl20bnr/spacemacs/tree/master/layers
    ;; で確認してください。
    )
    dotspacemacs-additional-packages
    '(
    ;; ここではelpa(パッケージレジストリ)に公開されているような他の外部パッケージを読み込ませたい場合はここに設定します。
    )
  )
)

(defun dotspacemacs/init ()
  (setq-default
   ;; ここでspacemacsで用意されている初期設定を変更できます。フォントサイズやテーマの設定など、基本的な部分です。
  )
)

(defun dotspacemacs/user-config ()
   ;; このエリアに自分だけの設定を書いていきます。
   ;; 各モード時の設定変更やキー設定など、ここですべてカスタマイズしていきます。
)

実際に自分で好きなパッケージをインストールして自分好みにカスタマイズしていきましょう。
この部分が一番の醍醐味で、このエディタの楽しいところです。

参考までに私のインストールしているパッケージを載せておきます。
普段フロントエンドでマークアップやJS書いているタイプの人に向いています。ここにかかれているパッケージの内容はすべて~/.emacs.d/layersに保存されているものです。
https://github.com/syl20bnr/spacemacs/tree/master/layers
を眺めて、自分に合うパッケージがあったらどんどん試してみましょう。
一つ一つが厳選されているので、自分に合うものがあれば絶対に役立つはずです。

dotspacemacs-configuration-layers内のパッケージ

csv
php
yaml
git
github
colors
better-defaults
helm
emacs-lisp
markdown
org
osx
html
javascript
react
typescript
cscope
(gtags :variables gtags-enable-by-default t)
spell-checking
syntax-checking
emoji
dash
ruby
wakatime
python
ipython-notebook
haskell
shaders
docker
csharp
imenu-list
rust
version-control
plantuml
(shell :variables
       shell-default-shell 'shell
       shell-default-term-shell "/usr/local/bin/zsh"
       shell-default-height 30
       shell-default-position 'bottom)
(auto-completion :variables
                 auto-completion-enable-help-tooltip t
                 auto-completion-complete-with-key-sequence-delay 0.2
                 auto-completion-enable-snippets-in-popup t)

Spacemacs以外のパッケージでは以下を導入しています。

dotspacemacs-additional-packages内のパッケージ

bind-key
quickrun
all-the-icons
all-the-icons-dired
editorconfig
processing-mode
scad-mode
helm-chrome
vue-mode
confluence
dotnet
indium
import-js

Webで簡単にコードで絵を描くp5.js

Wed, 03 Jul 2019 14:15:51 GMT

材料の紹介

こちらの材料を使ってコードで絵を描きたいと思います。
のRunPenボタンを押すとどんなことができるか確認できます。

Codepen

Codepenは、Webブラウザ上で動くコーディング環境です。Webブラウザさえあれば、いつでも簡単にコードを書き始めることができます。
公開された作品にをつけることができ、自分の好きな作品をストックしたり面白い作品を簡単に見つけることができます。

p5.js

p5.jsは、クリエイティブコーディング界隈では老舗のProcessingというJavaのライブラリをJavaScriptに移植したものです。
非常にわかりやすく、簡単に扱える関数がたくさん用意されています。

YouTubeで様々な公式チュートリアル動画を見ることができます。英語ですが、YouTubeの自動翻訳機能で日本語字幕で見ることができます。

コードを書く準備

Codepen のサイトを開き、左上のCREATE > Pen を選択します。コーディング環境が開きます。
p5.jsのライブラリを追加します。右上の歯車アイコン > JavaScript を選択しJavaScriptの設定ポップアップを表示します。
Search CDNjsと書かれている検索ボックスで、p5.jsと入力しましょう。候補で表示されたp5.jsを選択し、下のボックスにp5.jsのURLが追加されればOKです。右上のSave & Closeでポップアップを閉じましょう。

スケッチを描きはじめよう

JSテキストエリアに以下のコードを書きましょう。
Processingは基本的にはこの2つの関数で構成されます。非常にシンプルですね。
setup関数は、はじめに１回だけ呼ばれる初期化関数です。1回だけの処理で十分なものや、変数の準備などはすべてここで行います。
draw関数は、毎フレーム呼ばれる描画関数です。作品の主軸となる箇所です。
たったこの２つの関数で様々なことが行なえます。

function setup() {

}

function draw() {

}

ためしに100px x 100pxのキャンバスを作成して、キャンバス中央に円を描きたいと思います。

function setup() {
  // キャンバスを作成します。
  createCanvas(100, 100);
}

function draw() {
  // 円を描く関数です。引数には(x座標, y座標, 直径)を指定してます
  ellipse(width/2, height/2, 50);
}

たったこれだけのコードで円を描くことができます。

では次にマウスに追従させましょう。

function draw() {
  ellipse(mouseX, mouseY, 50);
}

標準で用意されている、mouseXとmouseY変数を使うだけで簡単にマウス座標を扱うことができます。
他にも公式ドキュメントに様々な変数や関数が用意されています。
英語ですが、サンプルコードでわかりやすく説明されており、Chromeブラウザなら日本語に翻訳できます。

冒頭のCodepenのサンプルにも簡単な説明を書いています。よかったら見てみてください

このブログについて

Mon, 01 Jul 2019 00:00:00 GMT

このブログで書いていくこと

私、エムロート(Mwrote)は多摩美術大学のプロダクトデザイン学科でデザインを学び、その後GUI(グラフィックユーザーインターフェース)デザイン会社で数多くのデザインを経験しました。
現在は、物創りのより深いところを探ろうと、フロントエンドエンジニアとして、デジタルなモノを作り続けています。
そんな日々の中で思うことや、便利だなと思ったツールをこのブログで紹介していきたいと思います。

このブログの由来

語源となるのはバウハウス

このブログのタイトルであるバウハウシィファイは、かつてドイツに存在した、バウハウスという美術学校を語源にしています。100年以上前となる
1919年に設立され14年間しか活動しなかったのですが、後のデザイン史にとても大きな影響を与えています。

その建物に、当時の思想は色濃く残されています。

1919年以前に主流となっていた重厚で装飾的な歴史主義建築を否定し、素材の特性を活かした合理的でモダンな建築を提案しました。

意味のある色

外見はグレートーンで構成されており、入口となる扉にのみ赤などの色鮮やかな色が施されています。
各フロアーの天井は一階一階に異なる色で塗りつぶされており、そのフロアー内の色はすべて統一されています。今どこの階にいるのかとても明白です。

最低限の美しさ

照明器具の配線器具は一切隠されており、構造上必要なものだけが表に現れています。必要最低限の構造が、とても美しいです。

バウハウスの哲学を現代のモノづくりに

時代は移り、バウハウス時代にはない道具、インターネットが普及しました。
スマートフォンやパソコンなどのデバイスを通して、デジタルなデザインの歴史が誕生しています。
もし、バウハウス時代の先人たちが現代にいたら、一体どんなモノを生み出しているでしょうか。
そんなことを頭の片隅に置きながら、現代のモノづくりを見直すという考えをバウハウシィファイと名付けました。