2xup.org

border-image を利用したボックスデザイン

2010-04-03T22:43:15-07:00

iPhone Templete Set を作ったときに、Safari という限られた環境にだけ対応すればよいのだからということで、Webkit で使える CSS3 の新しいプロパティをいろいろ使ってみました。なかでも境界の装飾に画像を設定できる border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておきます。

まずは現在の草案 (2009年10月15日版)を読んで、関連プロパティや、設定できる値など、仕様の概要を簡単に整理したものを箇条書きにしてみます。

要素の border-style と background-image の代りに使う画像を設定する。画像は四辺それぞれには必要なくて、ひとつだけ用意すればよい (border-image-source)
画像の四辺それぞれから内側にスライスする位置を設定、画像は四つの辺、四つの角、中央の9つに分ける。中央は背景画像のように使われる (border-image-slice)
四つの辺の高さを設定する (border-image-width)
border-image の外辺までの領域を border image area と呼ぶ。特に設定のない場合はボーダー辺までで、それを基準に外へ広げることもできる (border-image-outset)
画像の繰り返し方法を設定できる (border-image-repeat)
ショートハンドプロパティは border-image

最初に読んだのは2008年9月10日版の草案だったので、いろいろ変っていました。まとめる前にもういちど見てよかった。いくつか気になった点を挙げてみると、まず border-image-slice に設定する number 値は pixel 単位となるということ。他にもこうゆうプロパティってあったかなあ。

border-image-slice で設定したスライス位置までの画像を表示する幅を四辺それぞれ設定するのは border-width で設定した枠線の太さではなくて、border-image-width というプロパティで別に設定できるようになるんですね。この border-image-width には auto という値を設定できて、その場合は border-image-slice と同じ値に設定される。デザインにもよるだろうけれど、結局同じ値を設定することもあると思うので便利そうです。それから border-image-width に関してはもうひとつあって、値に number 値を設定した場合、それは border-width の倍数を表わします。

実際に使ってみましょう

border-image は、When can I use... というサイトで調べてみたところ、Firefox3.5 (Gecko), Safari3.1, Chrome1.0 (Webkit) 以降の環境で使えるらしい。これらでの実装は、2009年9月10日版の草案を仕様としているようなので。現在の草案と主な違いを挙げてみました。

個別の border-image-* プロパティは使えないので、border-image ショートハンドプロパティで設定する
border-image-outset の設定はできない
border-image-width の設定はできないので border-width で設定する

どんな風に書くのか、例を用意してみます。どの値を書くのかはプロパティ名を使って表わしています。実際に使う場合は Gecko (Firefox) の場合は -moz- と、Webkit (Safari, Chrome) の場合は -webkit- をプロパティの先頭に付けます。

-moz-border-image: border-image-source border-image-slice / border-width border-image-repeat;

値を設定した例です。

-moz-border-image: url(border-image.png) 2 5 2 13; / 2px 5px 2px 13px repeat stretch；

border-width の値だけ別にプロパティで設定してもよいと思います。

-moz-border-image: url(border-image.png) 2 5 2 13 repeat stretch;
border-width: 2px 5px 2px 13px;

さみしい表示になってしまうけれど、border-image の使えない環境では枠線だけの装飾にしておくこともできます。border を border-image より前に書いているのは、後に書くと border-image をサポートしているブラウザで、border-width の値を上書きしてしまうからです。非サポートブラウザでは太さ3pxの黒い枠線で装飾されます。

border: 3px solid black;
-moz-border-image: url(border-image.png) 2 5 2 13 / 2px 5px 2px 13px repeat stretch;

簡単なサンプルを作ってみました。Firefox, Safari, Chrome の最新版で確認しています。

iPhone の UI にある戻るボタン

iPhone Template Set を作成した時に使った、ひとつ前のページに戻るボタンの装飾です。ボタンのコンテンツの長さはテンプレートを作成する時に予測できないので、border-image を使う方法はとても役立ちました。ボタンの画像を作成するときにガイドを使ってスライスする位置をイメージしました。

実際の動作やソースはデモページで確認できます。用意した画像なども含め、自由に使っていただいてかまいません。

