デジカメを購入しました。フジのFINEPIX F70EXR。

ついでにflickrのアカウントも取ってみました。
http://www.flickr.com/photos/webbingstudio/

私は、写真を撮るのも撮られるのも苦手です。
これまでは、携帯でスナップを撮るくらいしかしてきませんでした。

ウェビンブログ：勉強会とデジカメと顔出しの微妙な事情

そんな私がカメラを買ったのには、お仕事やプライベートなど、いろいろ思うところがあってのことです。

デザインの勉強になる（かも）

写真を撮るときは、大なり小なり、自分が観ているものを「被写体＝作品対象」として意識することになります。
今まで何となく観ていた些細なものも、意識すればデザインの要素であるわけです。

デザインスキルを向上するためには「何故これを美しいと思ったか」「何故このような色／構図にすると美しくなると思ったか」を考えることが大切だと言われます。
WEBデザイナー・イラストレーターに写真好きが多いのは、単なる素材集めのためだけではないのです。

デジカメだとクリアに観られる

私は生まれつき、斜視・乱視・眼球振動があります。なので、眼鏡をかけても遠くの景色（特に夜景）は鮮明に見えません。
覗き込むタイプの銀塩カメラで、写真をうまく撮れなかったのもこのせいです。

ですが、Twitterで知り合った写真好きな人たちの作品を観ているうちに
「あれ？風景をデジカメで撮って家で見れば、綺麗に観られるんじゃね？」
「て言うか、今のデジカメはディスプレイ見ながら撮れるから、私でも失敗しないんじゃね？」
と今更気付きましたwww

意識的に「苦手」を克服する

私が写真を撮るのが苦手なのは、銀塩カメラ時代にピンボケ写真ばかり撮っては凹んできたからです。

私が写真を撮られるのが苦手なのは、自分にコンプレックスがあるからです。

うまく撮れないと思うなら、オートフォーカスのデジカメを使えばいい。

撮られるのが嫌なら、少しでもコンプレックスが減るように自分を磨けばいい。

そういう風に、自分の意識を変えていこうと思いました。
それは今年の私のテーマでもあります。

自分の記録を残す

今のお仕事に就くまで、あまり自分の記録を残したいとは思えませんでした。
ですが最近は、勉強会やオフ会で沢山の人に会い、いろいろな場所へ行くようになって、少しずつ「自分が体験したことを残したい」と感じるようになっています。

文中で貼っている写真は、札幌エスタ＝ビックカメラ前のブリッジから試し撮りしたものです。
札幌駅前を見渡すことができる、なかなかいいところです。
iPhoneやMacbookなどの大きな機材を買ったときや、打ち合わせ等、お仕事の節目に通ることも多く、なじみの深い場所です。

使い慣れていなくて結局ヘタレな写真になってしまいましたが…
（本当はもっとひどかったので補正しています）

年が変わってから、いろいろとこれまでしてこなかったことを試したりしています。
「下手な鉄砲も数撃ちゃ当たる」というやつで、
どれかひとつくらい、いや全部がちょっとずつ、今後の役に立ってくれるかもと期待してみる今日この頃です。

Twitterで記事を紹介して下さい（-人-）

MovableTypeは、記事中に画像などの「アイテム」をアップロードして貼り付けると、アイテムに関する詳しい情報も記録されるようになります。
これは、ブログ全体であれば<mt:Assets>、エントリー中であれば<mt:EntryAssets>で呼び出すことができます。

WordPressにも近い機能があるのですが、

• アイテムにエントリーとは別個の「タグ」を付けられる
• テンプレート側でサムネイルのサイズを細かく指定できる
• アップした元ファイルと生成されたサムネイル・ポップアップが別ディレクトリで保管される

という点でMovableTypeは優れています。
（WordPressのように正方形にトリミングできないのが残念ですが）
写真・イラスト中心の個性的なサイトを作るのに力を発揮するでしょう。

