スマートフォン向けWebアプリケーションフレームワーク·App.js MOONGIFT
App.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 スマートフォン向けにはアプリ開発もありますが、審査などなしでサービス提供したいと思ったらスマートフォン向けWebアプリとしてリリースする手もあります。今回はそのためのフレームワークApp.jsを紹介します。 YouTube検索アプリ。まるでネイティブアプリのようです。 画像検索。検索結果がPinterest風に並んでいます。 スケッチアプリ。何とタッチ操作で絵を描いて、それを保存できてしまいます。 一覧に戻るとちゃんと登録されています。すごい。 オリジナルのmemeを作るWebアプリ。画像の上下に好きな文言を追加できます。 例えばこんな感じに。 フィード系。非常に良くできています。 ブックマーク機能なるものもあります。 App.jsではHTMLを指定されている記法に沿って書き進め
JavaScriptでGeckoブラウザを自動操作·SlimerJS MOONGIFT
SlimerJSはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（Mozilla Public License）です。 スクレイピングをしたり、テスト自動化を行う際に役立つのがPhantomJSですが、ブラウザはWebKitベースです。今回はGeckoベースのSlimerJSを紹介します。 実行した場合です。スクリプトを書いてSlimerJSに渡します。 Geckoベースのブラウザが立ち上がってテストが実行されます。 MOONGIFTもちゃんと表示されます。 ログも表示されます。 SlimerJSはスタンドアローン版でWindows/Mac OSX/Linux向けのバイナリも提供されています。XULRunnerを使って実行もできますので、使いやすい方を選択すれば良いでしょう。Geckoエンジンを使った自動処理に便利です。 MOONGIFTはこう見る 今はHTML
GitHubのアクティビティカレンダー風表示·Cal-HeatMap MOONGIFT
Cal-HeatMapはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 GitHubの活動によって色が変わるヒートマップはプログラマの間で人気があります。同じような表示を行うJavaScriptライブラリがCal-HeatMapです。 デモです。それっぽい表示が出来ています。 開始日を指定する事もできます。 年月だけの表示。 日付ごとの小さな表示版。 二ヶ月分表示。 カラーリングを変えられます。 月によって変更もできます。 Cal-HeatMapはある日付における状態に応じて色を変えるのが面白いところです。中長期的に取得しているデータがあれば、そのJSONをCal-HeatMapで見てみると面白い見せ方ができそうです。 MOONGIFTはこう見る Webサービスの数多くは今、または未来における行動に関するデータだけを見せます。そして過去については大して
テーブルの情報をJSON化·Table-to-JSON MOONGIFT
Table-to-JSONはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 先日、JSONからテーブルを自動生成するTablerを紹介しましたが、今回はその逆です。テーブルタグからJSONを生成するTable-to-JSONを紹介します。 デモのテーブルです。Convertボタンを押します。 ダイアログが表示されます。確かにJSONデータで取り出せています。 Table-to-JSONではオプションとして指定したカラムを省く（またはそれだけにする）ことや、非表示な行は省くといった指定ができます。テーブルタグのデータを再利用する際に役立つのではないでしょうか。 MOONGIFTはこう見る Table-to-JSONの面白い点としては任意のテーブルに対して使える点です。うまく使えばテーブルのデータをJSONとして扱いやすく取得できます。この手
JSONを見やすく整形、加工·HULK MOONGIFT
HULKはHTML/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 JSONを使ってWebアプリケーションを開発する事が増えてきましたが、そのデータは一行にまとめられる場合が多く、人の眼では確認しづらいのが難点です。そこで使ってみたいのがHULK、WebベースのJSONエディターです。 上にあるのがデモのJSONです。大抵はこれが一行で出力されるでしょう。下にあるのがHULKを使った表示です。 データがテキストボックスなどを使って表示されているのが分かるでしょうか。長文は自動的にテキストエリアになっています。 項目が多いとデフォルトでは折り畳まれた状態になります。ボタンを押して伸張できます。 新しい項目を追加すると、上に表示されているJSONが自動的に更新されます。 全て折り畳むとこのようにコンパクトになります。 HULKはあくまでもサンプルなので、任意
ブロック図表示機能のついたMarkdownエディタ·LiveDiag MOONGIFT
LiveDiagはMac OSX用のオープンソース・ソフトウェア（BSD License）です。 Markdownは普及したテキスト記法になっていますが、物足りないと感じることも多いのではないでしょうか。有志による拡張もされていますが、今回はMarkdownエディタにブロック図生成機能を追加したLiveDiagを紹介します。 メイン画面です。左側がエディタ部、右側がプレビューになります。実際にブロック図を表示するためにはblockdiagなどをインストールする必要があります。 ブロック図の例。波括弧でくくられた部分が変換されています。 シーケンス図。より複雑な描画もできます。 アクティビティ図。システムとユーザの関係性などを表現するのに最適です。 ネットワーク図。ブロックで表される簡単な図ですが、構成を表現するなら十分でしょう。 LiveDiagでは波括弧＋図の種類を指定することで各ソフト
ローカルで編集すると即座にSCPでアップロード·sync MOONGIFT
syncはPython製、MIT Licenseのオープンソース・ソフトウェアです。 Dropboxは便利ですが、それに慣れてしまうと独自のサーバにコンテンツをアップする時に不便に感じた経験はないでしょうか。そこで使ってみたいのがsync、SCPを使ったファイルアップロードツールです。 実行しました。実行の際にはローカルとリモートのディレクトリパスを指定します。 ファイルを作成しました。自動的にアップロード処理が開始されます。 syncはシンプルなツールで、ローカルでファイルを修正したり作成したりすると自動的にアップロード処理を行ってくれます。名称はsyncですが、リモート側での変更、追加は感知してくれませんのでご注意ください。 MOONGIFTはこう見る 最近はセキュリティ上の理由でFTPは解放しなくなってきています。そうなると使われるのがSCPです（SFTPもありますが多くないように思
二つのドメイン間の表示差分をチェック·wraith MOONGIFT
wraithはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webサイトがリニューアルしたりちょっと表示を変更したりした際にそれをチェックする術があると便利です。今回はBBCニュースが開発したwraithを紹介します。 インストールは一行のコマンドを実行するだけです。 設定を作成した後はrakeコマンドを実行するだけです。 指定したURLの画像保存が終わるとその差分をチェックします。 このようにちょっとだけ表示が違うのが分かります。 ブラウザベースで見た場合もちょっとだけ異なるようです。 こちらが取得したファイルの一覧。多様な画面幅に合わせて画像が取得されています。 wraithは二つのドメイン、複数のパスに対してその表示差分をチェックできます。異なる部分は青い色で表されます。基本的にはGoogleのような国際的サイトがターゲットになりそうです。画面幅は320〜
JSONデータを使ってテーブルを表示·Tabler MOONGIFT
TablerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。 基本的な使い方。カラムを定義してJSONデータを当てはめるだけです。 全てを表示するのではなく、指定したキーだけを表示させる事もできます。 Ajaxデータで取得したデータを使って表示をよりダイナミックに。 ページネーション付き。ページ番号またはnextボタンで次のリストに遷移します。 Tablerでは元々データがJSONであり、レンダリングはTablerに任せる事ができます。システム側から出力されるリストに合わせてテーブルの表記を変更する事も簡単でしょう。ベタにHTMLタグを書くよ
これは凄い！RubyでPhotoshopファイルを解析·PSD.rb MOONGIFT
PSD.rbはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webやアプリのデザインの際にPhotoshopを使う事がよくあります。そんな時に出来上がった画像を分析してコーディングに落とし込んだりします。それの自動化さえできるようになるのではないかというライブラリがPSD.rbです。 インストールはRubygemsで行えます。 適当なPSDファイルを読み込んでparse!を実行します。trueが返ってくれば解析完了です。処理はファイルサイズにもよりますが結構重たいです。 treeで木構造を出力します。こちらもファイルが大きければ膨大になります。 PSD.rbでは構造、サイズ、レイヤー/フォルダサイズと名前、フォントデータ、カラーモード、ベクターマスク、フラットな画像データなどが読み取れます。Photoshopのファイルを使ったサービスが捗りそうです。 MOONG
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
MacRubyでのアプリケーション開発の参考に·StopWatch MOONGIFT
StopWatchはRuby製のソフトウェア（ソースコードは公開されていますがライセンスはオープンソースではありません）です。 Mac OSXではRubyを使ってGUIアプリケーションを開発できます。とは言えできるとは知っていつつも実際に作ってみないと何ができるのか分からないかも知れません。そこで今回はMacRubyで作られたストップウォッチ、StopWatchを紹介します。 メイン画面です。startボタンを押します。 カウントがはじまりました。0.1秒単位でカウントされます。 stopボタンを押せば止まります。 シンプルなアプリですが、ボタンによる処理の実行や表示のアップデート、時間による処理など色々な場面で使えそうな機能が盛り込まれています。ちょっとしたユーティリティなどをMacRubyで開発するのに参考になりそうです。 MOONGIFTはこう見る Mac OSX（に限りませんが）で
JavaScriptで作られたLua VM·lua.vm.js MOONGIFT
lua.vm.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Luaはスクリプト言語で、かつプロトタイプベースのオブジェクト指向言語でもあります。という事はLuaとJavaScriptは意外と似通っているのかも知れません。という訳で（？）今回はlua.vm.js、JavaScriptで作られたLua VMを紹介します。 こちらがLuaのコード。typeがtext/luaになっています。 ちゃんとJavaScriptで実行されて結果が得られます。 左がLuaのコード。右側がその実行結果です。localやprintといった差はあれどJavaScriptと似ています。 lua.vm.jsはEmscriptenを使ってLuaをJavaScript用にVM化しています。純粋なLuaのコードはもちろん、JavaScriptのコードを実行したり、DOMを操作す
SSHの接続情報を一手に管理·Shuttle MOONGIFT
ShuttleはMac OSX用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 プログラマーであればSSHでサーバに接続して処理を行うといった操作はよく行っていると思います。その際、各サーバごとに秘密鍵やユーザ名が違ったり、IPアドレス指定だったりすると覚えておけません。それを一括で管理できるようにしてくれるのがShuttleです。 メニューです。 設定ファイルです。JSONで設定するだけで、使い方はすぐに分かると思います。 設定ファイルのJSONにはSSHの接続コマンドを書くだけです。後はメニューバーに常駐しているShuttleから指定した接続先を選択すれば、ターミナルアプリが立ち上がって接続が開始されます。Terminalの他、iTermなども指定可能です。 MOONGIFTはこう見る 筆者の場合、sshでの接続先ごとにaliasを設定しています
レスポンシブ対応のフラットなUIフレームワーク·Furatto MOONGIFT
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。 ボタンデザイン。四角い、立体感のないデザインです。 カラーバリエーションも良くあるフラット系になっています。 ボタンにアイコンを載せることもできます。 画像。丸く表示もできます。 囲みをつけることもできます。囲みの色も変更可能です。 テーブル表示。こちらは通常のテーブルです。 ちょっと詰まった感じのテーブル。 行ごとの色変更も可能です。 レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんで
スモールチームのためのファイル共有/コラボレーション·Seafile MOONGIFT
SeafileはC/Python製のオープンソース・ソフトウェア（GPL v3）です。 スモールチームで作業する時に何が必要かと考えると、まず掲示板やチャットなどのコミュニケーション、各自のタスク管理そしてファイル共有なのではないでしょうか。それらを全て詰め込んだユニークなソフトウェアとしてSeafileを紹介します。 ダッシュボードです。ライブラリにファイルが一覧表示されています。 ダウンロードする際には専用クライアント（Windows/Mac OSX/Linux/Android/iOS版が用意されています）をインストールしておく必要があります。 ダウンロード場所の設定があります。 autoSync設定にしておくと更新された場合に即座にアップデートされるようになります。Dropboxライクです。 Wikiもあります。 グループを作って特定のメンバー間で情報共有できます。 ディスカッション
Ruby on RailsシステムのWeb APIドキュメントを生成·Apipie-rails MOONGIFT
Apipie-railsはRuby/Ruby on Rails用のオープンソース・ソフトウェア（MIT License）です。 システムのドキュメンテーションは一定の規模になってくると必然的に必要になります。特にRESTfulなどでWeb APIを提供している場合はそうです。そこでフレームワークにRuby on Railsを用いてる方にお勧めしたいドキュメンテーションシステムがApipie-railsです。 インストールした後、ジェネレートします。 例えばこのように記述します。コントローラのメソッドの上部に記述するイメージです。 Apipeiのルートにアクセスします。ドキュメントを作成しているリソースが一覧されます。 メソッドの説明です。必要な引数などが説明されています。 Apipie-railsではメソッドの説明やAPIのバージョン、エラーについて、引数などを一覧で書きます。一般的にこの
グループでのクリエイティブ活動をサポートする·echoplexus MOONGIFT
echoplexusはnode/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 オンラインでスモールチームを組んでクリエイティブな作業（プログラミング、デザイン）を行うならお勧めしたいのがechoplexusです。チャット、コーディング、ドローの3種類の機能を提供します。 まずチャット。テキストオンリーの渋いチャットです。 /nickで表示名を変えられます。まるでIRCのようです。 新しいチャット部屋を作る事もできます。 こちらはコード。よくあるサービスのようにHTML/JavaScript/CSSを記述してその場で実行できます。 こちらはドロー。マウスで絵が描けます。 色も多様に用意されています。 echoplexusを使うとWeb APIを使うようなシンプルなサービスであればてきぱきとできてしまいそうです。グループでコーディングしたり、チャットしたり、概念を
BootsrapをGoogle+風に·Bootplus MOONGIFT
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
