csscssはスタイルシート上の重複定義をチェックするソフトウェアです。 スタイルシートの便利なところは多少間違っていたとしてもWebブラウザ側が良いように解釈してくれて描画してくれることです。そのため、更新を繰り返すと徐々に不要な定義ができたり、重複したりして思わぬミスにつながったりします。それを防ぐのに使えそうなのがcsscssです。 例です。複数のスタイル定義が重なっているとのことです。 csscssを使うと複数のスタイルシートについて、その重複度合いをチェックできます。ローカルのファイルはもちろん、URLを指定してリモートのファイルに対してチェックを行うこともできます。さらに最小のマッチ回数も指定できますので、重複が多い箇所だけを洗い出すと言った目的にも使えます。 csscssはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 決ま
HTML_CodeSnifferはウェブアクセシビリティ改善のためのブックマークレットです。 Webは限られた人たちのものではなく万人向けのものであるべきです。そこで考えられるべき項目として障害のある人に対するアクセシビリティです。そのチェックに使えるブックマークレットがHTML_CodeSnifferです。 実行すると右上にフローティングウィンドウが出ます。エラー、警告、通知の3つに分けてポイントが出ます。もちろんポイントが少ない方が良いです。 各項目の説明を見られます。これらはW3Cのウェブコンテンツ・アクセシビリティ・ガイドラインに則っています。 指摘されている箇所を確認できるマーカーも出ます。 MOONGIFTの場合…がっくりするくらいのエラー数です…。 アクセシビリティと漠然と言われてもなかなか具体的な施策が思いつきませんが、エラーや警告という形で表してくれれば対応もとりやすくな
Scriptedはnode.jsで作られたWebベースのプログラミングエディタです。 Webブラウザ上で開発できる環境が徐々に整いつつあります。ローカルとはまた違う魅力が提供できるでしょう。今回はその一つ、Scriptedを紹介します。 メイン画面です。左側に実行したディレクトリにあるファイル一覧、右側がエディタになります。 各プログラミング言語に対応したハイライター付きです。 TODOについては緑のアイコンが表示されます。 構文チェッカーもあります。 縦にスプリットもできます。 キーボードショートカットもあります。 ScriptedはWebブラウザ上で動作しますが、ファイルの保存にも対応しています。操作性はテキストエディタとして十分な機能があります。コーディングするエリアも可読性が高く、使いやすいです。 Scriptedはnode.js/JavaScript製のオープンソース・ソフトウェ
ResponseはレスポンシブWebデザインを実現するのに必要な情報を取得できるJavaScriptライブラリです。 レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 テストの画面です。ウィンドウや画面のサイズが出ています。 ウィンドウサイズを縮めると値がリアルタイムに変化します。 縦のスクロール値も出ます。 各種判定値が用意されています。 ウィンドウサイズによる簡易的な判定も可能です。 もちろんこのページ自体がレスポンシブです。 Responseを使えば現状のウィンドウサイズやスクロール位置などレスポンシブWebデザインを実現するのに必要な情報が一気に取得できます。さらにリサイズなどのコールバックにも対応しているので、表示し
EjectaはCanvasとオーディオ、JavaScriptをサポートしたフレームワークでネイティブ並のiOSアプリ（ゲーム）を開発できます。 iOSアプリでゲームを開発する際にはObjective-Cを使うのが基本でしょう。WebベースであったりTitaniumのようにJavaScriptのエンジンを経由するとそれだけ速度が低下してしまいます。しかしそんな限界に果敢に挑戦するフレームワークがEjectaです。 サンプルです。JavaScriptとは思えないほどスムーズな動きです。 指を動かすと線の太さ、明るさが変化します。 これくらい細くもできます。 線の数をぐっと減らしました。 Ejectaはゲームとアニメーションに特化したソフトウェアで、Canvasとオーディオだけで構成されています。JavaScriptは素のJavaScriptとして実行されます。これによりHTML5のゲームは多少
Gridster.jsは自由にレイアウトが組み替えられるUIを提供するjQueryプラグインです。 Pinterestに感化されたのか、ブロックの高さを組み替えつつ表示するUIが流行っています。今回紹介するGridster.jsはそれに似ていますが、横幅も変更可能で、さらに自分でドラッグアンドドロップして並びが変更できるのが特徴になっています。 ドラッグして場所を移動できます。 こんな感じに並んだりもします。 Gridster.jsはjQuery製のプラグインになっています。使う最小のカラム数、行数を指定できます。使える場所としてはiGoogle的なウィジェットを自分で並び替えて表示する類のUIであったり、写真を表示したりするのに良いかも知れません。 Gridster.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
SextantはRailsアプリケーションのルーティング情報をWebブラウザ向けに出力するソフトウェアです。 Railsの魅力の一つであるルーティングはとても便利ですが、慣れるまでリンクの書き方を忘れてしまったり、どうルーティングされているかをコンソールで確認することが多いのではないでしょうか。都度rakeを実行しても良いですが待たされる時間が邪魔臭いと感じる方はSextantを使ってみましょう。 ルーティング情報がWebブラウザで確認できます。 SextantをGemfileのdevelopmentグループでだけ読み込ませば開発時のみ使えて便利です。また、SextantはRails4.0にマージされており、その有用性が確かであると言えます。 SextantはRuby製、Ruby on Rails用のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る
dgridはDojoを使ったWebブラウザ向けグリッドライブラリです。 jQueryなどと並んで有名なJavaScriptライブラリのDojo。そんなDojoで使える高機能グリッドフレームワークがdgridです。 iTunes風の表示です。アルバムやアーティストを選択すると内容が変わります。 ガントチャート風表示です。タスク同士の関連性が表現できています。 サブタスクも表示できます。 テーブル表示です。 クリックで説明を表示します。 詳細リスト表示です。 ギャラリー表示です。 Todoデモです。 消し込めます。データはローカルストレージに保存されるので再読みしても消えません。 dgridの特徴としてはモダンなアーキテクチャ、機能拡張対応（カラムのリサイズ、ドラッグアンドドロップによる並べ替えなど）、スキン、モバイル対応、キーボード操作対応となっています。デスクトップブラウザはもとより、iO
BootswatchはTwitterのBootstrapテーマエディターです。 BootswatchはTwitterの開発したBootstrapをLESSにし、それらを容易にカスタマイズできるようにしたソフトウェアです。テーマのように色合いを変えて様々なWebサイトに適用できるようにします。 Bootswatchのトップページ。これもまたBootstrapで作られています。 作成されたテーマの一つ、Slate。 Cerulean。 Cyborg。 Journal。 Simplex。 Spacelab。 2階層のメニューになっています。 United。 Bootswatchの手順としては、Bootstrapのソースコードをダウンロードして設置します。次にvariables.lessとbootswatch.lessを修正します。もしLESSがない場合はインストールします。修正が終わったらmak
Meteorはサーバとクライアントが同一のコードで動作するnode.js用Webアプリケーションフレームワークです。 久々にぞくぞくさせられるWebアプリケーションフレームワークの紹介です。Meteorはnode.js用のWebアプリケーションフレームワークですが、同一のコードがサーバとクライアントで動作するユニークな特徴を持っています。 インストールします。コマンド一行でダウンロードからインストールまで実行されます。 インストールされました。 まずアプリを新規作成します。 そしてサーバを立ち上げます。これで準備完了です。 最初の画面です。ボタンを押します。 console.logに出力されています。ちゃんとコードが実行されています。 サンプルのTodoアプリです。こちらはGoogle Chromeです。 こちらはSafariです。同じURLを開いています。 Google Chromeで編
JSTouchControllerはiOSのMobile Safari上でマルチタッチを認識するライブラリ。 JSTouchControllerはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。iOSの面白さは言うに及ばないが、技術的に見た時に欠かせない要素の一つがマルチタッチシステムではないだろうか。複数の指による操作を同時に認識することで今までにないアクションが可能になる。 デモ 仮想的なゲームパッドを配置したり、複数のキャラクターを同時に扱うようなゲームもできる。音ゲーと言われるゲームにも欠かせない要素だ。そんなマルチタッチをWebブラウザ上で使えるようにするのがJSTouchControllerだ。 JSTouchControllerはMobile Safariで使えるマルチタッチシステムだ。利用できるのはiOSになる。Webブラウザで表示するとア
Alloy UIは数多くのウィジェットを提供するUIフレームワーク。 [/s2If] Alloy UIはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア。Webの役割は大きく変わってきている。シンプルなホームページと言われた時代は終わり、Webアプリケーションやソーシャルサービスのようにオンライン上でやり取りされるデータが増している。 入力補完 それに伴ってWebベースでもリッチなUIが求められるようになってきた。日付をカレンダー入力したり、ソートやドラッグアンドドロップなどを実装して欲しいと言われることも多い。そのようなニーズに幅広く答えられるライブラリがAlloy UIだ。 Alloy UIは実に多くのコンポーネントを提供する。入力補完、グラフィカルなボタン、カレンダー、画像が定期的に切り替わるスライダー、カラーピッカー、グラフ、ダイアログ、インラインエディタ
UIKitはWebアプリケーション向けのダイアログ、カラーピッカーといったコンポーネント群を提供するライブラリです。 最近、TwitterのBootstrapが人気ですが、同じようにWebアプリケーションをデザインする際に使えそうなコンポーネント群がUIKitです。 まずダイアログ系のコンポーネントです。 閉じるボタン付き。 グレーアウトしたダイアログ。 HTML埋め込みもできます。 カラーピッカーコンポーネント。 確認ダイアログ。 通知（右上）。自動的に消える設定もできます。 コンテクスト（右クリック）メニュー。 主なコンポーネントとしては、ダイアログ、確認ダイアログ、カラーピッカー、クリックで回転するカード、通知、メニュー、ボタン式のドロップダウンとなっています。デザインがすっきりとしているので今風のWebアプリケーションに似合いそうです。 UIKitはHTML5/JavaScript
FGalleryはiOS用のフォトギャラリーアプリです。 iOSには写真を楽しむアプリがとても多いです。自分でもそんなアプリを作ってみたいと思ったならばFGalleryを参考にすると良いかもしれません。 メイン画面です。3つのタイプに分かれています。 まずローカル。アプリ内の写真を表示しています。 一覧のタイル表示です。 こちらはリモート。外部の写真をURL指定で表示します。 こちらはカスタム。ボタンをカスタマイズして設置しています。 FGalleryはシングルタップによるフルスクリーン化、ダブルタップでのズーム、ピンチによるズーム、キャプション表示、サムネイルグリッド表示、回転のサポート、ローカルまたはURLによる画像読み込み、タブバーのカスタマイズに対応しています。 FGalleryはObjective-C製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
scri.chはWeb上で線を引けるソフトウェアです。書いた作品は保存したタイミングでユニークなURLが生成されます。 Webブラウザ上でイラストを書いたりするサービスは多数ありますが、それをもっとシンプルにしたサービスがscri.chです。マウスで自由に線を描いて共有できます。 最初の表示です。真っ白で何もないかのようです。 マウスでドラッグすると線が描かれます。そうするとSave/Newボタンも表示されます。 保存するとユニークなURLが表示されます。 書き足しました。もう一度SaveするとURLが再度変わります。 scri.chの面白さとしてはクエリパラメータでカスタマイズできることです。backgroundで背景色を、foregroundで線の色を変更できます。さらにsizeを使ってキャンバスのサイズを変更できたり、marginでマージンサイズを変更できます（デフォルトでは画面いっ
勤怠戦隊キンタインは出社、帰宅などのアクションを記録し、ソーシャルサービスにメッセージを送るシンプルな勤怠管理サービスです。 TwitterやFacebookでよく「出社なう」「帰宅開始」といったメッセージを残す人がいる。そんな企業戦士のために生み出されたサービス、それが勤怠戦隊キンタインである！ シュッキーン！これが勤怠戦隊キンタインのメイン画面だ！ ログインしたぞ！レッド、ブルー、ピンク、グリーン、イエローからアクションを選ぶんだ！やはりイエローはピザキャラか！ クリックすれば自動でFBに投稿したりTwitterでツイートしてくれるのだ！ログも自動で蓄積されるぞ！これで逃げ道はないぞ！ 勤怠戦隊キンタインではクリックするだけでアクションを記録できる。食べている＝イエローにすると常にピザばかり食べている人になってしまうので注意が必要だ。もちろんフォークして自分で6人目のメンバー、勤怠ブラ
Inflickityは写真群の左右をつなげて無限に左右へスクロールできるようにするJavaScriptライブラリです。 写真は見せ方次第でインパクトが大きく変わりますが、10程度の写真をスムーズに見せる際に使えそうなのがInflickityです。 二つの帯が表示されています。 マウスでドラッグして左右に動かせます。 二つの帯は独立して動きます。 スマートフォンやタブレットの方が動きがスムーズです。 デモ動画です。動かした後に惰性が残ります。 Inflickityはリストでまとめた画像を横並べにして、その上で左右をつないでロールできるようにします。繋がっているので限界なく回転できます。お勧め写真を並べたりするのに使えそうです。何より猫が良いです。 InflickityはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIF
The-M-ProjectはiOSやAndroidといったスマートフォン向けに特化したWebアプリケーションフレームワーク。 The-M-ProjectはJavaScript/HTML5製のオープンソース・ソフトウェア。Webアプリケーションが本格的に取り入れられるようになっている。AjaxなどによるWebアプリケーションの操作性向上に加えて、JavaScriptで実現しうる機能が増えていることに要因があるだろう。 サンプルのTodoアプリ そしてもう一つがHTML5の存在だ。PCブラウザ向けにはまだ全面採用は難しいものの、スマートフォンであれば採用できるだろう。そんなスマートフォン向けのWebアプリケーションを開発する際に使えるフレームワークがThe-M-Projectだ。 The-M-ProjectはHTML5を採用したWebアプリケーションフレームワークだ。iOSはもちろん、Andr
SpeedometerはPython製のネットワークモニタです。ターミナルながらグラフを表示します。 サーバのネットワーク速度は適切な運用に際して必要な情報です。GUIであればグラフィカルな、CUIであれば数値を出力するものはありますがSpeedometerはCUIでありながらグラフィカルな表示を行うモニタソフトウェアです。 インストールします。Ubuntuならapt-getで一発インストールできます。 実行しました。右からグラフが表示されていきます。 eth0のイン/アウトをグラフ化しています。 目立って大きい値は数字が表示されます。 Speedometerではファイル名を指定してダウンロードスピードをグラフ化することもできます。またインターバルの時間を変更したりすることも可能です。 SpeedometerはPython製、LGPLのオープンソース・ソフトウェアです。 MOONGIFTは
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
