Solitaire

仕事をしていて、HTMLを扱う機会が当然多いんだけれど、ロジック的な部分での中に値を出したり出さなかったりする場合、タグの中が空なのは基本的にだめだよ。とデザイナーの人に言われたので、 などを入れて対処したりしている。
これを入れないとデザインが崩れるブラウザがあるそうな。
この辺りは、クォリティーを上げるためのやり取りなので、俺的には面白いなぁって思えるんだけれど、ぶっちゃけ細かすぎだろ？ｗ
他にもはまったのは、
<img id=”png-img” src=”/images/img.png” alt=”png image” />
というタグを使うとき、img と id=”png-img” の間のスペースが全角だっただけで表示されなくて、あれー？って結構悩んだ。デザイナーの人に聞いたら、直ぐにスペースだと気づいていたけれど・・・全角スペースをコード中に入れるなんて普段からしていないんだけれど、何故かそこだけ入れちゃったみたいなんだよねー
後は前に聞いた事があるのが、ブロック要素とインライン要素というのがあって、包括関係とか色々あるらしい。そこまできちんと把握してHTMLを組む人と一緒に仕事をした事があるんだけれど、確かに殆どのブラウザでデザイン崩れは起こさなかったし、HTMLをテンプレートへと置き換える時も凄い楽だったんだよね。
綺麗なHTMLを書く人っていうのは、プログラムでいう、綺麗なソースコードを書く人となんら変わりないなぁと思った。
たまに、tableタグを使うと、出し分けが難しいだろうから、避けている。っていう話を聞くことがあったりする。
何で？って聞くと、tableタグで要素を並べていく場合、カラムが5個で次のレコードに移る時、全ての要素が8だったら、足りない2個をきちんと空のテーブルで埋めてあげないといけないから。という事らしい。
まあ、そんなのはWebプログラマーやっていれば誰だって経験してる事だろうし、気にしないでtableタグ使ってくれていいと思うんだけれどね。そもそも、そういうロジックすら書けなかったらプログラマーとしてやばいし・・・ま、テンプレートにそういうのを書かないといけないのが嫌って人も多いだろうけれどねー
そういう時は、Djangoみたいに簡単にfilterとかtagを作れるフレームワークを使って、そこにロジックを逃がすのが無難かなと俺は思ったりする。
って、最後は話が変わったけれど、Webのデザインをする人と一緒に仕事をすると、色々と細かい部分を求められて、その分自分のHTMLに関する知識も深まっていくのかなぁとか思ったりｗ

やべぇ！！面白い！！
っち、これからは、グラフィックとかアニメーションのプログラミングが面白そうだなぁ・・・とちょっと思ってしまうくらいに、新しい分野だから、面白い！！ｗ
職場のFlashな人達が作業しているのを前に見たことがあるので、いじっていて、あー　なんか似ている。と思った。Silverlight2では、Storyboradっていうんだけれどね。Flashだとなんだろう？何はともあれ、TimeLineか。
始点の状態と、終点の状態を記憶させていくと、その間を勝手に埋めてくれるという素敵仕様。
ふ～む、なんか、クォータニオンのAPIいじっているみたいな感じだなぁ
あれも、始点と終点の状態を行列で指定して、後はくるくる3Dモデルが回ってくれるし。
そもそも、VisualC++でWindowsアプリを組んだ事があるから、Silverlightで一番の難関がアニメーションなんだよね。
他のコントロールとそれに対応するクラス、ハンドルメソッドに関しては、殆ど変わらない構造をしているし。
後は、C#側からの動的なコントロールの作成方法を覚えれば良いかなぁ～
それが出来ないと、Webアプリケーションとして使えないし・・・ま、それも、VisualC++で簡単に出来ていたんだから、C#で難しくなっていたらおかしいし。
ざっと見た感じ、コントロールのグループ化とか、リソースファイルの扱い方とかは、そんなに変わっていないみたいだなぁ～
ちなみに、今読んでいる本はこちら。
日本語版が見つからないので、英語の本だけれど。Silverlight2自体がβだしね・・・ま、気にしないｗ
あ、ちなみに、Silverlight の 1 と 2 はまったく別物だと思ったほうがいいかも。
アプリケーションを作るときも、構造からして全然違うし、出来上がるものも全然別物。

