Apribase

フィギュア撮影 #3 キルマリア・アイディーン

DSC05990

シャイニングアークのキルマリア・アイディーン、艶のある長い黒髪と紫の瞳はやっぱり合う。

上を黒で下を白くするとかわいいと思いきや、それに黒ストッキングと履かせると白が浮いて間抜けな姿になることに最近気づいたので、生足を見せている理由が今ならよく分かります。そんな理由でこうなってるか知りませんが。

似たところでもブラック・ブレットの木更さんがそうですね。長い黒髪に紫の瞳、上は黒だけど下は黒ニーソまでにして生足を少し見せる形。

黒髪と合う目も紫色以外がなかなかないので、黒髪キャラが似た色配置になるのは当然なのかなあと最近思います。

あとはこのキルマリアさん胸が強調されているけれど、いわゆる乳袋状態で、実際には大きい胸に服をかぶせると太って見えて、逆に小さい胸にラインがしっかり出るほうが綺麗に見えるとか、人形から学ぶシルエット力が大変高まってます。女子力高くなる。

Lightroom before after

このキルマリアさん、端のほうに写っていただけの写真をクリップしたうえで Lightroom の魔法でこうなってます。

最近はセンサーはもうマイクロフォーサーズくらいでも問題なくて、それよりもグリップの良さと、ボタンやダイヤルの操作の快適さと、フォーカスの気持ちよさがあればいいなあと思うようになってきました。

なので安いのでもいいかというとそんなことはなくて、ハイエンドほどグリップや操作系がしっかりしているので、今は GH4 が一番気持ちよかったのだけれど、他社含めても値段が違いすぎた。4K 動画いらないけれど、それを抜いたエントリーモデルでこのボディ形状は出ないですよね。

B00J8B8K5E.01.MZZZZZZZ.jpgB00DAOTQJE.01.MZZZZZZZ.jpgB00J8H7ISS.01.MZZZZZZZ.jpg

ほーむぺーじ #29 Grunt を止めて Leiningen で Bower と SassC と UglifyJS を統合した src dist 構成にレイアウト

from Grut to Leiningen

ここ数日の Backbone, JQuery, Jade と止めた話や lein-sassc を作った話は、このビルド環境を実現する過程で行われたものでした。

便利なツールを組み合わせつつも Leiningen ひとつで全てを管理できる構成を模索していたのですが、ようやく納得できる形に着地したのです。

1. まず設定ファイルや中間ディレクトリが大幅に減った

ほーむぺーじ #19 Bower + Grunt で Jade SCSS ClojureScript を src lib dist 構成にレイアウト で、半年前に「すっきりした」などと言っているわたしですが、今と比べたらゴミだらけですね。

スクリーンショットの通りですが、Grunt, Node, Bower の設定ファイルや中間ディレクトリを全て排除できたので、初期状態もビルド後も大変すっきりしました。

2. Component をボツにした理由

最初はずっと Component を使う前提で構成を考えていましたが、クリアできなくはないものの Bower よりムリがかかる点が多かったのです。

今までは外部ライブラリを UglifyJS でまとめた dep.js を別途読み込む形にしていました。Component は全てを一緒にビルドする前提で、分けてビルドすることも一応できましたが、それでは Bower でも良いことになります。

また Component は require を前提とするため、ClojureScript の require と Firefox SDK の require と Component の require が現れるため、競合しそうな予感しかしません。

他にもいろいろ理由があって、クリアは出来るものの、それは Bower でも可能なことに気づきます。クリア自体は出来てしまったため、これがダメ!と明言しにくい。

3. Bower を採用した理由

Bower は bower.json や .bowerrc に設定を書いた上で Grunt.coffee で結合して Grunt のために node_modules が出来て、といった設定ファイルだらけになることが不満でした。

しかし既存の lein-bower は project.clj に記述した設定から内部で JSON オブジェクトを生成して Bower を起動してくれるため、ファイルを必要としません。

もちろん bower_components は出力されますが、ディレクトリを変更して中間出力として target/bower_components に隠し、同じく lein-bower の後処理機能で UglifyJS で結合して dist/ に出力する形で大変綺麗になりました。

4. lein-sassc は bower のほうが相性が良い

