2016-03-03

読書メモ：形の美とは何か(5)

読書メモ

まとめの章から面白いなぁと思ったところだけメモ

茶の湯で鑑賞対象になっている茶碗、釈薬や火まわりのムラや貫入、茶室に使用する廃材など
(自然の現象によってできた形、景色と呼ぶ)はカオスやフラクタル系そのもの。

近代建築の形のあゆみ

「モダニズム」（モダニズム建築 - Wikipedia）
　 ミースファンデルローエ
　ル・コルビジェ
　 「形態は機能に従う」
　機能主義
　 立方体をユニットとして扱う
　ガラスと鉄の箱(ガラス張りの高層ビル群)
「ポストモダニズム」東京都庁など。ファサードに装飾を取り入れる動き
1925～アールデコ
1930半ば～ストリームラインの流行
脱構築主義（否定形の希求が見られる　京都駅のファサード、など）

機能美＋造形美　＋　心理的付加価値曖昧さの科学　フィジー理論（ファジィ論理 - Wikipedia）

コンピュータグラフィクス作者が頭で思い描いた形を再現することもできるが
少しのパラメータの差で生じる全く予想つかないような数学的な形を計算させて出力することもできる

「なにか新しい感覚をつかめるのではないかというハッピーミステイクを期待して黙々と制作にはげむ」

自然が作り出す形が美しいのは　長い年月をかけて改良されて結果的に機能的な形になったから。
もっと自然の形から学べることがあるのでは？
自然の形が形の美しさの原点
* 自然の法則に準拠した機能美
* 無駄がなくなめらかなオーガニック形体
* フラクタル性のある形は自己同一性による黄金比のもつ美しさを内包している
* セルオートマトンによるリズムのあるパターンが見られる

全体的にかなり面白い本だった！
今までグラッフィックかなにかの授業で散々黄金比、白銀比など意識した構成を、と言われていたり
また染めの最初のほうの講義で原始の模様についても学んだはず...。でもそれぞれが独立した考え方だとおもっていた。

原始模様、美術の長い間主流だった写実主義から
工業化を経て生産性のある形体、装飾の排除された形体(キュビズム)への流れ
そしてまた装飾が強くなって、また削ぎ落とされて、丸みのあるデザイン→キュービックなデザインの流行が繰り返しおこって、
いままでは偶発的だと思われていた形に秩序があることがわかってきた
という大まかな流れをつかむことができて（そして原始模様〜カオス系まで連続したものだと捉え直すことができて）
だいぶ頭の中がすっきりしました。

抽象表現主義はフラクタル系と似通った性質を持っていることもしっくりきたし、このあいだ展示で見てきたフランクの建築はその流れの先にあったのがわかった。

ちょうど今the nature of code をやっていてカオスとか複雑系とかがなんなのかわからなかったので
コードを書いて理解することだけでは補えなかった、背景を含んだ概念的な部分を触ることができてよかった。
幸い今は簡単に偶発性のある形を作り出すことができることだし、
「なにか新しい感覚をつかめるのではないかというハッピーミステイクを期待して黙々と制作にはげむ」ことにいつかわたしも取り組みたいなぁ。

よいほんでした。

形の美とは何か (NHKブックス)

作者: 三井秀樹
出版社/メーカー: 日本放送出版協会
発売日: 2000/03
メディア: 単行本
購入: 5人クリック: 11回
この商品を含むブログ (8件) を見る

2016-02-16

hexoでブログ構築(3) テンプレートをカスタマイズする

hexo ejs

まずブログのデザインを決め普通にhtmlで書き起こし、スタイルを整えて機能にわけて使えるようにした。

デフォルトで入っているテーマを変更しながら自分の好きなようにテーマを作っていく。
とはいえ・・・初めてテンプレートというものを使ってみる＆ejsの基本的なところを読んだだけではどうしていいのかわからなかったため
こちらの方の記事を参考に
http://dev.shikakun.com/post/hexo-init/
コミット歴をなぞりつつ、こうやるのか・・・と覚えながら変更を加えていきました。（ありがとうございます・・・！）

テーマの階層はこんな感じ。