デモページ

セロハンテープに文字

テキストの長さなどで幅の変るボックスのデザインにもいろいろとバリエーションを増やせそうです。Pixelmator で描いたセロハンテープの画像を border-image-source として使って、見出しを装飾する例も作ってみました。

デモページ

さらに transform プロパティも合わせて使って傾けたり、opacity プロパティを使って文字を透かせたりしてみました。

位置の設定は position プロパティを使いました。

デモページ

使ってみて、シンプルに柔軟なデザインを実現できることを実感しました。まだサポートしているブラウザは少ないですが iPhone 用のページなどでは積極的に使ってみようと思います。

Hammock 2000 のハンモック

2010-03-31T21:00:14-07:00

6月最初の週末に山梨県北杜市の gallery rtax で開催された Hammock 2000 の新色展示会に行ってきました。Hammock 2000 は素材選びから染め、職人による編み上げなどすべての工程においてこだわりをみせるハンモックブランドです。

Hammock 2000

展示会はとてもアットホームで、やさしい雰囲気でした。吉祥寺のハンモックカフェ mahika mano の方もいらっしゃったようで、お昼ごはんをごちそうになりました。ギャラリーをのぞいたり、外に設置してあったハンモックチェアーに座ってみたり、ハンモックの張り方を教わったりと、すてきな時間をすごしました。実は gallery trax には川内倫子さんの写真展で5月に訪れたばかり。自然に囲まれた、すてきなギャラリーです。

いろいろと迷いましたが、メキシカンタイプのハンモックを選びました。メキシカンタイプはネットで構成されたハンモックで、体全体を包み込むようにフィットします。ネットなので春夏に良いそう。ほかにはブラジリアンタイプというのがあって、これは一枚布からできているから秋冬に良いそうです。ひとつだとゆずり合いになってしまうので、きっともうひとつ欲しくなるでしょう。もし追加するならブラジリアンタイプも良いかも。メキシカンタイプでも布を敷いたりすれば秋冬も大丈夫なようです。

大好きな北杜市に行ってキャンプせずに帰るなんて考えられないので、展示会の後はお気に入りのキャンプ場で一泊。もちろんハンモックを張ってみました。

天気の良い朝で気温もグングン上る中、木陰に張ったハンモックで休憩。葉のすき間から漏れてくる光はやさしくて気持ち良いです。

自然の中、ハンモックで寝るということにはずいぶんと前からあこがれていました。でもずっと前すぎて、あたりまえのようになって、忘れていたようなあこがれでした。またひとつ、キャンプに行ったときの楽しみが増えたなあ。

TypePad Connect

2009-10-25T19:01:39-07:00

2xup.org ブログのコメントを TypePad Connect で管理することにしました。これまでのコメントも表示しつつ導入。TypePad Connect のコメントのデザインは、CSS で上書きするなどしてカスタマイズできるので、これまでと似たデザインで表示されるようにしました。カスタマイズの参考になるドキュメントも用意されています。

What are the CSS classes used by TypePad Connect for comment threads?

kaminogoya のプロフィールページは http://profile.typepad.com/kaminogoya です。

TypePad Connect を使えば、プロフィールページを公開できるだけでなく、ブログに投稿したコメントや、管理している複数のブログのコメントなどを TypePad Connect でまとめて管理できます。TypePad や Movable Type 以外のブログや、ウェブサイトにも使えて導入もとても簡単です。メールでの通知や返信のしやすさもポイントです。TypePad Connect の概要やドキュメントは movabletype.jp にあります。

TypePad Connect Beta を開始

TypePad Connect を導入しているブログでコメントしてみたけれど、同じようにコメントを投稿している他のユーザーさんのプロフィールから、さらに面白い記事にたどりついたりと『つながり』を実感。あとこれはそうなってあたりまえのことなんだけれど、事前に TypePad Connect にログインしている状態で、導入しているブログにアクセスすると、ちゃんとログインした状態になっているのでニヤニヤしてしまいます。

TypePad Connect でのタイムゾーンの設定は [Account] > [Email and Password] から、TypePad のプロフィール設定のページに移動すれば、設定できます。

