terser 3.16.0問題でbuildコケてた

しばらく前に環境作って production build はせずに development mode でだけ使ってた手元のプロジェクトで build したら見事に動かなくてハマった。

terser/CHANGELOG.md at master · terser-js/terser

関係するライブラリをバンバン upgrade したらなんとかなった。

import と ESModule でトラブルの、まだ当分続きそうな気がするなぁ。

webpackに詳しくならずに開発中のコードをWireless Isolation環境 + 実機で確認する

• production buildでHTMLまで吐き出す
• serveでhttp serveする ( http-server でもよい )
• localhostへtunnelする

参考

• Deployment | Vue CLI
• zeit/serve: Static file serving and directory listing
• indexzero/http-server: a simple zero-configuration command-line http server

iOS 12.2でFullscreen API対応はpartialだった

• screenfull.js demo
• Can I use… Support tables for HTML5, CSS3, etc
• 全画面表示にする | Web | Google Developers

試してみようと思ったのはコレだったんだけど、何もうまくいきませんでした。

実は最近 Vue.js ばかりいじっていて、その時に

data の変更を component が全部検知してしまうとモノによってはパフォーマンスペナルティがでかいのでは？

と気になったので、ついでにメジャーなフレームワークについて「監視させない方法」を調べてみた。今回調べたのは以下の4つ。

• Vue.js
• Mithril
• React
• Angular (2+)

ちなみに React 以外をちらっと触ったことある程度なので、間違えてる可能性はおおいにあります！！１

Vue.js

Vue の場合は data あるいは data() で「ビルド時に明示されていないもの」は自動監視できない。

つまり created() などで this に対して値をセットするとそれは auto redraw の対象から外れるので変化の激しいオブジェクトなどはこのような方法で与えるとよい。

data() {
  return {}
},
created() {
  this.nowatch = NotWatchedObject
}

Mithril

Mithril にはデータの変更を自動検知して redraw する機能は存在しない。あくまで VM component はイベントハンドラ実行後に redraw を行う。つまり特定の値の変更に寄与する関数を Mithril に明示しない限り component は値の変更、変化の影響を受けない。

したがって自由に外の世界を統べる World オブジェクトなどを配置することができる。

はず。

cf. 自動再描画システム - Mithril.js

React

class ベースの React.component は state と props が監視対象であり、それ以外の property は自由に使える。

While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).

State and Lifecycle - React

Angular 2+

Angular 2+ は Zone というライブラリを使って

• ユーザーの fire したイベント
• XHR
• タイマー

を監視しており、この結果の component の変化は自動で検知（Change Detection）される。

• 日本語訳：Angular 2 Change Detection Explained - Qiita
• Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと - Qiita

NgZone#runOutsideAngular の中で実行したものは Change Detection の対象外になるらしいので、特定の property の変更に寄与するイベントをこれで囲んであげるとよさげ。

まとめ

これまであまり気にしていなかったが、実はメジャーなViewModel系のフレームワークの考え方は

1. 特定のデータ監視系（React, Vue）
2. イベント監視系（Mithril）
3. 非同期処理監視系（AngularJS）

に分類できることが分かった。（あえて言うと 2 は 3 の簡略版みたいなものと言えるかもしれない。）

調べた当時見つけることができなかったので普段は Typus を使っているんだけど、Rails 3.2 で動かないっぽいのと、Mongoid と組み合わせて使ってみようと思ったら

Typus はユーザーDBが ActiveRecord を利用する前提になってる

のにガックリきて RailsAdmin を試してみた。

というわけで以下は簡単な比較。

Typus

http://www.typuscmf.com/

• Model に対応する admin 用の Controller を作る必要がある
• 加えて Model に対する編集権限や読み書きできる field を YAML で定義する必要がある

YAML を作るということさえ分かればカスタマイズは楽にできるし、生の Controller ができるのでこれをいじれば動きを変えられるということが簡単に想像できる。

手間は多いけどどうすればカスタマイズできるかが分かりやすいのがメリット。

画像などのファイルについては

• PaperClip や Dragonfly を使った画像の preview からさらに lightbox 系の機能まで組み込み済み

デメリット

• Rails 3.2 はたぶん未対応
• 認証用のユーザー DB が ActiveRecord 前提なのでフル Mongoid にできない
• Typus 用に Model に手を加える必要がある場合がある。これがパフォーマンスに影響しそうでちょっとイヤな感じ。

RailsAdmin

https://github.com/sferik/rails_admin

• Rails 3.1+ 以降対応 ( sass などが前提 )
• デザインがイマドキ
• 設定用 YAML や admin 用 Controller を作らなくてもいきなり管理できる
• Mongoid フル対応
• 認証は基本 devise 依存だが最初のセットアップが親切なので Mongoid や devise が分かってなくても準備できる
• カスタマイズは initilizers/rails_admin.rb の中で config.model ModelName do end のような形で記述する。

