ぽこログ tech – ページ 4 – Linux・Apache・qmail・レンタルサーバ・クラウド・HTML・CSS

2018-01-30

[Perl][Javascript]ファイルをドラッグ&ドロップでサーバにアップロードする

ファイルをドラッグ&ドロップしてサーバにアップロードする方法がやっとわかりました。
肝は以下のところです。

function uploadFile(file){
var formData = new FormData();
formData.append('file', file);
$.ajax({
  async: true,
  type: 'POST',
  contentType: false,
  processData: false,
  url: 'dndtest.cgi',
    data: formData,
    dataType :'html'
}).done(function(){});

ファイルをドラッグ&ドロップしてファイル名などを取得する方法は結構ネットにあがっていますけど、実際にそのファイルをサーバにアップロードする方法を解説するサイトがなく、苦労しました。

FormDataを使う。
ajaxでPOSTする。

ファイルをアップロードする箇所は以下の通りです。

my $q = new CGI;
my @fps = $q->upload('file');
my @fnames = $q->param('file');
my $idx = 0;
foreach my $fname(@fnames){
    $fname = basename($fname);
    copy($fps[$idx], "./test/$fname");
    $idx++;
}

$q->upload()を使うということになかなか気づきませんでした。

以下がソースです。複数ファイルのドラッグ&ドロップにも対応しています。
“[Perl][Javascript]ファイルをドラッグ&ドロップでサーバにアップロードする” の続きを読む

2018-01-14

[Perl] ディレクトリを再帰的にたどってファイルをコピーする

#!/usr/bin/perl
use strict;
use File::Copy;

my $srcFile = $ARGV[0]; # コピーするファイル名を取得
print "src file : $srcFile\n";

# 再帰コピー関数
sub recurseCopy{
	my($src, $dir) = @_;
	my @files = ();
	
	print "entering $dir\n";
	
	# カレントディレクトリのディレクトリ・ファイルを取得
	opendir(DIR, $dir) or die("Can not open directory : $dir\n");
	@files = readdir(DIR);
	closedir(DIR);
	
	foreach my $file(sort @files){
		next if($file =~ /^\.{1,2}$/);
		if(-d "$dir/$file"){
			# ディレクトリの場合、再帰コピー呼び出し
			recurseCopy($srcFile, "$dir/$file");
		}
	}
	print "copying $src to $dir\n";
	# 自分自身にはコピーしない
	if($dir ne "\."){
		copy($srcFile, $dir);
	}
}
print "start\n";
my $b = recurseCopy($srcFile, ".");
print "end\n";

2018-01-08

2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。

右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は

@media screen and (max-width: 48em),screen and (max-device-width:480px)

でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね～。だから費用対効果のいいところでやめます。(笑)
“2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法” の続きを読む

2017-12-30

WordPressのテーマTwenty Seventeenのカスタマイズ

WordPressのテーマ、Twenty Seventeenいいですね。シンプルで今風のフラットなデザイン。
でも私は古い人間なので、5～10年ぐらい前に流行ったデザインにカスタマイズすることにしました。
うすーい灰色のバックに、白い紙を置いたイメージで。あとは空白を詰めます。

全体の横幅をデフォルトより広く設定する

まず、PC画面で横幅を1200ピクセルに設定します。

media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;
	}
	.navigation-top .wrap {
		max-width: 1100px;
	}
}

media screen and (min-width: 48em)

は、PC画面などで幅が十分広い機種は、の意味です。
.wrapのmax-widthで横幅を設定(1200px)します。
記事部分の横幅は全体の67%、ウィジェット部分の横幅を29%としています。

@media screen and (max-width: 48em) 
{
  .wrap{
	padding: 0px;
	margin: 0px;
  }
}

逆にスマホでは画面全体にブログを表示させるため、padding・marginともに0px(余白なし)に設定します。
“WordPressのテーマTwenty Seventeenのカスタマイズ” の続きを読む

