1日1tech

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

NintendoDS ブラウザで GoogleMaps が動いた

ふと思い立って、GoogleMaps の地図表示領域を少し小さめ、マーキングポイントの数を少なく、ズーミングのスライダーをなしの設定にした HTML を書いてみて、Nintendo DS ブラウザでアクセスしてみた......表示できるやん!?

20060831.jpg

http://miyanami.googlepages.com/mini.html

以前、普通に GoogleMaps のサイトにアクセスしたときは、表示が重すぎ
/ドラッグできない(画面のスクロールになってしまう)ので、DSブラウザでは無理かなと思っていたのですが、2画面表示モードにして、ドラッグ操作の代わりにボタンクリックで操作すれば、地図のズーミングやスクロールもいけました。

表示に少し時間はかかりますが、なにより DS ブラウザで動く事自体がおもしろい!(と思た)
JavaScript でマーキングもできるし、いろいろ応用ききそうです。


スポンサーサイト
  1. 2006/08/31(木) 12:58:32|
  2. mobile|
  3. トラックバック:0|
  4. コメント:0

「ようつべ」って、普通に通じるの?

テレビを見てたら、やしきたかじんさんが「ようつべ(YouTube)で、~の動画が...」って、言ってはりました。他の出演者さんにも、普通に通じてる様子。

以前、「web進化論」の作者の方が、家に帰ると奥方さんが普通に YouTube で見逃した番組を見てて驚いた~というような内容の事をどこかで書いておられたように記憶しているのですが、もしかして「ようつべ」は普通に使っていい言葉にまで認知されているのかな?
※2ch用語連発する芸能人はちらほら見ますね。
※そういえば、テレビで「ググれ」はまだ聞いたことないなぁ...

えっ!?と思った瞬間でした。
  1. 2006/08/29(火) 23:48:37|
  2. net|
  3. トラックバック:0|
  4. コメント:0

GPS関連メモ

極私的GPS関連メモ

●緯度・経度から2地点間の距離を求める

どら日記
http://d.hatena.ne.jp/drumsco/20051110

プログラミングの覚え書き: [Delphi] 2地点の緯度経度からその間の距離を計算する
http://kwi.cocolog-nifty.com/blog/2005/12/delphi_2_bc7b.html

Hubenyの簡易式(ヒュベニの公式)、でもSQLの中で使うには負荷大きそう...で、調べていたら

Geo metadata - 位置に関するメタデータとその応用
http://www.kanzaki.com/docs/sw/geoinfo.html
「半径何m以内にあるレストラン」という形ではなく、「東西、南北それぞれ○kmの升目に含まれるもの」といった方法でよければ、より単純な緯度経度データの比較だけでリソースを検索することができます。緯度の0.01度(36秒)はおよそ1.11km、経度の0.01度(36秒)はおよそ0.91kmに相当することを利用して、必要な範囲の緯度・経度の最小・最大値を計算し、その範囲に収まるものをピックアップすればよいわけです。

なるほど、半径~mではなく、周辺~m四方で考えればいいわけですね。これなら SQL で都度処理しても十分軽そうです。
ケータイの GPS は、まだそこそこ誤差もあるし、これで十分かも。

●緯度・経度の単位変換 (度分 -> 角度)


[百分率の小数点以下] = [分] / 60 + [秒] / 3600
これだけ?...って、ちょっと考えたらわかりそうなものを... > 私
  1. 2006/08/25(金) 22:23:36|
  2. develop|
  3. トラックバック:0|
  4. コメント:0

JavaScript で MVC モデル (DOMによるイベント駆動)

今回、中継そのものには間に合わなかったのですが、JavaScript の書き方について興味深いサイトを見つけました。

yohei-y:weblog: Javascript+HTML のデザインパターン
http://yohei-y.blogspot.com/2005/09/javascripthtml.html

JavaScript Tips collection - Mozilla's Blues
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/eventhandle.htm

この間紹介した書籍でも言及されていたのですが、簡単にまとめると、HTML 中で onmouserover や onload のようなイベント駆動系のコードを記述せずに、そのイベント処理を割り当てる画像なりリンクなりのオブジェクトを DOM で指定して、JavaScript 中でその挙動を定義するという感じです。
このサイトの方は、behavior injection(振る舞いの注入) とか action injection (アクションの注入) と呼ばれてますが、まさにこういう方式で記述していけば、

