ついんてっく

双子のエンジニア(兄:web、弟:インフラ)が気になること、今やってるプロジェクトとかについて書きます。ぶっちゃけ1人でやって続かなかったから監視体制を置いたのが強いサボりん坊や

React Native 導入編

React NativeのShow Caseを作成

どうも兄です
React Nativeでアプリを作れるようになってきてはいますが、 機能の網羅や、気になっているawesomeのチェックがまだまだできていません。

targetはReact Native 0.26

facebook.github.io の主なコンポーネントと、

github.com awesomeの気になっているライブラリのShowCaseを作りたいと思います。

初期処理

まずはプロジェクトを作成します。これは、すでにセットアップができた状態とします。

react-native init ReactNativeShowCases

初期化処理が走り、プロジェクトが作成されます。 現段階(2016/5時点)で0.26です。0.25から変わって使えなくなっているライブラリもあります。どのバージョンを使うかは検証する必要があるでしょう。

続きを読む

ハロー!仮想サーバ

どうも弟です。
昨今、色々なところで仮想サーバは正義と謳われているのを耳にします。 実際、今やっているプロジェクトでも、今まで物理サーバいっぱい置いて面倒見てきたシステムを、新しく仮想サーバで管理しようという話で進めています。

世の中には、仮想化についての記事はごまんとありますが、私がプロジェクトを通じて考えるメリットについてあげていこうと思います。

1.コスト面のメリット
2.リソース面のメリット
3.運用面のメリット


1.コスト面でのメリット


 個人的には仮想化の一番のメリットはコストメリットだと考えます。
 物理サーバでは、原則、一つの機能は一つのサーバで管理するという
 考え方で管理してきました。
 Webサーバ、アプリケーションサーバ、DBサーバで処理を分担する、
 いわゆる三層アーキテクチャでは、3台のサーバを用意し、
 それぞれで管理を行うのが一般的な考え方となります。
 私自身がプロジェクトで管理しているシステムも、役割ごとに
 物理サーバを用意して管理を行っていたため、サーバ台数分の
 初期投資費用やランニングコストが発生していました。

 仮想サーバは、一つのサーバの中で仮想化ソフトを用いて、複数
 サーバを管理するという考え方となります。
 三層アーキテクチャで言えば、一台のサーバを用意し、仮想化ソフトで
 3台のサーバを稼働させることになります。
 仮想サーバにすることで、初期投資費用やランニングコストを
 削減することが可能となるのです。


2.リソース面でのメリット


 各機能ごとにサーバを用意する場合、それぞれのサーバに、
 CPU、メモリ、ディスクといったリソースを用意します。
 システムを運用する中で、「CPUが足りなくて処理が遅い!」
 「ディスク容量が足りない!」といった場面では、お金を出して
 リソースを新たに購入するという手段が一般的となります。
 ただし、企業が新しくものを購入する場合、諸々の手続きを踏む必要が
 あります。私自身も経験しましたが、手続きが非常に面倒くさい
 大変時間がかかります。

 仮想化サーバでは、一つの物理サーバのリソースを複数の仮想化サーバ
 が共有して稼働しています。
 リソースが足りなくなった場合、各サーバの割当を変更することで、
 追加購入することなくリソースを追加することができるため、
 従来より簡単な手続きで済ますことができるのです。
 ただし、なぜリソースを追加することになったのかを説明する
 手間が必ず発生するのは、企業SIerの悲しいところです。。。


3.運用面でのメリット


 コスト面でのメリットにも書きましたが、サーバ台数が少なくなれば
 ランニングコストは低くなります。
 それは運用していく中でもメリットがあります。
 企業は自社がもっている資産を正確に開示する必要があります。
 サーバなどのIT機器も、もちろん資産ですので、台数等を正確に把握
 する必要があります。数台であれば簡単ですが、何十台、何百台とも
 なると、把握するだけでも相当な手間となります。
 また、サーバ故障は台数分だけ可能性があり、台数が増えれば増える
 ほど運用は大変となります。

 仮想化サーバは「台数を削減してコストを減らす」ことを目的に
 スタートすることが多いのですが、台数が減ることで日々の運用にも
 メリットがあるというわけです。




以上が、私がプロジェクトを通じて考える仮想化のメリットです。
コスト面を突き詰めていけば、自社でサーバを持たない、いわゆる
クラウドサービス」を利用する方法で、仮想化のメリットは更に
広がると考えており、今はAWSを勉強しています。
今後の記事では、クラウドサービス(AWS)についての紹介をしていければ
と考えている次第です。

ハロー! React Native

Hello! React Native

