タグ別アーカイブ: WEB制作

AMAZON ver0.1 FBAラベルを無駄にしないやつ

AMAZONもverつけていこうと思う。
セラーセントラルだとFBAラベルは常に1番目から作られてしまう(と思う)ので、回避するシステムを組み込んだ。
軽く作ったので、メモ。
簡単に作ったし自分向けなので、汎用性は一切無い。
使い方としては、24面ラベルをシステムに保存して、使いたい部分以外はマスクして表示する感じ。

1,まずはセラーセントラルからFBAラベルを24枚分ダウンロード。

2.ラベルのPDFを保存。


システムは割愛。

3.印刷を押すとどの部分を使うかを選択。
チェックした部分から何枚とか行けるようにした。

この例は5番目から10個。

HTML部分(抜粋)

<h1>バーコード印刷:</h1>
<div class="box1">
<p>印刷したい箇所にチェックしてください。</p>
<p>チェックした箇所から自動チェック→
<select id="auto">
<?
for($i = 0; $i<=24; $i++){
print '<option>'.$i.'</option>';
}
?>
<select></p>
</div>
<form action="" method="post">
<table class="table1">
<tr>
<td><input type="checkbox" name="check[]" value="0" /></td>
<td><input type="checkbox" name="check[]" value="1" /></td>
<td><input type="checkbox" name="check[]" value="2" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="3" /></td>
<td><input type="checkbox" name="check[]" value="4" /></td>
<td><input type="checkbox" name="check[]" value="5" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="6" /></td>
<td><input type="checkbox" name="check[]" value="7" /></td>
<td><input type="checkbox" name="check[]" value="8" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="9" /></td>
<td><input type="checkbox" name="check[]" value="10" /></td>
<td><input type="checkbox" name="check[]" value="11" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="12" /></td>
<td><input type="checkbox" name="check[]" value="13" /></td>
<td><input type="checkbox" name="check[]" value="14" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="15" /></td>
<td><input type="checkbox" name="check[]" value="16" /></td>
<td><input type="checkbox" name="check[]" value="17" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="18" /></td>
<td><input type="checkbox" name="check[]" value="19" /></td>
<td><input type="checkbox" name="check[]" value="20" /></td>
</tr>
<tr>
<td><input type="checkbox" name="check[]" value="21" /></td>
<td><input type="checkbox" name="check[]" value="22" /></td>
<td><input type="checkbox" name="check[]" value="23" /></td>
</tr>
</table>
<input type="submit" value="  印刷  " name="goPrint" />
</form>

jQuery

$('#auto').change( function(){

	var num = parseInt( $(this).val() );
	var start = $('input[name="check[]"]').index( $('input[name="check[]"]:checked').eq(0)  );

	if( start == -1 ) start  = 0;
	var end = start + num;

	for (var i = start; i < end; i++) {
		$('input[name="check[]"]').eq(i).prop("checked",true);
	}

	// alert(start);
	return;

});

無駄が多そうだけど

4.PDF表示。
印刷を押した場合の動作


左上の記号は自社SKUなので、割愛
チェックした部分だけ表示される。
FPDFとFPDIにて実装。座標は決め打ち

PHP(抜粋)

require('fpdf/fpdf.php');
require('fpdf/fpdi.php');

$pdf=new FPDI('P', 'mm', 'A4');
// テンプレートをインポート
$pdf->setSourceFile('path/'.$asin.'.pdf');
$importPage = $pdf->importPage(1);

$pdf->addPage();
// テンプレートをページに適用
$pdf->useTemplate($importPage, 0, 0);

// $pdf->Rect(左, 上, 幅, 高さ, 'DF');
$pdf->SetFillColor(255, 255, 255);

$dx = 5;
$dy = 15;
$w = 66;
$h = 33.9;

for($i = 0; $i < 24; $i++){

	if( in_array($i, $_POST['check']) ){
		// スキップ(マスクしない)
		continue;
	}
	$x  = $dx + $w * ($i % 3);
	$y = $dy + $h * (floor($i / 3));
	$pdf->Rect($x, $y, $w, $h, 'F');


}

$pdf->Output('fba.pdf', 'I');

お手軽だ。
中国側で入荷時に一気に貼ってしまえば、無駄が少なそう。

自分向け簡易モーダルウィンドウ