Model :HTMLで情報を構造化し記述
View :CSSで表示制御
Control :JavaScript でイベント駆動、処理を記述

という形で、美しく効率的に分業できそうだなぁと。
※実際には JavaScript で CSS の定義を動的に変更したりと、「view に対するcontrol」もあるので完全に厳密には分けられない部分もありそうですが...

css でPC用、モバイル用、印刷用のように用途に応じて表示方法を切り替えているように、使用する機器によって UI の作法を切り替えることも js の切り替えだけでできる可能性につながりますよね?
そういうマルチプラットホームなUI開発の時には積極的に試してみたいと思います。
  1. 2006/08/24(木) 12:40:24|
  2. develop|
  3. トラックバック:0|
  4. コメント:0

DNSラウンドロビンによるアクセス負荷分散

ウェブサーバの負荷分散について

・ロードバランサなるそうお安くはない装置を導入する
・DNSラウンドロビンでサーバへのアクセスを振り分ける

という方法しか知らなくて、しかも後者のほうはウェブサーバで提供する内容の構成を全く同じにしておかないと...と記憶していたのですが、どうやら最近のブラウザでは、ページが見つからない場合、別のサーバに自動的にアクセスするらしい。
し、知らなかった。。。 otz

今度、もし負荷の大きなサーバたてる必要があったらやってみよう。

Kazuho@Cybozu Labs: DNS ラウンドロビンと高可用性 (High Availability)
http://labs.cybozu.co.jp/blog/kazuho/archives/2006/06/ha_w_dnsrr.php

ラウンドロビンDNSの設定
http://ash.jp/env/srv/rounddns.htm
  1. 2006/08/23(水) 13:02:07|
  2. net|
  3. トラックバック:0|
  4. コメント:0

JavaScript で CSS を動的にいじる(透明度の設定)

CSS で半透明の設定って、MSIE しかできないと思ってたら、Mozilla でもできるんですね。不勉強でした。。。
css で透明度50%にする指定なら、こんな感じで指定すると半透明で表示されます。Opera も ver 9 以降ならいけるみたいです。

opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);


で、JavaScript で動的に CSS のプロパティ値を変更する時、MSIE ではうまくいくのに、MozillaFirefox ではうまくいかないな~と思ったら、こんな事ではまってました。

document.getElementById(hoge).style.filter = "alpha(opacity=50)"; document.getElementById(hoge).style.MozOpacity = 0.5; document.getElementById(hoge).style.opacity = 0.5;

表記違うし。大文字小文字で区別されるし。
気がつくまで1時間は悩みました orz
※10/11 追記:はてブで間違い指摘してくださってたので修正しました。ありがとうございます。

その他、JavaScript で CSS プロパティをいじるためのメモは追記で 【“JavaScript で CSS を動的にいじる(透明度の設定)”の続きを読む】
  1. 2006/08/21(月) 21:12:08|
  2. develop|
  3. トラックバック:0|
  4. コメント:2

JavaScript で「徐々に~する」を実装する

よくみかけるイエローフェードとかの「カーソルインすると色や大きさが変わって、徐々に元に戻っていく」みたいな実装って、Flash だったら onEnterFrame とか回してやって...と見当がつくのですが、タイムラインのない JavaScript だとどうやるの?っていう状態でした。
今回、送り火中継でカーソルインすると画像が徐々に大きくなるという実装をしているのですが、やっとこつがつかめました。

「setInterval で指定時間毎に実行(タイマー設定)」
「ある条件を満たしたら clearIntervalでタイマー解除」


これ。たったこれだけ。
テキストエディタで編集できる・動作が軽快・プラグインいらずな事考えたら、こっちのが私には向いてるかも。


ちなみにこの手法、同僚が持ってた下記の本を借りて、知ることができました。以前書店で探した時は、Ajax とは?から始まって延々と GoogleMaps やらの説明が載ってる一般教養本や、いきなり Yahoo UI Library の紹介が載ってるリファレンス本みたいなのが目についていたのですが、この本はなんというか、本当に知りたいところが、きちんと段階的に書かれていっている感じで、すごくわかりやすいです。
JavaScript は全く初めて!プログラムもこれが初めて!な人には勧めませんが、これまで light weight な言語でもいじってきていて、ちょっと ajax なるものもさわってみようかな~という人には自信をもってお勧めします。


  1. 2006/08/20(日) 20:36:27|
  2. develop|
  3. トラックバック:0|
  4. コメント:0

