ページ

2016年9月29日木曜日

Xcode小ネタ集 1


備忘録としての小ネタ集です。
普段Xcodeばっかり触っていたら忘れないかもしれませんが、
久しぶりに触るとすっかり忘れてしまうので・・

複数のXcode切り替え


開発中などで複数のXcodeを切り替えて使う時用です。
xcrunなどコマンドツールなどを使わない場合は、単純に
現在のXcodeをリネームしてここからお目当のバージョンの
Xcodeをダウンロードして使います。
例)Xcode.appをXcode8.appにリネーム
新たにダウンロードしたバージョン7.3.1とバージョン8が共存
次にコマンドツールを使う場合、パスを切り替える必要があります。
まずは現在のパスを確認
$ xcode-select -print-path
次に切り替えたいバージョンのXcodeのパスを設定します。
例) Xcode7.appにパスを通す場合
$ xcode-select --switch /Applications/Xcode7.app
うまく切り替わったか確認
$ xcrun --find xcodebuild
現在のアクティブなパスのxcodebuildを表示するはずです。

SearchPathsなどを設定する時によく使うマクロ


ヘッダーファイルのパスやらリンクさせるライブラリーのパスやらを
設定する際によく使うマクロ
例) /Users/hoge/Develop/SampleApp/SampleApp.xcodeproj
マクロ名展開後
$(SRCROOT)/Users/hoge/Develop/SampleApp
$(PROJECT_NAME)SampleApp
$(FULL_PRODUCT_NAME)SampleApp.app
$(CONFIGURATION)Debug/Release

2016年9月25日日曜日

Reactを使う 4 - state -


今回はstateを使ってみたいと思います。
state
propsとの違いは、値の変更が可能で
コンポーネント作成後でも値を設定できます。

サンプルとして今回はいいねボタンを作成してみたいと思います。
最終的な完成版がこちら↓
gif1
しょぼいというツッコミは無しで・・

コンポーネント作成

構成は今までと同じで以下の通りです。
.
├── index.html
├── package.json
├── src
│   ├── container.js
│   └── good_button.jsx ☆
└── webpack.config.js
今回新たにgood_button.jsxを作成します。
最終的な内容がこちら↓
import React from 'react';
import ReactDOM from 'react-dom'

class GoodButton extends React.Component {
  constructor() {
    super();
    // [1]
    this.state = {
      goods: 0
    };
    this.handleClick = this.handleClick.bind(this); // [4]
  }

  handleClick() {
    this.setState({goods: this.state.goods + 1}); // [3]
  }

  render() {
    return (
      // [2]
      <button onClick={this.handleClick}>
        +{this.state.goods}
      </button>
    );
  }
}

ReactDOM.render(
  <GoodButton />,
  document.getElementById('container')
);
GoodButtonクラスは今回goodsというstateの値を持っています。
まずコンストラクタでgoods0に初期化しています。・・・[1]
次にボタンが押されたイベントでthis.handleClickを指定しています。・・・[2]
handleClickでは現在のgoodsの値を+1しています。・・・[3]
とまあいたってシンプルです。

ちなみに・・
[4]の処理は何をしているかというと、handleClick内でthisを使ってますが
[4]の処理がないとbuttonのthisになってしまいエラーになってしまいます。
試しに[4]の処理をコメントアウトして実行するとコンソールに
以下のエラーが表示されました。


今回のはしょぼいですが、CSSをちゃんと使ってかっこいいボタンも作れると思います。

2016年9月22日木曜日

GoogleTripsアプリを使ってみた


9月19日にGoogleから発表された「Google Trips」のiOS版を使ってみました。
「Google Trips」は旅行の計画を立てる時に使用するアプリです。
iOS版とAndroid版があります。


特に旅行の予定はまだ無いのですが、次旅行に行く時の為に
インストールして使ってみようかと・・

早速インストールして起動


「GET STARTED」を押して次々と進んでいくと
現在位置の使用許可と通知の許可画面が出てくるので好きな方を選択
   

設定が完了してホーム画面に進むと、過去に旅行した内容が表示されていました。