久しぶりにコメントって楽しいなあ。って思っちゃいました。TypePad Connect を導入しているブログやウェブサイトを見つけたら、もっとコメントしてみよう。

iPhone Template Set をカスタマイズ

2010-03-30T01:15:04-07:00

こないだ公開した iPhone Template Set for Movable Type をカスタマイズして、2xup.org のコンテンツを、iPhone とか iPod touch (以下 iPhone と書きます) の Safari で閲覧できるようにしてみました。アクセスする URL は、PC で見るときと同じで、トップページにアクセスするには http://2xup.org/ とアドレスバーに入力すればオケイです。ヒマつぶしにもならないかもしれませんが、お暇な時にアクセスしてみてください。ホームスクリーン用のアイコンも用意しているので、モノ好きな方は、ブックマークに登録してみてください。

iPhone Template Set は、Movable Type 用として公開しています。iui などは利用せず、テンプレートはたったの三種類ととてもシンプル、XHTML と CSS だけで構成されています。GPL で公開しているので、ツールに依存しない、CSS ファイルだけを使って他のツール用のテンプレートなども作れると思います (テンプレートを対応させたいツール用に作るだけ)。

iPhone Template Set の CSS

iPhone Template Set は少しずつだけれど、いただいたフィードバックを参考にしたり、カスタマイズしてみて、良かったことなどを反映して、アップデートしています。Trac も時々チェックしてみてください。

文房具で包む

2009-05-21T03:39:55-07:00

9月23日のサイクリング帰りに立ち寄った、アノニマスタジオで購入した井上由季子さんの本『文房具で包む』を読みました。著者が思いついた、輪ゴムや丸シールを使ったステキな『包みスタイル』を、写真とエピソードで紹介してくれています。

中でも気に行ったのが、輪ゴムを使ったもの。輪ゴムほどずっと身近で活躍しているものは無いと思います。その輪ゴムに『ありがとう』のスタンプを押したり (輪ゴムは太いやつ)、コスコなんかで買える大量に入っているカラフルな輪ゴムをうまく巻くだけで、とってもステキなるもんだ。と関心。気持ちを込めて包む、ということの大切さを教えてもらいました。

せっかくなので、ちょうど借りていた本を返すときに実践。なかなか難しいです。

ランチの時、財布を忘れてチョット借りたお金を返すときや、何か小さなものをプレゼントしたいとき、そのまま渡すのはなんかイヤ。そういうとき僕は、おばあちゃんから貰った小遣いのように、ティッシュペーパーで包んで渡すようにしているのだれど、よく『懐しい』とか、そのまま『おばあちゃんみたい』と言われます。今度からはこの本を参考にしてみよう。きっと、何かを借りているときも、お土産を探すのも楽しくなるんだろうなあ。

Pump! Pump! Pump!

2009-05-21T03:40:12-07:00

最近、自転車と同じくらい楽しいのがスポーツクライミングです。まだはじめたばかりだけれど、ボルダリング、トップロープ、リード、トラバース、いろいろ挑戦しています。今は週一回、会社の部活でジムにでかけていて (もちろん自転車で)、最近やっと重心を意識したりできるようになってきたところ。お気に入りは、トラバースとトップロープです (リードはまだコワイ)。

先週登れなかったルートなのに翌週あっさりと登れたり、だんだん腕がパンプ (連続使用で筋肉が膨らむこと) するまでの時間が長くなってきたりと、ジムに行く度に自身の成長を感じられるのと、なによりゴールに到達した時の達成感がクセになります。上手になったら、山に行ってみたいなあ。

これまで全く興味を盛っていなかったスポーツだったので、全てが新鮮です。用語とかとてもややこしい。今は部長から教わった、クライミング用語ページで勉強中。

クライミング用語解説

iPhone Template Set for Movable Type

2011-10-18T22:20:38-07:00

iPhone, iPod touch の safari でブログを閲覧するのに適したページを出力する Movable Type 用テンプレートを作成してみました。もともとは CSS の新しいプロパティを会得しておこうとはじめた勉強だったのだけれど、iPhone や iPod touch にも搭載されている Safari は、新しいプロパティをたくさんサポートしている環境だし、学んたことを実践するのに適しているのではないかと考えたのです。

