岩家.net

はじめに

7月14日（月），リクルート　オリックス名古屋錦ビル （伏見ね）にて Mashup Caravan in NAGOYA が行われる，ということを，WCAN 2008 Summer で初めて知った私．せっかくの機会なので，参加させていただいてきました．

気がつけば，顔なじみの方も何人かみえてましたね．

本編

箇条書きモードで．

渡辺さん

• 遅刻のため前半聴けなかった orz
• 過去の Mashup Award 受賞者たちのその後

Maddy Project 坂本さん

• 名古屋でフリーのエンジニア
• 作品紹介
  • Surf This ( @ 2nd )
    • おおざっぱに言えばメタ検索
  • Firefly navigator ( @ 3rd )
• 参加動機
  • 名古屋地方は組み込みの開発が多い
  • 組み込みの現場にいるのでWeb系開発の実績が作れない
• 1 Week 開発手順
  • 「作りたいモノ」より「使いたいモノ」を作る
    • 個人的に非常に同意
  • アウトプットを明確に
  • 使えそうなAPIを幅広くセレクト
    • どんどんさがしてメモる
  • 各APIをひもづける
  • ひもづけたAPIsに協賛企業のものが含まれていなければとりあえず却下，次の組み合わせへ
  • 作る
  • 公開準備
  • エントリ
    • ？？？
• 質問
  • 応募作品の開発期間は？
    • 2週間くらい
    • 3日な人もいるけど，まぁ人それぞれ
  • 時間の取り方
    • 11時くらい～2，3時 → 土日に寝てしまう
    • 土日に時間を大きくとった方がいいかも
  • ハードウェアのマッシュアップもあり得る．作って提案してみては？
    • 準備がいろいろ大変
  • 受賞してよかったこと，開発で苦労したことなど感想を
    • 2ndの授賞式の直前で息子さんが誕生
    • 受賞履歴を公表できる．人に知らしめることができるのはいいことだ

イケテルMashupの作り方 Ruby Business Commons

• Ruby Business Commons (RBC) とは？
  • 福岡生まれの Ruby コミュニティ
• RoR を使って 20分で作る
  • Yahoo News のPV をチャートで表示しちゃお
    • RoRの概要
    • Net Beans で開発
    • JSChart で取得したデータ（PVインデックス）をグラフ化

Mashup meets Ext JS 石丸さん

