WEB／システム／IT技術ブログ

formのimageタイプのボタンをjQueryで二重クリック防止

HTMLフォームのsubmitボタンを連続でクリックしてしまうと、意図しないデータが多重に送信されてしまうという問題があります。

これを防止するために、JavaScriptで二重にクリックするのを抑止する方法があります。
シンプルなしくみだと、一度クリックされたらフラグをオンにしてボタンクリックを無効にしたり、押されたボタンにdisabledをセットして非活性にしてしまうなど、比較的簡単な処理で済みます。しかし、深いところまで突き詰めて完全に抑止しようとすると、めんどくさい設計と処理を実装が必要となります。さらに、コーディング規約やフレームワークのルールなどで制限されている環境だと、さらに難しい問題となってふりかかります。

例えば、今回私が実装した環境では以下のような前提がありました。

  • サブミットまでの処理で極力JSを使わない
  • フォームのボタンタイプは「type=”image”」
  • 複数のボタンが存在しサーバ処理を分岐している

フラグを用いた方法だと、複数個所にJSを埋め込む必要があったので、却下しました。また、disabledをセットする方法では押されたボタンの情報はPOSTされないので、サーバ側でどのボタンが押されたのか判断できなくなるため、却下しました。

「formのimageタイプのボタンをjQueryで二重クリック防止」のつづきを読む

HTML5のアウトラインを意識したマークアップ

HTML5には新しいタグがいくつか追加されています。それらの中には文書構造に意味を持つものもあり、今後のコーディングにおいては各々のタグの役割を理解することが重要になるかもしれません。
そこで、今回は、HTML5のアウトラインを意識して、このブログの文書構造を調整したいと思います。

HTML5アウトラインを可視化する

アウトラインを可視化するツールとしては、Google Chromeのプラグイン「HTML5 Outliner」があります。
HTML5 Outliner – chrome ウェブストア
その他には、Webツールもあります。
HTML 5 Outliner
2つで可視化した結果、構造に大きな差はありませんが、後者は画像のaltを見出しとして読み込んでくれる点など、若干の違いはあります。ただ、HTML5の定義が厳密でない現時点では、優劣をつけるのは難しいです。

以下は、このブログをHTML5 Outlinerで可視化した結果です。

どうやら、意味を持つ要素に対して見出しが設定されていない箇所が多いようです。

「HTML5のアウトラインを意識したマークアップ」のつづきを読む

CSS3のtext-shadowを使ってフォントを装飾する

CSS3のプロパティ「text-shadow」を使ってフォントを装飾する方法です。

フォントにシャドウを付ける

以下のように設定することで、フォントに影を付けることができます。

text-shadow: 1px 2px 3px #ff0000;

それぞれの値は、
右方向に1pxずらして（マイナスだと左方向）、
下方向に2pxずらして（マイナスだと上方向）、
ぼかし具合を3px、
影の色は「#ff0000」にというように指定してあります。

text-shadowのサンプルです。

もちろん、text-shadowが使えるのはCSS3に対応しているブラウザに限りますが、私の環境では、Firefox5とGoogle Chrome 12で表示できていることを確認できています。残念ながらIEは対応していません。

「CSS3のtext-shadowを使ってフォントを装飾する」のつづきを読む

CSS3のborder-radiusを使って枠線の角丸を表現する

CSS3のプロパティ「radius」を使ってborderの角丸を表現する方法です。

基本設定

以下のようにCSSで設定することで、borderで指定した枠線を角丸で表現することができます。

border: 3px solid blue;
border-radius: 10px;

1ピクセルで青の枠線の角を10pxの度合いで曲線で表現します。以下に実際の組み込み例を示します。
※もちろんIE8以下など対応していないブラウザでは閲覧できません。

border: 3px solid blue;
border-radius: 10px;

みさなまお使いのブラウザでは角が丸く表示されているでしょうか。

少し前まで、「border-radius」はCSS3の草案で、表現できるブラウザは存在していませんでしたが、Firefox5.0、Google Chrome 12では問題なく表示されているようです。
それまではGoogle ChromeとSafariでは「-webkit-border-radius」、Firefoxでは「-moz-border-radius」が用意されていましたが、近い将来「border-radius」に統一されるでしょう。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