前半部分が、Expression Blendでの簡単なコントロールの作成。
後半部分が、VisualStudio2008でのc#側のアプリケーションロジックの作成。
と大まかに分ける事も可能だけれど、XAMLがサンプルとしてちょくちょくでてくるし
そんなにきっぱりすっきり、二つの分野で分けられていないねぇ
デザイナーとプログラマーで分業する時なんかは、一度自分でどちらも経験しておかないと
結構はまりそうな・・・
ま、デザインは出来ないけれどコントロールを配置して、色を染めて、画像を貼り付けて、アニメーションでくるくる動かしてみるか？くらいは出来ると思うので
もうちょっと色々やってみよう。そうしよう。
そうそう、Expression Blend 2.5 と VisualStudio 2008 両方立ち上げて作業しているんだけれど
2画面使う事前提だよね・・・デュアルディスプレイ環境だから別にいいんだけれど・・・
それでも、1920×1200 x 2画面だから、困ってないけれど、会社じゃこれは無理だなぁ
ソースコードの表示切替で超いらいらしそうｗ

Python + Django + MySQL + openSUSE?w で集計システム作ったお！！
最初に言っておく。か～な～り、ださいｗｗｗ
まあ、とりあえずはどんな感じか軽くデモを。
integra
まずはユーザー登録画面。
メアドとユーザーネームとパスワード入れたら、メールが飛んでくるはずなので
後はぽちっと押せば登録完了。
たまに、受け付けてくれないメールサーバがあるかも？
その辺りは・・・サーバ屋さんじゃないのでようわからんｗｗｗ
で、ログインして、Task List というメニューを選ぶとこんな画面に出ます。
フォームにこちょこちょっと入れて、ぽちっと押すとタスクが出来ます。
以前のタスクの end date に関しては、新しいタスクを作成した時点で自動的に埋まりますわ。

作成するとこんな感じになります。

end date は自分で設定することもできるお

次は、Attributeとはなんぞや？ってのにお答えします。
ぶっちゃけ、ただ単に属性情報を付与して、後で集計しましょうよ。ってだけ。

集計画面はこんな感じ。
例えば、一つのタスクが、ご飯タイム、休憩と二つの属性を持っていたら集計中にそれも引っ張りだしてきて
そちらの属性の集計結果も一緒に出してくれます。
属性が被ってるタスクのしか集計しないので注意。
属性被ってなくても集計したいなら、属性名クリックしてね。リンクで集計しなおししてくれるようになっているので。

次は、日付と属性でタスク集計。
属性指定することも、指定しない事も出来るよ。
一応、月単位での集計機能もメニューにリンクあります。面倒なので割愛ｗ

次は、帳簿機能です。
Measure とか Numeric 系がそれ。
まず、帳簿名、帳簿単位、整数 or 少数を選びます。
整数、少数の選択肢に関しては、更に増やすこと出来るけれど、時間はタスクで計れるし
他になんか要る？って状態なので、要望あれば追加するかも？っていう程度。
model class, form class とテーブルを追加するだけで、ロジックには変更を加えないで
バリエーションを持たせられるロジックになっている（はず）なので・・・
システムメンテという作業は必要だけれどね。さすがに、データベースの中の値だけで、これは増やしたくなかった。

で、後は、タスクのMeasureで、Addをクリックすると、入力できます。
下のほうには、同じタスクの既に入力済みの値が出てきます。

こいつも集計が取れます。
総和と、平均値と、いくつの要素を持っていたかが出ますわ。
ちゃんと、日付で絞り込めるお！！

はい。最後に、タイムゾーンの設定。
pytzの導入に寄り、各タイムゾーンを、データベースの値更新するだけで、対応できるようにしてあります。
何も設定しないと、UTCになります。
データベース的にはUTCで入っているので、タイムゾーンはころころ変えても問題なし。

