video-resize - videoタグの大きさをダイナミックに変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。 しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバーしましょう。 video-resizeの使い方 video-resizeを使っているところです。 大きいときの表示。 高さを変えた時の表示。 video-resizeが便利なのはウィンドウの高さの変化にも追従してくれることです。レスポンシブは幅の変化に合わせますが、video-resizeは高さにも関係してきます。そして、なるべく全体が見られるような状態を維持してく
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
executor editor - JavaScriptを実行できる埋め込み型エディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつてWebブラウザ上で任意のJavaScriptを実行しようと思ったらアドレスバーに入力するしかありませんでした。今はDevToolsが使えるようになり、自由にJavaScriptが実行できます。しかしこれはまだ開発者向けであって一般ユーザ向けではありません。 そこで使ってみたいのがWebブラウザ上で任意のJavaScriptが実行できるexecutor editorになります。 executor editorの使い方 メインの画面です。JavaScriptが編集できます。実行結果は下に出ます。 ペインの並びを横にもできます。 テキストの大きさなど、スタイルは自由に変えられます。 executor editorはJSFiddleのJavaScriptだけを抜き出したようなソフトウ
Chain - Webベースのビジュアルプログラミング環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。 今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力になります。 Chainの使い方 幾つかブロックを貼り付けました。右と左をドラッグ&ドロップでくっつけていきます。 ブロックの種類は次のようになります。 値同士をオペレータブロックを使って計算したり、結合したりできます。さらにIfやリピートブロックを使えば判定や繰り返し処理ができるようになります。さらに関数化して大きなブロックにすることもできます。 大型なロジックを作
Sankey - マウスオーバーでハイライトするチャートライブラリ MOONGIFT
HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。 解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう。ということで今回はSankeyを紹介します。 Sankeyの使い方 Sankeyで描けるチャートです。左右をつなぐのですが、途中に別なノードを差し込めます。 マウスオーバーで特定のノード部分だけハイライトできます。 動かしているところです。 Sankeyでは左右にノードを配置して、N対Mでコネクトできます。それをマウスオーバーでハイライトすることで見たい部分を目立たせることができます。複雑な情報ほど分かりやすくなるのではないでしょうか。 SankeyはHTML5/Java
Monod - オフラインファーストなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownエディタはWeb、GUIともに増えています。インストール不要で使える分、Webベースのが便利だとは思うのですが、厄介なのはネットワークがない時です。そんな時に使えないのでは使う気が失せてしまうでしょう。 そこで使ってみたいのがMonodです。Webベースですが、オフラインファーストなMarkdownエディタです。 Monodの使い方 Monodの画面です。2ペインのよくあるMarkdownエディタです。絵文字をサポートしています。 テンプレート機能があり、YAMLフォーマットでテンプレートが使えます。 例えばprojectとして定義すれば、[project]の部分が書き換わります。 MonodはReact.jsを使って作られています。そうした点も注目に値するのではな
handsontable - グリッド表示にExcel並の機能を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。 そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみましょう。 handsontableの使い方 handsontableには多くの機能が備わっています。まずはページネーション。 パスワードを非表示にもできます。 新しい行を作成する際にplaceholderを表示。 フォーカスがあたっているセルをハイライト。 セルを細かくカスタマイズ。画像の埋め込みもできます。 ソートももちろんできます。 入力バリデーション。 ヘッ
Zebra - リッチなUIが作れるWebアプリケーションフレームワーク MOONGIFT
HTML5によってUI周りは大きく改善されましたが、それでもまだまだ物足りないと感じることは多いです。その結果、外部ライブラリを導入せざるを得ず、互換性や組み合わせによる不具合が発生することもあります。 今回は多くのリッチなUIライブラリを提供するZebraを紹介します。Zebraを使えば他のライブラリを使わずともリッチなWebアプリケーションが開発できそうです。 Zebraの使い方 サンプルです。斜めになっている部分もコンポーネントです。 なのでタブをクリックして表示の切り替えができます。 曲線グラフ。 キーボードショートカットで有効、無効が切り替えられるコンポーネント。 コンポーネントの選択を切り替えるデモ。 ドラッグ&ドロップできるグラフ。 細かい表示場所の制御。 マウストラッキング。 複雑な形の中にテキストボックス。 こちらもWebアプリケーションで使えそうな複雑なUIコンポーネン
RazorFlow - 多数のグラフをサポートするHTML5ダッシュボードフレームワーク MOONGIFT
業務システムといえど、UIが整っている方がやる気が出るはずです。特にダッシュボード系のよく見る画面であれば分かりやすくなっているかどうかで生産性が大きく変わってきます。 今回紹介するオープンソース・ソフトウェアはRazorFlow、HTML5のダッシュボードフレームワークです。 RazorFlowの使い方 RazorFlowでは幾つかのグラフをサポートしています。 一覧も利用できます。 グラフはマウスオーバーで説明が出ます。 こちらはよりダイナミックなデータ変化ができます。フォームで表示するデータを絞り込めます。 カテゴリや名称などで検索できます。 RazorFlowは各種グラフの他、KPI表示パネル、ゲージ、テーブル、ドリルダウンなどの表示や機能に対応しています。HTML5を使っており、リアルタイムな描画アップデートも可能です。 RazorFlowはHTML5/JavaScript製のオ
Clear風のUI、操作を実現するスマートフォン向けWebアプリケーション·HTML5 Clear MOONGIFT
HTML5 ClearはiOSのTodoアプリClearに似た操作をHTML5で実現しています。 これまでにないほど先進的なUIをもったTodoアプリがClearです。こちらはiOSアプリですが、同様の操作をHTML5で実現しているのがHTML5 Clearになります。 トップ画面です。タスクリストが並んでいます。 次にタスクが並んでいます。操作がそのままタスク名になっています。 タップでエディットです。 ドラッグダウンで新しいタスクを追加できます。 タスクを右にスワイプすると完了になります。 HTML5 ClearはClearの全ての動きを再現している訳ではありませんが、何となくそれっぽい動きが実現できています。HTML5でここまでできるのか、という点からも興味深いソフトウェアです。なおデータは保存されていないのでご注意ください。 HTML5 ClearはHTML5/JavaScript
結構難しいぞ。Z軸を備えた3Dテトリス·Threejs-Tetris MOONGIFT
Threejs-Tetrisは3次元のテトリスです。落下に加えて奥行きを持って動かせます。 テトリス好きな方に贈りたいゲームがThreejs-Tetrisです。通常のテトリスは2Dですが、こちらは3DでZ軸が加わっています。 ゲーム開始です。 3Dなので立体です。手前から奥に向かってブロックが進んでいきます。 落ち始めは何のブロックかも分かりません。 だんだん積上ってきました。慣れるまではかなり難しいです。 うまくいっているのか言っていないのか…それすら難しいです。 失敗しました…。 操作は平面上の移動に矢印キーを使って、垂直を含めた回転にAD/SW/QEキーが使われます。通常のテトリスであればよほどスピードが増さない限りは右回転、左回転にこだわる必要はなかったのですが、3Dだとキーを間違えるといつまでも希望の向きにならないのでご注意を。HTML5でサウンドまで鳴る本格的ゲームです。 Th
滑らかに自然なページ送りができるJavaScriptライブラリ·turn.js MOONGIFT
turn.jsはタブレットやスマートフォンで使えるWeb向けのページ送りライブラリです。 turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。 四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。 ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。 それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。 右から左の他、逆に左から右へもめくれます。 デモ動画です。 この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念で
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
