最短を目指すWEB制作者の技術ログ
HTML･CSS･PHP･jquery＆将棋

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

ワードプレスを外し、独自のシステムに移行する際、画像のエクスポートが苦労しました。 個人的にワードプレスは好みません。クライアントに管理画面を提供する場合は、自分で一から作ったほうがユーザビリティーが圧倒的に良くなるからです。 アップロード画像の記録がある、postmetaテーブルの検索で「meta_key = _wp_attachment_metadata」とすると、データが下記のようになっていた。なんというごちゃごちゃしたデータ。これだからワードプレスは苦手だ。 htmlStart a:5:{s:5:"width";i:731;s:6:"height";i:723;s:4:"f...続きを見る

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

まずは矢倉（やぐら）の囲いの流れを見てください。 先手後手が「矢倉囲い」の棋譜 var kifu1 = Kifu.load("/kif/kakoi_yagura.kif"); 矢倉囲いの長所は「上部からの攻めに強い」短所は「横からの攻めに弱い」です。 ただ、将棋を始める時はメリットデメリットは気にせず、形を頭に入れて対局してみましょう。 次は、高美濃囲い（たかみのがこい）と穴熊（あなぐま）の囲いです。 先手「高美濃囲い」後手「穴熊」の組み方 var kifu1 = Kifu.load("/kif/kakoi_takamino+anaguma.kif"); 高美濃...続きを見る

ページを開いた際にフェードでページ全体を表示する方法はネットに出回っていますが、 「下から上に移動しながらのフェード」これがなかったので、自分で調整したものを残します。 単純に、jqueryのappend関数（コンテンツ追加）でbodyのmargin初期値を50pxなどにして、delay（ディレイ）後にmarginを0にする。 同時にフェード効果とのコラボとなり、非常に心地の良い効果になります。 htmlStart $(function(){ $('head').append( 'body{display:none; margin-top:50px;}' ); ...続きを見る

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition（切り替える時間）を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...続きを見る

今回は対局でよく出てくる石田流三間飛車の形を紹介します。「攻めの理想は飛車・角・銀・桂」と言われる言葉をそのまま体現したもので、石田流は非常に人気があります。ですので、知っておかなければいけない重要な戦術です。まずは駒組みの形を見てください。 石田流三間飛車の組み方 var kifu1 = Kifu.load("/kif/ishida_01.kif"); 実はこの組み方までに、色々注意点があります。それを知っておかないと、序盤から大差をつけられて、終始苦しい状態になります。 まずは、序盤は角交換のことを常に意識する必要があります。ケース１は初心者同士の対局で非常によく見られる盤面で...続きを見る

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

社内にWEBデザイナーがいれば制作外注費を大きく削減できて、更新スピードがあがるということで、 制作会社以外の異業種でもデザイナーを雇う企業がいらっしゃいますが、 残念なことに失敗、すなわち赤字になってしまうケースが多いんじゃないかなと思います。 デザイナーの求人広告費、デザイナーの人件費、時間。全てが無駄になって、 結局、今は高いお金を支払って、制作会社にサイトの制作や管理を依頼している会社。 あるいは、やっぱり制作会社は高いということで、粘り強くデザイナーを募集している会社もあります。 なぜ、デザイナーの人材を雇うと赤字になりやすいのか？ デザインの制作会社なら赤字に...続きを見る

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