追記：2009年9月25日
<$mt:AssetThumbnailURL$>にsquare="1"を加えると正方形にトリミングできます。はてブにコメントくれたaklaswadさんありがとうございます！

<mt:Assets>の強力な機能を使ったtipsをご紹介します。

タイプが「画像」のアイテムを表示する

まずは基本的な使い方です。

<mt:Assets>は、lastnモディファイアで出力される数、typeモディファイアで出力するアイテムの種類を固定できます。
typeをimageとしておくことで、もし動画やPDFが混じっていても確実にサムネイルを出すことができます。

また、サムネイルを出力する<$mt:AssetThumbnailURL$>にwidthとheightモディファイアを指定しておくと、サムネイルはその値を超えないサイズで生成されます。

特定のタグが付けられた画像をリンク・alt付きで表示する

<mt:Assets>にtagモディファイアを付けると、その値のタグが付いているアイテムのみリストアップします。対象はアップロードしたときに付けるアイテムのタグであって、エントリーのタグではありません。

記事中に何枚か貼ったアイテムのうち、タグを付けた画像のみを一覧にサムネイル表示することもできます。

<$mt:AssetProperty$>はpropertyモディファイアの値によって、説明文・ファイルサイズ・縦横サイズ等を取得できます。
アップロード時に入力した説明文を代替テキストにすると、よりアクセシビリティを考慮したHTMLソースを生成でき、jQueryのギャラリー生成ライブラリとの連動もしやすくなります。

<$mt:AssetProperty$>をうまく利用すると、MTOSでも正式版のカスタムフィールドのような拡張が可能なのです。

特定サイズ以下の画像はサムネイルを生成しない

サムネイルを生成する<$mt:AssetThumbnailURL$>には、欠点があります。
指定したwidth・heightモディファイアよりも小さな画像をアップすると、画像が逆に引き延ばされてしまいます。

もしも小さな画像もアップされる可能性がある場合は、<$mt:AssetProperty$>で取得した「画像の幅」「画像の高さ」を<mt:SetVarBlock>で変数に渡し、想定している最大サイズで二段構えの条件分岐を行う必要があります。

やや複雑にはなってしまいますが、上記のようにするとどんな画像をアップしても適切なサイズで表示されることになります。

PDFファイルだけHTMLを変える

CMS等でアップロードされるアイテムには、「PDF」や「Excelファイル」「圧縮ファイル」などもあります。
しかし、これらはMovableType内ではどちらも「type="file"」として判断されるので、最初のtipsではPDFだけを判別できません。

この場合は、アイテムの「拡張子」を取得する、<$mt:AssetFileExt$>を利用します。
PDFであれば値は必ず「pdf」になるはずなので、変数に渡して条件分岐を行うことで出力されるHTMLを変えたり、リンクにクラスを付けて、CSSでPDFアイコンを付ける演出を加えることもできます。

このように、ブログシステムに関わらずかなり高度な画像処理ができるMovableTypeですが、肝心のアップロード画面がお粗末です。
初期状態のまま特に意識せずにアップロードすると、サイトルート＝トップページがある場所に画像が保存されてしまいます。

サムネイルの保管先ディレクトリは環境変数で設定できるのですが、アップする画像そのものの保存先は上の画像のポップアップのHTMLを手入力かプラグインで書き換えるしかありません（いい方法があったら教えてください＞＜）。

また、画像関連の独自タグが入るとサムネイル生成処理が必要となるため、分岐が複雑になるとかなり更新処理が遅くなっていきます。

MovableTypeの画像処理機能は、オープンソース版でも使えるにも関わらずかなり便利なので、次バージョンの5で、ぜひこのあたりを改善してほしいものです。

Twitterで記事を紹介して下さい（-人-）

ThickBox 3.1

ウェブサイトでよく使われる演出をまとめた「yuga.js」に組み込まれているため、目にする機会が多くなりました。
今年の「ライジングサンロックフェスティバル」のサイトでも、アーティスト紹介に利用されています。

