Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部

開発者であれば手はキーボードのホームポジションに置き続けるのが効率的なはずです。しかしGUI操作を行う際にはマウスなどを使わざるをえません。ウィンドウの場所や大きさを変える度にマウスに手をやるのは面倒です。 そこで使ってみたいのがRectangleです。キーボードショートカットでウィンドウ操作を行うソフトウェアです。 Rectangleの使い方 起動しました。 キーボードショートカット一覧です。自分で変更も可能です。 こんな感じでウィンドウを画面に寄せたりできます。 設定です。 Rectangleは多彩なショートカットが用意されているので、まずそれを覚えないといけません。一旦覚えてしまえば、素早くウィンドウを移動させられるようになるでしょう。画面の端などにぴたっと寄るので、マウスで移動させるよりも素早く、的確に移動できるはずです。 RectangleはSwift製のオープンソース・ソフトウ

PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

JSFiddleやCodePenなど、HTML/JavaScript/CSSのプレイグラウンド的サービスが多数あります。多くのサービスは専用のURLが払い出され、そのURLにアクセスして使います。そして、そのサービスが落ちたりすると使えなくなるリスクがあります。 そんな中注目したいのがCodeWichです。コードを圧縮して専用のURLとする、URLを覚えている限りはあなたのコードがなくなったりしないプレイグラウンドサービスです。 CodeWichの使い方 入力はTypeScriptベースになっています。 CSSの入力補完も効いています。 テーマの変更や入力内容のlocalStorage補完に関する設定も可能です。 実行例です。 Canvasを使った表現もできます。 CSSを使ったものも。 CodeWichは共有を行う際にURLが生成されますが、 https://codewich.com/#

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コマンドを入力する時、多くはオプションを指定して実行します。それらは非常に数多くなることがあり、一行のコマンドが長くなってしまいます。その点、対話型のコマンドでは指定された情報を順番に入力していけば良いので分かりやすくなります。 fillinは任意のコマンドを対話型にしてくれるソフトウェアです。 fillinの使い方 例です。fillin コマンドに続けて実際のコマンドを書きます。その際 {{}} で囲むことで入力が対話型になります。 $ fillin echo "Hello {{lastname}} {{firstname}}" lastname: Atsushi firstname: Nakatsugawa Hello Atsushi Nakatsugawa : を使うと入力が

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー

iOSのテスト、ちゃんと行っているでしょうか。もちろん人力ではなく、自動化のテストです。ユニットテストは書きやすいですが、UIが絡んでくるとなかなかテストが難しいケースもあり、十分に行われていない婆もあるようです。 そこで使ってみたいのがEarlGrey、Google製のiOS自動テストフレームワークです。 EarlGreyの使い方 EarlGreyの特徴はネットワークや操作を伴う中での同期した動作です。 EarlGreyのテストを実行したところです。スクロールなどをしつつ、テストが行われています。 デフォルトでは自動的に同期をはかってくれるとのことですが、自分のタイミングにカスタムすることもできるとのことです。XCTestと連携できるので、これまでのテストコードと一緒に活用できるでしょう。 EarlGreyはiOS用、Apache License 2.0のオープンソース・ソフトウェアです

Cloud CrowdはRuby製のオープンソース・ソフトウェア。大量のデータを処理しようと思った時にはMapReduceのような仕組みに注目が集まる。テキストのみならず、大量のOCR処理が必要になったり画像をサムネイル化したいといった時にはどのようなシステムを構築するのだが良いだろうか。 Rubyを使って分散処理 一時的に無数のシステムを立ち上げ平行で処理を走らせる時に注目したいのがAmazon EC2だ。以前、ニューヨークタイムズでは1,100万枚を越える画像をPDFに変換するという処理をAmazon EC2のインスタンスを100立ち上げて行ったという事例がある。どうようのシステムを構築するのがCloud Crowdだ。 Cloud Crowdも利用するのはAmazon EC2だ。アクションはRubyで定義するようになっており、テキスト処理のみならず画像変換などの柔軟なシステム処理が可

このソフトウェアは以前に紹介済みだが、オープンソース化されたので再度紹介したい。Webアプリケーションにとってグラフは鬼門ではあるが、実現できればユーザビリティを向上できる大きな機能の一つだ。ただの一覧や数字を並べただけでは分からない、具体性を感じられるようになる。 複雑なグラフも難なくこなす グラフを表示するのはHTML、画像、Canvas、Flashが有力で、Flashベースのものが最も表現力に富んでいて多数のブラウザをサポートするだろう。そんな表現力の高いグラフライブラリがFusionCharts Freeだ。 今回紹介するオープンソース・ソフトウェアはFusionCharts Free、Flash + XMLによるグラフ生成ライブラリだ。以前はフリーウェアだったが、ついにオープンソース化された。 FusionCharts Freeはグラフの表示にXMLを用いる。そのためサーバサイド

Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど

