web | tatami-code

フロントエンジニアのWordPress抹殺術(Express+Prismic.io)

2016-09-13 - web

今回は前置きのみです。
※深夜の駄文です。流し読み程度にしてください。怒らないでください。

前書き
フロントエンド開発環境構築(Prismic.ioの使い方)
EC2にNode環境構築。お名前.comで取得したドメイン当てる。
Nginxリバースプロキシ設定 pm2でデーモン化

前書き

まず、フロントエンドの開発ディレクトリを見てもらいたい。

ついこないだまで

.
├── css
├──　　images
├── index.html
└── js

├── css

├──　　images

├── index.html

└── js

今日この頃

.
├──.babelrc
├──.editorconfig
├──.eslintignore
├──.eslintrc
├──.git
├──.gitignore
├── config
├── deploy_config.json
├── gulpfile.babel.js
├── node_modules
├── package.json
├── prismic-configuration.js
├── public
├── server
└── source

├──.babelrc

├──.editorconfig

├──.eslintignore

├──.eslintrc

├──.git

├──.gitignore

├── config

├── deploy_config.json

├── gulpfile.babel.js

├── node_modules

├── package.json

├── prismic-configuration.js

├── public

├── server

└── source

「ふぁ!!??」

昨今のフロントエンド開発は、ご存知の通りすごいことになっており、nodeなりなんなりでいろんなものを自動化してる。
もはやhtmlを素書している古代文明の人はいないだろう。汗
静的サイトをつくったり、ajaxでapi叩く程度ならフロントで完結するので話は簡単なのだが、
サーバーと連携したシステムを構築する場合、フロントエンジニアとサーバーエンジニアはどうやって仲良くしたらよいのだろうか。

こんなに世の中進化したというのに、CMSとなるとなぜか今もwordpressが根強い。
モダンなwordpressのテーマを作るフローはどうなっているのだろうか。
フロントエンジニアがnode環境で吐き出したhtmlにサーバーサイドエンジニアがphpのタグを組み込んでいるのだろうか？
考えただけでも吐き気がする。jadeなりslimなりで作ったhtmlをその後いじるというのはどう考えてもやばい。
（実際の作業を知らないのでそんなことないと思う。偏見で喋っていますごめんなさい。あったら知りたいです教えてくださいお願いします。切実）

そして苛立ったフロントエンジニアは言った。
「えーい！全てnodeでつくってやる！php消え去れ！」
そしていきついたのが

Express + Prismic.io
である。

AWS EC2でnode環境を構築し
ExpressをたちあげNginxでリバースプロキシを。デーモン化にはpm2のお世話に。
Expressのtemplate Engineにはjadeを使い、
コンテンツ管理にはPrismic.ioを使う。

「こ、これだ！！」

通常静的なサイトを作る時コンテンツ管理はyamlを使っている。（その昔、師匠に教わった）
Prismic.ioを使えば、yamlで使っていたjadeをほとんどそのまま利用できたりする。神のようだった。

ちなみにNodeで作られたCMSはけっこうある。GhostだとかKeystoneだとか他にもたくさん。
色々試してみたがすべてしっくりこなかった。
Ghostはいい感じだったのだが、template engineにデフォルトではjadeが使えず、handlebarsというtemplateを使っていた。pluginでjadeも使えそうだったけれど、ghostの開発者がjadeはロジックが中に書き込めてしまうからよくないみたいなことを言っていたが、使い方次第だと思うし、
僕にとってhtmlにタグが書けますよ的なtemplateは全く求めていなかったので思想が合わないと感じて止めた。
https://github.com/TryGhost/Ghost/issues/1131

そして行き着いたのが prismic.ioだった。
日本語での情報は全く出てこなかったがgoodpatchが社内blogで使っている様子だったので信頼が置けた。
Rubyで利用している様子。

