FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

GoogleSwiffy で出力されるJavaScriptを正規表現で置換

AWS

お久しぶりです、大晦日生まれの@damayaです。
とうとう2012年も終わってしまいますね。

2012年最後の私からの記事はJavaScriptです。最近業務上でGoogleSwiffyをよく使うのですが、FLASHがSwiffyでJavaScriptに変換されたものを更に画像部分のみを置換するプログラムをご紹介します。
処理自体の説明ですが、FLASH内に画像がいくつあるかわからない状況で、JavaScript内で最大何回処理を繰り返せばいいのかわからず、まさかのwhile(true)でindexOfを繰り返すのはナンセンスだと思い、正規表現を使うことにしました。
今回はそのJavaScriptの正規表現に少し感動したため、プログラムを公開いたします。

new RegExp(target_tag, "gm");
この部分でかなりコードを書く量も減り、大変便利な正規表現です。

サンプルプログラムをご覧になる場合は「もっと読む」からどうぞ。
※Chromeブラウザのみ動作確認

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="content-style-type" content="text/css">
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta name="Author" content="damaya">
	<title>GoogleSwiffyConverter 1.0</title>
	<style type="text/css">
	<!--
	body{
		background-color: #e0e0e0;
		color: #000000;
	}
	textarea{
		font-family: monospace;
		font-size: 15px;
		background-color: #000000;
		color: #00e000;
		scrollbar-3dlight-color: #00ff00;
		scrollbar-arrow-color: #00ff00;
		scrollbar-base-color: #000000;
		scrollbar-darkshadow-color: #000000;
		scrollbar-face-color: #003300;
		scrollbar-highlight-color: #000000;
		scrollbar-shadow-color: #00ff00;
		scrollbar-track-color: #006600;
	}
	.convertButton{
		width: 140px;
		height: 40px;
		cursor: pointer;
		color: #ff0000;
		font-weight: bold;
	}
	//--></style>
	<script type="text/javascript" language="JavaScript">
	<!--
		function convert(){
			var html = document.getElementById("result").value;
			var target_tag = ";base64,";
			var start_pos = 0;
			var start = "";
			var end = "";

			html = html.substr(html.indexOf("swiffyobject = ", 0), html.length);
			html = html.substr(0, html.indexOf("    </script", 0));
			html = html.replace("\n", "");

			var regexp = new RegExp(target_tag, "gm");
			var max = html.match(regexp).length;

			start_pos = html.indexOf(target_tag, 0);
			for(i = 0; i < max; i++){
				start_pos = html.indexOf(target_tag, start_pos);
				start = html.substr(0, start_pos);
				end = html.substr(html.indexOf('"', (start_pos + 1)), html.length);

				img_cnt = (i + 1);
				if(img_cnt > 9){
					img_cnt = "0" + img_cnt;
				}
				html = start + target_tag + "swiffyImagePath_" + img_cnt + end;
				start_pos++;
			}
			document.getElementById("result").value = html;
		}
	//-->
	</script>
	<noscript><table width="100%" height="100<tr><th><font color="red">JavaScriptが有効になっていないか、JavaScript未対応のブラウザです</font></th></tr></table></noscript>
</head>
<body topmargin="0">
<div align="center">
<br>
<button onclick="convert();" class="convertButton">変換</button><br>
<textarea cols="130" rows="40" wrap="hard" id="result"></textarea>
</div>

</body></html>


何かのお役にたてれば幸いです。
では、また来年、エンジニアBlogでお会いしましょう！

[AWS]AWSあれこれ〜Amazon EC2 API Toolsのインストール

はじめまして。さげはし＠インフラ担当です。

何が楽しくて年の瀬に更新しているかといえば、まぁ更新をUPするのを忘れてたんですね。

ということで、私の担当であるインフラ分野からは、しばらくはAWSに関連した記事をお送りします。

AWSとは…というのは説明不要だと思いますので省略しまして、とりあえず１から全機能を網羅するまで、五月雨式に記事を書いていきます！