.
└── themeName
    ├── _config.yml
    ├── gulpfile.js
    ├── layout
    │   ├── _partial
    │   │   ├── archive.ejs・・アーカイブのレイアウトを定義
    │   │   ├── article.ejs・・各記事のレイアウトを定義
    │   │   ├── head.ejs・・・・headの中身が書いてある
    │   │   ├── header.ejs・・・ページのヘッダーが書いてある
    │   │   └── post・・・・・・ここに記事の型を入れていく
    │   │       ├── date.ejs
    │   │       ├── nav.ejs
    │   │       ├── tag.ejs
    │   │       └── title.ejs
    │   ├── archive.ejs
    │   ├── index.ejs
    │   └── layout.ejs・・・ページの雛型
    ├── node_modules
    ├── package.json
    └── source・・・cssなど

layout.ejsの中はこんな感じ。

<!DOCTYPE html>
<html>
  <%- partial('_partial/head') %>
  <body>
    <%- partial('_partial/header') %>
    <main class="articleWrap">
      <!-- 記事 -->
      <%- body %>
      <!-- /記事 -->
    </main>
    <footer>
    </footer>
  </body>
</html>

今回はアーカイブもindexも同じレイアウトにしたかったのでindex.ejsもarchive.ejsも

<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>

というふうにした。
partial/archive.ejs内で各記事を繰り返し書くようにしている

<% page.posts.each(function(post){ %>
  <%- partial('article', {post: post, index: true}) %>
<% }) %>
<% if (page.total > 1){ %>
  <nav id="page-nav">
    <%- paginator({
      prev_text: '&laquo; Prev',
      next_text: 'Next &raquo;'
    }) %>
  </nav>
<% } %>

hexoには用意されている変数がいくつかある。

詳しくは https://hexo.io/docs/helpers.html

ファイルを呼び出すときは

<%- partial(layout, [locals], [options]) %>

cssを呼び出すときは

<%- css(path, ...) %>

ページネーターは

<%- paginator(options) %>

という感じで・・・。楽チン！

各記事は

<article class="article">
  <header class="article-header">
    <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
    <%- partial('post/title', {class_name: 'article-title'}) %>
    <%- partial('post/tag') %>
  </header>
  <main class="article-main">
    <%- post.content %>
  </main>
</article>

というふうにして、日付、タイトル、タグ、コンテンツを分けてある。

ページの中身もhexoで変数が用意されていて、

page.title（タイトル）
page.date（日付）
page.content（コンテンツ）
page.tags（タグ）

タグリストも変数があるので、

<%- list_tags([options]) %>

クラスをつけて全て表示したいときは

<% if (post.tags && post.tags.length){ %>
  <%- list_tags(post.tags, {
    show_count: false,
    class: 'article-ingredient'
  }) %>
<% } %>

という感じで書くことができる。

また設定ファイルの中も変数になっていて
config.yaml内のいろんな情報も使いやすい！
https://hexo.io/docs/configuration.html

たとえばhead内は

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="<%= config.description %>">
  <title><%- config.title %></title>
  <%- css('/css/style') %>
</head>

こんな感じでかける。

なんとなくテンプレートの使い方がわかった気がする。ブログ完成したらgithbにあげます・・。

2016-02-14

hexoでブログ構築(2) EJSテンプレートエンジンことはじめ

node.js ejs hexo

hexoでテーマをカスタマイズするためにちょっとだけejsを触ったときのメモ。

ejsとは

テンプレートエンジン。node.jsで動く github.com

インストール

npm install ejs

html内に書くタグ

スクリプト側で用意した変数などを表示するのに使う(エスケープ処理あり)

<%= 値 %>

エスケープ処理なしは

<%- 値 %>

node.js内で実行するスクリプトタグ

<% スクリプト %>

改行する場合

-%>

というふうに閉じる

配列を順番に処理するとき

<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>

<% %>内では、何かを書き出して表示することはできない。処理部分だけを<% %>内に書き、出力は<%= %>に書く。

レンダリング

.ejs拡張子で保存する。

例

<body>
    <header>
        <h1 id="h1"><%=title %></h1>
    </header>
    <div role="main">
        <p><%-content %></p>
    </div>
</body>

サーバーを起動して、レンダリングする。

var http = require('http');
var fs = require('fs');
//ejsの読み込み
var ejs = require('ejs');

var filedeta = fs.readFileSync('./index.ejs', 'utf8');

