React nativeについて

アジェンダ

  1. ReactNativeのメリットデメリットとデバック
  2. プロジェクト作成
  3. Reactの概要
  4. Flexbox Layoout
  5. ScrollViewとListView
  6. ライブラリ
  7. 実機ビルド
  8. iOS申請
  9. 参考資料

0.ReactNativeのメリットデメリット

・Reactを用いてiOSAndroidのネイティブアプリを構築できるフレームワーク
JavaScriptからネイティブのAPIが呼ばれる
・一度覚えればどのプラットフォーム向けにも書けるようになる

メリット

  • ネイティブアプリがJavaScriptで書ける
  • アプリを素早くビルドできる
  • CSSのサブセットがあるため、CSSでスタイリングできる

デメリット

  • ロジックはJavaScriptのため、重い処理が苦手
  • 複雑なUIになると、ネイティブコードを書かざるを得なくなる

デバッグ

⌘+Dでメニュー画面表示(iosの場合)

  • Debug JS Remotely - デベロッパーツールの機能が利用できる
  • Enable Live Reload - 保存のたびにリロードが走る(初期画面に戻る)
  • Enable Hot Reloading - 保存時に現在表示してる画面のままリロードが走る
  • Show Inspector - アプリのレイアウト確認ができる
  • Show Perf Monitor - パフォーマンスの確認ができる

1. プロジェクト作成

brew install node
brew install watchman
npm i -g react-native-cli
react-native init test && cd test
react-native run-ios

2.Reactの概要

Reactは Component というモジュールを使い、複数のComponentを組み合わせて実装します。 そして、コンポーネントがもつ値には、データをコントールする為にpropsとstateがあります。

class Text extends Component {
   constructor(props) {
     super(props);
     this.state = {
       showText: true
     };

     setInterval(() => {
      this.setState({
        showText: !this.state.showText
      });
     }, 1000);
   }

  render() {
    const text = this.state.showText? this.props.text : '';
    return (
      <div>
        <span style={{color: "red"}}>
          {text}
        </span>
      </div>
    );
  }
}

3. Flexbox Layoout

React Nativeでのレイアウトは、css flexboxと同じ設計を利用します。

render() {
  return (
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'powderblue'}} /> 
      <View style={{flex: 2, backgroundColor: 'skyblue'}} />
      <View style={{flex: 3, flexDirection: 'row'}} >
        <View style={{width: 30, backgroundColor: 'darksalmon'}} /> 
        <View style={{flex: 1, backgroundColor: 'lightsalmon'}} /> 
        <View style={{width: 100, backgroundColor: 'peachpuff'}} />
      </View> 
    </View>
  );
}

flexプロパティは要素の伸び率を指定できます。
上記は各Viewコンポーネントの高さ比率を1:2:3にしています。
親のViewにflex: 1を指定することで、画面全体に領域を広げています。
これによって、デバイスサイズに関係なくレイアウトすることができます。

flexDirectionではflexboxで要素を並べる方向を定めることができます。
デフォルトの縦方向がcolumn、横方向がrowです。
要素を固定長で指定することもできます。width: 40など。
他にも様々な関連プロパティがあり、柔軟にレイアウトすることができます。
cssとの違いはいくつかありますが、重要なのはz-indexを指定できないことです。
重ね順を変更するにはコンポーネントの順序を変えることで対応します。

Flexbox Layoout

4. ScrollView

スクロール領域を指定したい場合は、ScrollViewもしくはListViewで指定する必要があります。 それぞれの違いは以下です。

  • ScrollView
    要素が小さくて大きさが限られたものを表示する
    要素は基本的に不変

  • ListView
    要素が長いリスト
    要素が動的に変更される
    ScrollViewの内容は端末内であらかじめ全てレンダリングされます。
    ListViewはスクロールされた時に画面に入った要素をその都度レンダリングします。

      <ScrollView>
        <View style={{height: 400, backgroundColor: 'powderblue'}} >
          <Text style={{fontSize: 100}}>hoge</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'skyblue'}} >
          <Text style={{fontSize: 100}}>fuga</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'deepskyblue'}} >
          <Text style={{fontSize: 100}}>foo</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'dodgerblue'}} >
          <Text style={{fontSize: 100}}>bar</Text>
        </View>
      </ScrollView>

