Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twitter名刺ジェネレータ

1,371 views

Published on

KLab プロトタイピングラボ 2013 で開発したWebサービスの紹介です。

TwitterIDから手軽に名刺を作るサービスです。

  • Be the first to comment

  • Be the first to like this

Twitter名刺ジェネレータ

  1. 1. Twitter 名刺 ジェネレータ 筑波大学情報学群情報科学類 3年 細田 翔
  2. 2. CONCEPT 気軽に名刺を作れるサービスを目指した。
  3. 3. 画面構成 ①Twitter ID を入力 (認証不要) ②デザインを選択 瞬時にプレビュー!
  4. 4. 類似サービスとの比較 ツイ名刺 ずっとメンテナンス中(◞‸◟) Proca 認証しないと使えない Twit Card 閉鎖\(^o^)/ ついったー名刺ジェネレータ API1.1に未対応.... Twitter API 1.1 に対応できなかった? 今年の6/12 で Twitter 1.1 に完全移行した。 「Twitter 名刺」でググった上位4件
  5. 5. 高速な描画 描画は クライアント側 (HTML5 Canvas) 。 高速な描画。デザインを選択したら瞬時にプレビュー! ストレスがない✌('ω')✌
  6. 6. 要約機能 仕組み 直近200件のツイートを 取得。 MeCab で形態素解析。 マルコフ連鎖で要約文を 生成。 結果は毎回変化! シュールで面白い!?
  7. 7. レスポンシブルデザイン Android での表示 ナビゲーションがドロップダウ ン式に変化 2カラム → 1カラム に変化
  8. 8. TOP → SHOW の遷移方法 ここからは デモンストレーションします
  9. 9. 画面構成 SHOW Show 画面に遷移
  10. 10. 他の人の名刺を 見れる! 作った名刺を Twitter で共有 ※削除機能はBASIC認証で 管理者のみ実行可能
  11. 11. TWITTER に投稿
  12. 12. 苦労した点 クロスドメインアクセスの回避。 サーバにアイコンを保存。 Canvas で複数行の文字を描画すること。 1文字ずつ文字を取り出して、指定した幅になるように文字を 分割。複数回に分けて canvas#fillText() した。 長い bio、短い bio があるので、どんな文字数でもバランスよく なるようにした。(テキストを下寄せにする独自関数を実装)
  13. 13. こだわり レンスポンスの速さ 使いやすくて分かりやすいUI エラー処理 セキュリティ(XSS回避) 3日間という短い開発期間だったが、 細部まで妥協せずに開発した。
  14. 14. 使用技術 クライアントサイド JavaScript, Ajax Canvas(HTML5) サーバサイド Ruby (Twitter 認証はサーバ側で行った) 形態素解析エンジンとして MeCab View に erb を利用 (MVCを意識)
  15. 15. URL http://gam0022.net/app/tmg/
  16. 16. SOURCE CODE https://github.com/gam0022/twitter-meishi-generator
  17. 17. 完。

×