どっがーん！！！

佐賀県神埼市は非常に強い夕立（昼ダチ？？）をいただきました。久しぶりに雷雨。明日は晴れて欲しいです。また、台風も来ていますね。現在も神埼市は大雨です。

佐賀県は全体的に平野なので夕立などは非常に激しく、稲光も当然のごとく空から地面に突き刺さります。容赦ない感じがもともと大分県民だった私には驚きでした。私の地元の大分県では、雷音だけでも相当珍しいのです。それが稲光が激しいのって、半端ではありません。

ところで、表題の件ですが、jQueryでチェックボックスの値を配列に格納するのはよくあること。けれども、チェックしてchecked状態になっているチェックボックスのチェックを外した時に、そのデータを操作するというものはあまり見かけませんでした。

そこで、今日はこちらを準備しました。

jQueryでチェックボックスの値を配列に格納・削除する方法

いくつか前提にしなければならないことがあるのですが、チェックボックスの実装イメージとしては、下記写真のような感じです。

複数のチェックボックスの値を取得・削除する方法||　佐賀県神埼市アスカル

お気付きの方は。これがEC-CUBEであるということを察知されたことでしょう。

それはいいのですが、要はこのようにデーターベースに登録されている情報をIDなどの主キーを一緒に取得してきて吐き出している状態です。この前提が抜けてしまうと思っていた挙動をしないということもあるかと思います。

そして、今回は結構な力技をも用います。

HTML側

まず、HTML（テンプレート側）ですが

<td rowspan="2">
    <input type="checkbox" name="direct_delivery" value="1" id="direct_delivery_<!--{$arrResults[cnt].c＿id}-->"/><label for="direct_delivery_<!--{$arrResults[cnt].c_id}-->">1</label>
</td>

と、テーブルを作成して、inputタグのid部分にはここではc_idとしておきます。上のはEC-CUBEのものをそのままなので。テンプレートエンジンにSmartyが使用されているため初見の方には馴染みがないかもしれません。

実際に簡単なHTMLを記述するとなると、

<table>

<tr>

 <td>

  <input type="checkbox" value="1" id="order_<?php echo htmlspecialchars($id, ENT_QUOTES, 'utf-8'); ?> >1（任意値）

 </td>

</tr>

</table>

という具合になるかと思います。このIDのところがPOINTですね。

jQuery側

<script>
  var idArray = [];　−❶
  $('#direct_delivery_<!--{$arrResults[cnt].c_id}-->').on('click',function(){　−❷
  if ( $(this).prop('checked') == true ) {　−❸
    var idname = $(this).attr("id");
    idArray.push(idname);
    console.log(idArray);
 } else {
    var idname = $(this).attr("id");
    for(i=0; i<idArray.length; i++){　−❹
      if(idArray[i] == idname){
        idArray.splice(i, 1);
      }
    }
    console.log(idArray);
  }
});
</script>

jQuery側は、このようにまず❶の部分で空の配列を作っておきます。後々この配列の中へチェックボックスでチェックを入れたり外したりする時の値を入れていきます。

次に、イベント発生は❷の部分で、今回はチェックボックスのIDを用いて指定をしていきました。こちらもテンプレートエンジンとの関係で、IDの指定をするのに波括弧を使用しておりますが、適宜ID名を指定してください。なお、勘の良い人はこの時点で気づくかと思いますが、このc_idは、実際にはPHPのループ文の中で使用されます。そのため、この記述をそのままテンプレートの下に貼り付けると、展開されるコードが冗長になります。

ここは各システム内部の話になるのでどのように書くかはそのシステムごとに異なるとしか言いようがないです。

特に、inputタグのvalue属性とID値とが関連している場合には、このようなコードを書く必要がないこともあると思います。

何れにしても、❸の部分で条件分岐をしているのですが、trueの時はチェックがされた時、falseはチェックが外された時です。それぞれ、初期値が空の配列の中にデーターを格納したり、削除したりしています。ところで、Pythonなどとは異なり、jQueryの世界では値で配列内の特定の値を削除するということが組み込み関数ではできないみたいです。

そのため、❹ループ処理を使って配列の中身を検索して該当するものを削除する処理を記述しています。

以上が、今回のjQueryを使用したチェックボックスのチェック状態に応じてデーターを取得する方法についての実装です。

先にも触れましたが、それぞれのシステムに応じて異なることになるので実装される際にはソースが適宜変更になると思いますので、その点だけご容赦ください。

神埼は大雨ですが

この大雨は明日まで継続するらしいです。でも、これでようやく梅雨明けかもしれないですね。

それでは、今後も開発頑張っていきましょう！

佐賀県神埼市でWEBシステム、AI、IoT、IOS、Androidアプリ開発

-*–　ASUKARU　–*-アスカル

TEL　0952-60-2693

Email　asukaru2014@icloud.com

Adress　〒842-0002　佐賀県神埼市田道ヶ里2176-13

みなさんこんにちは！今日の神埼は非常に暑い一日でした！

さて、今日はWordpressのカスタマイズを行ってきました。ここ神埼でもWordpressを使用したWEBサイトを構築されておられる方は多いかと思います。なんといっても、魅力は十分にありますからね。

さて、今日はそんなWordpressのカスタマイズをした話をしておこうと思います。

今回のカスタマイズは、Wordpressへ自社Instagramの搭載と、各記事や施工事例を更新したものを「NEW」という形で表示させるというものでした。

結構早めに終わるかと思いきやこれがなかなか・・・。InstagramのAPIも昔とは随分変わっていて、非常にややこしいものになっていました。

まぁ。こちらが公式のサイトになります。

https://www.instagram.com/developer/

このInstagramのAPIを使用して、自分が投稿した画像などをWordpressの方へだしてきたいと思います。

ただ、最近では、 https://instawidget.net/generate というサービスも展開されていますので、こちら「広告が入っても大丈夫」ということであれば非常に使い勝手のいいものになっております。

どうしても広告が入っていると何かと面倒という方は自前で準備するしかありません。

ただ、それもそれほど難しいことではありません。

 					// jsonデータか調べる
 function is_json($string){
    return is_string($string) && is_array(json_decode($string, true)) && (json_last_error() == JSON_ERROR_NONE) ? true : false;
 }
					
 $myAccessToken = '************************'; //実際のアクセストークンを入力

 @$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken);

 $insta = json_decode($json);
 if(!empty($insta) && is_json($insta)){
 foreach($insta->data as $data){
     echo '<ul><img src="'.$data->images->low_resolution->url.'" alt=""></ul>';
 }
 }else{
 	echo "Instagramのデータ取得に失敗しました。";
 }

っとまぁこんな感じでできてしまいます。

※現時点ではこれでも問題ありませんが、他の方の記事をみているとどうやら近いうちに仕様変更があるようです。

今日のところはひとまずこんな感じです！

本日の大事件

　今日からバイト生が来てくれました！

　この子がなかなかの優秀！これからの成長が非常に楽しみです！(*^_^*)

　このASUKARUのブログでも出てきてもらおうと思いますんで、みなん宜しくお願い致します！

カテゴリー: Wordpress