jquery(javascript)で複数選択チェックボックスの配列の入力チェックをする手軽な方法

2018-12-07
phpは分かりやすいのですが、javascriptの配列はちょっと独特ですよね? ラジオボタン・チェックボタンの入力チェックの際に、選択がない場合は「undefined」というテキストデータが入ってしまいますし。 今回のテーマは複数選択のチェックボックスを入力チェックする方法についてです。 複数選択のチェックボックスはフォームでよく出てきます。 近年は、jqueryを当たり前のように読み込んでいると思いますので、jqueryありきのコードです。 例えば、エリアの選択で下記のようなHTMLがあったとします。複数選択のチェックボックスを配列で受け取れるようにする場合は、「area...続きを見る

ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)

2018-11-26
管理画面でユーザーに画像をアップさせる際、実行ボタンの2度押しを防ぐために必要なローディングの表示。 特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。 [デモサンプル] まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。 htmlStart ・ ・ ・ htmlEnd 次はCSSに以下のコードをコピペしてくださ...続きを見る

将棋講座第3回【中飛車の棋譜】将棋を始める時は中飛車(なかびしゃ)の攻めと受け方を覚えよう!

2018-10-23
中飛車(なかびしゃ)は相手が受け方を知らない場合、最短の手数で試合が決まってしまう恐れがある戦法です。 まずは一番うまく決まった場合の中飛車の攻め方を見てください。飛車と角で最短で相手陣を攻め落とします。 棋譜を進めていくと、盤面の下にコメントが表示されます。理解を深める為にしっかり目を通してください。 中飛車の攻め方「最短決着」 var kifu1 = Kifu.load("/kif/nakabisya_01.kif"); 中飛車はあっという間に対局が終わってしまうこともある戦法なので、相手が中央に飛車を持ってきた時は対処法を知ってきましょう。 次は、中飛車の受け方です。...続きを見る

JavaScript(jquery)でやっかいなundefined値のif文による空チェック判定【即決】

2018-10-21
jqueryでラジオボタンの値を取得した際にalertで値を確認すると「undefined」と表示され、 if文による空チェックがうまくいかなかったが、調べて解決したので記録のために残しておきます。 htmlStart var hensu = $("input[name='hensu']:checked").val(); //ラジオボタンの値 if(hensu == ""){} //この記述では空のチェックができません htmlEnd いくつかやり方があるようですが、この方法が一番無難だとされているようです。 htmlStart var hensu = $("input[nam...続きを見る
カテゴリ: Javascript

将棋講座第1回【棒銀の棋譜】将棋を始める時は棒銀(ぼうぎん)の攻めと受け方を覚えよう!

2018-10-15
▼駒の動かし方 将棋のコマの動かし方を覚えたら、攻め方を数パターン覚えるのが上達の早道。 まずは、「棒銀(ぼうぎん)」の攻め方を知っておこう。 棒銀は飛車(ひしゃ)と銀(ぎん)を使って攻めていく戦法で、局面でよくでてくる形です。 相手が棒銀の受け方を知らない場合は、簡単に勝つことができるでしょう。 しかし、多少将棋の心得がある人は攻撃を止められてしまいますので、 今回はあくまで、何を知らない人を相手にした場合を想定した棒銀の棋譜です。 ▼相手が棒銀を知らない場合 var kifu1 = Kifu.load("/kif/bogin_01.kif"); では、逆に...続きを見る

【フリー素材】スマホ用 汎用リンクマーク アイコン

2015-10-30
スマホサイトでボタンを作る時の汎用リンクマークを作成しました。1ピクセルのビットマップでのマークもおまけに。 1ピクセルのリンクマークはPC用サイトで、使いこなせる人は上級者かも。 個人的にはポータルサイトなどの細々したサイトで重宝してます。リストタグに背景指定で使って見て下さい。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ...続きを見る
カテゴリ: WEB素材

ツイッターのシェアボタンが数の取得APIの提供を修了

