カテゴリー: TIPS

jQuery ラジオボタンやチェックボックスが選択されているか判定

ラジオボタンやチェックボックスが選択されているか否かを判定する方法。単一の項目ならば「$(‘[name=”agree”]’).prop(‘checked’)」で真偽判定できますが、項目が複数ある場合は次のソースのように判定します。

<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<form action="" method="get">
<label><input type="radio" name="answer" value="はい"> はい</label>
<label><input type="radio" name="answer" value="いいえ"> いいえ</label>
<input type="reset" value="リセット"> <input type="submit" value="送信">
</form>
<script>
$('form').on('submit',function(){
if( $('input[name="answer"]:checked').val() === undefined ) {
alert('選択されていません。');
return false;
} else {
alert('選択されています！');
return false;
}
});
</script>
</body>
</html>

alert()が効かない環境があるようなのでモーダルで代用する

Safariなどの一部のブラウザでalert();が効かない場合があるようなので、代わりにモーダルウインドウを表示させて代用することにしました。

ソースはコピペで自由に使ってください。レスポンシブです。

<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<p><a onClick="alertModal('Hello World');" style="color:red;">ここをクリック</a>するとアラートを表示</p>
<div id="alertmodal"></div>
<script>
function alertModal(modalText) {
$('#alertmodal').html('<div>'+modalText+'</div>').fadeIn();
}
$('#alertmodal').on('click',function(){
$(this).fadeOut();
});
</script>
<style>
#alertmodal {
display: none;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}
#alertmodal div {
position: absolute;
top: 50%;
left: 3%;
right: 3%;
max-width: 800px;
width: auto;
color: red;
padding: 1em;
background: #fff;
border-radius: 6px;
transform: translateY(-50%);
margin: 0 auto;
box-shadow: 0 0 3px #000;
}
</style>
</body>
</html>

WordPress デフォルト投稿の「カテゴリ」や「タグ」を削除する方法

http://inspire-tech.jp/2013/04/wordpress_remove_category_and_tag_from_post/

function.phpに以下を追記

function my_unregister_taxonomies()
{
    global $wp_taxonomies;
 
    /*
     * 投稿機能から「カテゴリー」を削除
     */
    if (!empty($wp_taxonomies['category']->object_type)) {
        foreach ($wp_taxonomies['category']->object_type as $i => $object_type) {
            if ($object_type == 'post') {
                unset($wp_taxonomies['category']->object_type[$i]);
            }
        }
    }
 
    /*
     * 投稿機能から「タグ」を削除
     */
    if (!empty($wp_taxonomies['post_tag']->object_type)) {
        foreach ($wp_taxonomies['post_tag']->object_type as $i => $object_type) {
            if ($object_type == 'post') {
                unset($wp_taxonomies['post_tag']->object_type[$i]);
            }
        }
    }
 
    return true;
}
 
add_action('init', 'my_unregister_taxonomies');

slickでズームインフェードをやる

個人的メモ

