Archive for the ‘works’ Category

講師業一旦お終い

Wednesday, February 18th, 2009

2007年の夏ぐらいからお世話になっておりましたMdNスクールオブデザインさんが、この3月で一旦休校されることになり講師業が終わりになります。

生徒さんには「本やテキストにはないネタが面白かった」とか「他で教えてないんですか?」など嬉しいことを言われたり聞かれたりしたのですが、残念ながら当面別で教える予定は立っておりません(笑)。

その代わりといってはなんですが、ここでまた不定期に怪しい勉強会みたいなものを開催したりしようかと思ってます。しばらくブログに小ネタ(そもそもさほど役には立たないのですが 笑)を書くことも控えていたのですが、それも徐々に復活させていこうかなぁと(謎)。

2年弱の短い間でしたが、これまで受講いただいた皆様はじめ関係者の皆様ありがとうございました。

クリック箇所を表示する「WP-Clickmap」プラグイン

Thursday, January 22nd, 2009

WordPressで構築したWebサイトなんかで使えそうなよさげなプラグイン「WP-Clickmap」が公開されてました。何するものかって言いますと、「Crazyegg」や「Clickheat」みたいにWebコンテンツ上でクリックされた箇所をサーモグラフィみたいにオーバーレイして可視化することができるものです。

うちなんかも数年前にWordPressに入れ替えた時や、最近だと仕事で作ったWebサイトとかでもCrazyeggなんか使って、数百人から数千人単位で実際のページ内のコンテンツのリンクをはじめ押された場所をチェックして、果たしてその位置で良いのかとかラベリングに失敗してないかとかこっそり調べたりするのですが、これが外部のサービスやインストールいらずとなったらありがたい!

というわけで、さっそくプラグインを放り込んでみました。
しばらく実験です(といっても、うちじゃ何の意味もない 笑)。

wp-clickmap

プラグインディレクトリにアップして「Activate」すれば、「WP-Clickmap」のメニューが表示されます。使わなくなったら「Deactivate」すればいいのでお手軽ですね。ちなみに我が家はまだ2.6ですが動いてます。

欲を言えば、自分のネットワークのシマをexcludeできればいいのですが、きっとそのうち実装されるでしょうね。

作者の方に感謝します(深々)。

かなり使えそうなWordPressプラグイン

Saturday, January 3rd, 2009

新年があけていました、おめでとうございます。
年明け早々ではありますが、WordPressを使ってあれこれしている方にすごく便利そうなプラグインがあったので、ご紹介だけしておきたいと思います。

そのプラグインとは「Flutter」。
twitterみたいな名前ですが、そんなものではありません。WordPressをよりCMSっぽくというか、どこでも編集可能にしたり、管理画面のエントリーごとに独自のカスタムフィールドを構成できるようにするもののようです。
詳しいことは配布元の解説というか、ビデオを見てください(笑)。

では、本年もこの調子で突き進みますがよろしくお願いいたします(深々)。

知らなきゃ損するターミナル操作

Friday, December 5th, 2008

ターミナル

ご無沙汰しております。
突然ですが、「デザイナーでも知っておきたい、日常の作業効率を格段にアップさせるターミナルを使ったファイルやサーバの操作」という長ったらしいタイトルを付けて、必要最低限これぐらい知っておくと大分制作時間の短縮にもなるよ、という謎の会を開催したいと思います(ボクレベルの簡単な操作になります)。

何でこんなことを突然やろうかと言い出したかというと、WebデザイナーになったからといってGUIの操作だけに頼っていたら、その辺を知らないことが「日常的に(時間的な)大きな損をしてるんじゃないかなぁ」と、いろんな人をみていて常々思っていたからですね。「そんなのこうやってれば、すぐ終わるのに…」とかあるんです。

正直、見た目のことばかりで本にはなかなか書けないのでね…。

ということで、「まったくこの辺りのことがわからない」「どういうことができるのか知りたい」「できることなら効率アップを図りたい」という方なんかを対象にしてやってみましょう。そんな難しい話はしません。仕組みから基本操作、そしてこういうこともできるよ、ぐらいまでになると思います。

場所は、こんな時期にどこか借りるのも面倒なのでボクんちで(笑)。
必要なものは、あればノートPCとかとメモ帳ぐらいでしょうか。既にホスティングを借りてるような方は、telnet(今時あんのかな)やSSHでのログインの仕方(idやpasswd)をメモってくるといいと思います(なくても平気、うちのがあるので)。
ちなみに先着10名様ぐらいで締め切りますました。

追記: 参加予定の皆様には数日前にメールを送っておきました。スパム扱いされてると困るのでメールボックスの隅から隅までみてください(笑)。あと、届いてないー!って方はコメントください。

(more…)

iPhoneのサイトをローカルで作る、の巻

Sunday, August 17th, 2008

特に何か面白い日常もないので暇つぶしといってはなんですが、「知ってる人にはつまらない、知らない人には少しだけ役に立ちそうなネタ」を書いてみます。

iPhoneやiPod touchに最適化されたサイトといっても、基本的にはHTML+CSS+JavaScriptでできるので、ローカルでセコセコ作ってSafari 3で確認すれば問題はないのですが、そこはiPhoneやtouchの実機で確認しないことには動作しないものもあったりします。

AppleのDeveloperサイトには、無料でも利用できる「iPhone SDK」なんつーものがあって、開発者のためのiPhoneエミュレータなどが同梱されてますが、Mac用ですしダウンロードしてインストールするにも容量もでかい。公式のもの以外にもエミュレータの類はサードパーティからリリースされていますけど、どうせ確認するなら実機でやった方が良いわけで。

