へっぽこコーダー備忘録

phpやらjavascriptやら、使った技術をすぐに忘れちゃうから、おぼえがき程度に書いていきまーす

jQueryでチェックボックスを操作するときは「attr」ではなく「prop」！？

javascrip・jQuery

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

動画サイトで「ストロボエッジ」主題歌の「愛唄～since 2007～」を聞くことにハマってます。

1分半くらいしかないのに、ひたすら繰り返し聞きながら作業してます☆

この曲、有村架純が歌ってると思ってたんですけど、どうやらwhiteeenって全く別人だったんですね。。。

 

とりあえず、この曲を10数回リピートしながら悩んでた問題がjQueryでのinputタグの操作です。

 

目的の動作は、複数のチェックボックスから特定の箱をチェックしたときだけ、別の選択肢が現れるって感じ。不動産サイトでありそうなやつです☆

 

とりあえず、最終的にうまく動いたのが下のコード。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

function judge_check(){

    if($('#shisetsu1:checkbox').prop('checked') || $('#shisetsu2:checkbox').prop('checked')){
        $('#jokenBox').css('display','block');
    } else {
        $('#jokenBox').css('display','none');
    }
}

$('#shisetsu1:checkbox,#shisetsu2:checkbox').on('click',function(){

    judge_check()

})

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

関数やID名のセンスは自覚してますのでノータッチで。

動作は

・#shisetsu1と#shisetsu2はチェックボックスで、このどちらかにチェックが入っているときは#jokenBox(別の選択肢が入っているdivタグ)が表示される。

・どちらにもチェックが入ってない場合は#jokenBoxは非表示になるという感じです。

 

結論から言うと、propにしているところを最初はattrで操作していたのが問題だったようです。

 

■propとattrの違い

propはチェックの有無を「true」「false」

attrはチェックの有無を「checked」「undefined」

で返すようです。

 

attrで指定してたときは、チェックが入っているのに、チェック無しの動作をするから悩んでいましたが、返ってくる値に違いがあったようですね。

falseとundefinedの違いを認識しておく必要があるのかなと思いますが、とりあえずはinputタグを扱うときは、attrではなくpropで！と考えておけばいいかなと思います＾＾

 

 

楽天GOLDでショップデザインを一新する手順☆

その他

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

楽天GOLDを使って、ストアのデザインをお洒落にしたいときの作業手順だよ☆

 

１．FTPでトップページのファイルをGOLD用のサーバにアップ

　とりあえず、この時点ではトップページの作り込みは終えている前提です。

　トップページのHTMLやCSS、画像を一気にGOLDサーバにアップします。

　最初FTPでアクセスしたらパスが「/」だと思うから、そこにindex.htmlを設置すればOK。

　ちなみに、HTMLでヘッダー、サイド、フッターは<iframe>でファイルを分けておく必要があるよ。

 

２．ストアアクセス時にGOLDで作ったトップが表示されるようにする設定

　「１」でファイルをアップしただけじゃ、せっかく作ったオサレなページは表示できないのです。RMSで、GOLDのサーバにおいたページを表示させるぜ！っていう設定をする必要があるのです。

　手順は

　ⅰ．RMSにログイン後、RMSのいちばーん上のヘッダにある「従来デザイン表示」をクリック。

　ⅱ.「お店を作る」をクリック！！

　ⅲ.「旧R-Storefront」の右横の「go!」で次のページへGOしちゃいましょう。

   　f:id:sawayaka4kumi:20150305221426j:plain

 

　ⅳ.「画面の上」をクリック！

　ⅴ.「トップページジャンプ」をクリック！

　ⅵ.「GOLDで作成のトップページにジャンプする」にチェックです！

で、「○秒後にジャンプする」の秒数を決めてやれば、これでOK！

なのですが、この秒数がミソで、この秒数は普通のストアトップにアクセスたとき、何秒後にGOLDのページにリダイレクトされるかって設定です。私的には0秒でいいと思いますし、実際そうしてます。

しかし、このリダイレクトは、上記の「ⅲ」でアクセスするページに行ったときにも発動してしまうようで、0秒にしてしまうと、「ⅲ」のページにアクセスした場合も一瞬でGOLDのトップへ飛ばされてしまうのです。

