屁民新報＋

引っ越しました

2014-04-15T02:07:00.000+09:00

先日、引っ越しました。

自分よりちょっと年下くらいの中古マンションを35年ローンで買うという暴挙に出た結果、ついに固定資産税を支払う義務を負ってしまいました。

35年後、マンションが無事かどうかはNobody knows…

マンション買っといてなんですが、私は基本的に賃貸派です。

賃貸と分譲の金銭面での違いは、実はほとんど変わらないといわれています。

家賃＋敷金礼金＋2年ごとの更新料　≒　ローン＋管理費＋固定資産税＋団体信用保険で、何かあった場合の修理費などがかかることを考えると、分譲の方が若干高くなるのかな？という感じがします。

一番の違いはリスクです。

地震か何かで建物が再起不能なまでなダメージを追ったとき、賃貸は引っ越して終わりですが、分譲は再建するかどうかまで含めて全部自己責任です。

よくある地震保険ではとてもカバーしきれませんし、カバーできるくらいの金額を地震保険でかけるなら、ちょっとグレードの高い賃貸に住んだほうがシンプルだし確実です。

このように普通に考えると分譲マンション買うなんてどうかしてるぜ！という感じがビンビンするわけですが、いいところもあります。クオリティです。

同価格帯で見たとき、分譲と賃貸では建物のクオリティが天と地ほども違う。

だからQOLをまじめに考えた場合、リスクを取ってでも分譲に行く、という判断はアリだと思っていて、今回まさしくそういう理由でマンション購入に至りました。

半分不動産業者の受け売りですが、物件はまじで出会いです。
私はマンションの物件情報を見るのが趣味なので（今でもSUUMOとHOMESから届く新着物件情報を楽しみにしてます）、物件情報だけはその辺の人よりもめちゃくちゃ見て比較してる自信がありますが、2008年くらいから今まで見てきて、心に残った物件というのは数件、おそらく両手で数えるほどしかありません。

物件情報はとにかくスペックと金額のバランスを満たしているかどうか、というところに着目して見ていくわけですが、不思議なことに、購入につながった物件は、普段見ているスペックの外のことが決め手になった感じがします。壁の色とか、天井の高さとか・・・

そういう部分をいいなぁ、と思っている自分を発見し、「俺はそういうことにも興味があったのか」とわれながら驚きました。

そして、そういう本来はプラスアルファの要素が決まってくると、「この家と付き合っていくか」という気持ちになるから本当に不思議なものです。
多少のマイナスがマイナスにならなくなる。これが「出会った」ということなのかなァ・・・と思いながらはんこをいっぱい押しました。

男女の仲も、友達同士の仲も、面白い関係ほど「マイナス」が気にならない。
家もそうなんだねぇ・・・というお話でした。

個人的なmemo

2013-08-04T12:20:00.000+09:00

不定期でちょこちょこいじるページです。

.htaccessで旧ドメインを新ドメインにリダイレクトさせる設定

http://www.ikuwow.com/blog/htaccess_redirect/

PHPで前日の日付を算出する

http://d.hatena.ne.jp/ozawa34/20090204/1233761733

[jQuery plugin]imagesLoaded イメージが確実に読み込まれたら実行

※jQuery Masonryを利用する場合は必ず使う。これつけないとIEで画像が出たり出なかったり・・・という症状が出る。IEめ・・・
http://ameblo.jp/dantiv/entry-11483904586.html

jQuery IE でchangeとclickがおかしい件

2013-05-20T17:50:00.000+09:00

jQueryのchangeとclickのイベントがIEだとおかしな感じになったので、調べてみたところ、IEのみ「フォーカスが外れるまで」をイベントの範囲としてとらえているようでした。
なので、

$(".hoge").click(function(){
//処理
$(this).blur()
});

上記の表記でIEも他のブラウザと同じ挙動になりました。

スマホサイトへ遷移するかどうか、ダイアログで確認するJS

2013-03-12T19:58:00.002+09:00

本来はどこかのブログからの引用ネタなのですが、残念ながら引用元を失念いたしました。すみません。
便利なので自分用に覚書。jQuery必須です。

/**************************/
//redirect.js
/**************************/

$(function(){
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
redirect();
}
});
function redirect(){
if(window.confirm('スマートフォン向けサイトに移動しますか？')){
location.href = "【スマホサイトのURL】";//ここにURLを入れてください
}
}

/**************************/

これをPCサイト側で下記のような感じで読み込ませるだけです。
（＜＞は全角になってます）

＜script language="javascript" src="js/jquery.js" type="text/javascript"＞＜/script＞
＜script language="javascript" src="js/redirect.js" type="text/javascript"＞＜/script＞

理想はワンソース・マルチデバイスですが、依頼の形態によってはそうもいかない事も多々ありますので、まだまだこうした対策は必要ですよね。

この方法であれば、.htaccessをいじる必要もないので手軽に実装できます。

以下は蛇足です。

スマホサイト対応が流行り出していくらか経ちますが、世の中にはスマホサイトが嫌いな人、というのもいます。というか、僕がそうです。

サイトによっては、「検索で引っかかった情報を見たいのに、スマホサイトに飛ばされて見れなくなる」という現象が発生するので、スマホで検索している時はこれがかなりストレスになります。

やはり、ダイアログなどで確認してからの方が、ユーザビリティとしては優れていると思います。

また、全てのページでダイアログが毎回出るのもうざったいので、個人的にはトップページのみの実装が望ましいと思っています。