これはGmailと連携して過去の情報をピックアップしてるようです。
設定で連携しないように変更する事ができます。


ホーム画面に「Where do you want to go?」とあるので早速行きたい所を入力してみます。



今回は大阪にしてみました。USJ行きたい・・・
すると大阪のTripが表示されます。
 


複数のカテゴリがあり、それぞれ


  • Reservations 予約情報
  • Things to do オススメの場所など
  • Day plans 一日のプラン(オススメもしてくれる)
  • Saved places 保存した情報
  • Food & Drink 食事の情報
  • Getting around 交通機関などの情報
  • Need to know 様々な情報(緊急時の連絡先など)


となっています。
Day plansを開いてみると
 



オススメを提案してくれてます。
ミュージアム中心だったり子供と一緒の場合のプランなどテーマが分かれてます。
またオススメプランからカスタマイズなども可能で自分用のプランを作成できたり
します。

最後に「CREATE TRIP」から日程などを入力し旅行プランを作成できます。



アプリを使ってみて、一箇所に旅の情報が集約できるのは便利だと思いました。
また機械学習を使ったオススメの提示などはさすがGoogleといった感じでしょうか。
今後旅行の際に使ってみたいと思います。



Google Trips
Google Trips
開発元:Google, Inc.
無料
posted with アプリーチ

2016年9月19日月曜日

Reactを使う 3 - propsのValidationとデフォルト値 -


前回やったpropsですが、値チェックデフォルト値
設定する事ができます。

propsの値チェック(Validation)
前回のサンプルプログラムhello.jsxを以下のように修正します。
import React from 'react';
import ReactDOM from 'react-dom'

class Hello extends React.Component {

  // 新規追加(値チェック)
  static get propTypes() {
    return {
      date: React.PropTypes.number.isRequired
    };
   }

  render() {
    ~ 省略 ~
  }
}
本来はDateオブジェクトがpropsのdateに設定されるのですが、
今回はわざとNumberがpropsのdateに設定される+必須項目の制約を設けています。
// 型が数値かつ必須のプロパティ
date: React.PropTypes.number.isRequired
この状態で実行するとコンソールに以下のようなWarningが表示されます。

propTypesで設定できるチェック項目は以下になります。
チェック対象の型設定値
ArrayReact.PropTypes.array
BooleanReact.PropTypes.bool
FunctionReact.PropTypes.func
NumberReact.PropTypes.number
ObjectReact.PropTypes.object
StringReact.PropTypes.string
SymbolReact.PropTypes.symbol
また、以下のようなチェックも可能です。
  • クラスのinstanceチェック
aInstance: React.PropTypes.instanceOf(aClass)
  • propsの値がチェック値のいづれか
values: React.PropTypes.oneOf(['One', 'Two'])
  • propsの値がいづれかの型
types: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(aClass)
  ])
その他にも色々ありますので、詳しくは公式ページで。

propsのデフォルト値
次はデフォルト値を設定してみたいと思います。
hello.jsxに以下に修正します。
class Hello extends React.Component {

  // 新規追加(値チェック)
  static get propTypes() {
    return {
      date: React.PropTypes.instanceOf(Date).isRequired
    };
   }

  // 新規追加(デフォルト値)
  static get defaultProps() {
   return  {
      date: new Date(1980, 1, 1, 11, 11, 11)
   };
  }

  ~ 省略 ~
}

setInterval(function() {
  ReactDOM.render(
    <Hello  />, // propsの指定なし
    document.getElementById('container')
  );
}, 1000);
dateが未設定だった場合デフォルト値としてnew Date(1980, 1, 1, 11, 11, 11)
設定しています。値チェックはDateオブジェクトが設定されるように修正しています。
実際に動作させてみると以下のようになります。

ちゃんとデフォルト値の11:11:11が表示されています。

2016年9月14日水曜日

ngrok - localhostを簡単に外部公開 -


開発している時に、ローカルの開発環境をテストサーバーに上げるのが面倒だったり、
デモなどで少しの間だけ外から見れるようにしたい!!
なんて事があるかと思います。
そんな時にはngrokが便利です。

