SlideShare a Scribd company logo
1 of 17
Download to read offline
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回避)
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

Similar to Twitter名刺ジェネレータ

チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座
チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座
チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座munjapan
 
id=nagano nseg 合同新年会 LT資料
id=nagano nseg 合同新年会 LT資料id=nagano nseg 合同新年会 LT資料
id=nagano nseg 合同新年会 LT資料Masashi Takahashi
 
20180621_Node学園LT
20180621_Node学園LT20180621_Node学園LT
20180621_Node学園LTKahori Takeda
 
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdf
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdfOpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdf
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdfFumieNakayama
 
Prototype in Service Design
Prototype in Service DesignPrototype in Service Design
Prototype in Service DesignHiiro Kato
 
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザインNodokaFujimoto
 
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)NodokaFujimoto
 
TeamsのチャネルとやりとりするWeb Applicationを作ったお話
TeamsのチャネルとやりとりするWeb Applicationを作ったお話TeamsのチャネルとやりとりするWeb Applicationを作ったお話
TeamsのチャネルとやりとりするWeb Applicationを作ったお話DevTakas
 
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをな
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをなPower BI の可能性?見(魅)せてやるよ!!!その本気ってやつをな
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをなYugo Shimizu
 

Similar to Twitter名刺ジェネレータ (10)

チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座
チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座
チャットボットを自社業務に適用するにはどうしたらいいのか?:UXデザインによるチャット業務デザイン講座
 
id=nagano nseg 合同新年会 LT資料
id=nagano nseg 合同新年会 LT資料id=nagano nseg 合同新年会 LT資料
id=nagano nseg 合同新年会 LT資料
 
20180621_Node学園LT
20180621_Node学園LT20180621_Node学園LT
20180621_Node学園LT
 
User groupandfuture
User groupandfutureUser groupandfuture
User groupandfuture
 
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdf
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdfOpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdf
OpenShiftで実現するプラットフォーム・エンジニアリングにおけるDevSecOpsの価値.pdf
 
Prototype in Service Design
Prototype in Service DesignPrototype in Service Design
Prototype in Service Design
 
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
 
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
 
TeamsのチャネルとやりとりするWeb Applicationを作ったお話
TeamsのチャネルとやりとりするWeb Applicationを作ったお話TeamsのチャネルとやりとりするWeb Applicationを作ったお話
TeamsのチャネルとやりとりするWeb Applicationを作ったお話
 
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをな
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをなPower BI の可能性?見(魅)せてやるよ!!!その本気ってやつをな
Power BI の可能性?見(魅)せてやるよ!!!その本気ってやつをな
 

More from Sho Hosoda

Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽Sho Hosoda
 
Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)Sho Hosoda
 
three.js の紹介
three.js の紹介three.js の紹介
three.js の紹介Sho Hosoda
 
カメラで商品検索
カメラで商品検索カメラで商品検索
カメラで商品検索Sho Hosoda
 
TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)Sho Hosoda
 

More from Sho Hosoda (6)

Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽
 
Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)
 
three.js の紹介
three.js の紹介three.js の紹介
three.js の紹介
 
カメラで商品検索
カメラで商品検索カメラで商品検索
カメラで商品検索
 
TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)
 
Twincal
TwincalTwincal
Twincal
 

Twitter名刺ジェネレータ