cookieなどで一定期間遷移の有無を記憶するタイプも、面倒だなあと思います。

スマホサイトとPCサイトは行き来することが多いので、そういう実装をされると見る側からしたら「さっきは見れたのに今は見れない」という状況が発生することになりますから、この辺はできるだけシンプルな実装にして欲しいものです。

以上、蛇足でした。

確認画面付きのメールフォームのひな形作りました

2013-03-04T15:17:00.001+09:00

ニーズがあるかどうかわかりませんが、メールフォームのひな形を作りましたので、一応公開します。
特長は、

jQueryとjQuery UI必須
#mailformの中にメールフォームのtableを作ると、自動的にポップアップの確認画面を生成
必須項目の入力がないと、送信ボタンを表示しない

といった、まあ基本的な部分だけ押さえた作りになっています。

デモと使い方

こちらにアップロードしました。
難しいことはしていませんので、ちょっとjQueryがわかる人であれば、比較的簡単にカスタマイズできると思います。

ダウンロード

データ一式は以下よりダウンロードして下さい。
confirm_mailform.zip (207kb)

javascript 日本語入力中かどうか判定

2012-10-25T08:51:00.002+09:00

日本語入力中のみキーコードの取得を控えたい場合の覚書

http://freefielder.jp/blog/2010/11/javascript.html

こんな感じでしょうか。

var keydown_event=0;
$(".obj").livequery("keydown",function(e){
if (e.keyCode==229){//日本語入力中かどうか判定
keydown_event=1;
}else{
keydown_event=0;
}
});
$(".obj").livequery("keyup",function(e){
if(keydown_event==0){//日本語入力でない場合のみ通す
if (e.keyCode==13){
//処理
}
}
});

フォームにテスト入力するjs

2012-07-27T12:47:00.004+09:00

ウェブアプリ作成で必要になったので作りました。（他でもありそうだけど）
HTMLのフォームがちゃんと送信されているかどうか確認するためのテスト用スクリプトです。
Shift + @でbody以下の表示されているinputとselect全てに自動で値を入力します。
※jQuery必須です。

