Tracのデザイン

TracLightningをバージョンアップしたことにより、Themeプラグインが有効になり、簡単にデザインがカスタマイズできるようになりました。

そこで、簡単にデコレーションしてみました。

方法としては、TRAC_ADMINを持っているユーザでログインして管理画面に。

左のメニューからTheme > Customize:Advancedを選択すると、スタイルシートを入力するテキストエリアがでてくるので、好きなようにスタイルシートを記入しましょう。

サンプルとして、私は以下を記入してみました。

h1 {

border-left: 9px solid #ad2021;

margin-bottom: 0px;

padding-left: 0.5em;

font-size: 120%;

font-weight: bold;

margin-top: 2%;

user agent stylesheet

display: block;

margin: 1em 0px;

}

h2 {

border-bottom: 1px solid #ad2021;

border-left: 5px solid #ad2021;

font-size: 14px;

font-weight: bold;

margin: 0.6em 10% 0px 0.4em;

padding: 0px 0.5em 0.1em;

}

h3 {

border-bottom: 1px solid #ad2021;

font-size: 12px;

font-weight: bold;

margin: 0.6em 10% 0px 0.4em;

padding: 0px 0.5em 0.1em;

}

すると以下のような表示になりました。

ｈ４もつかう人は設定するといいと思いますが、とりあえず。

会社のTracをバージョンアップ

ここ１年懸念してた、会社のTracをやっとこさバージョンアップしました。

とはいえTracLightningなんで、お手軽お気楽なんですけどね。

いままではTracLightning2.2だったところを2.4.2にあげました。

週末の誰もいないであろう時間帯に会社にVPNでつないで作業。

2.2のサービスを落としてからアンインストールして、2.4.2のインストーラーを実行。

特別なにごともなく、バージョンアップできました。

相変わらずすばらしい下位互換。

とおもったら、デフォのtrac.iniを保存しておくの忘れていて、共通に設定してたやつが、全部消えちゃった。

ファイルは以下のファイル。

C:\TracLight\python\share\trac\conf\trac.ini

とはいえ、たいした設定はなかったのですが、影響はでかいので再度設定。

設定しなおした値は、以下の2点。

• チケットの開始日と終了日を入力するカスタムフィールド

[ticket-custom]

due_assign = text

due_assign.label = 開始予定日

due_assign.order = 1

due_close= text

due_close.label = 終了予定日

due_close.order = 2

complete= text

complete.label = 進捗率(%)

complete.order = 3

• チケットの変更をメールで送信させるための、共通の設定。

[notification]

admit_domains = hoge.co.jp

always_notify_owner = true

always_notify_reporter = true

smtp_enabled = true

smtp_from_name = Trac

smtp_server = postman.hoge.co.jp

以上で現状問題ありません。

2.2からだとjavascriptも最適してくれているので、表示が速くなったとまずまずの評判です。

個人的にはTraMも気に入っているのですが、以前の一覧になっているのが良いという声もあって悩み中。
たしかにウチの場合、WikiとSCMとしてしか主に利用されていないので恩恵はかなり薄いんですよね。

もったいないけど、自分の伝え方にも問題あることは認識していますです。ハイ。

サイトデザインについて

先日のスケッチボード法にてターゲットとなったサイトデザインなのですが、前回の参加者が再度収集してる時間と場所がなかったので、既存のラフをA4用紙6枚程度にプリントアウトして、各メンバーに廻して付箋でツッコミを入れてもらう形式にした。

デザイナの主メンバの方に最初に記入してもらい、一人ひとりに廻してもらいました。

前回のミーティングの意識が強いのか、「みんなで作り上げる」感覚が共有できてるようで、

比較的すんなりと理解および、記入をしてもらうことができた。

最後にデザイナの方の手元にきてまとめていました。

直接ヒアリングしたら上々の評価でしたが、本音かどうかわかりません。

本当にやりたかったプラクティスは以下に

1. ２チームに分かれる
2. チーム別にラフデザインを大きめの紙にプリントアウトして壁に貼る。
3. いっせいにツッコミを付箋に書いて貼る。
4. チーム内で各自のツッコミを説明したりして集約・ブラッシュアップする。
5. 説明者残して、ほかのメンバーをチーム間でスワップ。
6. 説明してもらい、質疑応答。
7. 移動した人たちはもとのチームにもどり、説明者にフィードバックをもらう。

という感じ。30分程度でも終われそう。

スケッチボード法 試してみた

