12
30
D3を使う

ブラウザにグラフを表示するライブラリD3.jsを使ってみました。
データを放り込めばグラフが出来るというお手軽なものではなく、グレフのレイアウトやアクションは一つ一つ手でコードを書く必要があるという硬派なライブラリです。
あまりの難しさに投げ出しそうでしたが、要はSVGの要素を追加していくだけと気づいてからはスイスイ。
ようやく構想通りのデザインを仕上げることができたのでした。

しかし、一難去ってまた一難。
このブログで使っている「ワードプレス」は内部構造が独特で、追加ライブラリや自作Javascriptを埋め込むことは基本的にできません。
せっかく作ったのにどうしようと思っていたら、ワードプレスでD3を使うためのプラグインがありました。
こちらも独特な記述が必要ですが、何とかクリア。

出来上がったものがこちらです。起動時のアニメーションとか、マウスオーバーで値を表示してくれます。

7
9
明るい箱

IMG_2593.jpgこのページで使っている画像ポップアップを少し変更しました。画像をクリックすると中央に大きく表示される機能の事です。

以前使っていたLightboxはiPhoneでは画像がはみ出してしまう問題があったので、流行のレスポンシブルデザイン版を探し回り、“Image Lightbox”を使う事にしました。
そのままでは互換性に問題があったのでコードを少し変更。
僕のサイト内のHTMLはそのままで、ライブラリだけを入れ替えて動くようになりました。

せっかくなので詳細をメモしておきました。ご参考まで。

4
11
AndとOrとAnd/Or

英語には”and/or”と云う不思議な表現があります。
“and”は「及び」、”or”は「又は」、じゃあ”and/or”は「及び、または、又は」?
この単語を目にする度にモヤッとしてたので、ちょっとまとめてみました。

典型的な”and/or”の例文では
“He will eat cake and/or pie”
「彼はケーキおよび(または)パイを食べるでしょう」
となっています。
これを読んでも「両方食べたいのか、片方なのか、どっちだよ!?」となってしまいます。そもそも日本語には”and/or”に対応する概念がないんですよね。翻訳家泣かせらしいです。

そこで”and”,”or”,”and/or”が明確に区別できるような例を考えてみました。

ここに1通のアンケート用紙があり〔苗字〕〔名前〕の記入を求められているとしましょう。
“and”の場合は記入欄が2つあり両方への記入が求められます。片方だけの記入は許されません。

記入欄:〔苗字〕and〔名前〕
許される記入例
(1)〔苗字〕〔名前〕
許されない記入例
(1)〔苗字〕〔__〕
(2)〔__〕「名前」
(3)〔__〕〔__〕

”or”の場合は記入欄が1つあります。未記入は許されません。

記入欄:〔苗字or名前〕
許される記入例
(1)〔苗字〕
(2)〔名前〕
許されない記入例
(1)〔__〕

ここで大事なのが、この”or”は強制的に「どちらか一方しか記入できない」という事です。
記入欄が〔苗字〕or〔名前〕でない事に注意。

そして肝心の”and/or”の場合は記入欄が2つあり、2つとも記入しても良いし、どちらか1方の記入でも構いません。未記入は許されません。

記入欄:〔苗字〕and/or〔名前〕
許される記入例
(1)〔苗字〕〔__〕
(2)〔__〕〔名前〕
(3)〔苗字〕〔名前〕
許されない記入例
(1)〔__〕〔__〕

こんな感じでお分かりいただけたでしょうか?
結局、この問題を理解するときに難しいのは”and/or”そのものではなくて、”or”が「強制的にどちらか一方のみ」という隠れた意味を持っていると気づくかどうかなんですね。

「アイスorケーキを食べて良いよ」と言われた時は、その裏に「2つ両方はダメだよ」という意味が隠れています。「2つとも食べていいよ」を表すには”and/or”を使いましょう、という話でした。
日本人は腹の探り合いが得意だから、この条件式をもっと上手く使いこなせそうな気がします。

6
19
道なき道を行く

地図サービスの”MapBox“にアカウントを作りました。
ネット地図と言えばグーグルマップという時代が10年近く続いていましたが、ここに来ていろいろな動きが出ているようです。

アップル社のiPhoneが次期OSから自社の地図サービスに移行すると発表したのは記憶に新しいところ(Jun.5@WWDC2012)。
他にもチェックインサービスの”foursquare“が”OpenStreetMap(OSM)”のカスタム版を採用しています(Feb.29)。

僕自身もGPSログをウェブに公開していますが、グーグルのライセンスに不自由さを感じていました。
「地図に文字やルートを書き込んで一枚の画像ファイルにする」という簡単なことが、グーグルの利用規約では禁じられているのです。

この状況を打開するかと期待されているのがOpenStreetMap。これは多数のネットユーザーが協力して世界地図を作ると言う壮大な試みで、地図版のウィキペディアなどと呼ばれています。

初めて見た時は「素晴らしい!」と感動したのですが、自分で使うとなると問題が少々。

まず、地図の色使いがゴチャゴチャしています。ルートを重ねた場合、どんな色を使っても背景に紛れてしまう。
視認性の上で今ひとつという印象でした。
次に、地図APIが分かりにくい。
「自分のページに地図を載せて、ルートを重ねて描く」だけの事がえらく難しく、僕の技術では実装できませんでした。
そんな訳で、存在は知っていたものの使っていなかったのです。




そんなとき、チェックインサービスの”foursquare”がMapBox採用というニュースが入って来ました。
「チェックインサービス」とは、携帯電話のGPS機能を使ってお店や観光名所などに「ここに来たよ」とマークをつけるものです。(まあ、文章で書いても「何が楽しいの?」って感じだとは思いますが)
foursquareもOSMのデザインに不満があったようです。

そこで登場するのが”MapBox”。このサイトはOSMのデータを元に地図をカスタマイズできるサービスを提供しています。
これを使うと、自由な色使いで、ライセンスフリーな地図画像が手に入るという仕組み。
世の中ホントに目の付け所のいい人がいるもんです。
僕のGPSページにMapBoxを適用したのがこちら。素のOSMやグーグルマップと切り替えられるので、試してみて下さい。

殆どの人には何がなんだかサッパリ分からないと思いますが、ウェブの進化形としてすごく面白い出来事なのです。

5
10
見るんじゃない、感じるんだ

トリックアートのページを作りました。
近くで見ると縞模様なのに、遠くから見ると絵がうっすら見えるというもの。
画質はPCモニタに依存するので、見えない人は5mぐらい離れて見て下さい。
MixiやFacebookには投稿していたのですが、肝心の自分のページでアナウンスするのを忘れてました。

サンプルページには「青い猫」とか「連邦の白い奴」が写っていますが、著作権的には多分ギリギリOK。
写真の大半は僕が所有するオモチャ類を自室で撮った物です。
これが認められないのなら、リビングで撮ったスナップ写真も「この椅子のデザインは我が社の著作物だ」「このテレビは〜」とモザイクだらけになってしまいますからね。

もし仮に訴えられたとしたら、これが「見える/見えない」で論争になって面白いかもね。

さらに今回は、ユーザーが自分で撮った写真をトリックアートに変換できるプログラムも作成しました。
PCから好きな画像をアップロードすれば、その写真の「見えそで見えない」バージョンが作成されます。
適当に遊んでね。
Perlで100行ぐらいのプログラムなので、欲しい人がいたら公開しますよ。