プレミアムユーザー限定記事
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
- 2017/12/14
- できることを全力でやる
- 2017/11/25
- 恥ずかしさを感じないためにできること
- 2017/11/11
- プロジェクトを遅延させないコミュニケーションパス管理
TouchstoneJS – ハイブリッドアプリ開発に使いたいUIフレームワーク
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。TouchstoneJSは最新のUIフレームワークで、...
hive - Go製のクラウドソーシングバックエンド
日本でもここ数年話題になっているのがクラウドソーシングです。日本では案件という形で割と大きめなことが多いようですが、世界ではアンケートやアイディア集めなどごくごく小規模な場合もあります。hiveはそんなクラウドソーシングサービスを提供するためのソフトウェアですが、特徴としてUIがないというのが挙げられます。APIのみの...
JXcore – マルチスレッド対応のnode互換サーバ
ここ数年、node（node.js）の人気が高まっています。大型Webアプリケーションを開発に向いているのかと言った疑問点はありつつも、採用例は増えています。ノンブロッキングな特性も好まれる要因となっています。特にnodeを使っていて遅いと感じることはありませんが（まだそれほど大型なWebアプリケーションを作っていない...
Better Xcode ibeam cursor - Xcodeのカーソルをほんの少し見やすく
プログラマーは黒バックのエディタ画面を好みます。例えばXcodeでもそうです。文字を打っている限りは問題ないのですが、やっかいなのはマウスを動かすとキャレットが縦に細いのでマウスカーソルを見逃しやすくなるということです。マウスカーソルがなくなってイライラした経験を持っている人も少なくないでしょう。Better Xcod...
wysihtml – カスタマイズも簡単。HTML5 validなWYSIWYGエディタ
Webブラウザ上で使えるWYSIWYGなエディタは昔からずっと存在します。にも関わらず新しいソフトウェアが年々登場しているところを見ると、自分のサイトや使い方にぴったりマッチするツールがないのかも知れません。とにかくカスタマイズがしやすく自分たちのサイトに自由に組み込めるものが良いと考える方はwysihtmlを使ってみ...
Amethyst - キーボードでウィンドウを操作するMac OSX用ユーティリティ
GUIのOSにおいてウィンドウが重なって表示されたり、たくさんのウィンドウが並ぶと作業効率が非常に悪くなります。そのたびにマウスで探したり、新しいウィンドウを開いたりするのはとても面倒です。そこでウィンドウマネージャが必要になります。今回紹介するAmethystはMac OSX用のウィンドウマネージャで、xmonadを...
Firefox.html – FirefoxのUIをHTMLで再現
FirefoxのUIは徐々に変更されており、現在はGoogle Chromeにかなり感じになっています。それが特に悪いことはなく、操作性において迷いがなくなるので相互にブラウザを変更しても違和感なく使えるようになりそうです。そんなFirefoxのUIをHTMLで再現したのがFirefox.htmlです。元々ネイティブの...
Skyline - CSSフレームワーク開発のベースに
どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。そこで使ってみたいのがSkylineです。Skylineはデザインフレー...
WebGL Fluid – WebGLで水の動きを再現
コンピュータが苦手なのは自然の造形、動きをコンピュータの中で再現することです。3D CGの映画は自然のように描くのを目標に年々進化しています。水、雲、雪、雷、木の育ち方など自然はとても複雑にできています。その一つ、水の動きをWebGLでエミュレートするのがWebGL Fluidです。## WebGL Fluidの使い方...
HTML5 Genetic Algorithm 2D Car - 車の進化をシミュレート
ニコニコ動画で、3Dモデルに遺伝的プログラミングを行って学習させ、最適解（？）を求めていくという動画
Evil Icons – すっきりしたデザインのSVGアイコン集
Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを...
Skeleton - レスポンシブサイトを構築するためのベースデザイン
レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。## S...
iFrame Resizer – iframeサイズを埋め込まれたコンテンツから変更
HTML5からはFlashのようにobjectタグではなく、iframeを使ってコンテンツを埋め込むのが基本になっています。しかしiframeではコンテンツが非同期かつセキュリティ上、そのコンテンツの大きさが分からないのが難点です。iframeコンテンツの大きさに合わせて自動的にサイズを変更するためには親フレームと子フ...
Satellite Eyes - 地図を使った壁紙チェンジャー
地図はとても魅力的なコンテンツです。Googleマップをはじめ、ストリートビューや衛星写真を眺めていても飽きることがありません。そんな地図好きな方にぜひ使ってみて欲しいのがSatellite Eyesです。Satellite Eyesは壁紙チェンジャーなのですが、現在位置を使って地図、衛星写真を取得して壁紙化するところ...
Dante Editor – Webページそのままに編集できるWYSIWYGエディタ
WYSIWYGなエディタは多数存在します。従来はMS Word並に多くのツールバーが表示されて、その中でHTMLコンテンツが自由に組めるといったものが多かったですが、最近では機能は少なめに、スマートな表示が特徴的です。Dante Editorはそんな今時のWYSIWYGエディタの一つになります。一見、編集画面と分からな...
Github issues viewer - GitHubのIssue管理をスタイリッシュに表示
GitHubの便利な機能の一つにイシュー（課題）管理があります。プロジェクト内のTodo、バグ、質問、機能追加など様々な情報を一元的に管理できます。色々な使い方は考えられますが、あのUIが何となく使いづらいと感じる人もいることでしょう。そんな方に使ってみて欲しいのがGithub issues viewerです。GitH...
UI Tiles – Webサイト全体の画面遷移設計に使えるデザイン集
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを...
Proteus - Webフロントエンド開発スターターキット
最近はフロントエンド開発が盛んです。そんな中で開発補助ツールも数多く開発されています。あえて自分で補助ツールを揃えることなく、ジェネレータを使えば一気に整ってしまいます。Proteusはそのためのツールになります。Middleman、Jekyll、Gulpに対応した開発環境構築ツールになります。## Proteusの使...
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。今回はAngularJSをターゲットにしたプロダクト、Suave UIを...
icdiff - CUIでもサイドバイサイドの差分表示
CLIにおけるdiffコマンドは行の削除や追加が縦に並ぶ形になっています。慣れれば理解できないことはないと思いますが、GUIやWebベースの差分ツールでは一般的にサイドバイサイドの差分表示が使われます。この方が人にとっては分かりやすいのでしょう。そんな差分表示をCLIでも可能にするのがicdiffです。## icdif...