狠狠撸

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

More Related Content

罢飞颈迟迟别谤名刺ジェネレータ