Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ MOONGIFT
Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。 そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドローライブラリとなっています。これならば既存のサイトと組み合わせた使い方ができるようになります。 Drawingboard.jsの使い方 使い方は簡単で、CanvasのIDを渡すだけです。 こんな感じでカスタマイズもできます。 線種を変えたり、画像でダウンロードする機能もあります。 Drawingboard.jsは自分たちのサイトに埋め込んだり、既存の機能と合わせて使えるようになっているのが利点です。手書き画像をサーバに送れる機能を実装するのも良いでしょう。カスタマイズが容易
wdt-emoji-bundle - Slack風に絵文字を扱う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、絵文字を使えるサービスが増えてきました。SMSやスマートフォンアプリではだけでなく、GitHubやFacebook、Slackなどでも絵文字をサポートしています。 今回はそんな絵文字を使いやすくしてくれるwdt-emoji-bundleを紹介します。テキストを絵文字に変換してくれるソフトウェアです。 wdt-emoji-bundleの使い方 デモです。テキストボックス、テキストエリアのどちらでも使えます。テキストを解析して絵文字にしてくれます。 Slack風な入力補助の機能もあります。 各種サービスのデザインに合わせた変更もできます。Apple版の絵文字です。 Google版。 Twitter版。 wdt-emoji-bundleを使えばスマートフォンアプリのように絵文字を使
Clipboard Hook - カット/コピー/ペーストをイベントフックするJavaScriptライブラリ MOONGIFT
Webのコンテンツをコピーしたり、逆にペーストすると言ったことはよくあるかと思います。そんな時、URLであれば自動的にリンク展開したり、画像や動画を埋め込み表示にできたりするとUXがとても良くなるはずです。 そんな操作を実現してくれるのがClipboard Hookです。コピー、カット、ペーストと言ったクリックボード操作をイベントフックできるライブラリです。 Clipboard Hookの使い方 デモです。コピーしたタイミングでイベントが呼ばれているのが分かります。 ペーストも同様です。 面白いのはJavaScriptで操作できる点で、貼り付ける場所や内容によってテキスト以外の情報を追加できるということでしょう。 Clipboard Hookのデモでは文字だけでなく色情報も組み合わせてコピーできるようになっています。そして貼り付けるときにはその情報によって描画する内容を変えています。Web
Rabbit - 複数のブラウザで動画再生を同期
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画はみんなで見ると楽しいので、インターネットで離れていてもそんな楽しさが感じられるようにしているのがニコニコ動画です。動画の時間に対してコメントすることで、いつ動画を見ても一緒に見ているかのように楽しめます。 しかし動画によってはリアルタイムに同じ場所を見ていないと困ることもあるでしょう。そこで使えるのがRabbitです。 Rabbitの使い方 Rabbitを使うにはまず一つのブラウザで動画を表示します。 もう一つのブラウザでも動画を表示したら、動画の下にある青いボタンをクリックします。これで再生場所が同期されます。 動画の再生、停止はもちろんのこと、スライダーで動かしても再生場所を追従してくれます。 Rabbitはインターネット越しで同じ動画を楽しんだり、セミナーや授業において
Web.md - WebベースのMarkdownビューワー MOONGIFT
Markdownファイルは可読性が高い記法ですが、それでもHTML化されている方が分かりやすいのは間違いありません。とはいえ、人に見える際にいちいちHTMLに変換するのは面倒でしょう。 そこでMarkdownを閲覧するためのツールが便利です。今回は見た目を自由に変えられるWeb.mdを紹介します。 Web.mdの使い方 Web.mdでMarkdownファイルを読み込んでいる例です。 テーマは自由に選択できます。 黒背景はコードが多い場合には見やすそうです。 Web.mdを使えばMarkdownに慣れていないメンバーや、閲覧だけできれば良いメンバーにとっては十分と言えるでしょう。いくら可読性が高いとは言え、閲覧目的の場合はWeb.mdが役に立つはずです。 Web.mdはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 STEP wiki Alex-Rose/
Togelack - Slack用Togetter
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackを使っている企業は多いですが、その中でよく聞かれるのが、チャットの中で話したいつかのメッセージが流れてしまって探せないといった問題です。 フローのサービスではありがちですが、業務で使っているとサービスである以上、知識をストックできる場を用意すべきです。それがTogelackになります。 Togelackの使い方 Togelackのメイン画面です。まずSlackで認証します。 認証したら、適当なSlackのメッセージリンクをコピーします。 貼り付けると関連するメッセージも一気に表示されます。 左側にメッセージを貼り付けていきます。これはドラッグ&ドロップでできます。 最後にタイトルと概要を入力してまとめの完成です。 TogelackはSlackのTogetterのような存在
wavesurfer.js - HTML5で音楽の波形を表示 MOONGIFT
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave
Gapless 5 - JavaScript/CSS製のギャップレスプレーヤー MOONGIFT
音楽には間が大事な要素になると思いますが、コンサートや連続した曲が続く場合、間が邪魔に感じることがあります。そんな時のためにギャップレス再生と呼ばれる技術があります。 Webにおいても音楽コンテンツが増えていますので、Gapless 5のようなギャップレスプレーヤーはニーズがありそうです。 Gapless 5の使い方 Gapless 5のプレーヤーです。シンプルなUIで、キーボード操作をサポートしています。 Gapless 5はJavaScriptとCSSだけで作っているのが大きな特徴です。シンプルなUIなのでカスタマイズするのも容易ではないでしょうか。 Gapless 5はHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Gapless 5 - Demonstration Page regosen/Gapless-5
GOLD Bootstrap - Bootstrapに黄金比の魅力を
黄金比はご存じでしょうか。彫刻や絵画、さらにAppleの製品などでも使われている最も美しいと言われる比率のことです。縦横のバランスだけでなく、配置なども黄金比に沿っておくことで美しく仕上がると言われています。 そんな黄金比に沿ったサイトを簡単に作れるのがGOLD Bootstrapです。そう、Bootstrapで作ったサイトを黄金比にしてくれます。 GOLD Bootstrapの使い方 GOLD Bootstrapのデモです。なんとなく黄金っぽいテーマなのが面白いですね。 グリッドの指定法です。 ナビゲーションバーとボタン。 タイポグラフィ。 テーブル。 フォーム。 タブなど。 アラート、プログレスバー。 リスト、パネルなど。 GOLD Bootstrapは基本的にグリッドに関して独自の変更を施しているようで、コンポーネント系は標準のBootstrapと変わりません。すでにBootstra
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
Bootlint - Bootstrapサイトの検証に！ MOONGIFT
BootstrapをベースにWebサイトを組む例が増えていますが、Bootstrapの流儀をちゃんと踏まえて作っている人がどれだけいるでしょうか。ちゃんと把握していないとウィンドウサイズが変化した時に思った表示にならない事態につながります。 そこで使ってみたいのがBootlint、Bootstrap専用の検証ツールです。Bootstrapを使っているならぜひ一度はチェックしてみましょう。 Bootlintの使い方 BootlintはURLで適用することができます。 または直接HTMLを貼り付けて検証もできます。 エラーが出た場合は修正し、再度検証を行うのが良いでしょう。ウォーニングについては問題なさそうですが、やはり不具合を起こす前に修正するのが良さそうです。 Bootlintはnode.js/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Bootl
humane.js·見た目のカスタマイズも可能なWeb通知ライブラリ MOONGIFT
ユーザに何が起こったのか知らせるための通知機能をどう作るかは悩みどころです。見やすい、しかし消したいと思った時にすぐに消せるようになっていなければいけません。デザイン的にもバランスを崩したりする要因になります。 そこでフローティングで通知を表示するというのは一つの方法としてありではないでしょうか。目の前に表示されれば目立ちますし、アニメーションしながら表示すればさらに目を引きます。 今回はそんな機能を手軽に実装できるhumane.jsを紹介します。 まずは右上に表示するパターン。エラー、警告でないレベルの通知に良さそうです。 複数行の表示にも対応しています。 こちらは巨大な通知。エラーや新機能の紹介に使えそうです。 色や表示場所はカスタマイズできます。 背景が透けるようにもできます。 humane.jsはテーマが用意されており、それによって表示場所や色を制御できるようになっています。ニーズ
Terminal in Chrome Devtools - Google Chromeの中で使えるターミナル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました おおお、これは便利ですよ！ Webシステムの開発では任意のテキストエディタを使いつつ、修正したらWebブラウザを再読み込みして確認するといったスタイルが多いかと思います。そんな中でいちいち切り替えるのが面倒ということは多いです。 しかしWebブラウザからローカルのファイルへ書き込んだりすることはできません。そこで使ってみたいのがTerminal in Chrome Devtoolsです。Google Chromeのデベロッパーツール内で動作するターミナルです。 ファイルの編集はもちろんのこと、ファイルを移動したりすることもできます。足りなかった外部ライブラリをwgetで取得して保存したり、ローカルでは読み取れない外部のJSONファイルを保存するのにも使えそうです。 普段テキストエデ
cmder - 洗練されたUIのWindows用コンソール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました まだちょっとだけ不安定なところもありますが、期待できるUIです。 WindowsでCUI操作を行おうと思ったら使うのがコマンドプロンプトだと思います。正直使い勝手が良いものではありません。もっと洗練されたUIで使い勝手の良いコンソールが欲しい、そう考える人は少なくないようです。 格好いいコンソールを目指して作られているソフトウェアがcmderです。実際、起動してみるとなかなかいい感じのUIになっています。これは仕事が捗りそうですよ。 まずUIがすっきりとしていていい感じです。カラーリングもされていますし、フラット系UIなのも良さげです。 さらにタブが使えます。複数タブでコンソールを一つのウィンドウにまとめて管理できます。 ロックすると入力できない状態にできます。これも役立つ場面があ
xchema - 素のHTMLタグを活かしたシンプルなデザインフレームワーク MOONGIFT
これはこれで使い道がありそう。 BootstrapでWebサイトを組む機会が増えているのですが、バージョン3になってから徐々に作法が増えてきたように感じます。機能が増えるということはそれだけ覚えるべきことが増えるということです。 そうなるとシンプルに作れるという利点からはちょっと外れてくるかも知れません。そこでほぼ素のタグのままデザインができてしまうデザインテンプレートxchemaを紹介します。 各コンポーネントごとにたくさんのスクリーンショットでお届けします。 フォントの装飾。特にクラス指定がない所が特徴です。 段落。行間が良いですね。 頭だけ大きく。英語では良くある表現ですね。 引用。カラーリングに対応しているのが新しいかも。 リスト。様々な形式が用意されています。 定義リストに対応しているのが嬉しい。 アドレス。こちらもシンプルです。 アラート。alertというタグを作っています。
js-xlsx - JavaScriptでXLSXファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連
Resumable.js - HTML5で実現したリジューム付きファイルアップローダー MOONGIFT
アップロード途中で止まると相当なストレスですよね。そこで使ってみたいライブラリです。 HTML5を使うとファイルをドラッグ&ドロップでアップロードできるようになってとても便利になっています。しかしごく小さなファイルのアップロードであればまだしも、巨大なファイルをアップロードするとなるとまだ大きな問題が残っています。それがネットワークエラーです。 Webではファイルを一括でアップロードしますので、途中でエラーが起きるとまた最初からやり直しになってしまいます。これはクライアント/サーバ双方に負荷がかかる仕組みです。これを改善できるのがResumable.js、リジューム対応のファイルアップローダーです。 サンプルのnodeアプリケーションで実験します。 900MBくらいのファイルをアップロードします。 右側にある一時停止ボタンを押すとアップロードが停止します。 いつでも再開が可能です。 この仕
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
Fancyboot - Bootstrapのカラーリングをはじめ自在にカスタマイズしよう MOONGIFT
ほほーこれはますますBootstrapにハマってしまいそうです。 Bootstrapはデザインが苦手なプログラマー（筆者のような）にとって救世主のようなライブラリになっています。しかしそれだけにカスタマイズは苦手でどれも似たような雰囲気になってしまいます。そこでFancybootを使ってみましょう。 Fancybootでは色設定をはじめ、ボックスの大きさや必要なプラグインを自分で選択してカスタマイズできるようになっています。それもオンライン上でできるとなれば使わない手はないでしょう。 トップページ。可愛い猫がお出迎え。ネットは猫のためにあるとはまさにこのこと。 まずコンポーネントを選択します。必要ではないコンポーネントを外せますが…まぁ大抵は外さないですよね。ということで次のステップに進みます。 jQueryプラグインを選択します。これもあるに越したことはないですし、そのままで良いのかな。
Tokaido.app - 凄く便利！Mac OSXのRuby/Rails開発環境構築がこれ一つで完結 MOONGIFT
ついにきたきたきた！ 2012年5月に話題を呼んだ初のクラウドファウンドを使ったオープンソース・プロジェクトのTokaidoですが、ついに試せる段階になってきました。既にGitHubでリポジトリも公開されています。それがTokaido.appです。 さっそく起動してみましょう。 これがメインウィンドウです。まずOpen in Terminalを押します。 ターミナルが開きました。 Railsは独自にインストールされます。 Rubyは2.0系がインストールされました。 Railsアプリケーションを作成し、Tokaido.appに登録します。 起動しました。 さらに起動！.tokaidoでローカルサーバが立ち上がります。3000番ポートなどがつかないので、既に別なWebサーバが立ち上がっている場合は終了するようにしてください。 ログはコンソールアプリで確認できます。フィルタも使えますし、ターミ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
