HTML5の記事一覧プレミアムユーザー限定記事MOONGIFTプレミアムは、月額500円の有料サービスです。componentsは多くの可能性を持っています。componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。APIの実装を確認するHTML5によって多数のAPIが追加されています。それらはすべてのブラウザで使える訳ではなく、まだまだ実装に差異があります。Web上で可換図式を描くWebの表現力はCanvasやSVGによって大きく広がっています。それらを使いこなすにはプログラミングを駆使する必要があります。した数式を埋め込むダメにプログラミングを行うのは面倒です。そこで使ってみたいのが外部ライブラリです。弾幕ゲーム好きはトライ!シューティングゲームの中でも弾幕系はそれだけで別ジャンルと言えるほど激しいゲームです。ピクセル単位での細かい操作が求められ、ほんの少しのミスが命取りになります。そんな弾幕系シューティングゲームをWeb上で実現してくれるのがwast-gameになります。wast-gameの使い方実際に遊んでいるところです。GitHub風グラフもあるSVGグラフライブラリWebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。ChartsはSVGを使ってグラフ表示を行うライブラリです。Chartsの使い方棒グラフ。Rustで作られたスネークゲームゲームというのは作っている方も楽しく、遊ぶのも楽しいと学習素材として最適です。こだわったキャラクターゲームではなく、ルールがシンプルですぐに遊べるものが良いでしょう。Wasmを紹介します。コーディングレスでゲームを作るプラットフォームゲームを作ってみたいという考えつつも、プログラミングが敷居になってしまっている人は多いでしょう。Webシステムを作ったりするプログラミングとはまた異なる知識が必要です。Unityでさえ、本格的に作ろうと思うとプログラミングの知識が必要になります。デスクトップとスマートフォン両方対応のシューティングゲームHTML5の表現力、JavaScriptの性能向上があり、Webブラウザでも十分なゲームが作れるようになっています。Webベースであれば、デスクトップはもちろん、スマートフォンでも遊べます。DESTROYを紹介します。シンプルな操作で楽しめるはずです。音楽は耳で楽しむものですが、ミュージックビデオのように目でも楽しめます。ビジュアライザーのように格好良く可視化されていたり、アルバムアートなどが表示されることでさらに魅力的になります。そんなミュージックビデオを自動生成してくれるのがmusicvideo-generatorです。マウスカーソルに合わせてDOMを変形WebはJavaScriptを活用することでインタラクティブな効果が実現できます。ユーザにとってみれば、自分の起こしたアクションに対して反応があるのは嬉しいことです。ユーザ体験という意味でも見逃せません。今回はユーザのマウス操作を追従してくれるFollowCursorを紹介します。Webカメラの映像をスライスして描画Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。色やサイズについてもっとこだわりたいと考えることもあるでしょう。実に170を超えるデザイン要素を提供しています。Webベースの抽選マシーンみんな大好き抽選会。何かいいものが当たらないかとわくわくしながら待っていることでしょう。主催者側にとっては、そのワクワク感をさらに盛り上げるための工夫が必要になります。今回はLotteryを紹介します。見た目の演出も楽しい、抽選マシーンです。Lotteryの使い方実際に動いているところです。HTML5のドラッグ&ドロップを多機能にHTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。Web上のコンテンツエディタ/コメントシステムWeb上にコンテンツを公開し、それに対して指摘が欲しいと思った時にはチャットなどを使うでしょう。できればWeb上でそのままコンテンツに書き込みができると便利です。それを可能にするのがdokieliです。コンテンツの編集やコメントに加えて様々な機能が備わっています。dokieliの使い方デモです。自由度の高いレイアウト変更ライブラリ業務システムなどでは情報をいかに分かりやすい整理できるかが作業効率化の肝になります。担当する業務であったり、作業によって必要な幅は違ったりします。した時にユーザ毎に好きな配置に変更できる仕組みは便利です。クロスドメインで使えるlocalStorageHTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう(特にサブドメイン)。そこで使ってみたいのがCrossStorageです。多数のグラフに対応したラッパーライブラリWebシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。グラフやチャートになるとコード量も増えがちです。そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。Audioがあります。その名の通り、Web上で音楽を奏でるためのAPIですが、利用が難しいものとなっています。使いこなすと凄いソフトウェアができます。JetBrains製のUIコンポーネント集Webアプリケーションを作る際に大事なのがUIです。Bootstrapのようなテーマもありますが、まだまだ足りない部品があることも多いでしょう。したときに工夫すれば実装できるのか、または最初から用意されているのかで大きな違いがあります。${article.post_date_view}${article.post_title}${article.except_content}プレミアムでしか読めない記事が733あります。blockworks。