function input_test(target){
var input_size = $(target).find("input:not(input[type='hidden'])").size();
var select_size = $(target).find("select:not(select[type='hidden'])").size();
for (i=1;i<=input_size;i++){
$(target).find("input:not(input[type='hidden'])").eq(i).val("input_" + i);
}
for (i=1;i<=select_size;i++){
$(target).find("select:not(select[type='hidden'])").eq(i).append("
$(target).find("select:not(select[type='hidden'])").eq(i).val("select_" + i);
}
}
$(document).ready(function(){
$(window).keyup(function(e){
if ( e.keyCode==192 && e.shiftKey){//shift + @ でinputとselectにテスト値を自動入力。隠し要素は除外。
input_test("body");//ターゲットとなる親要素の指定。
}
});
});

上記をファイルに保存して、HTML側で読み込ませればOKです。
あくまでテスト用なので、運用時には外した方がいいと思います。

よろしくどうぞ。

iPhone用のウェブを作る時の覚書　widthとinitial-scaleの関係

2012-06-21T12:40:00.000+09:00

iPhone用に画面サイズを指定する際、以下のようなメタタグをヘッダに記述します。

＜meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, "＞

この時のinitial-scaleとminimum-scaleの計算方法についてです。

「CSSのみのレスポンシブデザインをすることになったけど、メインのコンテンツのレイアウトを崩せない」など、widthを320pxに出来ない場合があります。

widthが320pxだと1でいいんですが、上記のようないろんな事情でwidthを320の倍数に出来ない場合は計算で正確に出さないと横幅がピッタリそろいません。

以下の式で出せます。

x = 320 / 画面の横幅（widthで指定している値）

書くまでもないほど簡単なことなんですが、一応覚書ということで。

例えば、画面サイズ600pxの場合は・・・

x = 320 / 600
x = 0.53333....

となるので、

＜meta name="viewport" content="width=600, initial-scale=0.5333, user-scalable=yes, maximum-scale=2.0, minimum-scale= 0.5333 , "＞

という風な記述になります。

【ブラウザの印刷機能を使う２】　jsで印刷範囲の指定

2012-06-15T13:13:00.000+09:00

cssで印刷範囲を指定する方法は以前に書きました。

http://sakusabe.blogspot.jp/2012/01/css.html

が、動的ページだと上記の方法が通用しない場合もあるかと思います。

以下の方法であれば、おそらくどんな状況でも印刷したい範囲だけ印刷することが出来ます。

※jQuery必須です。

■前提

1.印刷用CSSの指定

以下のようなかたちで、事前に印刷時用のCSSが読み込まれているものとします。

＜link rel="stylesheet" type="text/css" href="css/printoff.css" media="print" /＞

/*-------printoff.cssの内容ここから-------*/

.off{display:none}

/*-------printoff.cssの内容ここまで-------*/

2.印刷したい要素は$(".print_parent")の中に予め格納されている

bodyの中のどこでも構わないので、

＜div class="print_parent"＞＜/div＞

みたいな印刷する要素を格納する場所を用意して下さい。
この要素を表示しておけば、そのまま印刷プレビューになります。

3.印刷ボタン$(".print_btn")がある

これもタグは問わないので、print_btnというclassが指定された要素を用意して下さい。
これが印刷ボタンになります。

■その上で・・・

以下のコードを記述します。

$(".print_btn").live("click",function(){//印刷ボタン
var data = $(".print_parent").html();
$("body").append("＜div id="printbody"＞＜/div＞");
$("#printbody").append(data);
$("body *:not(#printbody,#printbody *)").addClass("off");
window.print();
$("#printbody").remove();//印刷用bodyを削除
$(".off").removeClass("off");//非表示クラスを削除
});

これだけでOKです。

■解説

印刷時のみ読み込まれるCSSでdisplay:noneを指定した要素は、印刷時には非表示になることは以前書きました。
しかし、この方法では、印刷する要素がbody>div>div...のように、入れ子になっている場合、適用することが難しく、動的ページでは実用的な方法とは言えません。

そこで、CSSの指定を動的に行ってしまおうというのが今回の方法です。

idがprintbodyのdivをbody直下に作り、その中に印刷する要素の中のhtmlをコピーします。
そして#printbody以外の要素に、全て印刷時に非表示とされる.offクラスを指定します。

印刷の処理であるwindow.print()をかけた後、追加されたoffを全て削除し、
#printbodyも削除します。これで印刷ボタンをクリックする前の状態に戻ります。

ちなみに、動作確認はchromeでしかしてませんのであしからず・・・

ウェブアプリケーションで印刷機能が必要な場合なんかにどうぞ。

PHPで文字列の評価をする　if($hoge=="hogehoge"){}以外の方法

2012-06-13T22:55:00.003+09:00

PHPで文字列の評価をする際、基本になるのは以下の書式と思われます。

if ($hoge=="ほげほげ"){

　//処理

}

しかし、この方法だとうまく判定できない場合があります。
（多分、前後に目に見えない￥nとか￥tのようなゴミ文字？がついていることが主な原因でしょう。）

trimなんかを使ってゴミを取り除いてやるのもいいですが、
以下の方法であれば、ゴミが付いたままでも文字列を評価できます。

if (preg_match("/ほげほげ/", $hoge)){

　//処理

}

面倒なことがないので、この方がお手軽でいいかと思います。

ただし、「ほげほげ」と「ほげほげほげ」のように、

判定条件の文字列を含む要素が複数ある場合は使えません。

そういう場合、個人的には判定する文字列自体を変更する方をおすすめします。

よろしくどうぞ。

外部ドメインのURLからファイル内容を取得する

2012-03-29T18:30:00.002+09:00

twitterAPIの対応していない外部ドメインのURLのコンテンツは、そのままでは基本的に取得できません。
そこで、

1 PHPで外部ドメインのデータを取得
2 jQueryのajaxでデータを取得
3 必要な要素を抽出

という手順を踏むことで、無理矢理取得します。

【PHPのコード】

めちゃくちゃ簡単です。

＜？PHP

$context = stream_context_create(array(
'http' => array('ignore_errors' => true)
));

@$data = file_get_contents(htmlspecialchars($_GET[url]),false,$context);
print $data;

？＞

基本的にこれだけ。
呼び出し方は、
http://****.***/ファイル名?url=外部URL名

こんな感じです。
file_get_contentsで対象URLの中身をHTMLですべて取得します。

【javascriptのコード】

こっちも大したことしません。
ただし、jQuery必須です。
呼び出すPHPファイル名をhogehoge.php、取得したいURLを変数urlで扱うとして、

$.ajax({
type:'GET',
url:"hogehoge.php?url=" + url,
success : function(data){
console.log(data);
}
});

基本これだけ。

あとはdataに格納されたHTMLから好きな要素を取り出せばOKです。

ただし、注意点が一つ。

jQueryで要素を取得する関係で$(data)とすると思いますが、この場合、headタグの中の要素とbodyタグの中の要素が$(data)内にゴチャゴチャになって入っています。（jQueryのバグ？仕様？らしいです）

だから、例えばこんな構造から、

＜body＞

　＜div class="parent_div"＞

　　＜img class="child_img" /＞

　＜／div＞

＜／body＞

$(".child_img")のsrcを取得したい、と思ったら、

$(data).find("body").children(".parent_div").children(".child_img").attr("src");

みたいになりそうなもんですが、現実には

$(data).find(".child_img").attr("src");

みたいな感じになります。

とにかく要素がゴチャゴチャになっているので、取得したHTMLがどういうDOM構造をしているのかを、ChromeのDeveloper Toolsのコンソールで一度確認した方が良いでしょう。

mixi再録：バス

2012-02-25T02:39:00.001+09:00

mixiで書いてた過去の日記の再録です。

武蔵小金井発府中駅行きのバスに乗り込み、一日を振り返ってボーッとしていると、

「フテュエキフィキバフハシャシサァス」

という声が運転席から聞こえた。
と思うと、バスが発車した。

あ、府中駅行きバス発車します、ね。

ものすごい滑舌の悪さ。

「ワタフフィファファサファモウフィマフ　スウテンハデオトホサセテササァス」

「ツギトハゥハフ　バフファテイサスファデマチクダサハイ」

ほとんど聞き取れない。

数秒後、

私●●と申します　終点までお供させて頂きます。
次停まります　バスが停車するまでお待ちください。

かな？

と、推測するのが関の山である。
しかも、名前が一番、聞き取れない。
アとかイとかの母音が多いので、田中？山田？飯田？と候補を並べつつ、
運転手の名前が書かれたプレートに目をやると、

佐藤

と書いてあった。
ああ、そう。

そしてその下に、

わかりやすい案内を致します

と、それはもう丁寧な字で書いてあった。

他人事ながら、佐藤君の栄達を願う。

mixi再録：日本代表監督選考を憂う

2012-02-25T02:33:00.001+09:00

mixiで書いてた過去の日記の再録です。

サッカー日本代表の次期監督が決まらないらしい。
候補となった敏腕監督7人が、日本からのラブコールに良い返事をくれないことが大きな原因なのだとか。
アフリカ大会でのドタバタに続き、このスケジューリングの悪さは、日本サッカー協会に良いマネジメントを出来る人材が中枢にいないことが原因ではないか。
良きマネージャーは、良き選手とは限らない。
逆も然りである。
監督を決める以前に、組織の中枢に良きマネージャーを招き入れる事が、日本サッカー界にとっての第一歩なのではないか。

さて、監督についてだが、私なりの意見を述べさせてもらいたい。
ここは思い切って、ウンコに任せてみてはどうか。
あのジーコ監督とも旧知の仲である。
だけでなく、「日本選手は監督と距離を取りたがる」と言われる中、これほど至近で選手の言葉を聞ける逸材もいない。皆、スペインリーグの監督など、海の向こうに目を向けているそうだが、案外、灯台下暗しなのではないか。
監督は孤独といわれるが、彼ほど孤独の中に身を置く者もおるまい。
そして、組織の汚れ役も一手に引き受ける度量の深さを持っている。
いや、既に彼は汚れている。汚れすぎていると言っても良い。
しかし組織の長というものは、多かれ少なかれ泥をかぶるものだ。変に潔癖を気取るより、清濁問わず飲み込む器の大きさでなければ、選手はついて来ない。

唯一の懸念点は、コミュニケーション能力であろう。
彼は決して、日本語に堪能ではない。その点ではスペインやオランダの監督たちとも違いはないが、問題なのは、彼が非常に寡黙な性格であるという事だ。
その言葉を聞いた者はほとんどおらず、座右の銘は「無言実行」であるという。
ﾀﾞｰｸホースとしてこれ以上ない存在だと思うが、現時点では日本サッカー協会からの正式なオファーは確認できない。
ウンコの今後の去就に注目したい。

mixi再録：アクアクララ

2012-02-25T02:29:00.002+09:00

mixiで書いてた過去の日記の再録です。

アクアクララのＣＭの谷原さんは気の毒である。
あんなにこぼして飲むのは、ディレクターの指示に違いないのである。
ＣＭ業界の常で、ディレクターはどこかでセクシーさを表現したかったのかもしれない。
けれど、ただただ水がもったいない。そんなＣＭに仕上がってしまった。
谷原さんはきっと、もっとうまそうに飲みたかったのだ。
長年契約してくれている谷原さんのことだ。水を、それも有料でわざわざてめえの家まで運んでくれるという高級な水を、みすみすこぼしながら飲むなどしたくなかったに違いない。
大地というフィルターが時間をかけてろ過した、宝石のようなミネラルウォーター、アクアクララ…
この大地からの贈り物が豊かにたゆたうグラスとの接吻を、邂逅を、いつも自宅で飲む時と同じように……そう、乙女の唇を吸うように、大事にしたかったのだ、谷原さんは。
自宅に帰った谷原さんは、アクアクララのサーバーを前に、アフリカの子供たちを思ったかもしれない。
俺の口角からこぼれた水が、今日の撮影で床に出来た水溜りが、いったい何人の命を救ったことだろう…
そう言って、自分を責めたかもしれない。
しかし、谷原よ、自分を責めてはいけない。
君の口角からこぼれた水など、誰も飲みたくはないのだ。汚らしい。

絵本の紹介：おんがくかいのよる

2012-02-21T16:29:00.001+09:00

子供に毎晩絵本の読み聞かせをしているけど、これはいい本。
声に出して読んだ時、丁度良いように作られている文章、
マチエールの感じられる絵、わくわくする雰囲気と、大人も読んでいて楽しめるようになっています。

ざっくりとしたストーリーとしては、主人公である5匹のねずみが、
偶然聴いたカエルの音楽会に触発されて、自分たちでも音楽会を主催するというもの。

どことなくですが、マイルスデイビスの
「緑色の肌で赤い息を吐いてようが、オレは使うぜ。オレが買ってるのは肌の色じゃない、演奏の腕なんだ」
という言葉と、その時代を思い出しました。

説教臭くなく、気持ちよく読み終えられます。
一応、3歳～5歳くらい向けらしいですが、2歳半くらいのうちの子でも十分楽しめているようです。
同じ年代のお子さんを持つ方には特におすすめしたいですね。

藤子F不二雄異色短編集が面白い

2012-02-14T14:49:00.000+09:00

藤子F不二雄の異色短編集を読んだ。
すごく面白くて、久しぶりに時間を忘れて漫画に没入してしまった。

特に面白いと思ったのは、まさに今現在を未来として予想したものがあること。
例えば、「定年退食」という話では、食事は配給制で、定年すると配給はおろか、医療保障も受けられなくなる、というお話。
これは少子化がもたらす未来を予想したものだろうが、藤子F不二雄の予想と現在とが実に対照的なのだ。

このSFの中では、老人たちは若者に駆逐されて、居場所を失う、という状況になっている。
なぜなら、この未来では老人を養うのに必要なコストを若者1人につき3人弱分を負担しなければならないため、結果的に養える人数が決まってしまうからだ。
その人数を越えた者については、国は責任を持たない。首相は「国家存続のため、冷徹な判断が必要である」と言い、苦渋の決断ながら、そうせざるをえない状況へ国民の理解を求めている。

対する、現実はどうだろうか。
現在では少子化のため、若者一人につき老人1.27人分を負担している計算になるらしい。前提となる状況は、「定年退食」に限りなく近づきつつある。
しかし、このSFの中とは逆に、現実では政治・経済共に老人が幅を利かせており、若者の意見はほとんど国政に反映されていない。
その上「国家存続のため、冷徹な判断」ができるような政治家も、政党も見当たらない。

この作品に限ったことではないが、藤子F不二雄は、無意識のうちに「国家権力は冷血だが、未来のために概ね正しい判断をする」という定義をしていることがわかる。
しかし現実には、未来のことを考えて判断できるだけの能力を、もはや国家権力自身が失ってしまっている。
「正しい判断ができない」・・・これこそが、現代日本にとっての悲喜劇である。そして、この「国家権力」の違いこそが、SFと現実の差となっているのだ。

それ以外にも、「劇画オバQ」「箱舟はいっぱい」など、ラディカルな作品が目白押しで、退屈しない。
未読のSFファンにはぜひともおすすめしたい。

PHP ファイルの生成日時と現在の日付を比較する

2012-02-13T15:03:00.001+09:00

こんな感じで。

if ( file_exists( $filename )) {//ファイルが存在する場合、更新日時を確認する
 $dt1_1 = filemtime($filename);
 $dt1 = date("Y/m/d H:i",$dt1_1);
 $dt2 =date("Y-m-d H:i");
 $d1=strtotime($dt1);
 $d2=strtotime($dt2);
 $diff = $d2 - $d1;//現在からファイル作成時の日時を引く
 $diffDay = $diff / 86400;//1日は86400秒
 if(intval($diffDay)>0){//前回更新時から1日以上経過している場合のみ

/*処理を書く*/

 }else{//前回更新時から1日未満の場合

/*処理を書く*/

}
}

要素を手軽にソートできる「jSort - jQury sorting plugin」

2012-02-10T19:22:00.003+09:00

覚書。
めっちゃラクチンやなー！

http://www.skuare.net/2011/08/jsort_-_jqury_sorting_plugin.html

javascript jQuery 右クリックさせないようにする方法

2012-02-09T18:56:00.000+09:00

覚書。びっくりするくらい簡単や。

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

PHPのバージョンごとの細かな変更点が載っているページ

2012-01-30T16:21:00.001+09:00

テスト環境で動作しているものを本番環境に移す時、本来であればテスト環境は本番環境と全く同じものを用意するべきなのですが、諸所の事情で双方のPHPやMySQLのバージョンが微妙に異なる・・・ということは、そんなに珍しいことではないと思います。（そうでもないか？？）

ざっくりしたバージョンの違いはだいたい理解しているのですが、5.3.x同士の差なんかになってくると、さすがに細かすぎて違いがわかりません。
で、探してみたところ、以下のページに詳細が載っていました。

http://php.net/ChangeLog-5.php

不自然ですがGoogle先生が日本語に訳してくれたものはこちら
http://translate.google.co.jp/translate?hl=ja&langpair=en%7Cja&u=http://php.net/ChangeLog-5.php

まあ、よほどのことがない限り、こんな小さな差異が動作の違いになることはないと思いますが・・・

【ブラウザの印刷機能を使う】　CSSで印刷範囲を指定する

2012-01-26T16:33:00.003+09:00

今までのホームページでもそうですが、ウェブアプリで印刷機能を使う機会があったので覚書。

印刷範囲を指定すると書きましたが、「印刷時に表示しない個所を指定する」といったほうが正しいです。

以下がやり方です。

印刷時だけ読み込むCSSファイルを作成します。今回は「print.css」とします。

/*********** print.css ************/
.off
{
display:none;
}

これを、HTML側で以下のように呼び出します。

＜link rel="stylesheet" type="text/css" href="print.css" media="print" /＞

そして、印刷時のみ表示したくない箇所の親要素に、class="off"を指定します。

こんな感じ。

＜div class="leftcolumn off"＞
＜a href=""＞メニュー1＜/a＞

＜a href=""＞メニュー2＜/a＞

＜a href=""＞メニュー3＜/a＞

＜a href=""＞メニュー4＜/a＞

＜/div＞

＜div class="contents"＞

ここだけ印刷します

＜/div＞

＜div class="footer off"＞

＜/div＞

もちろん、要素のclass名ごとにdisplay:noneを指定するというのもアリと思います。

こんな感じで・・・

.leftcolumn,.footer

{

display:none

}

カジュアルなのは上の方法かな、と思います。

ページ数が多い場合なんかは、下の方法の方がいいと思います。

よろしくどうぞ。

PHPからjavascriptに多次元配列（二次元配列）を渡す

2012-01-19T17:46:00.004+09:00

下手にコピペでやろうとしてハマってしまって苦労したので覚書。

結局いろんなところのコピペをやめて自分で書いたら一発で出来た。

別にむずかしい話はありませんでした。

要するに、PHPの配列を

[[あ、い、う、え、お]、[か、き、く、け、こ]、[さ、し、す、せ、そ]]

みたいなかたちのテキストに出力できれば、あとはそれをjs側でevalするだけ。

あと$.ajax{}を使う都合上、jQuery必須です。

----------------------------hogehoge.php------------------------

＜？PHP

$sql="SELECT * FROM tablename WHERE hoge = 'hogehoge'";//必要に応じて書き換えて下さい

$rst=mysql_query($sql);//MySQLにクエリを送信

$num=intval(mysql_num_fields($rst))-1;//フィールド数(x)を取得

$y=0;

$arrays ="[";

while( $row =mysql_fetch_array($rst)){//一行ずつ読み込み

$x=0;

$arrays .= "[";

for($x=0;$x<=$num;$x++){//フィールド数分、カンマ区切りで追加

$arrays .= "'" . $row[$x] . "',";

}

$arrays = rtrim($arrays, ","); //最後のカンマが余るので削除

$arrays .="],";//次の行に移るため、]を閉じる

$y++;

}

$arrays = rtrim($arrays, ","); //最後のカンマが余るので削除

$arrays .="]";//ここまででPHP側の基本的な処理は終了

print $arrays;

？＞

----------------------------index.html----------------------------

＜すくりぷと＞
$.ajax({
type:"post",
url:"hogehoge.php",
async:false,
cache:false,
dataType:"text",
success: function(data){
data2 = eval("(" + data + ")" );
console.log(data2);
});

$.ajax({

type:"post",

url:"hogehoge.php",//作成したPHPファイルのURL

async:false,

cache:false,

dataType:"text",

success: function(data){

var array_data = eval("(" + data + ")");//evalをかけてjs側で配列に格納

console.log(array_data);

};

});

＜/すくりぷと＞

データの取り出し方：

保存データが以下のものだとすると、

[[あ、い、う、え、お]、[か、き、く、け、こ]、[さ、し、す、せ、そ]]

こんな感じの内容になってるはずです。

data2[0][0] ="あ"
data2[0][1] ="い"
data2[0][2] ="う"
data2[0][3] ="え"
data2[0][4] ="お"

data2[1][0] ="か"
data2[1][1] ="き"
data2[1][2] ="く"
data2[1][3] ="け"
data2[1][4] ="こ"

data2[2][0]="さ"
data2[2][1]="し"
data2[2][2]="す"
data2[2][3]="せ"
data2[2][4]="そ"

なので、

alert(data2[0][0]);//「あ」がalertで出る

みたいな書き方でOK。

ここでは書いてませんが、ajaxのdata属性でSQLの構築に必要な情報をPHP側のPOSTで取得、addslashes()やhtmlspecialchars()等で適当にSQLインジェクション対策してSQL文のテーブル名や項目名にしてやる、という感じが実用的と思います。

よろしくどうぞ。

※実際に動かしたプログラムを元に記載してますが、間違いがあればご連絡頂けると幸いです。

ウェブサイトって「表紙」ないよね

2011-10-14T20:51:00.000+09:00

ウェブサイトには雑誌でいうところの「表紙」って概念がない。

なんで？トップページあるじゃん？と思った人は、トップページのレイアウトをよく見て欲しい。
あれは「表紙」じゃなくて「目次」なんですよ。
サイト製作のセオリーでは、サイト内で見せたいページへのリンクを出来る限りトップページの中に押し込む事になってる・・・と思います。リンクというのは、本で言えば「特集・・・16P」みたいな事です。バナーも同じですね。
そして、ウェブサイトのトップページのファイル名は「index.html」であることが多いけど、まさしくインデックス=索引、つまり「目次」なんです。
確かに雑誌の表紙にも特集の大見出しや、各記事のタイトルくらいは載ってる。けれど、雑誌の表紙が表紙たる所以、機能のメインは「誘目性」です。コンビニや本屋の棚の中でどれだけ人に手に取ってもらえるか・・・そういうシーンを前提に作られているからこそ必要とされるものが、「表紙」なんです。
もちろん、ウェブサイトでも誘目性という概念が重要であることに変わりはありません。しかしそれは、あくまで「うちのページのここを目立たせたい」という内部の話であって、「うちのページ自体を目立たせたい」という話ではありません。

では、ウェブサイトにとって「本当の表紙」は、どこにあるのか？
「沢山の情報の山から、ひとつの情報を見つける時、一番最初に目にする部分」・・・Googleの検索結果が一番それに近いんじゃないか、と思います。
となると、Googleの検索結果は、全部の本が規則正しく背表紙を向けている本棚、ということになりますね。

ここからわかることは、検索結果の画面というのは、まだまだ改善の余地がありそうだ、ということです。
だってあなた、どこまでも続く、きれいに背表紙がズラーッと並んだ本棚から、欲しい本を探したいと思いますか?
それが面倒だから「先頭から３つ目くらいまでしか見ない」って事になるのでは？
背表紙が並んだ状態というのは、構造としては美しいです。けれど、売れている本屋は大抵、平積みをしたり、POPをつけたり、店員の個人的なおすすめを本棚としてまとめてみたり、あえて「構造としての美しさを崩して、人間の感性を刺激するかたちに再構成している」ところがほとんどです。
ゆくゆくは、検索結果の画面もそういう風に進化するんじゃないかと考えています。
というか、Googleの検索結果画面だけカスタマイズして作れるAPIみたいなものがあれば（あるのかな？）、すぐにいろんな人が反応して沢山バリエーションを作りそうだよね。

本という媒体自体、人々から長く愛された実績があるので、人の興味を引くためのノウハウが沢山あります。
ウェブの世界を考えるときも、まだまだメタファーとして参考になる部分が多いのかな、と思いました。

屁民　@1003000
屁民新報＋（履歴等）　http://sakusabe.blogspot.com/

忘れてくれよ！インターネット

2011-09-18T03:08:00.001+09:00

インターネットって基本的には情報を蓄積する方向で作られてますよね。
それはそれでいいんだけど、場合によってはネットワークが情報を忘れる機能というのも必要なんじゃないか、と思う。
例えば、僕は中学生くらいの頃、VBで作ったアプリをあるフリーソフトのポータルに登録していた。
この時、サイトにアカウント登録したんだけど、この情報が検索すると未だに出てくる・・・これ、人間で考えたら相当な粘着ですよ。忘れてくれよ。（※IDとパスワードなんて人間の側がとっくに忘れてるのでこちらからは消せない）

こういう、情報がデジタルになったことで、昔じゃ考えられない弊害（？）が出る例、というのは以外に多い。
いっとき騒がれた、映画や音楽データ関連の諸問題も、テープのダビングであれば必ず発生する「劣化」が起きないことが騒ぎの原因だったし、P2Pでプライバシーに関わる情報が一度流れると削除できなくなる、というのも似たような話だ。
最近だと、不適切なツイートで炎上してしまった方々もおられましたが、気の毒にも複数のまとめサイトに本名や出身地までしっかり記録されていて、彼らの不名誉な情報は半永久的に消せないと考えていいでしょう。

まあ、デジタルデータの「劣化が起きない特性」は基本的には良いものとして捉えられているし、僕もそこに異論を挟む気はない。
ただ、一部の情報は意図的に劣化させたり、ログをとらないようにする、みたいな機能も必要だと思う。
どんな情報でも無差別に永続させていたら、そのうちがんじがらめになってものすごく不便なことになるんじゃなかろうか。
つまりは、必要に応じてアナログのエミュレートをするべきだろう、ということです。

そういう意味で、最近のツイッターやフェースブックみたいなSNSは割といい仕事してると思う。
過去のツイートは残ってるけど、ブログのようにY年M月D日のこれ、みたいに、ピンポイントで呼び出せないので、ひたすらスクロールバーを進めるしかない。
この面倒くささがツイートを過去へさかのぼろうとする力に対する抑止力になってる。
それでも面倒に打ち勝って過去の一言一句まで見ようとするのは、ファンかストーカーか粘着といった特殊なプロファイルの方々なので、そこはもうしょうがないね、と諦めの一線も引きやすい。

そんなツイッターでも前述のように炎上してしまった方々は、一般公開設定で写真出したり、ミクシィで簡単に本人を特定できるようになっていたりと、どちらかで言えば運用面で失敗している感が否めないので、これらの対策はもはや教育に委ねるしかあるまい。

屁民
@1003000

ウェブデザイン不要論

2011-09-18T03:06:00.000+09:00

過去に何度か似たようなことを書きましたが、「ウェブデザイン不要論」です。
あくまで個人的な意見なのですが、ウェブデザイン、ウェブデザイナーという分野・職業は近い将来消滅すると考えています。大きくは、２つの理由があります。

１．閲覧者はコンテンツを見てるだけで、「ウェブのデザイン」なんて見ていない
ウェブサイトというのは不思議なもので、閲覧する側と制作する側とで感覚がズレています。
例えば、あなたが旅行に行きたいと思い立ち、検索サイトで「熱海　旅館」なんてキーワードを検索したとします。
この時、探している条件が「一泊10,000円まででオーシャンビューの部屋」だとしたら、あなたは開いたサイトでまずは「一泊の料金」と「オーシャンビュー」というキーワード、それにバルコニーからの写真なんかを探しているはずです。
つまり、この時ウェブサイトには、まず第一に写真やテキストなどの充実したコンテンツが求められます。
そして、そこにたどり着くために、検索のしやすさ、ページ内の回遊性、それに整理されたナビゲーション、といったものが求められます。
一方で、熱海の旅館からウェブサイト制作を受注した制作者は大抵、「旅館の雰囲気の伝わるデザイン」や「高級感の演出」といったあたりに腐心し、そこに一番時間をかけます。そうなる理由の多くは、発注者の意図を最大限汲んでいるためです。
その結果、FLASHのスプラッシュから始まるような、重厚なウェブサイトが完成します。
旅館のオーナーは満足するかもしれませんが、このようなプロセスで完成したウェブサイトは、閲覧者に求められるものから離れてしまいがちです。
それでもなぜ、制作側がこういった問題点を指摘しないのか・・・
これは邪推ですが、閲覧者が求めている条件は、こんにちではCMSの導入等、広く使われているツール等でほとんど解決可能だからではないでしょうか。
つまり、ここで必要とされるのは、CMSの設置と設定を行える作業者であり、デザイナーではありません。
たとえ制作者がそのことをわかっていても、
「デザインの高級感なんて必要ありませんよ」
とは、口が裂けても言えないのは、それが自己否定につながりかねない危険な提案だからです。

２．効率化・省作業化が仕事の自動化を推し進める
どの分野でも同じことが言えますが、企業が行う以上、ウェブ制作も当然効率化が図られます。
ノウハウの共有から始まって、画面内の各部品の共通化とCSSやスクリプトの汎用化、更に流れ作業化を進めていくに従い、個人の能力に依存する度合いは減っていきます。
結果、機械的な作業が増え、誰でもできるようになってきたら、経営者としては
「こんなことのためにわざわざ高給で社員を抱えるのはリスキーだな」
と考えるのが普通でしょう。
実際に画像を作成するのはロゴまわりと中央のメインイメージ程度で、あとはアルバイトのコーディングでほぼ完成、FLASH（JS）も定型のものを活用、というようになれば、効率は良いですが、デザイナー育成などは行うべくもありません。
この形態に一番近いのは、工場です。いずれ、本物の工場同様、今は人がやっている作業も、無人化が進むでしょう。そうなると、ますます業界全体で雇用できるウェブデザイナーの数は限られていきます。
これが製造業でいうところの旋盤工のような職人であれば、高い技術力で機械による代替ができない職業的価値を守ることもできるのでしょうが、最初からアドビ社製品にドップリ浸かっているウェブデザイナーには、そのような居場所はありません。人工的な環境に飼いならされ過ぎているというのも、大きな問題でしょう。

では、ウェブデザイナーはどうなるのか？
いくつか道はあると思いますが、@designmap_info氏が触れている通り、「UXデザイナー」というかたちになるのが、一番前向きな結論かと思われます。

「ウェブデザイナーは一生続けられる仕事ですか？」を、もう一度、根本から考える
http://www.designmap.info/tobewebdesigner/after_webdesigner/beingwebdesigner/

ユーザー体験のデザイン、という分野は、人の振る舞いやインタフェースについての深い知識と造詣が必要とされますので、「アルバイトに代わってもらう」ことは出来ません。iPhoneアプリ開発やウェブアプリケーション開発においては、今後必須の人材となるのではないでしょうか。
しかし、UXデザインにはそうした座学の知識に加え、実務に必要なものとしてJSやPHPのようなクライアントサイド・サーバサイドのスクリプト言語を最低限ひとつずつは習得しないといけないですし、MySQLに代表されるDBの知識も必要になってきます。
加えて、アドビ系ツールによる画像作成の頻度はウェブデザイナーに比べかなり下がるでしょうから、作業スキームが大きく変化することになります。失礼ながら、現在現役でウェブデザイナーをしている方全員が簡単に転身できるとは思えません。

まとめると、
・ウェブのデザインが気になるのは発信する側だけ。かけた時間が報われるほどには、見られていない。
・求められるデザインのほとんどはテンプレートデザインとCMS導入・設定で解決可能 = 誰でもできる作業にわざわざ専門家を雇う必要性が薄い

といったところでしょうか。
もちろん、自分もウェブデザインをかじっている人間なので、自戒を込めて。

屁民新報＋

引っ越しました

個人的なmemo

.htaccessで旧ドメインを新ドメインにリダイレクトさせる設定

PHPで前日の日付を算出する

[jQuery plugin]imagesLoaded イメージが確実に読み込まれたら実行

BootCampのアップルキーボード英数キーの問題を解決！

facebook埋め込み

ネットオウルがphpアプリケーションの無料クラウドサービスを開始

dlvr.it RSSをtwitterやfacebookに投稿できるサービス

エクセルで英数字だけ半角にするVBA

新規サイトを立ち上げる前に知っておきたい29個のアドバイス

MTでカテゴリごとに表示を変える条件分岐方法

HTMLの整形

実態参照

MT パンくずリスト

MT cutfirstchar⇒変数タグの最初の数文字を削除する

常にインフォウィンドウを1つだけ表示する方法／Google Maps JavaScript API V3

IE7のz-indexに関するバグ: 親エレメントに大きな値を設定で解決

jQuery IE でchangeとclickがおかしい件

スマホサイトへ遷移するかどうか、ダイアログで確認するJS

確認画面付きのメールフォームのひな形作りました

デモと使い方

ダウンロード

javascript 日本語入力中かどうか判定

フォームにテスト入力するjs

iPhone用のウェブを作る時の覚書 widthとinitial-scaleの関係

【ブラウザの印刷機能を使う２】 jsで印刷範囲の指定

■前提

1.印刷用CSSの指定

2.印刷したい要素は$(".print_parent")の中に予め格納されている

3.印刷ボタン$(".print_btn")がある

■その上で・・・

■解説

PHPで文字列の評価をする if($hoge=="hogehoge"){}以外の方法

外部ドメインのURLからファイル内容を取得する

【PHPのコード】

【javascriptのコード】

mixi再録：バス

mixi再録：日本代表監督選考を憂う

mixi再録：アクアクララ

絵本の紹介：おんがくかいのよる

藤子F不二雄 異色短編集が面白い

PHP ファイルの生成日時と現在の日付を比較する

要素を手軽にソートできる「jSort - jQury sorting plugin」

javascript jQuery 右クリックさせないようにする方法

PHPのバージョンごとの細かな変更点が載っているページ

【ブラウザの印刷機能を使う】 CSSで印刷範囲を指定する

PHPからjavascriptに多次元配列（二次元配列）を渡す

ウェブサイトって「表紙」ないよね

忘れてくれよ！インターネット

ウェブデザイン不要論

iPhone用のウェブを作る時の覚書　widthとinitial-scaleの関係

【ブラウザの印刷機能を使う２】　jsで印刷範囲の指定

PHPで文字列の評価をする　if($hoge=="hogehoge"){}以外の方法

藤子F不二雄異色短編集が面白い

【ブラウザの印刷機能を使う】　CSSで印刷範囲を指定する