Baku Hashimoto

橋本 麦

WordPressのテーマをJadePHPで開発

最近Web作る調子上がってきたのでポートフォリオを一新したんですが, gulp, webpack, stylus, ES6, JadePHPあたり使ってつくりました. Jade自体がテンプレートエンジンなんで, WordPressのphpテンプレート関数との相性が悪かったりしますが. そのあたりメモ.

インストール

npmから. gulpで使ったんで, 僕はこっち使った, gulp-jade-php. 書いてある通りだけど, コンパイルしたら拡張子もjade→phpに変わります.

テンプレート

WP側のテンプレート階層を使わず, index.phpから全切り替えしてる. 考え方としては, JadeになるたけPHPを入れず, こまいのは全部関数として別途phpにまとめる. グローバルヘッダーとか, メタ情報とか, 全ページ必ずインクルードするって分かりきってるとこは, Jade側でまとめてやって, 動的に切り替える部分だけget_template_part()使う.

index.jade

- require('includes/view.php');
doctype html
html
    head
        include ./jade/_meta.jade
    body
        include ./jade/_gheader.jade

        .content
            - if (is_page('about')) :
                - get_template_part('page/about');
            - elseif (is_home()) :
                - get_template_part('page/work-list');
            - else :
                - get_template_part('page/post');
            - endif;

        footer.gfooter
            - if (is_single()) :
                - edit_post_link();
            - endif;

        script(src='#{template_path}/js/highlight.pack.js')
        script(src='#{template_path}/js/bootstrap.js')

_meta.jade

meta(name='twitter:image:src' content='<?= og_image(); ?>')

title <? title() ?>

view.php

<?
// ...
function title() {
    echo wp_title('|', true, 'right')  . '麦 : Baku';
}

function og_image() {
    if (is_single() && get_post_type() == 'work') {
        $path = MultiPostThumbnails::get_post_thumbnail_url('work', 'wide');
    } else {
        $path = "/wp-content/themes/baku89-2016/img/ogimage.jpg";
    }
    echo "http://$_SERVER[HTTP_HOST]$path";
}
?>

テンプレート関数使えよ, って感じだけど面倒いからそのまま.

Shortcode

あんま, HTMLの文字列とPHPのコードを "<dl>" . $title . "</dl>"みたいな感じで繋げたくなかったから, Shortcodeも無理やり分離. 例えば.

functions-shortcode.php

<?
// ...
function shortcode_vimeo($atts) {
    extract( shortcode_atts( array(
        'id' => '',
        'src' => null
        ), $atts ));

    $embed_url = "//player.vimeo.com/video/$id?title=0&byline=0&portrait=0&color=ffffff";
    $is_work = get_post_type() == "work";

    ob_start();
    include(locate_template('partials/vimeo.php'));
    return ob_get_clean();
}
add_shortcode('vimeo', 'shortcode_vimeo');
?>

vimeo.jade

一部省略.

a(class='embed embed--vimeo <? if ($is_work) echo "wide" ?>')
    img.full(src='<?= $src ?>') 
        iframe(data-src='<?= $embed_url ?>' frameborder='0' allowfullscreen='' webkitallowfullscreen='' mozallowfullscreen='')
        .center-button
            .center-button__body
                .center-button__text PLAY

phpが公開側フォルダ, jadeがソース系まとめたフォルダに分離しちゃうんは気持ち悪いし, phpもsrc側置いてコピーするのもアリだけど, めんどかったからそのままにした.

OUT OF DOTS

3年振りのOUT OF DOTSでPARKGOLFさんのVJさせて頂きました. DOMMNUEでSetsuya Kurotaniさん, Beyond Code #2でlycoriscorisさんのVJもしつつ, ちょくちょくバージョンアップさせてった感じです.

最近実験してた, Feedback Displacementを無理やりVJしてます. MPYNic Hamiltonリスペクト. 基本VJ用の動画素材作るのが苦痛なので, 僕のiPhoneに入ってた写真を適当に投げ込んでます. どんな画像でも, いい感じに抽象的なグラデーションになるんで面白い.

仕組み的にはoFとGLSL. カメラワークや3DモデルはC4Dから書き出してる. GLSLのビルドをGlslifyってWeb向けのツールでやってみた. Web向けなんで, oFのGLSLで動く組み込み関数で弾かれたりして, まだちょっとやりづらいけど, stackglのリソース使えるんでデカイ. gulpで監視して, ビルド終わったらgulp-oscでoFに通知出してofShaderでリロードしてたら, 比嘉さんに, 普通にファイルの最終更新日時引っ張ってた方が早いって教えてもらった.

VJネタとしてシンプル過ぎてキツかったんと, もっと照明的に気持ちよく効いてくるような作り方をしたいって反省はあるけど, もう少しこの手法を発展させて形にしたいなー思ってます.

SOURCE


Twitter投稿してくれてる人いた.

https://twitter.com/keiji_307/status/725701367851937792

