2015年05月

2015年05月29日

今月はランサーズなどの依頼による生活よりは
FXのトレード中心の生活を送っています。

いや、ワードプレスの絞り込み検索の記事や
javascriptのフォームの事を記事にしていますが
比率としては、FXのトレードの方が圧倒的に多いです。
私としては、WEBサイト制作などを本業として
FXトレードはサブとしているつもりですが
今や完全に逆転しています。

まあ、フリーランスとしてお仕事を依頼されるっていうのは
詰まる所、技術的な面や知識的な面よりも、
人間関係の比重がやっぱり多いんですよね。
ランサーズとは別の、もう一つのクラウドソーシングサイト
「クラウドワークス」からも依頼を受けていたのですが
つい最近、4ヶ月以上ぶりに連絡が着たクライアントがいました。
その当時、私はランサーズからの依頼も多数、請け負っていたので
私も放っておいたのですが、4ヶ月ぶりの連絡にもかかわらず
謝罪の言葉も無し。
ホント、嫌になってきます。

まあ今現在、ランサーズ自体からも依頼を受けていますし
FXトレードやらアフィリエイトサイト作成やら、やりたい事、しなければいけない事は沢山あるので、
このクライアント一人に対してそこまで目くじらを立ててもいませんですが
なんというか、やっぱりこちらの思惑通りに進まない事が多々、あったりします。

それこそが人間関係の醍醐味かもしれませんが
(なんか、以前も同じようなことを書いたような…)
こういうことが起こってくると、やっぱりFXやアフィリエイトに
比重を置きたくなるってもんです。

ちなみに来月の冒頭に、前回と同じように5月分の収入を記事にしようと思っていますが
ぶっちゃけ、5月はFXからしか収入がありません(笑)



2015年05月22日

昨日、自身が身に着けたスキルをメモ帳代わりとして記事にしましたので
少し前に請け負った、ワードプレスでカスタムフィールドの値を参考に
絞り込み検索機能のついたサイトを作成したので
そちらの方も記事にしたいと思います。

まずは絞り込み検索した結果を表示するページに関してですが
これはsearch.phpに表示させるようにします。
このsearch.phpはワードプレスのテーマには大体、標準についていて
「テーマの編集」の項目で、「検索結果」として表示されますが
このsearch.phpに関しては、「s」というパラメータに対して
検索ワードを格納して表示される仕組みになっています。

つまり、「s」の中に検索ワードが入っていなかったら
検索結果のページ(search.php)が表示されません。
この現象を回避するため、function.phpに以下のコードを指定する必要があります。


function custom_search($search, $wp_query  ) {
    if ( isset($wp_query->query['s']) ) $wp_query->is_search = true;
    return $search;
}
add_filter('posts_search','custom_search', 10, 2);

では早速、絞り込み検索を作り込んでいきますが
まず、「カスタムフィールドテンプレート」のプラグインをインストールします。
しなくてもいけるかもしれませんが、カスタムフィールドの設定が楽なので
私は利用しています。

カスタムフィールドテンプレートをインストールしたら
絞り込み検索で表示させる記事に対して、カスタムフィールドを設定していきます。

例えば、カスタムフィールドに「ワード1」という項目を作成したとします。
「ワード1」に「キーワードA」と入力したページ(ここでは「ページA」とします)と、
入力していないページ(「ページB」)を作成します。
そして、絞り込み検索にてチェックボックスで「キーワードA」を指定し
チェックを入れたらページAが表示、チェックを入れなかったら
「ページA」「ページB」が、共に表示されるようになる仕組みです。

それでは、まず絞り込み検索を行うページの作成ですが
絞り込み検索を行うページには、formタグにて作成していきます。


<form method="get" action="<?php bloginfo('url'); ?>">
<input type="hidden" name="s" id="s" placeholder="検索" /><br />

<input type="checkbox" name="search-word" value="キーワードA">キーワードA<br />
<input type="checkbox" name="search-word" value="キーワードB">キーワードB<br />

<input type="submit" name="submit" value="上記の条件で検索">

</form>