完成したものはテンプレートセットプラグインにして、プラグインディレクトリに登録しておきました。プラグインダウンロードのページには、スクリーンショットもたくさん用意しています。ぜひ、使ってみてください。 iMT も合わせてどうぞ。

iPhone Template Set

テンプレートにはそれほど工夫は無いけれど、iPhone の設定インターフェイスを真似たかったので、name 属性が viewport の meta 要素の設定をいろいろ試してみました。

user-scalable=0 として、ピンチで拡大とかできないようにしたり、本体を横向きにしても文字サイズを変化させないなんとかいう方法があるみたいだけれど、0.xxx な数がややっこいので、initial-scale と maximum-scale を 1.0 として対応してみました。

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

CSS は、仕様書や CSS3.info を参考にしながら、実装されているものを試して、使えそうなプロパティをいろいろ使ってみました。ひとつの環境だけの事を考えれば良いのって本当に楽しいなあ。

iPhone Template Set の CSS

iPhone Template Set は、テンプレートセットとして公開しているので、既存のブログにテンプレートを追加する。というインストールはチョットめんどうくさいです (テンプレートセットとして反映すると、既存のテンプレート全て入れ替わるので、コピペで導入する必要がある)。コピペだと、ミスも多くなりがちなので、既存のテンプレートにプラガブルな『部分テンプレート』を追加する仕組みを提供するプラグイン、Templet に iPhone Template Set を対応させる config.yaml も用意しています。ダウンロードして、iPhone Template Set 付属の config.yaml と入れ替えるだけでオケイです。

テンプレットプラグインにする config.yaml

2xup.org でも iPhone Template Set を利用して iPhone, iPod touch 用のページを用意しています。URL は PC で見る時と同じ http://2xup.org/ ですので、ぜひアクセスしてみてください。

ファミコン発売25周年によせて

2009-05-21T03:40:58-07:00

7月15日はファミリーコンピュータ (ファミコン) の誕生日。発売は1983年ですから今年で25歳ですね。この日に合わせて、教えて! goo でもファミコンに関する質問を集めた特集ページを公開していました。せっかくなので、僕もファミコンとの出会いや想い出などを書いておきたいと思います。

ファミコンは、当時いっしょに住んでいた叔父が購入していて、叔父の部屋にありました。僕はまだ小さかったので当然、遊ばせてもらえる訳もなく、ただ叔父がプレイしているのを横で見るだけ。叔父の部屋にはなかなか入れてもらえなかったので、見学する機会も稀でした。それから数年、僕が小学校低学年の頃、叔父が結婚して出ていくときに、ファミコン本体を置いていってくれたのをきっかけに、自分で遊びはじめました。でもその頃の記憶はほとんど無くて、大きな病気をして入院していた記憶しかありません。あの時、すごくディスクシステムが欲しかったなあ。

好きなキャラクターはクリボー (海外版での名前は Goomba)で、理由は思い出せないけれど、スーパーマリオブラザーズでは、最初に出会う敵キャラクターで、よく踏み、よく機を奪われました。説明書に書いてあったキノコの国を裏切ったわるいキノコという泣けるエピソードも、当時『スパイ』とか『裏切り』というキーワードに敏感だった、僕の心を掴んだのだろうと思います。好きなのは初代のドットドットしたやつで、チラシの裏とかによく書いたり。折り紙を小さな四角に切って、ドット絵を作りました。

一番好きなソフトはさんまの名探偵。今でも時々クリアします。強烈な音やストーリーは、子供心にすごく怖かったけれど、ストーリーも好きだし完成度も高い。今プレイしてもかなり楽しめます。それとこのソフトには想い出もたくさん。さんまの名探偵は、今でも本体とオリジナルカセットで遊んでいます。

あとは、ファミコンと言えば高橋名人の存在。僕は全盛期にたくさん遊べたわけではなかったので、彼をモデルにしたムチャクチャなマンガでファンになりました。2007年9月まで配信されていたポッドキャスト 16SHOTRADIO は、そうしたマンガや当時の裏話などについても語られていて、たまらない内容でした。

