ブラウザにグラフを表示するライブラリD3.jsを使ってみました。
データを放り込めばグラフが出来るというお手軽なものではなく、グレフのレイアウトやアクションは一つ一つ手でコードを書く必要があるという硬派なライブラリです。
あまりの難しさに投げ出しそうでしたが、要はSVGの要素を追加していくだけと気づいてからはスイスイ。
ようやく構想通りのデザインを仕上げることができたのでした。
しかし、一難去ってまた一難。
このブログで使っている「ワードプレス」は内部構造が独特で、追加ライブラリや自作Javascriptを埋め込むことは基本的にできません。
せっかく作ったのにどうしようと思っていたら、ワードプレスでD3を使うためのプラグインがありました。
こちらも独特な記述が必要ですが、何とかクリア。
出来上がったものがこちらです。起動時のアニメーションとか、マウスオーバーで値を表示してくれます。
このページで使っている画像ポップアップを少し変更しました。画像をクリックすると中央に大きく表示される機能の事です。
以前使っていたLightboxはiPhoneでは画像がはみ出してしまう問題があったので、流行のレスポンシブルデザイン版を探し回り、“Image Lightbox”を使う事にしました。
そのままでは互換性に問題があったのでコードを少し変更。
僕のサイト内のＨＴＭＬはそのままで、ライブラリだけを入れ替えて動くようになりました。
せっかくなので詳細をメモしておきました。ご参考まで。
英語には”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”を使いましょう、という話でした。
日本人は腹の探り合いが得意だから、この条件式をもっと上手く使いこなせそうな気がします。
地図サービスの”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やグーグルマップと切り替えられるので、試してみて下さい。
殆どの人には何がなんだかサッパリ分からないと思いますが、ウェブの進化形としてすごく面白い出来事なのです。
トリックアートのページを作りました。
近くで見ると縞模様なのに、遠くから見ると絵がうっすら見えるというもの。
画質はＰＣモニタに依存するので、見えない人は５mぐらい離れて見て下さい。
MixiやFacebookには投稿していたのですが、肝心の自分のページでアナウンスするのを忘れてました。
サンプルページには「青い猫」とか「連邦の白い奴」が写っていますが、著作権的には多分ギリギリＯＫ。
写真の大半は僕が所有するオモチャ類を自室で撮った物です。
これが認められないのなら、リビングで撮ったスナップ写真も「この椅子のデザインは我が社の著作物だ」「このテレビは〜」とモザイクだらけになってしまいますからね。
もし仮に訴えられたとしたら、これが「見える／見えない」で論争になって面白いかもね。
さらに今回は、ユーザーが自分で撮った写真をトリックアートに変換できるプログラムも作成しました。
ＰＣから好きな画像をアップロードすれば、その写真の「見えそで見えない」バージョンが作成されます。
適当に遊んでね。
Perlで１００行ぐらいのプログラムなので、欲しい人がいたら公開しますよ。