上記のコードが絞り込み検索を行う部分のformタグです。
カスタムフィールドテンプレートのIDは、ここでは「search-word」と設定します。
このカスタムフィールドのIDは、自分で考えたワードで結構です。
そして、inputタグのname属性に「search-word」を設定し
valueの値は、絞り込みしたいキーワードを指定します。

また最初に書きましたが、ワードプレスのsearch.phpはsのパラメータで表示させるので
type属性にhiddenを指定して、隠しパラメータとして送信する必要があります。

絞り込み検索を行うページの作成が終わったら
今度は、その絞り込み検索の結果を表示させるために
search.phpに、PHPを記述していく必要があります。


<?php
$s = $_GET['s'];
$word = $_GET['search-word'];

foreach($word as $keyword){
	$jouken[] = array(
		'key' => 'search-word',
		'value' => $keyword,
		'compare' => '='
	);
}

$paged = get_query_var('paged');

query_posts(
array(
'post_type' => 'page',
'post_status' => 'publish',
'posts_per_page' => 20,
'meta_query' => array(
	$jouken,
	'relation' => 'AND'
),
'paged' => ( $paged ) ? intval($paged) : 1
));
?>

絞り込み検索の結果の表示ですが、「query_posts」でページ情報を取得し
表示させています。

inputタグで送信したvalueの値を「$word」に格納。
そして、foreachにて$joukenの中に配列として、格納していきます。

…とまあ、一通りのコードと大雑把な説明で書いてきましたが
私自身、まだ理解していない部分があったりします。
ちなみに、この絞り込み検索の作成を行うに当たっては
「KOTORI」さんのページを参考にさせていただきました。
かなり四苦八苦したのですが、上手くいった時には
なんとも言えないような快感にも似た感覚でしたw

このカスタムフィールドによる絞り込み検索ですが
例えばカスタムフィールドに数値を入力し
特定の数値の範囲内ならば表示するといった検索も可能みたいです。
不動産関係や、ネットショップの販売価格による絞り込み検索なんかにも実装できそうです。



2015年05月21日

ちょっと久しぶりの日記更新。
今週のFXトレードで損失を出してしまいました。
まあトータルではプラスなので
その部分では、昔よりは成長したかな。

さて今回は、HTMLのformタグで登録フォームを設置し
各入力項目の空欄状況をjavascriptでチェックして
必須項目が空欄であれば、入力を促すように警告文を出す
…といったことに現在、チャレンジしていて解決したので
自分のメモ代わりとして、記事にしたいと思います。

現在、ランサーズで受けている依頼で
ホームページから登録できるフォームを作成しているのですが
クライアント側の意向で、必須項目が空欄の場合
ページ上に警告文を出す…といった依頼を受けていました。

正直、作成した経験がありませんでした。
が、過去の経験上、これを乗り越えたら
また自分のスキルが確実にレベルアップはするので
逃げずに作成、そしてなんとか作り上げることができました。
クライアントさんには、かなり待たせてしまいましたが…

まずHTMLは以下の通りに記述します。


<form name="form1" method="post" enctype="multipart/form-data" onsubmit="return check()">
<p>
名前:<input type="text" name="text1"><br />
写真:<input type="file" name="file1"><br />
チェック:<br />
<input type="radio" name="check1" value="チェック1">チェック1<br />
<input type="radio" name="check1" value="チェック2">チェック2
</p>
<div id="no-input1">[名前]の項目が未入力です</div>
<div id="no-input2">[写真]の項目が選択されていません</div>
<div id="no-input3">[チェック]の項目がチェックされていません</div>
<p>
<input type="submit" value="送信">
</p>
</form>


未入力の項目があった場合の警告文は
予め、HTMLソースに記述しておき
cssのdisplayで「none」を指定し、非表示にしておきます。
「enctype」を設定しているのは、今回の依頼が
画像のアップも必須項目だったからです。

そして、javascriptのコードは以下の通りに記述。