ファミコンは、色使いやデザインなど、たくさんの影響を与えてくれました。今でも同僚や友達と遊んだり、話で盛り上がったりできるのもすごく嬉しいです。ありがとうファミコン。そして25周年おめでとう!

Eye-Fi Explore を試してみた

2009-05-21T03:42:27-07:00

無線 LAN 機能を内蔵した SD カード Eye-Fi に、自動位置情報タグ付け機能を加えた Eye-Fi Explore を試してみました。デジタルカメラに入れて、SKYHOOK Wireless のサービス地域で使用すれば、どこで撮影したかという情報もいっしょに記録できます。

この Eye-Fi Explore を使うにあたって、ポイントとなる SKYHOOK Wireless のサポート地域は、日本でも少しずつ広がっているようです。過去にネタフルさんで、日本でのサポート地域について取り上げらた記事と比べても、青く塗られている範囲は拡大しています。東京都心や、大阪市内では使えそうですね。

さっそく GR DIGLTAL に仕込んで、撮影してみました。記録される位置情報は、特にヒドいずれも無く良好ですが、たまにうまく情報を記録できなかったのか、前の写真の位置情報が記録されてしまうこともありました。

撮影した写真は Flickr にアップロードするように設定しているので、アップロードされた写真ページを見てみると、撮影場所を地図で確認できました。写真は、先日のサイクリングで訪れたアノニマスタジオ前での一枚。写真をクリックすると移動する Flickr の写真ページにある Additional Information に地図を表示するリンクがあります。

ここまでは良いのですが、Flickr (Yahoo! US) の日本地図は詳細ではないので、せっかく位置情報を記録できても、正しい位置に記録されているかどうかも確認できず、あまり嬉しくありません。これを詳細な Google Maps で確認できたら幸せだなあ、と思ってグリモンを探してみると、Life Changing なスクリプトがありました。

Flickr Gmap Show をインストールすると、Flickr の地図を Google Map にしてしまうだけじゃなく、位置情報の削除や編集もできてしまいます。もちろん写真の撮影位置は Google Maps の詳細な地図で確認できるので、ゴキゲンです。

日本でのサポート地域も広くなっているようだし、Flickr Gmap Show のおかげで思い通りの表示ができたし、とても (自己) 満足しています。

アイファイジャパン社からも、続々製品発表されているようです。まずはデジカメで撮った写真を PC や Flickr や Vox などの写真サービスにアップロードしてくれる Eye-Fi Share の予約を開始したそうです。amazon.co.jp からも購入できるみたいですよ。

Out For A Ride

2009-05-21T03:42:49-07:00

ボストンの Teevio LLC が運営する、サイクリング狂とカジュアルバイカーの為のソーシャルネットワーキングサービス、Out For A Ride にサインアップしました。乗っている自転車やルート、走行記録を共有できます。

ルートの追加は Google Maps に自分で書き込んでいくのと、GPS 端末で記録した .gpx か .kml 形式ファイルのアップロードもできるので便利。高低差もチェックできるから今後のルート選びにも役立ちそうです。

乗った時間やルートを記録していけるとなると、自転車に乗るモチベーションも上ります。そうなると、Out For A RIde での乗車ログ投稿も Action Streams プラグインを使って、Flickr や Twitter でのアクションのように 2xup.org のトップページで共有したくなったので、Out For A Ride の Action Stream を追加するプラグインを作ってみました。Movable Type 4.1x 以降の Action Streams プラグインがインストールされた環境で使えます。

Out For A Ride Action Streams をダウンロード

Out For A Ride を使いはじめて数週になるけれど、できることがシンプルなので面倒とも思わず続けられています。どんどん増えるアーカイブを見るのも楽しくなってきました。わがままを言えば、ルートを追加するときにインポートできるファイル形式がもう少し増えれば良いなあと思ったので、早速フィードバックを送ってみました。

クロモリフレームに憧れて

2008-06-26T08:47:12-07:00

マイ・バイシコーをオーダー。Jamis の Coda Comp というフラットバーロードバイクにしました。納車は7月中旬の予定、待ち遠しくてしかたがありません。行ってもすぐ納車されるわけではないに、仕事帰りに遠回りしてお店の前を通ってしまうくらいです。恋してるみたい。

