読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

DevOpsに!アプリカンのZipアップロードを自動化してみる

アプリカンアプリの開発では作成したコードをZip圧縮して、管理画面でアップロードする必要があります。時々であれば良いのですが、細かくUIや動作を修正してアップロードして確認というのは次第に手間に感じられるでしょう。

そこで今回はちょっとしたスクリプトを使って処理を自動化してみたいと思います。

処理内容

  1. webフォルダをZip圧縮
  2. アプリカンにログイン
  3. Zip圧縮したweb.zipをアップロード

webフォルダをZip圧縮

これをコマンドラインで実行すると、次のような処理になります。

rm -f web.zip
zip -r web.zip web

元々あったweb.zipを削除して、webフォルダをzipコマンドで圧縮しています。

アプリカンにログインする

アプリカンへのログインはCasperJSを使っています。ヘッドレスブラウザで有名なPhantomJSをラッピングしているライブラリです。

var casper = require('casper').create();

var params = {
  login_id: "LOGIN_ID",
  login_pswd: "LOGIN_PW"
};

casper.start('https://user.applican.com/login/index', function () {
  this.fill("#frm", params, true);
}).then(function() {
  this.echo('Logged in');
  // ログイン成功時の処理
});

このようにしてログイン画面を表示し、IDとパスワードを入力すればログインができます。

web.zipのアップロード

これはログイン後に行います。プロジェクトのアップロード画面を表示し、先ほど圧縮したweb.zipを指定します。

casper.start("https://user.applican.com/project/99999/app_data/upload", function() {
  this.click("label#drap_switch");
  this.fill("#frm", {
    "data[file]": "WEB_ZIP_PATH",
    "data[memo]": "",
    "data[type]": 1
  }, true);
}).then(function() {
  this.echo('Uploaded.');
});

このように処理を行うことでファイルのアップロードが完了します。

スクリプトの内容

実際のスクリプトは次のようになります。まずZip圧縮周りを行うスクリプトです。

#!/bin/bash

dir=`pwd`
p_dir=`dirname $dir`
cd $p_dir
rm -f web.zip
zip -r web.zip web
app.js $p_dir/web.zip $1 $2 $3

実際の使い方ですが、webフォルダの中で実行します。引数はアプリカンへのログインID、パスワードそしてプロジェクト番号になります。

upload.sh LOGIN_ID LOGIN_PW PROJECT_NUMBER

最後に実行している app.js というのはCasperJSを実行しているファイルになります。その内容は以下の通りです。

#!/usr/bin/env casperjs

var casper = require('casper').create();

var args = casper.cli.args;
if (args.length < 4) {
  casper.echo('Usage: app [login_id] [password] [project_number]');
  casper.exit();
}

// Casperを使ったスクレイピング処理
var webzip_path = args[0];
var project_id = args[3];
var params = {
  login_id: args[1],
  login_pswd: args[2]
};

casper.start('https://user.applican.com/login/index', function () {
  this.fill("#frm", params, true);
}).then(function() {
  this.echo('Logged in');
  casper.start("https://user.applican.com/project/"+project_id+"/app_data/upload", function() {
    this.click("label#drap_switch");
    this.fill("#frm", {
      "data[file]": webzip_path,
      "data[memo]": "",
      "data[type]": 1
    }, true);
  }).then(function() {
    this.echo('Uploaded.');
  });
});

casper.run();

実行してみる

では実際に実行してみます。

$ upload.sh moongift password 9999
  adding: web/ (stored 0%)
    :
  adding: web/web.zip (stored 0%)
Logged in
Uploaded.

このように出ればアップロード完了です。アップロード履歴を見てもちゃんとアップロードされているかと思います。

f:id:moongift:20151021140316p:plain


アップロードが自動化されると、開発から確認までのフローが高速化します。各端末のコンテンツは自動で更新されますので、確認を素早く行えるようになるでしょう。特にコマンドを実行するだけなので、GruntやGulpなどのタスクランナーと組み合わせた開発もできるでしょう。

ぜひ使ってみてください!