ですが先日、WEB屋ではない友人に
「ライジングサンのアーティスト写真の閉じ方がわからなかった」
と言われました。「右上に閉じるボタンがない」ため、戸惑ってしまったらしいです。

http://blog.webbingstudio.com/2009/07/rising_sun.html（後半）

私もこのブログの画像ポップアップに、thickboxを使っています。
確かにこれはわかりにくいです。

そこでこのように、閉じるボタンが右上に出るように改造してみました。
手順は追記以下で。

1. CSSの読み込み順を変える

もしhead内で「thickbox.css」を最後に読み込むようにしていたら、linkの順番を変えて自分のサイトのCSSが最後になるように直します。
これをしないと、thickboxの基本CSSを上書きできません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

2. thickbox.jsを直す

できれば元ライブラリはいじりたくないのですが、HTML出力部分の修正が必要です。

thickbox.js内、三か所に以下のような記述があるので

<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key

こう書き換えます。

<a href='#' id='TB_closeWindowButton' title='Close'>X</a> close to Esc Key

閉じるのリンクを大文字の「X」にすることに抵抗がある方は、別途閉じるボタンを用意して、3.でCSSを追加するときに画像置換などで対応してください。

3. CSSを上書きする

自分のサイトのCSSに、以下の記述を追加します。

大文字のXにグロテスク系（文字の線全体に太さの差がない）のフォントを指定し、右上に絶対配置することで疑似的に「閉じるボタン」を作っています。

角丸のスタイルは、Firefox・Safari・Cromeのみ有効で、「幅÷2＋10%」くらいの値を指定すると、ほぼ丸になります。
Safari・Crome用の-webkit-border-radiusはショートハンドが有効にならないようです。上下左右個別に指定しなければならない点に注意してください。

IE6以降の主要ブラウザで確認済。
yuga.js・thickboxを使っている方はお試しください。

Twitterで記事を紹介して下さい（-人-）

DevDoの店番はできたものの、納期が迫っていて午前中しか参加できず、唯一聞けた「Ez Publish」のセッションは力尽きて後半の実演部分で寝てしまうという罠。ポスターと名札作成で事前のお手伝いはできましたが…
来年開催されるときはもっと勉強してリベンジします。

さて、参加者のshuji_w6eさんが、OSCでのマナーと一部セッションの内容についてかなり辛口のレポートを書かれています。

はっきり言いますが、もの凄く不快に感じたのがデジタル一眼レフのブームで、かなりの数のスタッフが一眼レフをさげ、断りもなく参加者を撮りまくっていたことです。何人かが…というのであれば気になりませんが、自分が受付の所に行くといきなり３方向から写真を撮られました。これは流石にどん引きです。

デジタル一眼レフが安くなり、興味を持ち、撮りたいというのはいいと思いますし自分も少し興味あるくらいです。ですが、内輪のイベントであるならばともかく、ああいったイベントで知らない人から断りもなく撮り続けられるのは不快でした。

OSC北海道に参加してきました – やさしいデスマーチ

このところ、WEB屋の間ではアウトプット目的もあり、デジイチが流行っているようです。
開発オフ内でもメンバーの半分くらいはデジカメ持参です。

shuji_w6eさんの提言を受けて、DevDo内でも改めて写真・動画のマナーについてディスカッションが行われています。

北海道開発オフ：第7回北海道開発オフPhoto（13レス目、irasallyさんから）

私は、「はっきり認識できる顔出しはNG」でお願いしています。
DevDoの常連の方々はご存知なので、レポートやプレゼン作成のときなど、気を遣っていただいて申し訳なく思っています。

「顔出しNG」をお願いする人には、微妙な事情があります。

ひとつめが、「自分がここにいることが知られるとまずい」という物理的な事情です。
このような極端というか気の毒な例もありますが

