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

今年の１月から楽天の商品画像のルールが厳しくなるようです。 amazonとかzozotownのような単調なサムネイル画像にしないといけなくなります。 ザックリ言うと今後、楽天はAmazon化していくのかなといった感じです。 サイトの雰囲気も単調化されていきそうですし、配送に関してもワンデリバリー構想というものを実現していく方針で 商品の保管から出荷までを手がける物流センターを全国各地に構えていくそうです。 amazonは既に日本の数箇所に倉庫を持っているので、配送が早いわけなんですけども、楽天もそのような形を築いていくということですね。 amazonの商品一覧で見かけるプラ...続きを見る

///////////////////////////////////// ドメインの管理について ///////////////////////////////////// ■ドメインが取得できるサイトは複数あります。 お名前.com、バリュードメイン、ムームードメインなど 【よく取得されるドメイン】 .com／.net … 最安（情報サイトなど） .jp／.co.jp … 企業向け（会社のサイトなど） ■ドメイン取得サイトが異なる業者にドメインを引き渡すことを「ドメイン移管」といいます。 【ドメイン移管】 ・特に費用はかかりません。 ・１～２週間くらい...続きを見る

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"); 中飛車はあっという間に対局が終わってしまうこともある戦法なので、相手が中央に飛車を持ってきた時は対処法を知ってきましょう。 次は、中飛車の受け方です。...続きを見る