https://twitter.com/keiji_307/status/725699646362816513

4 10, 2016

世の中の結構な割合のマナーが, 「別に知らなければ守られなかろうが何とも思わなかったけど, そういうものだと教えられて表面的に従っているうちに, 感情としてマナー違反を見るとムカつくようになってしまった人達」をムカつかせないために維持されているし, それがマナーを守る根拠たりえるのがこわい.

結構な割合の性的魅力も, それ自体が直接もたたらす「 天敵にくわれない程度に足が速い」みたいな実利的効用以上に, 「その形質がその社会において性的魅力としてみなされている」ということ自体が性的魅力を性的魅力たらしめている, ってのも似てる気がする.

こういうのをうまく抽象化して説明できる知識がないから辛いのだけど, なんてか, 最初は何か直接意味のある所から始まった概念が, フィードバック性を持ってその概念を補強し続けるうちに形だけが残って一人歩きしていくような現象が全体的にこわい.
非常識な行為を, 「非常識である」ということを根拠に批判するのとか, よくよく考えたらすごく奇妙なことで.

とはいっても, クチャラーへの嫌悪感が, たまたまそういう文化に生まれたから後天的に形成されたものに過ぎないんよって説明されたとしても, クチャラーが嫌なんは変わらないけど.

USBCNCの使い方でハマったポイント

Fusion 360のCAM機能で吐き出したツールパスをUSBCNCで読み込む際にハマったポイントをメモ. KitMill RD 300を使用.

参考記事

データより深く削り込まれる

Fusion 360での退避高さが必要以上に高く設定されていた. エンドミルが+Z軸方向に脱調したまま, (つまりソフトウェア上ではエンドミルがより高い位置に正しく移動していると認識された状態で)エンドミルが下がりはじめることが原因.

こちらの記事を参考に, 退避高さがフライス盤の制限高さを超えないように設定するか, ソフトウェアリミットを利用して, 自動で停止するようにする.

材料を固定している両面テープがエンドミルに巻き付いてしまう

CAM設定の「ボトム高さ」を, 1mm程度高めることで対応した. 硬い素材の場合は, 一番最後に細めのエンドミルで輪郭加工するといいのかもしれない. あと, くっついたやつは両面テープはがしで綺麗にはがせる.

切削開始する際に, エンドミルが変な位置に移動する

エンドミル位置を移動する際, アルミハンドルを使うと, USBCNC上での位置と実際の位置がずれる. ステッピングモーターは, 時計の針の「2分進める/戻す」のように, 現在位置からの相対的な回転指定しかできないので, 指で針を回すと時計が狂うのと同じことが起こる.

また, 複数のエンドミルを使いっている場合, 最初に一度原点に移動したのち(G28), ツールチェンジの為に一時停止するようになっている. あくまで原点であって, 切削開始位置ではないのがミソ. なので, (詳しい原理はわかっていないけれど)必ず以下の手順で切削開始したら大丈夫っぽい.

  1. 原点復帰
  2. 切削開始位置まで移動. エンドミルは各軸+方向に移動するようにする. つまり, 素材はテーブルより少し内側に配置する
  3. 各軸をリセット
  4. その状態で, USBCNCのAUTO -> RESETを実行. プレビューに, 原点の×印からいくぶんオフセットされた位置に, ツールパスが表示されていたら成功

ツールチェンジの仕方がわからない

  1. ツールチェンジのタイミングで大体原点復帰する
  2. 必要に応じて, ジョグで交換しやすい位置にエンドミルを移動
  3. エンドミルを交換
  4. 素材の削られていない部分の上に交換後のエンドミルを移動 (すべて削られている場合は, 適当な場所に未加工の素材を置く)
  5. 通常の原点設定と同じく, エンドミル固定ねじをゆるめ, 素材の上面にエンドミルがそっと触れる状態で再度固定
  6. Z軸のみリセットをかける

両面テープが巻き付く

「M3」がおすすめらしい. 紙の両面テープだと, エンドミルにひっついた時うまく剥がれない.

もし巻き付いた場合は, 一時停止. エンドミルを上げて, 剥がす. 下に下げて, 再開. その際, ジョグ操作でやって, 完全に一時停止した位置に戻してやんないと, エラーが出て再開できないので注意.

KitMill RD300を買った

メモ.

造形作家の平原真さんのブログを全体的に参考にしています.

CNCフライス盤KitMill RD300を購入

注文内容

以下の通り.

超硬スクエアエンドミル D=1~4 4種入り x 2
KitMill RD300 組み立てキット
安全カバー なし
ボールスクリュー化セット なし
原点センサーセット あり
アルミハンドル あり
3段プーリー あり
スピンドルモーター用コネクタ あり
セットスクリュー式スピンドル Φ4
アルミ製加工テーブル なし
薄型マルチバイス なし
TRA150 あり

組み立て

マニュアルを読みつつ.
結構情報がバラけてる.

Fusion 360でNCデータ出力