2017-03-25

SiteLockが出すエラーの対処 – (SMART)によるスキャンが実行されましたが、貴社のファイルにアクセスすることができませんでした

脆弱性診断&マルウェア駆除のWebセキュリティサービス「SiteLock」でこんなエラー(Critical)が出ました。

Type: security | Severity: critical
本日、SiteLockのSecure Malware Alert Removal Tool (SMART)によるスキャンが実行されましたが、貴社のファイルにアクセスすることができませんでした。 SiteLockダッシュボードのSMART設定で、すべての情報が最新かつ正確であることを確認してください。 SiteLockは、初回の通知から10日が経過しても貴社のファイルにアクセスすることができない場合、貴社のSMARTツールを無効化します。
この設定はいつでも、SiteLockダッシュボードから再有効化していただくことができます。

“SiteLockが出すエラーの対処 – (SMART)によるスキャンが実行されましたが、貴社のファイルにアクセスすることができませんでした” の続きを読む

2017-02-17

Apacheウェブサーバで画像ファイル等をブラウザにキャッシュさせる

ブラウザのキャッシュを活用する

Google アナリティクスのレポート→行動→サイトの速度→速度の提案で、

ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカルディスクから以前にダウンロードしたリソースを読み込むようになります。
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:

で、どうすればキャッシュさせるか調べてみました。

2017-02-15

Google アナリティクスで画像を最適化する

今回のエントリは次のの前振りです。

Google アナリティクスでウェブサイトの画像を最適化(圧縮)できるのをご存知でしょうか?

レポート→行動→サイトの速度→速度の提案
にあります。

2017-02-12

SiteLockがいい感じ

脆弱性診断&マルウェア駆除のWebセキュリティサービス「SiteLock」がいい感じです。

チェックするのが面倒臭いXSS脆弱性や、数多く見つかるソフトウェアの脆弱性の中からどれが自分に関係のある脆弱性か、診断してくれるのがいい。

書籍やネットで調べた情報を元に、気を付けてアプリケーション作っても、脆弱性が全て駆除できたとは言えない。

実際、自分で作ったSHA暗号化ツールが、最初はGoogleの1ページ目に載っていたのに、ちょっと機能を追加したらGoogleで検索されなくなった。
なんでだろうと思っていて、たまたまGMOクラウドのSiteLockの宣伝があって、試しに導入してみたら、XSS脆弱性があるとの診断。
それに倣ってツールを修正したら、またGoogleの1ページ目に載るようになりました。

2017-02-11

お名前メール使ってみた

お名前メールを使ってみました。(と言っても設定してテストメールを送ったぐらいですが)

使ってみた感想としては、独自ドメインでメールサービスのみ、あるいはWEBはonamae-serverの共用を借りて済ます人にはいいかも。
WEBサーバを他社(あるいはVPS, クラウド等)で持つ場合は、設定がめんどくさいです。

あと、1月¥100のライトプランは1ドメイン(FQDN)しか使えないので、実際に仕事などで使うにはスタンダードプラン(¥160/月)を使わないけないし、スパムフィルタは必須だけどひと月余分に¥85かかるしで、42円～ってのは客寄せパンダですね。

2017-02-05

SHA-1/SHA-256/SHA-512暗号化ツール作成

改修を頼まれた仕事で、ユーザIDとパスワードがソースに直書きだったので、暗号化して持つことに。
ところが暗号化できるサイトがなかなか見つからなかったので、自分で作りました。

はじめは Digest.pm を use すればいいんだろ、と思ってましたが、GMOクラウドには Digest.pm が入ってなかった。
ていうか、CPAN 自体も入ってなかった。
コーディングよりも環境整備に時間を取られました。

SHA-1/SHA-256/SHA-0512暗号化ツール

2017.2.7追記

これと今後の改修のためにローカル環境にXAMPPとActivePerlをインストールしました。
CPANからDigest::SHAを使えるようにするのに時間と手間を取られました。