html5j.org
html5jについて html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。私たちは、日本のWebクリエイター・エンジニアのスキル向上をお手伝いして、日本が世界のWebシーンをリードするような存在になることを心より願っています。 html5jの活動 html5jはWebクリエイター・エンジニアの皆さんに対し、「つながる」「学べる」「盛り上がる」を合言葉とし、以下の活動を行なっています。 html5jメーリングリスト Web開発に関する話題について質問したり、共有したりするためのメーリングリストです。また、勉強会の告知なども行なっています。 html5jメーリングリストに参加する （Googleグループに移動） 投稿ルール HTML5などの技術やWeb開発に関する話題であれば、どんな内容でも構いません。
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
HTML 5での<section>要素と<article>要素の違い。
平成22年 3月11日 公開 テーマ HTML 5 HTML 5に於ける<section>要素と<article>要素の違いと使い分け方について。 <section>要素の位置付け。 HTML 5で導入される<section>要素は一般的なセクションです。 但し、HTML 5の仕様案では、他のセクショニング内容要素に該当しないセクションのみを<section>要素としてマークアップすべきであるとしております。 他のセクショニング内容要素とは、以下の三つです。 <article>要素 独立した記事のセクション。 <nav>要素 ナヴィゲータリンクのセクション。 <aside>要素 本文との関連が薄いセクション(注釈や余談など)。 <article>要素とは。 HTML 5で導入される<article>要素とは、独立した記事のセクションです。 ウェブログやニュースサイトなら、複数の記事が一本の
HP製のJavaScriptフレームワーク·Enyo MOONGIFT
EnyoはHPがリリースしたWebアプリケーションフレームワークです。モバイル、デスクトップ双方で動作します。 EnyoはHPがwebOSのオープンソース化ロードマップとともに発表されたHTML5のWebアプリケーションフレームワークになります。特にスマートフォンに適したオブジェクト指向のフレームワークになります。 サンプルです。左側がコード、右側がその実行結果です。 ボタンを押すとテキストが追加されます。 同様に色が変わるサンプルです。 消したり表示したりします。 ボタンを追加していくサンプルです。 Flickr画像検索&ビューワーのデモです。 こちらはYouTubeの検索&ビューワーです。 ボールが落下するデモです。 WebKitに最適化されたモックです。 頭文字ごとにグループ化されたリストです。 ボタンです。 日付ピッカーです。 サンプルゲームです。同じ動物を縦横に3つ並べると消えま
【第24回 HTML5とか勉強会レポート】 108もあるぞ！ HTML5の要素数（1/1） - ＠IT
【第24回 HTML5とか勉強会レポート】 108もあるぞ！ HTML5の要素数：D89クリップ（36） 現在、HTML5の要素数は108ある。その中から、注目のAPI、FileSystem API、Web Audio API、Geolocation APIができることをチェックしよう！ FileSystem API、Web Audio API、Geolocation API 2011年12月26日、ソフトバンクモバイルで「第24回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会です。今回は特定のテーマに沿った形式ではなくオムニバス形式で、主にエンジニア向けのセッションでした。 セッションではいくつかのサンプルが紹介されました。サンプルの動作確認はGoogle Chrome 16で行っています。Google
管理画面からはじめるHTML5対応·HTML5 ADMIN MOONGIFT
HTML5 ADMINはHTML5で作られた管理画面用テンプレートです。 格好いい管理者専用のWebページが作ってみたいならばお勧めしたいのがHTML5 ADMINです。 デモの画面です。シンプルで分かりやすい画面構成になっています。 ツリービューを広げた場合です。 レイアウトは柔軟に設定されています。 アコーディオンやタブ、シャドーも用意されています。 ダイアログです。 アイコン、スライダー、カレンダー、プログレスバーもあります。 テーブル表示です。 プロフィール的な表示にも対応しています。 メッセージ表示も考慮されています。 フォームのサンプルもあります。 細かな部分にも気を配られたデザインです。 HTML5 ADMINはjQuery、jQuery UIを使っており、無限の階層メニュー、追加ナビゲーションなどの機能があります。 HTML5 ADMINはHTML5/JavaScriptを
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
Webブラウザ上でデモをする際に。HTML5/JavaScriptコードをその場で実行·CoderDeck MOONGIFT
CoderDeckはWebスライドツールに組み込んで使えるソフトウェアで、表示しているコードをそのまま実行して結果を確認できるJavaScriptライブラリです。 プログラマーの技術系プレゼンテーションにおいてコードのデモを見せて、その実行結果もその場で実演する時があります。そんな時、もし実行言語がHTML5/JavaScriptであれば試してみてもらいたいのがCoderDeckです。 左側に書いてあるのは単純なHTML5のコードです。 Runボタンを押すと書かれている内容がそのままコードとして実行されて右側に表示されます。 種明かしをすると、左側に書かれているテキストエリアの内容がiframeタグの中に展開されて表示するという仕組みです。 テキストエリアの内容を書き換えて再度Runボタンを押すと実行結果も変わります。リンクを一つMOONGIFTに変えたのが分かるでしょうか。 仕組みはとて
HTML5でゲーム開発をはじめたい人は注目·HTML5 Game Dev MOONGIFT
HTML5 Game DevはHTML5でゲームを開発し、そのノウハウを蓄積するプロジェクト。 HTML5 Game DevはHTML5/JavaScript製のオープンソース・ソフトウェア。iOS/Androidにはじまり、モバイル向けのゲーム開発が熱い。とは言え、Web開発で培ってきたナレッジがそのままゲームに活かせる訳ではない。画面遷移やオブジェクトの管理、レンダリングなどが全く異なっている。 ブラウザのレース もしゲーム開発をしたいと思うならば、これまでの知識を一旦リセットして改めて学び直すくらいの意識が必要だ。もちろんそれは容易なことではないだろう。だが仲間と一緒ならばできるかも知れない。そのためのプロジェクトがHTML5 Game Devだ。 HTML5 Game DevはHTML5を駆使してゲーム開発を行うプロジェクトだ。その中でノウハウを蓄積し、整理していくことを目的として
多彩なウィジェットで高品質なWebアプリケーションを素早く構築·Kendo UI MOONGIFT
Kendo UIはデスクトップやスマートフォン、タブレットに対応したUIフレームワーク。 Kendo UIはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア。WebのUIは表現力がとても高く、自由度が高い。それは良いことでもあるし、悪いことでもある。束縛が何もないために自由に発想できる反面、デザインする才能がないと情報が散らばってしまってどうにもならなくなる。 デモアプリ それを解決するにはまずウィジェットの概念を取り入れていくことだ。そうした部品を適切に配置していくことで画面をパズルのように作り上げていく。デスクトップからスマートフォン、タブレットまで広く使えるUIコンポーネントがKendo UIだ。 Kendo UIのKendoは剣道から来ているようだ。Kendo UIはとても対応範囲の広いソフトウェアで、実に数多くのウィジェットに加えて、Webアプリケーショ
メソッドチェーンを使えばWeb SQL Databaseも簡単に·mchain MOONGIFT
mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。 mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待しているのがWeb SQL Databaseだ。Webブラウザ内でRDBMSが利用できる技術だ。 デモのTodoアプリ これをうまく使えば、最初に必要なデータをダウンロードして後はクライアントサイドだけで加工して完了したらアップしてもらうような仕組みが作れるようになる。そんな面白い技術を手軽に扱えるようにするJavaScriptライブラリがmchainだ。 mchainは基本的にWeb SQL Database APIをmchainでラッピングしているだけで使い方は変わらない
ASSIOMA(アショーマ) » HTML5が新しいWebの世界を創る
最近テック系のブログやニュースなどでHTML5を取り上げられることが多くなり、目にされた方も多いと思います。人気ブログの「Techwave」でも以下のような記事でHTML5に言及しており、その注目の高さが伺えます。 ソーシャルの次の時代、「フリーミアム」が終わり「コンテンツがキング」になる Appleを脅かすFacebookの「プロジェクト・スパルタン」とは 日本のソーシャルゲームに追い風、日本はスマホソーシャルゲーム市場で世界を獲れる！ これらの記事の中で、HTML5をベースにしたWebアプリの可能性が非常に高く評価されており、今後のモバイルアプリの主流がネイティブアプリからWebアプリに移行すると予想されています。 そこで今回はこのHTML5およびWebアプリについて取り上げ、その可能性を探ってみたいと思います。 ■ HTML5とは 最初にHTML5とはどういうものなのか簡単に説明した
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
JavaScriptを使ってCanvasタグにUMLを描画·UmlCanvas MOONGIFT
UmlCanvasはCanvasタグを使ってUMLモデルを描画するJavaScriptライブラリ。 UmlCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア。2000年頃にもてはやされたUML。オフショア開発やエンタープライズでの開発では今も使われていると思うが、小規模なプロジェクトまではなかなか普及しなかった。 リレーション 作成するのに専用のツールが必要であったり、システム開発の変更が多くてせっかく作成しても修正が多かったといった問題もあった。だが専用のツールを用いず、誰でも手軽に見られるならばまだ使われる場面はあるのではないだろうか。それをかいま見せるのがUmlCanvasだ。 UmlCanvasはその名の通りUMLをCanvas上に描画するソフトウェアだ。使えるのは主にクラス図で、状態遷移図にも対応している。クラスを定義していけば線は自動的に引かれるが、
ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
そろそろ実用レベル。Webベース、HTML5製のマインドマップ·mindmaps MOONGIFT
mindmapsはHTML5で作られたマインドマップソフトウェア。ドラッグでのノード移動、カラー変更に対応。 mindmapsはHTML5/JavaScript製のオープンソース・ソフトウェア。色々な情報が飛び込んできて、なかなか考えがまとまらない時にお勧めなのがマインドマップだ。情報をカテゴリに基づいて分類していけば、頭の中がすっきりして別なアイディアが湧いたり、広がっていくだろう。 作成画面 マインドマップと言えばFreeMindが最も有名かもしれない。だが時代はWebアプリケーション化が進んでいるのだ。そんな中注目したいのがHTML5製のマインドマップ、mindmapsだ。 mindmapsは中央にノードがある状態からはじまるマインドマップでTabキーを押すと子ノードが作成される。兄弟ノードを作成するには一旦親ノードに戻って再度タブを押す必要があるようだ。ノード同士をつなぐ線は自動的
タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI - かちびと.net
HTML5製のWebサイト向けUI専用の フレームワーク・Kendo UIのご紹介。 iPhoneなどのスマートフォンや、iPad などタブレットデバイスにも対応したWeb サイトのUI設計用に作られたようです。 使いやすいかどうかはおいておいて、 ちょっと見かけないのでメモ。 Kendo UIはHTML5とcss3、JavaScriptで構築されたWebサイト向けのUIフレームワークです。メニューやテーブル、タブ、ドラッグ&ドロップコンテンツなどよく見かけるインターフェースがセットになっていますよ。 @ub_pnrのPostで知りました。いい情報流してくれるので助かります。 スマートフォンやタブレットにもいいですね。以前Ninja UIなんてありましたけど、今度は剣道です。なんでも「HTML開発者の刀として使って欲しい」のだとか。煎茶（Sencha）とか相撲（Sumo）とか同様、なんだか
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
まずは見た目で。HTML5製の上品なプレゼンテーション·Landslide MOONGIFT
LandslideはテキストファイルをHTMLベースのプレゼンテーションに変換するソフトウェア。 LandslideはPython/HTML5製のオープンソース・ソフトウェア。最近はHTMLによるプレゼンテーション作成も見られるようになってきた。HTMLの方が表現力が高く、デザインの自由度もあるために格好いいものが多い。画一的なプレゼンテーションは飽きてしまう。 スライド だが皆が使い始めると、より人と違ったものを使いたくなるのが常だろう。そこで新しいHTMLプレゼンテーションであるLandslideを紹介しよう。HTML5を使ったクールなプレゼンテーションが実現する。 Landslideは前後のスライドが左右に表示されるタイプのプレゼンテーションだ。ドキュメントはMarkdownまたはReStructuredTextで記述して、それをLandslideコマンドで変換する。さらにPDFへの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
