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

PHP+GD jpeg画像に透過pngを結合したり、文字を載せたりする

楽天出店に向けて、ヤフーショッピングのデータ登録をスピードアップしたい。
まだまだ数千点の商品があるので、「できる限りたくさん登録→楽天に一括移行」みたいなのを考えている。

やりたいこと
・カラー名などを画像に埋め込みたい。
・送料無料などのアイコンを画像に埋め込みたい。

こんな感じのイメージ。
で、ひとまず出来たのでメモ

画像に文字の埋め込み

日本語の場合は、ttfのフリーフォントを用意して埋め込む必要がある。
文字は、右下配置。
画像サイズに応じて、フォントサイズの変更。

// jpg画像読み込み
$img = imagecreatefromjpeg('item.jpg');
$font_color = imagecolorallocate($img, 0, 0, 0);

// 画像サイズを取得する
$sx = imagesx($img);
$sy = imagesy($img);

// TTFフォント
$font_path = "./font/ipaexm.ttf";

// テキスト
$spec_name_size = ceil($sx / 1200 * 60); // 横1200pxの時60px 
$spec_name_marginy = ceil($sx / 1200 * 50); // 横1200の時50 
$spec_name =  "アーミーグリーン";

$marginx = ceil($sx / 1200 * 50); // 1200の時50 

// 右寄せ
$dim = imagettfbbox($spec_name_size, 0, $font_path, $spec_name);
// 幅を計算
$textWidth = $dim[4] - $dim[6];
// 画像の出力位置を計算
$px = $sx - $textWidth - $marginx;
$py = $sy - $spec_name_marginy;

// テキスト描画
imagettftext($img, $spec_name_size, 0, $px, $py, $font_color, $font_path, $spec_name);

header('Access-Control-Allow-Origin: *');
header('Content-Type: image/jpeg');
imagejpeg($img);
imagedestroy($img);

ネットでいろいろ参考にさせてもらって切り貼り。
フォントは、IPAexフォントというのを使わせてもらった。

header('Access-Control-Allow-Origin: *');

が入っているのは、外部サーバーからajaxやcolorboxなどのクロスドメイン対策。
普通はいらない。

画像にアイコンなどを乗せる

元画像はjpg。乗せる画像はロゴや角丸などの透過png。
元画像サイズに合わせて、アイコンも拡大縮小したい。(実際は大きなアイコン画像を用意して縮小のみとなる。)

// jpg画像読み込み
$img = imagecreatefromjpeg('item.jpg');

// 画像サイズを取得する
$sx = imagesx($img);
$sy = imagesy($img);

// 送料無料アイコン
$icon_image = imagecreatefrompng("sendfree.png");
$ix = imagesx($icon_image);
$iy = imagesy($icon_image);

$px = ceil($sx * 0.04); // 4%の余白
$py = ceil($sy * 0.04);

$ratio = $sy * 0.28 / $iy; // 画像(Y)に対して28%のサイズに縮小
$newwidth = ceil($ix * $ratio);
$newheight = ceil($iy * $ratio);

imagecopyresampled($img, $icon_image, $px, $py, 0, 0, $newwidth, $newheight, $ix, $iy);

header('Access-Control-Allow-Origin: *');
header('Content-Type: image/jpeg');
imagejpeg($img);
imagedestroy($img);
imagedestroy($icon_image);

どちらも、かなりイイ!
両方くっつけると、上の画像のようなものが出来上がる。
効率は相当上がりそう。

VISUAL STUDIO CODE最高だった

ずっと秀丸で来ていたけど、インテリセンスとか構文エラーなんかを考えるといつまでも秀丸じゃダメだなぁとか思っていた。


何気なくVS CODEインストールしてみたらなんかすばらしい。
前にatomインストールしてみたことあったけど、ちょい立ち上げでちょい修正なんかが多いので遅くて使い物にならなかった。
VS CODEはMSの製品だけど、プラグインの開発ができて自由に拡張できる。
ほとんどデフォルトで良かったけど、秀丸のマーク機能(しおり?)をよく使っていたので、bookmarksという機能拡張を見つけて今のところそれだけ入れている。
邪道かもしれないけど、ショートカットもマーク機能と同じにしてしまった。(Ctrl-Mで設定、解除。Ctrl-上下でマークを移動)

VS Codeはマルチプラットフォームなのでマックでも使えるし、秀丸もそろそろMAC対応しないとユーザー離れが進んでしまうのではないか。
Android版でないかな。でるわけないか。

すこし使い方をみていたら、このページなんと機械翻訳らしい。だいぶ読んでから、上の説明をみて気付いた。
まったく違和感ないし意味もおかしくない。
時代はこのレベルまできているのか。
移動系がおかしいなと思ったら、この説明はCodeではなくVisual Studio用だった。。

プール

マンションのプールはもう始まっていた。

なかなか気持ちよさそう。

PHP POSTで大量の変数が送れない

朝、電話で起こされ、やはり小さなトラブルが発生。
ヤマトにアップロードする宛名データ(CSV)がダウンロードできないらしい。
一度、画面上に全件出して調整してから、ダウンロードボタンでDLするようになっているけど、どうも200件以上でダウンロードできないみたい。
今まで200超えることは無かったのだろうか。。

原因、max_input_varsの初期値が1000になっている。
郵便番号、住所、名前等で1件あたり5項目あると、200件で1000になる。
201件目でmax_input_varsの制限に引っかかっていたようだ。

PHPファイルに

ini_set( 'max_input_vars', 10000 );

ではダメだった。
iniファイルを書き換えるのも面倒なので、.htaccessに追記

php_value max_input_vars 10000

で解決

ヤフーショッピングその後

未だ3商品しか登録してないけど、ちょこちょこ売れる。
そのうち1つの商品は

1バリエーションを残して完売。
これはちとやばいな。ヤフーショッピングに期待したくなる。

powershell Expand-Archiveが認識されない

以下、自分用メモ

メルカリに関してだけど、オークタウンっぽいCSV+画像のZIPデータから自動出品処理をするのはすでに作ってあった。
当初は公開してもいいかとも思ったので、汎用性のある方式を採用。
ただし、自分向けだとダウンロードして解凍が面倒。
おそらくアカウントを量産した場合、ますます面倒なのは目に見えているので、ダウンロード解凍処理を含めて自動化に。
ただ、1PCがWIN8のため、

Expand-Archive : 用語 ‘Expand-Archive’ は、コマンドレット、関数、スクリプト フ
ァイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述
されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認して
から、再試行してください。

なるエラーが。

解決方法

Windows Power Shell 5.0(Windows Management Framework 5.0) をインストールする。
https://www.microsoft.com/en-us/download/details.aspx?id=50395
OSにあったファイルをダウンロード。

なんか、まったくインストールが始まらない。。
MSのバクらしい。
ネットをOFFにすること。

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

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