昨年の10月にすくすくスクラムのワークショップで学んだスケッチボード法を会社のプロジェクトで試してみた。
ちなみにその時のすくすくスクラムのレポートはこちら。
スケッチボード法等の詳細な紹介は上記リンクで確認していただきたい。

で、今回なにを目的とするのかというと弊社で進行中のモバイルサイトのサイトTOPデザインについて品質改善。

用意したもの

• 模造紙２枚（※今回は四六判を半分にして２枚用意）
• A4紙８枚
• ペン
• 5cm x 7cm の付箋紙 ６０枚程度
• お菓子（時間がなくアメしか用意できなかった）

事前準備

• プラクティスを記したプレゼン資料を作成。
• 模造紙はあらかじめ壁に貼りつけておく。（今回はガムテープで貼った）

プラクティスとしては以下の手順

1. 参加者は8名なので4人のチームを２つ作成。
   アイスがてらジャンケンを利用したチーム分け。
   
2. A4の紙を縦横3つ折りにして9マス作成。折り目に沿って線を引く。
3. 上記の紙を各チーム3枚作成。の予定が4枚作成されるがそのままスルー。
4. 用意したサイトに関するビックキーワード３つをセンターのマスに書いてもらう。
   残り一枚はフリーワードを。
5. 各紙のセンターワードから連想するワードを一つ、周りのマスに書き込んでもらい、隣の人に渡す。（時計回り）
6. 上記をすべての紙のすべてのマスが埋まるまで繰り返す。
7. 全部のワード（９x4=36ワード）から注目すべきキーワードを３つ選ぶ。
   ※ここで３において、やっぱ３枚にしとけばよかった、絞りづらそうだった。
8. 選んだキーワードからさらに連想できるマーク（アイコンや擬音）を付箋に書いてもらう。
   ※ 最悪、文字表現もOKとしたがやっぱりNGにするべき。
9. 付箋に書き込むごとに壁の模造紙に貼ってもらう。
   書くごとに席を立つことができるので全体的に動きがでてくる。地味に良い。
10. 一人当たり５枚以上は書いてもらう。
11. 全員に立ってもらい、模造紙の前に集まって付箋紙を簡単なグルーピング。模造紙の周りに貼り直してもらう。
12. 今回はモバイルサイトなので模造紙に大きな縦長なボックスを書いてもらい、デザイン開始。
13. 付箋にかいたアイコンを利用して模造紙に貼ったりしてデザインを作成していってもらう。
    ここでは自分から積極的にアイコンを利用したアイデアの出し方を見せていったが、みんなのエンジンが掛かるのに多少時間がかかった。
    
14. 作成し終えたら、代表者を決めてもらい、その人意外の人をチーム間でスワップ。
15. 代表者は簡単に自チームのデザインを説明。スワップメンバーは前向きなツッコミをする。
16. 各チームに戻ったら、代表者はどんなツッコミがあったかをフィードバック。
17. 終了

終えた時、メンバーの反応は良く、楽しくコンテンツのことを考えることができたとのこと。

しかし残念ながら、既存コンテンツに対してのアプローチには結びつかない結果であった。

うん・・・まぁそこに持っていこうとしたんだけど、ちょっと考える時間が足りなかったんだ。ごめんよ・・・チームのみんな。

自分の準備不足です。

すくすくのページにも書いてある通り、このプラクティスはそのままだと
「自由な発想と緊密なコラボレーションを促し、優れたユーザーインターフェイスとユーザーエクスペリエンスを素早く実現します。」
なんだ。既存のデザイン的な向上ってのには難しいんだ、

すくすくでのワークショップをほぼそのまましてしまったので当然の結果なんだけど。

ごめんなさい。

ここでひとり振り返り。

• Keep
  進行自体はスムーズであった。全部で７０分程度できた。
  参加者のコミュニケーションは取れていた。
  
  
• Problem
  既存のサイトへのアプローチがなかった。
  途中、先が見えないのでどうしていいかわからないという声があがった。
  A4の紙３枚にといったのに４枚にした。
  変なタイミングで勝手にWCやドリンク取りにいかれて停滞する時間があった。
  お菓子が不十分。
  
  
• Try
  休憩をあらかじめ明示する。
  既存の参考デザインを大きめの紙に出力してそこに今回のプラクティスの後半（８〜１０あたりから）を適用する。
  ざっくりとでもアジェンダを明示する。

今回は直接なアウトプットがだせなかったが、他のプロジェクトで流用したいという声もあがり、どこかで今回の意味が効果があると思っている。

