Wysihtml editor
THIS is the typewriter for the modern web.Go on, start typing here ... 1. get scriptsbower install wysihtml or download the latest release from Github. 2. include the scripts in your HTML<!-- wysihtml core javascript with default toolbar functions --> <script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script> <!-- rules defining tags, attributes and classes that are allowed --
Audio Visualization with Web Audio, Canvas and the Soundcloud API
Audio visualization Update 05/02/14 - This demo got featured on Google’s Chrome Experiments website! This has generated a lot more interest (as in hundreds of views per day rather than one or two per week) so hopefully we will see some improvements from the community via the GitHub repo - I’ve already had a first pull request adding some very cool new functionality! Update May 2015 - As of latest
CSVファイルのデータ異常値を感覚的に捕まえるビューワ CSV Fingerprints
Victor Powellさんが提案した CSV Fingerprints (CSVの指紋)は、CSVファイルのデータをデータの有無やデータの型(文字、数字など)に合わせて色づけすることで、日々の事務などで自動生成されて […] Victor Powellさんが提案した CSV Fingerprints (CSVの指紋)は、CSVファイルのデータをデータの有無やデータの型(文字、数字など)に合わせて色づけすることで、日々の事務などで自動生成されているCSV出力の異常な部分を、目視で発見できるようになるのでは、という提案です。 カラムのデータの型によって異なる色で塗ったのが上のような例。 図の上でクリックしながらマウスを動かすと、指している辺りが拡大表示され、セルの内容を確認することができます。 大きなデータセットの中から、異常になっている部分をすばやく特定し、その前後の値を含めて確認できる
localStorageはいい感じ
今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。 以下、特徴をいくつか挙げてみます。 2011/07/06 イベントについて追記 ローカルにデータを保存します PCやスマートフォンなどの端末にデータを保存します。 別のサイトに行こうが、ブラウザを閉じようが、データが残っています。 localStorageの使い方としては、キャッシュ的な使い方が良さそうです。 「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」 って感じで。 サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。 所詮はローカルのデータなので、データが存在することを前提にしてはいけません。 モダンなブラウザなら大概使えます IE8以上、FireFo
YouTube Player API Reference for <iframe> Embeds - YouTube APIs and Tools - Google Code
Getting Started API Overview Guide Who's Using It? Building Monetizable Applications Register Developer Keys YouTube Data API Client Library Guides and Code (v2.0) Downloads, Sample Code and Tutorials Java Guide JSON-C / JavaScript Guide Interactive Demo JSON / JavaScript Guide .NET Guide PHP Guide Developer's Guide (v2.0) Authentication AuthSub for Web Applications OAuth for Web Applications Clie
iPhone、iPad向けYouTubeを埋め込みJavaScript API - blog
Google より、iPhone やiPad でも閲覧可能な、 JavaScript による、制御用Player API が公開されてました。 iframe もとくになんですし、結果がどうとしても、 個人的には、できればJavaScript を使ったほうが好みかなぁと。 <div id="player"></div> <script> //Load player api asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(t
ブラウザの仕組み: 最新ウェブブラウザの内部構造
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
canvasアニメーションでゲーム制作-1 - 秋葉秀樹 個人ブログ
あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。 と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。 まずcanvasですが、お決まりのパターンとして憶えておきます。 //HTML内 <canvas id="shootingCanvas" width="1200" height="800"></canvas> 1200pxの横幅、800pxの高さのcanvasタグを書きます。 これをJavaScriptで読みにいきます。 これで、このあとはJavaScriptで変数「ctx」にドットシンタックス（ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番）で書いていくことになります。 で、四角を描く方法は以下の通りです。（ソースをコピペし
第16回HTML5とか勉強会 Progressive Enhancement « HTML5.JP ブログ
[韓国語（한국어） by @myjjulee] 2011年4月21日に開催された第16回HTML5とか勉強会にて Progressive Enhancement をテーマに登壇させて頂きました。講演に使ったスライドをここに公開しますので、ご興味のある方は、ぜひ、ご覧ください。 Progressive Enhancement ～すべての人に確実に情報を届けるために～ Progressive Enhancement という考え方は、決して新しい概念ではありません。何年も前から Progressive Enhancement は多くの著名なディベロッパーから提唱されてきました。しかし、残念ながら、これまでは大きく注目されることはなかったといえます。 これまで私たちが努力してきたことは、主に Regressive Enhancement と呼ばれるアプローチです。あらゆるブラウザーに同じデザイン、
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
HTML5 の “ブロック・レベル“ リンク - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「“Block-level“ links in HTML5」を日本語訳したものです。 原文タイトル “Block-level“ links in HTML5 原文ページ URL http://html5doctor.com/block-level-links-in-html-5/ 著者 Bruce Lawson 氏 原文投稿日 2009-07-13 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトの
nude.js | Nudity detection with JavaScript and HTMLCanvas
About nude.js is a JavaScript implementation of a nudity scanner based on approaches from research papers. HTMLCanvas makes it possible to analyse image data and return whether it's nude or not. The script only detects nudity, the rest of the programming logic (image swap/auto-save ;-) /whatever) belongs to the programmer. Update: First improvements and next steps of nude.js (Article) The real wor
Face Detection in JavaScript via HTML5 Canvas
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript? Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element. The algorithm is implemented on
Titanium - JavaScript で iPhone/Android アプリを作る - naoyaのはてなダイアリー
Titanium Mobile は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは Titaniumで始めるモバイルアプリ作成の基礎知識 (1/3)：Web技術でネイティブアプリを作れるTitanium（2） - ＠IT などに解説があります。 少し時間があったので、JavaScript で作るというのがどんな感じか試してみました。作ったアプリは こんな感じで TableView があり、選択すると WebView でアプリ内ブラウザが立ち上がる、ブラウザはツールバーで「戻る」や「リロード」が可能。あとはタブコントロールがあったり･･･という単純なもの。初期起動画面のサイトリストは、HTTP でローカルに立てたサーバーから JSON で読み込んでいます。 Web上のドキュメントを見ながら2, 3時間試行錯誤で一応の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://lint.brihten.com/html/
「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering
http://atnd.org/events/9585
HTML5ベースのリモートデスクトップソフト「ThinVNC」v1.0が公開、正式版に
http://d.aoikujira.com/jsWaffle/wiki/