submitボタンの2度押しを制御する: mitsuruogの日記
submitボタンを連打された場合、2重登録防止などの目的で2回目以降のイベントを無効にしたいことはよくある事なのだが、最近実装した際に少しハマッたのでいろいろ調べてみた。 まず以前よく書いていたコードで、onClick時に「return false;」するとイベントが無効になる。 （後ほど重要になってくるのだが、これは「DOMレベル0」の書き方） 最近はHTMLの中にjavascriptを書くことを避けるようになってきたので、下のサンプルのようにjavascript内でDOM要素を取得してイベントリスナーを設定する方法が主流となってきた。 （後ほど重要になってくるのだが、これは「DOMレベル2」の書き方） javascriptのコードは次のようになっている。 ます、初めの方に書いてある「LISTENER」変数の部分は、イベントリスナ登録をクロスブラウザ対応する際のお決まりパターンだ。詳し
[それWeb] HTMLでデバイスのカメラから写真をとり、PHPでOCRにかけて文字列を返す - Qiita
それWebでできるよ！ こんにちは皆さん スマホのカメラを使って写真を撮ると、なんと文字列が返ってくる。 そんなアプリがあるような気がするのですが、現在ではブラウザでもカメラにアクセスできるので、わざわざアプリにする必要もなく ( OSの差異にあまり煩わされることなく ) Webアプリで簡単に作ることができるのではなかろうか、と考えました。 考えたらやるしか無いでしょう。 休日を利用して、ちゃっちゃか作ってみました。 あ、いつものようにPHP使いますね TL;DR 今回の見所は以下のとおりです。 HTML + JavaScriptでカメラを取る tesseract-ocrをインストールしたコンテナを作る PHPでOCRする 何がやりたいのか 掲示板とかで無線wifiのssidとか貼ってあるとき、いちいち手打ちするの面倒なんで、カメラで取ってそのままはっつけられるようになったら嬉しいのになぁ
![[それWeb] HTMLでデバイスのカメラから写真をとり、PHPでOCRにかけて文字列を返す - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/123855cc643585995a046d59e978b3aacdfccf83/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgxJTlEJUUzJTgyJThDV2ViJTVEJTIwSFRNTCVFMyU4MSVBNyVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MiVBNCVFMyU4MiVCOSVFMyU4MSVBRSVFMyU4MiVBQiVFMyU4MyVBMSVFMyU4MyVBOSVFMyU4MSU4QiVFMyU4MiU4OSVFNSU4NiU5OSVFNyU5QyU5RiVFMyU4MiU5MiVFMyU4MSVBOCVFMyU4MiU4QSVFMyU4MCU4MVBIUCVFMyU4MSVBN09DUiVFMyU4MSVBQiVFMyU4MSU4QiVFMyU4MSU5MSVFMyU4MSVBNiVFNiU5NiU4NyVFNSVBRCU5NyVFNSU4OCU5NyVFMyU4MiU5MiVFOCVCRiU5NCVFMyU4MSU5OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzFiYzg3YzcwZWY0ZTFkOGMzMTllZDdhNTkzM2Y4ZTc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuaWlzYW4tdG9reW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPThhOTk3ZjJhY2ExYTc2ODBiMTE0ZWUwZjJhODg4NzE1%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-Uk9YWO-8iOaXp--8muagquW8j-S8muekvlNDT1VURVLvvIk%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D7f1f86bba327071116111219db6eb310)
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection サイトの安全化 HTTP Observatory HTTP アクセス制御 (CORS) HTTP 認証 HTTP キャッシュ HTTP の圧縮 HTT
第23回 JavaScriptによるUIの実装：スライダー | gihyo.jp
こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
dc.js - Dimensional Charting Javascript Library
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript l
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
Cookie Clicker
Slow connection? If not, please make sure your javascript is enabled, then refresh. If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5! Your browser may not be recent enough to run Cookie Clicker. You might want to update, or switch to a more modern browser such as Chrome or Firefox.
altJS勉強会「Haxeすごいからみんな使え！」
33. Boxer Editor E-Texteditor Eclipse EditPlus Editra Emacs Espresso ide fdt Fraise Editor Geany Gedit FlashDevelop Intellij IDEA jEdit Kate Kdevelop (nix) Komodo Konqueror (nix) MonoDevelop Notepad++ Pacu SciTE Sublime Text 2 Sugar-hx TextMate bundle TextMate (mac) Ultraedit (win, nix) Vim www.activestate.com Xcode (mac) 34. Kate Boxer Editor Kdevelop (nix) E-Texteditor Eclihxというプラグイン Eclipse Kom
新しくなるappCacheとtemplateでWebアプリケーションの作り方が変わる
WebComponents仕様の一部として議論されているテンプレートの機能は、Ajaxが登場したときのようにWebアプリケーションを変えていくだろう。W3Cのマイケル・スミス（Michael Smith）氏は2月18日に都内で開催された「第36回HTML5とか勉強」でそう説明し、HTML5.1に相当する議論中の新機能への期待を示しました。 先週紹介した「オフラインファーストの思想と実践」の前に行われたスミス氏のセッション「勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり」の内容をダイジェストで紹介しましょう。 新しくなるアプリケーションキャッシュ マイケル・スミス氏。今日はappCacheとtemplateと、HTML5のテストをgithub上に置き始めた、などの話をします。 アプリケーションキャッシュ（appCache）はご存じですか？ HTML5でオフラインアプリ
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
重い処理を軽くできるJavaScriptライブラリ作ってみた
追記: この記事のものは古くメンテナンスされていません。 CPU負荷をかけずにループ処理するJavaScriptライブラリは「CPU負荷を抑えて重い処理を軽くするJavaScriptライブラリ「chillout.js」 | 圧縮電子どうのこうの」を参照ください。 lazyIter.js lazyIter.js は CPU 負荷をかけずにループ処理が可能な JavaScript ライブラリです。 重いループ処理などを軽くすることができます。 ループ内で処理の負荷に応じて遅延させ、結果的に重い処理は軽くなり 元々軽い処理は、ほぼ従来の速度のまま実行できます。 処理の負荷だけでなく、時間のかかるループ処理は 「応答のないスクリプト」警告がでてしまいます。 そのような警告なしで実行できるのも特徴の一つです。 どうに違いがあるのかは CPU 負荷テストページ で実際に試してみてください Pot.js
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
これは備忘録 Unicode エスケープシーケンス 変換
Unicode エスケープシーケンス（\uXXXX)形式 に変換するもの ついでにHTMLの数字文字参照、文字実体参照にも対応させてみた。 メモ Unicode の UTF-8 エンコーディングは ASCII 文字と互換性があります。 Unicode 文字の U+0020 から U+007E までは ASCII 文字の 0x20 から 0x7E と同等です。 ASCII はラテンアルファベットをサポートしており、7 ビット文字セットを使用します。 UTF-8 は各文字について 1 オクテットから 4 オクテットを使用します。 （「オクテット」は 1 バイト、すなわち 8 ビット）。 \uXXXX形式 は多分、java、javascriptで使用可能。 数値文字参照（文字参照）：数値文字参照は、10進数もしくは16進数によって文書文字集合における該当文字を指定する方法 例： 「©
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Regex to test if only ASCII characters
長文日記
https://github.com/tokuhirom/autolink.js/blob/master/lib/autolink.js
GitHub - niklasvh/php.js: PHP to JavaScript converter and VM written in JavaScript
GitHub - tokuhirom/autolink.js
GitHub - cemerick/jsdifflib: A javascript library for diffing text and generating corresponding HTML views