自分用なのでかなり簡易的に実装
特に中国などは回線状況が悪いので、Ajaxなんかで読み込み中を出さないと通信しているのか不安になることが多い。
いつもは、ローディングを出すようにしていたけど、メッセージが出るほうが人に優しい時もある。
アラートを出すといちいちOKなんかをクリックしなくては行けないし、自分なりにこの「簡易モーダルウィンドウ」はこれから良く使っていきたいのでメモ。

HTML部分

<div id="modal-bg"><span></span></div>

これだけ
spanの中にメッセージを入れて表示させる方向。
jQueryでappendしてしまってもいいかもレベル。

CSS部分

/* モーダル 背景エリア */
#modal-bg {
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	z-index: 1;
}
/* メッセージ */
#modal-bg span {
	width: 300px;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 10px;
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -175px;
}

よそから取ってきたものを少し修正。
まわりをグレーアウトしつつ、メッセージを表示な感じのCSS

jQuery部分

単に表示して消えるだけなら

$("#modal-bg span").html('保存しています。');
$('#modal-bg').fadeIn(1000).delay(2000).fadeOut(1000);

Ajaxと組み合わせるなら

$("#modal-bg span").html('保存しています。');
$('#modal-bg').fadeIn(1000);

でAjaxの成功時に

$('#modal-bg').fadeOut(1000);

で消す。

うまく動いているし、コードも少なく快適そう。
ローディングに比べて画像を使わない点も気分的にエコ。

css+jQueryでお手軽に行をハイライト

自分用メモ。
なんか表がひたすら並んでる中で、どこまでやったか分からなくなることからミスがでていることがあったので、簡単にミスを減らせる。
イメージで言うと、評価リストを順番に片付けるのに、どこまで処理したのかとか。

まずcssにhilightのクラスを設定。背景は各種使っているので、枠をつける。

.hilight {
	border: medium solid rgb(255, 0, 255);
}

jQuery側で、行のどこかをクリックすると、ハイライトさせる。

// 行ハイライト
$('td').mousedown(function(){
	// すべて通常に戻す
	$("tr").removeClass("hilight");
	$(this).closest("tr").toggleClass("hilight");
});

さらに、画面切り替えがある場合は、アンカーを設定することでその行を再度ハイライトする。

// アンカーもハイライト
var anchor = $(location).attr('hash');
$(anchor).addClass('hilight');

以上。。
この数行でかなりの快適さ。
むしろ、すべてのページで有効にしてしまってもいいかもレベル。

英語版WindowsでのCSV日本語文字化け対策

システムでCSVをダウンロードなんていうものを多用しています。
ただ、使っているOSが英語版なので、どういうわけかCSVが文字化けしていた。
UTF8はもちろんSHIFT-JISでも文字化け。。
いままでずっと諦めていたのですが、ようやく方法がわかった。
早く知っていたら良かった。。
今までずっと日本語OSの人にCSVを送って、XLS保存で送り直してもらってたよ。。。

で、方法ですが、メニューから

xls1
Officeの言語設定などというものを開きxls

一番下の言語を日本語にするだけ。。
こんな言語設定なんて項目あるの知らんかった。。。
設定する際インストーラーが必要なようです。

Couldn’t agree a client-to-server cipherなるエラー

SSHを使う機会が出てきたのですが、久々にputtyを立ち上げてみたら

「Couldn’t agree a client-to-server cipher」

なるエラーが。。
ちょっとググってみると、英語サイトしか出てこなかったので、メモ。
最初は接続しているcoreサーバー側の問題と思ったら、putty側の問題みたいですね。
で、解決方法は、最新版にすること。
私の場合は、0.58から0.64にしたら接続出来ました。

WordPressで中国語サイトを作る方法

セブはまあ暮らしやすい方だと思いますが、それはここ3年くらいで先輩日本人たちがいろんなことを切り開いてくれた結果なんだろうなと勝手に思っている。
それに比べ中国人(主に大陸の人)は、見ている限り結構暮らしにくいように見えます。
フィリピンと中国は政治的に仲が悪いようなんですが、来るべきそんな時のためにやれることだけはやっとこうかと。
まあ、アジア圏ではだいたいどこの国とも中国は仲が悪いのですが、、

そういうわけで、中国語でセブの情報を配信するサイトを作るのにWPの中国語版を探したところ、さくっと出てこない。

ここにあります!(Wordpress.org China 简体中文)wp-china

意外と速くアップデートも公開されているようですし、安心して使えそう。
ボタンの場所などがすべて日本語版と同じなので、慣れている方はなんの問題もなく構築できると思います。