0秒にしたら、秒数の再設定がなかなかできなくなるので、お気をつけて。。。

 

３．商品やカテゴリページにも、GOLDと同じヘッダーやサイドメニューを設定する。

　「2.」までの設定で、GOLDのトップページが表示されるようになったと思います。

　次は、商品ページなどにもGOLDと同じヘッダーやサイドメニューを設置します。

　

　まず、RMSの「デザイン設定」→「ヘッダー・フッター・レフトナビ」に行きます。

　おそらく「ヘッダー・フッター・レフトナビ01（自動選択）」が選択されていると思うので、「編集」。

　すると、「ヘッダーコンテンツ」「レフトナビゲーション」「フッターコンテンツ」の3つの入力欄がありますね。

　そこに、GOLDのindex.htmlに記載しているヘッダー、サイド、フッターの<iframe>をそれぞれ書き込んでやります！

　そしてこの設定を保存してやれば、商品ページやカテゴリページも、トップ同様のお洒落なデザインが反映できてますね☆

 

以上で完了してるはず！

はじめてGOLDを使ったとき、設定方法がわからなくて調べまくった記憶があるので、忘れないように書いておきますー＾＾

 

 

 

お名前ドットコムで、違う会員にドメイン権限を移管する。

その他

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

お名前ドットコムで管理しているドメインを、別のお名前.comユーザーに引き渡す手順☆

 

１．会員画面にログイン後、メニューの「お名前.com会員情報」をクリック

f:id:sawayaka4kumi:20150304182037p:plain

 

２．「お名前ID付け替え」をクリック

f:id:sawayaka4kumi:20150304182053p:plain

 

３．移管対象のドメインにチェックをいれて、引き渡し相手の情報を入力する。

f:id:sawayaka4kumi:20150304182103p:plain

　既に存在する会員に渡すなら「既存のお名前IDに付け替え」で。

　まだ会員になっていない人に引き渡すなら「お名前IDを新規発行して付け替え」でよろしく☆相手の情報を入力したらそれで完了です。

　結構、簡単ですね＾＾

wordpressのショートコードをいじってみよう！！

wordpress

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

無料のテーマをダウンロードしてきたところ、固定ページでショートコードが使われまくり！

ちなみにショートコードってこんなやつ↓

[text name="sawayaka"]
固定ページにポンと記載されてるんだけど、実際公開画面で見ると色々とデータが表示されてるみたいな。

 

で、今回いじりたいページには、画像とかテキストが出力されるショートコードが記載されてました。

こんな感じ↓

[sample icon="tree" title="タイトル"] テキスト [/sample]

公開画面にはショートコードで指定されたアイコン、タイトル、テキストが出力されます。

<div class="sample-box">
    <div class="sample-box-1">
        <span>treeアイコン</span>
    </div>
    <div class="sample-box-2">
        <h3>タイトル</h3>
        <p>テキスト</p>
    </div>
</div>

勝手にタグ出してくれるのはいいけど、今回はタイトルにリンクを貼りたいのに、これじゃ貼れないよー；
ということで、ショートコードで出力されるタグをいじってみよう☆ってことになりました。

 

ショートコードの設定は、function.phpの中に記載されてます。

function.php開いたら「add_shortcode」で検索かけてみてください。

↓のようなコードが引っかかってくると思います。
add_shortcode('sample','sample_shortcode');

1つ目の引数は、固定ページで使用するショートコード名。

2つ目の引数は、ショートコードから読みだす関数名ですね。

 

もうちょっと下を見ると、2つ目の引数の関数があると思います。

今回の場合はこんな感じ↓

function sample_shortcode($atts,$content = null)
{
    extract(shortcode_atts(array( 'icon' => '', 'title' => ''),$atts));

    $output = '';
    $output .= '<div class="sample-box">';
    $output .= '<div class="sample-box-1">';
    $output .= '<span>'.$icon.'</span>';
    $output .= '</div>';
    $output .= '<div class="sample-box-2">';
    $output .= '<h3>'.$title.'</h3>';
    $output .= '<p>'.$content.'</p>';
    $output .= '</div>';
    $output .= '</div>';

    return $output;
}

ショートコードから受け取ったアイコンとタイトルデータを、関数内でタグでくるんで変数outputに入れて、出力データとして返すって感じですねー。

で、カスタムの目的はタイトルにURLを貼り付けたいから、関数の引数にURLを付け加えて、変数にURLをいれて、タイトルにリンクを設定するって作業が必要です。

やったのが下のコード。
function sample_shortcode($atts,$content = null)
{
    extract(shortcode_atts(array( 'icon' => '', 'title' => '', 'url' => ''),$atts));

    $output = '';
    $output .= '<div class="sample-box">';
    $output .= '<div class="sample-box-1">';
    $output .= '<span>'.$icon.'</span>';
    $output .= '</div>';
    $output .= '<div class="sample-box-2">';
    if($url){
        $output .= '<h3><a href="'.$url.'">'.$title.'</a></h3>';
    }else{
        $output .= '<h3>'.$title.'</h3>';
    }
    $output .= '<p>'.$content.'</p>';
    $output .= '</div>';
    $output .= '</div>';

    return $output;
}

リンクがいらない場合もあるので、URLが指定されてない時ように条件分岐も指定してやる。

これで、
[sample icon="tree" title="タイトル" url="xxxxx.jp"] テキスト [/sample]
とすれば、予定通りに動きました♡


ちなみにextract関数は、自動で連想配列のキーを変数名、値を変数の中身に入れてくれる便利な関数です。
でもセキュリティー的に危険な使い方になっちゃう場合もあるから、気をつけましょう！

jQueryプラグインのcolorboxが動かない（汗）

wordpress

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

お客様から、商品写真をクリックすると、にゅーっと大きく表示されるようにしたいとの依頼を受けたので、colorboxを導入することにしました。が、ちゃんと設定しているはずなのに動かない(汗)

環境は、wordpressを使っております。

colorboxについては、↓を参考に。

[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」

デバッグツールによると、colorboxの関数が定義されていないとのこと。

これは、プラグインが読み込めてないか、ライブラリが読み込めていないかに違いない。
ということで、調査してみるも両方とも読み込めている。

が、ライブラリのバージョンは1.9.1なので問題ないと思いきや、ワードプレスのヘッダ関数で結構古めのバージョンが読み込まれている！

これが優先的に読み込まれているような感じ。
ということで、アクションフックでこれを削除☆
function.phpに

remove_action('wp_head', 'wp_print_head_scripts', 9);

を書けばOK。

問題なく動くようになりました＾＾


ちなみヘッダのアクションフックの一覧。
http://teru2-bo2.blogspot.jp/2011/07/wphead.html

参考までに、CDNでのｊQueryのバージョン一覧。
http://matome.naver.jp/odai/2138301798034832301

お気に入りのバックアップを取っておこう☆firefox編

その他

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

PC内の諸々データのバックアップを取ったついでに、私のメインブラウザ『firefox』のブックマークリストのバックアップも取っておきました。

手順は簡単、以下の通り☆

１．メニューバーから「ブックマーク」をクリック

　　　↓

２．「すべてのブックマークを表示」をクリック

　　　↓

３．「インポートとバックアップ」をクリック

　　　↓

４．「バックアップ」をクリックで、バックアップのjsonファイルをダウンロード

 

以上で完了です。

 

参考になるサイトを大量にブックマークしちゃってることも多いと思いますので、いざというときのために、皆さんも定期的にバックアップを取っておくといいと思いますよ＾＾

 

特定ブラウザ（今回firefox）だけネットワークにつながらないよー

その他

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

タイトル通りのことが起きました。
以前にも起きたことがあるのですが、久々に起こったので対処方法がわからない(汗)
ということで、とりあえずIEを使って対処方法を検索！
ネット情報を見ながら、ブラウザ設定をいじりまくっても一向につながる気配がない！
これではいよいよ作業がすすまない；；というときに、記憶がよみがえってきました！

原因はセキュリティーソフト。
一度、セキュリティーソフトのブラウザに対する保護を解除してやると、普通につながりました＼(^▽^)／
あとはセキュリティーを元に戻せば、いつも通りですね！
ちなみにこの時、メーラーのサンダーバードもつながっていなかったのですが、そちらも回復しました。

Mozilla関係が拒否されていたのか！？