まずは…最近のAWSはほとんどWeb画面から設定や確認ができますが、細かい設定や一部CUIからしか設定できない項目がまだありますので、最初は【Amazon EC2 API Tools】のインストールをば。
まぁあんまり使わなくても大体のことは出来ますけどね！でもエンジニアたるもの、CUIを制するものは…ということわざもありますし。

※ちなみに、注記がない場合は、全てMac OSXでの設定方法ですが、*Nix系というか非Windows系なら動くと思います。

事前準備

まずはAWSのサイトから、X.509証明書を取得しておきましょう。
AWSのサイトにサインアップして、セキュリティ証明書＞アクセス証明書＞X.509証明書の所で取得できます。

あと、ディレクトリ構成ですが、私は、
$HOME/work/aws/の中に、それぞれデータを置いていますので、以降の説明もそれに習って進めます。
上記の証明書の鍵は、$HOME/work/aws/keys/に入れています。

Amazon EC2 API Toolsのインストール

http://aws.amazon.com/developertools/351を開いて、[Download]項のすぐ下にS3からダウンロードするリンクがありますので、そこからファイルを持ってきましょう。
私の場合は以下のコマンドでOKでした。ダウンロードの場所とかは適当でいいっす。

ちなみに、java(runtime)が必要ですが、私の場合は既に入っていたので割愛します。
あと、私はzshを使っていますので.zshrcにPATHを入れてますが、bashの人は.bashrcにどうぞ。

# ディレクトリを掘って、wget,unzip
mkdir -p ~/work/aws/ec2-api-tools
cd ~/work/aws/ec2-api-tools
wget http://s3.amazonaws.com/ec2-downloads/ec2-api-tools.zip
unzip ec2-api-tools.zip

# 一応違うバージョンとかも出るので、その対応のsymlink
ln -s ec2-api-tools-(version) ./ec2-api-tools-latest

# pathを通す（bashの人は、>>の後ろが ~/.bashrc）
echo "export PATH=$PATH:$HOME/work/aws/ec2-api-tools/ec2-api-tools-latest/bin" >> ~/.zshrc

# 設定の再読み込み（bashの人は、source ~/.bashrc）
source ~/.zshrc


これで、後は環境変数に必要な情報をぶっこんで終わりなんですが、私は複数の環境を使いますので、ちょっと面倒ですが$HOME/work/aws/config/の中に各環境ごとに環境設定ファイルを作って、読み込んで使っていますので、

# for XXXX service 
export EC2_HOME=$HOME/work/aws/ec2-api-tools/ec2-api-tools-latest
export EC2_PRIVATE_KEY=$EC2_HOME/../../keys/pk-Z7HXCJCYYCA6CLGX32FBOOQ4RAORTRWO.pem
export EC2_CERT=$EC2_HOME/../../keys/cert-Z7HXCJCYYCA6CLGX32FBOOQ4RAORTRWO.pem
export EC2_URL=https://ap-northeast-1.ec2.amazonaws.com||<


という感じで設定ファイルを作成し、

source ~/work/aws/config/xxxx.conf


と読み込んで、以下のコマンドを実行すれば、とりあえず大丈夫そう。

ec2-describe-regions
REGION	eu-west-1	ec2.eu-west-1.amazonaws.com
REGION	sa-east-1	ec2.sa-east-1.amazonaws.com
REGION	us-east-1	ec2.us-east-1.amazonaws.com
REGION	ap-northeast-1	ec2.ap-northeast-1.amazonaws.com
REGION	us-west-2	ec2.us-west-2.amazonaws.com
REGION	us-west-1	ec2.us-west-1.amazonaws.com
REGION	ap-southeast-1	ec2.ap-southeast-1.amazonaws.com
REGION	ap-southeast-2	ec2.ap-southeast-2.amazonaws.com


ということで、次はEC2 AMI Toolsのインストール手順でも作りますか。