作ってみて、やっぱりPython + Django は開発効率が良いね。
前に作った、JQueryばりばりのやつとかと比べてかなり機能削ったけれど、追加機能分は7人日も工数かかっていないと思う。
まあ、タスクの追加以外は全部今回作ったんだけれどね・・・ｗ
で、ここまでのサーバサイドの部分に関しては、オープンソースでライセンス GPL v3 で公開してたりします。
まー　誰も使わないだろうけれど・・・ｗ　参考になるほど綺麗なソースでもないし。
ここからの拡張作業は、Silverlightでのユーザーインターフェイスの作成。つまり、クライアントサイドとサーバサイドまったく別に組みます。
HTML版は拡張するのだるいので・・・もういいお＞＜；
Silverlight版はソースコード公開するかどうか解からないけれど、とりあえず、作っていこうかな～

って事で、手に入れたので、Silverlight2がやれる！！
ちなみに、Silverlight2正式対応版は、ExpressionBlend2.5とかなんだけれど、まだ評価版。
で、パッケージにはちゃんと、Silverlight2に無償で対応。っていうのが書いてあるので、安心。そのうちバージョンアップかかるだろう。
これで、タスク管理用（他にも色々記録できるように解良予定）に作っているシステムのクライアントサイドを作ります。
JavaScriptが嫌いな俺は、JQueryを使っても、AjaxとかでUIを作る気がしないのです。
仕事ならやるけれど、趣味ではやりたくないｗ
だったら、Flashでいいじゃん！？って思うだろうけれど、Flashはありきたりすぎてつまらない。
そして何より、最近のFlashは、明らかにプログラマーよりもデザイナー向きで、プログラム知らないデザイナーでも作れると思う。
職場のFlashチームを見ていてそう思うんだよね。
それに、元々VisualStudioを使っていたのもあるし、DreamWeaver嫌いだし、AdobeよりもMicrosoftでしょう。とｗ
実際、Expression Webは、プログラマー的にはDreamWeaverより使い易いツールだと思う。
そういえば、DB magazineにSilverlightの記事と、Djangoの記事があるから読んでみるかな。
Djangoの記事は柴田淳さんが書いているらしい。
ちなみにこのパッケージ、VisualStudio2008 StandardEditionも入っているから、VisualC++とかも使えるようになる。
なかなか良いパッケージだと思う。

そのまんまで、SilverlightでZoomIn/ZoomOut処理をやってみた。
デザイナーの人が作ったベースに対して、イベント付けを行ってZoom処理用のAPIを呼び出しただけという
極めて何もやってないソースコードです。
何もやってなさすぎて恥ずかしいんだけれど・・・ｗ
画像の上で左クリックをすると拡大して、画像からマウスを外すと縮小します。
Page.xaml
Page.xaml.cs
で、動きはこんな感じになります。
http://silverlight.redhawk.jp/sandbox/multiscale-sample/TestPage.html
う～ん、Silverlightをやるには、アニメーションAPIとイベントAPIを覚えれば、それなりのアプリが組めると思うんだけれど
その認識は間違っているのだろうか？
問題は、そのAPIとかClassとかを把握するのが、まとまったドキュメントとかがないので
勉強コストが結構かかる。っていう事です。
ただ、Flashよりもよっぽど楽じゃない？
って思うけれど・・・どうなんでしょうね。
Flexに似てるなぁ～って思うけれど・・・

さて、昨日から記事を書いている、Silverlight ですが、アニメーションのサンプルを軽くアップしました。
コードは余り綺麗じゃないです。。。
全部トグルを作ってしまえば、イベントハンドラの中はすっきりするんだけれど
このClassのラッパーを作っても、これからどうなるかわからないので、とりあえずは簡単に実装してみた感じ。
このアニメーション処理はよく使うから、簡単に切り替えが出来るようにしたい。
っていうのがあれば、ラッパークラスがんがん作ってしまったほうがいいと思う。
さて、そんな訳で、まだ サーバサイドへアクセスするような処理は書いていないので
簡単にサーバへとデプロイできました。
こんな感じです。
TestPage.html
もうちょっと、こういう動きをさせみたい！！
とか、色々決まってくれば、サンプルでもそういう動きをさせて公開してみたいなぁ
何かしらサービスを作るときは、機能毎には出すかもしれないけれど
作ってる途中ではソースを出さないかもです。
だって、それじゃ完成したとき面白くないだろうしｗ
完成後に、製作した時に使ったリポジトリを出すのも面白そうだなぁ
どいう工程で作られたのかが分かるしね～

