planet-green.com

[備忘録] EC-CUBE4をnginx上で動かす



EC-CUBE4をnginx環境にインストールした時の作業メモ。

EC-CUBE 3(前バージョン)とnginxの組み合わせであればGoogleで検索するといくつか設定例が出てきますが、そのままEC-CUBE 4に適用するとセキュリティ上の問題があるので、ここに安全な設定方法について記したいと思います。

nginxの設定

#
# EC-CUBE 4
#
server {
	listen 80;
	server_name hoge-shop.com; #ドメイン

	root /home/hoge-shop/pubic/; #ドキュメントルート
	index index.html index.htm index.php;
	access_log /var/log/nginx/hoge-shop.log;
	error_log /var/log/nginx/hoge-shop.error.log;
       
	client_max_body_size 16M; #アップロード最大サイズ。商品画像を扱うのでこのくらいあった方がいいでしょう。

	location / {
		try_files $uri $uri/ /index.php?$args;
	}

	# クリックジャッキング対策
	add_header X-Frame-Options SAMEORIGIN;

	# XSS対策
	add_header X-XSS-Protection "1; mode=block"; 
	add_header X-Content-Type-Options nosniff;

	# 403 Forbidden対応方法
	# ページアクセスできない時シンボリックリンクが有効になっていない可能性あります、
	# オプションを追加してください
	disable_symlinks on from=$document_root;

	# Authorization ヘッダが取得できない環境への対応
	#proxy_set_header Authorization $http_authorization;

	# .htaccess, .htpasswd, .env等の.(ピリオド)から始まる不可視ファイルをアクセス禁止に
	location ~ /\. {
	 	 deny all;
	}

	# アクセス禁止ファイル
	location ~* (?:/(?:src|app|tests|var|vendor|node_modules|codeception|bin)/.*|/(?:composer|COPYING|Procfile|app.json|gulpfile.js|package.json|package-lock.json|web.config))$ {
		deny all;
	}
	
	# 画像などの静的ファイル
	location ~* ^.+\.(?:mp4|ttf|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|ppt|tar|mid|midi|wav|bmp|rtf|wmv)$ {
		# ログ出力の有無はお好みで
		access_log off;
		log_not_found off; 
		if (-f $request_filename) {
			#ブラウザキャッシュの有効時間。ここもお好みに応じて。
			expires 60m;
			break;
		}
	}

	# PHP設定
	location ~ \.php$ {
		# このディレクティブの設定はディストリビューション/パッケージに依る。
		# (これはCentOS 7での設定例)
		fastcgi_split_path_info ^(.+\.php)(/.+)$;
		include fastcgi_params;
		fastcgi_index index.php;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
		# Authorization ヘッダが取得できない環境への対応
		#fastcgi_param HTTP_AUTHORIZATION $http_authorization; 
		fastcgi_pass   127.0.0.1:9000;
	}
}

»ç¶šãã‚’読む

コメント
planet-green.com

DxO OpticsPro用タイムラプス制作支援ツール | TimeLapse tool for DxO OpticsPro



RAW現像ソフトのDxO OpticsPro 11でタイムラプス(微速度撮影)動画制作を支援するツールを作りました。
コマンドラインで実行するPythonのスクリプトで、GitHubで公開しています。

DxOKeyFrame.py
https://github.com/SapporoTK/DxOKeyFrame.py

作例

星景タイムラプス 4K《微速度撮影》洞爺湖 | Time Lapse – Lake Tōya, Japan

(上の動画ではオリジナル曲をBGMにしてみました。)

4K Time Lapse Test (DxO OpticsPro + DxOKeyFrame.py) | タイムラプス《微速度撮影》テスト

この動画では、日の出の前後の時間帯はAvモードで撮影し、当スクリプトで拡張露出補正オプションを有効にして明るさが滑らかになるようにしています。

とはいえ、まだチラつきが出てしまうので、それが今後の課題です。
ちなみに星の軌跡はFinal Cut Pro Xのエフェクトなので当スクリプトとは関係ないです。

4Kタイムラプス《微速度撮影》モエレ沼公園 | TimeLapse – Moerenuma Park

タイムラプス 4K《微速度撮影》Sapporo city View | Time Lapse

タイムラプス 4K《微速度撮影》大通公園(札幌市)| Time Lapse – Odori Park, Sapporo, Japan

»ç¶šãã‚’読む

コメント
planet-green.com

MacでVisual Studio + Xamarinを使ってみた感想



IT土方(by いらすとや)
アプリ開発の話。

クライアントさんに泣きつかれて頼まれてXamarinで作られたスマホアプリの修正をすることになり、少しだけ使ってみる機会がありました。

「Xamarin自体がバグだらけ。新しもの好きで人柱覚悟の人ならいいかもしれないけど、仕事ではちょっと怖くて使えない」

これが正直な感想です。

iPhoneとAndroidのアプリを共通のコードで作成できるというのが売りなのですが、実際に共通化できるのはロジック部分だけと考えた方がよさそうです。

