OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。 そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介します。 OpenPlayerJSの使い方 利用例です。ツールはしばらく経つと非表示になります。 動画の速度を変更できます。 音楽だけの再生もできます。こちらもスピード変更が可能です。 OpenPlayerJSは動画再生前の広告再生にも対応しています。字幕表示などの機能はありません。YouTubeなどに比べるとシンプルですが、多くの場合これで十分でしょう。音楽のスピード変更機能は嬉しい人が多そうです。 OpenPlayerJSはTypeScript製のオープンソース・ソフトウェ
Canvas上のイメージを画像ファイルとして保存する方法 - JavaScript｜OAR CODE
Canvas上に描画したイメージを画像ファイルとして保存する方法についてです。 流れとしては、 CanvasからBase64データを取得 Base64データからBlobデータに変換 a要素を使ってファイルダウンロード という感じになります。 HTML <div style="width:300px;height:250px;"> <canvas id="myCanvas" width="300" height="250"></canvas> </div> <div> <button onclick="saveCanvas('png');">pngで保存</button> <button onclick="saveCanvas('jpeg');">jpegで保存</button> </div> JavaScript // canvas上のイメージを保存 function saveCanvas
eCards - 送ろう！Web上でeカード作成 MOONGIFT
誕生日やクリスマスなどに、西洋ではグリーティングカードを送ります。日本でも売られてはいますが、年賀状ほど有名ではないでしょう。そして、最近ではもっと手軽にeカードが使われるようになっています。 今回紹介するeCardsはWeb上でeカードを作成できるソフトウェアになります。 eCardsの使い方 メイン画面です。テーマから選んだり、自分で好きな画像を指定できます。 テーマを選んでみたところです。 日本語も使えますが、フォントが指定できません。 文字を傾けることもできます。 文字の縁取りなど、細かいカスタマイズもできます。 背景画像も変えてみました。 できあがった画像です。テキストに意味はありません。 eCardsを使うとプレゼンテーションのスライドを作るような感覚でeカードを作成できます。すべてWeb上で完結していて、画像の生成までWeb上でできています。Webブラウザさえあれば使えるのが
Konva - Canvas上で2Dを描くのに便利なライブラリ
HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。 今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。 Konvaの使い方 デモです。ルーレットが回転します。 回転している様子。 手書きができるデモ。 画像のサイズ変更。 ベジェ曲線。 絵合わせゲーム。 Konvaは描画するだけでなく、インタラクティブな操作にも対応しています。デスクトップはもちろん、モバイルブラウザにも使えます。レイヤーをサポートし、様々なシェイプをサポートしています。Canvasを使う際にはぜひKonvaと組み合わせてみてください。 KonvaはJavaScript製のオープンソース・ソフトウェア（MIT License）
「テクニックは語りません」竹洞先生に聞く、本気のWebパフォーマンス道
こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、html5j パフォーマンス部を運営していらっしゃる竹洞 陽一郎さんです。 ▲HTML5 Conference 2017セッション風景 （写真提供：html5j 撮影：刑部友康） 竹洞さんのセッション「テクニックではなく、今、本気で取り組むべきWebパフォーマンス」に関するスライド資料は、こちらで公開されています。 民法（債権法）が改正されて、何が変わる？ 白石: 民法（債権法）が改正された、ということに注目なさってるそうですね。 竹洞: はい、民法の
WebAssemblyはなぜ速いのか | POSTD
本記事はWebAssemblyに関するシリーズの第5回目で、今回のテーマはWebAssemblyが高速な理由です。前の記事をお読みでない方は、 初めから目を通される (訳注:原文リンク)ことをお勧めします。 前回の記事 (訳注:原文リンク)では、プログラミングに WebAssembly あるいはJavaScriptを使うかは二者択一の選択ではないことを説明しました。私たちは、WebAssemblyのみのコードベースを書く開発者が膨大な数になるとは思っていません。 ですので、アプリケーションにWebAssemblyとJavaScriptのどちらを使うか選ぶ必要はありません。しかし私たちとしては、開発者がJavaScriptコードの一部をWebAssemblyに置き換えることを期待しています。 例えば、Reactで開発しているチームは、リコンサイラコード（言い換えれば仮想DOM）をWebAss
Uppy - クラウドストレージも使える高機能なファイルアップローダー MOONGIFT
HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。 今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。 Uppyの使い方 利用しているところです。Google DriveやInstagram、Webカメラなどを入力ソースとして指定できます。 画像はプレビューも表示されます。 ファイル名を変更したりすることもできます。 Google Driveの場合は認証を行います。 ディレクトリを辿ってファイルを指定できます。 アップロードを開始しました。順番にファイルがアップロードされていきます。 すべてのファイルがアップロードされました。 UppyはGoogle DriveやDropbox、Instagramをデ
Ring UI - JetBrains製のUIコンポーネント集
Webアプリケーションを作る際に大事なのがUIです。Bootstrapのようなテーマもありますが、まだまだ足りない部品があることも多いでしょう。そうしたときに工夫すれば実装できるのか、または最初から用意されているのかで大きな違いがあります。 今回紹介するRing UIはJetBrains社製のUIフレームワークになります。 Ring UIの使い方 スクリーンショット多めで紹介します。まずはアラート。 ログイン。 アバター。 バッジ。 ボタン。 ボタングループ。 チェックボックス。 日付ピッカー。 エラーメッセージ。 フッター。 グリッド。 Markdown。 ページネーション。 タグリスト。 Ring UIでは他にも何十種類ものUIコンポーネントが公開されています。コンポーネントが多ければそれだけ実現できるUIが増え、全体の雰囲気も統一できます。雰囲気的には一般的なWebサイトはもちろん、
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ MOONGIFT
業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。 そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提供できます。 ag-Gridの使い方 デモです。大量のデータが表示されています。画像も表示できたり、レーティング表示なども行えます。 表示項目はチェックボックスで絞り込めます。 ソートだってできます。 さらにカラムの順番入れ替えも。 更新もできます。真偽値はチェックで表示されていました。 さらにカラーテーマの変更。 絞り込みもできます。 チェックボックスでデータを選択。 ag-Gridでは業務システム要件のあるあるを大抵カバーしていると思われます。大量のデータを表示してもさ
Contour - 多彩な種類に対応したWeb用グラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。 Contourの使い方 まずごく基本的な折れ線グラフ。 D3.jsと組み合わせた例。 曲線グラフ。 棒グラフ。 積み上げ型の棒グラフ。 横棒グラフ。 横でも積み上げ型。 エリアグラフ。 円グラフ、ドーナツグラフもあります。 シリーズ化した円グラフ。 散布図。 散布図＋トレンド。 地図。 アメリカの地図。 CS
SimcirJS - Webベースの電子回路シミュレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近IoTに注目が集まっています。自分でもセンサーやマイコンを買って試してみたという方もいるのではないでしょうか。しかしコンピュータ上のプログラミングとは異なり、簡単には動かないケースも多々あります。 それを解決するために一度はシミュレータで試してみてはいかがでしょう。SimcirJSを使えばWeb上で回路図を作成できます。 SimcirJSの使い方 使っているところです。ドラッグ&ドロップでパーツを配置して、線をつないでいきます。 こんな複雑な回路も作れます。 実際に動かすこともできます。 SimcirJSの面白いところは配置したパーツを実際に動かせることでしょう。すべてが実際のものそのままに動くという訳ではありませんが、回路図の設計を行う際にも役立つのではないでしょうか。 Si
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
第10回 HTML5で日報アプリを作る 実装編［2］ 画面のレイアウトを定義する
第9回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材に、HTML5の機能や開発ツールの使い方を解説しています。 Webアプリケーションは 画面の構造を定義する 画面のレイアウトを定義する 画面の操作や、処理を定義する から構成されます。実装編の2回目である今回は、「画面のレイアウトを定義する」を取り扱います。 前回の記事 第9回 HTML5で日報アプリを作る 実装編［1］ 画面の構造を定義する CSS3を使って画面のレイアウトを定義する 広義のHTML5では、CSS3といった今までのスタイルの定義にさらに機能が加わった、新しい仕様が追加されています。 CSS3では、角丸やグラデーション、アニメーションなどが画像やJavaScriptを使わずとも表現できるようになり、表現力が格段に向上しました。また、メディアクエリなどWebアプリケーションの
5分でわかるActiveReports帳票－HTML5ビューワ
本連載では、帳票コンポーネント「ActiveReports for .NET 9.0J」の新機能を使用して帳票アプリケーションを作成する方法を解説します。第4回の今回は、9.0Jで追加された新機能である「HTML5ビューワ」の使い方を紹介します。なお、HTML5ビューワはProfessional版のみの機能です。 備考 ActiveReportsを使用した帳票アプリケーションの基本的な作成方法については、これまでの連載記事も併せてご参照ください。特に、1つ前のバージョンである7.0J をもとに解説した2013年度版の記事は、9.0Jでもそのままご利用いただける内容となっています。また、2007／2008年度版の記事は3.0Jをもとに解説していますが、3.0Jのレポートと9.0Jのセクションレポートは名前空間や一部のAPIを除いて同じレポート形式であるため、セクションレポートの概念や基本的な
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
WebVN – WebGLを使ったHTML5ノベルゲームエンジン
日本ではノベルゲームが人気です。激しいアクションや難解なパズルがある訳ではなく、会話を糸口として選択していくことで目標を達成できるゲームになります。 そんなノベルゲームをWebブラウザ上で表示しよう言うのがWebVNです。中国語製ですが、完成度は高いようです。 WebVNnの使い方 デモゲームを紹介します。 全然読めませんがノベルゲームというのは分かります。 背景画像をアニメーションさせることもできます。 キャラクターを追加表示したり消したりできます。 WebVNはノベルゲームとしての基本機能は押さえられています。WebGLを使っているので高い表現力が実現できるのが特徴となっています。 WebVNはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 滤镜和过渡效果 surunzi/WebVN
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
Prandtl