JKL.ParseXML:ajax通信処理ライブラリ

送り火中継で、各ユーザがアップした最新版の画像ファイル名、メッセージ、アップ時間等はアプリケーションサーバで DB から XML に書き出ししていたのですが、それをクライアント側の JavaScript でパースするのに、JKL.ParseXMLというライブラリを用いました。自前でごりごりとコーディングしてもいいのですが、このライブラリを使うとほんの3~4行でXMLの内容を JavaScript の配列に展開してくれるので、めっさ便利です。

[ajax] JKL.ParseXML/ajax通信処理ライブラリ
http://www.kawa.net/works/js/jkl/parsexml.html

静的なXMLファイルだとブラウザでキャッシュされてしまっている場合があるので、下記のように乱数をつけたURLにしてアクセスするようにして対応しました。この辺の小技は flash でも有効だったりします。

ramdomvalue = Math.floor(Math.random()*10000000);
url = "./xml/list.xml?" + ramdomvalue;
xml = new JKL.ParseXML(url);
data = xml.parse();

あと、なぜか UTF-8, XHTMLでコーディングしていると、Mac の Safari 1.3 でブラウザが不安定になる問題がありました。
結局、原因が特定できなかったので、記述は UTF-8、HTML はHTML 4.01 Transitional でコーディングしたら安定したのですが...う~ん、なんでだろ? 【“JKL.ParseXML:ajax通信処理ライブラリ”の続きを読む】
  1. 2006/08/19(土) 22:14:23|
  2. develop|
  3. トラックバック:0|
  4. コメント:0

ユーザ参加アーキテクチャのUI

今年の送り火中継のUI、去年と同じという指摘もあったのですが、今回の形になるまでに幾つか検討案(ボツ案)がありました。一部分を挙げてみるとこんな感じです。

  1. それぞれの山で綺麗なものを1つだけ表示

  2. 写真をトリミングして表示

  3. 写真が上から降ってくるような表現

  4. カーソルインしたものだけ、メッセージ表示

  5. 前の1分で更新があったものを順番に中央で大きくフォーカスして表示。メッセージ表示はフォーカスされているものだけ


これらの案は没になったものです。理由としては「送る側(中継員)の方の気持ち」を考えられていない点。せっかくみんなに見てもらおうとして送っているのに、形を揃える理由だけで勝手にトリミングするのは問題です(常に中央に対象物がくるとは限らないので、最悪意図したものがはいっていない可能性がある)。また送り火そのものでない画像はメッセージと併せて表示されてないと、どういう意図なのかわかりにくくなってしまいます。
綺麗なもの1つだけというのは完全に論外。コンセプトである「様々な視点からの中継」が死んでしまいます。綺麗な映像を望まれる方はテレビ局や新聞社の中継を見てもらえばいいわけだし。あと初期の案だと、背景画像の主張が強すぎたので、少しリテイクかけたりしました。

デザイナーには事前にコンセプトやシステムの説明していたのですが。。。

普段、メーカからの受注仕事だと、ダミーとして素材集からのものやクライアントが用意した著作権的に問題のないものを使うことが多くて、そういう場合は画面の見栄えとかで処理するから、そういうのが原因になっているのかもしれない。
web 2.0 でユーザ参加型アーキテクチャのサービスとかは、ビジュアル面の美しさはむしろシンプルにして、どれだけ「ユーザからの情報」を活かせられるかにデザインの重点が移ってきているのに。このあたりの変化をきちんと感じ取れていないと、これからのデザインって難しくなっていくと思う。
  1. 2006/08/18(金) 23:51:33|
  2. interface|
  3. トラックバック:0|
  4. コメント:0

京都五山の送り火中継2006 無事終了!

今年の大文字の送り火中継、なんとか無事に終えることができました!アクセス数が急に増え始める8時前後はがくがくぶるぶるだったのですが、今年はアプリケーション・DBサーバと、配信用ウェブサーバ(2台)を分離していたので、とりあえずスムーズに処理することができました。

20060817.jpg

京都五山の送り火中継 2006(再現版)
http://www.softdevice.co.jp/~daimonji/2006/replay.html

今回は当日のうちに再現版を公開してリンクしてもらったので、まだアクセスがちらほらと続いています。せっかくなので、更新間隔や更新開始時刻等を調整できるように ajax 版を更新しました。