一応、画面周りも共通化できるのですが、用意されているXamarin.Formという仕組みでは細かいレイアウトの調整が出来ないので、結局はiOSとAndroidで個別にネイティブの機能を呼び出すコードを書くことになると思います。

Xamarin.Form標準の機能だけだと、デザインの微調整に制限が多く、痒いところに全然手が届きません。

自社または個人で作るアプリならそうしたレイアウトの細部は無視することが可能かもしれませんが、クライアントさんがいる仕事だと、「ここのフォントサイズを変えてね」と言われて断るのは難しいのではないでしょうか。

»ç¶šãã‚’読む

コメント
planet-green.com

Emoji Mosaic Generator(絵文字モザイクジェネレーター)



以前より公開中だったモザイク・アート作成ソフト「モザイク・モザイク」の絵文字版WEBサービスを試験公開しました。
無料でご利用できます。

😀Emoji Mosaic Generator🤖 (絵文字モザイクジェネレーター)

Emoji Mosaic Generator Sample

多言語対応させてる余裕が無かったので英語版での先行リリースになりましたが、簡単な英語しか使っていないので操作は難しく無いと思います(といいますか、私が簡単な英語しか使えない)。

尚、絵文字に対応してないOS/ブラウザでは正常に表示できません。スマホから見て頂けると確実です。

感想等がありましたらコメントいただけると嬉しいです。

コメント
planet-green.com

[開発/備忘録] WordPressのテーブルを手動でutf8mb4に一括変換する



現在、WordPressを新規でインストールするかv4.2以前から最新版にアップデートすると、DBの各テーブルの文字コードが自動的にutf8mb4_general_ciに設定されます。
(ただし、DBがMySQLの5.5.3以上かMariaDBの10以上だった場合のみ)

しかし、DBのバージョンが古かったサーバーでWordPressを運用していて既にv4.3以降にアップデートした後、新しいサーバーにデータごと引っ越した場合は、文字コードがutf8_general_ciのままになってしまいます。(当サイトがそうでした。)

そんな時は、まず wp-config.php の DB_CHARSET を utf8mb4 にして、

define('DB_CHARSET', 'utf8mb4');

下記のコードをfunction.phpに貼り付け、 http://(サイトのURL)/?upgradeUtf8mb4=1 をブラウザで呼び出せば utf8mb4_general_ci に一括返還してくれます。
(v4.7.3で動作確認はしましたが、必ず実行前にバックアップしてください)