ほーむぺーじ #25 Leiningen で SCSS をビルドする lein-sassc を公開しました で作った lein-sassc は、この構成において target/bower_components を import-path に通すことで @import が書きやすくなります。

これが Component の場合、build.css にまとめられる前提で全ソースをダウンロードさせる Vue.js に対して min.js しか提供しない hint.css のようなパッケージが存在します。

そして hint.css のケースでは SCSS として import できないのでビルド時に結合する必要が生まれてしまいます。

幸い、font-awesome や hint.css などは bower で全てをダウンロードすると SCSS を取得できるので、lein-sassc 単独でビルドするにはこちらのほうが都合がよいです。

5. JS は UglifyJS でまとめる方針を作ったが必要なくなってきた

ローカル JS は Github に逃がして Bower でインストールする形にしたのですが、自分で書くコードは ClojureScript だけなので、逃がしたのは Google Code Prettify のみです。

ほーむぺーじ #26 Backbone.History を止めて Html5History 版ふわっと.cljs 作ったほーむぺーじ #27 JQuery を止めて Kitashiro さん作った は、そもそも JS が必要ないのではという流れでやりました。

6. HTML 周りはさほど困らない

ほーむぺーじ #28 Jade を止めて stch.html で WordPress Theme を書いた の通りで、とはいえ HTML はライブラリとしてダウンロードすることがないので、別にビルドで悩むことはないはずです。

7. project.clj 自体が普通の Clojure なので自分でどうとでも出来る

他のビルドツールを見て冗長な記述だなあと思うことも、lein なら自分で好きなようにマクロで記述を短縮できるし、新しいツールが出たら自分でそれを使うプラグインを書けばいいので、万能感あります。

ほーむぺーじ #28 Jade を止めて stch.html で WordPress Theme を書いた

from Jade to stch.html

理想的な HTML DSL として stch.html に出会ったので、ついに Jade も止めることができました。

ほーむぺーじ #1 WordPress Theme の Jade 化 以来の HTML アップデートです。

理想的とか言っちゃったけれど書き終わった今、書きにくさを抜いて客観的に眺めただけなら Jade のほうが綺麗に見えるし Hiccup も案外綺麗に見えてきてるので、書いた内容の説得力が弱い。

1. Jade の不満点

1. インデント構文のせいで raw が長い場合は変数を経由しないと埋め込みにくい。
2. 変数参照時の構文が多すぎて覚えられないのでミスする。
3. attribute の区切りにカンマが必須なのでだるい。生 HTML よりひどい。
4. 不満とまでは言わないけれど extends block はファイル分割が前提。
5. 静的ビルドツールとして使うときにアウトプットオプションが存在しない。

- var wordpress = "<?php $wp = new WordPress(); ?>"
- var title     = "<?php echo $wp->title(); ?>"
- var apribase_css  = "<?php bloginfo('template_url'); ?>/apribase.css?ver=2.0"

doctype html
html(lang='ja')
  | !{wordpress}
  head
    meta(charset='UTF-8')
    meta(name='author', content='kei')
    title !{title}
    link(rel='stylesheet', type='text/css', media='all', href!='#{apribase_css}')

2. Hiccup 系のベクタというかキーワードの見た目に違和感ある

素直なベクタとハッシュマップによる記述なんだけど、ベクタはともかく頭のノード名がキーワードなのが綺麗に見えない原因のもよう。

試しにキーワードのコロンを抜いたら「いいじゃん」ってなったので。