Prismic.io自体はNodeでの開発にも重きを置いている様子？だった。（勝手な偏見かも）
実用的かどうかはサービスの信頼度が不明なのでよく分からないが、使い勝手はとてもすぐれていた。

フロントエンジニアの皆様はCMSをどうしているのでしょうか。

次回は
実際に組み込みの作業をメモがてら書こうと思いますす。深夜の駄文ですた。

そしてこのサイトもその昔wordpressで作った。そのうち殺す。

Pocket

Mawaru

2016-06-14 - web

GLSLお遊び
http://junpop.lolipop.jp/_test/ultraq/?text=Gollowars
urlのGollowarsのとこを好きな文字に置き換えれば、その文字がウネっとするよ。

source

Pocket

webgl軽量化メモ

2016-01-06 - column, web

これすごく参考になった。
Case Study: Inside World Wide Maze

■軽量化方法

draw.callを減らす。
meshをまとめる。
WebGL best practices
頂点の計算をglslでやる。
tracingでどいつが時間食ってるか調べる。
Profiling your WebGL Game with the about:tracing flag
console.time, console.timeEnd仕込む。
環境ごとにエフェクトを切ったりする
45 fps を切ったら、環境マップの更新をやめる。
それでも 40 fps を切ったら、レンダリング解像度を 70% にする。（面積比 50%）
それでも 40 fps を切ったら、FXAA (アンチエイリアス) をやめる。
それでも 30 fps を切ったら、グローをやめる。
しっかりdispose

※20160.0108追記
Meshを作るんじゃなくて制限版のcloneにするとか
Scene Optimization in Babylon.js Part 1 – Meshes

Pocket

Example of parallax

2014-12-09 - web

ちょっと前に流行ったパララックスの復習。
スクロールに応じて個々のオブジェクトに動きをつける事は簡単で、スクロール量に応じてデタラメな変数をかけてオブジェクトを動かしても、それなりに視差が生まれればそれっぽく見える。

var value = $(window).scrollTop();
$objetct.css({
 marginTop:value*0.2
});

var value = $(window).scrollTop();

$objetct.css({

marginTop:value*0.2

});

しかし、
スクロールして親要素が画面から消えるタイミングで、子要素の頭が次の要素に隠れるという動作がしたい場合は、親要素の高さと子要素の高さ、オフセットなどから計算しなくてはならない。
文章で説明してもパッとこないと思うので次の図を見てもらいたい。

黒ぶちがブラウザのウィンドウで黄色と青のブロックに別れているwebサイトがあるとする。
普通にスクロールすると子要素の白は、白の下までスクロールしたら見えなくなる（あたりまえだけど笑）

ではつぎに、スクロールし親要素がいなくなるタイミングで子要素もいなくなるように、
子要素に動きをつける。

最初の図と見比べてみると分かるけど、スクロールは下に動いていっているが、子要素白の位置はほとんど動いていない。黄色は上に上がっている。
黒枠（ブラウザウィンドウ）が下に動くと考えるよりも黄と青のブロックのWebサイトが上に上がっていると考える。そうすると子要素白はほとんど動いていない。

このロジックをどうやって組むかというと、

親要素の黄がスクロールでAの距離動いている間に、（スクロールで上に上がっていく）
~~子要素の白はB+Cの距離を動けば、（スクロール量に応じて下に動かす）~~
子要素の白はCの距離を動けば、（スクロール量に応じて下に動かす）※2014/12/14 修正
スクロールし親要素の尻がブラウザの一番上にきて消えるタイミングで、
子要素の頭が次の要素に隠れていくという動作になる。

See the Pen Example of parallax by yoshizumi ashikawa (@gollowars) on CodePen.

といっても難しくはなく算数レベルなのだけども。。
Webで何かを表現する人間としては、公式としてすぐに頭に浮かぶようになっておきたいものである。
このような簡単だけれど素人にはパッと思い浮かばないモーションの仕組みは、
やれプログラミングの今の時代でも、なぜそうなるのかという数学的な説明があまりされていない気がする。
ソースコードは至る所に落ちていても、数学的な説明みたいなのはなかなかWeb上にない。
自分のような凡人はこういう公式みたいなのを頭にどんどん入れて使っていくようにしていかなくてはならん。
また備忘録として書いていけたらと思う。