例えば画像の preview サイズの設定は

config.model ModelName do
  field :FIELD do
    thumb_method '200x200'
  end
end

みたいに書く。

最初の準備は RailsAdmin の方が楽かも。少なくともたくさんファイル作らなきゃいけない¹という面倒くささはない。

• 管理画面から触れてほしくない Model なんかも config.excluded_models で設定できる。ユーザー別にどうするかまでは調べてない。
• カスタムコントローラとかたぶん作れるけどよく分かってない

カスタマイズのノウハウ次第のところはあるけど、

• Rails 3.2 対応
• 見た目のかっこよさ
• Controller や YAML を用意しまくらなくてもとりあえず動く

これはとても良いと思う。

• image の popup preview ( Lightbox 的なアレ ) はないみたい

だけど、管理画面だし、オリジナルの画像を確認できるだけで十分ちゃ十分かも。

残念なところ

• JS の効果の仕上げが粗い。popup が残りっぱなしになったりする
• バージョン 0.0.1 は不安になる。安定して使えるならそれなりのバージョンにしてほしい。

認証の外し方

Typus の場合は initializer で

Typus.setup do |config|
  # Define authentication: +:none+, +:http_basic+, +:session+
  config.authentication = :none
end

すればいいというのが設定ファイルを見ればコメントですぐ分かるんだけど、RailsAdmin の場合はよく分からなかったので設定ファイルの中を読んでいたら Proc.new {} という記述をそこかしこで見かけたので試しに

RailsAdmin.config do |config|
  # ignore authentication
  config.authenticate_with do; end
end

こんな感じに authenticate_with の中身を空にしたら認証がスルーされた。というわけでこれを

config/environments/development.rb

に書けば開発環境でだけ認証が外れる。

gcal4ruby

GCal4Ruby « Cooking And Coding

event の delete ができない

googlecalendar

Googlecalendar – Ruby api and Rails plugin for Google Calendar

使い方

g = GData.new
g.login( mail, password )
c = g.find_calendar( name )

• events の取得方法がよく分からず
• scan しようとしたら認証を要求された。login の意味は？

未完成なのか API の変更に追随してないのか？

gcalapi

GoogleCalendar — Google Calendar API

• events も取れて delete もできるっぽい
• 雰囲気が googlecalendar に酷似している
• service が新たに登場している

カレンダーの取得

s    = GoogleCalendar::Serview.new( mail, password )
cals = SimpleRSS.parse(s.calendars.body)
cal  = cals.find { |c| c.title == NAME }
c    = GoogleCalendar::Calendar.new( s, cal[:link] )

イベント全消去

c.events.each { |e|
  e.destroy!
}

イケるっぽい。

イベント作成

e = c.create_event
e.XXXX
e.save!

ということで 自作のツール では gcalapi を使うことにした。

DVD に対応できない環境ばかりなので CD を作成して実験開始。

最初のメニューは表示できるんだけど、その後は GUI でも text mode でも resolution を指定してもまったく何も表示されない。困ったな。目的は Cent そのものじゃなくて Xen with Cent なので、この状況では何にもできない。うーん。

Xen そのものは Debian だけでも実験を進められるんだけど…。うーん。

ふとした疑問。

<pre> の中の改行コードの扱いってどうなってんの？

結果。

cr も lf も crlf も等しく一つの改行になる。cr のあとに lf 以外の文字がきた場合は cr だけで改行、lf がきたら crlf のセットで改行。つまりどれでもいいよ、と。

試したのは Firefox 1.5(OSX), MacIE 5.2, Safari 1.3, Opera 8.5(OSX), IE 6(Win) たぶんみんなこういう挙動するようになってんだろな。

自分はスペースです。

※ もうどこに TB したらいいのか分からないので送るのやめた。

Dan さんも「メールで patch」のネタで触れてるけど、エディタ以外の環境のことも考えるとスペースの方がいいなと思う。メール以外にもブラウザでコードを読める環境もたくさんあるし、そういう環境での再現性も考えるとタブじゃなくてスペースの方がいいんじゃないかと。

振り返ると自分も実は DOS/Windows 中心だったときはタブ派だった。タブ派の多くの人と同じように、タブの方がエディタの設定一つで見た目を変えられるから、自分の好みに合わせつつ共同作業するときにいいじゃんて思ってた。でも実際にはこれ意外とうまくいかないんですよ。これがどうにもうまく表現できなかったんだけど、上のようにエディタ以外の環境を含めてしまうと自分の中ではしっくりくる。スペースの方がより「安全」であると。

