Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
ExcelMerge - Excelファイルの差分ビューワー
Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用
SVG PORN - 各種サービスロゴをSVG化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGはHTML5になって標準化されているメディアフォーマットですが、まだあまり広く活用はされていません。ただし、現在の高解像度化であったり、幅広い画面幅に対応していこうと考えるとSVGのようなベクター画像はとても大事になっていくでしょう。 今回はそんなSVGを使って各種サービス、ソフトウェアのロゴを描いたSVG PORNを紹介します。 SVG PORNの使い方 SVG PORNはとても数多くのサービスに対応しています。一覧でお見せします。まずはAngular、Ansible、Apache、Arduino、Atom、Auth0、Autoprefixer、AWS。 続いてBabel、Backbone、Bash、Bem、Bitbucket、Blocs、Bootstrap、bourbon
Blend4Web – Blenderで作った3DデータをWeb上で
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。 そこで既存の仕組みで作られたデータを取り込めるのがベストです。3Dモデリングソフトウェアとして有名なBlenderのデータをWeb上で使えるのがBlend4Webです。 Blend4Webの使い方 Blend4Webのデモです。太陽系の惑星を描いています。 もちろんマウスで視点を変えたりズームイン、ズームアウトも可能です。 ファッションショーのデモです。 視点を変えたり、 近づいてみることもできます。 3Dコンテンツ
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
Loaders.css·スタイルシートだけで作られたローディングアイコン MOONGIFT
WebアプリケーションなどではAjaxを使って通信を行うのが一般的です。そのため、ユーザが処理を待っている間は処理中である旨表示が求められます。そうしないと反応がないと思ってしまって何度もボタンをクリックしたり、ウィンドウを閉じてしまいます。 そこで使ってみたいのがLoaders.cssです。スタイルシートだけで作られたローディングアイコンです。 Loaders.cssの使い方 Loaders.cssでは多数のパターンのローディングアイコンが用意されています。以下はその一覧です。 最後のパックマン風はかなり派手ですね（2つも必要ですし）。その他、好みに応じて選択できるかと思います。スタイルシートであれば色を変えるのも容易でしょう。 使い方としては、 <div class="loader-inner ball-pulse"></div> のようにクラス指定するだけです。 Loaders.cs
Chameleon - レスポンシブWebデザインの確認が簡単になるGoogle Chrome機能拡張 MOONGIFT
最近はレスポンシブWebデザインを使うケースも増えてきましたが、面倒なのはデザインの確認ですよね。幅を変更してちゃんと適切に表示されているか確認したり、複数のデバイスを使って表示を適宜確認しなければなりません。 そこで使ってみて欲しいのがChameleonというGoogle Chrome機能拡張です。多数の画面幅でのデザイン確認を一気にできます。 Chameleonの使い方 ChameleonはGoogle Chromeのツールバーにインストールされます。そしてデザインを確認したいWebサイトでボタンを押します。 こんな感じの表示になります。それぞれの画面幅におけるデザインが一目で確認できます。 横向きも可能。 Chameleonはボタンを押すだけで一気に4デバイスの確認ができます。iPhone 4/iPhone 5/HTC One/iPad miniの4つになります。後は普段のデスクトッ
Markdown Edit·エクスポートにも対応したWebベースのMarkdownエディタ MOONGIFT
Markdownは通常、HTMLに変換するとあってWebベースのエディタと相性がいいように思います。また特に多く使うのがGitHubのREADMEであり、こちらもWebベースで表示されることもあるでしょう。 色々なMarkdownエディタが存在しますが、今回はMarkdown Editを紹介します。Webブラウザベースで使えるオンラインMarkdownエディタ、ビューワーです。 Markdown Editの使い方 こちらがエディター画面です。2ペイン構成になっています。 リアルタイムアップデート機能があります。 HTMLエクスポートした場合。 Markdown EditはJavaScriptのMarkdownレンダリングエンジンであるmarkedまたはGitHubのAPIを使ってレンダリングができます。またローカルファイルをドラッグ&ドロップでアップロードして編集もできるようになっています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
