jQuery Tocible - jQuery製の自動生成型目次ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページで長いコンテンツを書いた場合、あらかじめ目次が用意されます。しかし多くの目次は文頭にあり、途中から選ぶことはできません。また、見出しレベルを細かくすると目次だけで長くなってしまって可読性が落ちてしまいます。 そこで使ってみたいのがjQuery Tocibleです。ヘッダーを使って自動生成し、使いやすい目次を提供します。 jQuery Tocibleの使い方 コンテンツの右側に自動生成された目次が表示されます。 スクロールすると小見出しが表示されます。 さらにスクロール。 実際に使っているところです。ハイライトされる部分がスクロールに合わせて変化しているのが分かります。 jQuery Tocibleは自動生成された目次で、かつフローティング表示なのでコンテンツを読みつつ、
ExcelCompare - Excelファイルの差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オフィスでの仕事に徹底的に使われているのがExcelです。職人たちの手にかかれば、表計算のみならずあらゆる場面においてExcelが利用されます。メールでも送られ、修正されて、コピーして修正して…と多くの人たちに使われています。 その結果、多くのコピーとどれが最新で何が違うのか分からないExcelファイルに溢れかえります。そこで使ってみたいのがExcelCompareです。 ExcelCompareの使い方 ExcelCompareは2つのExcelファイルを指定して差分を抽出します。 $ excel_cmp spreadsheet.xlsx spreadsheet-2.xlsx DIFF Cell at Sheet1!B2 => '2016年6月26日' v/s '2016年7月2
sqlitebiter - CSV/JSON/Excel/GoogleスプレッドシートをSQLiteに変換 MOONGIFT
企業内で動くシステムの多くは表計算ソフトウェアを使って作られたデータを元に動くのではないでしょうか。MS Excelはもちろん、CSVファイルやGoogleスプレッドシートなど数多くの表計算ソフトウェアが動き、データが作られています。 そんなデータをシステムで使う際に、わざわざパースして使うのでは面倒です。sqlitebiterでSQLite3に変換してしまいましょう。 sqlitebiterの使い方 sqlitebiterを実行します。今回はJSONファイルを変換してみます。 $ sqlitebiter file test.json -o test.sqlite convert 'test.json' to 'results' table そうするとresultsというテーブルができあがります（JSONのルートキー名になります）。複数のファイルを一括で変換すれば、それぞれテーブル名になり
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
GPU.js - GPUを使ったアニメーションライブラリ MOONGIFT
Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょう そこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.jsを紹介します。 GPU.jsの使い方 GPU.jsを使った一例です。Canvasが4つに分かれており、それぞれが連携してアニメーションしています。 実際の動きです。60fpsでています。 グリッドやボールは増減できます。 GPU.jsを使わないCPUでの計算処理モードもあるのですが、動きがとても遅くなります。GPU様々と言ったところでしょう。Web上でスムーズなアニメーション処理を実現したい時にはぜひチェックしてください。 GPU.jsはJavaScript製のオープンソー
Monod - オフラインファーストなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownエディタはWeb、GUIともに増えています。インストール不要で使える分、Webベースのが便利だとは思うのですが、厄介なのはネットワークがない時です。そんな時に使えないのでは使う気が失せてしまうでしょう。 そこで使ってみたいのがMonodです。Webベースですが、オフラインファーストなMarkdownエディタです。 Monodの使い方 Monodの画面です。2ペインのよくあるMarkdownエディタです。絵文字をサポートしています。 テンプレート機能があり、YAMLフォーマットでテンプレートが使えます。 例えばprojectとして定義すれば、[project]の部分が書き換わります。 MonodはReact.jsを使って作られています。そうした点も注目に値するのではな
Sankey - マウスオーバーでハイライトするチャートライブラリ MOONGIFT
HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。 解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう。ということで今回はSankeyを紹介します。 Sankeyの使い方 Sankeyで描けるチャートです。左右をつなぐのですが、途中に別なノードを差し込めます。 マウスオーバーで特定のノード部分だけハイライトできます。 動かしているところです。 Sankeyでは左右にノードを配置して、N対Mでコネクトできます。それをマウスオーバーでハイライトすることで見たい部分を目立たせることができます。複雑な情報ほど分かりやすくなるのではないでしょうか。 SankeyはHTML5/Java
MarkDownDiagram - Markdown風記法を使ってダイアグラム作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが流行ると、Markdown風の記法を用いることでユーザの導入障壁を下げることができます。また、パーサーも多いのでそうしたライブラリを使うことで簡単にMarkdown風の記法が使えるようになります。 今回紹介するMarkDownDiagramもそんなMarkdown風記法を使ったソフトウェアの一つです。ダイアグラムをテキストで書けます。 MarkDownDiagramの使い方 メイン画面です。左側のエディタ部を編集すると右側のダイアグラムに反映されます。 ブロックという文字に変更してみました。 ブロックの位置はドラッグ&ドロップで変更できます。 線の色や太さを変えることもできます。 ズームもできます。 MarkDownDiagramを使えばダイアグラムを作成するのが
rclone - 同期もできる。各種クラウドストレージに対応したファイル管理ツール MOONGIFT
今はクラウドストレージサービスが多数存在します。幾つものサービスを使い分けていたり、会社と個人、プロジェクトなどでストレージサービスが異なるといった方も多いのではないでしょうか。 そんな方にお勧めなのがrcloneです。複数のクラウドストレージをコマンドラインから操作できる便利ツールです。 rcloneの使い方 例えばDropboxであれば次のようにコマンドを打つと内包しているファイルが一覧できます。 $ rclone ls Dropbox:/ 2016/05/24 11:42:42 Transferred: 0 Bytes ( 0.00 kByte/s) Errors: 0 Checks: 0 Transferred: 0 Elapsed time: 1m0.9s 2925 .emacs.d/elisp/el-get/.loaddefs.el 25 .emacs.d/elisp/el-g
qiitactl - Qiitaの投稿を管理できるGo製のコマンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマ向けのブログ（兼メモ）サービスとして知られているQiitaですが、基本はWebブラウザ上で文章を書いてそのまま投稿します。エディタはシンプルで使いやすいのですが、白背景ではいやだ、フォントは自分の好きなものが良いといった具合に細かいこだわりがあるでしょう。 そこで紹介したいのが自分の好きなMarkdownエディタを使いつつ、できあがったMarkdownファイルをアップロードできるqiitactlです。 qiitactl qiitactlのコマンドオプションです。 $ qiitactl usage: qiitactl [<flags>] <command> [<args> ...] Command line interface to manage the posts in
github-nippou - GitHubから日報を作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマの成果は書いたコード、対応したIssueに現れます。それなのに日報を出すとなると「○○システム開発 5時間」なんて書いてしまったりします。これでは具体性がなく、状態の善し悪しも分かりません。 そこで使ってみたいのがgithub-nippouです。GitHubを使って日々の開発を管理しているならば試してみると良いでしょう。 github-nippouの使い方 github-nippouは特定のリポジトリに寄りませんので、そのままgithub-nippouコマンドを叩くだけです。そうすると user_events に載っている情報を一覧で取ってきてくれます。 $ github-nippou list * [プッシュ通知の絞り込みについて - NIFTYCloud-mbaas/
CrossUI - 多数のブラウザに対応したWebアプリケーション開発ライブラリ MOONGIFT
Web技術が進歩していることもあって、これまでローカルでないと実現しなかったようなUI、機能などがWebブラウザ上でできるようになっています。とは言え、それはできるという話であって、実現しようとすればかなり大変なのは間違いありません。 特にUIやJavaScriptと連携させた動きの制御は苦労が伴います。そこで使ってみたいのがCrossUI、JavaScript用のRADツールです。 CrossUIの使い方 CrossUIではリッチなUIを持ったWebアプリケーションが簡単に開発できます。このようなD&Dで画面設計できるツールもあります。 さらに画像編集ソフトウェア。 Outlook風UI。 注文管理システム。 データベースマネージャ。 フローチャート。 表計算。 CrossUIはちょっと昔風（YUIあたり？）のUIとなっていますが、業務アプリケーションとしては十分なデザインでしょう。その
Blueprint: Vertical Timeline - スタイリッシュな縦型タイムラインデザイン MOONGIFT
Webサイトの記念的なエントリーやページを作成する際には縦向けのタイムラインがよく使われます。Webページは縦にスクロールされるものが多いので、一番上が過去とすれば、スクロールするごとに経過時間をたどれるようになります。 そんなサイトを作る際に使えるのがBlueprint: Vertical Timelineです。センスの良いタイムラインページが作成できることでしょう。 Blueprint: Vertical Timelineの使い方 Blueprint: Vertical Timelineのデモです。日時とコンテンツ、アイコンが並んで表示されています。 レスポンシブ対応です。 スマートフォンサイズにしても見やすいです。 Blueprint: Vertical Timelineはシンプルなデザインですが、それだけに見やすいのではないでしょうか。この手のコンテンツはよく使われますが、イチから
React Storybook - Reactアプリのコンポーネント開発にお供に！ MOONGIFT
Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。 そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理できるようになります。 React Storybookの使い方 デモのTodoアプリです。 データを追加すると、それがロガーに表示されます。 左側のメニューから選択するとデータが表示されている版が選択できました。 さらに未完了タスクの表示を選択しました。 こちらは2つのタスク、ステータスによるフィルタリング機能がついた画面です。 消し込みがかかった版です。 React Storybookを使うことで、UIコンポーネントを分割してその結果を確認しながら開発できるようになります
EmojiOne Area - jQuery製の絵文字ピッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 絵文字はここ数年で一気に使われるようになってきました。チャットサービスはもちろん、コメントで使われたり、iOS/Androidのようにキーボードの中で提供されるようにもなっています。コミュニケーションの基本にさえなっていると言えそうです。 そんな絵文字をWeb上で使いやすくするのがEmojiOne Areaです。ぜひ自分のサイトに組み込んでみましょう。 EmojiOne Areaの使い方 デモです。テキストエリア、テキストボックスに絵文字アイコンが表示できます。 右上のアイコンをタップすると一覧が出ますので、ここからアイコンを選択できます。 オートコンプリートもあります。 EmojiOne Areaでは自動補完はしないようにしたり、特定のカテゴリを非表示するようなオプションも指定で
Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳
メモ環境は大事です。気がついた時にさっとメモをしておけば、後々見返すこともできます。かつメモ環境はなるべく一カ所に統一しておくのが大事です。個人的には適当なテキストファイルに書き込んでいます。 しかし個人的にBoostnoteに集中させようと思っています。それくらい使い勝手のいいソフトウェアです。 Boostnoteの使い方 メイン画面です。 フォルダ、メモ一覧そしてメモと3段階の構成になっています。メモにはタグがつけられます。 新しいメモを作成しました。 メモはMarkdownで記入できます。 編集時はAceエディタを使っているので見やすいです。 Boostnoteの面白いのはメモをシェアできる機能があることで、専用の7日間のURLが生成されます。ローカルでメモを書いて、必要があればオンラインで共有できます。検索機能も便利なのでぜひ使ってみてください。 BoostnoteはElectro
vis.js·年表やオブジェクト同士のつながりを表現するグラフに MOONGIFT
Web上でデータを表示するライブラリは実に多彩に存在します。それだけニーズはありつつもこれで決まり！というものがないのかも知れません。そのため、多様に存在するライブラリをチェックし、比較検討する必要があります。 vis.jsもそんなデータビジュアル化ライブラリの一つです。ネットワーク図をはじめ、データ同士のつながりを表現するのに向いたライブラリのようです。 vis.jsの使い方 さっそくサンプルを見ていきましょう。 年表のサンプルです。ズームイン、ズームアウトに対応しています。 HTMLを記載できます。 ネットワーク同士の繋がりを表現したグラフです。 ソーシャル。友だち同士のつながりと、その強さをビジュアル化しています。 オブジェクトの用例付き。 Graphvizからサンプルを拝借しています。データはマウスで動かせます。 垂直型のレイアウト。 グルーピングしたデータビジュアル化。 HTML
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
GitUp - Mac OSX用の軽量なGitクライアント
Gitは誕生して10年になろうとしているそうです。そして現在、GitHubを筆頭として多くのエンジニアがGitを使っています。しかしGitの使い方について、日々多くのエンジニアが悩んでいるのではないでしょうか。 そこで作られたのがGitUpです。分かりやすくGitを使えるようにしたいと考えているクライアントソフトウェアです。 GitUpの使い方 GitUpを立ち上げるとまず、リポジトリを選択するウィンドウが表示されます。 リポジトリを開くとグラフが表示されます。 ブランチなども見やすいです。 コミットメッセージも見られます。 修正した場所も分かります。ここからコミットもできます。 GitUpでは操作の殆どがundo/redo可能であり、タイムマシーンさながらに指定したリポジトリの状態に戻すのも簡単にできます。UIはとてもシンプルですが、GitUpを使うことで普段のGit運用がとても楽になる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
