OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。 そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介します。 OpenPlayerJSの使い方 利用例です。ツールはしばらく経つと非表示になります。 動画の速度を変更できます。 音楽だけの再生もできます。こちらもスピード変更が可能です。 OpenPlayerJSは動画再生前の広告再生にも対応しています。字幕表示などの機能はありません。YouTubeなどに比べるとシンプルですが、多くの場合これで十分でしょう。音楽のスピード変更機能は嬉しい人が多そうです。 OpenPlayerJSはTypeScript製のオープンソース・ソフトウェ
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）
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サイトはもちろん、
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
