気まぐれDeveloperブログ

2016年11月6日日曜日

PhoneGapを使用する 5 - React Hot Reloading Templateを試す -

Phonegapの公式テンプレートで
react-hot-loaderがあります。(※筆者のPhonegapのバージョン:6.3.2)

$ phonegap template list
・・・省略・・・
react-hot-loader   Starter PhoneGap project using React.js, Babel, Webpack and Hot Reloading.

PhonegapでReact.jsを使えて、環境はBabel、WebpackでHot Reloadingする
という事なので早速試してみたいと思います。

プロジェクト作成

プロジェクトの作成は以下のコマンドでサクッと作成できます。

$ phonegap create [プロジェクト名] --template react-hot-loader

作成したプロジェクトの構成は次のようになっています。

.
├── config.js
├── config.xml
├── env.js
├── hooks
├── package.json
├── platforms
├── plugins
├── res
├── src
│   ├── components
│   │   ├── Hello.js
│   │   └── Message.js
│   ├── css
│   │   ├── hello.css
│   │   ├── index.css
│   │   └── message.css
│   └── index.js
├── webpack.config.js
└── www
    ├── icon.png
    └── index.html

ちゃんとwebpack.config.jsが用意されています。
.jsxが見当たらないですが、Hello.js、Message.jsで実装されてます。

次に依存パッケージをインストールします。

$ npm install

これで準備完了です。

ブラウザで実行&確認

それでは早速実行してみたいと思います。
まずはブラウザで確認。

$ npm start

起動完了後http://localhost:8080を見てみると

↑のような画面が表示されており。ボタンを押すと「Hello World」と表示され
しばらく経つと消えます。

次にHot Reloadが効いているか確認してみます。

ちょっと分かりにくいかもしれませんが、ボタンの文字を修正し
保存するとちゃんとブラウザ側のボタンに反映されています。

iOSシュミレータで確認

次はiOSのシュミレータで確認してみます。
まずはiOS用のプラットフォームを追加。

$ phonegap cordova platform add ios

次にシュミレータで動作する用にビルドしてやる必要があります。
ビルドせずに動かすと以下のエラーが発生します。

Failed to load webpage with error: Could not connect to the server.

また、Phonegapを使用している場合、package.jsonを以下のように修正します。

・・・省略・・・
"scripts": {
  "android": "phonegap cordova run android",
  "ios": "phonegap cordova run ios",
  "prepare": "node config && webpack && phonegap cordova prepare",
  "build": "node config && webpack && phonegap cordova build",
  "start": "node config && HOST=0.0.0.0 webpack-dev-server",
  "test": "echo \"No tests (yet!) -- submit a PR?\" && exit 0"
},
・・・省略・・・

あとは、

$ npm run build -- ios
$ npm run ios

で↓のようにシュミレータで動作できればOKです。

まとめ

Hot Reloadもできて、Babel, Webpackも揃っているので、
とても使いやすいのではないかと思います。
今後PhonegapでReact.jsを使う必要がある場合はオススメです。

2016年11月3日木曜日

Docker Composeの利用

前回の記事で複数のコンテナを起動/停止する際に
シェルを作成し実行していましたが、
Docker Composeを使うとそこら辺をよろしくやってくれます。

Docker for Macをインストールすると一緒にインストールされます。

docker-compose.ymlの作成

前回はと言うと・・・

#!/usr/bin/env bash

DOCKER_HOME=$PWD

if [ -e $DOCKER_HOME/registry ]; then
  # 何もしない
else
  mkdir $DOCKER_HOME/registry
fi

docker run \
    -d \
    -p 5000:5000 \
    -v $DOCKER_HOME/registry:/var/lib/registry \
    --name docker_registry2 \
    registry:2

docker run \
    -d \
    -e ENV_DOCKER_REGISTRY_HOST=[ローカルPCのIPアドレス] \
    -e ENV_DOCKER_REGISTRY_PORT=5000 \
    -p 8080:80 \
    --name registry_browser \
    konradkleine/docker-registry-frontend:v2

このようなシェルを書いてました。
これをdocker-compose.ymlファイルを作成し以下のように記述します。

docker_registry2:
  image: registry:2
  ports:
    - "5000:5000"
  volumes:
    - "./registry:/var/lib/registry"
registry_browser:
  image: konradkleine/docker-registry-frontend:v2
  ports:
    - "8080:80"
  environment:
    ENV_DOCKER_REGISTRY_HOST: [ローカルPCのIPアドレス]
    ENV_DOCKER_REGISTRY_PORT: 5000

シェルとの対比は見れば分かるとは思います。

docker-compose.ymlがある場所で

$ docker-compose up -d

を実行すると依存関係なんかをよろしくやってくれて、
コンテナが起動します。

また、

$ docker-compose stop

でコンテナをまとめて終了させる事ができます。

最後に

$ docker-compose rm

でまとめてコンテナを削除します。

便利ですw

2016年10月27日木曜日

Realm mobile platform アプリ作成 - Android -

前回、RealmサーバーにiOSで作成したアプリと同期が取れている事を確認しました。
今回はAndroidアプリを作成し、iOS->Realmサーバー->Androidで同期を取ってみたいと思います。

とりあえず今回はログインまでをやってみます。

Androidアプリ開発準備

開発環境

Android Studio 2.2.2

プロジェクト作成&Realmインストール

まずはプロジェクトを作成。minSdkVersionは19、targetSdkVersionは23、
Activity追加ではEmpty Activityを選択しました。

早速Realmをインストールしていきます。

まずはトップにあるbuild.gradleのdependenciesに↓を追加。

dependencies {
    classpath "io.realm:realm-gradle-plugin:2.0.2"
}

次にapp/build.gradleに↓を追加します。

