CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
フリーで商用利用可能なグラフ描画ライブラリ
こんにちは、しぐれがきです。 自作のWebアプリ作成にあたり、グラフ描画ライブラリを導入しようと考えています。 一応、自作といっても公開も視野に入れたいので、事前に商用利用可能かを調査しました。 せっかく調査したので、本記事で備忘録としてまとめたいと思います。 目次 グラフ描画ライブラリへの要件 ■商用利用 ・商用利用可能なこと ■デザイン ・デザインが見やすいこと ■グラフの種類 ・複数のグラフに対応していること -棒グラフ -折れ線グラフ -円グラフ -ドットグラフ(分散グラフ) -曲線グラフ 調査結果 グラフ描画ライブラリ一覧 特定キーワードでググってグラフライブラリをリストアップしました。 調査方法は調査方法を参照
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
1.5. Scipy: 高水準の科学技術計算 — Scipy lecture notes
1.5. Scipy: 高水準の科学技術計算¶ 著者: Adrien Chauve, Andre Espaze, Emmanuelle Gouillart, Gaël Varoquaux, Ralf Gommers Scipy scipy パッケージは科学技術計算での共通の問題のための多様なツールボックスがあります。サブモジュール毎に応用範囲が異なっています。応用範囲は例えば、補完、積分、最適化、画像処理、統計、特殊関数等。 scipy は GSL (GNU Scientific Library for C and C++) や Matlab のツールボックスのような他の標準的な科学技術計算ライブラリと比較されます。 scipy は Python での科学技術計算ルーチンの中核となるパッケージです; これは numpy の配列を効率良く扱っているということで、numpy と scipy は
[JS]高速で軽量なJavaScriptのフレームワーク -RightJS
RightJS RightJSと他ライブラリとの比較 IE, Fx, Op, Safari, Chromeの各ブラウザでのパフォーマンスは、jQuery、Prototype、Mootoolsなどの主要なJavaScriptのライブラリと比較して、概ね高速なパフォーマンス結果となっています。 デモではモーフィング、ハイライト、フェード、スライドなどのビジュアルエフェクトを楽しめます。 demo RightJSのライセンスは、MIT licenseとのことです。
[JS]アニメーションのエフェクトを加えるJavaScriptのフレームワーク集
ちょっとした動きから、ダイナミックな動きまでアニメーションのエフェクトを加えるJavaScriptのフレームワークをSix Revisionsから紹介します。 10 Impressive JavaScript Animation Frameworks
jQueryとも共存できる「Ext JS 3.0」入門 (1/4)
「デスクトップアプリケーション並みの美しいユーザーインターフェイスが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の最新版、「Ext JS 3.0」が7月6日にリリースされました。「古籏一浩のJavaScriptラボ」第4回は、実際に簡単なサンプルを作りながらExt JSの魅力に触れる入門記事をお届けします。 （編集部） Ext JSとは？ 「Ext JS」は、米Ext JS, LLCが公開しているオープンソース（※）のJavaScript/Ajaxフレームワークです。「フレームワーク？ ライブラリーなら聞いたことあるけど……」と首をかしげる人も多いかもしれません。「Prototype.js」や「jQuery」、「Yahoo UI Library」「MooTools」などの有名なJavaScript/Ajax“ライブラリー”に対して、Ext JSは“フレームワ
iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」:phpspot開発日誌
gauge.js (javascript programmable gauge) iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」 次のようなゲージを描画できるようです。 色はいろいろ選べてカラフルにすることも出来ます。colors指定で簡単指定 サイズも自由に調整可能なのでおき場所に困らないかも。(winth, height指定で直感的) Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+など殆どのメジャーブラウザで動作。 投票結果とか、サイトのアクセス解析の利用者比率なんかを表したりするのに使えそうですね。
ヨモツネット 実験室 » フォームに入力された全角文字を自動で半角に変換する
このスクリプトに機能を追加した valueconvertor.js を公開しています。アーカイブとしてこの記事は残してありますが、この replaceascii.js 機能をご利用する場合は、より安定している valueconvertor.js のご利用をおすすめします。 概要 フォーム入力時に『半角英数で入力してください』の項目があった場合、ユーザの入力ミスを少なくしてあげるために便利なスクリプトです。 ただし、JavaScript が使えない環境では動作しませんので、あくまでもオプションとしてお使いください。 動作確認用の DEMO ダウンロード 使い方 ダウンロードした replaceascii.js を XHTML ファイルの head 要素内などで読み込んでください。 このとき、replaceascii.js と読み込む XHTML ファイルの文字コードが同じになるようにしてくだ
MOONGIFT: » Googleファイナンスのグラフ風「Time Series Graph」:オープンソースを毎日紹介
横長のグラフを表示しようと思うと、細部が見づらくなったり、細かい横軸での変化が読み取りづらくなる。株式のグラフは特にそうだ。長い時間軸で見たい場合、短期で見たい場合、どちらも考えられる。 それをFlashを使ってうまく表示しているのがGoogle Financeで、さらにそれを真似たものがこれだ。 今回紹介するオープンソース・ソフトウェアはTime Series Graph、Google Financeのグラフ風ライブラリだ。 Time Series GraphはActionScript3を使って作られている。仕組みを簡単に言うと、上にグラフがあり、下に表示するスパンを指定する機能がつく。この下のスパンで表示する前後を指定すれば、その間のグラフが表示される仕組みだ。 折れ線グラフの他に、棒グラフの部分もあり、それらはマウスオーバーすると連動して表示が変わる。現状ではGoogle Finan
【ハウツー】ゼロからはじめるLightWindow 2.0 - Flashムービーも表示できるAjaxライブラリ (1) ゼロからはじめるLightWindow 2.0 - ムービーやPDFも表示できる多機能ライブラリ | パソコン | マイコミジ�
LightWindow 2.0とは? LightWindow 2.0はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じ種類のライブラリとしてはLightBoxやThickBox、GreyBoxなどがあります。その中でLightWindowは最も高機能なライブラリに位置しています。ページや画像だけでなくQuickTimeムービーやFlashムービー、PDFや他のサイト表示など非常に多くのデータをページ内に表示させることが可能です。 LightWindow 2.0はこのURLにあるページからダウンロードすることができます。 LightWindow 2.0公式サイト ページの一番下の方にある「lightwindow.zip(v2.0)」と書かれた文字をクリックするとダウンロードが行われます。 lightwindow.zip(v2.0)をクリックする ダウンロードされたファイ
MOONGIFT: HTMLから本文抽出「Extractcontent」:オープンソースを毎日紹介
ブログやサイト内の文字列を扱うサービスの中で、HTML中における本文を抽出するというのは重要な課題だ。ライブラリ化したものや、クローラとして提供されるものなど様々な形態が存在する。 そんな中、サイボウズの提供するサービス「パストラック」で利用されているその本文抽出モジュールはオープンソースとして公開されている。 今回紹介するオープンソース・ソフトウェアはExtractcontent、Rubyによる本文抽出モジュールだ。 Extractcontentは一つのRubyスクリプトからできている。読み込むだけで使えるので、Rails等に組み込むのも簡単だ。HTML全体を渡すと、タイトルと本文を同時に取り出してくれる。 パラメータは細かく存在し、それを変更する事で性能を変更できる。が、まずデフォルトのままで大丈夫だろう。 ライブラリだけで本文抽出ができるという手軽さが良い。ブログを使ったテキストサー
MOONGIFT: » Webサイトを手軽にクールに「GreyBox」:オープンソースを毎日紹介
最近のWebサイトでは画面遷移をなくし、Ajax化するのが好まれる。とは言え、既存のサービスに対して実装するのはそうそう単純ではない。それにAjaxを使った場合、PVの計測が難しく、メディア等では取り入れづらい。 だが、これを使えば簡単にそれっぽい実装ができそうだ。 今回紹介するオープンソース・ソフトウェアはGreyBox、Webページにも対応したCSSポップアップウィンドウだ。 GreyBoxは最近良く見かける、画像をクリックすると同じページ上でポップアップするライブラリになる。特徴的なのは、画像のみならずWebページでもポップアップしてくれる点だ。 既存のAタグに対して情報を埋め込めば、それだけでクリックすると背景をグレーアウトし、クールなポップアップを表示してくれる。これならばお問い合わせフォームや、詳細検索等のフォームでも使えそうだ。 大きさを指定したり、フルスクリーンでの表示もで
MOONGIFT: » セクシーなマークアップ言語「Texy」:オープンソースを毎日紹介
ブログ等ではWYSIWYGなテキストエディタがよく使われる。その場で見た目も分かりやすいHTMLが作れる反面、動作が重たく操作が面倒という欠点もある。 慣れてくると大抵、文章が定型化してくるので、テキストエリアに普通の入力ができるのが簡単になる。その際に便利なのがWikiのようなマークアップ言語だ。 今回紹介するオープンソース・ソフトウェアはTexy、XHTML Validなマークアップ言語だ。 TexyはWikiに似た記法を使ってXHTMLを出力するテキスト変換ライブラリで、それ単体というよりも他のソフトウェアに組み込んで使われる方が多い。 例えばb2evolution、WordPress、BLOG:CMS、Nucleus、lucidCMS、Drupal、Symfony向けのライブラリが存在している。処理自体は関数化されているので、自作のソフトウェアの組み込みやGeshi等の既存ライブラ
MOONGIFT: » XHTMLにも対応したWYSIWYGエディタ「Whizzywig」:オープンソースを毎日紹介
※ 画像は公式サイトデモより。 テキストエリアをHTMLオーサリングツール風にするソフトウェアは各種存在する。有名なものとしてはFCKEditorやSPAW Editor、Xinhaなどがある。 この手のソフトウェアの難点として、HTML構造は汚い事が多かった。XHTML Validなサイトを作っている場合はこれを使ってみる事をお勧めする。 今回紹介するフリーウェアはWhizzywig、Webベースのリッチテキストエディタだ。 Whizzywigは各種文字装飾をボタンを押すだけで簡単にできる。画像挿入（アップロードには未対応）、テーブル組もできる。日本語はまだだが、多言語対応も想定されている。 そして最大の特徴とも言えるのがXHTML Validなソースを作成できる点だろう。イメージタグも<img 〜 />のようになる。また、独自のCSSを認識させる事もできるので、見栄えと照らし合わせなが
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
JavaScriptで外部ライブラリを読み込むためのスクリプトをCodeRepos.orgに上げた。 - ヒルズで働く@robarioの技ログ
Sjaxを使わないJavaScript Loader - ヒルズで働く@robarioの技ログ と JavaScriptから外部JavaScriptを読み込む方法 - ヒルズで働く@robarioの技ログ の改良版です。この二つの記事は忘れてもらって結構です。 前振りとか ライブラリを読み込みたい（＞＜） 「script要素をappendChildする」でやると読み込み完了を待ってくれないので「setTimeoutで3000ms後に本処理」とか、嫌だ。 そこで「指定したプロパティが存在するか」を監視するスクリプトloader.js.incを書きました。http://coderepos.org/share/に置いてあります。 http://coderepos.org/share/browser/lang/javascript/misc/loader.js.inc http://coderep
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/prototype_portal_class
[JS]mootools.jsを使用した気持ちいい動きをする画像ギャラリー