人材流出リスク対策の為、弊社では社外勉強会への参加を自粛する様、お達しがでました。（涙）

twitter / understeer

出勤予定だったのを休んで参加していたり、お忍びで参加してる著名な方であったり、微妙な付き合いの集まりを断ってこっちに来たから、というのが考えられます。

もうひとつは、「ネット上に顔を公開したくない」という心理的な事情です。

この場合は、「匿名でネット活動をしているため、身内バレを強く警戒している」というのと、「顔を公開すること自体が嫌」というのが考えられます。

私は後者に当たります。
とにかく、自分の油断顔にものすごいコンプレックスがあるのです。
ここ10年間で撮影した写真は、証明写真を含めても数枚しかありません。
GWに花見オフがあったときは、小学生に向けられたカメラから逃げ回っていたくらいです。

人に会うときは、私自身が私の顔を見ることがないので割り切っているのですが、
「カメラのレンズを向けられる＝静止画の状態で他の人に捕獲される」ことはかなり辛いです。

最近はだいぶ克服してきて、講師業をしていたり、この写真のように「袋をかぶっていて自分の顔がわからない」ものなら公開できるようになってきました。

ですが、「イベント等で気付かずに写真を撮られ、どこかのブログでアップされているかもしれない」と考えると、正直ぞっとします。

これは私の個人的なわがままですし、あまり文章にはしたくないことです。
物理的な事情の人たちも、やっぱり撮る側には勝手な話です。

だからといって
「ここでは撮りまくるのが当たり前で、それが文化だから。嫌なら来ないでよ」
という文化が成立してしまうと、顔出しNGの人間は勉強をする機会、克服する機会も失ってしまうのです。
配慮してくれるとうれしいです…（´-｀三

DevDoのポスターを作ったとき、私はラフ案で顔がはっきり写っている方全員から、直接許可を取りました。
既に顔出しOKを公言している方や、「別にこれくらいならいんじゃね？」というのもあったのですが、自分が顔出しNGというのをお願いしている以上、他の方に対してぞんざいになっていはいけないと思ったのです。

「オープンソース」とはユルみっぱなしのものではなく、
「オープンであること」そのものが縛りになっています。
有意義な活動を続けていくために、最低限のマナーを考えていく必要があるのだと思います。

Twitterで記事を紹介して下さい（-人-）

OSC2009 Hokkaidoに、DevDo:北海道開発オフも展示を出すことになり、そこに貼るA3ポスターを作成しました。

サムネイルをクリックすると拡大して見られます。

顔出し許可をくださった参加者の皆さん、ありがとうございます（-人-）

今回は何より、道民部のカメラマン・@kobun※に感謝×感謝です。
写真のほとんどはコブンが撮ったものですが、素晴らしい素材を惜しみなく提供してもらって、「いろいろな立場・年代の人のゆる楽しい勉強会」という感じのポスターを作ることができました。

私は写真が本当にへたくそなのでうらやましいです。
印刷は他の人にお願いしているので、会場にポスターがどーんと貼られるのが楽しみです。

OSCというのは「オープンソースカンファレンス」のことで、主にプログラミングに関する最新の技術セミナーや、市内の勉強会の展示を一日中見まくるという、プログラマさん大喜びのイベントです。

ノンプログラマの自分には難しそう…と思ったら、Firefoxの次世代版とかeZ Publishなど、各種CMSに関するセミナーも結構多いのですよ。

プログラミング・CMSに興味のある方は、自己研鑽の一日などいかがでしょう。
開発オフのブースも見に来てくださいね（＾-＾）ノ

※【さん】を付けると何故か怒られる

Twitterで記事を紹介して下さい（-人-）

いい素材が手に入らない時や、素材集使いました感を減らすために、写真の加工や合成をすることがたまにあります。
ずっと古いPhotoShopを使ってたから、「背景消しゴムツール」なんて知らなかった！
というわけでちょっとやってみました。

＋

＋