※ 画面は公式サイトより 様々なWebアプリケーションが開発され、JavaScriptを駆使したサービスが増えている。中にはWebポータル的なサービスも登場している。例えばiGoogleやPageFlakes、Netvibes、Windows Liveなどが有名だ。 ドラッグで移動も可能 そのようなポータルサービスを自分でも構築するなら使ってみたいのがJPoliteだ。 今回紹介するオープンソース・ソフトウェアはJPolite、jQueryを使ったWebポータルフレームワークだ。 JPoliteはjQuery POrtal Liteの略称で、jQueryを使ってグラフィカルなUIを実現したWebポータルを構築できる。上段にはタブがあり、それぞれ趣の異なるコンテンツを表示できる。iGoogleのように小さなウィンドウをドラッグで移動させることも可能だ。 RSSリーダー風 レイアウトは自由度が

正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを

Google App Engine（GAE）の可能性はJavaをサポートしたことによってその可能性を飛躍的に向上させた。JavaVM上で実装された言語であれば何でも動作する。JRubyもその一つで、Ruby on RailsもGoogle App Engine上で動作する。 GAEのパワーを素早くゲットする とは言えやはりマイノリティだけに色々な準備が必要とされていた。そのため敬遠していた人も多いだろうが、Rails on GAEによって大きく舵を切ることになりそうだ。 今回紹介するオープンソース・ソフトウェアはRails on GAE、GAEでRuby on Railsを動かすためのプラグインだ。 Rails on GAEはRuby on RailsをGAEで動作させるために必要なタスクを予めインストールすることで、後は順番に従って進めるだけでJRuby on Railsができるようにな

Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう（ぜひ試していただきたい）。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え

マインドマッピングを作っている時に説明書きを加えたり、メモを追加することがある。だがそうしたノートは全体図では見られず、ちょっと使い勝手が悪い。とは言ってもアイディアを見いだすのにマインドマッピングのやりやすさは捨てがたい。 アウトライナー × マインドマッピング そんなあなたにお勧めなのがMindRaiderだ。マインドマッピングの手軽さでどんどんメモが作れていく。 今回紹介するオープンソース・ソフトウェアはMindRaider、アウトライン+マインドマッピングという妙技を誇るノートアプリケーションだ。 MindRaiderは3つのカラムで構成されたソフトウェアだ。ちょっと大掛かりな気がして取っ付きが悪いかも知れないが、実際の機能は便利だ。まず左上にアウトラインが表示される。それを選択すると、真ん中のカラムに詳細が表示される。 タグクラウド表示 真ん中のカラムでは詳細の表示と同時にその階

※ 画面は公式サイトデモより もし、GoogleがGmail、Googleカレンダー、アドレス帳さらにGDriveを使ったファイル管理などを統合したサービスをリリースしたとすれば、それはまさにOutlookに匹敵する情報統合プラットフォームになるかも知れない。 メール だがそのようなサービスは今の所リリースされていない。もしあなたがそのようなサービスを希望するならば迷いなく6zapをお勧めしたい。 今回紹介するオープンソース・ソフトウェアは6zap、Webアプリケーションによる個人情報管理プラットフォームだ。 6zapが提供する機能はメール/カレンダー/アドレス帳/ファイル管理そしてパスワード管理となっている。メールはスターを付けたり検索することができる。操作はAjaxを使うことでとてもスムーズにできる。 カレンダー カレンダーはGoogleカレンダーライクのインタフェースで、時間をドラッ

個人的にアクションのついたパワーポイントのプレゼンテーションは好きではない。大抵余計なアクションであるし、印刷時の見栄えも良くないことが多い。また、説明を受けないとアクションの前後の意味が分からない場合もある。印刷時のことも含めて、シンプルな作りになっているものが好感がもてる。 PDFを華麗なプレゼンテーションに 発表資料をそのままネット上にアップロードして見られるようにするのにPDFは便利なフォーマットだ。さらに言えばPDFのままプレゼンテーションが行えれば言うことはない。 今回紹介するオープンソース・ソフトウェアはImpressive、PDFをプレゼンテーションにするソフトウェアだ。 元々この手のソフトウェアとしてはKeyJnoteがある。同じPython製なので、関係があるのだろう。必要なライブラリさえ入れれば、Windows/Mac OSX/Linuxいずれのプラットフォームでも動

Sparklinesとは一行くらいの高さで表示される小さなグラフのことだ。小さいがために、各行単位でグラフを表示したり、刻々と変化するグラフを表すのに便利だったりする。数十のグラフを一つの画面上に表示する際にも、データとの整合性がとりやすく、見栄えもいい。 Excelで使えるSparklines 最近、色々な場所で見るようになってきたが、まだまだ一般化される必要があるだろう。その手助けになるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはSparklines for Microsoft Excel、ExcelでSparklinesを実現するソフトウェアだ。 Sparklines for Microsoft ExcelはMicrosoft Office 2000または2003向けに作られたアドオンではあるが、2007でも動作した。棒グラフ、線グラフ、円グラフをはじめとして