ngrokとは
localhostの環境を外から見れるようにセキュアなトンネルを作ってくれる
便利なツールです。

インストール


ダウンロードのページに行って、環境にあったバイナリファイルを
ダウンロードするだけです。
筆者の場合(MacOS)ですが、ダウンロードして、バイナリファイルをパスの通ってる
/usr/local/bin配下に置きました。
ちゃんとインストールできたかは、
$ ngrok version
ngrok version 2.1.3
で確認できます。

実行


試しに、簡単なRackアプリケーションをlocalhostで起動し、
外部に公開してみます。
まずは普通にRackアプリケーション起動
$ bundle exec rackup
[2016-09-11 01:07:29] INFO  WEBrick 1.3.1
[2016-09-11 01:07:29] INFO  ruby 2.1.0 (2013-12-25) [x86_64-darwin14.0]
[2016-09-11 01:07:29] INFO  WEBrick::HTTPServer#start: pid=46061 port=9292
↑こんな感じで起動できました。この時http://localhost:9292
アクセスできます(ポート=9292)
そして実際ngrokを使って外部に公開してみます。
$ ngrok http 9292
ngrok by @inconshreveable        (Ctrl+C to quit)

Tunnel Status                 online
Version                       2.1.3
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://XXXXXX.ngrok.io -> localhost:9292
Forwarding                    https://XXXXXX.ngrok.io -> localhost:9292
エラーが起きなければ↑こんな感じで起動します。
そして実際外部からアクセスする際はhttp://XXXXXX.ngrok.ioまたは
https://XXXXXX.ngrok.ioでアクセスします。
実際にアクセスしてみると、Rackアプリケーションを立ち上げたコンソールに
アクセスログが残っているかと思います。

管理画面


また、ngrok起動中にhttp://localhost:4040にアクセスすると
管理画面が表示されます。

ステータスの表示や

リクエストの詳細などが見れます。

ん〜便利。

2016年9月10日土曜日

Reactを使う 2 - JSXとprop -


前回に続いてReactをやって行こうと思います。
JSX

前回の構成ですが、
.
├── README.md
├── index.html
├── package.json
├── src
│   ├── container.js
│   └── hello.jsx
└── webpack.config.js
こんな感じでした。(なぜかREADME.mdが入っちゃってますが無視して下さい)
大まかな起動の流れとしては、
  1. webpack.config.jsで指定したパスのモジュールをbabelで変換
  2. この時hello.jsxがjsにコンパイルされる
  3. コンパイルされ出力されたbundle.jsをindex.htmlでロード
このような流れになります。
ここで、JSXというのが出てきましたが、何かというと・・・
XML-likeにタグを書いてjsにコンパイルして使うものです。
詳しくはこちら

prop

次はただ表示させるだけのサンプルではなく、動くものを作ってみたいと思います。
と言う訳で画面に現在時刻を表示させてみたいと思います。
前回のhello.jsxを以下のように修正します。
import React from 'react';
import ReactDOM from 'react-dom'

class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <p>
          Now : {this.props.date.toTimeString()}
        </p>
      </div>
    );
  }
}

setInterval(function() {
  ReactDOM.render(
    <Hello date={new Date()} />,
    document.getElementById('container')
  );
}, 1000);
実行して↓のように現在時刻をリアルタイムに表示してくれてればOKです。
gif
この時
ERROR in ./src/hello.jsx
Module build failed: SyntaxError:
/Users/XXX/src/hello.jsx:
Adjacent JSX elements must be wrapped in an enclosing tag (8:6)
このようなエラーが出る場合はタグがちゃんと囲まれてない場合があります。
※ どうもJSXでは一つのタグで囲まれたものしかreturnできないようです

ここで出てきたpropsですがこれは親コンポーネントなどから渡されたデータを
子コンポーネントのプロパティとして扱う事ができ、アクセスする際はpropsを使用します。

上のサンプルではsetIntervalで1秒おきに描画してますが、その際に
date={new Date()}でdateに現在時刻を設定し、子コンポーネントのHelloで
{this.props.date.toTimeString()}にてプロパティからdateにアクセスしています。