JS-XLSX - JavaScriptでExcelファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebフォームでCSVファイルをアップロードしてください、というのはよくある機能です。しかしCSV自体解析するのが大変だったり、ユーザが作成するのも一手間かかるのであまり効率的とは言えません。 そこで、ユーザにはExcelファイルをそのままアップロードしてもらいましょう。その際使うのはJS-XLSX、JavaScriptによるExcelファイルパーサーです。 JS-XLSXの使い方 JS-XLSXのデモです。ドロップしたExcelファイルを解析して、CSVにしています。 さらにJSONにもできます。 JS-XLSXを使えば、Webブラウザ上でExcelファイル（ODSも可）を解析してAjaxでJSONだけを送ると言ったこともできます。これならシステムで扱うのも簡単そうです。さらにJ
Retro Board - 簡単に使えるシンプルなカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました カンバンは今やプロジェクト管理の基本機能にさえなりつつあります。細かいステータスはともかく、開発しているのか、テストなのかといった状態が一目で分かるのは良いことです。 そんなカンバン機能だけを提供するのがRetro Boardです。とてもシンプルなカンバン機能を提供します。 Retro Boardの使い方 名前を入力して中に入ります。 こんな感じにタスクを作成できます。 一覧で見ることもできます。 タスクは複数作成できます。 他のユーザはいいねすることができます。 Retro Boardはごく基本的なカンバン機能しかありません。プロジェクト管理は他にあった方が良いかもしれません。そして作業内容を決めたら、Retro Boardにタスクを書き出していってステータスを管理するのが良さそ
MarkDownDiagram - Markdown風記法を使ってダイアグラム作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが流行ると、Markdown風の記法を用いることでユーザの導入障壁を下げることができます。また、パーサーも多いのでそうしたライブラリを使うことで簡単にMarkdown風の記法が使えるようになります。 今回紹介するMarkDownDiagramもそんなMarkdown風記法を使ったソフトウェアの一つです。ダイアグラムをテキストで書けます。 MarkDownDiagramの使い方 メイン画面です。左側のエディタ部を編集すると右側のダイアグラムに反映されます。 ブロックという文字に変更してみました。 ブロックの位置はドラッグ&ドロップで変更できます。 線の色や太さを変えることもできます。 ズームもできます。 MarkDownDiagramを使えばダイアグラムを作成するのが
Scrollbear - 画像を読み込んでも読んでいる場所が変わらない MOONGIFT
意外と良いかも！ スマートフォンなどでWebサイトを見ていて、画像が後から読み込まれるためにコンテンツの高さが変わって誤ったタップをしてしまうことがあります。多くの場合バナーなどで、とてもイライラします。 そんなサイトに導入して欲しいのがScrollbearです。画像が読み込まれても読んでいるコンテンツの高さが変わらないライブラリです。 Scrollbearの使い方 左がScrollbear導入済み、右は未導入です。画像が読み込まれる度にコンテンツががくがくと動きます。 Scrollbearを導入しておけばコンテンツが動くことはありません。ただし画像の高さを予め定めておけば良いわけで、ユーザがコンテンツを作るような画像の有無が分からないようなサイトに使うのが良さそうです。 ScrollbearはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Scroll
s3rver - node製のS3クローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Amazon S3はとても便利なサービスで、多くのWebサービスで使われています。しかし本番環境ではよくとも、開発時から使っていると余計なお金がかかってしまうので大量のデータを投入するのを躊躇してしまうかも知れません。 そこで使ってみたいのがs3rverです。静的Webホスティングにも対応したAmazon S3クローンです。 s3rverの使い方 s3rverにアクセスしたところです。よくあるS3っぽいエラーが出ます。 画像をアップロードすればHTTP経由でアクセスできます。 s3rverは認証はされず、自由にバケットを作ったりアップロードができます。ファイルはローカルファイルシステムに保存されるので正しく動いているかどうかすぐに確認できます。ライブラリはRubyなどでも問題なく使
jQuery-lock - 編集防止に。コンテンツをロック！ MOONGIFT
開発者ツールを使ってHTMLを書き換えるのは簡単にできます。スクリーンショットを撮る時に余計な要素を消したり、文字を書き換えてしまうことだってできます。通常は自分の見ている範囲でしか使えませんが、悪用することもできます。 例えばフォームの書き換えが考えられます。送れないはずのデータを送りつけることもできるでしょう。そうしたイタズラから自分のサイトを守れるのがjQuery-lockです。 jQuery-lockの使い方 ロックした要素です。 編集しようとしますが、元に戻ってしまいます。 jQuery-lockは元々のコンテンツを覚えておき、書き換わったタイミングで元に戻しているのだと思われます。ユーザに編集されなくないというサイトもあると思いますので、そういう時に使えるでしょう。 jQuery-lockはjQuery/JavaScript製のオープンソース・ソフトウェア（Apache Lic
Social Share URLs - 各種ソーシャルサービスへのシェアボタンを生成 MOONGIFT
Web上でコンテンツをより多くの人に見てもらおうと思ったらシェアする機能が欠かせません。Facebook、Twitterは基本として、他にもたくさんのソーシャル系サービスが存在します。 そんな各種サービスに対応したシェア機能を提供するのがSocial Share URLsです。JavaScriptで簡単に実装できます。 Social Share URLsの使い方 デモです。指定したURL、タイトルなどでシェアができます。下に並んだアイコンをクリックします。 Facebookの場合。基本的にすべてポップアップウィンドウが開きます。 Twitterであればハッシュタグやユーザ名の指定ができます。 Google Plusにも対応しています。 Social Share URLsは今も動作しますが、作られたのが少し前なので今はもう懐かしいサービスも幾つか散見されます。Social Share URL
handsontable - グリッド表示にExcel並の機能を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。 そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみましょう。 handsontableの使い方 handsontableには多くの機能が備わっています。まずはページネーション。 パスワードを非表示にもできます。 新しい行を作成する際にplaceholderを表示。 フォーカスがあたっているセルをハイライト。 セルを細かくカスタマイズ。画像の埋め込みもできます。 ソートももちろんできます。 入力バリデーション。 ヘッ
mov2gif - 手持ちの動画をさくっとアニメーションGIFに変換 MOONGIFT
最近、アニメーションGIFを使ってソフトウェアの操作を表現することが多くなっています。YouTubeなどに比べると簡単に、繰り返し見られる動画が作れるのが利点です。その際の素材として、動画から変換するというケースはよくあります。 今回紹介するオープンソース・ソフトウェアはmov2gif、動画をアニメーションGIFに変換してくれるコマンドです。 mov2gifの使い方 mov2gifはCLIなソフトウェアなので、引数として動画ファイルを渡すだけです。他にも幾つかのオプションがあります。 $ mov2gif --help Usage: mov2gif [options] <inputfile> オプション: --optimize Optimization level [デフォルト: 1] --output-file, -o Converted gif file --frame, -f fram
atrament.js - スムーズな線の描けるドローソフトウェア MOONGIFT
今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。 そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。JavaScriptなのでWebブラウザ上で手軽に使えます。 atrament.jsの使い方 こちらがデモです。大きなノートが表示されており、この上に自由に書けます。 適当に書きましたが、スムーズなラインなのが分かるでしょう。 太さを変えられます。 書いているところです。スムージングのための計算が入るため、描画に若干の遅延が感じられます。 濃さを変えられます。 atrament.jsを使うとただ正確な描画を行うだけのものに比べて滑らかで、書いていて気持ちが良いドローイングができる
Zebra - リッチなUIが作れるWebアプリケーションフレームワーク MOONGIFT
HTML5によってUI周りは大きく改善されましたが、それでもまだまだ物足りないと感じることは多いです。その結果、外部ライブラリを導入せざるを得ず、互換性や組み合わせによる不具合が発生することもあります。 今回は多くのリッチなUIライブラリを提供するZebraを紹介します。Zebraを使えば他のライブラリを使わずともリッチなWebアプリケーションが開発できそうです。 Zebraの使い方 サンプルです。斜めになっている部分もコンポーネントです。 なのでタブをクリックして表示の切り替えができます。 曲線グラフ。 キーボードショートカットで有効、無効が切り替えられるコンポーネント。 コンポーネントの選択を切り替えるデモ。 ドラッグ&ドロップできるグラフ。 細かい表示場所の制御。 マウストラッキング。 複雑な形の中にテキストボックス。 こちらもWebアプリケーションで使えそうな複雑なUIコンポーネン
Swagger Editor - Swaggerフォーマットの編集とコード生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SwaggerはWeb APIの標準記述フォーマットとして知られつつあります。標準ができるということは、それを使っていれば同じデータを使って他のフォーマットやサービスで使うことができるようになります。 すでにコード生成ライブラリなどが作られていますが、今回はSwagger向けのドキュメントを作れるSwagger Editorを紹介します。 Swagger Editorの使い方 こちらがメイン画面です。左側がエディタ、右側にその結果が表示されます。 イチから記述する他、JSONを貼り付けて読み込ませることもできます。 設定が多数用意されています。 クライアントやサーバサイドのコード生成が行えます。その結果はZipファイルでダウンロードできます。 例えばRubyのコードはこのようになり
Crowi - MarkdownとWikiを組み合わせた組織用コミュニケーションツール MOONGIFT
メモというのは大事なもので、蓄積されたメモは後々大きな意味をもってきます。そのためにも手軽に、かつ一カ所にまとめて書けるようになっていなければなりません。散在したメモは探すコストが大きく、役に立ちません。 会社であればメモはみんな一カ所に書きためるべきです。それによって知らなかった新しい知識に辿り着けます。それを可能にするのがCrowiです。 Crowiの使い方 まずログインします。 こちらがメモの画面で、ビューワーにあたります。 こちらはプロフィール画面。この画面も編集できます。 右上のアイコンをクリックすると新しいメモが作成できます。 編集画面です。Markdownを使います。画像のアップロードはドラッグ&ドロップでできます。 自動的にURLが変わって、プレビューも更新されます。 更新履歴も表示できます。 Crowiはグループで利用できるWikiエンジンで、ブラケット名も利用できます。
React Storybook - Reactアプリのコンポーネント開発にお供に！ MOONGIFT
Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。 そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理できるようになります。 React Storybookの使い方 デモのTodoアプリです。 データを追加すると、それがロガーに表示されます。 左側のメニューから選択するとデータが表示されている版が選択できました。 さらに未完了タスクの表示を選択しました。 こちらは2つのタスク、ステータスによるフィルタリング機能がついた画面です。 消し込みがかかった版です。 React Storybookを使うことで、UIコンポーネントを分割してその結果を確認しながら開発できるようになります
Expounder - 補足説明を表示するJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テキストだけですべてを説明しようと思うとつい文字数が増えてしまいがちです。しかし短縮しすぎると伝わらなくなってしまいます。バランスが大事なのですが、それは紙のような静的なテキストの場合と言えます。 Webであればもっとダイナミックに、ユーザ操作に合わせてコンテンツを提供することだってできるはずです。そこで使ってみたいのがExpounderです。 Expounderの使い方 Expounderのデモです。 下線がある文字をクリックすると、コンテンツが追加されます。主に単語の説明であったり、補足する内容が表示できます。単語をすでに知っている人にすれば冗長的な説明は不要ですし、ツールチップのようにマウスを当てていなくとも良いのが便利です。 文章は次のように用意します。 In the la
Spy - Webページ中でのユーザの動きをトラッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アクセス解析を使うとユーザがどう回遊しているか分かります。しかし、ページの中でどういう風に動いているかは分かりません。そこで何か問題にあってページを閉じてしまっている可能性もあります。 そんなユーザの操作を記録、再現してくれるのがSpyです。アクセス解析と組み合わせて使ってみると面白そうです。 Spyの使い方 Spyの動きです。自分が行ったマウス操作がそのまま再現されます。 Spyはページを表示した瞬間から記録が行われています。そしてデータを逐次アップロードできます。このデータをつなぎ合わせることでユーザが行った操作（クリック、ストロールなど）を再現できる仕組みです。プライバシーへの配慮は必要ですが、Webサイトのテストと組み合わせて使ってみても良さそうです。 SpyはJavaSc
CrossUI - 多数のブラウザに対応したWebアプリケーション開発ライブラリ MOONGIFT
Web技術が進歩していることもあって、これまでローカルでないと実現しなかったようなUI、機能などがWebブラウザ上でできるようになっています。とは言え、それはできるという話であって、実現しようとすればかなり大変なのは間違いありません。 特にUIやJavaScriptと連携させた動きの制御は苦労が伴います。そこで使ってみたいのがCrossUI、JavaScript用のRADツールです。 CrossUIの使い方 CrossUIではリッチなUIを持ったWebアプリケーションが簡単に開発できます。このようなD&Dで画面設計できるツールもあります。 さらに画像編集ソフトウェア。 Outlook風UI。 注文管理システム。 データベースマネージャ。 フローチャート。 表計算。 CrossUIはちょっと昔風（YUIあたり？）のUIとなっていますが、業務アプリケーションとしては十分なデザインでしょう。その
Editor - Web用のMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中、Markdownばかりになってきました。その効果として、コンテンツが増えたり、関連ツールも多数出てきています。特にMarkdownエディタについてはかつてのWikiのように多数の言語で実装されるようになっています。 今回紹介するEditorもその一つですが、単独で動くものではなくWebサイトに埋め込んで使うタイプのMarkdownエディタになります。 Editorの使い方 Editorのトップページです。 日本語も問題なく書けますが、変換候補が表示されませんでした。 画像の埋め込みは  が表示されるだけでした。 プレビューです。切り替えがアニメーションなのが格好良いです。 Editorはサイトの利用者にMarkdownコンテンツを作成してもらう時に便
face to gif - Webカメラを使って簡単にアニメーションGIF作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アニメーションGIFを作る方法は幾つかありますが、多くの場合は動画を用意して、それを変換して作成します。すでに動画があればいいですが、イチから作成する際にスマートフォンを使ったりするのは面倒です。何よりスマートフォンは高画質なので動画のサイズが大きくなってしまいます。 そこで使ってみたいのがface to gifです。Webカメラを使うことでごく簡単にアニメーションGIFが作成できます。 face to gifの使い方 face to gifを表示したところです。Chromeなど、getUserMediaに対応したブラウザである必要があります。 レコードボタンを押して、停止すればアニメーションGIFが生成されます。 face to gifは外部の画像共有サービスにも投稿できます。W
mailtrain - 自分でホスティングできるニュース配信サービス MOONGIFT
インターネット上に様々なコミュニケーション手段はあれど、メールはまだまだ根強い人気があります。特に購読するまでもないのだけれど、サービスがローンチするなどのアップデートがあれば知りたいという際には便利です。 そんなニュースレターシステムを構築できるのがmailtrainです。MailChimp風のシステムとなっています。 mailtrainの使い方 トップページです。まずログインします。 mailtrainの設定画面です。 まずリストを登録します。 リストの下にメンバーが紐付きます。 利用者が使う登録フォームです。 メールのテンプレート機能。名前などは変数化されています。 キャンペーンを作って効果測定もできます。 mailtrainを使えば自分たち独自のニュースレターシステムが構築できます。スパムを送ったり、目的外の利用は厳禁ですが、より柔軟なメール配信設定を行ったり、自社システムと連携し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
