SVG with a little help from Raphaël
First we create a table of values that add up to 100%. These are the values for each wedge in the pie chart. We can enhance the regular table if the browser supports it. <table id="nutritionFacts"> <caption>Nutritional information for product X</caption> <tr> <th scope="row">Calories</th> <td>45%</td> </tr> <tr> <th scope="row">Saturated Fats</th> <td>25%</td> </tr> <tr> <th scope="row">Protein</t
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS - かちびと.net
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
ウェブにも縦書きを！「竹取JS」公開
JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「竹取Web」につづく縦書き応援企画第２弾です。中国語と韓国語の縦書き化にも対応しています。 (2010年7月5日(月) 午前9時7分29秒 更新) Tweet これまで「writing-mode: tb-rl;」を指定可能な InternetExplorer5.5+ 以外の環境でレイアウトを保ったまま縦書きを表示することは困難でした。 ところが最近、IE 以外の主要ブラウザすべてが、CSS3 の「transform: rotate(deg)」に対応しました。つまり表示を自由に回転させることが可能になったわけです。 ということは、どういうことでしょう？ あるブロックを縦書き化したいとします。「回転できる」となると…、文字ごとに-90度回転させて、そのブロックを90度回転させれば…、そうです！ 見た
Sencha Touch をはじめよう 1 (Getting Started with Sencha Touch の邦訳 その１) | ExtJSで楽しくRIA業務アプリ開発
Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。 当然英語なので勝手に翻訳してみます。 英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。 Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。 Sencha Touch をはじめよう (Getting Started with Sencha Touch の邦訳) これはSencha Touchのはじめ型を解説した文書です。 Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回
Ext JS Blog - Ext v1.1 Released
Are you having a hard time picking the right JavaScript framework for your web development project? With so many choices out there, it can be confusing. Choosing the right JS frameworks can make your project faster, easier to manage, and…
Ext JS - JavaScript Library
The Enterprise-ready JavaScript UI Framework The top choice for developers building data-rich, modern web and mobile applications.
第7回 JavaScriptとHTMLとDOMの基本#2 イベント編 | gihyo.jp
こんにちは、太田です。前回はJavaScriptからみたHTMLの基本を中心に解説しました。今回はまず、イベントについて解説します。JavaScript、DOMにおいてイベントは極めて重要です。ブラウザ上のJavaScriptでは必ずといってよいほどイベントが絡んでいますし、ウェブアプリケーションをコントロールする根幹的な技術と言えるほどです。 JavaScriptとイベント ブラウザはscriptタグで指定されたJavaScriptを解釈して実行します。その時、関数などを定義するだけにして、実際にその処理が行われるのはユーザーがボタンをクリックした時や、何かを入力した時など、ユーザーの何らかのアクションに関連付けてJavaScriptを実行させることができます。さらには、ユーザーのアクションだけでなく、ページの読み込みや通信処理の完了後など、ブラウザ上で起こるあらゆるイベントについて処理
JavaScriptで3D - os0x.blog
id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと本格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
MOONGIFT: » Google Chrome上でスニペットを管理「ChromeCuts」:オープンソースを毎日紹介
ChromeCutsはGoogle Chrome用のフリーウェア。Webをブラウジングしていて同じような入力を繰り返すことは多々ある。住所の入力やメールアドレス、クレジットカード番号などなど。頻繁に繰り返す入力は、スニペットに登録しておくとキーボードを叩かないで済むので便利だ。 Google Chromeでスニペット そんなスニペットを管理するローカルアプリケーションは幾つかあるが、Webブラウジング中であればブラウザ上でできるのが便利だ。Google Chromeをお使いの方はChromeCutsを試してみよう。 ChromeCutsはGoogle Chrome用の機能拡張で、アドレスバー横のアイコンを使ってスニペットを管理する。何かタイトルを付けて、その下にコンテンツを記述する。リストの中からクリックするだけでクリップボードにコピーされるので手軽だ。 設定画面 コンテンツはHTML5を
Darkroom
Settings Recovery link GMail Yahoo MSN AOL Other Open page Language Theme sharpen resolution dull resolution color areas Save Cancel Ask MugTug E-mail: Message or Question: Send Cancel At MugTug, we’re committed to our users. Your privacy is important to us, as is the integrity of your computer. To better protect your privacy we provide this notice explaining our software development and online in
iPadのSafariに不足しているものを補う - ザリガニが見ていた...。
指でダイレクトに触ってなめらかに反応する、あのiPadのUIは、あっという間に使う人々を魅了する。しかし、そのまま使い続けているうちに、実はMacBookのようなマウスを利用したUIほど細かい操作ができないことに、いずれ気付く。 iPadのUIには、指先での操作を考慮して、適度なサイズと間隔が保持されている。そのため、マウスのUIほど機能を詰め込むことが出来ず、厳選した機能のみが提供されることになるのだろう。 iPadのSafariに不足しているもの それにしても、今のSafariにどう考えても不足していると感じる機能が、二つある。 表示中のページを閉じる機能 ページ内検索 表示中のページを閉じる機能 例えば、http://b.hatena.ne.jp/hotentry で、気になる記事へのリンクをクリックすると、新規ページが開いてリンク先にジャンプする。 気になる記事を読み終わったら、今
Create New Features for Flash with JSFL | Envato Tuts+
In this introduction to the JavaScript for Flash (JSFL) scripting language, you'll learn how to automate repetitive tasks and add new commands to the Flash authoring environment. Introduction We'll start by exploring JSFL in general, seeing what it can do, then building up to a useful application of it: a command that can turn text into a button (with its hit area set correctly) in a single click.
FlashからHTML5/JavaScriptへ·Smokescreen MOONGIFT
SmokescreenはHTML5/JavaScript製のオープンソース・ソフトウェア（予定。ライセンスは未定）。AppleのFlash拒否の動きは止まることなく、他のスマートフォンとの対立が深まっている。Flashは既に世界中で利用されており、無数のコンテンツが存在するのが理由だ。 広告デモ。上がHTML5+JavaScript、下がFlash だからといって、今後永遠にコンテンツが増え続けるとは限らない。HTML5の登場によって、Flashによらないアニメーションや多彩な表現力がHTML5で実現する。旧来のFlashと今後のHTML5をつなぐのがSmokescreenだ。 Smokescreenは以前紹介したGordonと同様にFlash（SWF）ファイルを解析し、HTML5/JavaScriptによって実行するライブラリだ。広告のバナーやアニメーションのデモがあるが、SWFと変わら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChromeExtention版、Jetpack版のBibliwoをリリースしました(あとバグ修正) - やればできる子の日記
ブログ – H2O space
TouchSolitaire · Built with Sencha Touch
opensocial-jquery - Google Code
gwt-mobile-webkit - Project Hosting on Google Code