KLab プロトタイピングラボ 2013 で開発したWebサービスの紹介です。 TwitterIDから手軽に名刺を作るサービスです。

1. Twitter 名刺 ジェネレータ
筑波大学情報学群情報科学類 3年 細田 翔

2. CONCEPT
気軽に名刺を作れるサービスを目指した。

3. 画面構成
①Twitter ID を入力
(認証不要)
②デザインを選択
瞬時にプレビュー！

4. 類似サービスとの比較
ツイ名刺
ずっとメンテナンス中（◞‸◟)
Proca
認証しないと使えない
Twit Card
閉鎖＼(^o^)／
ついったー名刺ジェネレータ
API1.1に未対応....
Twitter API 1.1
に対応できなかった？
今年の6/12 で Twitter
1.1 に完全移行した。
「Twitter 名刺」でググった上位4件

5. 高速な描画
描画は クライアント側 (HTML5 Canvas) 。
高速な描画。デザインを選択したら瞬時にプレビュー！
ストレスがない✌('ω')✌

6. 要約機能
仕組み
直近200件のツイートを
取得。
MeCab で形態素解析。
マルコフ連鎖で要約文を
生成。
結果は毎回変化！
シュールで面白い！？

7. レスポンシブルデザイン
Android での表示
ナビゲーションがドロップダウ
ン式に変化
2カラム → 1カラム に変化

8. TOP → SHOW の遷移方法
ここからは
デモンストレーションします

9. 画面構成 SHOW
Show 画面に遷移

10. 他の人の名刺を
見れる！
作った名刺を
Twitter で共有
※削除機能はBASIC認証で
管理者のみ実行可能

11. TWITTER に投稿

12. 苦労した点
クロスドメインアクセスの回避。
サーバにアイコンを保存。
Canvas で複数行の文字を描画すること。
1文字ずつ文字を取り出して、指定した幅になるように文字を
分割。複数回に分けて canvas#fillText() した。
長い bio、短い bio があるので、どんな文字数でもバランスよく
なるようにした。(テキストを下寄せにする独自関数を実装)

13. こだわり
レンスポンスの速さ
使いやすくて分かりやすいUI
エラー処理
セキュリティ(XSS回避)
３日間という短い開発期間だったが、
細部まで妥協せずに開発した。

14. 使用技術
クライアントサイド
JavaScript, Ajax
Canvas(HTML5)
サーバサイド
Ruby (Twitter 認証はサーバ側で行った)
形態素解析エンジンとして MeCab
View に erb を利用 (MVCを意識)

15. URL
http://gam0022.net/app/tmg/

16. SOURCE CODE
https://github.com/gam0022/twitter-meishi-generator

17. 完。