<script>
function check() {
	var flag = 0;

	if( document.form1.text1.value=="" ) {
		flag = 1;
		document.getElementById('no-input1").style.display="block";
	} else {
		document.getElementById('no-input1").style.display="none";
	}

	if( document.form1.file1.value=="" ) {
		flag = 1;
		document.getElementById('no-input2").style.display="block";
	} else {
		document.getElementById('no-input2").style.display="none";
	}

	if( document.form1.check1.value=="" ) {
		flag = 1;
		document.getElementById('no-input3").style.display="block";
	} else {
		document.getElementById('no-input3").style.display="none";
	}

	if( flag == 0) {
		return true;
	} else {
		return false;
	}
}
</script>

「flag」という変数を設定し、if文で各項目が空欄かどうかをチェック。
空欄のチェックは「value==""」で指定しています。
もしvalueの値が空欄だった場合は、flagに1を代入。
そして最後のif文で、flagの値をチェックし
値が0の場合は送信、値が0ではない場合は「return false」で
submitによる送信を中止させています。
「type="file"」や「type="radio"」の場合も
「value==""」の指定でチェックできました。

ちなみに、HTMLのformのonsubmitは「check()」ではなく
「return check()」と「return」を書いていないと
「return false」としても、そのまま送信されてしまいます。

以前書いた「jQueryの条件分岐」の依頼なのですが
私はjQueryでの解決法が見つけられずに
今回のjavascriptによるプログラムで上手くいきました。
なんか、肩の荷が下りました(笑)



2015年05月15日

本日(というか、昨日)ランサーズにて、以前依頼を受けたクライアントから
「以前、制作してもらったサイトのデータが滅茶苦茶」
という連絡がありました。
…ということで、そのデータの部分のみですが
修正することになってしまいました。

その依頼については、私の中では「絞り込み検索の実装」という
その当時では、かなり未知のスキルを用いての作業でしたので
そちらの方で、気力を使い果たしていました。
なので、その絞り込み検索によって表示されるページのデータまで
正直言って、細かい部分まで気が回らない状態でした。

自分自身が今まで経験がしたことがない仕事内容の依頼を受けた時
自分自身のスキルアップを図ることができ
そのことを経験で分かっているので、これまで受けるようにしていました。

…が、クライアントの方からすると、こちらのそんな事情は知ったことではなく
「プロの人のお金を出して依頼している」ということに間違いはなく
私の方は、依頼を受けた時点で、その仕事を正確にこなす責任が発生します。

これはまあ当然のことで、
例えば大工さんに高いお金を払って、家を建ててもらったのに
後でその住宅に欠陥が見つかれば、怒るのは当然のこと。
同様にレストランなどで、金を払って食事をしますが
出された料理の中に虫などが入っていれば、当然怒ります。

それは確かにそうなので、制作したサイトに欠陥が見つかれば
それは私のミスであり、責任があるのは確かです。
…が、一方的に言われるのも、腹が立ったりします(笑)
「逆切れかよ」と思われるかもしれませんが
仕事の依頼を受けていて、最初の依頼にはなかった内容を
追加してくる依頼人が、とにかくよくいるので
その部分で、必要以上に気力を消失したりしてしまいます。

まあようするに、一番の要は、最初に依頼を受ける時に
きちんと打合せをするのが一番だと、いろいろと経験した上で
感じる部分だったりしています。
今のところ、FXが順調ということもあり
ランサーズの新規受注に関して、おっくうになっていたりします。



2015年05月12日

現在、ランサーズから受けている依頼の内容で
formからsubmitで送信した際に
入力必須項目が未入力の場合、HTMLの文章で警告文を出す
…という機能を実装させるために四苦八苦していますが
中々、上手くいきません。

formタグに、onsubmit属性を設定し
それをjQueryによって、警告文を表示させようとしていますが
どうもif文がひとつしか読み込まれていないようです。

function sp_check() {
if (条件文1) {
// 命令文
}
if (条件文2) {
// 命令文
}
}

…というプログラムを組んでいますが、どうも
片方のif文しか読み込んでいないように思います。

まあ、HTMLやCSSに比べると
javascriptやPHPなどは、まだ赤子に毛が生えた程度の知識しか
持ち合わせていないのですが…

ただ、こういう”プログラム”って
自分で組んで、上手く動作すると、すごぶる快感だったりしますw

その快感を得るためにも、まだまだ命令文や記述方法を
マスターしなければいけませんけどね…