(html
  [:head
    [:meta {:charset "UTF-8"}]
    [:meta {:name    "author" :content "kei"}]

3. stch.html の素晴らしい点

1. attribute のハッシュマップを {} を省略して flatten に記述できます。
2. attribute を keyword で書くのでシンタックスハイライトで読みやすくなります。
3. raw 関数で制限なく好きな位置に HTML 以外の PHP 等も柔軟に埋め込めます。
4. カンマもいらないしマップ括弧もいらないしで見た目がすっきりしてミスも減ります。
5. たいした話ではないけれど lein-jade を作らなくても普通の Clojure としてビルドできます。

(defhtml template [content]
  (html5)
  (raw "<?php $wp = new WordPress(); ?>")
  (html :lang "ja"
    (head
      (html-meta :charset "UTF-8")
      (html-meta :name    "author" :content "kei")
      (title {} (raw "<?php echo $wp->title(); ?>"))

4. Clojure 関係なく Jade と同列に一般的な HTML ビルドツールとして使える

少なくともウチでは動的に HTML を出力しているわけではなく、静的に出力して使っています。なので別に Clojure のプログラムでしか使えないわけではありません。

Jade と違ってコマンドラインツールがないという点があるけれど、気が向いたら lein-stch-html でも作って誰でも使えるようにしてみてもいいかと思ってます。

ウチでは普通に Clojure で書けばいいのでとりあえず lein run でビルドしちゃってますけど。lein-stch-html を作るとしたら以下のコードをコマンドラインから使えるようにするだけです。

(defn -main []
  (fs/mkdir "dist")
  (with-open [index-php     (io/writer "dist/index.php")
              single-php    (io/writer "dist/single.php")
              page-php      (io/writer "dist/page.php")
              not-found-php (io/writer "dist/404.php")]
    (.write index-php     (template index))
    (.write single-php    (template single))
    (.write page-php      (template page))
    (.write not-found-php (template not-found))))

ほーむぺーじ #27 JQuery を止めて Kitashiro さん作った

kitashiro.cljs

自分の使う範囲だと JQuery を使う理由はもはや残っていなくて、デメリットしかないので使うのを止めました。

基本的には Dommy によるエレメント操作のほうが便利なので、足りない機能を補う部分を作って Clojars に公開しました。

作ったときに「北代さんかわいい」と言っていたためプロジェクト名は北代さんになった。

0. 自分が使う範囲とは

CSS セレクタ、Fade、HTML パーサ、Ajax、ready の5つくらい。

1. CSS セレクタによるノード取得は Dommy のほうが扱いやすい

セレクタは Dommy が優秀なのでそのまま使ってます。

JQuery だと JQuery オブジェクトが返るので他の API と組み合わせがたい。

(doto (js/jQuery "[role='banner'] a")
  (.on "click" anchor-fn))

Dommy ならネイティブな Element または NodeList が返るので他の API からも扱うことが出来て、正確にはインターフェースが拡張されているので、なんとシーケンスとして扱えます。

(doseq [e (sel el "[role='banner'] a")] ;; NodeList
  (dommy/listen! e :click anchor-fn))

2. fade-in fade-out は goog.fx.dom.Fade で出来る

Dommy にないので作りました。goog 版も同様にスレッディングマクロで連鎖したいので、ネイティブ Element を連鎖できるようにしました。

3. ブラウザの DOMParser なら妙な Array ではなく HTMLDocument を返す

JQuery の parse-html は本当に面倒すぎて、そのままだと扱いがたい Array になるので取得したテキストを div に突っ込んで。

検索は find を使わないといけなかったし、ノード入れ替えに replace がなくてセレクタで子要素を選ばせたし。今でこそ分かるけど、初見にはつらかった思い出が多すぎる。

(doto (-> (js/jQuery "<div>") ;; ルート検索用にルートノードとしての div
          (.append (js/jQuery.parseHTML response-text)) ;; 妙な Array
  (.find (str sel ">*")) ;; replace のために全子要素選択
  (.find "title")        ;; title を find

常々、「ブラウザが普通に HTML を描画するときの DOM 操作したいんだけど」と思っていて、でもライブラリは createElement で構築していくものが多くて、しかも簡易すぎて動かないんだけど。

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser が HTMLDocument を返すので、これだよこれっていう理想型です。

issues #2 – document.implementation.createHTMLDocument が最適化されて使えない は implementation 以下の externs 定義を Closure Compiler 本家が忘れてるバグな気がするけれど、今の知識ならちゃんと回避できる。

かくして出来上がった parse-html は感動もの。HTMLDocument なので普通にセレクタが使えます。

(doto (kdom/parse-html res) ;; HTMLDocument
  (sel1 "title")   ;; title Element
  (sel1 "main")    ;; main  Element
  (sel  "main a")) ;; main  配下の全ての a NodeList

4. ajax はなんでもいい

なんでもいいので特に語ることはないけれど、あえて言うなら go async によって継続モナドとか考えずチャネルに値を突っ込んで逐次処理の話とかあるけれど、もはや ajax 関係なかった。

5. Document Ready

DOMContentLoaded で特に問題なさそうなので、不都合が出たらそのとき考える。

(dommy/listen! js/document :DOMContentLoaded main)

6. べつに JS ゼロ縛りをするつもりはない

するつもりはないけれど、Component などを使わずに lein ひとつで事が済むのなら、それは嬉しい。

一応今も lein だけで完結できるように、bower, sassc, uglifyjs を lein から使って統合する仕組みまでは作りました。

ほーむぺーじ #26 Backbone.History を止めて Html5History 版ふわっと.cljs 作った

Backbone.History を止めて Html5History 版ふわっと.cljs

ビルドツールを lein に統合しようとして Component を模索していたら Backbone を捨てていた、どうしてこうなった。

Html5History が特別いいわけではないけれど、ネイティブに使えるので外部 JS のビルドコストが下がるし、短くまとめられたのでしばらくはこれで。

Backbone.Router + Backbone.History の不満点

ビルドツールを grunt を捨てて lein に統合する過程で、bower ではなく component でまとめるベストプラクティスを模索していたのですが、backbone-query-params を含む Backbone 拡張が Component と相性が悪いのです。

そもそも Backbone.Router が公式にクエリパラメータを使わない宣言をした時点で積極的に使う理由が薄れています。

欲しかったのはルーティングライブラリではなく popstate ライブラリ

最小のルーティングライブラリを探してみたけれど、そもそもこれらは URL ぽい文字列をパースしてアクションを起こすためのものであって、popstate を扱うのはまた別の分野のようです。なかったので自作コースです。

secretary を試した、ボツにした

dispatch! が同ネームスペースの defroute を呼ぶマクロなせいなバグ踏んで使うのをやめました。直す愛着は持てない。

TokenTransformer を渡さないとクエリパラメータが無限に増える

Html5History はそれなりに使えるのですが、こういう細かい罠の対応が待っていた。

Safari (WebKit) の popstate 実装が旧型で初回ロードで発火する

初期の popstate 仕様では正しかったらしいけれど、現代では邪魔でしかなかった。

初回に一回発動しちゃうだけで閲覧には問題ないし Firefox と Chrome は対応してるので構わないのだけれど、iPad で発動しちゃうのがなあ。でも初回判定って地味に面倒だった。本件、BitBucket issue に Open しっぱなし。

Doll with Flower #9 Euphorbia marginata

Doll with flower - 初雪草

初雪草、英名ではゴーストウィードなどと呼ばれる綺麗な葉をつけた草です。花は大分名前を覚えてきたけれど、最近は草が楽しい。

少し期間が空き、雰囲気を路線変更してかっこよくしたいと思ったダメージニット、驚きの fav 激減。ペンダントやタイツを合わせたかった。

Doll with Flower - 初雪草

Lightroom 4 で現像できないレンズなので 5.4 の試用版を使ったけれど、次の 5.5 の試用版の期限も切れたらどうしましょう。

Lightroom 6 が出たら買おうと思っていたけれど Photoshop CC と統合されてしまった結果、6 が出る気配がなかった。

買った本 #203

DSC05975

秋★枝さんの新作「恋は光」は当たりでした、北代さんが大変よいです。

もう一度言う、北代さんが大変よいです。

ほう、ふむ、ああ、という親友としての相づちと、煩悩寺の小沢さんのようにおもしろいことは素直におもしろいと思える素直な性格、こんなにかわいい北代さんがヒロインじゃないわけがないと思ったら早い段階からセンセのことを好きだと言う告白、完璧。

いつも通り、2巻くらいで終わってしまいそうな気もするけれど、北代さんには幸せになってほしい。なお、北代さんは表紙の子ではない。

4088797973.01.MZZZZZZZ.jpg4048863444.01.MZZZZZZZ.jpg4048866540.01.MZZZZZZZ.jpg

はたらく魔王さま、1巻2巻はアニメで既読、3巻も天使だなんだとあまり話に乗れなかったけれど、4巻あたりから読みやすくなってきました、おもしろい。

1 / 17712345...102030...最後 »