とりあえずの第一歩。になっただろうか。

またリベンジの機会をいただけそうなので、Tryに書いたことを実践してみる。

MacBookPro購入した

ねんがんの　まっくぶっくぷろを　てにいれたぞ

というわけで買いました。
いままでは勉強でPCが必要になると会社から借りてもっていったのですが、自分風にカスタマイズできないし、そもそも開発に向いていないので、Hackthonとかだときびしかったのです。

というわけで家人におねだりして数カ月だったわけですが、なんとか承諾をいただき、購入することに。

さっそくヨドバシにいって購入。
持ち歩くので、サイズは１３インチのやつ。
Windows起動も前提なのでちょっとお値段はりましたが高いやつの方にしました。

しばらくは節約モードの生活になります。

第0回 Webkit/HTML5勉強会

本日はHTML5_developer_jpのコミュニティを管理されている白石さん主催の、「第0回 Webkit/HTML5勉強会」がありました。
場所は白石さんの会社㈱あゆたの事務所を借りて。

内容としては、Webkitで動作するHTML5/CSS3で書かれたソースをみんなでリーディングするという内容。
出席者はATNDで応募された方7名と、GoogleAPIExpertの羽田野さん、あゆたの代表取締役の毛利さんと白石さんの10名。
一般の方は応募された方の半分しか来てませんでした。雨とはいえ残念。
キャンセル待ちが15人はいたんですけどね。もったいない。

リーディングしたソースは以下の二つ。

・http://webkit.org/demos/sticky-notes/
・http://web.me.com/t_trace/oursphere/

読む条件としては、WebkitのNightryBuildtってことで以下から急遽DL
http://webkit.org/


最初はSticky-note。付箋の簡易Webアプリケーション。デモってことでそんなに高機能じゃないです。
ざっと使っていた技術は
・WebDataBase
・CSS3/Transform
付箋を閉じるときのエフェクトがTransformでShift押しながら削除するとゆっくりと消えるとか、リーディングしないとわからない機能なんかがあったりで。
最初のリーディングのボリュームとしてもちょうどよかったのではないでしょうか。
ナイスな選択だったと思います。
Javascriptもほとんどなく、CSS3の可能性を十分に楽しめました。

次のoursphereはMLで藤井さんがCSS3Transformで作成されたWebアプリケーション。
利用している技術は
TwitterからTwitteを拾って、位置情報から球体に貼り付けるというもの。
球体も回っており、ビジュアル的にも非常に目をひくものでした。
残念ながらご本人は体調不良で欠席でしたが、フォローの？つぶやきもあり、
順調にリーディングが進みました。
Transformって3Dでの変形もあったという発見。Javascriptが結構ガリガリ！って思っていたので意外でした。
「-webkit-transform」系の実用方法がよくわかりました。
それにしてもよく作ったなーというのが感想。
これを雛形におもしろいものも作れそうです。

途中からピザもでてきて和気藹々とでき、終了後も駅までみんなと話しながら帰りました。
白石さんと小松さんとは一緒に小田急で帰りましが、電車の中では技術的な話より、ワイフハックの話だったり、子供の話だったりと別の意味で楽しい内容でした。

ぜひまた参加したい！

OSC2009 二日目

というわけで、Shibuya.tracによる二日連続のオープンソースカンファレンス2009への出展です。
お手伝いで参加というか、二日目はセミナーがあるわけでないので、初日と同様にお店番をしてきました。

チラシを手渡ししてもサッとどっかに行かない人に声をかけるようにしてみました。
皆さん、意外と興味があったり悩んでいたりで。

割合的には
15%　Tracって何？
10%　Tracってこんなんでも使える？
10%　Trac使ってみようと思うんだけど
25%　Tracの一部使ってるんだけど
20%　TracをUnixで使ってるんだけど
10%　Trac前使ってた
10%　その他

主観ですがこんな感じ？

一番印象に残ったのは、
障害管理としてチケット使ってる ＞　報告書はExcel　＞　チケットを手動コピー。面倒。＞ Excelにエクスポートできるよ ＞ なんと！　＞ Excelからチケットへのインポートもできるよ　＞ なんと！帰ったら使ってみる！！

と言う流れで、感動していってくれた人がいたこと。
ちょっとは布教活動できたでしょうか。
自分はこの機能、まだ使ったことないんですがね。

なにはともあれ、関係者の皆様、お疲れ様でした！