//サーバーを起動
var server = http.createServer();
//requestイベントハンドラを定義
server.on('request', doRequest);
//ポート番号400で待ち受け
server.listen(4000);

// リクエストの処理
function doRequest(req, res) {
    //テンプレートのレンダリング
    var filetext = ejs.render(/*テンプレートデータ*/filedeta, /*オプション*/ {
        title:"タイトル",
        content:"コンテンツ"
    });
    //ヘッダー情報にCintent-Typeを書く
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(filetext);
    res.end();
}

なんとなく分かったきがするのと、hexoにはレンダリングの機能があるので今回はその処理は書かなくていいということで、とりあえずここまで。

2016-02-12

css設計はじめの一歩

sass css設計

今更ですが・・・。
sassの基本とsassをつかったときの基本的な設計の仕方を教えて貰ったのでメモ。

BEMは命名ルールが厳格なので納期の短いものやメンバーのスキル状態によっては向かないことも。 oocssやsmacssはBEMにくらべて自由度が高いため取り入れやすい。

sass基本構文

ネスト

.header {
  background-color: #999;
  .logo{
    width: 100px;
    height: 200px;
    > a{
      color: red;
    }
  }
}

変数

カラーコードなど名前を決めておくとよい。

$color-default : #333;

a{
  color: $color-default;
}

&

親を継承できる。擬似クラス、複合クラスで使用すると便利。

  .buton{
    display: block;
    &.button-primary{
      background-color: yellow;
    }
    &.button-secondary{
      background-color: orange;
    }
  }

@import

読み込まれるscssはアンダーバーから始まる名前にする。
そうするとコンパイル対象でなくなるのでインポートするファイルは_から始めると良い。

@import '_base';

cssでも残したい場合は
/*コメント*/
cssでは残さない場合は
//コメント

OOCSS

まず機能によって切り分ける。似た機能の中で使いまわせるものを使い回す。

ストラクチャーとスキンに分ける

少ない記述でクラスを組み合わせて、たくさんのバリエーションを作ることができる。

ストラクチャー（構造　共通するパーツ）
スキン（カラーやサイズ）

<button type="button" name="button" class="button button-defalut">ボタン</button>
<button type="button" name="button" class="button button-blue button-large">ボタン</button>
<button type="button" name="button" class="button button-red">ボタン</button>

//ストラクチャー
.button{
  display: block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

//スキン
.button-defalut{
  background-color: #000;
}
.button-blue{
  background-color: blue;
}
.button-red{
  background-color: red;
}
.button-large{
  font-size: 24px;
}

より厳しく書くなら

//ストラクチャー
.button{
  display: inline-block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  //スキン
  &.button-defalut{
    background-color: #000;
  }
  &.button-blue{
    background-color: blue;
  }
  &.button-red{
    background-color: red;
  }
  &.button-large{
    font-size: 24px;
  }
}

コンテナとコンテンツに分ける

<!--検索フォーム-->
<form class="search" action="index.html" method="post">
  <input class="input" type="text" name="name" value="">
  <button class="button">search</button>
</form>
<!--ログインフォーム-->
<form class="login" action="index.html" method="post">
  <input class="input" type="button" name="name" value="">
  <input class="input" type="button" name="name" value="">
  <button class="button" type="button" name="button">login</button>
</form>

//コンテナ
.search{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
}
.login{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
  width: 230px;
  text-align: center;
  .input{
    margin-bottom: 10px;
    width: 100%;
  }
}
//コンテンツ
.input
  border-radius: 3px;
  background-color: #fff;
  font-size: 16px;
  padding: 10px 30px;
}

SMACSS

カテゴライズする。

base
layout
module
state
theme

カテゴライズしたものをディレクトリ構成に活かす。それにsassの機能をつかうときにつかう分のディレクトリ(settingやtoolなど)を足してつくるといい。

layout、stateなどはSMACSSの推奨命名ルール通り.l-や.is~などつけて命名するとわかりやすくなる。

stateはmoduleディレクトリの各モジュールのscssファイルの中で書いていくといい。読み込みの順番に気をつける。