どうも兄です。
React Nativeの概要、印象、始め方を共有します。
僕はWebが本職で、ネイティブはかじった程度です。そんな中、同僚からReact Nativeがとても良いとの話を聞き触りだしてハマったというのが経緯です。React Nativeを触って要所で感じたことは「Web脳 <-> Native脳」の切り替えが少ないということです。
実際に触ってみた印象を、まだまだ勉強中の身ですが、なるべく噛み砕いて伝えれれば幸いです。

React Nativeの概要

facebook.github.io Facebook社のOSSで、JavascriptとReactを用いてネイティブアプリを作るライブラリです。React.jsを触ったことある人は記法が似ている事に驚くと思います。

We call this approach “learn once, write anywhere.”

Facebookが提唱するアプローチです。「一度覚えれば、どこでも書ける」 実際に触ってみて、これが誇張表現でないと感じました。

React.js

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

React Native

var React = require('react');
var ReactNative = require('react-naative');
var {View, Text} = ReactNative;

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <View><Text>Seconds Elapsed: {this.state.secondsElapsed}</Text></View>
    );
  }
});

module.exports Timer;

これはA JavaScript library for building user interfaces | ReactのサンプルをReact Nativeに置き換えたものです。 実際に動かしてないのでerrorになるかもしれませんが、ここで言いたいのは、ほぼ、renderの書き換えでいけた。という事実です。 getInitialState,componentDidMount,componentWillUnmountのmethodも用意されています(初期処理やpropsの変更のmethod)。 カメラやローケションなどを使うデバイス特有の所や、エントリポイントなど異なる書き方はありますが、 React Nativeのとっつき易さを感じてもらえれば幸いです。

※上記の書き方はES5の書き方になります。React NativeはあるバージョンからES6をサポートしています(すみません忘れましたw) そのため、OSSのComponentを使おうとすると、ES5とES6が混じってるのでどっちを使うか混乱すると思います。
今のプロジェクトの状況がex.プロジェクトでは主にES5を使っている。場合は無理にES6を使う必要はないのかなぁと思います。。。ただ、今から出るOSSがES6で書かれてるケースが多いので何とも言えませんが(汗)
僕はCoffee Scriptで書くケースが多かったのと、練習のためES6に挑戦しています。

次回は、始め方を書きたいと思います。

始めるにあたって参考にした記事

qiita.com 一人アドベントカレンダーです。React Nativeの導入からデザインパターンのReduxの導入まで発展まであり、ずっと助けれれてる記事です。つーか、一人アドベントカレンダーできるってクソかっけぇ。。。

facebook.github.io 本家のスタート方法。基本はStep通りにやればいけると思います。 Androidのtarget SDKインストールとGenymotionのインストールでつまづきました(泣) iOSに比べるとStepが若干複雑な印象です。

双子でITブログ 自己紹介(兄)

双子でIT業界で働いている者です。

Output件備忘録のためにブログを書こう。書こう。と思いながら、生まれ持っただらけ癖のために一人ではできず監視体制を置いた兄です。1週間サボると相方にお酒を奢るという終わらないラットレース(今決めた)の元、なるべく続けて生きていきたいと思います。

簡単に自己紹介
人物 :双子(兄)
年齢 :弟に同じ
所属 :SIer -> Web

今までやってきたこと:
SEからWebの華やかなイメージに憧れ転職。ミーハー気質。 業務系のアプリ開発を経て、Webアプリ開発をしながら、今は何でも屋に近い働き。 アプリ構成やアーキテクチャを考えてる時が一番幸せ。

目指すところ:
フロント~サーバーサイドのアーキテクチャの選定から実装までゴリゴリできる人。 フロントが好きなので、そこについてもう少し明るくなりたい。

とりあえずの目標:
React.jsにハマっているので、それについて共有していきたいです。

コードベースや参照元を明確にした読みやすい記事を書きたいです。 よろしくお願いします。

双子でITブログ 自己紹介(弟)

双子でIT業界で働いている者です。

 

自身が学んだことのアウトプット、または備忘録のため、形にして残していこうという目的のもとブログを始めました。

 

簡単に自己紹介

人物 :双子(弟)

年齢 :社会人6年目

所属 :SIer

今までやってきたこと:金融業界、保険業界でインフラ周りを広く浅く担当。

           OSはLinx(Unix)、DBはOracle

           要件定義よりの仕事が多く、調整SE的な立ち回りを

           やることも多々。。。

目指すところ    :最終的には、サーバ構築→ゴリゴリチューニングが

           可能な人になりたいと考えています。

とりあえずの目標  :AWSを使ってサーバ構築する。

           目的に応じてサーバ構築できる知識を整理していきたい。

           

 

週1程度で記事を発信していくことを目標にやっていきます。