Category Archives: Web技術

プログラマーとデザイナーの境界が縮まってきた気がする

今日のひがさんのエントリを読んで、appengineとは全然関係ないけど思ったことを書きます。
http://d.hatena.ne.jp/higayasuo/20101109/1289290143

ひがさんのエントリでは、appengine/Javaのスピンアップ問題を解決するために、静的HTMLをレスポンスして、JavaScriptで後から動的なデータを取得するパターンが提案されています。

別にこれ、appengineに限らず最近僕の近辺ではトレンドだなと思っていました。
SEOがあるので、サーバーサイドテンプレートもまだ必要だとは思いますが。

それで、思ったのがプログラマーの仕事についてです。僕が見てきたことを書きます。

むかしはJSPを書くだけのプログラマーがいました。

むかしむかし、ウェブシステムの画面はJSPという難解な呪文を駆使しなければ書けない、とても高級なものでした。
しかし、世の中には、「JSPが書ける」プログラマーが沢山いました。少しコツを教えればすぐにやり方を覚えてくれるので、派遣さんや学生のアルバイトが多く担当しました。

彼らは、デザイナーさんが書いたHTMLを「HTMLきもーい」とか言いながら、一生懸命コピペしていました。

この仕事は誰でもできる反面、誰がやっても同じくらいのコストがかかる仕事でした。優秀なプログラマーなら、普通のプログラマーの20倍は生産するのが普通な現場ですが、みんな一律に同じ程度の時間がかかるのです。それに、デザインを組み込むために何週間もかかるため、お客様にもご迷惑がかかりました。

それを解決したのが、(弊社の場合は)Mayaaでした。最初の導入は大変でしたが、導入後は、デザイナーの人が一人でサイト全体のデザインをしてくれるようになりました。もう、JSPを書けるだけのプログラマーは必要なくなり、プログラマーはJavaに専念し、デザイナーはHTMLに専念することができるようになりました。時々、中間言語のmayaaファイル(XML)を書かなければいけないのですが、こういう時、プログラマーは腕の見せ所でカッコ良く対応してあげるとデザイナーさんからの株が上がります。大いにがんばりましょう。

ところが、これを導入してたった半年で時代は変わりました。

みんな、JavaScriptでなんとかしたくなっていたのです。
MayaaはJavaScriptの変数を置換することはできません。強引にやることもできますが、やるべきではありません。セキュリティー的に。
それではどうするのかというと、一旦mayaaでspanタグにデータを落として、スタイルシートで非表示にし、JavaScriptから、getElementByIdしてinnerHTMLなどで値を取得するという方法が良さそうです。

これくらいのことなら、デザイナーさんにレクチャーすればやってもらえるのですが、

デザイナーといえど、JavaScriptを知らなければやっていられない時代なんだなと思います。

このことにとどまらず、今、毎日のように、デザイナーさんがいろんなJavaScriptをWEBから見つけては、「動かない」と悩んで僕に質問をします。その都度、「これはjQueryのバージョンが合わない」とか「このJavaScriptわかってない人が書いてるから使わない方が良い」とか答えるのですが、時には「わかった。僕がやっとくよ」ということもあります。

今までは、
Java, JSP, HTML(CSS)
と、それぞれの言語で話していたことが、今は
HTML/JavaScript
という共通の言語でプログラマーとデザイナーが会話をしているのです。

本当はUIプログラマーという職種が、橋渡しを担当するのでしょうか?でも、なんだかむしろ、今時のWebはUIを取ってしまったらあとは何も残らないくらいUIに依存しているので、UIプログラミングのできないプログラマーも、JavaScriptの書けないデザイナーもあんまり活躍できないのではないかと思います。

その後の追記

ついに、デザイナーさんから、「私ができそうなところは私がmayaa書いていいですか?」と言われました。もはや最強!

プログラマーに取ってmayaaファイルを書く事はXMLプログラミングですので、割と苦痛なのですが、デザイナーさんにとっては、JavaScriptよりもフレンドリーのようです。

この記事は以前多くのブックマーク・コメントを頂きました。

これからブックマークされる方はこちら↓

flashcanvasはproを使いましょう!

引き続きCanvas案件やってます。

今日、一部の条件で、描画したものが消えるという報告がお客様より寄せられました。またIEです。ChromeやFFでは再現しないんですよ〜これが。で、確かに、画面に描画を比較的重く行っているケースで、レンダリングされない不具合があったんです。IE用のエミュレーションライブラリはflashcanvas(free版)を使用していました。

まずは、デバッガ……なんてものは、IEには存在しないので、ブックマークレット+alertで頑張ってデバッグしました:D

javascript:alert(hogehogeCanvas.fugafugaValues[1]);

でもデータ的に問題ないんですね。よくよく見ると、ctx.fillRestのような原始的なメソッドを読んでも反映されなかったりする。これは、flashcanvasが固まってるのかもしれない。

そこで、とりあえずflashcanvasを最新化…と思ったら、pro版というものが目についたので試しにダウソしてみたら、これがほら? ちゃんと動きなさる。

が〜ん。

僕の半日の苦しみが、たった$31 USDで解決されることになりました。

みなさん、これから、IE8でcanvas案件をやる場合は FlashCanvas Pro がオススメです!個人用途ならば無料で使えます。

IE8 Canvas 印刷問題

今Canvasを使った案件に携わっています。が、何かの間違いで、IE8もサポートしなければならなくなり半泣きです。画面レンダリングだけでなく、印刷もサポートしなければなりません。

画面ではドラッグアンドドロップでグリグリ動かすのですが、excanvasではスピードが遅すぎて使い物になりません。この問題については、FlashCanvasがサクサク動くので採用しました。(それでもある程度のチューニングは必要でした)
問題は印刷で、flashcanvasだと、

  • 縦横比が変
  • 周りに変な背景色が付く
  • 解像度が悪い

一方excanvasを使用すると、これらの問題が解決します。つまり

  • 縦横比問題なし
  • 変な背景色なし
  • 解像度が綺麗(ここらへんVMLの強みだなあと思います)

ということで、画面でグリグリ動かすのはflashcanvas、印刷するならexcanvasでリリースしました。
ところが、ページ送りが変になる不具合が発生しました。(印刷ページでは、縦幅を事前に計算して、CSSのpage-brake-beforeを使って、ページ送りを制御しています。) その現象というのが、

「キャンバスの途中でレンダリングが切れ、代わりに次のページの上部に現れ、Canvas以外の文字列を潰してしまう」

というものです。「互換モード」だとうまくいくので、もしかしたらうっかり、私がIE7互換モードでテストをしてしまったのかもしれません。そんなはずないのですが……。倍率を十分小さくして、50%くらいにすると、回避できるのですが、そうすると、文字が小さすぎて読めなくなります。結局用紙の半分くらいまでしか出力できない状態です。
それにしても、互換モードで動くとは。やはり、IE8でのVMLサポートは微妙だったと言うことなのでしょうか?

解決編

これを書けば互換モードで動く(それかよ!)

<meta http-equiv="X-UA-Compatible" content="IE=7" />

まあ、どうせIE9が出るまでの応急処置だし。