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

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

自分用なのでかなり簡易的に実装
特に中国などは回線状況が悪いので、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

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