apply plugin: 'realm-android'

realm {
    syncEnabled = true
}

※syncEnabled = trueにしないとObjectServer関連が使えないので注意!!

最後にbuild.gradleを修正した際に右上に表示されるSync Nowをクリック。
Realmがインストールされます。

ログイン画面作成

Realmサーバーにログインするまでを実装してみたいと思います。

Applicationクラス作成

Realm関係の初期化を行う為にApplicationクラスを継承した
クラスを作成します。今回はMyApplicationクラスにします。

作成したMyApplicationクラスのonCreateを以下のようにオーバーライドします。

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        Realm.init(this);
    }
}

次にAndroidManifest.xmlにandroid:name=".MyApplication"を追加します。

<application
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:name=".MyApplication" // ☆ここ
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
      ・・・
    </activity>
</application>

とりあえず今回はMainActivityのonCreateでログイン処理を実施します。

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // [1]
        Credentials creds = Credentials.usernamePassword("ユーザー名", "パスワード", false);

        String authUrl = "http://10.0.2.2:9080/auth"; // [2]
        User.Callback callback = new User.Callback() {
            @Override
            public void onSuccess(User user) {
                Log.i(TAG, "Login success.");
            }

            @Override
            public void onError(ObjectServerError error) {
                String errorMsg;
                switch (error.getErrorCode()) {
                    case UNKNOWN_ACCOUNT:
                        errorMsg = "Account does not exists.";
                        break;
                    case INVALID_CREDENTIALS:
                        errorMsg = "User name and password does not match";
                        break;
                    default:
                        errorMsg = error.toString();
                }
                Log.e(TAG, errorMsg);
            }
        };
        User.loginAsync(creds, authUrl, callback);
    }
}

[1]のusernamePasswordメソッド第三引数をtrueにするとユーザー新規作成
falseにするとログインになります。

[2]でhttp://10.0.2.2:9080/authとしてますが、
これはエミュレータ上でlocalhostにアクセスするには10.0.2.2に
する必要がある為、このIPアドレスにしています。

この状態でRealm Object Serverを立ち上げて実行し、
ログに「Login success.」が表示されればOKです。

2016年10月23日日曜日

Docker for MacでプライベートなDockerHubを作る

DockerHubは沢山のimageが公開されていて便利ですが、
自分用や会社用のDockerHubを作りたい時があるかと思います。
そんな時はDockerを使ってDockerHubを作成できるので作ってみます。

環境構築

最近はLinuxに限らず、WindowsでもMacでもDockerが動きます。
今回はDocker for Macを使ってMacに環境を構築してみます。

まずは
ここからdmgファイルをダウンロード。

インストールが完了するとステータスバーにDockerのアイコンが表示されます

最初アイコンをクリックすると↓のようなポップアップが表示され
Dockerの使用状況を改善の為に送るかどうか設定できます。

「Got it」をクリックし準備OKです。

ちゃんと動いているかターミナルから

$ docker --version

を実行し、バージョンが表示されればOKです。

Registryコンテナの取得

公式に配布されているRegistryコンテナを取得し、
プライベートなDockerHubを構築していきます。

まずはimageをpull

$ docker pull registry:2

ちゃんとpullできたかdocker imagesで確認します。

$ docker images
REPOSITORY  TAG   IMAGE ID         CREATED        SIZE
registry    2     XXXXXXXXXXXX     4 weeks ago    33.3 MB

起動&可視化

早速起動して使ってみたいと思います・・が、
その前にDockerHubみたいにブラウザで登録状況が確認できた方が
使いやすいので、可視化するコンテナの

docker-registry-fronted

を使います。

毎回コマンドで起動して〜停止して〜というのもきついので以下のスクリプトを用意します。

run_registry.sh

#!/usr/bin/env bash

DOCKER_HOME=$PWD

if [ -e $DOCKER_HOME/registry ]; then
  # 何もしない
else
  mkdir $DOCKER_HOME/registry
fi

docker run \
    -d \
    -p 5000:5000 \
    -v $DOCKER_HOME/registry:/var/lib/registry \
    --name docker_registry2 \
    registry:2

docker run \
    -d \
    -e ENV_DOCKER_REGISTRY_HOST=[ローカルPCのIPアドレス] \
    -e ENV_DOCKER_REGISTRY_PORT=5000 \
    -p 8080:80 \
    --name registry_browser \
    konradkleine/docker-registry-frontend:v2

-v $DOCKER_HOME/registry:/var/lib/registry \では
登録されたimageの内容はコンテナ内の/var/lib/registryに
書き込まれます。永続化の為ホストの$DOCKER_HOME/registryに
マウントさせています。

2番目のdocker runでは可視化の為のコンテナを走らせてます。

早速起動します。

$ ./run_registry.sh

初回はimageのダウンロードで遅いかもしれません。起動ができたら
http://localhost:8080にアクセスし以下の画面が出れば成功です。

push&pull

作成したプライベートなDockerHubにimageをpushする場合は、
まずpushしたいimageを特定の名前で作成します。

例えば、jenkins:latestのイメージから名前を帰る場合、

で作成します。

例)

$ docker tag jenkins:latest localhost:5000/slowhand/jenkins:latest

あとはpushすればOKです。

$ docker push localhost:5000/slowhand/jenkins:latest

http://localhost:8080上で登録されてると思います。

逆にpullする場合は

$ docker pull localhost:5000/slowhand/jenkins:latest

でOKです。

停止

停止用のスクリプトも書いておきます。

stop_registry.sh

#!/usr/bin/env bash

docker stop registry_browser
docker stop docker_registry2

docker rm registry_browser
docker rm docker_registry2

以上、色々便利になりましたw

登録: 投稿 (Atom)

ページ