mathdown - 計算式が使えるMarkdown記法をサポートしたリアルタイムコラボレーションノート MOONGIFT
Markdown記法は汎用的な一方、足りない機能の多さにストレスを感じることも少なくありません。せっかく皆が使えるようになってきた記法だけに、他の用途でも使っていきたいと思うはずです。 そこで元の記法を踏襲しつつ、自分で拡張してしまうと言う手があります。今回はMarkdown記法が使え、計算式も書けるmathdownを紹介します。 mathdownの使い方 mathdownはコラボレーションを重視しています。Wikiのように皆で計算式が書けます。 編集する場合は、数式の左側にキャレットを持っていって右に移動すれば元の文字列に展開されます。 画面中央にあった数式も文字列に展開されました。 mathdownはMathJaxの記法に則って作られています。また、コラボレーション部分にFirepadを使っており、リアルタイムコラボレーションを実現しています。学生、研究者などに向いたシステムと言えそう
MailDev - ビューワー付きの開発用メールサーバ
システム開発においてメール送信を行うことは多々あります。しかしメールは間違って送信してしまうと取り返しのつかないもので、開発者であれば誰しも一度は誤送信を経験したことがあるのではないでしょうか。 そこで使ってみたいのがMailDevです。開発用のメールサーバで、送信したメールの内容確認もできるソフトウェアです。 MailDevの使い方 MailDevはDocker版が出ているのですぐに試すことができます。25番ポートが空いていますが、これはDocker上の話なので別途10025などにつなげてあげる必要があるでしょう。 メールを送信すると左側のリストが更新されます。日本語も通ります。 メールを選択して内容が確認できます。 添付ファイル付き。 ヘッダー情報の確認。 メールの検索機能もあります。 MailDevでは外部にメールを送信する、Relay機能もあります。条件に沿って送信する/しないを指
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
Flatmarket - 静的サイト主体で作られたEコマースシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムの筆頭とも言えるのがEコマースではないかと思います。商品を並べて、ショッピングカートに入れて決済する…特に大事なのが決済なのではないかと思います。カートに入れるまではともかく、そのまま決済完了しないと言った話はよく聞くところです。 バックグラウンドのシステムがない、そんな環境でもEコマースを作る…そんな試みがFlatmarketです。 Flatmarketの使い方 Flatmarketには完全にサーバがない訳ではありませんが、今ユーザに見えているのは静的なサイトです。 決済はStripeを使っています。 最後にカード番号を入れれば購入完了です。 本来は購入完了のメッセージが出るはずなのですがエラーになってしまいました。 Flatmarketの仕組みとしては、静的なサイ
player - CLIの音楽プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました デスクトップで開発を行っている時に音楽を聴きながらという方は多いでしょう。そんな時にどんなソフトウェアを使っていますか。スマートフォン、iTunes、その他にも音楽ソフトウェアは幾つも存在します。 バックグラウンドで音楽を流すのに仰々しいソフトウェアは使いたくないという方はplayerを使ってみましょう。CLIで使える音楽プレイヤーです。 playerの使い方 playerコマンドはplayの後に音楽ファイルを渡すだけです。ローカルファイルはもちろん、URLでも使えます。 $ player play /path/to/bgm.mp3 press "x" to stop, press "s" to play, press "space" to pause / resume press
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にタスクを書き出していってステータスを管理するのが良さそ
s3rver - node製のS3クローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Amazon S3はとても便利なサービスで、多くのWebサービスで使われています。しかし本番環境ではよくとも、開発時から使っていると余計なお金がかかってしまうので大量のデータを投入するのを躊躇してしまうかも知れません。 そこで使ってみたいのがs3rverです。静的Webホスティングにも対応したAmazon S3クローンです。 s3rverの使い方 s3rverにアクセスしたところです。よくあるS3っぽいエラーが出ます。 画像をアップロードすればHTTP経由でアクセスできます。 s3rverは認証はされず、自由にバケットを作ったりアップロードができます。ファイルはローカルファイルシステムに保存されるので正しく動いているかどうかすぐに確認できます。ライブラリはRubyなどでも問題なく使
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
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エンジンで、ブラケット名も利用できます。
mailtrain - 自分でホスティングできるニュース配信サービス MOONGIFT
インターネット上に様々なコミュニケーション手段はあれど、メールはまだまだ根強い人気があります。特に購読するまでもないのだけれど、サービスがローンチするなどのアップデートがあれば知りたいという際には便利です。 そんなニュースレターシステムを構築できるのがmailtrainです。MailChimp風のシステムとなっています。 mailtrainの使い方 トップページです。まずログインします。 mailtrainの設定画面です。 まずリストを登録します。 リストの下にメンバーが紐付きます。 利用者が使う登録フォームです。 メールのテンプレート機能。名前などは変数化されています。 キャンペーンを作って効果測定もできます。 mailtrainを使えば自分たち独自のニュースレターシステムが構築できます。スパムを送ったり、目的外の利用は厳禁ですが、より柔軟なメール配信設定を行ったり、自社システムと連携し
airtar - AirDrop風にファイルを送受信できるコマンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンピュータ同士でファイルを渡し合うという手段は意外と面倒です。メールは厄介ですし、Dropboxを使うにしてもまず共有設定がいります。小さなファイルを幾つもアップロードするのも面倒でしょう。 そこで使ってみたいのがairtarです。ローカルネットワークにつながったコンピュータ同士でファイルの交換ができます。 airtarの使い方 airtarはファイルを交換したいディレクトリに移動し、次のようにコマンドを打ちます。またはファイル名を引数に与えても大丈夫です。 $ airtar . waiting for receiver... この状態で接続待ちになりますので、ファイルを受け取りたい方でもairtarを実行します。そうすると自動的に現在のディレクトリにファイルがダウンロードされま
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
Kuzzle.io - リアルタイム通信対応のバックエンドシステム MOONGIFT
Webサイトやアプリを開発していて、必ず必要になるのがバックエンド（サーバ）です。アプリではParse.com（間もなく終了しますが）であったりニフティクラウド mobile backend（筆者がエヴァンジェリストをやっています）などがありますが、Webアプリケーションにおいてもバックエンドは必須です。 そんなバックエンドシステムをオープンソースで提供するのがKuzzle.ioです。一回使い方に慣れてしまえば開発が大幅に楽になるかも知れません。 Kuzzle.ioの使い方 Kuzzle.ioのデモです。いわゆるタスク管理です。 日本語も大丈夫です。タスクを追加したり消したりできます。 Kuzzle.ioのその他の特徴としては、リアルタイムであり、検索機能が備わっているということがあります。リアルタイムはゲームやチャットなどで使えるでしょう。Web、モバイルアプリ、IoTなどで利用ができる
youtube-to-gif - YouTube動画をアニメーションGIFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました YouTubeには面白い動画がたくさんアップロードされています。その一部を抜き出してアニメーションGIFにしたいと思ったことはないでしょうか。動画をダウンロードし、一部を切り出してアニメーションGIFに変換する…考えただけでも面倒です。 そこで使ってみたいのがyoutube-to-gifです。一連の手順を一発で行ってくれるコマンドです。 youtube-to-gifの使い方 使い方は簡単で、URLと開始時間そして録画時間を指定するだけです。 youtube-to-gif -u https://www.youtube.com/watch?v=NqxSgp385N0 -b 30 -d 5 実行すると、下記のようにアニメーションGIFが生成されます。画像の大きさも変更できますが、これくら
snapline - サイトがレンダリングされる様子をアニメーションGIF化 MOONGIFT
Google ChromeのDevToolを使うと、Webサイト開発における改善点が多数見えてきます。表示上のトラブルを感じている場合、タイムライン機能を使うのが良いでしょう。 サイトがどのようにレンダリングされているのか分かりますし、さらにそれをアニメーションGIFとして確認できるようにしてくれるのがsnaplineです。 snaplineの使い方 使い方のデモです。まずTimelineタブで記録をします。Screenshotsを忘れずにチェックしておきます。 そしてSave Timeline Dataを選択します。 保存したJSONをsnaplineに渡すと、アニメーションGIFが生成されます。 snaplineではサイトのがレンダリングされていく様子がより分かりやすくなります。思った通りに構築されているかどうか、一目で分かるでしょう。一つ一つの画像では分からない情報も、snaplin
Spec.js - スマートフォン/タブレットのスペックを判定 MOONGIFT
Webサイトへモバイルやデスクトップ、タブレットなどが入り乱れてアクセスするようになると、それぞれに分けて情報配信を行いたいと思うようになります。さらにスマートフォンの中でも使える機能が異なったりして、そのための処理分けが複雑なものになっているかも知れません。 そこで使ってみたいのがSpec.jsです。より細かく端末の情報が絞り込めるライブラリになります。 Spec.jsの使い方 Spec.jsのデモです。ユーザエージェントを使って各種機能やスペックを知ることができます。例えばiPhone 6の場合は次のようになります。 var ua = new UserAgent(); // iPhone 6 var spec = new Spec(ua); spec.UNKNOWN // -> false spec.SOC // -> "A8" spec.GPU // -> "POWERVR GX64
textlint-rule-write-good - 英文法の可読性チェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、英文を書く機会が増えているのですが、意味が分かるレベルから読みやすさや分かりやすさを意識するところに大きな隔たりがあるのを感じています。日本語でも同じように、見やすい文章を書くというのはとても難しいことです。 その一助になりそうなのがtextlint-rule-write-goodです。textlintの一つとして、文法の読みやすさをチェックしてくれます。 textlint-rule-write-goodの使い方 textlint-rule-write-goodのインストールはnpmを使って行います。 $ npm install textlint textlint-rule-write-good -g 後はtextlintコマンドのオプションとしてルールでtextlint-r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【個人メモ】JSON Serverを使って手っ取り早くWebAPIのモックアップを作る - Qiita
