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: 機械学習を用いていな
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でリアルタイムにデータを共有するようにしたりすることで他の人のフィードバックを素早く得
HumanInput - マウス、キーボードショートカット、音声認識までこなす入力検知ライブラリ MOONGIFT
コンピュータへの入力方法はかつてに比べて大幅に増加しています。キーボードとマウスを使っていた時代はすでに古く、WebブラウザだけでもマイクやWebカメラのような入力方法もあります。 今回はそうした多彩な入力方式をサポートするHumanInputを紹介します。 HumanInputの使い方 まずは拍手を検知するデモです。拍手くらいまではできますが、喝采は複数人でないとできなそうです。 マイクを使った音声認識です。認識した文字が太字になります。 HumanInputではこの他、キーボードショートカットであったり、マウスクリックやマルチタッチなどのイベントも取得できます。HumanInputを使えばWebブラウザ上で起こる様々な入力イベントを補足し、アプリケーションの中で活用できるでしょう。 HumanInputはJavaScript製のオープンソース・ソフトウェア（Apache Licnese
NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ MOONGIFT
ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。 そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。 ノードはマウスで接続できます。 実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。 ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト
swip - 体験必須！複数デバイスを簡単に連携 MOONGIFT
Googleが作成した、複数のウィンドウを連携させるChromeの実験的デモを見たことがあるでしょうか。複数のウィンドウ間でメッセージを飛ばすことでデータの位置やステータスを同期させていると思われます。 そんなデモを複数のスマートフォン、タブレットでできてしまうのがswipです。 swipの使い方 swipを使っているところです。 手前のブラウザから飛んでいったボールが別なデバイスに移っているのが分かるでしょうか。 swipではブラウザの画面同士を指でくっつけるような動作をします。それによってウィンドウの場所がつながります。さらにデバイスのインチ数を入力することで影響を受ける範囲が決定します。これは体験として非常に面白いのでぜひお試しください。 swipはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 paulsonnentag/swip:
Mobile-Checker - w3c製のモバイルサイトチェッカー
スマートフォンの世界は進化が速く、スマートフォンに対応したWebサイトを正しく作れているかどうかは熟知している人であってもなかなか判断できないのではないでしょうか。そんな時には本家であるw3cの仕様に沿うのがベストです。 今回紹介するMobile-Checkerはw3cが作成しているモバイルデバイスへの適合性チェックツールです。 Mobile-Checkerの使い方 現在、3種類のデバイスの大きさでチェックできます。 こんな感じで問題点が出ますが、現在は途中でエラーになってしまいます。 Mobile-Checkerでは特定のデバイスではなくディスプレイの大きさに合わせた適合性を判断してくれます。基本的にw3cの仕様に合わせてWebブラウザは開発されているので、Mobile-Checkerの指摘に合わせて修正すればOKなはずです。 Mobile-CheckerはJavaScript製のオープ
Selection Sharer - ブログやサイトのシェアをスムーズに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログ記事などを見ていて、気になった文章があったらシェアしたくなるでしょう。そんな時に文字列をコピーしてメーラーやソーシャルメディアを開いて、リンクなども貼り付けて…なんてやっていたら面倒でシェアを止めてしまうでしょう。 Mediumでは選択した文字の上にツールチップを表示してすぐにシェアできますが、同様の機能を提供するのがSelection Sharerです。 Selection Sharerの使い方 利用しているところ。文字列を選択するとツールチップが出ます。基本形はTwitterとメールです。 Twitterを選択すると選択した文字列を引用しつつ、リンクも追加されます。 メールの場合はHTML形式で、リンクなどが追加されます。 Selection Sharerを使えばユーザは
Docpress - 読みやすい開発者向けドキュメントを生成
開発者向けのドキュメントシステムなんて何でも良いと思っていないでしょうか。開発者はオンラインドキュメントをよく読み、Googleで検索し、そこにあるコードをコピーして実行します。そのため、半端なドキュメントでは彼らの信頼を失ってしまうでしょう。 そこで使ってみたいのがDocpressです。Markdownベースのドキュメント生成システムです。 Docpressの使い方 デモです。左側に目次、右側にコンテンツが表示されます。 ページの下に次のページへのリンクが表示されます。 メニューは隠せます。 Docpressは文字が大きめ、デザインもすっきりしたドキュメントを生成します。使い方としても docpress s でプレビューができるなど、とても簡単に使い始められます。 Docpressはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 docpr
ClipBoard - Flashいらずなクリップボード操作ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webにおいて常に問題視されるのがクリップボードの扱いです。テキストや画像をコピーするためにいつも選択するのは面倒ですし、HTMLの装飾までくっついてきてしまうのも難点です。 そこで使ってみたいのがClipBoardです。Flashを使っていないクリップボード操作ライブラリです。 ClipBoardの使い方 簡単な使い方です。これでHelloという文字がコピーされます。 <button id="btn" data-copy-content="Hello">copy 'Hello'</button> <script> // fast bind superClipBoard.bind(document.getElementById('btn')); </script> HTMLのテーブ
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
express-status-monitor - Express製のステータスモニター
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近では多くのサービスがステータスを公開しています。問題が起こればすぐに分かりますし、トラフィックが上がっているか、APIが正常に動作しているか開発者も簡単に理解できます。 今回はExpressで作ったサービスに簡単に組み込めるexpress-status-monitorを紹介します。 express-status-monitorの使い方 デモの画面です。 データはリアルタイムに刻々と変わります。 express-status-monitorは既存のExpressアプリケーションの中に簡単に組み込めます。GitHubのステータスページにインスパイアされたとのことです。express-status-monitorを別サーバで提供するようにすればサービスのステータスページとして使えるで
ShiftJS - SwiftのコードをJavaScriptに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptは好みの分かれるプログラミング言語です。特にコンパイル系の言語を書いてきた人に嫌がられる傾向があります。また、コールバックや非同期の仕組みも好まれない傾向があります。 もしSwiftエンジニアがどうしてもJavaScriptを書かなければならないとしたら使ってみたいのがShiftJSです。 ShiftJSの使い方 shift.jsを使ってSwiftのコードを変換します。 $ shift.js test.swift test.js saved. All files converted 変換されたコード。 $ cat test.js var name = 'Joe'; var num = 5; var anotherNum = 6; var yetAnotherNu
Monaco Editor - VS Codeでも使われているWebベースのプログラミングエディタ MOONGIFT
Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。 そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS Codeでも使われているソフトウェアです。 Monaco Editorの使い方 メイン画面です。行番号がついて、カーソル行が分かりやすく囲まれています。 テーマを変更しました。各種言語に対応したハイライタが備わっています。 CSSでテーマをハイコントラストに変更しました。 言語によってはこのようなツールチップ表示もサポートされています。 Diff（差分）エディタもあります。 2画面だけでなく、1画面での表示も行えます。 Monaco EditorはVS Codeでも使われてい
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
Holmes - ページ内の情報を素早く検索
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サイト検索は常に問題になります。Web全体を対象とするならばGoogleでも良いでしょう。その反動か、サイト独自の検索は突然使い勝手が悪く感じられるものです。少しでも使いやすい検索を提供しないとユーザは離れてしまいます。 今回はJavaScriptベースのページ内検索、Holmesを紹介します。JavaScriptだけあってインクリメンタルに検索できます。 Holmesの使い方 検索ボックスにキーワードを入れると即座に情報が絞り込まれていきます。 実際に使っているところです。 一つだけになるとDOMの幅が変わっています。 使い方としても、 holmes({ input: '.search input', find: '.results blockquote' }); のように使うだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