ちなみにIE8以下は対応していないので、見比べるとその効果を確認することができます。

「CSS3のborder-radiusを使って枠線の角丸を表現する」のつづきを読む

CSS3のセレクタを使ってリストを装飾する

これまで、リストを装飾するために「li」タグにクラスを指定していました。
リストのマークを画像にする、下線をつける、一つ置きに背景を変えるなど、リストはデザインバリエーションの高い要素です。
これら細かい要望を実現するために、これまではクラスを指定して実装していました。

しかし、繰り返し要素に条件に応じてクラスを指定するという事は、CMSなど動的に組み込むために一手間必要という点で、めんどくささがありました。
そこで、今回はクラスを指定せずにCSS3のみで実装してみます。
ちなみにIEなどCSS3に対応していないブラウザでは利用できません。

以下はベースとなるサンプルリストのソースです。装飾のために、特別なクラスは指定しません。

<ul>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
<li>サンプル４</li>
<li>サンプル５</li>
</ul>
  • サンプル１
  • サンプル２
  • サンプル３
  • サンプル４
  • サンプル５
「CSS3のセレクタを使ってリストを装飾する」のつづきを読む

CSS3のgradientを使ってグラデーションを表現する

CSS3のプロパティ「gradient」を使ってグラデーションを表現する方法です。

基本設定

以下のようにCSSで設定することで、背景をグラデーションで表現することができます。