<script src="_js/slick.js"></script>
<link rel="stylesheet" href="_js/slick.css">
<style>
@keyframes zoomIn {
0% { transform:scale(1); }
100% { transform:scale(1.1); }
}
@-webkit-keyframes zoomIn {
0% { transform:scale(1); }
100% { transform:scale(1.1); }
}
.slick-slide.moving {
animation: 11s zoomIn;
}
</style>
<script>
$('.slideshow').on('init', function(){
$('.slick-slide[data-slick-index="0"]').addClass('moving');
}).slick({
arrows: false,
dots: false,
infinite: true,
fade: true,
speed: 3000,
autoplay: true,
pauseOnHover: false,
centerMode: true
}).on('beforeChange',function(event, slick, currentSlide, nextSlide){
var slide_num = $('.slick-slide').length;
$('.slick-slide[data-slick-index="'+ ( currentSlide - 1 ) +'"]').removeClass('moving');
$('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('moving');
if( currentSlide == 0 ){
$('.slick-slide[data-slick-index="'+ ( slide_num - 1 ) +'"]').removeClass('moving');
}
});
</script>

クラックが入った杖（棒）を補修

杖を打ち合っているうちにゴボウの「ささがき」のようなクラックが生じてしまいました。杖は扱きが基本動作なのでクラックが入った状態では使い物にならないので補修をする事に。我流なので参考までに。

1.アロンアルファで患部を固める

クラックが入った部分をキャンドゥで買った木工・陶磁器用接着剤で固めます。

匂いからしてアロンアルファと同じ成分のようです。

良く見ると結構ヒビが入りかけのところが数箇所あったので、こんな感じで水絆創膏の要領で患部に塗って固めました。

2.ヤスリ掛け

180番のペーパーでヤスリ掛けして均します。

ニス仕上げにするつもりなので全体をヤスリ掛けをして一皮剥きました。

3.ニスを塗る

ニスと言ってもウレタンのクリア塗料ですが、これを吹いてコーティングします。

ヤスリ掛けで一皮剥いたおかげで新品のような仕上がりになりそうです。

何度か重ね塗りをして1200-2000ペーパーで磨いて完全につるつるになったら完成です。

画像真ん中に大きなクラックが入っていたのですが完全に隠れています。

打ち合ってみてどれだけの耐久性があるのか気になるところですが、クラックが入った杖が新品のようになりました。

Webフォントを使用する際はサブセット化してwoff形式にしよう

日本語Webフォントは重たい

日本語が収録されたウェブフォントはすごーく重たいのです。NotoSansCJkjpセットが141MBくらい。これを以下のように生のまま指定すると重たいだけでなくブラウザや環境によってはウェブフォントが適用されないことがあります。

@font-face {
    font-family: "NotoSansCJkjp";
    font-weight: 400;
    src: url("font/NotoSans_regular.woff") format("woff");  
}

サブセット化

そこで軽量化の手段として、「サブセットフォントメーカー」を使用して、JIS規格の第一水準の文字列だけをフォントに格納するといういわゆるサブセット化をします。

第一水準漢字の一覧はこちらに上がっているのを使わせてもらっています。

サブセット化によって9割は軽量化されます。

WOFF化

9割軽くなったからといってotfやttfのまま指定するのは甘い。「WOFFコンバータ」によってWOFF(Web Open Font Format)形式にすると更に1割ほど容量を削減することができます。

ただし、Android4.3など古いブラウザや一部環境ではwoffをサポートしていませんが、古いデバイスを使用しているということは見た目よりもコスパを重視している可能性が高いので、ウェブフォントなしでも構わないのかなと思います。

インターネットが安くなります！工事費無料です！という話には気をつけろ

自分の友達が遭った詐欺について書いておきます。

お使いのインターネット代が安くなります

2018年11月ごろ、とある営業電話が掛かってきた。「お使いのインターネット代が安くなります。今なら工事費無料なので～」普段はそのような営業電話は断っていたが、その時だけはその甘い言葉に乗ってしまったそうだ。

彼は接骨院を営んでおり、事務所でADSLを使用していた。インターネットが安くなるというのは光コラボレーションの話だとは思うのだが、ADSLを使っているけど大丈夫かと伝えても先方の営業は「ほぼ同じ月額で光回線にできます。工事費無料なので」と言っていた。

無料のはずの工事費が請求された

彼は言われるがまま契約をして、後日、下請け業者がインターネット工事とルーターの設定に来た。そのとき代金は請求される事は無く、本当に無料だったと安堵したものの、約1ヶ月後にNTTファイナンスから約2万円の工事費の請求が来た。

NTTに問い合わせるもたらい回し

彼は話が違うと言って、業者に電話を掛けてその旨を伝えたところ、最終的に返金するという旨の返事を貰い、口座番号を教えたものの一向に入金されない。

NTTの方にクレームの電話を入れると、「料金の事はNTTファイナンスへ」と言われ、NTTファイナンスに電話をすると、「契約の事は下請けに」と言われ、たらい回しにされる。

NTT「お客さんと下請けとの間の問題なので」

最終的にNTTに電話をして「お宅の下請けがそのような詐欺まがいの事をしているのだから、お宅には責任は一切無いのですか」と聞いたところ、「お客さんと下請けとの間の問題なので、当方には責任はありません。申し訳ありません」の一点張り。そんなこんなしている間にインターネットと電話を料金未納で止められた。NTTは「このままですと電話番号を失うことになりますので料金を払ったほうがよろしいかと思います」と足元を見て言う。彼は仕事で電話を使っているため、電話番号が無くなったら大損害である。事案が発生しているのだからこの件は保留にできないか、失効まで猶予できないかと聞いてみたがそれはできないようだ。

現在も争い中

そんなこんなで彼は「経済合理性を考えると泣き寝入りの方がお得だが、それでは奴らの思うつぼ」と少々ムキになって弁護士を入れる事を視野に入れて争っています。

同じような事案が無いかググって見たのですが、そのような内容の記事がヒットするものの十中八九が光コラボレーションのアフィリエイト記事で驚きました。本当に最近のインターネットはアフィリエイトで埋め尽くされていて、知りたい情報に辿りつきづらいですね。

そんなアフィリエイト記事に埋もれて総務省による「光コラボレーションモデル不適切な電話勧誘にご注意ください！」と、NTTのHPには「NTT東日本をかたった強引なセールスにご注意ください（電話料金・基本料金）」という記事が公開されています。彼が遭った詐欺はそれほどえげつないものではありませんが、上記リンクの事案を読んでみると結構巧妙なものが見受けられます。なによりこのような資料や記事が作成されるほど、光コラボによる詐欺は流行っているようです。

皆さんもお気をつけ下さい。勧誘電話の言われるがまま契約するのではなく、自分からしっかりと調べて契約しましょう。

WordPressの新エディタを使い始めようと思ったが「公開に失敗しました」

今までClassic Editorをインストールすることで新エディタGutenbergを遠ざけていましたが、サポートが2022年までなので、そろそろ新エディタにも慣れておくかと思いGutenbergを使おうとしましたが、記事を一通り書いて公開をポチっと押すと「公開に失敗しました」という赤い帯のエラーが表示されます。

何度押しても同じ表示が出る。下書きを押しても、同じく「公開に失敗しました」で下書きすら保存されない。

先ほどダウンロードした5.1.1の最新版だというのに、このような状態なのでこれは”仕様”ということなのだろうか。。ググって見るとサジェストの段階でいくつか同じ症状と思われる検索ワードが出てきた。ああ俺だけじゃないんだと安心しながらも、このままでは全く記事を公開できないので、またClassic Editorを有効化しました。

Gutenbergの初期の初期バージョンでは使えていたので、多分簡単なところで引っかかってるのだとは思いますが、原因の検証は面倒なのでやりません。2022年までClassic Editorで粘ります。それまでにもっと革新的なエディタが生まれてるでしょう。多分。。

object-fitを使用せずimgをbackground-size:coverのように表示

IEはobject-fitに対応していませんので、positionとtransformのあわせ技でimgをbackground-size:coverのように表示させてみます。

.object-fit {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.object-fit img {
position: absolute;
top: 50%;
left: 50%;
max-width: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%,-50%);
}

imgの親要素.object-fitの高さをheightではなくpadding-topで横幅との相対で取る事によって、比率を維持したまま伸び縮みします。
16:9で表示したいのなら56.25%

1:1正方形なら100%と指定します。