ただこう思えるようになったのは、「Emacs を使うようになったから」でもある。Emacs はその変態キーバインドで Windows 使いの人には恐らくすこぶる評判が悪いと思うが、自分が唯一「これはいいでしょ」と言えるのはスタイルの設定に従ったオートインデントの強制。

例えば Windows 用の一般的なエディタでは

function hoge() {
  if ( ) {
    ここ ←
  }
}

「ここ」の部分にカーソルを合わせるためには、中身がスペースかタブコードかによらず、行頭でタブキーを2回押すという動作が必要になる。オートインデントを on にするとその上の行の { のうしろで改行した瞬間に「ここ」にきてくれるが、デフォルトではタブキー2回という動作が必要な場合がほとんど。しかし Emacs ではタブキーを1回押すと「ここ」にきてくれる。¹

まず、タブキーはタブコードを入力するためのキーではない²。設定されたインデントの位置までスペースあるいはタブを埋めてくれるキーなのである。これがものすごく嬉しかった。

例えば上のコードをまったくインデントせずに書いても、あとから各行で（その桁位置を気にすることなく）どかどかとタブキーを押していくだけで上のインデントは再現できるのである。そしてこの機能は当然コードの解析をもとにしているので、必要以上にタブキーを押してもスペースやタブが入りすぎることはないし、どこかで { } や ( ) の対応が壊れていたらインデントが正しく再現されない。つまり、何の気なしにタブキーを押すだけで typo に気づけるのである。（とりあえずカッコ系の対応だけね。）

言い換えると、Windows の普通のエディタを使っている人たちが思っているより、Emacs ではスペースでインデントするのがものすごく楽なのだ。たぶんこの便利さを知らないとスペース派の言い分はなかなか理解できないんじゃないかと思う。というかこの機能のないエディタでスペース派の人っているんだろうか。それくらい自分の中では Emacs を使うこととスペースを使うことは切り離せなくなってしまっている。³

まとめ

• スペースの方がエディタや IDE 以外の環境を考えたときに安全だし、自分はスペースの方が好みである
• Emacs の場合はタブであるかスペースであるかに関わらず、インデントに関しては超楽ちんである。だからタブ派だった自分が何の不便もなくスペース派に移行できてしまった。
  • 他のエディタや IDE の場合はどうなんだろう？

まぁタブでも問題が起きない環境に限定されているのであれば、幅さえ決めてくれれば従いますけどね。従うのはエディタの仕事だし:-) それよりエディタウィンドウの幅は 80 までで制限してほしいな。日本語の文章でもなんでもそうだけど、一行が長すぎると読みにくい。一行の長さが「場合によって」80 を越えるってのは別にいいんだけど、130 前提とかで長ーいのを書かれるとつらい。

関連リンク

• Charsbar::Note - タブとスペースの話
• 404 Blog Not Found:タブのスペース化はタブ幅よりも重要である

初めての床屋¹へ。なんというか、店は古くないんだけど、ちょっと懐かしいというか、今まで行ったことのある店より確実に男くさい店だ。漫画用に背の高い本棚が入っていてそのラインナップがエロ系はないにしても確実に男くさい。うちは予約取らないから、という店主の言葉が妙に男気に溢れている。

おばちゃんが担当してくれたんだけど、シャンプーのとき痛かったのも、きっと男気と力が溢れていたからだろう。そこさえ除けば、それなりにいい店だと思う。

次いで初めての「青山」へ。Yシャツがかなり古くなってきていたので3枚、ネクタイはちょっと今までと違う色がほしくて2本。「これはほしい」と思うやつはどこで買ってもそんなに安くないのはなぜだろう。

ついでに会員にならんかと薦められる。近いので入っておこうと思ったらこれがすごく面倒で細かい情報を取られた挙げ句、拇印で捺印。うげーと思ったらクレジットカードにもなるのか。うーん、ちょっと機能がありすぎるぞ。ただの会員カードじゃないじゃん。

あと、個人情報の取り扱いについて、申し込んだあとに書面を渡されたけど、これは事前に提示した方がよいですよ > 青山さん（知っててそのまま書いちゃったオレもオレだけど）

ついで UNIQLO でキースへリングTシャツ。MATSUYA で靴下。そんな感じ。

まだ紐解いていなかった荷物を少し出す。

録画しておいた「まる得マガジン『収納のコツ』」を見て、あちこちのサイズを測り始める。OmniGraffle でメモを書き、PNG に吐き出して携帯にメールして、買い物のときに参考にするぞ作戦。結構きれいに見える。しかし手間なのでこれはちまちま行こう。

FireFox 0.8 を入れた。Alt 周りのバグがあるのは承知のうえだが、ファイルのダウンロードで IE では出っこないスピードが出た。なんでだ？ 回線は同じなのに。