スマフォのCSS/HTMLについて真面目に考える今まで不真面目だったのか?ってわけじゃないですけど、自分なりにそろそろまとめようかなと。スマフォのHTMLってさfooterとか使えるからいいよね!って思うんですが、これが画像になるとAndroidのdpiとかiPhoneのRetinaとかの都合で超絶に面倒なんですよね。img属性のは倍の大きさのものを用意してwidhtとheightを1/2にすればいいんだけどさ、これがcssspriteを使うとなるとね...で、これを色々調べると「@2x.css」を用意しましょうとか平気で言ってるわけですよ。んな、バカな!cssと元の画像ファイルを複数用意し、ただでさえメンテナンス性の悪いcssspriteなのに4ファイル更新とか鬼畜すぎるわけですよ。そんなにフロントエンドエンジニアを苛めたいか?大体ね、このフロントエンドエンジニアってのはさ、変だよね、通常言語ってなると1つの言語とSQLとかでどうにかなるわけじゃないですか?それをやれ、HTMLだのjavascriptだのcssだの最低3個を扱わないといけないですからね。これにサーバーサイドの言語にプラスして画像を作るとwこんなことしてると、「@2x.css」の為に「cssと画像の作り直しなんてできるかい!」ってなります。viewportの0.5じゃぁダメなんだよ...facebookとかの外部のボタンは...いや、最初ねtransform:scale(2.0);でボタンを倍にしたんですけどね、iPhoneじゃぁクリックできないわけですよ。Retinaにはbackground-sizeとかを1/2で記述する!!!つまり元々Retinaに最適化してるcssspriteの画像はそのままで、cssでcssbackground-position、background-size、width、heightを半分にすればいいわけ。ところがですよ、通常のcssspriteのオーサリングツールなんてAdobeのFireWorksや各種webサイトのを見回っても、そんなもんないわけですよ。いうことで、いつものように「なけりゃぁ作ればいい」の精神で作りました。scriptを配布すればいいだけなんで、もうちょい機能を付けたり、windowsはGUIにしてもいいかな?って思ってます。興味のある方はデバッグを含めてDLのコーナーからDLして使ってみてください。もったいぶってもしょうがないので、結論、エフェクトscriptに代替するものが使えないので無理くさいorzここ最近、スマフォで動く(iPhoneだけではなくAndroidなど含む)flashに成り代わるツールを探してました。Animator(マルチプラットフォーム/10,395円)http://extjs.co.jp/products/animator/・SpriteStudio(Windowsのみ95,000円)http://www.webtech.co.jp/spritestudio/で、SpriteStudioはHTML5だけではなくUnitiyやCoronaSDKでもにもexportできる、スマフォアプリ開発者にとっては大変ありがたい(?)ツールです。価格も10万円と一見「Adobe製か?」と思うぐらいの強気の設定ですけども。その辺も含めて結構不満はあります。スマホアプリ・コンシューマーゲーム・組み込みソフト向け」「Flashでなくとも、デザイナーだけでアニメ製作」というのは素晴らしいと思いますし、Windowsしかないというのはまだ分かります。phoneの開発をあまり聞きません。iPhoneアプリの開発はxcodeの都合上基本的にはMacがないと開発できません。その辺を差し引いても厳しいなぁ...だって、基本SpriteStudioがないと作成したアニメーションの確認ができないんですよ?上司が非Windows機だったりするときに、どうやって納品確認するんでしょうか?また、クライアントが作った製品を確認する人もわざわざwindows機を用意して約10万円のツールをインストールしないとダメって、flashに比較しておかしくないですか?こんなこと書くと「HTML5に変換すればいいじゃん!」って言われるんですが、HTML5に変換するツールが「cuiしかない」って「デザイナーだけでアニメ製作」のコンセプトと真逆でしょ。エクスポートされたHTMLのjs部分を変更しないといけない。ここも「デザイナーだけでアニメ製作」のコンセプトと真逆。思想は素晴らしいのに発展途上のツールとしてはあまりにも高過ぎるわけです。scriptがないのはいいことじゃない?っていう矛盾が生じるんですけども、flashで「雪を降らせるエフェクト」を手書きで書く人っていないですよね?randomとduplicateMovieClipを使ったスクリプトをコピペで使う人が多いと思います。カードゲーム的なアニメを作っていてデザイナーが「大きさの違う光の玉が集まってくるエフェクト」を再現したいと思ったときに、メチャクチャ大変です。script機能は必要ないかもしれませんが、これを解決するには結局非デザイナーの人が何かしらのリソースを裂かないといけない状態になります。いうか、flashってgotoandplayとかで自分の好きなフレームに飛ばせるわけです。gotoandplayも実際scriptでプログラム記述なんだけど、stopと組み合わせることでデザイナー(?)が意図している位置に動かせたり、止めたりできるわけです。これって凄く重要なことなんですよね、なんというか「ゲーム用の1パーツのループアニメーション」を作ることを前提にしてる気がするんです。flashという表現が一番しっくりくるんですよ。スマホアプリ・コンシューマーゲーム・組み込みソフト向け」「Flashでなくとも、デザイナーだけでアニメ製作」という表現というのはうーむって感じです。デザイナーは色々厳しいぜ?音楽や画像系のクリエーターという人種というのは恐ろしいもので、10万以上の製品をポイポイ買っちゃったりします。それらの製品というのは値段以上に使いこなせないんじゃない?みたいな機能が多々あります。photoshopなんかにはscriptを書く事で色々な作業が簡略化できますが、それを使っているデザイナーさんというのは中々いません。(scriptを書いている人という意味含む)それらのプラグラインや機能を鑑みると色々妥当かもなぁという部分がありますが、イラレにはInkscape、photoshopにgimp、flashにはsuzukaがあるようにフリーウェアというのも存在します。それらのフリーウェアには機能は限定されているものの、かなり使えるツールであるのも事実でクリエーターの裾野を広めてきたのは事実です。音楽にしてもフリーのvstやvstiなんかも数多く存在します。それらと比較した時にサポート体制や、ユーザー数、Tips、使いやすさ、拡張性の存在が1つの決まり手になるわけですが、SpriteStudioにはイマイチそれらの状況が整っているとは思えません。Animatorぐらいの値段だったら納得行くんですけどね。少なくとも、もうちょっと現場レベルの意見を取り入れて且つ、「Flashでなくとも」とか「デザイナーだけで」とか謳うのであれば、Flashが受け入れられて浸透した理由とクリエーターの使い方とかをなんとかしてほしいなぁ。タイムラインを伸ばすのにメニューをクリックしなきゃいけない所とかUI作成用ツールって言うぐらいなら、ユーザーがショートカットキーをアサインできるUI機能の向上をしてほしいです。blogもほぼ1年以上放置してましたが、小ネタができた時にもで書いておかないとダメだなと思って再開することにしました。体壊したら何もできないよね当たり前なんですが、IT業界って厳しいですねー。常に新しい技術や言語が出てきてずーっと勉強し続けないといけない。私も、一応「技術職」のはしくれだそうですが、同じ技術と言っても大工さんの「金槌」や「カンナ」の技術はずっと向上していくのにITの技術なんて「新しい言語や仕組み」が出たらゼロベースに戻る事も多いですね。その分、常に公平なフィールドになるので若手や勤勉な人には有効であるかもしれません。30歳も過ぎて自分の性格や生き方、ペースに合わせた方法を見つけたいというのもあり、今はITだけじゃない生活をしています。(もちろんITもやってますが...)音楽ねたは色々大人の事情があって書けませんが、マジックに関することなんかは書けると思うので、極力テキストにできることはするように勤めます。lintをインストールする10年前に比べココ数年webのフロントエンジニアはただのhtmlだけではなくcss、javascriptはもちろんphpなどのサーバーサイドの言語まで記述しないといけないようになってきました。○○エディタ」のような方も多いと思います。言え、前述した4つの言語を効率よくエディタ上で言語チェックをしたくなるのも当たり前なので、さっそくやってみました。とりかかる前の環境と心構えを先に...流れとしては「各種言語のチェック環境をローカルのみでできるようにする」→「エディタのマクロから呼び出し」→「エディタにレスポンスを表示」になります。OSはwindows環境に限定しますがマクロファイル以外はMacの方Linuxの方も大丈夫だと思います。いうかEmacsやvimでも使えば...(windowsでもxyzzyがあるけどね)ということでサポート(マクロファイルを書いた)するエディタは下記にしました。Creator・サクラエディタ・TeraPad他にもマクロに対応しているエディタであれば問題ないと思います。問題があってですねこんな事を書くのはアレですが環境を作るのがめんどくさすぎます。(特にcss)あと、xamppをインストールしている事を前提としています。c:\直下にlintというフォルダを作っておいてください。lintをインストールまぁ、ココでわざわざ記述するまでもないですが、perlで書かれているHTMLの文法チェッカーです。1.http://www.pythagoras.bz/htmllint/download.htmlにアクセス。2.htmllint.lzhをDLしてください。(windpwsのsjis版がlzhなので必ずlzh版をDLすること)3.解凍したものを「c:\lint」直下にいれる(「C:\lint\htmllint」という構成になると思います。-v」を入れてperlのヴァージョンが表示されていれば準備は大丈夫です。Tools」を選びました。Validator」をインストールこれが一番の山場です、インストールの項目の情報が古いしファイルをDLするのにCVSインストールしないといけないとか色々大変でした。0.ファイル一覧をDLする為にCVS環境を整える...ってアフォか!面倒な方は私がまとめておいったのでこちらをDLしてください。Files\Java\jdk1.6.0_18」(ヴァージョンは環境に合わせて)を追加4.http://ant.apache.org/bindownload.cgiでantの.zip版をDL5.windowsの環境変数のpathに「C:\apache-ant-1.8.2\lib」にantのpathを通す6.0でDLして解凍したフォルダかCVSでDLしたファイルを「C:\lint\css-validator」に置く。7.1でDLしたファイルを「C:\lint\css-validator」の下に入れる8.http://jigsaw.w3.org/css-validator/DOWNLOAD.html.ja内のcss-validator.jarをDL9.DLしたcss-validator.jarを「C:\lint\css-validator」に置く。書いてあるところを「commons-lang-2.6」へ一括置換10-8.「velocity-1.6.4」を「velocity-1.7」へ一括置換11.DOS窓から「C:\lint\css-validator\ant」を実行(無事にbuildが成功すれば大丈夫です)ファイルのDLにCVS入れたりxmlの中身を変えたりで超絶に面倒でした。PHPのチェッカーphpのlintモードを使う一番簡単なのはphpなんですよね、なんせlintモードがあるのでこれは引数を-lやるだけなんで、基本pathを通すだけで大丈夫です。これで晴れて各言語のlint環境が整いました。いうか、JavaScriptの言語チェックにPythonをcssの言語チェックにJAVAをHTMLの言語チェックにperlをってなんだかなぁ...と思いました。マクロファイルについては別途記述します。いつの間にか三十路に突入していました。最近久々にタイピングのしすぎで右手が腱鞘炎になったので改めて自分の環境を考えてみようと思います。いうのも、その時使っていたキーボードはkinesisのFreestyleだったわけで、マウスはlogicoolのG700を使用していました。Keyboard(2011年)になっていたわけです。2006年から2010年までlogicoolのMX-revolutionを使っていました。・高さを(低く)調節できない。これを踏まえて、会社でのキーボードをKinesisのfreestyleにしてみました。今回はこのキーボードで腱鞘炎になったわけです。腱鞘炎になったかを考えてみた結果、パームレストとハの字の角度、日本語とプログラムタイピング、ショートカットキーの割合だと思いました。左手小指と右手の矢印キーへの移動がネック?個人的にphpが嫌いな理由の1つに変数宣言に「$」を使わないといけないというのがあります。最近でこそ、右手でShift左手で「4」を押すタイピングに切り替えていますがキーボードと手の大きさによっては左手の小指の負担は半端ないなぁと思います。あとquitとしてCrtl+qやCtrl+wを使う機会も多く左手だけで作業をすると小指を中心に親指側を伸ばす動きになり負担がかかります。右手は矢印キーとdel/backspaceキーの移動がネックになっていますね。手だけの問題じゃないかもしれない...あとは椅子ですかね、エルゴノミクスチェアーが気になってますが、これはキーボード以上に高い(まぁ質量的にしょうがないですが)快適な環境を築けるように頑張らないとなぁ。曖昧すぎる言葉だなぁ...私は、IT業界では変わった経歴を持っていて、ギターの演奏でお金をもらって生計を立てていた時期もあれば、クロースアップマジックのショーをやったり、書道の師範の資格持ったり...自分で言うのも変ですが器用貧乏より1つ上のランクの本格派の器用貧乏です。世に言うプロ(プロフェッショナル)というのは意外に簡単になれるもので、プロとは名乗ってるものの下手すりぁアマチュアの方が全然凄かったりするわけで、私から言わせてもらえばそんなのプロとは言わないわけですね。musician'smusicianと言う言葉があります。ネットの普及やyoutubeやニコ動による動画共有で、マニアックなものが世に広まり、また素人さんでも簡単に自分のスキルを仮名で好きな時に表に出すことができる時代になりました。ここでは、一般的に優れたスキルを持つ人を「ネ申」と表現することがありますが、本当に「ネ申」なのかと思う事があります。いや、文句を付けているわけではなく、本当にそれは「ネ申」なのか?と。プロの目から見たら意外と「普通」なものが多いんです。ネ申動画の8割ぐらいは「普通〜ちょっとクオリティどうかな?」ってもので、残りの2割が本当に本職の人が見ても「ネ申」だわってのなんですよ。お前が「ネ申」って人はどんな奴か?という話になるわけですね。「偉そうに言ってる割りにお前が大した事ない人を挙げるんちゃうか?」と。神谷哲史さんの「龍神」をご存知でしょうか?これは本当に「ネ申」と思うのですよ。少なくとも、アマチュアは全然真似できない&素人も価値概念が変わるぐらいのものじゃないかなと思います。私は同業者に「ネ申」と呼ばれる人を数名見て、一緒にお仕事をさせていただく機会もありました。(まさしく「神々の頂」)せっかく自分が目指す道があるのなら、素人と同業者が見ても一発で分かるスキルを身につけて○○ならこの人と呼ばれるぐらいになってみたいなぁと思っています。「すげぇ人」から「職人」へ、そして「ネ申」の頂は文字通り途方もない努力とセンスがいるだなぁと思った次第でした。自分がプログラムを遊び的に書けるようになって(少なくとも仕事で使うようになって)数年が経った。22歳まで音楽漬けで、派遣を経て23歳で入社したのがCompsiteという会社で当時はドワンゴの100%出資会社で入社間もなくドワンゴに統合された。少なくとも入社当時はタッチタイピングができずcssとhtmlが書ける程度だった。(ドワンゴは去年退社致しました。)で、ドワンゴに入社する直前ぐらいからプログラム的の重要性を知り、勉強しようと思った。それより以前にhtmlとcssを勉強する際にperlにも手を出してみようとvinelinuxを入れて失敗してみたり、自分には一生無理だと思っていた。いうか、プログラムができる人間なんてのは自分には無縁で、人種自体が違うんだと思っていた。派遣時代に出会ったデザイナードワンゴ入社前、派遣をしていた時短期契約でいくつか会社を周る機会があり、その中で大きな転機が訪れた。Aさんは、Adobe系のphotoshop、Illustrator、InDesignはもちろんCorelのPainterから当時は珍しかった(と思う)MAYAやshadeの3Dモデリング、ドット絵からfontの作成までなんでもできる人だった。作品の作成スピードとクオリティが半端ないという、まさに「プロフェッショナル」だった。当時の自分からすればとんでもない人であり、30歳を手前にした今でも彼女と同等の高スキルのデザイナーさんを現場で見たことはない。デザイナーなのにプログラムをやっていた。そのAさんが、昼休みにエディタの話をしていて、デザイナーさんでもエディタにこだわるんだなぁと思っていたら、「プログラムを書くのに適したエディタは何だろう?」という話だった。デザイナーの人がプログラムをやるという意味が分からなかった。転職でもして、プログラマーにでもなるのか?と思った。ところが、話を聞くとプラグインやマクロを書くという場合に必要になるという事だった。当時の自分は、マクロという言葉を理解しておらず、プラグインというのは「DLするか、買うか?」の二者択一しかなく、「自分で作る」という概念は存在しなかった。「なぜデザイナーがプログラムを?」その派遣先を辞める際に、その質問を投げかけてみた。「これぐらいできないと、IT業界でデザイナーとして食べてますなんて言えないよ。」これらの言葉でプロの厳しさを知ったと同時にIT業界で生きている自分の中での金言になっている。ショックと目標ある程度CG技術を学んだ人間なら分かると思うが、まず紙に絵を書くのと同じクオリティでタブレットとpainterで水彩や、油彩のように書けるようになったり、photoshopを他人が分からない修正を行えるようレタッチできるまでにはそこそこの時間がかかる。それにベジェ曲線でpathを操れるようになり、やっと少しまともな2Dの「絵」が書けるようになる。そこにフィルタや空間認識能力を上げて行く事で2Dでのリアルモデリングや3Dができてくるようになる。ドット絵やfontを作成する技術は、これとは別だし、そこまでのオールラウンドなスキルを業務レベルでできるようになるのにそこそこの時間がかかる。彼女は、これにプログラムができて当然で、それで半人前とは途方もない道だなと思った。同時に、デザイナーでもプログラムスキルが当然ならば、時分も身に着けなければならないと思った。PCに使われる人より、使う人になれ。それから数年経ち、プログラムがある程度分かった時、業務時間の効率化にはマクロやプログラムが重要だと思った。IT業界以外では○さんが10年かかる仕事を寝ながら一瞬で終わらせることができる唯一の業界だと思う。なるにはPCを本当の意味で使える人にならなければならない。本屋さんで数年ぶりにAさんに会った。偶然に、IT書籍のコーナーでAさんに遭遇し、自分が手にとってる本を見て「お、かなりスキルアップしてるようだね」と言われた。そりゃぁ、HTMLとCSSしか知らない自分と今の自分じゃさすがに戦闘力違いすぎる。「今、何やってるの?」と言われたのに、今までやってきた事と、当時の言葉が印象に残ってると言うことを伝えた。(もちろん今の仕事の内容も。)「そっかプログラム、サーバーやDBの知識も結構ついたんだねぇ。業界で生きる人間っぽくなってるじゃん」と言われて少し嬉しかった。いうか、普通にさくらのVPSの話をされた時に、デザイナーと話してる気分がしなかった。あと、「kuro君はHTMLとCSS書く速度だけは異常だったからねぇ、今のkuro君ともう一度仕事してみたいよ」と言われた。ぶっちゃけ、心の中でガッツポーズしたのと同時に、もっと頑張らないとなぁと思った。女性でデザイナーでプログラムが書けて、cuiでバンバンサーバーをイジれる人なんか、こう書くと非常に誤解を招きそうだけども、事実だからしょうがない。仕事のスピードを精度を上げる為に、人にお願いする際、専門用語でお願いした方が早い場合があるし、その仕事が分かると依頼もしやすく、気持ちが分かるので衝突も起きにくい。今日は、プロフェッショナルという言葉を改めて考えさせられたし、プロフェッショナルになるべく頑張ろうと思った。公と私を分けたい人なんです。久々に真面目に書くか...10代〜20代前半をギターに費やしてきた自分が、IT業界に入ったわけですが色々な意味で公と私を分けたいと思ってます。自分にとって、働くために最大のパフォーマンスを発揮する為には「私」の部分に雑音がないことが一番なんです。私の部分を知ってる人に向けて、発言してることが公になるのは嫌だし、お互い良くないことになりそうですしね。音楽やってる人ステージに立って派手なパフォーマンスする姿がありながら、家では練習する姿がきちんとあってとか、マジシャンが家でずーっとトランプをシャッフルする姿を見せたくないのと一緒です。要約すると冗談半分で無駄にプライベートの部分に触ると、ウゼーって思って、滅茶苦茶テンション下がってやる気がなくなるので仕事のパフォーマンスが落ちます。最終的に「父親が、高校時代に死んで〜」って話をされる方も嫌だろうし、仕事はきんとやるのが最低限の礼儀だと思っているので...なんか、そういうオーラは出してるんですけどね、たまに空気が読めない人がいるんで困ります。ipadからこんにちわ。ipadが届いた記念に久々に書き込みをしてみることにしました。bluetoothのキーボードが使いづらいorz普段エルゴノミクスキーボードを使ってる身としては、不慣れな環境なので四苦八苦です。kindle2との比較感想を書いてみようかと。別デバイスなんか、一部ではkindleとipadの両方の信者が罵り合うような感じがありましたが、明らかに別の目的で作られてますわ。まっず、kindleは軽いし充電が長持ちします、ただし完全に閲覧のみで音楽を聞くこともできるのですが、容量が2Gということもあり向いていませんね。ipadは読書もできるデバイスで、重いし、充電が持たない、ただ読書以外のことがたーくさんできる総合デバイスだと。おかげでiphoneを使う時間が滅茶苦茶減りました、まぁ漫画はkindleで全然いいんすが、カラーや解像度が求められる書籍はどうしてもipadに軍配があがりますね。文書を書くデバイスとしていまいちなのかもしれません。フリック入力ができるようになればもうちょっと違うのでしょうが日本語入力はちょっと厳しい感じがしています。そこまでいくのならPC買えよ!って話しでしょうね。使いこんでみると感想も変わって来ると思うので暫く使い続けてみてまた感想でも書いてみようかと思いました。IDEに慣れてると駄目だねorzRubyでよくある「1〜100までの素数を求める」ってのを書く機会があったので5分で挑戦してみました。アルゴリズムはあるのは知っているのですが、一応単純に高速化とか考えずに配列でチェックしていく方法で実際に書いたコード。nendendendRubyらしく書きたいので、意地でもforは使わないまぁ偶数でとか、初期値は2からでいいんじゃないか?とかは一応「1〜100」という前提があるのでご愛嬌。今思ったけど100.times使うと、fizzbuzzで致命的なことに気がついたmax値の100が出てこないじゃないか!ビジネスでphpばかり書いていてRubyの詳細な部分を忘れている自分にガッカリした。phpでやるとforeachで廻してarray.findの記述が長くなるし変数に$マークや;を書く時間がもったいなかったのでやらなかったのが本音だったりします。