Good-Bye Flash ~ CacooはHTML5で生まれ変わります | Cacooブログ
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは、Cacooプロジェクトマネージャの平山です。今回は、Cacoo開発チームが現在注力していること、近い将来Cacooにもたらされる大きな変化について皆様に報告したいと思います。 2009年にCacooが生まれてから約7年間、僕たちはCacooの編集画面にFlashという技術を使ってきました。 FlashはWeb上で高度な表現を、環境に左右されることが少なく実現できる技術として、CacooのようなリッチなUIを備えたアプリケーションやエンターテイメントに長い間利用されてきました。しかし昨今ではFlashの抱える脆弱性によるセキュリティ面での懸念が指摘されることも多く、Flashが利用できない、あるいは利用しづらい環境も見られるようになりました。一方でWebの標準的な
Babelで始める！モダンJavaScript開発
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
h5Validate - The HTML5 Form Validation Plugin for jQuery
h5Validate - HTML5 Form Validation for jQuery Download from Github By Eric Elliot, author: "Programming JavaScript Applications" (O'Reilly) Need to brush up? See "Learning JavaScript: Up to Speed in No Time" If you want to contribute, feel free to fork the project on Github. Best practice realtime HTML5 form validation for jQuery. Works on all popular browsers, including old ones like IE6. Regular
HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る - Qiita
リアルタイム入力チェックは今のWEBページでは割りと標準化されつつあるけど、 ライブラリを選定したり、画面の表示を考えたりと何かと面倒。 HTML5の機能で追加されたバリデーション機能を利用すればそういった煩わしさから開放されるのでは？ と思いたち、外部ライブラリを一切使わずにリアルタイム入力チェックを実装してみた。 コード <section> <form id="sampleForm"> <label> 半角英数字以外を入力してみよう <input type="text" id="input" placeholder="半角英数字で入力" pattern="^[0-9A-Za-z]+$" required> </label> <button type="submit" id="submit">送信</button> </form> </section> <script> "use str
html5 required and jQuery submit()
I'm trying to implement html5 into a form, but I came with a problem when I submit the form through jquery and try to use the html5 "required" attribute. Here is my form, quite simple: <form action="index.php" id="loginform"> <input name="username" required placeholder="username" type="text"> <a href="javascript:$('#loginform').submit();">Login</a> </form> The problem is that when the form is subm
JavaScriptフレームワークについて個人的な思い - 当時を振り返りながら - albatrosary's blog
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。１年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
JavaScriptプログラミング講座【FormData クラスについて】
<form action="http://example.com/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data" > <textarea name="my_textarea"> 値 </textarea> <br> <input type="text" name="my_text" value="値"> <br> <input type="hidden" name="my_hidden" value="値"> <br> <input type="file" name="my_file"> <br> <input type="submit" value="送信"> </form>
Shumway
Shumway is an HTML5 technology experiment that explores building a faithful and efficient renderer for the SWF file format without native code assistance. Try it out! Install the latest Shumway extension. (Read more about configuring the extension). Examples (via Shumway Inspector): Racing (AS2) (as in live demo) and Racing (AS3) Tiger (AS3) Pacman (AS2) and Pacman (AS3) Box2D (AS3) MP3 Player (AS
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
フォーム関連要素（終） HTML5で仕様になった入力値チェック＋便利な3Tips
フォーム関連要素（終） HTML5で仕様になった入力値チェック＋便利な3Tips：HTML5“とか”アプリ開発入門（9）（1/3 ページ） HTML5で強化された入力フォームに関する話題は、今回でいったん終わりとします。これまでの3回で、＜input＞要素に加えられた変更と、新たに追加された＜form＞関連の要素についてお話ししてきました。 今回の話題は、フォームの入力値チェック（バリデーション）が主になります。また、autofocus属性やform属性など、これまでの記事で触れられなかった内容も紹介したいと思います。 HTML5では入力値チェックの仕組みが“仕様”に HTML 4までは、フォームに入力された値をチェックする仕組みがほとんど備えられていませんでした。そのため、入力値のチェックは基本的にサーバサイドでのみ行うか、JavaScriptを用いてチェックする必要がありました。 しか
モジラがJSだけでSWFをリアルタイムに再生できる「swf.js」プロジェクトを発表！
モジラがJavaScriptだけでSWFをリアルタイムに再生できる「swf.js」プロジェクトを発表！ モジラがプラグイン無しでJavaScriptだけでSWFファイルをリアルタイムに再生できる「swf.js」プロジェクトを発表しました。 JavaScriptとHTML5 canvasやHTML5 videoで解析＆再生を行うのでiOS/Androidにも対応しています。 変換や出力ツール的なものは以前から存在していましたが、こちらはリアルタイムに行います。 Flash Liteではなくフル版のFlash (Flash Player 11.5/SWFバージョン18相当) に対応します。 アドビ純正のFlash Playerではバグや脆弱性の多さが問題になってしましたが、それが解決されると多くのFlasherが期待を寄せています。 先日発表されたJavaScriptをネイティブに近い速度まで
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
HTML5でロードオブナイツとかいうゲームを作った - mizchi log
陣取り戦争ゲーで、iPhoneのUnity版からの移植です。 ロードオブナイツ - Yahoo!モバゲー http://yahoo-mbga.jp/game/12011436/detail PC(Chrome/Firefox/IE9以上)とスマホ(Webkit)で同じ物が動きます。ヤバゲーとモバゲーでアカウントは共有してるので、どっちからでも入れます。 HTML版としては既存コードとか一切なかったんで、JSに関してはフルスクラッチです。というか全部CoffeeScriptです。 ある日会社で楽しくHaskellでKPI計算モジュール書いてたら、 「UnityのネイティブのゲームをHTML5に移植したい」 みたいな話が降ってきたので、移植しました。3ヶ月ぐらいで。 プラットフォームはモバゲー(スマホ) + ヤバゲーです。HTML5なのは、スマホとブラウザゲーで開発リソースを共通化したかったか
WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基本的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で
WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた
長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。 WebSocketとは # WebSocketは、HTML5関連の中でも特に注目を集めている技術の一つです。通常のHTTP通信であればクライアントからのリクエストなしにサーバーは応答しませんが、WebSocketを使うことでクライアントとサーバーの間で双方向の通信が可能となります。これを利用することで、今後様々なリアルタイム性の高いサービスを構築することが可能になるでしょう。 そんなWebSocketですが、これまで波乱の道を歩んできました。数年前か
今流行のArctic.jsと、enchant.jsの比較 | Geisha Tokyo Engineers' Blog
圧縮後のファイルサイズはenchant.jsのほうが3kbほど少ないですね。 どちらもjs上に継承などを行う擬似クラスを作るためのClass要素があったり、スマートフォン/PC両方で使えるようにtouch系イベントとmouseDown/Move系イベントを判定したり、fps(フレーム数）を設定してフレーム毎のイベントを設定するなどしています。 後発だけあって、Arctic.jsのほうはenchant.jsの機能をパクったenchant.jsにある機能はだいたいあるような感じですね。 オブジェクトの描画についてですが、Canvasでの描画の方が性能的に有利かもしれませんが、enchant.jsは divタグ毎にオブジェクトに持っていることで利便性をあげています。既存のアニメーション効果をdivタグ単位で 適応することにより、今までのエフェクトを使いまわすことができるのです。 ench
DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Submit HTML5 Form using Javascript and validate its inputs
jQuery Supports HTML5 Events - JSFiddle - Code Playground