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
todo-md - GitHubフレーバーなタスク管理を行うCLIツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Todo管理というと、もの凄くしっかりとやることもできれば、逆に緩くシンプルに行う選択肢も考えられます。あまりきっちりやると管理コストが大きくなるので、最初は適度に力を入れすぎにやってみるのが良さそうです。 そこで使ってみたいのがtodo-mdです。GitHubのMarkdownファイルに記載するタスク管理と同様の仕組みで使えるCLIツールです。 todo-mdの使い方 使い方としてはtodoコマンドの後にタスク名を書きます。 $ todo "ミーティング" | # Todo list | | _\( managed using [todo-md](https://github.com/Hypercubed/todo-md) \)_ | 5 | - [ ] ネタを集める 6 | -
notella - Firebaseを使ったメモアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノートアプリの類は多数に存在しますが、それでもなお新しいものが登場するのは理由があります。自分の手に馴染むものは既存のものに存在しないからです。特に開発者であれば、自分で作ってしまえるので、既存のものに感じるちょっとした違和感が嫌なのかも知れません。 今回紹介するオープンソース・ソフトウェアはnotella、Webベースのノートアプリです。 notellaの使い方 メイン画面です。すっきりしたデザインです。 メモを書くと、左側の一覧が更新されます。 テーマを変更しました。 notellaの特徴としてはクリーンなデザイン、プログレッシブWebアプリ、複数デバイス間での同期、オフライン、ホーム画面に追加を挙げています。データはFirebaseに保存しており、デスクトップやスマートフォン
placehold-cli - placeholdのURL生成コマンド
デザインのプロトタイプを作っている時に便利なのがplaceholdです。パラメータに応じて画像の色を変えたり、画像自体の大きさを自由に変更できます。他にもフォントの大きさや色も変えられるのですが、パラメータをいちいち覚えておくのも面倒です。 そこで使ってみたいのがplacehold-cliです。対話型でplaceholdのURLを取得できます。 placehold-cliの使い方 コマンドを実行しているところです。 $ placehold ? Width(px) 300 ? Height(px) 400 ? Background Color(hex) fb0 ? Text Hello ? Font Color(hex) FFF ? Font Size(px) 35 url: https://placehold.jp/35/fb0/FFF/300x400.png?text=Hello Cop
Visdown - Markdownにグラフ機能を追加
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは誰でもすぐに覚えられて便利な記法ですが、ちょっとこだわったことをしようと思うだけでMarkdownだけでは物足りなくなってしまいます。その結果、HTMLタグが氾濫することになってしまったりもします。 今回紹介するVisdownはMarkdownに足りないデータのビジュアル化機能を追加するソフトウェアです。 Visdownの使い方 Visdownの画面です。左側がエディタ、右側にプレビューが表示されています。 ```vis とするのがコツです。 色を変えることもできます。 変更はリアルタイムに反映されます。 VisdownではSVGのグラフを出力します。すべてクライアントサイドで完結していますので表示の反映が即座に行われます。ビジュアル化はVegaを使って行っていま
mikan.js - 機械学習を用いず日本語の改行問題を解決 MOONGIFT
先日、Googleがディープラーニングを使って文字文節を自然に区切るというbudouを開発しました。日本語は分かち書きによって分割できますが、それをさらに自然に改行させるというのは面倒なものです。 しかし機械学習を行わずに、クライアントサイドだけでも実現できてしまうのがmikan.jsです。 mikan.jsの使い方 幅が広い場合。 一番狭めた場合。 ちゃんと良い感じに文節に区切れます。 mikan.jsを見ると分かりますが、正規表現であったり、漢字と平仮名の関係を使って解決しています。汎用性という意味においては機械学習でしょうが、日本語の改行問題というごく限られた領域においてはmikan.jsを磨き上げる方が簡単かも知れません。 mikan.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 trkbt10/mikan.js: 機械学習を用いていな
paste.js - JavaScriptでクリップボードからペーストされたデータを読み取る MOONGIFT
HTML5になってクリップボードの内容にもある程度JavaScriptからアクセスできるようになりました。ファイルをアップロードする際にもinput(type=file)を使う以外にもドラッグ&ドロップでのアップロード、さらにペーストを使うこともできます。 そうしたクリップボードで処理されたコンテンツを扱いやすくしてくれるのがpaste.jsです。 paste.jsの使い方 ペーストされる対象は入力欄に限りません。普通のDOMでも行えます。 テキストをペーストしたところ。ちゃんと補足できています。 contentEditableの場合、フォントの装飾も反映できます。 画像の貼り付けもできます。 画像を貼り付けた場合、blobになって展開されます。後はCanvasなどに描画することもできますし、サーバへアップロードすることもできるでしょう。デスクトップであれば当たり前なコピー&ペーストもWe
Pit-scheduler - 線表形式の使いやすいカレンダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スケジュール管理は多くのシステムで使われています。プロジェクト管理、顧客管理、グループウェアなどは特にそうで、日付と連動して動くシステムは他にも多数あります。純粋なスケジュール管理ではリッチなカレンダー表示が行われていますが、それ以外のシステムでは大したことない場合も多いでしょう。 今回はjQueryで見やすい線表ベースのカレンダーを表示できるPit-schedulerを紹介します。 Pit-schedulerの使い方 スケジューラーの画面です。これは1日単位の表示です。 予定の詳細。 タスクのアサイン。 リスト表示も可能です。 フィルタを使って絞り込みもできます。 絞り込みました。 新しいタスクを追加する画面です。 Pit-schedulerは横向きの表示なので慣れていないと若干
markerPen - Web上で使えるマーカーペン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのデザインで修正点を指摘したいと思った時にどうしていますか。テキストで書いても伝わりづらいです。そのため、印刷してペンで書き込んで渡しているでしょうか。または画像編集ソフトウェアや、PowerPointに貼り付けてドローしてくる人もいます。 そんな方々に使えそうなのがmarkerPenです。Web上で使えるマーカーペンを実現できるライブラリです。 markerPenの使い方 デモです。Webページ上にマウスで線が書けます。 クリアしたり、一部消すこともできます。 実際に使っている様子です。 デモでは再読み込みすれば消えてしまいますが、サーバにデータを残すようにしたり、WebSocketでリアルタイムにデータを共有するようにしたりすることで他の人のフィードバックを素早く得
Maggie - 画像アップロード前のチェックを簡単に実装
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、ファイル選択した際にファイルの内容を取得したり、サイズや画像の種別をチェックしたりできるようになりました。しかしその実装については面倒というイメージがあります。 そこで使ってみたいのがMaggieです。指定された画像ファイルを柔軟に扱えるようになります。 Maggieの使い方 使い方です。getInfoという関数を使います。 getInfo('#my-input', info => { const preview = document.getElementById('img-preview'); preview.src = info.src; }); infoという変数の内容は次のようになっています。 srcをそのまま画像のsrcプロパティに当てはめて使えたり、
PureScript - Haskell風言語からコンパイルしてJavaScript生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近JavaScript代替言語が熱いです。一時はCoffeeScriptに代表される、JavaScriptで面倒な書き方を省略できるものに人気がありましたが、最近はTypeScriptのような型指定を行えるものが人気です。 今回紹介するPureScriptもそんなJavaScript代替の一つで、コードとしてはHaskellに近いものとなっています。 PureScriptの使い方 PureScriptのコードが左、結果が右になります。かなり特徴的なのが分かります。 プレイグラウンドではその場で編集もできます。 phoneBookというオブジェクトはNameという文字列型を持っていると指定されています。その上でphoneBookを検索して結果に表示しています。 繰り返し処理です。
HumanInput - マウス、キーボードショートカット、音声認識までこなす入力検知ライブラリ MOONGIFT
コンピュータへの入力方法はかつてに比べて大幅に増加しています。キーボードとマウスを使っていた時代はすでに古く、WebブラウザだけでもマイクやWebカメラのような入力方法もあります。 今回はそうした多彩な入力方式をサポートするHumanInputを紹介します。 HumanInputの使い方 まずは拍手を検知するデモです。拍手くらいまではできますが、喝采は複数人でないとできなそうです。 マイクを使った音声認識です。認識した文字が太字になります。 HumanInputではこの他、キーボードショートカットであったり、マウスクリックやマルチタッチなどのイベントも取得できます。HumanInputを使えばWebブラウザ上で起こる様々な入力イベントを補足し、アプリケーションの中で活用できるでしょう。 HumanInputはJavaScript製のオープンソース・ソフトウェア（Apache Licnese
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
json.browse - 開発者ツールを使ったJSONブラウザ MOONGIFT
DeNA Engineering - DeNAエンジニアのポータルサイト
JavaScriptのプログラミングに特化した子ども向け超小型PC「IchigoLatte」販売開始 
