今日の進捗

最近の進捗

進捗

・Node.jsの環境変数について少し賢くなった
・サイトを公開した(6/12)
・その他色々

明日の進捗目標

・react nativeを進める

react-router-domとMaterial-UIを一緒に使うメモ

react-router@v4からパッケージが分離されたので、これからはreact-router-domを使おうとかで、react-routerからreact-router-domを使うことにした。

参考にしたサイト

React Router: Declarative Routing for React.js

React Router v4(next) が alphaからbetaになってぼちぼち変わってたので追従する - Qiita

Material-UI

react-routerでページ遷移にちょっとしたアニメーションを付ける | WebDesign Dackel

コードと結果

import React, { Component } from 'react'
import ReactDOM from'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import FlatButton from 'material-ui/FlatButton'
import { Home } from './home.js'
import { About } from './about.js'

class Action extends Component {
  render () {
    return (
      <Router>
        <div>
          <FlatButton label="home" containerElement={<Link to="/" />} />
          <FlatButton label="about" containerElement={<Link to="/about" />} />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    )
  }
}

export { Action }

f:id:unecocc:20170607010457p:plain

解説

homeとaboutページをimportで読み込み。< Route/>でurlと表示するページのコンポーネントを設定。< FlatButton/>内に< Link/>を設定することでMaterial-UIの装飾が可能。

aboutページでリロードするとエラーになる。未解決。

// エラー内容
Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy.

今日の進捗

ちょっとサボってしまった。

今日の進捗

・react-router-domでルーティングの実装
・Material-UIで装飾
・webpack-dev-serverのお勉強
・ES6のデコレーターのお勉強

解決しなかったこと

・ES6でクラス直下にプロパティを設定できない
・↑これが解決できてないのでMobXの勉強ができてない

今日の進捗

今日の進捗

・about, menuのデザインが一応完成

Browsersyncで実機テストができないのは無線LANのバグ?らしい。多分。
CSSを書くのが辛いので明日はJSSを勉強したいと思う。
JSSはマテリアルUIに含まれているらしい。

Material UI

boilerplateというものの存在を知った。でもいまいちよく分からない。「boilerplate ノットイコール library」らしい。「こうやって書きましょう」っていうコーディングする際のルール本みたいなイメージ?だという認識でいいのかな。

明日の進捗目標

・マテリアルUI(JSS)の勉強
・react nativeを触る

react nativeはしばらく触ってなかったので明日は復習になりそう。

今日の進捗

今日の進捗

・改行問題の解決
・homeとaboutとmenuのstylとりあえず完成

改行問題は dangerouslySetInnerHTML={{__html: 〜}} 解決した。

明日の進捗目標

・実機テストの問題
・スライドショーの実装(できれば)

今日の進捗

土日はwebpackとnpmのお勉強をしていた。

今日の進捗

・取得したFacebook記事の投稿日時の変換
・配列とオブジェクト、map関数について少し賢くなった

配列.map( item => )
配列の[0]〜[n]内の各要素をitemで使いたいとき、同じプロパティごとにまとめるとダメなことが分かった。分かりにくいのでcode pen参照。
js 配列にオブジェクトを追加
messageやidごとに1つの要素としてまとめるのではなく、それぞれ1つずつを含んだオブジェクトを作ること。

明日の進捗目標

・実機でloading画面が終わらないエラーを解決

今日の進捗

今日の進捗

・portraitのメニュー表示時にアニメーションするように仕様を変更
・portraitのメニュー切り替え時に関する諸々のバグを修正
Facebookの記事を取得、表示(まだ途中)

今日は結構進んだと思う。
メニュー表示時のアニメーション(表示するときにふわっと表示させる)のはCSSTransitionGroupを使った。

facebook.github.io

メニュー切り替えのバグに3時間もかかってしまった。
Facebookの記事を取得して表示するには以下の記事を参考にした。

cly7796.net

記事では「jsonデータをPHPで取得して、その後にJavaScriptで表示」と書いてあったけど、今回はsuperagentを使った。

github.com

qiita.com

これならPHPを書かなくて済む。
1つ目の記事のjsonを取得するURLを.get(ここ)に書いて終わり。

解決しなかったこと

Facebookの投稿日時の表示?の変更

取得した状態だと2017-05-20T12:00:00+0000みたいな感じ。
これを西暦と月と日にちで取得したい(配列に保存したい)んだけども、上手なやり方はないか探し中。これを変数に入れて.sliceでそれぞれ切り出す方法を考えてるけど、もっときれいに(上手に)取り出して保存する方法はないかな。

改行問題は今日は触ってない。困った。