MeshCAM使うよかいろいろ応用出来そうだったので.
この辺りが参考になりました.

Moodhut

MoodHutのライブイベント, VJした. Cloudfaceと, 何かと話題のPowder.

Powder × Baku Hashimoto #Powder #BakuHashimoto #Cloudface #INSstudio

A post shared by Hiromi Matsubara / Romy (@hiromi_matsubara) on

うちのオフィスでやったんで, なんかオフィスっぽい感じにしたくて. group_inou – EYEの制作でも活躍した, ENTTEC DMX USB PROを使って, DMX経由で照明のスイッチ入れたり切ったり. 電圧がたまんないとレイテンシが発生するみたいな変な事もあったけど面白かった. 相当蛍光管に悪いことをしてしてしまったけど. アイディア自体は事務所の人の提案.

ディスプレイの方は, 全画面でブラウザ表示させて, WebSocketで色データ送るだけ. 普通にグラデーションとかの映像素材作って, 各ディスプレイ側で, 映像のどの画素をスポイトするかを位置でしてやる. 何個でもディスプレイ増やせるから, 色々発展出来そうな気がする.

SOURCE

プロジェクトフォルダ

プロジェクトフォルダをどう整理するか, って問題.

基本構造

仕事用HDD

/Volume
    + Works
        + 20xx
            + 00_everydays
            + 01_work1
            + 02_work2

プロジェクト毎

01_work1
    + doc - 資料. シンボリックリンクでDropboxで共有
    + proj - プロジェクトファイル
    + src - 素材類
    + 0b - コードとか
    + capture - 収録素材
    + itm - ソフト間受け渡しの為の中間ファイル
    + render - 3DCGソフトでレンダリングした比較的大きな画像
    + out - 書きだしたチェック映像, カンプ画像

命名規則

案件名は3-6文字程の接尾語

例) eye, fhana, 0xff, fas

できるだけ頭文字が被らないように

キーボードでナビゲーション出来るから便利.

使用文字

a-z A-Z 0-9 _ |

例) test_1

情報の優先順位

  1. 案件名
  2. 何についてか
  3. コーデック
  4. 日付

例) fhana_offline_ProRes422HQ_0124.mov

結局どういうことか

AfterEffects Plugin

(書いてる最中)

エフェクト

よく使う

ニッチだけど便利

ほぼ使わない

スクリプト

ScriptUI

デフォルトで入ってるけどかなり使えるやつ

ユーティリティー

その他

ビジュアルプログラミング

デザイナーも映像作家もなにかかしらの形でプログラムにお世話になってて, FCPもAdobe CCもC4Dも, すっごい拡大解釈すると全部ある種のビジュアルプログラミングだと思うので, あとはどこまで低レベルまで自分でコントロールしたいと思うか, の違いでしかない気がする.

映像生成するのにアセンブラから書くのは流石にしんどいので, 誰かが作ったプログラムの限定的なパラメーターをイジる事でグラフィックを作ってるんだと思うけど, 結局どの部分をカプセル化して, どの部分をデザイナーがコントロール出来るようにUIに落とすかは, 結局プログラムの設計思想に依る所でしかなくて.

一番怖いのは, そうとも知らずに, そうして外部化されたパラメータだけがコントロールできる全てだと勘違いしてしまうことで, 開発者都合で設定されている制約を制約として意識すらしないことだと思う.

例えば映像ソフトの殆どは, 並列処理がし易いように, 前後のフレームの状態に対して差分を加えるような処理を許さないから, クレイアニメのような作り方をデジタルじゃできなかったり, UVリマップやディスプレイスメントも, 大概ピクセルのオフセットの方向がX, Y軸に限定されていて, 例えば2つのチャンネルを極座標方向の変形として処理するだけで凄い面白いグラフィックが出来るのに, その可能性にすら気付けなかったり.

そういうんが, なんでこれが出来ないの!?っていちいちストレスに感じるから, AEとかCinema4Dをそのまま使うよか, ちょっとだけ低レベルから弄ってるだけの話だし, それすらもopenFrameworksだったりWebGLだったり, 誰かが作ったシステムのごくごく高級な部分をちょちょちょって触ってるだけだったりする訳で.

「プログラムで映像作るニュージェネ」みたいな印象自体は別に否定するつもりは無いし, マジで仕事出来ないのに認識してもらえるだけで有り難いのだけど, 自分の中では別にプログラミングと映像の融合とか意識してるつもりも無いし(とか言っちゃうのは少し確信的でヤラシイけど), そもそも理系と文系, デザイン思考とエンジニア思考を対立的に捉えちゃう時点で, すっごい可能性を狭めているなーって, ふんわり感じてるって話でした.

2 21, 2016

形骸化した作法を「そういうものだから」と疑うことなく受け入れること以上に、「理屈の上では無意味かもしれないけれど、『そういうものだから』と考える人もいるから一応はそうすべきだ」っていう考え方こそがそのクソ作法を生かし続けるのにずっと大きく加担してるんだと思う