2015-10-30
最近、サイトを開くとずっと読込中のマークになることに気づき、 なんでかな?と調べてみると、ツイッターのシェアボタンが原因。 サイトを開いた際に、ツイッターのAPIがもう存在しないのに、 繋ぎに行こうとするからずっと読込中になってしまうということに。 とりあえず、ツイッターのシェアボタンは一旦削除。 10月から本格的に終了だったということで、現在10月末。気づくのが少し遅かった…。 ...続きを見る

中小企業がポンコツシステム会社の餌食になってる件について

2015-10-22
PHPのシステムエラー復旧を承っちゃおうかな。ポンコツなシステム会社が多すぎるからさ。と思う今日このごろ。 34歳になってこの上から目線の発言は以下に自分がクソメンであるかを象徴してるねw 大手のポータルサイトではユーザー登録の際にエラーは全然起きないけど、 中小企業が運営するポータルサイトってエラーにちょくちょく出くわさない? 最近では、「セミナーズ」というサイトにセミナーの登録をしようとおもったら、 登録ボタンを押すと、ページが見つかりません…っておいおい。 せっかく苦労して入力したのにふざけんなっつーのと、怒り心頭。 「スクール検索サイト」でスクール情報を登録し...続きを見る
カテゴリ: PHP

本物のタブブラウザはスレイプニル!高速ネットサーフィンで仕事で差をつけろ!

2013-09-01
インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか? 「IE」「google chrome(以下、クローム)」「firefox(以下、狐)」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」(以下、プニル)がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2%ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

ボタンを押したらローディング画面を表示する

2013-04-30
更新 2018-11-26 この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。下記の古い内容よりも画像ファイルが不要で使い勝手がいいので、新しい記事をご覧ください。 管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像...続きを見る

submitボタンの連続押し・同時押し防止

2012-10-07
ボタンの連続押しにより、エラーが発生することがあるので、管理画面や問い合わせフォームでは常時使っておいた方がよさそうな必須コードです。submitしたらページ内全てのsubmitをグレイアウトにして無効状態にします。 htmlStart $(function(){ $('form').submit(function(){ $('form').find(':submit').attr('disabled','disabled'); }); }); htmlEnd 使用する場合はjQueryの読み込みを忘れずに!...続きを見る

【フリー素材】スマホ用ボタン素材

2012-08-12
スマホ用素材をネットで探しましたが、なかなか大きいサイズのものがなかったので、結局自分で作っちゃいました。スマホは解像度がPCより2倍大きいので、例えば300pxのボタンを設置する場合は600pxの画像を使わないと画質がにじんでしまいます。指でボタンを押すのでボタンを大きく作るのがスマホサイトの基本ですね。 <スマホで画像を綺麗に表示する> htmlStart htmlEnd <スマホで背景を綺麗に表示する> htmlStart sample htmlEnd 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使...続きを見る
カテゴリ: WEB素材

【フリー素材】送信ボタン

2012-08-11
送信ボタンを作成しました。今回はアメリカのサイトでよく見られる配色のグラデーションを使用。PSDファイルもダウンロードできるので自由に文字が編集できます。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

【フリー素材】お問い合わせ用のボタン

2012-08-10
商用サイトでは必要になることが多いお問い合わせ関連の素材。シンプルでどんなサイトにも合いやすいものを作りました。お問い合わせの部分にこだわるのも大切なことです。今回はPSDにグラデーションパターンを付け足しましたので、是非ご活用ください。使用しているフォントはWindows標準のメイリオとArialです。日本語フォントならモリサワの新ゴが一番好きなのですが、最近はメイリオもなかなか気に入っています。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

【フリー素材】フォーム用のボタン

2012-08-09
個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

thickboxでダイアログを表示する

2012-08-08
Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 <テキストリンク~ダイアログ表示> htmlStart サンプル htm...続きを見る
カテゴリ: Javascript