かといって、いちいちFTPでサーバにアップロードして3Gや無線を使ってそこに繋いで…というのは面倒くさい。そこで実機を使って確認はするけど、もっと楽ちんにできないものかということで、OS Xを中心に無線LANさえあればできる方法を以下にあげておきますね。

(more…)

OS Xでユーザビリティチェック、Silverback

Monday, July 28th, 2008

時には仕事的なことでこんにちは、こもりです。
昼ご飯を食べながらehubを見ていたら、ちょっと興味深いアプリケーションが紹介されていました。アプリケーションの名前は「Silverback」、マウンテンゴリラのリーダーの呼び名というかその色合いが冠されてます。早速フリートライアルでダウンロードして使ってみましたのでそのレポートです。

このSilverback、OS Xのマシンにインストールしておいて内蔵のiSightでユーザーの視線などをキャプチャしつつ、画面内に表示されたWebページなどをブラウジングしてもらいその様子もムービーとしてキャプチャすることができます。そして最終的にその「視線の動き+クリックした箇所(動作の一部始終)」を一つのQuickTime Movieにミックスして落とすことができるという代物です。
つまりユーザビリティのチェックができるってことですね。

Silverbackのオフィシャルサイトにはクイックツアー的なムービーが用意されてますがまぁ英語ですので、簡単に使い方などを動画ではなく静止画で解説してみましょうか。
長くなるので、続きは下のリンクをクリックしてください。

(more…)

Firefox 3とカラーマネジメント

Wednesday, June 18th, 2008

6月18日の夜中からFirefoxの最新版であるバージョン3のダウンロードが開始されました。今回は公開日一日でのダウンロード数のギネス記録に挑戦するとかってことが行われています。

と、そんな話はここでお終いにして…。
バージョン3になってやっとMac版のFirefoxは、カラー調整したモニタで見てもsRGBの色空間で表示されるようになったような気がするのですが、気のせいでしょうか?

で、今回それだけではなくチロチロッとコンフィグをいじってあげると、写真の中に特殊なカラープロファイルが埋め込まれていればそれを有効にして表示してくれるようですので、仕事にもなんとなく関わることですし早速実験してみました。

まずは、カラーマネジメントが無効であるデフォルトの状態でAdobe RGBのカラープロファイルが埋め込まれた写真を表示してみます。

colormanagement-off

これはJPGファイルの中に埋め込まれたプロファイルを無視した状態ですね。WindowsのSafari以外で見ると(このページ)、なんとなくこんな色味に近い状態で出てるのではないかと思います。

で、早速カラーマネジメントの機能を有効にしてみましょう。
アドレスバーに「about:config」って入力してコンフィグの画面を呼び出し、上にある空欄に「color」とか打ってカラーマネジメントの機能を有効にするための「gfx.color_management.enabled」の項目を探します。
※後述してますが、この状態ではカラーマネジメントが有効かつモニタのプロファイルが有効な状態になります。

colormanagement-config

その項目をダブルクリックすると「false」が「true」に変わってカラーマネジメントの機能が有効になります。一度リスタートしないと反映されません。

colormanagement-on

そうすると写真の中に埋め込まれたカラープロファイルで写真が表示されます。
この画面にある写真の場合は、ダウンロードして加工する人のためにわざとAdobe RGBのプロファイルを埋め込んでいるので、色の再現領域がsRGBより広いためこんな感じで派手めな感じで表示されます。ま、なんとなくこんな感じで(Photoshopとかでファイルのカラープロファイルを有効にして開いた状態ですね)。

Safariはもともとカラープロファイルを認識するので、同じように表示されるかチェックしてみました。その結果が下の画面になります。

safari

いかがでしょうか。ほぼ一緒というか同じですね。

といっても、単純にこれを有効にするだけではサイト全体の色味にも影響するようですのでご注意下さい、というか対処方法はこの辺りに書いてあるようです。

具体的には、同時に「gfx.color_management.display_profile」をダブルクリックして、iccカラープロファイルの場所(例えばOS XでsRGBにしておきたければ、/Library/ColorSync/Profiles/sRGB.iccとかね)を指定するようです。sRGBにしておくか、モニタのプロファイルにしておくか(何も指定しない状態)でもまたサイト全体の色味が変わってきますからね。あー、こりゃこりゃって感じです…。色の話は面倒ですね。ややこしやー、ややこしや。

A string containing the full path to an ICM profile for output. Default is an empty string in which case the systems global profile is used. If no global profile can be found a default sRGB profile is used.

ってな感じで、空にするとシステムで設定してるiccカラープロファイルが用いられるけど、それがなければsRGBのプロファイルになるよって感じでしょうか。

結局この記事を書きながらアレコレ試してみて、どうしておくのが一番かって何もしないのが一番かもね、って結論に達しつつカラープロファイルだけ有効にしてます(かつモニタのプロファイルが有効な状態)。このカラーマネジメントの機能を有効にした方が良いかどうかは判断に迷うとこですが、そんなのが隠されているよっていう話でした。

「about:config」いじるのがあれなら「Color Management」ってアドオンもあるようです。


#余談ですが、スムーズスクロールが気持ちいいです。

#あ、あとサイト毎に文字サイズの変更が保存されてるようです。「Content Preferences」がいらなくなりました。文字の拡大縮小はデフォルトでズームの挙動なので、画像サイズをそのままにしたければ「テキストのみ(日本語でどう書いてあるか知りませんが)」を有効にしましょう。

追記(2008.06.20): OS XのFirefoxでここにsRGBを明示すると、AdobeRGBの含まれた写真もsRGBになってるなぁ…。とりあえず何も指定しないでおこうっと。

※ココよりもこちらに紹介しているページの方がはるかに参考になります。