Chromeにてアップロードファイルにフォルダを指定するinputタグの記述例 - 強火で進め
Chromeの場合は以下の様に webkitdirectory と directory を付ける(directoryは省略してもOK。仕様が確定してからは webkitdirectory の代わりに directory が使われる様になるのだと思われます)とアップロードするファイルの指定としてフォルダが選択できます。実際にはフォルダ内のファイル全てがアップロードされる形になります。 <input type="file" webkitdirectory directory /> 実際のコードとしてはこんな感じになります。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <meta http-equiv="content-type" content=
【コラム】攻略! ツール・ド・プログラミング (57) XHTML/XML/HTML5をサポートしたテンプレートエンジン「Thymeleaf」 | エンタープライズ | マイナビニュース
Thymeleafとは 「Thymeleaf」は、XHTMLとHTML5、そしてXMLをサポートしたJavaアプリケーション向けののテンプレートエンジンである。テンプレートエンジンとは、テンプレートと呼ばれる雛形と、個別に用意された入力データを合成して、その結果を出力するソフトウェアの総称。見た目を記述するコードと、ロジック/データを記述するコードが分離できることや、共通部分のコード量を減らすことができるなどといったメリットがある。特にWebアプリケーション開発においては、HTMLの出力に対してテンプレートエンジンを利用するケースも多い。 Thymeleafの場合は、XHTMLやHTML5によるWebアプリケーション向けのテンプレートの利用に加えて、XMLを出力するスタンドアロンアプリケーションにも適用することができる。また、Webアプリケーション開発においては「Spring MVC」との
JavaScript + Velocityが開発を楽にする!? - Velocity2Js登場
レポート JavaScript + Velocityが開発を楽にする!? - Velocity2Js登場 Velocity2Jsというアプリケーションをご存知だろうか。Velocity2JsはJavaおよびJavaScriptを使って開発されたアプリケーションで、Apache VelocityテンプレートファイルをJavaScriptの関数に変換することができるツールだ。Antタスクとしてテンプレートコンパイル処理を統合できるので、既存のAntビルドプロセスにそのまま統合できるという特徴もある。 Apache Velocityテンプレートを使う場合、動的に使うにしても静的に使うにしてもJavaを使ってテンプレートからHTMLを生成する必要がある。それと比べて現在注目されているAjaxのアプローチは、大まかに言えばJavaScriptフレームワークを使ってHTMLコードに直接JavaScri
Webアプリ開発の常識、バリデーションとテンプレート
Webアプリ開発の常識、バリデーションとテンプレート：Webアプリの常識をJSPとStrutsで身につける（7）（3/3 ページ） テンプレートエンジンを作って、仕組みを理解しよう では、実際にテンプレートエンジンの仕組みを作成してみましょう。 ■Strutsのタグライブラリ「Tiles」を使う 今回は、Strutsで提供されているタグライブラリ「Tiles」を使いたいと思います。「Tiles」とは、「Tile」と呼ばれる、再利用可能な部品を組み合わせたようなHTMLの作成を支援する機能です。 例えば、図3のようなレイアウトで構成されていた場合に、「コンテンツ」の部分だけ変化するようなWebページを考えます。TilesはこのようなWebページの作成を支援するものです。「ヘッダー部分」「メニュー画面」「コンテンツ」「フッター部分」に当てはまる画面（この連載では、JSP）がTileということに
<input type="text">でEnterを押してもsubmitさせない方法【HTML, JavaScript】 - Programming Magic
<input type="text">でEnterを押すとsubmitされてしまうことがある。 これは便利なときもあるが、場合によっては不便になる。 Enterを押すとsubmitされるのは以下の3パターンがある。 1. Opera、Safariで、<input type="text">または<input type="password">がある場合 <form> <input type = "text" name = "text1"> <input type = "text" name = "text2"> </form> 2. IE、Firefoxで、<input type="text">または<input type="password">が１つ以上と、<input type="submit">または<input type="image">が１つ以上ある場合 <form> <input
【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは！？ - Web.fla
■DomLevel2でのキャンセル～addEventListenerの場合 DomLevel2の場合はイベントの設定をaddEventListenerを使用しますがその場合のキャンセル方法 ちなみにaddEventListenerはIE対応ではないので動作しません。 //myformというidを設定したフォームにsubmitイベントを設定 document.getElementById("myform").addEventListener("submit",checkform,false); function checkform(event){ ～省略～ // eventプロパティのpreventDefault()を実行することでsubmitのデフォルトをキャンセル event.preventDefault(); } 上記の例だとcheckform関数の引数にeventが設定されていますの
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
submitボタンのデフォルト設定を回避する
この場合、デフォルトボタンは「戻る」になる。 これは入力フォームが一つなので、例えばテキストボックスで間違えてEnterキーを2回押してしまってもそんなに被害はないと思う。 ただ次の場合はどうだろう？ Sample2 この場合、間違えてEnterを押してしまったら、入力途中だったフォーム情報が「戻る」ボタンを押した事になってしまい消えてしまう・・・なんて感じに。 単純な動作であれば（キー入力操作に慣れた人であれば）デフォルトボタンでEnterキーを押したらサーバに送信ってした方が楽なのかもしれない。 ただ複数の項目だったり、その画面アクションをしてしまう事で入力情報が消えるような場合、このデフォルトボタンの動作はまさに「小さな親切、大きな迷惑」だったりするのです。 （入力作業中の誤動作等も考えられるし・・・） で、色々調べてみた結果、対策としては、 １．影響のないボタンをデフォルトに設定す
【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日本語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に
第9回 高速なWeb APIの実装とテスト―Mobage APIを支えるノウハウ（1） | gihyo.jp
本連載では第一線のPerlハッカーが回替わりで執筆していきます。今回のハッカーはDeNAの嶋田裕二さんで、テーマは「高速なWeb APIの実装とテスト」です。 Web APIの基礎知識 はじめまして、DeNAでMobageオープンプラットフォームのWeb API（以降Mobage API）を実装しているxaicronです。Mobageオープンプラットフォームは、Mobageの機能をWeb APIを通して外部の開発者に公開することにより、ソーシャルゲームをユーザに提供するサービスです。 簡単に説明するとWeb APIとは、HTTPを利用してネットワーク越しに処理を行い、結果を返すしくみです。最近ではJSON（JavaScript Object Notation）というフォーマットを利用してデータのやりとりをすることが多くなっており、Mobage APIも基本的にはJSONを受け取って処理を行
QUnitの基本的な使い方 - but hopeful
[追記] 2013/9/1 三年前の記事が未だに読まれているようなので、一応書いておきますが、あれから色々変わってもっと良いものも出ています。 QUnit でも別に問題はないですが、今から QUnit を使うよりは http://visionmedia.github.io/mocha/:title=mocha] とかの方が個人的にはお勧めです。とにかく、今は色々あるのでもっと別の選択肢調べて見ることを個人的にはおすすめします。別に QUnit は使わないほうが良いとは言いません。 JavaScriptのテスティングフレームワークはいろいろありますが、自分は今主にQUnitを使っているので、少し使い方をまとめて見たいと思います。 [追記]今回作成したソースを上げました。ninja.js QUnit とは QUnitはもともと、jQueryをテストするために開発されたJavaScript Un
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Thymeleaf: Java用のXML/HTMLテンプレートエンジン