.sample{
	background: -moz-linear-gradient(top, #555555, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
	background-color: #000000;
}

これは、実際にこのブログのフッタ部分、コピーライトが乗っている背景を指定してあるコードです。
Firefox用に「-moz-linear-gradient」、SafariとGoogle Chrome用に「-webkit-gradient」を指定します。また、IEなどCSS3に対応していないブラウザのため、とりあえずはCSS2での指定「background-color」も置いておきます。

「-moz-linear-gradient」では「top」を指定することで上から下へ、#555555から#000000にグラデーションを表示することを表しています。

「-webkit-gradient」では「点」で指定するのですが、「left top」から「left bottom」、つまりは上から下へ、#555555から#000000にグラデーションを表示することを表しています。

「CSS3のgradientを使ってグラデーションを表現する」のつづきを読む

PHPでPOST時に押されたボタンを判定する

例えば、PHPでフォームを構築する場合など複数のボタンを設置して、それぞれサーバ処理を分けたい場合があります。

具体的には、メールフォームで「送信してもよろしいですか？」といった確認画面では、「入力フォームに戻る」と「送信する」ボタンがあり、それぞれでサーバ処理を分岐させます。
複数のsubmitボタンがある場合に、サーバ側でどのボタンが押されたかを取得したいときに、どのような処理が適当なのかを考えてみます。

ちなみにこれから示す全てのコードは比較のために簡略化してあり、動作確認はとっていません。

JavaScriptでポストするデータを分ける

これまで私は、主にJavaScriptでPOSTするデータを操作し、サーバ側でその内容を判定することで、処理を分岐していました。

<a href="javascript:void(0);"><img onclick="back(); return false;" src="back.jpg" alt="戻る" /></a>
<a href="javascript:void(0);"><img onclick="send(); return false;" src="send.jpg" alt="送信" /></a>

JSの処理の中身は省略しますが、関数back()とsend()で異なるパラメータを設定してsubmitします。そうすると、そのデータがPOSTされるので、PHP側でデータ内容を判定して処理を分岐すればいいわけです。
JSではPOSTで送信するデータを自由に加工できるので、この方法では複雑な処理も可能になります。

「PHPでPOST時に押されたボタンを判定する」のつづきを読む

CSSのフォント指定でGoogle web fontsを使ってみました

Webサイトを構築する場合、フォントを指定します。例えば、Windowsでは通常「MS Pゴシック」を指定します。

何のために指定するのかというと、いかなる環境においても、なるべくサイトデザインに沿った、同じような見た目を保持するためです。
「MS Pゴシック」を指定するということは、Google ChromeやFirefoxなどブラウザに関係なく、OSのシステムフォントに「MS Pゴシック」がインストールされている場合に、それで表示するということです。

システムフォントに「MS Pゴシック」が存在することが前提なので、MacやLinuxなど、他のOSでは意図しないフォントで表示されてしまいます。
そのため、各OSに標準でインストールされているシステムフォントを考慮して、優先順位をつけてCSSでフォント指定をすることが一般的です。

body{
    font-family: "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}

つまり、これまではシステムフォントの都合上、全ての環境で同じフォントで表現するといったことが不可能だったわけです。

「CSSのフォント指定でGoogle web fontsを使ってみました」のつづきを読む

Firefoxのアップデートが多いので共存の道を図る

Firefoxのバージョン5が発表されたばかりですが、段階的にバージョン9までアップデートするそうです。
便利になることは良いことですが、制作の立場からすると互換性が心配です。

現在、私の環境ではFirefox3.6を使用していますが、とりあえず確認環境を残すという意味で、Firefox5を共存させてみたいと思います。

なぜFirefox4ではないかというと、どうもFirefox5が公開されている現段階で、Firefox4は入手できないようです。
次世代ブラウザ Firefox – 旧バージョンのダウンロード

プロファイルを分ける

Firefoxではユーザー毎に使用状況を保持するために、プロファイルを使用しています。
プロファイルの一覧はスタートメニューより「ファイル名を指定して事項」から「firefox.exe -ProfileManager」を実行すると確認できます。
また、このとき、ブラウザのFirefoxは閉じておくようにしましょう。

「Firefoxのアップデートが多いので共存の道を図る」のつづきを読む

大容量USBメモリexFATを使う場合の注意点

技術的に古い情報かもしれませんが、最近体験したことを書き留めておきます。

これまで、データを外部に持ち運ぶなんてことがほとんどなかったので、USBメモリを使う機会もありませんでした。
しかし、つい先日、どうしてもクライアント先に媒体経由でデータを納品しなければならないという事があったので、USBメモリを使ったのですが、クライアント先のPCでUSBメモリを認識してくれないという問題が発生しました。

クライアント先で使えなかったUSBメモリ

USBメモリは16GBのTOSHIBA製のものを購入しました。最近は大容量かつ安価なメモリが増えましたね。購入後は自身のPCでフォーマットしました。フォーマットをした環境はWindows 7、形式は「exFAT」です。

それまで「exFAT」という名を聞いたことがなかったのですが、大容量向けということだったので「16GBだしこっちのほうがいいのかな」と特に気にせずフォーマットしました。
しかし、クライアント先で使えなかった理由はここにあったようです。

「exFAT」とは

exFATとは先ほども述べたように大容量向けのフォーマット形式です。FAT32が最大容量32GBなのに対して、exFATだと16EBまでサポートできるとのこと。
見たことのない単位ですが、EBとは「エクサバイト」と呼び、GB「ギガバイト」の10億倍の容量だそうなので、最大サポート容量が約5億倍になった計算になるんですかね。
また、FAT32では1つのファイルの最大容量が4GBなのに対して、exFATは制限がないそうでうす。

ただ、OSによりサポートしていないものがあります。Windowsでいうと、exFATをサポートしているのはWindows 7、Vista Service Pack 1以上、XP Service Pack 2以上で、それ以外の環境ではUSBを挿しても認識してくれません。

つまりは、クライアント先のPCがWindows XP SP1以下だったため、ファイルを読み書きできなかったのです。
IE6の問題と一緒で、いつ古い環境を切り離すかというタイミングの問題がありますが、先走ると痛い目を見るという事ですかね。
そういうわけで、しばらくはFAT32に再フォーマットして使いたいと思います。

そもそも、16GBのメモリなので、exFATでフォーマットする必要もなく、FAT32で十分だったんですね。

「大容量USBメモリexFATを使う場合の注意点」のつづきを読む

Monthly Archives