お姉さんを明るくしすぎて、なんか違和感があります…
ちゃんと床への映り込みも入れたのに。
まぁ、ツールの練習目的だったからいいか。

Twitterで記事を紹介して下さい（-人-）

DevDo（北海道開発オフ）のメンバーで、LOCALの定例会を見学に行くことになりました。

で、札幌駅で待ち合わせということになったんですが

ばらばらいってもあれなので
20時に札幌駅西口のオブジェ近辺待ち合わせにしておきましょう
@smokeymonkey

の「西口のオブジェ」がなかなかイメージできません。
なんか混乱してきたんで、冒頭のような図を作りました。
オフ会のときなどに役に立つようであればご利用ください。

写真は下記URLから拝借しますた。

• https://tabidachi.ana.co.jp/card/488139
• http://www.satsueki.jp/feature/art/index.asp

札幌駅は南側東口と南側西口が全く左右対称で方角がわかりにくく、しかもどっちにも市民でも名前を知らないオブジェがあるので、こういう待ち合わせのときに困るのです。

一方は東口、もう一方は西口で待ってて、お互いに携帯で電話してるのに会えない…なんてことはざらです。

一般には
「大丸側の白いの / まるいの」「エスタ側の赤いの / あし」
とか言われてるらしく、それでどうにか通じそうです。

うちの家族間では妙夢お気に入りなので
「13時にみょーむ」
で通じますがw

Twitterで記事を紹介して下さい（-人-）

絵描きさんね、blogに移行したはいいけど不評とかね。見た人には見づらいって言われるし、イラストサイトには向いてないとか、よく言われるんです。ホントに。しょんぼり。

rumblefish – イラストサイトにblogが向いていない理由

こう言ってはなんですが、写真やイラストにこだわりを持つ人は、Web製作者にとって最もハードルが高い存在です。
画像というデザイン性が高いが融通の利かないものと、日記や感想という融通が利くがデザイン性が薄いものの両共存を、一般の人より高いレベルで要求してくるからです。

私もFC2ブログ用にギャラリーテンプレートを作ってみたこともありますが、写真やイラストを一枚一枚、納得行くように見せようとすると、既存の「ブログ的レイアウト」を根本からブチ壊したり、ページ全体に関わるJavaScriptをからめなければなりません。

結局、安定性や更新のしやすさを重視するとMovableType・WordPressといった有料サーバーに設置するブログシステムをいじることになります。
また、写真の並べ方、見せ方、日記や感想をどう扱うかという好みも一人ひとり違うので、規格化も難しいものです。

現状では、要望に応えられるギャラリーを作るには、やっぱりお金がかかってしまうのです＾＾；

今のところ、この辺がいちばん充実しているのは、MovableType4から実装された「アイテム管理」機能ですね。

独自タグ「MTAssets」を使用することで、記事で使用されている写真のみを全て抽出するのはもちろん、余分なファイルを作らず自由なサイズでサムネイル表示したり、写真に記事とは別のタグをつけて一覧を制御したりと、非常に柔軟なギャラリーサイトを生成することができます。

WordPress2.5の「メディアライブラリー」もかなり近いことができるようなのですが、流石に記事とデータベース単位で密接につながってはいないようです。
（この辺、まだWP2.5に対する日本語情報が少ないので私も勉強しなくちゃです）

ということは、MTはライセンスを取れば不特定多数へのレンタルもできるわけなのだから、どっかの企業が
「絵描き・写真家向けのテンプレートばかり用意した、MovableTypeレンタルサービス」
とか立ち上げたら、受け入れられるんじゃないのか？と。

でも、MTAssetsはサーバーに単独設置するMovableTypeだからこそ可能なシステムであって、不特定多数の膨大な写真とそれに関連するデータベースを無理なく扱えるサーバーとなると、なかなか大変でしょうね。資金もかかるし＾＾；

Twitterで記事を紹介して下さい（-人-）