ajax 版とか負荷分散とかで、今回、いろいろ技術的に調べてみてわかったこと・試せたことがあるので何回かに分けてメモしていきたいと思います。



  1. 2006/08/17(木) 23:41:01|
  2. net|
  3. トラックバック:0|
  4. コメント:0

京都五山の送り火中継2006

今年もほぼ日刊イトイ新聞さんとのコラボレーションで大文字の送り火のインターネット中継を行うことになりました。今日、なんとか一通りの準備はできたかな?というところです。
※まだ少し調整が必要ですが、なんとかなんとか。

基本的にはこれまでと同じコンセプトで「様々な人の視点から、その人の言葉で伝えてもらう」「気持ちのお裾分け」という感じです。バズワードでいうなら「CGM(Comsumer Generated Media)」とか「ユーザ参加型」というところになるでしょうか?(^^;

コンセプトは変わってませんが、内部の処理は安定性第一で大幅に刷新しています。サーバも同僚に苦労してもらいつつ、なんとか分散処理できる形にしました。

UIの面でも、今年は例年の Flash 版、ケータイ版に加えて、JavaScript (ajax)を駆使して例年の Flash 版とほぼ同等の UI な静止画版を実装してみました。依頼の仕事だと、なかなかここまで突っ走れない(制限がかかってしまう)のですが、自主プロジェクト(?) なので、思いっきりやらせてもらってます。
※下記はテスト中の画面で、左が ajax 版、右がflash版。

20060815a.png 20060815b.png


8/16 の 19:30 頃から開始の予定です。URLなどは下記のところでアナウンスしますので、よろしかったらご覧下さい。
なんとかうまくいきますように。。。

2006年 五山の送り火の中継のご案内
http://www.softdevice.co.jp/activity/dmj2006/index.html

送り火中継Flash 2005
http://miyana2m.blog2.fc2.com/blog-entry-131.html
  1. 2006/08/15(火) 22:15:01|
  2. net|
  3. トラックバック:0|
  4. コメント:0

新型MP3プレーヤ?

iPod Shuffle と並べてみました。しゃほーよりさらに小型です。最近はもっと小さいプレーヤもあるので、あんまりインパクトないかも。
20060803.jpg

...というわけではなくてこれ、会社の近くのお店で売ってたステッカーをフリスクにはっただけ、の代物です。
以前、フリスクのケースに iPod Shuffle 組み込んだ人がいましたが、やっぱりあの色、形、手触りはなにか共通のインスピレーションを起こさせるのでしょうね。
※ちなみにステッカーは 210円です。
  1. 2006/08/03(木) 20:47:25|
  2. gadget|
  3. トラックバック:0|
  4. コメント:0

DSブラウザ使ってみました

7月に届いてた DS ブラウザ、やっと時間を取って試してみることができました。使用感などなど。
20060801a.jpg 20060801b.jpg


  • GoogleMaps が表示できた!みたい。というか地図の一部とスライダーが表示されたのですが、重すぎて使えるレベルなのかどうかわかりませんでした。小さい枠内なら使えるかな?

  • Gmail のログイン前の画面、ディスク容量がリアルタイムに変わってる->簡単な ajax はいけそう!

  • 拡大+全体のモードで会社のサイトをみてみた場合(写真)、CSS の再現性は結構高そう。背景画像使いまくりなサイトだと表示に時間はかかるけど...

  • 1画面モードで会社のサイトをみると、CSS がはずれた形で表示(FOMAでアクセスしたときみたいな)。Opera だし、CSSのタイプで mobile なのを作ればいけるのかも?


2画面分割のモードの時とか、一瞬どちらで操作できるのか迷いそうな時もありますが、慣れたら便利そう。色んなところで指摘されているように、表示速度はPCのそれに遠く及びませんが、Google やはてなさんのゲートウェイ通して、ちょっとテキストを拾い読みとかする分にはかなり便利がよさそう。
※個人的には ajax がいけそうなのが期待大。

私の場合、はてなブックマーク、なてなRSSを DS で使ってます。(はてなRSSの URL の後ろに /mobile とつけるとモバイルモード(?) で表示されます)
とか思ったらはてなさん、DS専用のポータルを用意されたみたいです。対応素早いなぁ。。。

はてな
http://www.hatena.ne.jp/ds



  1. 2006/08/01(火) 20:45:10|
  2. mobile|
  3. トラックバック:0|
  4. コメント:0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。