Contour - 多彩な種類に対応したWeb用グラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。 Contourの使い方 まずごく基本的な折れ線グラフ。 D3.jsと組み合わせた例。 曲線グラフ。 棒グラフ。 積み上げ型の棒グラフ。 横棒グラフ。 横でも積み上げ型。 エリアグラフ。 円グラフ、ドーナツグラフもあります。 シリーズ化した円グラフ。 散布図。 散布図＋トレンド。 地図。 アメリカの地図。 CS
Propeller - Bootstrapベースのマテリアルデザインテンプレート
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ
OpenPGP.js - JavaScriptで使えるOpenPGP MOONGIFT
今、セキュアに情報を管理しようと思うと採用したいのが秘密鍵/公開鍵ではないでしょうか。ビット数によりますが、十分に長ければおいそれと解除されることはないでしょう。問題は一般ユーザに普及していないことです。 もしWebサービスで導入したかったらOpenPGP.jsを使ってみてはいかがでしょう。JavaScript上でOpenPGPが使えます。 OpenPGP.jsの使い方 面白いのは鍵の生成がWebブラウザ上でできることです。これによりサーバ側でも知り得ない情報の管理が可能になります。 var options = { userIds: [{ name:'Jon Smith', email:'jon@example.com' }], // multiple user IDs numBits: 4096, // RSA key size passphrase: 'super long and h
Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー MOONGIFT
Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。 そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実現します。 Resumable.jsの使い方 デモです。大きなファイルをアップロードします。 ファイルをアップロード中。一時停止もできます。 ネットワーク側では巨大なファイルを細かくアップロードされているのが分かります。 ファイルの内容が細かくなっていますので、サーバ側で結合する必要があります。そのための実装がnodeやPHPなど各種言語向けに提供されています。Resumable.jsを使えば巨大なファイルもアップロードしやすくなるでしょう。 Resumable.jsはHT
Console Importer - DevToolsで外部ライブラリをインポート
Google Chromeの開発者ツールを使っていて、外部のライブラリを使いたいと感じることは多々あります。そんな時にはJavaScriptのコードをすべて貼り付けたり、スタイルシートを動的に生成して読み込む手があります。しかし毎回やるのは面倒です。 そこで使ってみたいのがConsole Importerです。簡単に外部ライブラリを読み込めます。 Console Importerの使い方 $iというオブジェクトが追加されます。後はこれにJavaScriptやスタイルシートのURLを渡すだけです。 さらに jquery@2 といったような指定もできます。スタイルシートも特に変わらず使えます。 Console Importerをインストールしておけば、Webサイトの開発やデバッグ作業がとても楽になることでしょう。ライブラリを利用する際の手間が大幅に減るはずです。 Console Importe
WebPack Playground - WebPackをWeb上で体験しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。 今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。 WebPack Playgroundの使い方 メイン画面です。コンテンツはタブに分かれています。このタブの内容を別なタブから読み込めます。 例えばfile.jsというファイルを追加して、require('./file') とすればちゃんと読み込めます。 WebPack Playgroundでは擬似的にWebPackのようにコンテンツを展開していると思われますが、プレイグラ
LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン MOONGIFT
HTML5によって（またはiOSによって）Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。 そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行ってくれます。 LayaAirの使い方 作成例です。ゴリラがアニメーションします。 Flashにも生成できます。 こんな感じにバウンドするデモ。 一部を拡大表示するデモ。 チュートリアル風にタップすると次の説明が表示されるデモ。 LayaAirはWebGLとCanvasをサポートしており、ゲームやアニメーションで使えるライブラリとなっています。言語はActionScript3、TypeScript、JavaScriptをサポートしています。さらに一つ開発してしまえば、Flash
prh - コマンドラインで文章を校正
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くというのは難しいものです。文字数もそうですが、分かりやすい文章を書くには漢字の使い方にも気をつける必要があります。あまり多用すると文章が固くなりますし、使わなすぎると幼稚に見えます。 今回紹介するオープンソース・ソフトウェアはprh、そんな文章の構成を行ってくれるソフトウェアです。 prhの使い方 prhはコマンドで実行します。replaceオプションを付ければ元の文章が書き換わりますが、それが嫌な場合は標準出力された文章を別に保存すればOKです。 $ prh path_to_document.md > ~/Downloads/result.md prhはルールファイルがあり、それを使うことで良い感じに校正してくれます。ルールファイルを差し替えれば別な校正に使うこともでき
GetPageTitleAndURL - 複数パターンでタイトルとURLをコピー
WebブラウザではURLのコピーは簡単でも、タイトルのコピーは意外と面倒だったりします。HTMLソースからコピーするのは面倒ですし、ブックマークレットを実行する方が多いかと思います。 そんなURLとタイトルのコピーを手軽に、かつ複数のフォーマットに対応させたのがGetPageTitleAndURLです。 GetPageTitleAndURLの使い方 実行したところです。フォーマットを数字で指定します。 そうすると文字が表示されるのでコピーします。 GetPageTitleAndURLではGoogleスプレッドシート用、Markdown、aタグの3パターンでコピーできます。必要があれば追加するのも難しくないでしょう。機能拡張でコピーすることもできますが、GetPageTitleAndURLをキーボードショートカットで呼び出す方が簡単そうです。 GetPageTitleAndURLはJavaS
Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ MOONGIFT
Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。 そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。 Slyの使い方 横向きのスクロール例です。数字を選んだり、下にあるナビゲーションで移動ができます。 縦型もできます。 リストだけでなく文章などでも利用できます。 コンテンツを動的に追加する無限スクロールもサポートしています。 Slyを使えば上下または左右のスクロールに多数の機能が持たせられます。目次とその見出しへの移動に使ったり、カルーセルのような使い方も考えられるでしょう。アイディア次第で面白い使い方ができそうです。 SlyはJavaScript製のオープンソース・ソフトウェア（MIT
a-table.js - リッチな機能を持ったHTMLテーブルを出力 MOONGIFT
Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。 a-table.jsの使い方 デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。 カラムを追加できます。 日本語も問題なく使えます。 さらに太字の変更も。 行についても追加や削除ができます。 a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。 a-table.jsはJavaScript
HyperApp - 1KBのビューライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。 そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブラリと銘打ったビューライブラリです。 HyperAppの使い方 ごく基本的な使い方は次のようになります。modelとviewが基本になります。 app({ model: "Hi.", view: model => <h1>{model}</h1> }) ボタンを押した時のアクションを定義する場合は次のようにreducersを定義します。 app({ model: 0
drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。 そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&ドロップを手軽に実装できるようにします。 drag-dropの使い方 drag-dropのコードです。onDrop/onDropTextメソッドを定義するだけでファイルやテキストデータが取得できます。 window.remove = DragDrop('body', { onDrop: function (files, pos) { var names = file
mediacenterjs - Webベースのメディアセンター
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 使ってみると意外と便利なのがメディアセンターです。ローカルやネットワーク内にある動画、音楽ファイルなどを一箇所で管理でき、スマートフォンなどから操作して音楽や映画を楽しめるようになります。 そんなメディアセンターをWebベースで提供するのがmediacenterjsです。 mediacenterjsの使い方 セットアップ画面です。ロケーションを登録するのは後で紹介する天気表示のためです。 メイン画面です。なんとなくWindows8風の画面です。 動画一覧。ちゃんとカバーも取得してくれます。 ミュージック。こちらもアートカバーを取得する機能があります。 そして天気です。 mediacenterjsはWebベースなのでWebブラウザさえあればスマートフォンでもタブレットでも操作できます
tlapse - 指定したURLに定期的にアクセスしてスクリーンショットを保存 MOONGIFT
Webサイトの作成はゼロから形になるものを作っていく、作品としての一面を持っています。いきなり完成品ができあがる訳ではなく、色々試行錯誤しながら、再読込を繰り返しつつできあがっていきます。 そんなWebサイトのできあがっていく様を残し続けてくれるのがtlapseです。 tlapseの使い方 tlapseは以下のように利用します。 tlapse --every 5m --directory ./screens -- localhost:3000 そうするとlocalhost:3000に5分ごとにアクセスして、スクリーンショットを残し続けてくれます。PNG画像でできあがるので、後はImageMagickなりを使うとアニメーションGIF化もできます。 何も作業していない時はスクリーンショットが重複するので、その場合は画像は保存されません。固定のURLを指定するので、別なページのスクリーンショット
PPTX2HTML - PowerPointファイルをHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Googleドライブにあるスライド機能はHTMLでありながらPowerPointレベルのスライドを作成できる便利なサービスです。HTMLであればインターネットとの相性もよく、検索もしやすくなります。 今手元にPowerPointのファイルがあるならばPPTX2HTMLを使ってHTML5化してみてはいかがでしょう。 PPTX2HTMLの使い方 メイン画面です。PowerPoint（pptx）ファイルをドロップします。 変換されました。273msで変換されるのでかなり高速です。 画像やヘッダーなど含めて再現性はかなり高いです。 PPTX2HTMLでは画像やリスト、テキスト、テーブルなど数多くのオブジェクトがサポートされています。元々pptxファイルはXMLとリソースをZip圧縮したもの
Frappe Gantt - マウス操作が便利なガントチャート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的にはあまり好きではないのですが、プロジェクト管理において重宝されるのがガントチャートです。各タスクが時系列上に並ぶことで、タスクが重なる期間が分かりやすくなったり、タスクの関連度を可視化することでボトルネックを発見できます。 そんなガントチャートを作成できるライブラリがFrappe Ganttです。 Frappe Ganttの使い方 表示例です。落ち着いた色合いで分かりやすいですね。 タスクの移動はマウスでできます。 さらに進捗を示す紫色のレンジもマウスで変更できます。 タスクをクリックすると詳細情報が見られます。 日ごとだけでなく、週毎や月毎の表示もサポートしています。 Frappe Ganttはその操作をマウスだけでできるようになっています。UIも分かりやすいのではないで
TableDragger - 行/カラムに対応したテーブルドラッグ&ドロップツール MOONGIFT
テーブル表示は業務システムでもよく使われますが、使っている内に様々な要望が上がってきます。編集できるようにしたい、並び替えが欲しい、一括更新、絞り込み…などなど色々です。それらをすべて叶えるのは困難でしょう。 しかしライブラリを使えば実現できることもたくさんあります。今回はテーブルのドラッグ&ドロップをサポートするTableDraggerを紹介します。 TableDraggerの使い方 デモです。カラムのドラッグ&ドロップです。 さらに縦方向。ヘッダーも対象にしていますが、外すこともできます。 さらに縦と横を一緒にサポートもできます。 TableDraggerを使えばカラムをユーザの希望に応じて差し替えるといったことがユーザの手で実現できます。クライアントサイドだけで実現できるのも大きな利点でしょう。行の変更もワークフローによっては使うことがあるはずです。 TableDraggerはJav
Shrimpit - 使われていない変数を発見するJavaScript解析ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeが使われるようになって、大きなシステムも作られるようになっています。そんな中で生まれるのがrequire/import地獄です。毎回ファイルごとにライブラリを読み込まなければならず、管理が煩雑になっていきます。 そこで使ってみたいのがShrimpitです。ディレクトリを解析し、使われていない箇所を抽出してくれます。 Shrimpitの使い方 以下は一例で、3つのファイルがあるディレクトリになります。 # a4.js import { a11, a12 } from './a1' export const a4 = '1337' export default { propA: '8080', propB: () => {}, propC: false } # a1.js im
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
json.browse - 開発者ツールを使ったJSONブラウザ MOONGIFT