Submit Search
Upload
最高のツイッタークライアントを求めて
•
3 likes
•
3,669 views
airtoxin Ishii
Follow
nw.jsとreact.jsでツイッタークライアントを作った話
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 37
Download now
Download to read offline
Recommended
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Android Bazaar and Conference 2013 Spring の講演資料です。
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。
Django boodoo
Django boodoo
泰 増田
This slides introduce a few (slightly maniac) usage of {% with %} template tag and a hack of django-integrated multi DB.
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Hishikawa Takuro
第24回WordBench神戸で話した資料です。
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
JavaScript Performance http://js-performance.connpass.com/event/35294/
24時間でiOSアプリ-Twitterクライアント-の作成にチャレンジ
24時間でiOSアプリ-Twitterクライアント-の作成にチャレンジ
聡 中川
第1回コデアルiOSアプリ勉強会-Programming24- スライド資料 http://engineer-intern.jp/archives/15923
Recommended
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Android Bazaar and Conference 2013 Spring の講演資料です。
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。
Django boodoo
Django boodoo
泰 増田
This slides introduce a few (slightly maniac) usage of {% with %} template tag and a hack of django-integrated multi DB.
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Hishikawa Takuro
第24回WordBench神戸で話した資料です。
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
JavaScript Performance http://js-performance.connpass.com/event/35294/
24時間でiOSアプリ-Twitterクライアント-の作成にチャレンジ
24時間でiOSアプリ-Twitterクライアント-の作成にチャレンジ
聡 中川
第1回コデアルiOSアプリ勉強会-Programming24- スライド資料 http://engineer-intern.jp/archives/15923
TwitterToDayOne
TwitterToDayOne
Alex Onsager
Road to UI Library
Road to UI Library
Manato KAMEYA
Room metro #28 XAML Day で使用した資料です。 コントロール自作、そしてライブラリ化するための方法や注意点など。
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。
Jqm20120210
Jqm20120210
cmtomoda
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
PyCon JP 2014でセッションさせて頂いた「Djangoによるスマホアプリバックエンドの実装」のスライドです。
jQuery勉強会#2
jQuery勉強会#2
Ryo Maruyama
Teclab3
Teclab3
Eikichi Yamaguchi
tech lab3
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
MonacaとOnsen UIを使った、iOS、Androidの両OSに対応したHTML5ハイブリッド型のモバイルアプリ開発手法についてお話しします。また、モバイルアプリ向けのUIフレームワークであるOnsen UIを利用した、SPA(シングルページアプリ)の作成方法についても解説致します。
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
MonacaとOnsen UIを使った、iOS、Androidの両OSに対応したHTML5ハイブリッド型のモバイルアプリ開発手法についてお話しします。また、モバイルアプリ向けのUIフレームワークであるOnsen UIを利用した、SPA(シングルページアプリ)の作成方法についても解説致します。
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
オープンソースカンファレンス2012 Tokyo Fall jQuery Mobileの基礎
20061125
20061125
小野 修司
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Titanium+JavaScriptでiPhoneアプリ開発カフェ<vol.3> サンプルコードのブラッシュアップ編の資料
[日本語・Japanese] Creative Technical Content for Better Developer Experience
[日本語・Japanese] Creative Technical Content for Better Developer Experience
Tomomi Imura
DevRelCon Tokyo 用のスライドの日本語版。(カンファレンスは英語) Developer Relation の仕事の一つ、ドキュメンテーションやチュートリアルなどのデベロッパー向けの文書に焦点を当てています。
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
yuichi_kuwahara
2017/2/19実施のSI-Toolkitユーザーグループの勉強会資料です。
Sails workshop1
Sails workshop1
Tomokatsu Iguchi
This is a slide at in-house sails workshop.
jQuery勉強会#3
jQuery勉強会#3
Ryo Maruyama
Reflexの紹介
Reflexの紹介
Rie Nakau
More Related Content
Similar to 最高のツイッタークライアントを求めて
TwitterToDayOne
TwitterToDayOne
Alex Onsager
Road to UI Library
Road to UI Library
Manato KAMEYA
Room metro #28 XAML Day で使用した資料です。 コントロール自作、そしてライブラリ化するための方法や注意点など。
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。
Jqm20120210
Jqm20120210
cmtomoda
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
PyCon JP 2014でセッションさせて頂いた「Djangoによるスマホアプリバックエンドの実装」のスライドです。
jQuery勉強会#2
jQuery勉強会#2
Ryo Maruyama
Teclab3
Teclab3
Eikichi Yamaguchi
tech lab3
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
MonacaとOnsen UIを使った、iOS、Androidの両OSに対応したHTML5ハイブリッド型のモバイルアプリ開発手法についてお話しします。また、モバイルアプリ向けのUIフレームワークであるOnsen UIを利用した、SPA(シングルページアプリ)の作成方法についても解説致します。
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
MonacaとOnsen UIを使った、iOS、Androidの両OSに対応したHTML5ハイブリッド型のモバイルアプリ開発手法についてお話しします。また、モバイルアプリ向けのUIフレームワークであるOnsen UIを利用した、SPA(シングルページアプリ)の作成方法についても解説致します。
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
オープンソースカンファレンス2012 Tokyo Fall jQuery Mobileの基礎
20061125
20061125
小野 修司
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Titanium+JavaScriptでiPhoneアプリ開発カフェ<vol.3> サンプルコードのブラッシュアップ編の資料
[日本語・Japanese] Creative Technical Content for Better Developer Experience
[日本語・Japanese] Creative Technical Content for Better Developer Experience
Tomomi Imura
DevRelCon Tokyo 用のスライドの日本語版。(カンファレンスは英語) Developer Relation の仕事の一つ、ドキュメンテーションやチュートリアルなどのデベロッパー向けの文書に焦点を当てています。
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
yuichi_kuwahara
2017/2/19実施のSI-Toolkitユーザーグループの勉強会資料です。
Sails workshop1
Sails workshop1
Tomokatsu Iguchi
This is a slide at in-house sails workshop.
jQuery勉強会#3
jQuery勉強会#3
Ryo Maruyama
Reflexの紹介
Reflexの紹介
Rie Nakau
Similar to 最高のツイッタークライアントを求めて
(20)
TwitterToDayOne
TwitterToDayOne
Road to UI Library
Road to UI Library
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Jqm20120210
Jqm20120210
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
jQuery勉強会#2
jQuery勉強会#2
Teclab3
Teclab3
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
jQuery Mobileの基礎
jQuery Mobileの基礎
20061125
20061125
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
20120118 titanium
20120118 titanium
[日本語・Japanese] Creative Technical Content for Better Developer Experience
[日本語・Japanese] Creative Technical Content for Better Developer Experience
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
Sails workshop1
Sails workshop1
jQuery勉強会#3
jQuery勉強会#3
Reflexの紹介
Reflexの紹介
最高のツイッタークライアントを求めて
1.
最高のツイッター クライアントを求めて 石井遼司 @airtoxin 2015年2月3日 ピコもん株式会社 社内勉強会
2.
@airtoxin • 石井遼司 • •
大学ではプログラムを書いて遺伝子の探索をしていた • ボードゲームとかよくする • 曲もほんのちょっと作ったり
3.
最高のツイッター クライアントを求めて
4.
経緯 • 夜フクロウが最高だったけどもうずっとサポートされていない • webは意外と使いやすいけど、結局アプリじゃないのが面倒 •
公式クライアントはヌルヌル動いていい感じと見せかけて、 よく引っかかるしめっちゃ落ちる • echofon (見た目が • mikutter (名前が • tweetbot (値段が
5.
じゃあ作れば良いのでは?
6.
ツイッタークライアント
7.
8.
を作った
9.
ツイッタークライアント(仮) 今できること • アイコン、相対時間付きでTLが流れる • ツイートの投稿 •
ツイートのお気に入り登録 • エラーがあったらなんか出てくる • マルチメディアツイートの表示 • 画像クリックでプレビュー
10.
ツイッタークライアント(仮) 今できないこと • TL以外のタブ機能(Reply、DM、List…) • リプライ、リツイートボタン •
✨👮👊 • 画像投稿 • ユーザーホームの観覧 • Lorem Ipsum
11.
12.
技術的なところ
13.
アプリケーション ビルド
14.
nw.js
15.
nw.js • node.js +
HTML + CSS + JSで デスクトップアプリが作れる • 旧 node-webkit • node.jsのフォーク、io.jsに移行した際に名称を 変更 • Windows / Mac / Linuxいずれもサポート
16.
nw.js • node.jsのapiもブラウザコンテキストのライブ ラリもどっちも使える • 例えばnodeのfsモジュールでディレクトリ構成 を取得し、グラフィカルに表示するなども •
つい最近、ウィンドウの透過をサポート
17.
nw.jsでビルド • package.jsonに main
としてエントリーポイン トのHTMLパスを書く • package.jsonがあるディレクトリを指定してビ ルドするとアプリ化される • 手動ならnuwk!が手軽
18.
19.
こんなnw.jsは嫌だ
20.
こんなnw.jsは嫌だ • browserコンテキストとnodeコンテキストの混在で混乱が起きる • ショートカットにESCとかEnterが登録できない •
Atom-Shellと覇権争い • windowオブジェクトの管理が大変 • アプリを作っているとviewのイベントに応じてトリガー引いて 処理を…という形になり、結局RESTfullなSPAっぽくなる
21.
JSフレームワーク (ライブラリ)
22.
React.js
23.
React.js • ブラウザーサイドのjsライブラリ(フレームワーク) • Facebook謹製 •
最近なんか流行ってるっぽい • ViewModelなのでデータバインドが楽ちん • 仮想DOMの差分レンダリングで超高速レンダリング • コンポーネント指向で再利用可能なパーツ
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 */ } } );
25.
StateとProps • Stateはコンポーネントの状態を表す変数 (読み書き可) Model的 • Propsはコンポーネントの外部から受け取った変数 (読み取りのみ可) Interface的 •
stateはsetState()で書き込みを行う • stateが変更されるとrenderが自動的に走る
26.
よく使うメソッド等 • propTypes コンポーネントが公開しているPropsのインターフェースを記述 開発者に向けたバリデーション • getInitialState() Stateの初期値を記述 •
componentDidMount() コンポーネントがDOMに追加された後に呼ばれる DOMに関する初期化処理 ajaxでデータを取ってきてsetState()など • render() 単一の仮想DOMを返す {}で囲むと評価された値が挿入される 同じコンポーネントが複数ある場合はkeyを指定しなければならない
27.
シンプルで分かりやすい
28.
こんなReact.jsは嫌だ
29.
こんなReact.jsは嫌だ • jsxのトランスパイル • jsにテンプレートが内包されている •
className ? • CSS当てにくい
30.
nw.js + React.js
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(); } );
32.
ディレクトリ構成
33.
browserifyとrequire • 一連のjsコードをbrowserifyしてapp.jsとして出力 • ルートのindex.htmlでscriptタグで読み込む事で 全てnodeコンテキストで書ける様になる •
browserifyがrequireを書き換える事に注意 browserifyしても使えないfsなどのモジュールは requireの代わりにwindow.requireを使う必要がある
34.
アプリケーションの公開 • ビルドされたアプリはソースコードが丸見え • oauthのコンシューマーキーなどを隠す必要がある •
nwsnapshotを使ってsnapshot.binを出力 • package.jsonで snapshot : snapshot.bin • htmlの読み込み後にsnapshotが評価される
35.
絶対皆で最高の クライアントを作ろうな!
36.
https://github.com/airtoxin/ twitter-client
Download now