Mastodonを読む/画面描画の流れ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[Mastodonを読む]]
#contents
*はじめに [#u7813e37]
ここまでのおさらい。
-「/」（home#index）にアクセスしたときに返されるのは空のd...
-MastodonはReactとReduxを使用している
-react-railsを使うことでdata-react-class属性を付けたコン...
今回はこのrenderの先を見ていきます。
*app/assets/javascripts/components/containers/mastdon.jsx...
読解のスタートとなるのはmastodon.jsxです。ファイルの初め...
-パス指定のないもの。react-reduxやreact-routerなど。これ...
-パス指定のあるもの。../store/configureStore、../actions/...
importが終わると次の行があります。
#code{{
const store = configureStore();
const initialState = JSON.parse(document.getElementById("...
store.dispatch(hydrateStore(initialState));
const browserHistory = useRouterHistory(createBrowserHist...
basename: '/web'
});
}}
Mastodonではローカルタイムライン、連合タイムラインなどを...
storeはReduxで出てくる概念です。[[「Redux入門【ダイジェス...
その後のロケールの処理と思われるところは飛ばして、Contain...
#code{{
render () {
const { locale } = this.props;
return (
<IntlProvider locale={locale} messages={getMessages...
<Provider store={store}>
<Router history={browserHistory} render={applyR...
<Route path='/' component={Container}>
<IndexRedirect to="/getting-started" />
<Route path='getting-started' component={Ge...
<Route path='timelines/tag/:id' component={...
<Route path='statuses/new' component={Compo...
<Route path='statuses/:statusId' component=...
<Route path='statuses/:statusId/reblogs' co...
<Route path='statuses/:statusId/favourites'...
<Route path='accounts/:accountId' component...
<Route path='accounts/:accountId/followers'...
<Route path='accounts/:accountId/following'...
<Route path='follow_requests' component={Fo...
<Route path='blocks' component={Blocks} />
<Route path='mutes' component={Mutes} />
<Route path='report' component={Report} />
<Route path='*' component={GenericNotFound}...
</Route>
</Router>
</Provider>
</IntlProvider>
);
}
}}
(。´･ω･)?
**Router [#rf77f5bb]
PrroviderはReduxにより提供されているコンポーネントです。I...
というわけで、調べる必要があるのはRouterとRouteです。なん...
Routerコンポーネントは次のようにimportされています。
#code{{
import {
applyRouterMiddleware,
useRouterHistory,
Router,
Route,
IndexRedirect,
IndexRoute
} from 'react-router';
}}
[[React Router>https://reacttraining.com/react-router/]]...
ところで、「/」にアクセスしているのにいつの間にかアドレス...
#code{{
<Route path='/' component={Container}>
<IndexRedirect to="/getting-started" />
<Route path='getting-started' component={Ge...
}}
+画面全体を表示するコンポーネントとしてContainerを使う
+「/」へのアクセスは「/getting-started」にリダイレクトする
+「getting-started」にアクセスされたらGettingStartedコン...
という動きをするようです。
***react-routerのバージョン [#b6eaaa17]
ところで、React Routerのページに行ってドキュメントを見て...
実は、Mastodonが利用しているreact-routerのバージョンは2.8...
#code{{
"dependencies": {
省略
"react-router": "^2.8.0",
}}
**Container [#p8580847]
さて、画面全体にContainerクラスが使われることがわかったの...
#code{{
render () {
// Hide some components rather than unmounting them t...
// quickly and keep the view state such as the scroll...
const persistentsView = this.state.renderedPersistent...
<div aria-hidden={persistent.hidden} key={persisten...
<persistent.component shouldUpdateScroll={persist...
</div>
);
return (
<UI>
{this.state.mountImpersistent && this.props.child...
{persistentsView}
</UI>
);
}
}}
前半部分はコメントにあるように一回作成したコンポーネント...
*app/assets/javascripts/components/features/ui/index.jsx ...
では次にUIコンポーネントに移りましょう。UIコンポーネント...
例によってrenderメソッドです。（divのstyleのところは本来...
#code{{
render () {
const { width, draggingOver } = this.state;
const { children } = this.props;
let mountedColumns;
if (isMobile(width)) {
mountedColumns = (
<ColumnsArea>
{children}
</ColumnsArea>
);
} else {
mountedColumns = (
<ColumnsArea>
<Compose withHeader={true} />
<HomeTimeline shouldUpdateScroll={() => false} />
<Notifications shouldUpdateScroll={() => false}...
<div style={ {display: 'flex', flex: '1 1 auto'...
</ColumnsArea>
);
}
return (
<div className='ui' ref={this.setRef}>
<TabsBar />
{mountedColumns}
<NotificationsContainer />
<LoadingBarContainer className="loading-bar" />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.c...
</div>
);
}
}}
画面幅に応じて表示するコンポーネントを変えています。これ...
*app/assets/javascripts/components/features/getting_start...
最後に、GettingStartedコンポーネントです。って、クラスじ...
#code{{
const GettingStarted = ({ intl, me }) => {
let followRequests = '';
if (me.get('locked')) {
followRequests = <ColumnLink icon='users' text={intl....
}
return (
<Column icon='asterisk' heading={intl.formatMessage(m...
<div className='getting-started__wrapper'>
<ColumnSubheading text={intl.formatMessage(messag...
<ColumnLink icon='users' hideOnMobile={true} text...
<ColumnLink icon='globe' hideOnMobile={true} text...
<ColumnLink icon='star' text={intl.formatMessage(...
{followRequests}
<ColumnLink icon='volume-off' text={intl.formatMe...
<ColumnLink icon='ban' text={intl.formatMessage(m...
<ColumnSubheading text={intl.formatMessage(messag...
<ColumnLink icon='book' text={intl.formatMessage(...
<ColumnLink icon='cog' text={intl.formatMessage(m...
<ColumnLink icon='sign-out' text={intl.formatMess...
</div>
<div className='scrollable optionally-scrollable' s...
<div className='static-content getting-started'>
<p>
<FormattedMessage id='getting_started.open_so...
values={ {
github: <a href="https://github.com/toots...
apps: <a href="https://github.com/tootsui...
} } />
</p>
</div>
</div>
</Column>
);
};
}}
最後のnoticeのところ、FormattedMessageの表示要素としてま...
ともかく、これにより表示されているのはPCだと右端のカラム...
&ref(getting-start_pc.jpg);
&ref(getting-start_smartphone.jpg);
*おわりに [#o645961f]
今回はコンポーネントのレンダリングについて見てきました。R...
一方、以下の処理はまだ手付かずです。以降、これらの処理に...
-タイムラインの表示
-トゥートした時の処理
-Mastodonクラスに書いてあるストリーミングの記述
終了行:
[[Mastodonを読む]]
#contents
*はじめに [#u7813e37]
ここまでのおさらい。
-「/」（home#index）にアクセスしたときに返されるのは空のd...
-MastodonはReactとReduxを使用している
-react-railsを使うことでdata-react-class属性を付けたコン...
今回はこのrenderの先を見ていきます。
*app/assets/javascripts/components/containers/mastdon.jsx...
読解のスタートとなるのはmastodon.jsxです。ファイルの初め...
-パス指定のないもの。react-reduxやreact-routerなど。これ...
-パス指定のあるもの。../store/configureStore、../actions/...
importが終わると次の行があります。
#code{{
const store = configureStore();
const initialState = JSON.parse(document.getElementById("...
store.dispatch(hydrateStore(initialState));
const browserHistory = useRouterHistory(createBrowserHist...
basename: '/web'
});
}}
Mastodonではローカルタイムライン、連合タイムラインなどを...
storeはReduxで出てくる概念です。[[「Redux入門【ダイジェス...
その後のロケールの処理と思われるところは飛ばして、Contain...
#code{{
render () {
const { locale } = this.props;
return (
<IntlProvider locale={locale} messages={getMessages...
<Provider store={store}>
<Router history={browserHistory} render={applyR...
<Route path='/' component={Container}>
<IndexRedirect to="/getting-started" />
<Route path='getting-started' component={Ge...
<Route path='timelines/tag/:id' component={...
<Route path='statuses/new' component={Compo...
<Route path='statuses/:statusId' component=...
<Route path='statuses/:statusId/reblogs' co...
<Route path='statuses/:statusId/favourites'...
<Route path='accounts/:accountId' component...
<Route path='accounts/:accountId/followers'...
<Route path='accounts/:accountId/following'...
<Route path='follow_requests' component={Fo...
<Route path='blocks' component={Blocks} />
<Route path='mutes' component={Mutes} />
<Route path='report' component={Report} />
<Route path='*' component={GenericNotFound}...
</Route>
</Router>
</Provider>
</IntlProvider>
);
}
}}
(。´･ω･)?
**Router [#rf77f5bb]
PrroviderはReduxにより提供されているコンポーネントです。I...
というわけで、調べる必要があるのはRouterとRouteです。なん...
Routerコンポーネントは次のようにimportされています。
#code{{
import {
applyRouterMiddleware,
useRouterHistory,
Router,
Route,
IndexRedirect,
IndexRoute
} from 'react-router';
}}
[[React Router>https://reacttraining.com/react-router/]]...
ところで、「/」にアクセスしているのにいつの間にかアドレス...
#code{{
<Route path='/' component={Container}>
<IndexRedirect to="/getting-started" />
<Route path='getting-started' component={Ge...
}}
+画面全体を表示するコンポーネントとしてContainerを使う
+「/」へのアクセスは「/getting-started」にリダイレクトする
+「getting-started」にアクセスされたらGettingStartedコン...
という動きをするようです。
***react-routerのバージョン [#b6eaaa17]
ところで、React Routerのページに行ってドキュメントを見て...
実は、Mastodonが利用しているreact-routerのバージョンは2.8...
#code{{
"dependencies": {
省略
"react-router": "^2.8.0",
}}
**Container [#p8580847]
さて、画面全体にContainerクラスが使われることがわかったの...
#code{{
render () {
// Hide some components rather than unmounting them t...
// quickly and keep the view state such as the scroll...
const persistentsView = this.state.renderedPersistent...
<div aria-hidden={persistent.hidden} key={persisten...
<persistent.component shouldUpdateScroll={persist...
</div>
);
return (
<UI>
{this.state.mountImpersistent && this.props.child...
{persistentsView}
</UI>
);
}
}}
前半部分はコメントにあるように一回作成したコンポーネント...
*app/assets/javascripts/components/features/ui/index.jsx ...
では次にUIコンポーネントに移りましょう。UIコンポーネント...
例によってrenderメソッドです。（divのstyleのところは本来...
#code{{
render () {
const { width, draggingOver } = this.state;
const { children } = this.props;
let mountedColumns;
if (isMobile(width)) {
mountedColumns = (
<ColumnsArea>
{children}
</ColumnsArea>
);
} else {
mountedColumns = (
<ColumnsArea>
<Compose withHeader={true} />
<HomeTimeline shouldUpdateScroll={() => false} />
<Notifications shouldUpdateScroll={() => false}...
<div style={ {display: 'flex', flex: '1 1 auto'...
</ColumnsArea>
);
}
return (
<div className='ui' ref={this.setRef}>
<TabsBar />
{mountedColumns}
<NotificationsContainer />
<LoadingBarContainer className="loading-bar" />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.c...
</div>
);
}
}}
画面幅に応じて表示するコンポーネントを変えています。これ...
*app/assets/javascripts/components/features/getting_start...
最後に、GettingStartedコンポーネントです。って、クラスじ...
#code{{
const GettingStarted = ({ intl, me }) => {
let followRequests = '';
if (me.get('locked')) {
followRequests = <ColumnLink icon='users' text={intl....
}
return (
<Column icon='asterisk' heading={intl.formatMessage(m...
<div className='getting-started__wrapper'>
<ColumnSubheading text={intl.formatMessage(messag...
<ColumnLink icon='users' hideOnMobile={true} text...
<ColumnLink icon='globe' hideOnMobile={true} text...
<ColumnLink icon='star' text={intl.formatMessage(...
{followRequests}
<ColumnLink icon='volume-off' text={intl.formatMe...
<ColumnLink icon='ban' text={intl.formatMessage(m...
<ColumnSubheading text={intl.formatMessage(messag...
<ColumnLink icon='book' text={intl.formatMessage(...
<ColumnLink icon='cog' text={intl.formatMessage(m...
<ColumnLink icon='sign-out' text={intl.formatMess...
</div>
<div className='scrollable optionally-scrollable' s...
<div className='static-content getting-started'>
<p>
<FormattedMessage id='getting_started.open_so...
values={ {
github: <a href="https://github.com/toots...
apps: <a href="https://github.com/tootsui...
} } />
</p>
</div>
</div>
</Column>
);
};
}}
最後のnoticeのところ、FormattedMessageの表示要素としてま...
ともかく、これにより表示されているのはPCだと右端のカラム...
&ref(getting-start_pc.jpg);
&ref(getting-start_smartphone.jpg);
*おわりに [#o645961f]
今回はコンポーネントのレンダリングについて見てきました。R...
一方、以下の処理はまだ手付かずです。以降、これらの処理に...
-タイムラインの表示
-トゥートした時の処理
-Mastodonクラスに書いてあるストリーミングの記述
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
