12月7日（土）に開催された、第33回北海道開発オフに参加しました。
この日は、夜に行われる道民部大忘年会の準備を行いました。（プログラミングだよ！）
つくったもの
best-tweet-slideshow
https://github.com/irasally/best-tweet-slideshow
特定のtweetをスライドショー表示するhtml
twitter-icon-slideshow
https://github.com/irasally/twitter-icon-slideshow
指定したscreenNameのtwitter-iconをスライドショーで表示するhtml
きっかけ
今回の忘年会会場には、割と大きなスクリーンがあることがわかっていました。
「tweetなどを表示できるといいね」と話はしていたのですが、思うような動きをしてくれるアプリやサービスがない。
最悪自動タブ切り替えのadd-onをうまく使おうと思ってたのですが、最近Javascriptを勉強したこともあり、最低限のことができるものを作ろうと思い立ったのでした。（前日に!!）
前日夜にある程度出来上がっていたので、開発オフでは仕上げの微調整をしていました。
使ったもの
bxSlider:スライドショーを作ってくれるjQueryプラグイン
knockoutjs 3.0.0: データのバインディングのため
jquery 1.8.2
ruby-2.0.0-p247: データ加工スクリプトやtwitterAPI呼び出し
開発オフでやったこと
- FadeIn FadeOutで背景画像の切り替えもスムーズに見せる
- 背景画像はローカルで持つようにする
- スクリプトの使い勝手向上
- pushしていいようにダミーデータを作っておく
- スライドの微調整
- marqueeプラグインでScrrenName文字を動かそうと思ったが断念
はまったこと
Access-Control-Allow-Origin
twitterのAPIを呼び出してembedDataを取得する部分、最初はクライアントのjsファイルに書いていたのだけど、「Access-Control-Allow-Origin」エラーで取得できない。
これはセキュリティ上、今表示しているページと異なるサーバーには、クライアントから直接アクセスできないようにするためのもの（ざっくり）。
サーバーでスクリプト実行して先にデータを取得しておく、という方向に転換するまでに結構な時間がかかった。
CSS
デザインらしきものはほとんどあてられていないのに、「デフォルトCSS（ブラウザが標準で持っているスタイル設定）」ではまった。
おかしくない画面表示にするためにかかった時間が一番多かった気がする…
いざ当日
わりといい感じに表示されていたように思います。（特に写真がなかった…）
必要最低限のことを満たせたのでよしとします。
途中、参加している人からの指摘で表示時間を延ばしたり、自己紹介に使うために自動スライドショーを手動スライドショーに変えたりしました。
作ったものが表示されているっていうのはちょっとうれしいものなんだなってわかりました。
来年も何かできるといいな。