Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。 そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS Codeでも使われているソフトウェアです。 Monaco Editorの使い方 メイン画面です。行番号がついて、カーソル行が分かりやすく囲まれています。 テーマを変更しました。各種言語に対応したハイライタが備わっています。 CSSでテーマをハイコントラストに変更しました。 言語によってはこのようなツールチップ表示もサポートされています。 Diff（差分）エディタもあります。 2画面だけでなく、1画面での表示も行えます。 Monaco EditorはVS Codeでも使われてい

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでよく使うファイルフォーマットがPDFではないかと思います。よく使うだけにPDFをベースにして別な使い方を考えたいのですが、なにぶん再利用性がとても悪いフォーマットでもあります。 そこで使ってみたいのがOrigamiです。OrigamiはRubyで作られたPDFを操作するライブラリです。 Origamiの使い方 Origamiが提供するコマンドの一群です。 pdf2graph pdf2pdfa pdf2ruby pdfcocoon pdfcop pdfdecompress pdfdecrypt pdfencrypt pdfexplode pdfextract pdfmetadata pdfsh pdfwalker 解析する系のライブラリが多いのですが、その中にpdf2r

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました UMLの失敗（失礼）はGUIツールを必要としたことではないでしょうか。大抵その手のツールが効果であったり、使いこなすのに時間が必要で、そういった面倒さが離れてしまうのに繋がったのではないかと思います。 しかしシステムのビジュアル化としては良い仕組みであったと思います。問題は記述法で、テキストベースで書けていれば変わったかも知れません。そこで今回はUmlautを紹介します。 Umlautの使い方 UmlautはPlantUMLで書いた内容をビジュアル化するビューワーです。 デモです。左側に書かれた内容が右側で画像化しています。 シーケンス図。 アクティビティ図。 ユースケース図。 コンポーネント図。 ステート図。 テキストで書くだけでは結果が想像しづらいですが、その場でプレビューでき

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアを紹介する際にデスクトップの操作を記録することは多々あります。最近はアニメーションGIFをよく使うのですが、YouTubeにアップロードする場合は動画で録画する方が良いでしょう。 今回紹介するオープンソース・ソフトウェアはRec、Electron製のデスクトップレコーダーです。 Recの使い方 Recを実行したところです。ウィンドウごとに録画を行うようになっています。 録画した動画を保存します。形式はWebMです。 撮影した動画です。アニメーションGIF化しているのでぎこちないですが、実際にはスムーズです。 RecはCanvasタグを使ってウィンドウのスクリーンショットを撮り続け、それをWebMとして出力しています。JavaScriptで行っているようです。かなり強引に

Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownで文書を書くことが増えています。慣れた人にとっては書いている時点で結果の予想がつくのですが、不慣れな場合、やはりできあがりを確認しつつ書いてみたいと思うのではないでしょうか。 Markdown専用エディタを使うのも良いのですが、2画面分割が好きでなかったり、リアルタイムプレビューまではいらないと思うこともあるでしょう。そこで使ってみたいのがmarknです。 marknの使い方 marknはElectronでできていて、Windows/Mac OSX/Linuxで動作します。起動するとデモのMarkdownファイルが開きます。 例えばこんな感じ。 画像もちゃんと表示されます。 普段使い慣れたテキストエディタでMarkdownを書きつつ、気になったタイミングで描画してみ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました いかなるソフトウェアであってもバグはつきものです。バグがなかったとしてもそれは単に見つからなかったり大きな問題につながらないだけで、いつかは露見することになります。 Facebookが作ったInferはそんなプログラミングコードを静的に解析するソフトウェアで、アプリのバグをいち早く発見するためのツールになります。 Inferの使い方 例えば以下のようなコードがあります。これはjavacでコンパイルできるコードです。 // Hello.java class Hello { int test() { String s = null; return s.length(); } } これをInferにかけるとエラーが表示されます。 $ infer -- javac Hello.java H

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptによるWebアプリケーション開発がどんどん大規模化しています。多人数での開発も当たり前になり、継続的に開発する中でも品質を保たなければならなくなっています。 そんな中で必要になるのがドキュメントです。今回は最新のJavaScript仕様であるECMAScript 6に対応したJavaScriptドキュメントジェネレータ、ESDocを紹介します。 ESDocの使い方 ESDocのインストールはnpmで行います。 $ npm install -g esdoc 以下はコマンドオプションです。設定ファイルのJSONか、生成するスクリプトがあるディレクトリを指定します。 $ esdoc -h usage: esdoc [-c esdoc.json | path/to/di

Markdown関連のソフトウェアがとても多くなっています。軽量マークアップ言語のシェアはMarkdownが半分以上になっているのではないでしょうか。そうやってコンテンツが増えていくと、次に作成から活用の段階に入っていきます。 単純にHTMLファイルにするだけでなく、もっとMarkdownフォーマットを活用したソフトウェアが出てくることでしょう。そのベースに使えそうなのがMarkdown diffです。 Markdown diffの使い方 Markdown diffはMarkdownファイル同士の差分がとれるようなのですが、執筆時点ではそのコマンドは用意されていません。現在は構造解析ができるようです。 $ mdast README.md { t: 'Document', start_line: 1, start_column: 1, end_line: 58, children: [ {

おお、これは格好いい！ 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。 smartcrop.jsの使い方 デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。 切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。 さらにサンプル。女性を中心に抽出しています。 これは完全に左側から。 ヨットを中心に。サムネイルでも格好いいですね。 街並。より印象的なビルを中心にしています。 こちらは川と太陽が中心です。 人の場合は顔を中心にするようです。 多数の人がいる場合。よ

個人的にもよく使っているwri.peがオープンソース化されました！Ruby on Railsで作られており、本家はHerokuで動作しているなど自前でWebベースのメモ環境を作るのがとても手軽になりそうです。 ということで早速触ってみましょう。Web APIのトークン設定をすればすぐに動かせます。 wri.peの使い方 トップページです。見たまま本家のwri.peそっくりです。 ログインしました。早速メモを作ってみましょう。 右側にプレビューもあって分かりやすいですね。 カレンダー。メモを作った日付が分かります。 検索はSolrを使っており日本語も対応しています。 バックアップはEvernote、Dropboxにできます。 殆どの機能がJSON出力に対応していたり、iCalでの出力や多数のWeb API、OAuth対応がされているなど今風のWebサービスを作るのに参考になる点が多いと思いま

DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT

autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ

Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑

new2JSはWebベースのJavaScriptレクチャーソフトウェアです。 プログラミングは実際に手を動かしてみないと覚えられるものではありません。それをコードを使ってレクチャーしてくれるのがnew2JSです。JavaScriptを覚えたい方におすすめです。 最初のページです。まずRunボタンを押します。 説明文と、その下に実行結果が表示されます。後はnextボタンを押していきます。 数値の型が出ています。 文字列、真偽値の型など。 入力を行った判定もできます。 他にも色々なレクチャーが受けられます。 new2JSはJavaScriptを一歩一歩覚えていくというよりもある程度JavaScriptを把握しているユーザがより深くJavaScriptを習得していくのに便利なサービスと言えます。なぜこんな仕様なのか、そう思ってしまう所もきっとあるでしょう。 new2JSはJavaScript製の

JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG

Markdown HereはGmailなどの本文作成フィールドでMarkdown記法を使えるようにするソフトウェアです。 ライトなテキスト記法で知られるMarkdownですが、慣れてくるといつでもどこでもMarkdownを使いたいと思ってしまうようになります。そこでWYSIWYGエディタの代わりにMarkdown Hereを使ってみましょう。 インストールします。Google Chrome機能拡張/Firefoxアドオンとして提供されています。 オプション画面です。コード表示部分のテーマを指定できます。 Gmailで試してみます。まずMarkdownで記述。 そしてHTMLに変換。デフォルトならばCtrl+Alt+Mで変換できます。 コンテクストメニューから表示切り替えもできます。 コードを書いてみます。 コード部のハイライトは奇麗です。 Markdown HereはWYSIWYGエディタ

JSON Editor OnlineはWebブラウザやGoogle Chrome機能拡張として動作するJSONビューワー、編集ソフトウェアです。 RESTfulのWeb APIなどでよく使われるようになったJSONフォーマット。構造が分かりづらかったり、自分で手作業でJSONファイルを作成したりするといった時に便利なのがJSON Editor Onlineです。 トップページです。左側がJSON、右側がその解析結果のツリービューです。 項目を追加しました。中央にある左右の矢印ボタンをクリックすると反映されます。 右側でツリーを使って値を変更したりキーを追加したりできます。 その結果を逆に差し戻すこともできます。 配列も表現されています。 検索機能もあります。 URLを指定してJSONの取得ができます。 JSONの内容は小さくすることも可能です。 JSON Editor OnlineではJS

Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る