Frontrend in Kanazawa に参加してきた

tDiaryのWiki記法を忘れ始めた今日この頃。おげんこ?

Frontrend in Kanazawa 『10年先のため、今身につけたいこと』 - Frontrend in Kanazawa | Doorkeeper

Frontrendはみんな知ってると思うけど、とりあえずリンクを用意。

Frontrend powered by CyberAgent, Inc.

今回の内容はCyberAgent x DMM.comラボの2本立て。ちょっと異色で内容が多岐に渡っていてとても面白かったと思う。

  • リアルタイムのトレンド
  • 10年近く実際に生き残ってきた方法
  • 緩いルールの中でどう設計を改善し、良くしていくべきか
  • 画面の外を含めた改善の話
  • ユーザーとは、デザインとは

これを2000円、学生に至っては無料で聞くことができるんだから、お得としか言いようがない。

というのは本当にそう思ってるんだけど、実際には全部真面目に聞いていたかというといろいろあって内職しながらで、まぁ顔なじみの人たちが喋るし、挨拶くらいしなきゃなーということで飲みに行ってきた部分が大きかったりする。

で、この飲み会がまた面白かった。

ツール的な話で言えば、結局のところ JS の流行りのフレームワークで解決できるのって問題のごく一部でしかなくて、例えば AngularJS はキモイうえに AngularJS 使ってても Fat Controller 問題は容易に起きちゃって、オブジェクト指向の原則1とか MVVM の理屈を勉強してない人に新しい道具を与えてもあんま意味ないよねーみたいな話をしていた。今のところ Backbone.js + 何かでいんじゃねーの感はやっぱみんな持ってて、でも規約で縛るのもアリだよね、という感覚を共有できたのは一人でモヤモヤしている地方のエンジニアにとって少しホッとする話だった。2

ブラウザが成長過程にあり、開発ツールもあちこちの概念を取り入れながら進化している最中なので、ぶっちゃけるとフロントエンドはカジュアルでもなんでもないガチな世界に入って行かざるを得ないよなーと思っている。

で、そのうえさらに「使われるもの」にするために画面の向こうのユーザーを理解することが大事なわけで、世界はどんどん広く深くなっていて、最近 Ingress をやっていて思った、「あー世界ってでかいな」という感覚にクロスしていくのを感じていた。

一方でみんなだんだん年齢を重ねてきているので、「人」とか「仕事」とか「居住地」とか「故郷」とか、「組織」とか、なんというか不思議な感覚なんだけど、実際に会って話したのはすごく短時間なのに、みんな昔なじみの友達だったんじゃないかと思うような居酒屋話がとてもステキだった。現場はそれぞれ違うけど、割とみんな同じようなことを思ってるんだなー。だからこそ人と会って話すということをくり返しているんだろうね。

おっさんはおっさんでいろいろなことを感じながら、一方で若い人に高速道路を用意してあげたいということを実にいろんなおっさんが思っている。そりゃもちろん自分たちのブランディングだって考えてはいるけど、今回の話は本当にもっとたくさんの若い人に聞いてほしかったなーということを思いながら、夜中の駅前で Hack しながら帰ってきたのだった。

