reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
D3 + Leaflet
This is a quick demonstration of using D3 to render GeoJSON shapes in conjunction with Leaflet. The implementation is straightforward, but Leaflet is regretfully missing documentation and examples for custom overlays, [EDIT: the documentation has since been updated and there is now a helpful section titled “Implementing Custom Layers”] so hopefully this will help you get started. #Initializing the
Googleマップ上に任意の画像を表示·GMap-JSlicer MOONGIFT
GMap-JSlicerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Googleマップはみんな、普段から使っているでしょう。技術的に見てもズーム、移動など便利なものが多いです。自分でもあのUIを実現したいと思っている人も多いのではないでしょうか。そんな方に使ってみて欲しいのがGMap-JSlicerです。 デモ。GoogleマップのUIに任意の画像を載せています。 移動、ズームは自由にできます。 全体像。 GMap-JSlicerでは画像をタイル状に並べる訳ではなく、一枚の画像をGoogleマップ上に貼付ける形になっています。とは言えゲームのマップのようなPNG画像で表現できるものであればそれほどサイズは大きくならないのではないでしょうか。 MOONGIFTはこう見る Googleマップの面白い点は情報源としてはもちろんのこと、埋め込み型のAPI
new2JS
New to JS? Welcome. This area keeps a record of what you do and also shows you the things that your javascript program displays. You can page through the tutorial and write javascript programs on the left hand side.
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
速度やサイズ、形状もカスタマイズ可能なローディングアイコン·jquery.cssloading.js MOONGIFT
jquery.cssloading.jsはCSS3/Canvasを使ってローディングアイコンを生成するライブラリです。 Ajaxなどを使っていると必ず欲しいのがローディングアイコンです。一つであれば画像でもいいかも知れませんが、背景色や大きさなどが複数考えられる場合もあります。そんな時にはjquery.cssloading.jsを使ってみましょう。 サークルを描く一般的なパターン。 背景が黒、左から右に流れていくパターン。 四角もあります。色やスピードはオプションで指定可能です。 縦に落ちていく四角のパターン。 枠を描くパターン。 こちらは複雑で、回転するごとに四角が小さくなっていきます。 アニメーションの形は円、または線、四角が選べます。色やサイズ、回転速度は自由に指定が可能です。CSS3を用いており、Canvasに対応している必要があります。主にiOSやAndroidでの利用が想定され
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた
【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>location sample</title> <script type="text/javascript"> <!-- function init() { // 位置情報の取得 navigator.geolocation.getCurrentPosition(success, failed); } function success(position) { alert('今の位置は、緯度:' + position.coords.latitude + '、軽度:' + position.coords.longitude + 'だよ！'); } fun
Google製JavaScript最適化ツール·Closure Compiler MOONGIFT
Closure CompilerはJava製のオープンソース・ソフトウェア。Googleでは言わずもがな、コンマ数秒単位の速度にこだわって開発が行われている。速さのためにWebブラウザ自体やOSまで開発してしまうのだから、そのこだわりの強さが感じられるだろう。 CUI版 JavaScriptは開発の方法によって実行速度や読み込み速度が大きく変わってくる。そのためのチェックと最適化処理を行ってくれるのがClosure Compilerだ。Closure CompilerはJavaで作られたソフトウェアで、CUIベースで利用する。 基本的な使い方はJavaScriptファイルを引数で渡し、その出力先を指定することで最適化処理を行ったファイルを生成する。最適化処理は空白を消すのみ、シンプル、アドバンスと3段階から選べるようになっている。さらにエラーチェックも同時に行われ、Warningまたはエラ
YUI Compressorで簡単にjavascriptとCSSを圧縮 - Affamative Way
2015/04/20 追記 https://github.com/mishoo/UglifyJS 2012/02/11 追記 なんか変なまとめの影響でブクマが増えとる。。これ、2008年の記事だぞ。。 YUI Compresserも良いツールだけど最近だったらこの辺の方がいいよ。 http://dean.edwards.name/packer/ http://code.google.com/intl/ja/closure/compiler/ なぜコードの圧縮が有効か？ Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス 要するに、Webサイトをより速くするための鍵は、フロントエンドのパフォーマンスを改善することにあるということです。 まず最初にやるべきな
appMobi社製。チェック必須のスマートフォン向けjQuery·jQ.Mobi MOONGIFT
jQ.MobiはjQueryをスマートフォン、HTML5に最適化・リライトしたJavaScriptライブラリです。 jQ.MobiはappMobi社の開発したHTML5をターゲットとしたスマートフォン向けJavaScriptフレームワークです。 黒を基調にした格好いいUIです。 jQueryをリライトして作られておりAPIは似ています。 フォーム系も格好いいです。 プラグインにも対応しています。 セレクタもこんな感じに書けます。jQueryで慣れた人なら問題なさそうです。 Ajaxも用意されています。 jQueryライクです。bindも使えます。 スマートフォンやiPadなどを判別する機能もあります。 デモ動画です。 jQ.MobiはjQueryの肥大化に対して開発されたようで、HTML5のみ対応ながら軽量でスマートフォン向け独自の機能を備えたライブラリとなっています。ベンチマークもありま
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
2万5千行のpull requestが話題
プログラマにとって欠かせないコミュニティになったgithubで話題になっているpull requestがありました。話題になっているのは正しい仕事の為の正しいツールという触れ込みのJavaScriptフレームワーク集「EveryJS」のリポジトリでそこに送られて来たプルリクエストの差分の量が驚きの426行追加、24623行削除。不必要にJavaScriptを使って表示を行っている部分をhtmlに変える事で動作の速度を向上させる狙いのようです。 またこのEveryJS.comの日本語の情報が無かったので掲載されているライブラリの全32個のリストも紹介しておきます。このリストもなかなか有用そうですしEveryJS.comをブックマークしてみようと思います。 Backbone.js イベントとKVSを結ぶ構造を提供 Benchmark.js 高解像度タイマ対応のベンチマーク Cappuccino
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
MathJax Sublime Text Markdown
Consultancy MathJax is highly flexible and can be tailored to the needs of your institution by creating customized configurations and specialized software workflows. Content Transformation MathJax can help you with the conversion of math documents from legacy sources and print content as well as with the generation of novel content that is online ready and fully accessible for readers with special
CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。 CSSやJavaScriptを連結＆圧縮 それを解決する手段として、サイズの縮小や複数のファイルをまとめてしまうという方法がある。それを自動化してくれるのがMinifyだ。 今回紹介するオープンソース・ソフトウェアはMinify、JavaScript/CSSの連結、圧縮ソフトウェアだ。 MinifyはPHPで作られており、Webベースで動作する。Minifyにファイルのパスを渡すことで余計な改行や空白を圧縮してサイズを小さくしてくれる。そして複数のファイルを渡すことで連結してくれる機能もある。 生成されたファイル 作成するのは同一ドメイン内のファイルに限られる。また、グ
Webサイトに使える。時系列に沿ったデータのビジュアル化·TimelineSetter MOONGIFT
TimelineSetterはシンプルなタイムライン（年表）表示ライブラリ。 TimelineSetterはJavaScript/Ruby製のオープンソース・ソフトウェア。データの見せ方はデータの持つ内容によって変えなければならない。それが時間データを持っているならば、それに合わせて表示を考えるべきだろう。 デモ 時間とデータをバランスよく表示できるのはタイムライン（年表）だ。グラフィカルでセンスのいいタイムラインを提供したいならばTimelineSetterを導入するといいだろう。 TimelineSetterは時間の両端が決まっている中でデータをビジュアル化するライブラリだ。データがある場所は縦のラインが入る。ソースによって色を変えることが可能で、チェックボックスで表示/非表示を切り替えられるようになっている。さらに拡大/縮小表示も可能だ。 Twitterの表示 そして縦棒の所をクリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using the command line
Titanium Mobileで作る！ iPhone／Androidアプリ 記事一覧 | gihyo.jp
