第33回北海道開発オフに参加しました

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(ブラウザが標準で持っているスタイル設定)」ではまった。
おかしくない画面表示にするためにかかった時間が一番多かった気がする…

いざ当日

わりといい感じに表示されていたように思います。(特に写真がなかった…)
必要最低限のことを満たせたのでよしとします。
途中、参加している人からの指摘で表示時間を延ばしたり、自己紹介に使うために自動スライドショーを手動スライドショーに変えたりしました。

作ったものが表示されているっていうのはちょっとうれしいものなんだなってわかりました。

来年も何かできるといいな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください