twitter名刺ジェネレータ
TRANSCRIPT
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#fillText() した。
長い bio、短い bio があるので、どんな文字数でもバランスよくなるようにした。(テキストを下寄せにする独自関数を実装)
こだわり
レンスポンスの速さ
使いやすくて分かりやすいUI
エラー処理
セキュリティ(XSS回避)
３日間という短い開発期間だったが、細部まで妥協せずに開発した。
使用技術
クライアントサイド
JavaScript, Ajax
Canvas(HTML5)
サーバサイド
Ruby (Twitter 認証はサーバ側で行った)
形態素解析エンジンとして MeCab
View に erb を利用 (MVCを意識)
SOURCE CODE
https://github.com/gam0022/twitter-meishi-generator
完。