静的なサイトにも使えるコメントシステム·talkatv MOONGIFT
talkatvは任意のWebサイトにコメント機能を提供するソフトウェアです。 Webサイトを作る場合、データベースを必要とするケースが増えています。しかし工夫すれば静的なHTMLの中に動的な部分を組み込むことだって難しくありません。もしコメント機能が欲しければtalkatvを使ってみましょう。 埋め込んだ例です。右側にあるのがtalkatvです。 ログインするとコメント入力欄が出ます。 コメントしました。日本語が使えます。 返信をするとインデントされていきます。 talkatvはログイン必須のコメントシステムを動的に提供します。ログインはID/パスワードの他、OpenIDを使うことも可能です。コメントは一番上に追加され、返信するとインデントされてスレッドとして管理されます。コメントは何段にも返信できます。 talkatvはPython製のオープンソース・ソフトウェア（GNU Affero
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
IE6から使えるHTML5/JavaScriptによるグラフライブラリ·envision MOONGIFT
envisionはHTML5/JavaScriptによるグラフライブラリです。ファイナンス系グラフ、フラクタルグラフを描けます。 HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウスで幅を広げたりできます。 ファイナンス。株価、出来高といった指標を表示するのに使えます。 こちらも幅を変更できます。 中央をドラッグすれば左右への移動も可能です。 マウスでポイントにおける数値を表示できます。Ajaxによるデータ変更もサポートしています。 幅の変更ももちろん可能です。 フラクタル画像です。 マウスで範囲を指定して拡大できます。 envisionはHTML5のラ
これからHTML5をはじめるならぜひ読みたい·Dive Into HTML5 MOONGIFT
Dive Into HTML5はHTML5の何たるかを著したオンラインブックです。 これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読みやすいです。 アクションのデモと、そのWebブラウザごとのサポート状況についても書かれています。 位置情報系のデモを試すと実際に有効にするかどうかの確認が出ます。 Dive Into HTML5は章ごとに分かれているので、自分の気になる部分だけを読んでも良いでしょう。ダウンロードしてオフラインでも読んでみたい便利なコンテンツです。 Dive Into HTML5はHTML5製のオープンソース・ソフトウェア（Creati
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
Canvasを使ったオンラインイラストソフトウェア·RoCanvas MOONGIFT
RoCanvasはHTML5/JavaScriptで作られたCanvas上で自由にイラストを描けるソフトウェアです。 RoCanvasはHTML5で作られたドローソフトウェアです。簡単なイラストを描いて、みんなで共有したりするのにぴったりと言えそうです。 最初の画面です。色、サイズ、書き方を選択できます。 赤の自由線です。 四角を書いてみました。中を全て塗りつぶしたもの、枠線だけの二つが選べます。 色を変えることもできます。 保存しておくことができます。サーバに画像データがポストされるとのことです。RoCanvas自体にはサーバサイドの仕組みは実装されていません。 RoCanvasは色やサイズ、線または四角から選んで自由にCanvas上に絵を描けます。その結果はサーバ上に保存されるので共有するのにも使えるでしょう。 RoCanvasはHTML5/JavaScript製のオープンソース・ソフ
ついにきた。Webブラウザにテキストエディタを内蔵·Skyedit MOONGIFT
SkyeditはFirefoxアドオンとして動作するテキストエディタです。 Google ChromeやFirefoxではhttp://の前にview-source:とつけるとHTMLソースが表示されます。同様にeditをつけるとWebブラウザ上で動作するテキストエディタが立ち上がるのがSkyeditです。 インストールします。今のところGitHubからのダウンロードのみです。 インストールしました。 edit:〜でファイルを開きます。今はローカルファイルのみ対応です。 こんな感じに編集していきます。日本語を打つとその後の入力がおかしくなってしまいました。 コマンドもあります。 ヘルプでコマンド一覧が出ます。 テキストエディタとしてのレベルはまだまだ高くありませんが、コマンドが使えてハイライターも備わっているので安定してくれば十分使えるレベルになるでしょう。なお今のところローカルファイルの
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
静的なHTMLだってコメントシステムが持てる。Discus風コメントシステム·Juvia MOONGIFT
JuviaはDiscusライクに埋め込み型コメントシステムを提供するソフトウェアです。 静的なHTMLに対しても埋め込めるコメントシステムとしてDiscusなどが知られていますが、同様のシステムをオープンソースで提供するのがJuviaです。 まずログインが求められます。 ログインしました。ここはダッシュボードになります。 サイトごとにキーが発行されます。 既につけられているコメントの一覧です。スパム判定や編集ができます。 実際のコメント例です。下に表示されているコメントはJuviaから動的に取り込んだものです。 コメントフォームもあります。 Markdown対応でプレビュー機能もあります。 日本語は残念ながら文字化けしてしまいました（文字コードの問題と思われます）。 新しいサイトを定義する画面です。 生成されたJavaScriptを埋め込むだけでコメント機能が持てます。 Juviaを使えば
リアルタイム描画に対応したJavaScriptテンプレートエンジン·Tmpltr MOONGIFT
TmpltrはHTML/JSON/CSSを組み合わせたJavaScriptのテンプレートエンジンです。 Webアプリケーションを作る際にテンプレートエンジンとしてチェックしたいのがTmpltrです。HTMLだけでなく、スタイルシートにも考慮されているのが特徴です。 左上がJSON、中央がHTMLテンプレート、下がCSSになります。それらを組み合わせた結果が右側の表示になります。 フッターです。{{#fotter}}〜{{/footer}}といった区切りを設けています。 スタイルや構造を変更すればリアルタイムに右側のコンテンツが変更されます。 スタイルの内容はheaderタグの中にstyleとして出力されています。 Tmpltrは単純な文字列出力の他、配列やハッシュでの表示にも対応しています。元データの内容が書き変わると同時にレンダリング結果がリアルタイムに修正されるのが特徴です。 Tmpl
HTML5のパワー。Webベースでファイルシステムを構築する·Filer.js MOONGIFT
Filer.jsはHTML5のファイルシステムAPIを体感するWebアプリケーションです。 HTML5のAPIの一つ、ファイルシステムAPIを体験できるのがFiler.jsです。新しいWebの可能性を存分に知ることができます。 デモです。まずディレクトリをインポートします。 インポートしました。ディレクトリはマウスでたどれます。 アイコンまたはリスト表示をサポートしています。 画像やHTMLであればプレビューができます。通常のファイルはプレビューできませんがダウンロードはできます。 リスト表示です。 ログを表示しています。 Filer.jsではWebブラウザ上でディレクトリやファイルを作成することもできます。しかし実際のファイルシステム側には影響されませんのでご注意ください。また新しいフォルダやファイルをローカルに作っても反映されないようです。 Filer.jsはHTML5/JavaScr
すげえ！FlashLite1.1を解析してHTML5に変換·FlashForward MOONGIFT
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター·JS Bin MOONGIFT
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
Smartyの記法が使えるJavaScriptのテンプレートエンジン·jSmart MOONGIFT
jSmartはSmartyの記法を取り込んだJavaScriptのHTMLレンダリングエンジンです。 Webアプリケーションが増えていくにつれてニーズが上がっているのがJavaScriptのHTMLレンダリングエンジンです。今回紹介するjSmartはSmartyにインスパイアされた、有力なテンプレートエンジンになります。 サンプルです。HTMLが書かれています（当たり前ですが）。 コードです。こちらはテンプレート側、Smarty的な定義や書き方が使えます。 こちらはデータ型。JSONファイルで定義されているのみです。 jSmartを見て分かる通り、テンプレートとデータをミックスして表示しているだけです。データはJSONで定義した後、jSmartのオブジェクトに渡しているだけとなります。これだけシンプルな仕組みであれば、利用は簡単かもしれません。 jSmartはJavaScript製のオープ
Webブラウザ上でデモをする際に。HTML5/JavaScriptコードをその場で実行·CoderDeck MOONGIFT
CoderDeckはWebスライドツールに組み込んで使えるソフトウェアで、表示しているコードをそのまま実行して結果を確認できるJavaScriptライブラリです。 プログラマーの技術系プレゼンテーションにおいてコードのデモを見せて、その実行結果もその場で実演する時があります。そんな時、もし実行言語がHTML5/JavaScriptであれば試してみてもらいたいのがCoderDeckです。 左側に書いてあるのは単純なHTML5のコードです。 Runボタンを押すと書かれている内容がそのままコードとして実行されて右側に表示されます。 種明かしをすると、左側に書かれているテキストエリアの内容がiframeタグの中に展開されて表示するという仕組みです。 テキストエリアの内容を書き換えて再度Runボタンを押すと実行結果も変わります。リンクを一つMOONGIFTに変えたのが分かるでしょうか。 仕組みはとて
Webとネイティブのいいとこどり。HTML5をラッピングしたAndroidアプリの参考に·html5webview MOONGIFT
html5webviewはHTML5を積極的に取り入れたAndroidアプリを作るサンプルです。 スマートフォンはHTML5を積極的に使っていくのに最適なデバイスとなっています。HTML5を積極活用すればネイティブアプリ並のWebアプリケーションも実現できます。そんなHTML5型Androidアプリを作ってみるなら参考にしたいのがhtml5webviewです。 デフォルトでは有効になっていないAndroidのHTML5機能について、html5webviewでは有効にしながら実際に使ってみるデモアプリも提供しています。 デモアプリをインストールしてみます。 デモは動画（videoタグ）音楽（audioタグ）、位置情報、ストレージ、縦書きとなっています。 audioタグのデモ。ボリューム調整、再生、停止ができます。 videoのデモ。Canvasタグを使ってキャプチャを撮れます。 下に表示され
注目！Flash CS風のUIでHTML5のタイムラインアニメーション作成·Radi MOONGIFT
RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア（β版中につき無料）。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で
新しい時代の幕開けか。クラウド向けWebアプリケーション開発用プログラミング言語·Opa MOONGIFT
Opaはクラウド向けWebアプリケーション開発に特化したプログラミング言語。 Opaはオープンソースのプログラミング言語。世の中には幾つのプログラミング言語があるだろうか。最近だと人気なのはJavaScriptだろう。10年くらい前から言えば、Web向けのプログラミング言語であるPHPがシェアを一気に高めた。 デモのチャット しかし常に人気が高い状態が続く訳ではない。栄枯盛衰、時代は常に変わらなければならない。今回紹介するのはWebアプリケーション開発用プログラミング言語として登場したOpaだ。 OpaはPHPと同じくWeb向けに特化したプログラミング言語だ。主に3つの特徴があり、シンプル、セキュアそしてスケーラブルだ。HTMLタグとOpaの変数とを区別せずに書けてしまう。コールバックを使って書くのでJavaScriptにも似ている。書きやすそうな印象を受ける。 イメージギャラリー セキュ
拡張可能。プログラマー向けのHTMLプレゼンテーションツール·deck.js MOONGIFT
deck.jsはテーマ対応、拡張に対応したHTMLスライドツール。 deck.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTMLを使ったスライド作成ツールも多数出回ってきた。そうしたソフトウェアを使うと、テキストエディタでどんどんスライドを作っておいて、見栄えのいいプレゼンテーションが行えるようになる。 上下でスライド切り替えも しかし与えられたものをそのまま使っていても面白くはない。自分で拡張したり、操作ができたりするともっと面白いはずだ。それを実現できるスライドライブラリがdeck.jsだ。 deck.jsはHTMLスライドツールとしてみればそれほど特別ではない。矢印キーによるスライド切り替え、テーマ対応、スライド切り替えを左右または上下、フェードアウトといったアクションから選べると言った具合だ。また項目を順番に表示していく機能もある。 テーマを変更した例
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
