[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(){});

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

  1. FormDataを使う。
  2. 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]ファイルをドラッグ&ドロップでサーバにアップロードする” の続きを読む

複数のブログ(WordPressのマルチサイト)の更新情報を1つのtwitterアカウントでツイートする

このpocolog.netで複数のブログを作っていますが、どのブログからもtwitterでつぶやけないかなーと調べてみました。
1つのブログから複数のtwitterアカウントにというサイトは多いのですが、複数ブログ→1つのtwitterアカウントについて書かれているページを見つけれなかったので、ここに書いてみました。

結論から書くと、「問題なくできます」です。
twitter自体が一度に複数のサービスに対応しています。
“複数のブログ(WordPressのマルチサイト)の更新情報を1つのtwitterアカウントでツイートする” の続きを読む

ブログ(WordPress)の投稿一覧を取得して、別のウェブサイトに表示する方法

ブログの更新情報を自分のウェブサイトで表示できるといいですね。
その方法です。

まず、ブログのRSSフィードから投稿一覧を取得する方法です。

#!/usr/bin/perl

use strict;
use warnings;
use XML::FeedPP;
use Time::Local;

my $url = 'http://my.blog.com/feed/';
my $feed = XML::FeedPP->new($url); #フィードを取得
my $line = "
    \n"; my $counter = 0; foreach($feed->get_item()){ #投稿を取得 $counter++; if($counter > 5){ #最新5件表示します。数はお好みで。 last; } my $date = substr($_->pubDate(), 0, 10); $date =~ s/\-/\./g; #日付の書式を 2017-01-17 から 2017.01.07へ。お好みで。 $line .= "
  • " . $date; $line .= " - "; $line .= "<a href = \"" . $_->link() . "\">"; $line .= $_->title() . "
  • \n"; } $line .= "
\n"; open(BLOG, ">", "./www/mywebsite/blogdata.html"); #このスクリプトを置いてあるところから、ウェブサイトを置いてあるとこまでのパス print BLOG $line; close(BLOG);

“ブログ(WordPress)の投稿一覧を取得して、別のウェブサイトに表示する方法” の続きを読む

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

まだまだ名著です。
Effective 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年版 ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

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

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

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

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

サクサクRSSリーダー – Feedly

LiveDwangoReaderがサービス終了してから難民になっていたのですが、Feedlyに乗り換えました。
ショートカットキーがLiveDwangoReaderの9割ほどですが、まぁ慣れていきます。

で、何がいいかと言うとFeedlyのスマホアプリが使いやすい!
サクサク読めます。操作も直感的です。
なにより、フィードをスクロールする操作が、まるで紙のページをめくるようで快感です。
ほとんどの操作を右手親指でできるのがいいです。

通勤時間や昼休み中にヘビロテしています。

Feedly - Get Smarter

Feedly – Get Smarter
開発元:DevHD
無料
posted with アプリーチ

ありそうでなかったTo-Have-Doneリスト – Donelist

私はいつも、朝起きたら「今日はなにしよう」か考えて、一日の終わりに「今日はなにをできたか」を考えるようにしています。
To-DoとTo-Have-Doneですね。
それらをしっかり計画立てたり、今日できたのは何項目で、できなかったのは何項目、とかやりだすとそれだけで負荷がかかって三日坊主になるので、それはやらないことにしています。
両方とも頭の中で、あるいは忘れそうなものはアプリで管理しています。

To-DoリストはRemember The Milkで管理しています。定番ですね。熟成されています。何か頼まれごとをされると、「ちょっと待って。今外部記憶に入れた。明日の昼からやるからよろしく。」みたいな感じでTo-Doを管理しています。

Remember The Milk

Remember The Milk
開発元:Remember The Milk
無料
posted with アプリーチ

“ありそうでなかったTo-Have-Doneリスト – Donelist” の続きを読む

WordPressにGoogleアナリティクスを設定 – GA Google Analytics

WordPressのブログでGoogleアナリティクスのウェブ解析をするため、GA Google Analyticsプラグインをインストールしました。
Google Analytics by Yoastにしたかったんだけど、Yoast SEOに統合されたのか、見つからなかったので、これにしました。英語版だけど評価が高かった(五つ星)だので。

で、使ってみると、英語版と言う欠点はありますが、すごい簡単! お勧めです。
以下、GA Google Analyticsの設定方法です。
“WordPressにGoogleアナリティクスを設定 – GA Google Analytics” の続きを読む

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のカスタマイズ” の続きを読む