早速、T-STUDIOさん から、頂いたサンプルをいじってみたり。
http://redhawk.jp/viewvc/sandbox/silverlight/AnimationSample/
正直、XAML ファイルを見ても何がなんだか分かりませんｗｗｗ
なにこれ！？ってくらい、奇怪な文様を描いていますが、そこはスルーです。

で、これにこれくらいの変更を加えてみました。
Page.xaml
Page.xaml.cs

まだ、Silverlight アプリの設置の仕方が分からないので、どう変わったのか動的に見せられないのが残念だけれど、ボタンがまず一つ減って、一時停止ボタンが二つの機能を持ってトグル化してあります。
Silverlight と C# 初心者の自分でもこれくらいなら簡単に出来ちゃうので、結構良い SDK と IDE だと思いますね。
相変わらず、XAML はわけ分からない模様にしか見えないけれどｗ
他にもいくつかプロジェクトを貰っているので、ちょこちょこいじってみたいと思います。
ある程度 XAML の基礎っぽいのは分かるんだけれど、そこは分業するのに困らない程度だけ。っていう感じかな。
それ以上覚えても、コラボレーション前提の企画なので、余り意味が無いと思う。

自分はさっぱりと言っていいほどデザインのセンスもないし、デザインをすることもへたくそなのです。
そんなのでは Silverlight のアプリケーションを作るにあたって、ちょっと厳しいと思っていました。
そこで今回 Microsoft がプレゼンテーションでよく謳っている、「デザイナーとプログラマーのコラボレーション」で一緒にやらない？という話を、T-STUDIOさん から頂いたので、ありがたく一緒にやらせて頂く事になりました。
同じ職場なので、いつもお世話になっており、今現在愛用している電王パスケースも、T-STUDIOさん に頂いた物だ。大切に使っております。たまに、テンションがあがるとフルチャージとかして遊びたくなる一品です。
さて、そんなコラボレーションで作る Silverlight アプリケーションですが、まだまだ世の中に公開されている物も少なく、ノウハウも少ないです。
ですが、まだちょっといじってみただけですが、Windows アプリケーションを作った時の経験を生かして簡単なカスタマイズをする事は可能でした。
ドキュメントも揃っているのと、VisualStudio 2008 の使いやすさを考えると、十分に Flash に対抗出来る物だと思っています。
その辺りを、今回のコラボレーションでプレゼントしていければ良いな。と、個人的に思っていたりもします。
まだ、何を作るかは具体的に決めていませんが、既にお互いに勉強しているので、やる気は満々なのかな？ｗ
という訳で、楽しい企画にしたいと思います。

http://silverlight.net/world/
こんなサイトがあった。
っていうか、公式だけれどｗ
このページで紹介されている、Silverlight アプリもかっこいいんだけれど
紹介ページ自体がかっこいい気がする・・・ｗ
早くこういうの作ってみたいねー
楽しそう。

Visual Studio 2008 Standard が手に入ったので、早速入れてみたんだけれど・・・
can’t install res ????.dll とかエラーメッセージが・・・
Windows Vista の言語を英語にしているんだけれど、それが原因！？
とか思って、一時的に日本語にしてみたら、うまくいった。
まじかよ！？ｗ　文字化けするような名前で、dll 作らないでくれ～～～
で、Visual Studio 2008 の目玉でもある、プレビュー画面を使いながらちまちま操作をしてみた。
ふ～む、なんかちょっとだけいじったことがある、Flex みたいな感じだねぃ
構文っていうか、使い方は殆ど、Windows アプリを組むのと同じみたい。
イベントが Windows アプリの場合は、message って形で渡して、それを dispatcher で配って。みたいなしていたんだけれど
Silverlight の場合は、コンポーネントの定義をする、Page.xaml に EventHander メソッド を書いて
C# だったら、 Page.xaml.cs に EventHandler メソッドを定義してあげるだけ。
Event を呼び出した Object と、Event の Class がそれぞれ渡されるので後はそれを使って処理をしていくだけ。
ってか、なんか、C# のキャストは気持ち悪い。
Canvas c = sender as Canvas;
がキャストみたいだけれど・・・う～ん、まあ、分かるからいいかｗ
とりあえず、ちまちま遊んでみるか。
リポジトリはこちら。まあ、まだ大したの作っていないので、全然だけれどｗ
http://redhawk.jp/viewvc/sandbox/silverlight/