決め手は、クロムモリブデン鋼 (クロモリ) のフレームです。自転車のフレームは、アルミやカーボン主流の現在ですが、クロモリフレームもまだまだ現役で根強いファンもいるようです。ちうても僕は、クロモリという単語や素材についてもを知ったばかりの初心者、試乗以外に乗り心地を体験した訳でもなく、クロモリフレームに興味を持った理由は、細くて美しいフォームでした (みため重要!)。

調べてみると、主流の素材に比べて重かったり、サビやすかったりといったデメリットもあるようなのだけれど、しなやかな乗り心地で疲れにくいし走るぜ？と知って、長距離走行したくてたまらなくなりました。

梅雨入り前、徒歩8キロメートル

2008-06-26T08:47:12-07:00

ここのところ、週末は歩く。歩く。気になる自転車を実際に見てみたくなって、台東区にある自転車屋までの4kmを、見たものをそのまま話のネタにしながら歩いた。日差しは強く、半袖のポロシャツでも熱いので、できるだけ日陰を選ぶ。ずっと話していたからかもしれないけれど、疲れをそれほど感じないまま目的地に到着。

たくさん歩いて腸を刺激したからか、お店を出たあたりからものすごくオナカが空いていた。そういえば昼食を食べずに出掛けたのだった。

せっかく上野付近まで来たし、アメ横まで足をのばして、焼き鳥と生ビールで夕食までオナカをもたせようということになり、肉屋さん直営のお店で1本100円の焼き鳥を何本かオーダした。焼き鳥を食べたあとは、切ったフルーツをスティックに差したものを買って食べた。良い天気だったので、パイナップルにした。

そのまま帰りもあれやこれやと話しながら、時々シャッターを切りながら歩いて自宅へ帰る途中、そういえば土曜も IKEA と COSTCO に行って、店内をぐるぐると歩いたのだった、と思い出した。買い物と散歩では、同じ歩くでも足の疲れかたは違うもんなんだなぁ。

関東は本日梅雨入りしたので、自転車もしばらくおあずけ。傘を差して歩くのも嫌いなので、散歩もおあずけ。梅雨の晴れ間を楽しみに思うなんて、久し振りだなぁ。

I want to ride my bicycle!

2008-06-26T08:47:08-07:00

先週の金曜日から、fumiakiy さんにインスパイアされて、オフィスまで自転車で行ってみることにした。片道約10km、オフィス周辺までは平坦だし、交通量は割と多い道だけれど、ベタな観光地を通るルートは楽しく、そして気持ち良い。特に気持ち良いと感じている朝の皇居付近と、夜の国会前を通るのは、もう既に楽しみのひとつになったくらい。

東京に住むようになって3年目だけれど、住んでいる街を通る道ですら、どう行けばどこへたどり着くのか知らない僕にとって、自転車は道を知るのにもってこいの移動手段になりそう。数回オフィスまで行っただけなのに、行動範囲を広げたような気になって、こないだ行ったあの場所なら自転車でいけるかしら、今度あの場所に行くなら自転車で行ってみようかと、地図を見てニヤついてしまいます。

道を知らない僕でも、きちんと目的地に辿り着けたのは、最短ルートや標高を教えてくれる素敵なサービスがあったから。世の中便利になったなあ。

今は、妻のマウンテンバイクを借りているのだけれど、もう少し続けられたら個人用の自転車を購入したいな。まだ購入するとも決まっていないのに、ネットでカタログを見たり、使用者のレビューを見たりしながらの品定めは、ウィンドウショッピングのようで楽しい。具体的に休日の利用も含めて、どれくらいの距離を走行するか、どんな用途で使うのかをイメージすると、ますます気分は盛り上って、もう気分は Queen の Bicycle Race の歌詞のよう。I want to ride my bicycle!

自転車を購入して、本格的に移動するようになったら、これまでより近く感じるようになった美術館だとか、公園に行く機会が増えると良いなあ。間もなく梅雨も迎えるし、きばると続かないので、まずは楽しもう。