あ、酔って Ingress やるとケータイ落とすので、基本はやらない方がいいよ。自分は 5s + ケースだったので被害が小さかったけど、裸の 6 が目の前で割れたの見ちゃったから(笑

  1. リスコフの置換原則とか単一責務の原則とか、ああいうやつ 

  2. もちろん仮想DOMとか高速化の話になるとよりよい JS としての AltJS のようなツールは入れた方がいいと思ってるし、やってみないと何がクソか分からないとも思っているわけだけど。 

Kanazawa.rb meetup #14 に参加してきた

Meetup #14 - Kanazawarb

Jasmine gem + PhantomJSの話まとめ

これはもくもくの成果。

Jasmineの話はこんな感じで何回か書いてるのですが、

今回は

  • PhantomJSと組み合わせるときの話
  • specをCoffeeScriptで書いているときの話

を自分用にまとめます。

PhantomJSと組み合わせる

これは実はすごく簡単。Jasmine は以前から Selenium を利用した jasmine:ci という rake task を持っているので、

を組み合わせれば PhantomJS を呼び出すことができる。

PhantomJS は1.8 で SeleniumDriver である GhostDriver を integrate してるので、1.8 以降を使わないといけない。

jonleighton/poltergeist も PhantomJS 1.8 以降を使うように README には書かれているが、実は Poltergeist 1.4.1 の段階では PhantomJS 1.7 でも動く。

ブラウザの設定方法

  • 1.2未満は環境変数 JASMINE_BROWSER で指定する
  • 1.2以降は以下のように設定ファイルで設定できる
Jasmine.configure do |config|
  config.browser = :phantomjs
end

1.3 で jasmine init した場合は spec/support/jasmine_helper.rb に書くようになるらしい。

specだけCoffeeScriptを使う

guard/guard-coffeescript

を使うとすぐできる。

ただし、Jasmine 自体は spec/javascripts/ 以下に JavaScript で spec が置かれていることを期待しているので、CoffeeScript しか書いていない場合は `rake jasmine` してブラウザでアクセスしてもテストはコケてしまう。

そこでこんな感じのprepareコードを用意してみた。

desc 'compile spec/coffeescripts'
namespace :jasmine do
task :prepare do
ENV['EXECJS_RUNTIME'] = 'SpiderMonkey' if system('which js > /dev/null')
require "coffee-script"
src = File.dirname(__FILE__) + '/spec/coffeescripts'
dest = src.sub(/coffeescripts\z/, 'javascripts')
Dir.glob("#{dest}/**/*{_,}[Ss]pec.js").uniq.each { |js|
FileUtils::Verbose.rm(js)
}
Dir.chdir(src) {
Dir.glob('**/*{_,}[Ss]pec.coffee').uniq.each { |coffee|
code = CoffeeScript.compile(open(coffee).read, :bare => true)
if ( code )
open(File.join(dest, coffee.sub(/\.coffee\z/, '.js')), 'w') { |js|
js.puts code
puts "Generated #{js.path}"
}
end
}
}
end
end

ちょっとかっこ悪いし guard-coffeescript と二重化してるんだけど、他にあんまりうまい解決策を思いついてない1

rake jasmine:ci

の前に

rake jasmine:prepare

を実行すると、一応いい具合に動く。

TDDとかについて発表してきた

内容としてはテスティングフレームワークについてほんとにざっくり概観してみたっていうのと、普段やってることと使っているツール、そしてそこにどちらかというと若い人向けに継続的に学ぶこと、ツールを闇雲に追うだけでなく、より本質を学ぼう、それは寿命の長い知識やスキルになるよ、というおっさんくさい話をしてきた。

どこまで伝わったか分からないけど、自分は満足しました。はい。

参考リンクは以下。

  1. 実は expect で guard から all を実行して guard-coffeescript の機能を使ってすべてコンパイルするというのをやってみたんだけど、うまくいったりいかなかったりするので諦めた。 

ImageMagickで画像の解像度を変える

なんとなくできるに違いないと思いながらちょっと見つけるのに苦労したのでメモ。

基本的には以下のログだけで終了なんだけど、

07:30:53 >wtnabe< ImageMagick の convert に -density を与えると解像度
を変更できることが分かった。でも例えば Xdpi で Ycm みたいな指定はでき
ないよな。計算して出すしかないのか。
07:42:11 >wtnabe< -density と -units を同時に指定しないとダメなのか。
ちょっと面倒だな。ということは -scale -density -units の同時指定がよさ
げか。

一応動く状態を作るフォーマットはこんな感じ。

convert INFILE -size SRC_SIZE -scale TARGET_SIZE -density 350x350 \
-units PixelsPerInch OUTFILE

これで 350dpi(ppi) x 350dpi(ppi) の解像度に変換することができる。

ポイントは density と units、そして resize ではなく scale を使うこと。size をわざわざ与えているのはその方が速いって聞いたから。

Yahoo Widget Class Library をちょっと読んでみた

ところでコレ、ライセンスどうなってんだろ?

基本的には

  1. Widgets/Library/LibraryShared.js を include()
    • Widget Engine 標準の include() はパスを受け取る
  2. var lib = new Yahoo.Utility.Library( libpath )
    • libpath は Widgets/Library のことナリ
    • なんと lib は中で普通に使っているのでこの名前で作ってあげないとダメ
  3. 以降は lib.include( Classname )
    • WCL の include() は base の libpath と .js を自動的に付加して Classname だけで動く
    • version も指定できる

という流れ。

1 の段階では library の path を計算して、存在していれば処理続行。存在していなければインストールしてくんないと動かないよというメッセージを出して止まるように書くべし。

いろんなコントロールがそれぞれの class として定義されている。

ちょっとアレだなーと思うのは

  • Yahoo.Controls.
  • Yahoo.Drawing.
  • Yahoo.Utility.

という名前空間になっていて、YAHOO.widget. は YUI の方に取られてしまっている。うーん。YUI が YUI で namespace を取ればよかったのにね。

しかしこの library はユーザーの Widgets フォルダに保存されるので、ユーザーが変わったらインストールし直しっつーのが面倒くさいな。まぁ自分の配布したい widget にそのまま同梱しちゃうっていう手はあるんだけど。

むしろグローバルの lib をぶんどってしまっているのがすげーダサイ気がする。そんなんでいいのか。

IT技術者を養成できる人なんて居る?

IT技術者の2人に1人は“プロ未満”(日経 IT Pro)

そんなもんだと思いますぜ。OJT だって目先のことしか扱わないし、だいたい OJT 前提でどんな教育を受けていたか問わない会社も相当に多いと思うんだけど。(まー本当は「受けてきた教育」とその人の取得スキルって合致しないけどさ。)

個人的にはネットワーク管理もヘルプデスクもサポートセンターも一緒くたの「オペレーション」てのはどうかなぁと思うんだけど。1この分類だとネットワークやセキュリティに強い人がどれに当たるか分からない。IT スペシャリストってのは便利屋のことかとか、ソフトウェアディベロプメントとアプリケーションスペシャリストは何が違うんだとか、疑問も多かったり。

それに「今の時点で ITSS に興味を持ってこの診断を受けているのはまだマシな方」だという気がするんですよ。つまり、「多くの現場の実態はこれよりひどい」んじゃないかなぁ。悲観的すぎるかもしれないけど、この平均年収はちょっと信じられない。

あと、少なくとも10年ちょい前の地方の国立大学ではまともに情報工学なんか教えられる教員はほとんどいなかったと思うぞ。教える側がついていけてないでしょ。教える側はプロマネやコンサルより確実に年いってますよ。本気で教育に不満があるなら、自分たちが教育現場に対して何ができるかも考えないとダメでしょう。(もちろん偉い人が、ちゅーことになるわけですが。)

  1. どうもネットワーク管理については手順書にしたがって運用と監視をするだけの人が対象らしい。構築するのは IT スペシャリストに入りそうだ。 

机の間に縦置きする19インチラック

from /.-j

いくらタレコミがそういう方向だからって、どうしてみんな

  • 机の間にサーバなんか置けるか
  • サーバ室が必要な理由はだな、うんぬん

なんてことを得意げに書けるのか。プレスリリースをちゃんと読んでないのは明白だし、想像力が足りなすぎる。

それはともかく、 #638744 から Vert・X for Xserve 直立スタンド てのはなかなかいいかも。普通のメタルラック組んでこれ使って(耐震がちょっと心配なのでそこは工夫して)サーバの設置スペースを節約するってのはいいかもしんない。ラックマウントサーバも10万ちょいで買えるし。数台くらいならともかく、台数増えるとタワーは邪魔でねぇ。まぁタワーはパーツ交換が楽なのが強みだけど。

このストーリーから面白い話発見。

Re:鍵は掛けれるの?

なるほど。コンセントが目立って違えば誤解を防ぎやすいのか!

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm