ラジオボタンをカスタマイズの例

.ragio_custom input{
    display: none;
}
.ragio_custom label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    color: #3e4956;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.ragio_custom label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #e2e2e2;
    border:1px solid #999;
    border-radius: 50%;
}
.ragio_custom input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #e82c83;
}
<div class="ragio_custom">
	<input type="radio" name="radio1" id="select1" value="1" checked=""><label for="select1"><img src="images/plan/1.jpg" class="radio_img" alt="選択肢1"/></label>
	<input type="radio" name="radio1" id="select2" value="2"><label for="select2"><img src="images/plan/2.jpg" class="radio_img" alt="選択肢2"/></label>
	<input type="radio" name="radio1" id="select3" value="3"><label for="select3"><img src="images/plan/3.jpg" class="radio_img"  alt="選択肢3"/></label>
	<input type="radio" name="radio1" id="select4" value="4"><label for="select4"><img src="images/plan/4.jpg" class="radio_img" alt="選択肢4"/></label>
</div> 

ラジオボタン 

drawer.js アンドロイドでメニューがスクロールしない 

腹立たしいほどハマってしまったので、記録したい。
元は、iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
https://qiita.com/YujiHatanaka/items/64b6a6c8facb3a2f69b5

内容——–

iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
JavaScript
iscroll.js
概要

drawer.jsを使った、スマホ用バーガーメニュー実装で、新しいAndroidのChromeにおいて長いメニューがスクロールしない症状がありました。スクロールは、全くしない訳では無く、フリックで素早く動かすと若干スクロールするものの、通常のタップ移動では指を離したタイミングでメニューが閉じてしまいます。この不具合の修正を試みました。
詳細

Androidでは、2016年末頃からスクロール動作を滑らかにするために、addEventListenerにイベントを登録する際、デフォルトでそのイベント内部の preventDefault を実行しないモードになりました。
jQuery の on() でイベントを登録している場合、addEventListener の第3引数に {passive: false} を加えられるようなオプションは無いため、drawer.js内部で on()を使用している箇所をaddEventListener を使って書き直す必要があります。加えて何かとバグの多いiscroll.js ではAndroidのタッチ動作をうまく検出出来ていない様子なので、スマホだけに表示させる画面、という前提で動作するよう修正試みました。
修正ポイント
drawer.js(v3.2.2)
19行目

iScroll.js のデフォルトオプションを定義している部分。preventDefaultが基本ONになるようにしている。
修正前
drawer.js

preventDefault: false

修正後
drawer.js

preventDefault: true,

107行目

修正前
drawer.js

if (touches) {
$this.on(‘touchmove.’ + namespace, function disableTouch(event) {
event.preventDefault();
});
}

修正後
drawer.js

if (touches) {
document.addEventListener(‘touchmove.’ + namespace, function disableTouch(event) {
event.preventDefault();
}, {passive: false});
}

iscroll.js(v5.2.0)
42行目

内部でaddEventListnerを addEventとしてエイリアスを作っている部分があるので、ここで Android対応の書き方にする。
修正前
iscroll.js

me.addEvent = function (el, type, fn, capture) {
el.addEventListener(type, fn, !!capture);
};

修正後
iscroll.js

me.addEvent = function (el, type, fn, capture) {
el.addEventListener(type, fn, {passive: false});
};

191行目

マウスポインタの場合の処理だが、スマホのみで使う前提なので、タッチイベントと同じものとして扱わせる。

修正前
iscroll.js

pointerdown: 3,
pointermove: 3,
pointerup: 3,

修正後
iscroll.js

pointerdown: 1,
pointermove: 1,
pointerup: 1,

331行目

ポインター、マウスなどをdisableにする処理だが、条件分岐がAndroidの場合、望んだとおりにならないようなので、タッチデバイスしか扱わないのとChromeのデバッグ環境でも動くことを考えて修正。

修正前
iscroll.js

disablePointer : !utils.hasPointer,
disableTouch : utils.hasPointer || !utils.hasTouch,
disableMouse : utils.hasPointer || utils.hasTouch,

修正後
iscroll.js

disablePointer : false,
disableTouch : false,
disableMouse : false,

482行目、622行目

e.preventDefault();をコメントアウト

これは
IScroll.prototype = {の中の
_start: と
_end: のpreventDefault を無効にしている。

以上で Android と iPhoneで正常動作するようになった。
参考

Android Chrome beta (v.56) でdocumentに対するtouchイベントのpreventDefaultが効かない
(http://qiita.com/ru_shalm/items/4d79e94b5d9c7c88607d)
一連の根本的な原因、ChromeのaddEventListenerについての挙動について説明があります。

Passive Event Listeners によるスクロールの改善
(https://blog.jxck.io/entries/2016-06-09/passive-event-listeners.html)
さらに詳細な情報があって、理解が深まります。

この問題が起きているときに、Chromeブラウザのデバッグコンソールに以下のメッセージがでます。
Unable to preventDefault inside passive event listener due to target being treated as passive.

Huluが契約終了(勝手に)したくせに引き落とししてきた

2017年5月半ば,私はプリズンブレイクのシーズン5をみていて、吹き替え版じゃないので割合真剣にみてたんだけど
数話みたところで前作より面白くないかなと自分では思ったのと、他に見たいドラマができてそっちを見てた。

そうしたらHuluがメンテナンスに入るよ〜っていうお知らせを出していたのは覚えているんだけど
何しろそのブリズンブレイクの新しいの、一応見とくか、って思ったのに
メンテ後ログインもできなくて
ご契約が終了しました。動画を視聴するには再開してください。

Huluあほか

ってHuluが言うので、新しく契約し直せってことか。と思って今はHuluでプリズンブレイクしか見てなかったから、
しばらく契約しないでいいや思ったわけです。

で、しばらくして今日は開けて20日だけど、HJホールディングス株式会社へのお支払いのご連絡 って言うメールが来て
あれ?「HJホールディングス株式会社」ってhuluか?と思って見て見たら
[HJホールディングス株式会社への¥1,007 JPYのお支払いが完了しました]ってペイパルに出てる(ペイパツ支払いにしてた)

ご契約が終了なのに、お金だけ引き落とすっていうのはどういう道理でそうなってるの?

おかしいなと思って、一旦ログインしてみるも。やはり契約は終了していると出てる。
お支払い情報鵜のところには、利用規約しかないし。

¥1,007円かえして!!マジで
っていうか5月の見れなかった文も返して!!

ていうか、本当に、契約が終了って向こうが言ってるのにお金だけ引き落としちゃうとか、そんなことするのかな?
わからない、本当にわからない。

Hulu電話サポート番号

お問い合わせを送って見たら、完了画面に電話で問い合わせ先が出てた。不親切〜。

在宅業務開始 目の疲れに効きそうな本を購入

在宅業務開始なのに今日は打ち合わせが2件あり出かけ。
途中自由が丘の駅ナカRankinRanikn(みたいな名前の)店でリップと目の疲れを取るアイマスクなるもがついてる
目を温めると体がよみがえる という本を買った。
つけて寝るだけ温感アイマスクというのが付いてた。

買った後でよもよく考えると光の目覚ましで起きてる私にはアイマスクはダメなんじゃ・・・?と思ったり
とりあえず週末だけつけてみるか。

寝る薬を飲むと始終眠いけど飲まないと眠りが浅いので困る

今日の失敗。
打ち合わせに持って行ったアイパッドに電池がない。
充電用モバイルバッテリーも充電されてなかった。

大変、間抜けだ。一日中重いだけだった

歩いたり日に当たったり重かったり、今日はいつもより体が痛い。
今日は会社に行ってる時より痛い。

お風呂であったまって、肩もレンチンするやつであっためて、なんとか持ち直したい。

ECサイトを幾つか作成した感想

案件2件・・・Wordpressとwelcart
ペットグッズ販売
飲料販売の通販サイト

案件2つ・・・ECキューブ3
スキンケア化粧品サイト
干物の通販サイト

案件1件・・・Magento
衣料品通販サイト

この中でやっぱり作りやすいのはECキューブ3
次がWordpress+Welcart

もうやりたくないのはMagento
何をするにも利用数が多くて、ネットに情報が多いという事が
いかに重要かわかった案件だった。

海外顧客ターゲット等のサイトでMagentoっていう要望があるようだけれど
チームではこれは次依頼が来ても断ろうってことになって
実績一覧にものせない事になった。

十分Wordptess+Welcart、ECCUBE3で実現できるのもわかったので…。

[WordPress] カスタムフィールドで絞り込んで一覧表示する

[WordPress] カスタムフィールドで絞り込んで一覧表示する


の内容を引用してます

なんども調べるから、、、

WordPressでカスタムフィールドの値によって投稿を絞り込む方法のメモです。
カスタムフィールドが特定の値の投稿を取得する

カスタムフィールドが特定の値の投稿を取得する方法です。
例として、投稿タイプ『test』で『city』というカスタムフィールドの値が『神戸』という投稿を絞り込んで取得します。

投稿タイプ(post_type):test
カスタムフィールドキー(meta_key):city
カスタムフィールド値(meta_value):神戸

$args = Array(
            'post_type' => 'test',
            'posts_per_page' => -1,
            'meta_key' => 'city',
            'meta_value' => '神戸'
        );
$the_query = new WP_Query($args);
if($the_query -> have_posts()):
    while($the_query -> have_posts()): $the_query -> the_post();
        //ここに処理を記述
    endwhile;
endif;
wp_reset_postdata();

posts_per_pageは-1で全件取得です。
以後、7行目以降の記述は同じなので省略します。今後は条件部分だけの記述にします。

カスタムフィールドの値で並び替える

今度はカスタムフィールドの値で並び替える方法です。
例として、カスタムフィールドキーが『city』の投稿をそのカスタムフィールドの値で降順(DESC)に並び替えます。

$args = Array(
            'post_type' => 'test',
            'posts_per_page' => -1,
            'meta_key' => 'city',
            'orderby' => 'meta_value',
            'order' => 'DESC'
        );

※明言どおり条件部分だけの記述にしました。
meta_queryを使って条件を指定する

meta_queryを使うとパラメータが異なり、違った条件指定ができるようになります。
例えばLIEK検索。『address』というカスタムフィールドに『神戸市』が含まれている投稿を取得する場合


$args = Array(
            'post_type' => 'test',
            'posts_per_page' => -1,
            'meta_query' => array(array(
                                'key' => 'address',
                                'value' => '神戸市',
                                'compare' => 'LIKE'
                            ))
        );

SQLのように『%』付ける必要はありません。WP_Query実行時に値の前後に自動で『%』が付与されるからです。
LIKEだけでなく、NOT LIKEやINなども指定できます。
使用できるパラメーターは以下の「5.12 カスタムフィールドパラメータ』を参考にしてください。

関数リファレンス/WP Query

もっと複雑な条件を指定してみる

meta_queryを使えば、もっと複雑な条件も指定することができるようになります。
例として、カスタムフィールド『pref』が『兵庫県』のみに絞り込み、カスタムフィールド『address』の値で昇順に並び替えてみます

$args = Array(
            'post_type' => 'test',
            'posts_per_page' => -1,
            'meta_key' => 'address',
            'orderby' => 'meta_value',
            'order' => 'ASC',
            'meta_query' => array(array(
                                'key' => 'pref',
                                'value' => '兵庫県'
                            ))
        );

他にも、カスタムフィールド『pref』が『兵庫県』のみに絞り込み、カスタムフィールド『city』の値が『西宮』『尼崎』『伊丹』以外の投稿を取得する場合は、以下のようになります。

$no_cities = array('西宮', '尼崎', '伊丹');
$args = Array(
            'post_type' => 'test',
            'posts_per_page' => -1,
            'meta_key' => 'pref',
            'meta_value' => '兵庫県',
            'meta_query' => array(array(
                                'key' => 'city',
                                'value' => $no_cities,
                                'compare' => 'NOT IN'
                            ))
        );

いろんな絞り込みができるようになるのでとても便利です。

【参考サイト】
query_posts(WP_Queryクラス)でカスタムフィールドを使う

座椅子を買う。そして不信感募る

今日は何回か買おうと思ってやめた座椅子を楽天で購入した。
4000円で送料込みだなんて、なんか心配な気もするけど。すぐ壊れなければいいな。

このところほんとうに頭の中が落ち着かない。
ソワソワとも違う、やる気がないのとも違う、考えがまとまらない、考えが続かないという感じで
多少のめまいがする

ストレス?わかってはいるけど、生まれたところからやり直さないといけない位だからどうにもしようがない

会社で受ける健康診断は、会社に結果が届くのよね。
どこでもそうかはわからないのだけど、今年初めて知った。
常識なのかー?

この間上司が、
「なんだー、XXさん健康じゃないですかー、ちょっとxxの数値が高いって出てますけど
この一つだけじゃないですか〜笑」
って朝から皆に聞こえる場面で言ってきたので、がっかりした。

健康だとか、何か結果が悪いに関わらず
個人的なことを皆がいる場所でいうだろうか。

おそらく、最近上司は私が気に入らないらしいのでこのようなことを皆の前で皆聞こえる場面で言ったのだと思う。
悪趣味だよね。

今までそんなに意識していなかったけど
「健康診断の結果は会社に筒抜け」
ということが、当たり前だとしても、見る立場にあってもそっと見てそっと閉じとけよ、と思うわけで。

例えば膠原病や免疫系の疾患の血液の検査や大腸内視鏡なんかは会社で受けた人間ドックでは
まかなえていないから
そんな疾患があって私は治療をしに通院しているかもしれないじゃない。

ていうかそういったことで通院しているけど何か言わせたいのか。

来年からは会社で受けるのやめようかな、と思うし
プライバシーも守れないならマイナンバーをこの会社に出すのも不安だしなんなら会社辞めようかなと思う。

調べてもはっきり出てこないけど保険証を使った診療の内容も会社に筒抜けなのかな。

そういえば以前はたまに届いていた診療の記録みたいな圧着のハガキ、この2〜3年会社からもらっていない。
今度反対に、皆がいるときに聞いてみようか。

会社で上司が圧着を開けていたら、見放題だ。
だって送られてくるときとこないときがあって、いつ送られたのかわからないんだから。
これって問題じゃないのかな。
不信感が募っていくなぁ

甲鉄城のカバネリ

絵だけ目当てでAmazonビデオで見始めたんだけど、すごい。
進撃の巨人の立体機動装置みたいな、腰にエネルギー源をくっつけて両手に武器で戦うのが流行っているのだろうか。
単純に始まって3分はウォーキングデッドの時代劇版かと思ってたんだけど違った、ちょっとあってそうだけど違った。

取り合えず今4話視聴。寝ちゃう無名かわいい。キャラクターの、あやめ様 かじか この辺りの名前もツボだ。

美樹本晴彦というと私にはメガゾーンとか超時空要塞マクロスからなんだけど、その時その時で絵がちゃんとその時代にあっててすごい。一目見て美樹本晴彦だなってわかるし。

ただしムメイちゃんのツインテールは結んでいない髪の毛の長さを見ると絶対にできないと思う。
あの位置にゆうには、襟足の髪の毛の長さが13センチくらいはないと届かない。
襟足が13センチあったらゆってない時のボブでは上がらないのである。

かつらかな〜。

ビバ!ビバーー!!

AmazonプライムデーでPS4を買ったが

AmazonプライムデーでPS4を買ったが

届いて3日、まだ開けてない。

アンチャーデットがセットになってるやつ。

そもそも、このアンチャーデットというゲームは面白いのか、どんなゲームか、わかってない。

明日か明後日に開けないと3連休楽しめないな。

ゲームを開けて設置するのがまず面倒だ、こんなことも面倒くさいなんて終わってる。

テレビにつなぐか、27.9の4Kモニタにつなぐか、どちらに繋いでもちょっとの模様替えが必要だから

どっちにつなぐかなぁと考えて、開けられない。

 

やってみて、すごい面白かったら、他のことできなくなるなと思って、開けられない。

 

FFのために買ったからとりあえず、それまでに設置すればいいか、って思ったけど

あんまりほっとくと動作確認しないと初期不良だった時に交換とかできなかったりするだろうか。

映画も観に行かないと!

忙しいわ。