お問い合わせフォームなどの確認画面をページリロード無しで表示する - 北海道苫小牧市のホームページ制作 STUDIO KEY
お問い合わせフォームなどの確認画面をページリロード無しで表示する 2014年08月28日 確認画面を既存のHTMLを使って表示する お問い合わせフォームなど、POSTした後に確認画面を表示し、入力内容を確認して貰ってから送信するという形式のフォームを見た事があると思います。そのまま送信されてしまうフォームも有りますが、入力内容を確認出来ないのはちょっと不親切です。 また、確認画面は出るのだけど、Javascriptのアラートだったり、表組とかページデザインなど無視して真っ白なページに確認画面を出すようなフリーCGIなど、これもあまりスマートでは有りません。 今回ご紹介する方法は、jQueryを使い、フォーム部分のコーディングを活かしつつ入力確認画面を出す方法です。 サンプル 必須マーク付けてますが、バリデーションは行ってません。入力チェックに関しては最後に参考例を掲載します。 formのH
jQuery-Validation-Engineで簡単にフォーム内容をチェック！ - 北海道苫小牧市のホームページ制作 STUDIO KEY
フォームを伴うHTMLコードを書いていると、どうしてもバリデーション(入力値の妥当性確認)が必要になります。 HTML5になると、フォーム属性である程度はカバー出来ますが、全てのブラウザがHTML5に対応し、かつ利用者の多くがこれの恩恵を受け、かつ対応出来ないブラウザを利用している方を切り捨てる時代になるにはまだまだ数年掛かります。 バリデーションの方法は大きく分けてPOST後とPOST前の二種に分かれます。 POST後のバリデーションは送信された際に、PHPやCGI側で入力内容をチェックし、エラーならメッセージを表示させるなどです。 厳密にチェックするならばこれが一番ですし、エラーメッセージなどデザイン部分も色々と工夫する事が出来ます。 ただ、簡単なメールフォームでいちいちメールアドレス形式かどうかを確認する為だけにPOSTし、エラーメッセージを表示するプログラムを書くのは面倒です。 ※
IEのAjax Cacheに注意 - Kazzzの日記
アプリケーションをデプロイした後、利用者から「リロードしてもデータが最新にならない」「更新したはずのデータが書き変わらない」というクレームを受けたので調べてみると以下のようなログが出ていた。 データの更新後、$location.path("/path")内部パスを変える処理を行っているのだが、パスを変えた後のGETリクエストが全てHTTP 204で返って来ていることが分かる。(後で調べるとと304の時もあった) 普段、開発とテストに使用しているChromeでは見たことが無いので、UAを調べると案の定IE(IE10、IE11)だった。 調べてみるとIE(少なくとも10と11)はAjaxのリクエストを勝手にキャッシュするようで、このログが表示されている間はサーバに全く問合せに行っていなかった。 この問題(IEだけのようだが)解決するにはHTMLのヘッダーのようにリクエストのヘッダを明示的にキャ
Android 5.0 WebView 40 でJavaScriptのダイアログが出ない(alert, confirm, promptなど) - Qiita
Android 5.0 で厄介な現象を発見したのでメモ。 2015/04/08 追記 WebView 42 で修正されたかも。 現象 アプリのWebViewでサイトを閲覧しているとJavaScriptのダイアログが出ない。 confirmダイアログが出ず、常にキャンセル扱いとされるため、ボタンを押しても何も起きないように見える。 つまり確定ボタンなど、ここぞというボタンが動かない！！！ 発生するバージョン Android 5.0 WebView 41 (現時点で最新版) https://play.google.com/store/apps/details?id=com.google.android.webview&hl=ja なぜこのような問題が？ 半日くらいかけて調べましたが、どうやら不具合のようです。地味に影響大きいんじゃ？？ 回避方法 思いつくままに WebViewをアンインストール
簡単にフォームの入力チェックが行えるjquery.validate.js-JavaScript Library Archive
簡単にフォームの入力チェックが行えるjquery.validate.js Check Tweet 配布元：bassistance.de » jQuery plugin: Validation ライセンス：MIT/GPL jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。 利用方法 利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> バリデーションを行いたい
jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About
フォームの入力チェックは、JavaScriptでリアルタイムにできると便利 ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかる フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したい ユーザの入力や選択にミスがあればエラー
![jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/53261f4457e0fb42c78173601df18b35aa3e7ed4/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F0%2F3%2F2%2F7%2Ftopimg_large.png)
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
io.js - JavaScript I/O
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。ゲームエンジンは多数存在しますが、今回は特に2Dをサポートしたソフトウェアを紹介します。mBaaSお役立ちブログ トップ> ブログ> Tips> HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。 ゲームエンジンは多数
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編） 西田慎吾（株式会社アイ・エム・ジェイ） 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リアルタイムで入力チェック： jQuery-Validation-Engine のカスタマイズ - Qiita
ExcelをインストールせずにExcelファイルをCSVに変換する
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