.
├── css
│   └── style.css
├── index.html
├── js
├── layout
│   └── _l-header.scss
├── prepros.cfg
└── sass
    ├── base
    │   ├── _generic.scss
    │   └── _normalize.scss
    ├── layout
    │   ├── _l-contents.scss
    │   └── _l-header.scss
    ├── module
    │   ├── _botton.scss
    │   ├── _card.scss
    │   └── _mainVisual.scss
    ├── setting
    │   └── _settings.scss
    ├── style.scss
    └── tool
        └── _keyframes.scss

style.scss内

//setting
@import "setting/_settings.scss";
@import "tool/_keyframes.scss";
// base
@import "base/_normalize.scss";
@import "base/_generic.scss";
// layout
@import "layout/_l-contents.scss";
@import "layout/_l-header.scss";
// module
@import "module/_botton.scss";
@import "module/_card.scss";
@import "module/_mainVisual.scss"

最強のCSS設計チーム開発を成功に導くケーススタディ

作者: 堀口誠人
出版社/メーカー: SBクリエイティブ
発売日: 2015/10/24
メディア: 単行本
この商品を含むブログ (1件) を見る

2016-02-01

hexoでブログ構築(1)

hexo

静的サイトジェネレータのhexoをつかってブログの構築をしはじめたのでメモ。
最終的にはGithabPageで管理しようかと。

大まかな流れは以下

インストールからサーバ立ち上げとブログ記事作成まで
ejsをちょっとだけ理解する
テーマを作成

まだ手をつけていない

ドメインと連携
アマゾンアフィリエイトの組み込み(できたら)

この記事ではhexoをはじめるところまで。

hexoについて

https://hexo.io 静的サイトジェネレータ。node.jsで動く

インストールからサーバ立ち上げとブログ記事作成まで

インストール

公式サイトにも書いてあるので適当にメモ。インストール

npm install hexo-cli -g

ブログを作るためのディレクトリを作成

hexo init blog

そうすると以下のようにディレクトリが生成される。

.
├── blog
│   ├── _config.yml
│   ├── db.json
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── scaffolds
│   ├── source
│   └── themes
└── readme.md

そのディレクトリに移動してモジュールをいれ

npm install

ローカルサーバを立ち上げる（初期のポートは4000）

hexo server

これでデフォルトテーマでブログが作成された状態になる。

階層の概要

.
├── blog
│   ├── _config.yml・・・設定ファイル
│   ├── db.json
│   ├── node_modules
│   ├── package.json
│   ├── public・・・生成されたファイル
│   ├── scaffolds・・mdファイルの雛型
│   ├── source・・mdファイルが置いてある
│   └── themes・・ブログテーマ
└── readme.md

記事作成

sourceディレクトリの中にmdファイルのブログ記事を追加していく。
追加できるレイアウトの雛型は三種類ある。

post　source/_postに格納される（記事）
page sourceに格納（個別のページ）
draft source/_draftsに格納される(下書き)

テンプレートの変更をしたいときは scaffoldsの中を変更する。
今回作ったブログの雛型はかならず画像をいれるつもりなのでこうしている。

