マインドマップソフトウェアは数多くありますが、その多くはビジュアル的な編集を行うものとなっています。確かに見た目はいいのですが、サイズが大きくなると編集が面倒に感じます。 そこでプログラマーで向きなMindMapItを紹介します。テキストを編集してマインドマップに反映していくタイプのソフトウェアです。 MindMapItの使い方 メイン画面です。編集は左にあるノードリストを変更します。 文字を追加したり、ノードの位置変更も簡単です。 日本語も使えます。 MindMapItのいいところはアウトライン的にどんどん編集していった結果をビジュアル的にマインドマップで確認できることでしょう。ノードの場所や色などを気にすることもなく、アイディアの深掘りに集中できるでしょう。 MindMapItはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL）です。 MindMapIt Jos
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
おお、これは格好いい！ GitHubの作ったプログラミングエディタAtomに注目が集まっていますが、それに対抗するかのようなオープンソース・ソフトウェアが登場しました。それがZed、Google Chromeアプリとして動作するプログラミングエディタです。 Zedのインストール ZedはChrome ウェブストアで公開されていますので簡単にインストールできます。 インストールはワンクリックで。 Chromeアプリなのでランチャーに入ります。 Zedの使い方 Zedを立ち上げました。Dropboxまたはローカルのフォルダを指定します。 開きました。基本2ペインですが、さらに分割もできます。 コマンド+EまたはCtrl+Eでフォルダ以下のファイルをインクリメンタル検索します。 Markdownファイルであればプレビューも可能です。 各種プログラミング言語に対応したハイライター。 ノートという機
マインドマップは今もよく使います。頭の中を整理したり、網羅して考えることで思わぬ抜けを防げるようになります。ドリルダウンする形なので必要なところだけをメンテナンスするのも簡単です。 問題はマインドマップは専用アプリケーションが多いということです。インストールすれば良いのですが、それすら面倒という方は多いでしょう。そこで使ってみたいのがWebブラウザ上で使えるMy Mindです。 最初の表示です。 エンターとタブでどんどん作っていけます。 ノードの移動もできます。 ノードによっては小ノードのSUM/アベレージ数を出すこともできます。 より複雑なマップのデモ。これくらい使いこなせると面白そうですね。 保存を押すとJSONファイルでダウンロードされます。逆にJSONファイルをアップロードすれば再現もできますので、My Mindの置き場所はさほど問題ではないのかも知れません。サーバサイドの仕組みが
GitHubは各自がリポジトリを持つ分散型ソースコード管理システムになっています。そして各自が差分を受け取ることでコラボレーションを実現しています。 同じような仕組みをデータについても行おうとしているのがDatです。まだはじまったばかりのプロジェクトではありますが非常に興味深いソフトウェアになります。 インストールはnpmを使って行いますので簡単に完了します。 $ npm install dat -g インストールが完了したら、最も基本的な使い方を試してみます。 $ mkdir foo $ cd foo $ dat init これで初期化が終わります。Gitに似ていますね。次にデータを追加します。 # 一例 $ echo '{"hello": "world"}' | dat --json # CSVからも可能 $ cat some_csv.csv | dat --csv データの読み込みは
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。 初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。 現状はこんな感じです。 理想的な形（公式サイトより）。 MMDのファイルは仕様が公開されていないらしく、実際のファイルから意味を読み取って実装しているというかなりマニアックなソフトウェアになります。初音ミクへの愛情がなければ、決してここまでできないでしょう。まだ特徴点を読み取るレベルですが、近い将来Webブラウザ上でも初音ミクが踊っているかも知れません。 mmd.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
Visual Eventはイベントが設定されているDOMをビジュアル化するライブラリです。 最近のWebサイト開発においてJavaScriptを使わないということは殆どなくなりました。jQueryなどを使って様々なイベントを設定しているサイトも多いでしょう。そこで使ってみたいのがVisual Eventです。 実行しました。色がついた部分がイベントを設定しているところです。 フローティングでアクションの内容が分かります。 Yahoo! Japanで実行しました。意外と色々なアクションが設定されています。 表示の切り替え系が多いようです。 Visual Eventを使うとjQueryで設定したり、onClickで指定したりしたアクションが一目で分かるようになります。jQueryで開発中に設定したイベントが正しく実装されているかどうか確認するのにも使えそうです。 Visual EventはJa
BrythonはJavaScriptの代わりにPythonを使ってプログラミングできるようにするライブラリです。 Webブラウザ標準で使えるプログラミング言語と言えばJavaScriptです。しかしそれだけでは満足できない、そんな方が開発したのがBrythonです。Webブラウザ上でPythonが書けてしまいます。 アナログ時計です。ちゃんと秒針が動いています。 コードは見事にPythonです。 Ajaxのデモ。 やはりちゃんとPythonコードです。 テーブルのソートデモ。 Importも使えて便利です。 左右にデータを移動させるデモ。 ボタンやコンポーネントをPythonの中で生成しています。 3Dを動くデモ。 エリア情報を含めてPythonで定義されています。 BrythonはHTMLコンテンツのハンドリングはもちろん、Ajax、ローカルストレージ、Canvasの操作もできます。HT
JS QRcodeはWebカムや画像にあるQRコードを読み取るJavaScriptライブラリです。 携帯電話にカメラが搭載されて一気に普及したのがQRコードです。そこで数多あるQRコードをWebブラウザでも活用できるようにしてくれるJS QRcodeを使ってみましょう。 トップページです。 QRコードの画像を指定しました。瞬時に読み込まれてその結果が下に表示されています。 JS QRcodeはWebカムからの入力またはファイルのアップロード（実際にはアップロードされません）を使って画像を読み込み、QRコードの内容を出力します。出力系は数あれど、読み取り系は多くないので諜報しそうです。 JS QRcodeはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る 個人的にスマートフォンになってからQRコードを良く使います。デ
OpalはRubyのコードをJavaScriptに変換するソフトウェアです。 JavaScriptはWebブラウザ上で実行できる唯一のプログラミング言語です（プラグインを使わなかった場合）。しかしJavaScriptを書きたくない、そう考える人も多いです。もしあなたがRubyプログラマであればOpalを使ってみましょう。 テストできるページです。左がRuby、右がその変換したJavaScript。そして下に実行結果が表示されます。 timesも使えます。 こんな感じでifを使った出し分けもできます。 OpalはRubyのコードをJavaScriptに変換できるコンパイラーです。構文はRubyのまま、JavaScriptに変換して実行されます。Ruby on RailsやjQueryに組み込んで使うこともできるようになっており、実用的と言えるのではないでしょうか。Rubyの全てが実現できる訳
jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。 情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。 Yahoo! Pipesに似た連結です。 アニメーションもできます。 マウスでドラッグして接続もできます。 複雑に結びつけました。 一つのオブジェクトから複数のオブジェクトに派生するデモ。 jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。 jsPlumbはJavaScript製、
Surviveplus.net Excel MacroはExcelに匿名メソッド/クラス、LINQを付け加えるライブラリ。 [/s2If] Surviveplus.net Excel MacroはWindows/Excel用のオープンソース・ソフトウェア。Excel VBAは企業内においてもっともユーザによって開発されているプログラミング言語かもしれない。操作を記録してマクロを作り、多少修正すればあっという間に自動処理が作れてしまう。 匿名メソッド そんな便利なVBAではあるが、構文の書き方がシンプルなこともあり（作り手によるが）、よりプログラミングを見栄えよく作るのが難しかった。そのため本職プログラマな嫌うきらいがあった。だがSurviveplus.net Excel Macroを使えば高度なプログラミングが可能になる。 Surviveplus.net Excel Macroが提供するの
JavathcriptはJavaScript上で簡単なLispを実行するプロジェクトです。 最近、Webブラウザ上でJavaScript以外の言語を動かそうとするプロジェクトが熱くなっています。DartやCoffeeScript、Ruby、PHPなどがありますがそこに新しい仲間の登場です。JavathcriptはJavaScriptで実装されたLispエンジンです。 デモコードです。 実行結果です。 Canvasを使うデモです。 Emacsに慣れ親しんでいる人であればしょっちゅう目にする言語と思われますが、括弧が多く特徴的なので最初はとっつきが悪く感じるかも知れません。関数、スコープ、文字列、数字、オブジェクト、Lisp in Lisp、グラフィックスの描画といった機能があります。 JavathcriptはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
EeePubはHTMLファイルを組み合わせてePubファイルを生成するRubyライブラリです。 電子書籍フォーマットと言えばePub。そんなePubを自分で作ろうと思うとフォーマットの形式を覚えたり、専用の記述方式を習得しなければなりません。しかしEeePubを使えばHTMLファイルからePubファイルを作成できます。 インストールはとても簡単です。「gem install eeepub」のみです。 まずサンプルを試します。スクリプトを実行するとePubファイルが生成されます。 実際に開いたePubファイルです。テキストオンリーですがきちんとePubとして読めます。 元ファイルになったHTMLです。普通にHTMLとして記述されています。HTMLファイルは複数指定できます。 実際のコードです。ePubのヘッダー情報と、実際のコンテンツを渡しています。後は目次にあたる部分を指定しています。最後
MindOnTrackはマインドマップとタスク管理（GTD）が一つになったソフトウェア。 MindOnTrackはWindows/Linux用のフリーウェア（Mac OSX向けもリリース予定）。日々の業務やプライベートな予定など、うまく順番にやりくりするためにはTodo管理が欠かせない。そしてタスクというのは総じて自分の周囲を整理した時にも現れやすい。 タスク 単純に割り当てられているタスク以外にも、プロジェクトや業務に関して見直してみると新しいすべきことが見つかったりするのはよくあることだ。そこで考えをまとめつつタスクに落とし込めるソフトウェアとしてMindOnTrackを紹介しよう。 MindOnTrackはマインドマップとタスク管理が一緒になったソフトウェアだ。言わば作業を分類ごとにドリルダウンしながらまとめ、それに日付をつけてタスク化していくのだ。さらにGTDにも則っているので、プ
NotepagesはMarkdown/LaTeXフォーマットに対応したWebベースのテキストエディタ。 Notepagesはnode.js/JavaScript製のオープンソース・ソフトウェア。ローカルアプリケーションのWebアプリケーション化がどんどん進んでいる。Chrome OSが本格的に立ち上がれば、この流れはもっと進むだろう。最も厄介と思われるテキストエディタもそうだ。 トップページ 単純なメモ帳レベルのテキストエディタであればローカルから乗り換える意味はほとんどないだろう。だが、ローカルに環境を構築するのが面倒なエディット環境であれば可能性はある。その一つの答えがNotepagesだ。 NotepagesはMarkdownまたはLaTeXフォーマットをHTMLに変換して表示するテキストエディタだ。使い方はとても簡単で、左側に変換結果のプレビュー、右側に本文がハイライトして表示され
SourceKitはGoogle Chrome内で動作するテキストエディタ。Dropbox APIを使っている。 SourceKitはGoogle Chrome向けのフリーウェア（ソースコードは公開されている）。なかなかWebアプリケーション化しないものの筆頭として考えられてきたのがテキストエディタだ。特にプログラマ向けのエディタになると手になじんでいるかどうかの問題が大きく、なかなか本格化しなかった。 まさにエディタ 確かにWebベースで開発するということに大きなメリットは感じられなかったのは確かだ。だがSourceKitを見たら、その考えが変わってしまいそうだ。 SourceKitはGoogle Chromeの機能拡張として提供される。左側にファイルツリー、右側に編集画面が表示される。開発者向きに各言語向けのハイライトに対応している。さらにテーマも幾つも用意されており自分好みの配色を選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