5. ルーティング

import React, { Component, PropTypes } from 'react';
import { AppRegistry, Navigator, Text, TouchableHighlight, View } from'react-native';

class MyScene extends Component{
  static propTypes = {
    title: PropTypes.string.isRequired
  };
  render() {
    return (
      <View style={{padding: 30}}>
        <Text>タイトル:{this.props.title}</Text>
      </View>
    );
  }
}

class AwesomeProject extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{title: 'MyInitialScene', index: 0}}
        renderScene={ (route,navigator) =>
          <MyScene title={route.title}/>
        }
      />
    )
  }
}

AppRegistry.registerComponent('AwesomeProject',()=>AwesomeProject);

6. ライブラリ

React Native向けのライブラリはnpmで提供されています。
ほとんどがnpm installで利用できますが、ものによっては設定ファイルを編集する必要があります。
Link: ( https://react.parts/native )

7. ReactNarive上のSyntax

Links1: ( http://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers ) Links1: ( http://lealog.hateblo.jp/entry/2016/05/29/233244 )

8. シュミレーターで実機ビルド確認

test/ios/test.xcodeprojにプロジェクトファイルがあります。 xcodeを開いて、再生マークをクリックします。

9. iOS申請

Link1: (http://examination-03.hatenablog.com/) ... (to be continued)

10. 参考資料

Link1: (https://github.com/besutome/slides/tree/master/20161016-ReactNative-handson)
Link2: (https://github.com/besutome/slides/tree/master/20160918-react-handson)
Link3: (http://yutamasun.sakura.ne.jp/blog/2016/03/21/react-native-01/)

年末大掃除のブランチを削除します。

リモートブランチで削除したブランチをローカルブランチでも削除する方法

 

git remote prune origin
git fetch --prune
 
 
Gitで複数ブランチで該当する単語を一括削除する方法
 
git branch | grep 単語 | xargs git branch -d
 

Facebookのインスタント記事に対応する方法

 

 

 

hyper-text.org

CssのWriting Modes

24ways.org

 

CssのWritingModeというプロパティに関して勉強します。

 

文字組み(Writing System)には、4つのWriting Modeがあります。

1. Latain-based systems ( 英語など... )

2. Arabic-based systems  ( アラビア文字など... )

3. Han based systems ( 中国語、日本語、韓国語など... )

4. Mongolian-based systems ( モンゴル文字など... )

 

 

writing-modeには、ベンダープレフィックスがあります。

-webkit-writing-mode: 

-ms-writing-mode: 

writing-mode: ◎

 

writing-modeの特徴 →  floatのように高さがなくなる?次の要素と同じ高さになる。

 

例 1 )

```

  

   writing-mode: vertical-rl; (縦にする)

transform: rotate(180deg); (180度角度が変わる)

   text-orientation: upright; (文字間隔が広くなる)

    text-transform: uppercase;(大文字にする)

```

 

(  Hatena Blogで試してみるとこのように見えます⇩  )

f:id:tech-master:20161226143831p:plain

http_build_query関数

phpのhttp_build_queryという関数を使うと、クエリ文字列(QUERY_STRING)を生成することができます。

 

smcx.jp

 

 

 

 

 

 

database 設計の基礎をお勉強

f:id:tech-master:20161030114935p:plain

 
 
-データ容量見積もり
-データ配置設計
-インデックス設計

floatを使うなら、flexboxを使おう

 

mozilla公式ページでは、現在はfloatよりもflexboxを使うレイアウトを推奨されています。取り残されないために、flexboxも勉強し直してみましょう。

 

http://dotinstall.com/lessons/basic_flexbox