Pocket

SVGをwebで使う。

2014-08-20 - web

今頃？って思われるでしょうけど、
SVGをWebで使う方法について今日は書きたいと思います。

iPhoneや最新のMacBookにretinaディスプレイが採用されて、従来の解像度用の画像では荒く見えてしまう問題があります。
これに対応してくれるのが、ベクターデータです。
ベクターデータとビットマップデータてなんぞやて方はこちら
「ビットマップデータ」と「ベクターデータ」の違い

とにかく、ベクターデータにすればiPhoneでピンチインしてどアップしても荒くならないよってやつです。一般的なのはフォントでWebで使われているテキストデータはピンチインしても荒くなりません。
このサイトのロゴは画像を利用しているので、ピンチインすると荒くなってしまいます。
とりあえずコレを直そうと思い、SVG形式の画像の使い方を勉強します。

ここのサイト見れば一瞬でした。
SVGファイル大解剖 : Illustratorによる作成から、Web書き出しまで

1,Illustrator等でイラストを作成しSVG形式で保存する。

2,webに埋め込む。（いくつか方法がある。）

<img src="images/svg-test.svg" alt="">

1	<img src="images/svg-test.svg" alt="">

<object type="image/svg+xml" data="images/svg-test.svg"></object>

1	<object type="image/svg+xml" data="images/svg-test.svg"></object>

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
	<g>
		<circle cx="136.5" cy="140" r="9"/>
	</g>
	<g>
		<circle cx="163.5" cy="140" r="9"/>
	</g>
</g>
<g>
	<path d="M137,163h26.3h-26.4c0,0,0,0.1,0,0.2c0,7.5,6,13.6,13.3,13.6c7.4,0,13.4-6.1,13.4-13.6"/>
</g>
<g>
	<path d="M150,203.8c-29.7,0-53.8-24.1-53.8-53.8c0-29.7,24.1-53.8,53.8-53.8c29.7,0,53.8,24.1,53.8,53.8
		C203.8,179.7,179.7,203.8,150,203.8z M150,106.2c-24.1,0-43.8,19.6-43.8,43.8s19.6,43.8,43.8,43.8s43.8-19.6,43.8-43.8
		S174.1,106.2,150,106.2z"/>
</g>
</svg>

y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

<g>

</g>

<g>

</g>

<g>

</g>

<g>

<path d="M150,203.8c-29.7,0-53.8-24.1-53.8-53.8c0-29.7,24.1-53.8,53.8-53.8c29.7,0,53.8,24.1,53.8,53.8

C203.8,179.7,179.7,203.8,150,203.8z M150,106.2c-24.1,0-43.8,19.6-43.8,43.8s19.6,43.8,43.8,43.8s43.8-19.6,43.8-43.8

S174.1,106.2,150,106.2z"/>

</g>

</svg>

こんな感じ↓

body{
	width: 100%;
	height:100%;
	background-image: url(./images/svg-test.svg);
	-webkit-background-size: 100px 100px;
	background-size: 100px 100px;
}

body{

width: 100%;

height:100%;

background-image: url(./images/svg-test.svg);

-webkit-background-size: 100px 100px;

background-size: 100px 100px;

}

こんな感じ↓

ということで、svgをWebで表示する事は簡単だという事が分かりました。
次回はsvgでグラフィックを動かす方法について学びたいと思いやす。svgをWebで表示する方法はいくつかあったけれど、どの場面でどの方法を使うのが良いのかとか掘り下げたいと思います。

※僕の記事を読むより、上記の参照先の記事を読んだ方がいいと思います。とりあえず僕の記事を書く練習です。。

Pocket