if( isset($_GET["upgradeUtf8mb4"]) && $_GET["upgradeUtf8mb4"==1 )
{
        require_once ABSPATH."wp-admin/includes/upgrade.php";

        if ( is_multisite() ) {
                $tables = $wpdb->tables( 'blog' );
        } else {
                $tables = $wpdb->tables( 'all' );
                if ( ! wp_should_upgrade_global_tables() ) {
                        $global_tables = $wpdb->tables( 'global' );
                        $tables = array_diff_assoc( $tables, $global_tables );
                }
        }

        foreach ( $tables as $table ) {
                maybe_convert_table_to_utf8mb4( $table );
        }

        echo "done.";
        exit;
}

実行後、テーブルが変換されているのを確認したらこのコードは削除してください。

ちなみに utf8mb4_general_ci は何が違うのかと言うと、絵文字を直接保存できるようになるのです。
(逆に言うと、絵文字を使わないのであればテーブルを変換する必要は無いです)

コメント
planet-green.com

[開発/備忘録] WordPressでSchema.org用JSON-LDを出力(複数画像対応)



WordPressで構造化データ(schema.org用)のJSON-LDを<head>内に出力する関数です。function.phpに追記してください。

ネットで調べてみると似たようなコードはいくつかありましたが、複数の添付画像・複数のカテゴリーに対応したものが無かったので自作しました。

function insert_json_ld_for_schema_org()
{
	if( !is_single() || !have_posts() ) {
		return;
	}
	
  //あなたのサイトのロゴ画像をここで設定してください
  $logo = array(
		'@type' => 'ImageObject',
		'url' => 'http://*****/****.jpg',
		'width' => '240',
		'height' => '80'
	);
	
	while (have_posts()) {
		the_post();
		$category_info = get_the_category();
		if( count($category_info) > 1 ) {
			$articleSection = array();
			foreach( $category_info as $ct )
			{
				$articleSection[] = $ct->name;
			}
		} else 	{
			$articleSection = $category_info[0]->name;
		}
		
		//添付画像を取得
		$attachments = get_children( array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
		
		$images = array();
		foreach($attachments as $image) {
			$src = wp_get_attachment_image_src( $image->ID, 'medium' );
			$images[] = array(
				'@type' => 'ImageObject',
				'url' => $src[0],
				'width' => strval($src[1]),
				'height' => strval($src[2])
			);
		}
		
		//添付画像が無い場合はアイキャッチ画像を取得
		if( !count($images) ) {
			if( has_post_thumbnail() ) {
				$thumbnail_id = get_post_thumbnail_id(); 
				$src = wp_get_attachment_image_src( $thumbnail_id , 'medium' );
				$images = array(
                                	'@type' => 'ImageObject',
                                	'url' => $src[0],
                                	'width' => strval($src[1]),
                                	'height' => strval($src[2])
				);
			} else {
				//それも無い場合はロゴ画像をセット
				$images = $logo;
			}
		}
		$data = array(
			'@context' => 'http://schema.org',
			'@type' => 'Article',
			'headline' => get_the_title(),
			'author' => array(
					'@type' => 'Person',
					'name' => get_the_author(),
			),
			'datePublished' => get_the_date('Y-m-d'),
			'dateModified' => get_the_modified_time( 'Y-m-d' ),
			'articleSection' => $articleSection,
			'url' => get_permalink(),
			'mainEntityOfPage' => array(
				'@type' => 'WebPage',
				'@id' => get_permalink()
			),
			'publisher' => array(
				'@type' => 'Organization',
				'name' => get_bloginfo('name'),
				'logo' => $logo,
			),									
			'image' => $images,
		);
		
		//php5.4以前のバージョンではオプション引数(JSON_UNESCAPED〜)を削除すれば大丈夫だと思います。
		echo '<script type="application/ld+json">'
			.json_encode($data, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT)
			.'</script>'.PHP_EOL;
	}
	rewind_posts();
}
add_action('wp_head','insert_json_ld_for_schema_org');

出力サンプル。

<script type="application/ld+json">{
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "[Photo] 幌見峠のラベンダー園",
    "author": {
        "@type": "Person",
        "name": "tomoya"
    },
    "datePublished": "2017-04-08",
    "dateModified": "2017-04-08",
    "articleSection": "Photo",
    "url": "https://planet-green.com/horomitouge-lavender/1501",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://planet-green.com/horomitouge-lavender/1501"
    },
    "publisher": {
        "@type": "Organization",
        "name": "planet-green.com",
        "logo": {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/03/Twenty-Seventeen-capture-2017-03-28-.jpg",
            "width": "640",
            "height": "573"
        }
    },
    "image": [
        {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/04/horomitouge-7399.jpg",
            "width": "720",
            "height": "480"
        },
        {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/04/horomitouge-7418.jpg",
            "width": "720",
            "height": "480"
        },
        (略)
    ]
}</script>

そのSchema.orgなんですが、仕様についてネット上の情報が錯綜している上に、公式サイトの説明も曖昧で、いまいちよくわからない部分が多いのですよね。

例えば、記事タイトルはnameプロパティで指定すると書いてあるサイトもあれば、headlineプロパティで指定すると書いてあるサイトもあります。
Schema.org公式サイトでは簡素にnameはname、headlineはheadlineと書いてありますが言葉の定義についての説明が無いのです。

しかもgoogleまで錯綜していて、Search Console(webmasterツール)の 〔その他のリソース〕 にある 〔構造化データ マークアップ支援ツール〕 を使って画像タグのマークアップをしても、〔構造化データ テスト ツール〕を使ってチェックするとエラーになるという状態です。

そこで上記のPHP関数は、私が調べた範囲において最大公約数的な解釈をして実装しました。
間違いがありましたらコメントでご指摘していただけると幸いです。

コメント
planet-green.com

[備忘録] WordPressのテーマをTwenty Seventeenに変更



ほぼ独り言。
当ブログのWordPressのテーマをTwenty Seventeenに変更。

WordPressのテーマ Twenty Seventeen

公式テーマだけあって可も無く不可も無く、最近のトレンド合わせて作っているという感じ。

そのままだと当ブログのような写真メインのブログには合わない部分もあるので少し微調整・カスタマイズ。SEO的にも初期状態のままだと良くない箇所がある。

hentry(microformats.org)のマークアップに対応しているのでSearch Console(Googleウェブマスターツール)の構造化データ・テストツールでエラーが出なくなったのが嬉しい。

でもschema.orgのマークアップには対応していないので、後で自分でカスタマイズしないといけない。

気が向いたらここらへんの詳細を後で追記するかも。

コメント
planet-green.com

[開発/備忘録][PHP] 複数の画像を結合した1枚のサムネイル画像を自動作成する



複数の画像を入力すると結合された1枚のサムネイル画像を作成するPHP用のライブラリです。
SNSなどでよく見かけるタイプの結合サムネイルです。
サイズは自動計算してくれます。某SNS用に作りました。
create combine thumbnail from multiple images.

System Requirements:
PHP v5.3+
ImageMagick

【実行例】

4枚の元画像を入力 / source image files



↓↓↓↓↓↓↓↓
連結して1枚のサムネイル画像を出力 / output a thumbnail  image
combine thumbnail library for php

元画像は1〜4枚に対応。

・2枚の場合は上下に並びます。 / in case of two src images
combine thumbnail library for php.(two images)

・3枚の場合は横に。 / in case of three src images
combine thumbnail library for php.(three images images)

コードと使用例。試しにGithub Gistにコードを載せてみました。

コメント