• Ext Japan LLC について
  • アメリカの Ext, LLC(http://extjs.com/) の日本におけるパートナー
  • http://extjs.co.jp/
  • 7月中にプレスリリース予定
• Ext JS とは？
  • リッチインターネットアプリケーション開発のためのクロスブラウザ対応JavaScriptライブラリ
  • Sample: OnGmap.com ( @ 3rd )
  • 最優秀賞，優秀賞をとると，強制的にガウンを着せられる
  • 日系BP PC online で使われている（初の商用ライセンス）
• Mashup
  • Mashup/Ajaxプログラミングではまったときに注意すべき5箇条（5箇条じゃなかったり）
    • FirebugでEXCEPTIONが出たら，ブラウザを再起動してみる
    • なぜかページが更新されない場合，リクエストURLの引数にタイムスタンプを埋めてみよう（特にIE）
    • JSON(P) で動かないとき，デリミタのカンマやセミコロンをチェック（特にIE）
• iPhone自慢
  • 長野県諏訪市にお住まい
  • 抽選券 1番を入手．というか一人しかいなかったらしい

Yahoo! 地図サービス x ALPSLAB 岩澤さん

• Yahoo! 地図 Webサービス
  • 2つのAPIセット
    • 地図API
    • ローカルサーチAPI
• ALPSLAB API
  • 4月よりYahoo!が管理している（ALPS社を吸収合併）
  • 大圏API
    • 2地点間の最短航路を緯度経度の点の列で返す
  • print API
    • 印刷用PDFをDL可能に
  • 標高API
    • 指定した場所の標高を求める [m]
    • ？？？
  • 白地図
    • ラッキープレイス

MTL 石橋さん

• Hot Pepper for iPod touch
  • Apple推奨 iPhone アプリの 3step 進化
    • WebサイトのCSSデザイン最適化
    • WebサイトのUI最適化 + フルAJAX対応
    • iPhene native application
  • iPhone シミュレータかっこいい
  • iPhone でクーポン提示
  • 現在の時刻もパラメータで投げて，現在やっているお店のリストを取得することもできる
    • APIを拡張している
  • iPhone SDK: ？？？
  • iPod touch の方が Safari のバージョンがひとつ古い
  • UI
    • マウスはない．あるのはタップのみ
      • click: ok
      • double click: NG（デフォルトで画面拡大）
      • mouse over: NG
      • drag: NG（デフォルトで画面移動）
      • 未検証 events
        • gesture
        • touch
  • UA
    • iPhone: Mozilla/5.0(iPhone; ……)
    • iPod touch: Mozilla/5.0(iPod; ……)
  • touch との挙動の違い
    • 画面遷移のアニメーションがない
    • 画面の縦スクロール位置の取得方法
      • iPhone: window.scrollY
      • touch: window.pageYOffset
  • tips
    • ページ表示と同時にURLバーを消す
      • iPhone: window.scrollTo( 0, 0 );
      • touch: setTimeout( function() { window.scrollTo( 0, 1 ); }, 100 );
    • AJAX loading効果
      • ロード中に他の操作を無効にしたい場合
      • jQuery Block UI プラグイン
    • Windowsでの動作確認
      • Safari for Windows
        • 「開発」メニューを on にする
        • user agent を iphone に設定
  • And more…
    • Local Database
    • Webkit CSS Animation

懇親会

世界の山ちゃん 伏見錦通り店，10名ちょっとで執り行われました．

本編への参加者が30名超だったので，あれ？な感もありましたが （ま，月曜日ですし），スピーカのみなさん（Mashup Award 受賞者や協賛企業の方）と間近でお話しさせていただけたので，十分充実した時間でしたけどね．

一度注文用のタッチパネル（のOS）が落ちたのですが，再起動時の画面はアレでした．（ヒント： 川崎さんの Flickr）

最後は，店員さんにお店の前で写真を撮っていただき，そして解散となりました．

おわりに

これまで，一部の Web API を単一で少し触るくらいはしていたものの，複数のものを組み合わせることはしてこなかったように思います．

これを機に，Mashup なサービスなんかも作ってみたいところ．まずは Mashup Award にも何か簡単なものでも応募してみることにします．

とはいっても，それぞれの Web API の調査を始めるところからですが．．．

はじめに

去る 7月12日（土），WCAN 2008 Summer に参加してきました．あと，ちょっとだけ前に立たせていただきもしました．

それでは以下，箇条書きモードメインで．

開場前

ちょっと早く着きすぎたみたいです．

SESSION-1

デザイン，Web制作，そして写真も手がけられる おかだよういちさん のセッション．

• photograph: photo 「光」+ graph 「描くもの」→ 「光が描くもの」
• 絞り aperture
  • 小さくなるほど全体にピントが合う
  • 「ボケ」をコントロール
• シャッタースピード
  • 「ブレ」をコントロール
  • 「写真は真実を撮らない」
    • 暗闇の中の桜を30-40秒くらいで → 真実ではない
  • 一生懸命な感じを表現できる
  • スピード感を表現できる
  • 瞬間を止められる
  • 時間や風・水の流れを表現できる
  • 肉眼では見られない非日常を撮れる
  • 焦点距離分の1以上のシャッタースピードがあれば三脚がなくても手ぶれを防げる
  • yasuhisaさんはぶれやすい → よく動くので
  • EV（露出値） = Av（絞り値） + Tv（シャッタースピード値）
• 感度 sensitivity
  • 値が倍になると，半分の光の量で同じものが撮れる，という意味
  • Nikon D700 とかだと，ISO 25600 まであったり
  • PENTAX には 「Sv（感度優先）」なモードがある
• ホワイトバランス（WB，white balance）
  • グレーカードとかを基準に調整
• 一眼レフ
  • Canon A-1
  • センサの大きさ
    • フルサイズ: 36mmx24mm 実際のフィルムと同じ大きさ
    • APS-C
    • 1/2.5 インチ 5.7mmx4.3mm: コンパクトデジカメのCCD
    • 広告などでは「ブローニ」というタイプのフィルム（？）
      • フルサイズよりさらに大きい
      • 白トビ，黒ツブレ（？）がない
• 一眼レフ v.s. コンパクトデジカメ
  • 常にカメラを持ち歩け！
  • コンパクトデジカメは得機能で選べ！
    • 一眼レフを買った後でも重宝
    • 一眼レフでは撮れない写真が可能
• 構図 composition
  • 被写体をどの位置に置けばいちばんおさまりがいいか？を意識すればいいんじゃないかな
  • やらない方がよい 5つの構図
    • 日の丸構図
      • なんでもかんでも真ん中にピントを合わせちゃう
      • 空間が上にできる
      • とても退屈
    • 水平垂直がダメダメ
      • 水平垂直が微妙にずれている
      • とても不安な感じになる
    • 串刺し
      • 頭の上から木が生えているような感じ
    • 首切り
      • 水平線が首のあたりを通る
    • そこで切っちゃダメ
      • 次のショットに属さない
        • フルショット: 全身
        • ニーショット: 膝より上
        • ウェストショット: 腰より上
        • バストショット: 胸より上
        • アップショット: 首下（？）より上
  • 以上，トリミングのときにも注意！
  • 常に考えながら撮ろう！
    • 右脳と左脳をフル回転
• よく使うWebサービス
  • MYBOOK
    • http://www.mybook.co.jp/
    • 写真集を作れる
    • Windowsでは専用エディタ，MacではPhotoshop(CS2,CS3)のプラグインから
  • twitxr
    • http://twitxr.com/
    • 投稿すると，つぶやきがTwitterに，写真がFlickrに，など反映される
  • Picasa
  • Flickr
    • Proアカウント
    • アップロードには Photonic を使用 (Mac)
  • Photo Grabbr でまとめてダウンロード (Mac)
  • PicLens
    • http://www.piclens.com/
    • Firefox add-on
    • これはすごい

Lightning Talks

他のカンファレンスでもよく行われているアレで，WCANでは初の試みとのこと．せっかくなので，私も場をお借りしました．

内容は，DeLLa.JS の「こんなことやってますよ」的な紹介です．

発表資料を Slideshare に上げていますので，よろしければ．（当日発表のものとはフォントが異なっていたりレイアウト崩れがあったりなかったりします．）

2008-07-12 / WCAN 2008 Summer Ligntning Talks #1

枠に余裕があったのでもうひとつ発表させていただきました．．

最初は「JavaScript の勉強法」的な内容にする定でしたが，よく考えたら勉強法とかわからないので，「JavaScript だけでなく HTML+DOM や CSS ともバランスよく学んでいけば，そこまで深い知識がなくともいろいろ組み合わせができますよ」的な内容でいくことにしました．サンプルとして この辺 を使いました．

こちらも Slideshare に上げています．

2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

他の方の発表では，アップルップル 高橋さんの かなふる や，同 山田さんの Twitter壁紙を作ろう なんかが特に興味深かったです．

最後はかずみちさんが iPhone 向けサイト制作の tips をお話しされました．時間切れでした．．．

SESSION-2

Perl，JavaScript，そして小籠包いずれも ♥ な 川崎有亮さん のセッション．

• タイトル変更！ 「2時間開発合宿」
  • 発表時間が 2時間もないので，やっぱり最初のタイトルのとおりで
• ノベルティのホワイトボードマーカ
  • 会社に持って行ってね → 1人に配れば10人が見る，すばらしいグッズ
• MTLのプロジェクト
  • コマーシャライザー
    • http://cmizer.com/
    • 写真をいくつかアップロード＋αするだけでCM（っぽい）映像を生成
    • かずみちさんだらけ
• 自己紹介
• 世界のWeb API
  • 総数を www.programmableweb.com で確認できる
  • google web api 総数（7月12日現在）は 63 → この数もAPIで取得可能
  • google api のトピック
    • AJAX API Loader の統合
      • 呼び出し方の変更
      • 名前空間汚染を最小限に
  •  
    • Youtule-style Embedable Maps: YouTule形式でアンケートに答えて埋め込む地図を生成する
    • Google Static Maps API
    • Google Chart API
    • AJAX Libraries API
• インターネット・プラットフォームの 3レベル
  • Level 1 - Aaccess
  • Level 2 - Plug-In API
  • Level 3 - Runtime Environment ( online platforms )
    • Amazon EC2
    • Google App Engine
• マッシュアップ
  • 登録マッシュアップサイト数 3196 （7月12日現在）
  • 毎月 80以上のサービスが新たに
  • ブログパーツも広義のマッシュアップ
  • マッシュアップ・アワード
    • リクルートは14媒体（事業）のAPIを公開 http://webservice.recruit.co.jp/
    • 4th 開催中 http://mashupaward.jp/
      • 10月結果発表，応募期間は 9月まで
      • 参加・協力企業 38社（100以上のAPI）
      • 規約としては，上記以外のAPIも使用可能（ただし，1つは含めてね）
      • おもしろいのは SUNTORY のAPI
        • BAR-NAVI: バーのAPI
    • 川崎さんが担当されている
    • 今回のWCAN，Mashup Caravan in Tokyo の裏番組だったり
    • 名古屋は 7月14日（月），リクルートオリックスビルにて（伏見）
  • 作り方
    • 構えることはないよ
    • 発表資料で Google AJAX Language API を使用
      • iPhone → イメージ: Google の陰謀？
      • 今は△でも，サービス提供者側の改良により改善
• リアルデバイスWebサービス
  • Gainer
    • Gainer over HTTP
    • Device::Gainer モジュールの概要
  • Wiiリモコン
    • Wii over HTTP
    • Bluetooth は同時接続 8台まで
  • iPhone
    • iPhone対応サービス開発
      • iPhone SDK (XCode) で専用サイト・アプリ
      • HTML/JavaScript で専用ページ．ライブラリも使える → iui.js
      • PC用HTMLそのままで iPhone用のCSSを書く
      • RSS配信だけに対応し，iPhone用ページは外部サービス(mofuse)を利用する
    • only screen and ( max-devide-width: 480px )
    • kurukuru ai: http://ai.kuru2.st/
• おまけ：海外カンファレンスリポート
  • Improved Lightning Talks が始まったらしい
  • 視点はグローバルに

抽選会

今回もいろいろな準備がありました．一部は後日 Amazon さんから当選者へ直接発送で．

懇親会

会場は 世界の山ちゃん 金山中央店．いつものように手羽先を囲みながら，おなじみの方，初めての顔合わせの方，いろいろお話を交わさせていただきました．

その後

有志（といっても結構な人数でしたね） でアスナル金山へ移動，2F の屋外なところ （店名わかりません ＞＜） で軽く三次会となりました．iPhone な話題が多かった．．．かな？

3人ほどでミスタードーナツ 金山ショップで閉店までしゃべってました．

閉店後，30分しか寝ていなかった私はそろそろ限界，そこで帰らせていただきました．2人は電車が始まるまで漫画喫茶へ．．．お疲れ様でした．

おわりに

もともと興味深い分野なこともあり，どちらのセッションも （意識が飛んだ数分を除き） 終始楽しんでました．Lightning Talks x 2 については，まぁあれだけの人前なので極度に緊張したりしましたが，いい経験をさせていただけたと思ってます．主催のアップルップルさんに改めて感謝ですね．

最後に，各セッションで教わった中から，今後実践することを 1つずつ掲げておわりとします．

• 構図を意識する．
• Mashupする．

おまけ

抽選会で 「Web担当者を育てるコミュニケーション力」 が当たりました．

はじめに

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）
CSS Spriteを活用しよう - DesignWalker

DesignWalker さんのこのエントリを読んで以来，似たような素材については CSS Sprite な手法を心がけています （実際にはそれ以前もナビゲーションの素材くらいには使ってましたが，最近はもうちょっと積極的に，という意味で）．

ここ数日，CSS + JavaScript で何か小ネタがないかなぁ．．．と少しだけ悩んでいたわけですが，そんな中で出てきたのが CSS Sprite を使ったアニメーションという短絡的なものでした．

では以下，何番煎じとかは気にしない方向で．

デモ

次のページにデモを上げていますので，よろしければ．各種ソースコードも載せてあります．

CSS Sprite + setInterval で簡易アニメーション - issm’s…

手抜きな解説

画像

アニメーションの全フレームを連結した 1つの画像を準備します．

CSS

準備した画像を背景に設定します．overflow: hidden しておくといいでしょう．

アニメーションの各フレームに対応したクラスを

.frame-1 { background-position: ...px ...px; }

のような感じで定義していきます．

JavaScript

setInterval 関数を使って定期的にフレームを変更します．フレームの変更は，先で定義したクラス名を設定することで行います．

target.className = 'frame-1';  // ホントは replace とか使うべき

おわりに

フレーム数（コマ数）が莫大にならなければそれなりに使えるのかな，なんて個人的に思ってみました．APNG や MNG が普及するまで （といっても現状知りませんが ＞＜） は，代替手段として利用してみるとします．

利用幅を広げるために，JavaScript の IE への対応が最初の課題ですね．そして透過PNG対応も （この辺は PNG Fix とかで）．

あとは，フレーム定義の CSS （background-position 設定ね）なんかを画像から判断して自動で吐き出すようなしくみなんかができるとかなりハッピーですね．

参考

デモページの画像は，以下の動画から使わせていただきました．

• たわしねこ2　荒ぶるたわしのポーズ‐ニコニコ動画(夏)
• もやしもんでｳｯｰｳｯｰｳﾏｳﾏ(ﾟ∀ﾟ)‐ニコニコ動画(夏)

はじめに

去る 7月 5日（土），DeLla.JS 「JavaScript 第5版」 読書会 の 4回目 を，VISH株式会社様内セミナールームにて行いました．

会場を快く提供してくださっただけでなく，凝った案内板まで準備していただいたVISH株式会社様，そしてその手配を行っていただいた aodagさん に感謝です．

また，夜に行われる Firefox3 リリース記念パーティ に合わせて東京からみえたもじら組組長の smellmanさん（a.k.a. btmさん），darc0113 さんにも参加いただきました．

では以下．

読書会．．．の前に

会場へ行く前に，Francfranc 名古屋アネックス店 に寄り，以前から気になっていたアレを買ってみました．（アレは以下のどこかを参照．）

読書会

初っぱな，自分だけネットワークがつながらなくてアタフタ．．．vmware とのインタフェースのIPアドレスと会場のゲートウェイのIPアドレスとが同じでした．修正したらつながりました ＞＜

今回の主なテーマは，クロージャとコンストラクタですかね．

以前 Kanasan.JS の読書会に参加したときにも一度クロージャの部分を読みましたが，当時は Function オブジェクト自体 ？ だったため，クロージャなんてもう．．．な存在でした．それに比べればだいぶ理解を進められたかな，と思います．

クロージャなコード自体は以前から書いていたのかもしれませんが，それをクロージャとわかっているいないでは違いは大きいですよね，やっぱり．これからはクロージャをクロージャと（少しは）わかって書いていきますよ．

コンストラクタについては，その関数の中で 本来記述しない return を記述したらキモイね，というような話題が挙がったりしました．

一度 new 演算子がどのように実装されているか，その部分のソースコードを読んでみることにします．

その他，また Lingr に上がってます．

DeLLa.JS (at Lingr) > Archives > July 05, 2008

懇親会

Firefox3 リリース記念パーティ におジャマする形で行いました．全体で20名ほどになりました．

フォクすけテーマやどちらかというと JavaScript 以外の言語の話，terurouさん のお仕事っぷり （焼肉的な意味で） など，多彩な話題で盛り上がりました．（一部盛り上がりすぎた部分もあったりなかったり．．．）

終盤には，1個のフォクすけぬいぐるみ争奪戦という名のジャンケンが．勝者は読書会にも参加いただいた co_jitさん．ウラヤマシス．量産に期待したいですね．

その後

名駅方面まで徒歩で移動，スペースコロニー SIDE-3 へ．

ガンダムの知識は 9割 5分持ち合わせていませんが，グループで行ったのでその辺りはナントカ．まぁそんな私ですが，ガンダムネタだらけのメニュー （といってもわかりそうなものからまったくワカランものまで）は楽しめました，艦長 （店長のことです） のテンションも相まって．

ただ，個人的にヤバかったのはデスソース（の唐揚げだったか？）．口に触れただけで終わりました （けと食べました）．しかもお冷やも切れていたのでもう．．．

お店を出る頃には ToDo リストに 「ガンダム （無印） を勉強する」 が加えられましたとさ．

そして．．．朝までカラオケしてから解散しました．

おわりに

今回は，最初以外はネットワークのトラブルも特になく，読書会自体に時間を充てることができたかな，と思います．とはいえ，ちょっとした話題の脱線がなかなか戻らなかったり，というところもあったので，その辺りは反省せねば，です．

（開催前に 2時間横になっただけにも関わらず，読書会中ウトウトすることすらなかったのは，個人的にほぼ奇跡でした．その代わり，翌日は昼まで寝てました．）

内容もだんだんと難しく，ひとりでは理解するのに苦労する部分が増えてきました．こうして皆さんの理解力を拝借できるのはホント助かります．あとはサンプルコードとか．そう書きますか，というのが出たりするのでかなり楽しめたりします （理解できれば，の場合もありますが ＞＜）．

次回は 8月 2日（土）に行います．興味のある方はぜひ．

おまけ

懇親会でもちょっと話しに挙がっていたこともあったので，ちょっとドメインをとってみました．

http://js.del.la/

今後は，Googleグループ と並行して充実させていきますかね．