Más contenido relacionado
Similar a 最高のツイッタークライアントを求めて (20)
最高のツイッタークライアントを求めて
- 15. nw.js
• node.js + HTML + CSS + JSで
デスクトップアプリが作れる
• 旧 node-webkit
• node.jsのフォーク、io.jsに移行した際に名称を
変更
• Windows / Mac / Linuxいずれもサポート
- 24. var
Tweet
=
React.createClass(
{
propTypes:
{
tweetPayload:
React.PropTypes.object
//
tweet
object
https://dev.twitter.com/overview/api/tweets
},
getInitialState:
function
()
{
return
{
relativeTime:
‘1s'
};
},
componentDidMount:
function
()
{
var
self
=
this;
setInterval(
function
()
{
self.setState(
{
relativeTime:
self.getRelativeTime(
self.props.tweetPayload.created_at
)
}
);
},
3000
);
},
render:
function
()
{
var
payload
=
this.props.tweetPayload;
var
medias
=
[];
if
(
this.props.tweetPayload.extended_entities
&&
this.props.tweetPayload.extended_entities.media
&&
this.props.tweetPayload.extended_entities.media.length
>
0
)
{
medias
=
this.props.tweetPayload.extended_entities.media.map(
function
(
media
)
{
return
<Media
mediaPayload={
media
}
key={
media.id_str
}
/>
}
);
}
return
(
<div
className="tweet
row">
<div
className="col-‐sm-‐2
text-‐center">
<img
className="profile-‐icon"
src={
payload.user.profile_image_url_https.replace(
'_normal',
''
)
}
/>
</div>
<div
className="col-‐sm-‐9">
<p>
<span
className="user-‐name">{
payload.user.name
}</span>
<span
className="user-‐id">@{
payload.user.screen_name
}</span>
</p>
<div
className="text"><p>{
payload.text
}</p></div>
<div
className="row">{
medias
}</div>
</div>
<div
className="col-‐sm-‐1">
<div
className="post-‐time
btn
disabled">{
this.state.relativeTime
}</div>
<div
className="action-‐icons
btn-‐group-‐vertical">
<button
className="action-‐icon
btn
btn-‐default"
type="button"><i
className="fa
fa-‐reply"></i></button>
<button
className="action-‐icon
btn
btn-‐default"
type="button"><i
className="fa
fa-‐retweet"></i></button>
<Favorite
id={
payload.id_str
}
favorited={
payload.favorited
}
/>
</div>
</div>
</div>
);
},
getRelativeTime:
function
(
targetDate
)
{
/*
do
something
*/
}
}
);
- 31. ビルド自動化
• Grunt / gulpなどのタスクランナーで自動化
• jsxの変換や必要モジュールのロードなどを行ったものを
compileディレクトリに出力
• compileディレクトリを対象にnw.jsのアプリをbuild
!
!
var
gulp
=
require(
'gulp'
);
var
NwBuilder
=
require(
'node-‐webkit-‐builder'
);
!
gulp.task(
'nw',
function
()
{
var
nw
=
new
NwBuilder(
{
files:
'./compile/**/*',
platforms:
[
'osx64'
],
version:
(
process.env.NODE_ENV
===
'production'
)
?
'latest'
:
'v0.10.5'
}
);
return
nw.build();
}
);