---
title: {{ title }}
date: {{ date }}
tags:
---
![title](/img/**.jpg)

mdファイルの頭

---
title: {{ title }}
date: {{ date }}
tags:
---

ここで記事の投稿日時、タグ、タイトルを管理している。
{{title}}{{date}}を使うとページを作成したときを自動保存してくれる。
ブログ全体の設定ファイル _config.yml 内でタイムゾーンの設定をできるので、合わせて変更しておく。

timezone: Asia/Tokyo

記事を書く

記事をかくときは

hexo new post 記事のタイトル

下書きの記事を書くときは

hexo new draft 記事のタイトル

記事のタイトル.mdというフォルダがそれぞれの格納先にできる。

hexo server --draft

でローカルサーバで下書きの状態を見ることができる。

下書きをpost配下に移動させるには

hexo publish 記事のタイトル

そしてページ生成しつつ公開

hexo generate -d

2016-01-24

nature of code：今日の練習「セルオートマトン」

nature of code

See the Pen cellular automaton by kanaparty (@kanaparty) on CodePen.

セルオートマトン

セルオブジェクトで構成された系のモデル
グリッド状になっていて、状態、近傍がある。そして時間の経過（=世代）がある。

一番簡単なセルオートマトン

世代を一列のグリッドとする。世代を重ねるごとにその下の一列に結果(onだったら色のついた四角)を描いていく。
状態はonかoffの２種類。
近傍は自分の左右のセル。

今の状態から次の世代の状態を決めるルールをつくる

次の世代がonかoffかどうかは前と前の前後の状態の３つのセルの状態で決まる。
3つの状態から結果を決める・・・おこりうるonとoffの組み合わせが８パターンある。
８パターンのうちどれをonとするか定義する。
かいたものでいうとこの部分

//ルールの初期化
function resetRule(){
  cellRule = [];
  for (var i = 0; i < 8; i++) {
    var state = (Math.random() > 0.5) ? 1 : 0;
    cellRule.push(state);
  }
}

そのルールの呼び方は、ルールの並びを10進数に直した整数で付けられている。

//セルルールの名前
function ruleName(){
  var rule2 = '';
  for (var i = 0; i < cellRule.length; i++) {
    rule2 += String(cellRule[i]);
  }
  ruleNameDOM.textContent = 'Rule : ' + parseInt(rule2, 2);
}

きれいにみえるのは 30とか90とか

ルールを配列に格納しておいて、並び順を10進数にすると簡単に配列にアクセスできる（なるほど！）

var terms = String(this.prev.prevState) + String(this.prevState) + String(this.next.state);
terms = parseInt(terms, 2);
this.state = cellRule[terms];

できあがるパターンには４つの分類がある（ウルフラムの分類）

均一性　最終的にすべてのセルが一定になる
周期性　反復的に繰り返す
ランダム性　簡単に識別できるパターンができない
複雑性　周期性とランダム性がまざったようなもの

セルオートマトンの歴史おもしろ〜！

たまにハッとするようなきれいな模様がでてくる。

１次元のセルオートマトンを下へ下へ繋げていくので少し混乱した。このルールでいろいろ表現の仕方を変えたら楽しそうなのでまたやってみたい

2016-01-20

読書メモ：形の美とは何か(4)

読書メモ

装飾美術の基準は数理性だった

数理的秩序に基づいた形
装飾模様の配置に数理性や秩序がある形

フラクタルフラクタル - Wikipedia の特徴・・・部分と全体がそっくり

これは自然界のなかでも山や森や雲にも見出せる。
森の写真の一部を切り抜いて他の部分にあてても違和感がないとか・・
枝の成長する様子とか

フラクタル理論が出る前でも人間はなんとなくフラクタルを実感していた。枝の成長のパターンから木の種類を特定できたりする
画家が絵筆で雲を描こうとする

他にもいろいろ名前のついた数理性のあるモデルがある

コッホ曲線コッホ曲線 - Wikipedia
シェルピンスキーのギャスケットシェルピンスキーのギャスケット - Wikipedia
カントール集合カントール集合 - Wikipedia
セルオートマトンセル・オートマトン - Wikipedia

フラクタル次元フラクタル次元 - Wikipedia
計算方法は↑で

形体の表情が次元の数値によって決まって判別しやすくなる。
雲は1.34次元
樹木は1.3~1.8次元
銀河系は1.41次元
フラクタル次元が高いほど、複雑な形になる

長い間美術の中心だった写実主義がめざすものは
実は数理性のあるフラクタルなものだったのではないか（自然物をいかに本物に近づけるかという点で）

また、そのあとのキュビスム - Wikipedia 、フォーヴィスム - Wikipedia 、ダダイスム - Wikipedia 、未来派 - Wikipedia 、ロシア構成主義 - Wikipedia 、モンドリアンの新造型主義
など抽象へ向かった美術の流れが
第二次世界大戦のあとアメリカで抽象表現主義 - Wikipediaが流行る
ジャクソンポロックの絵などはまさに偶然性を使用したオートマチック形体だが画面のどこも同じ表情になるという点でフラクタルの特性と類似している

黄金比とフィボナッチ数列の比はかなり近い比率で自己相似性をもつ

カオス「予測不能な決定論的変動」？？？？
「決定論」・・ある時間からある時間まで、変化がある一定の規則に従っておきること反対は確率論、全ての事象は規則にしばられないとする考え方

バタフライ効果

決定論的なのに予測不可能（！？）

形の美とは何か (NHKブックス)

作者: 三井秀樹
出版社/メーカー: 日本放送出版協会
発売日: 2000/03
メディア: 単行本
購入: 5人クリック: 11回
この商品を含むブログ (8件) を見る