GitHubの差分を隣同士に並べて表示·Octosplit MOONGIFT
OctosplitはGitHub上の差分表示をスプリットビューで提供するGoogle Chrome機能拡張です。 GitHubではWeb上でコミットの差分表示が出来て便利です。表示は一つのソース中に差分が出る形になっていますが、人によっては左右にファイルを分けて表示する方が見やすいという意見もあるでしょう。そこで使ってみたいのがOctosplitです。 インストールします。 差分を表示している時にUse side by side viewというチェックボックスが表示されるようになります。 こんな感じで二つのファイルを並べて表示する形に変わります。 長い場合も見やすくなります。 全てを表示しようと思うと結構画面幅を広げないといけないのが欠点かも…。 Octosplitでは縦方向に並んでいるソースをそのまま水平にしたような形で、本来同一行に表示されるべき内容が段差がついて表示されてしまいます。
サーバサイドの開発不要。Webブラウザを使ったデジタルサイネージ·WINT MOONGIFT
WINTはJavaScriptを使うデジタルサイネージシステムです。 駅やビル内にある大型スクリーンに映し出される広告、いわゆるデジタルサイネージはシステム化もその配信システムも複雑なものに感じられますがWINTを使うとサーバとブラウザだけで簡単に組み上げることができます。 読み込み中。コンテンツ部とニュース部の二つに分かれているのが特徴です。 HTMLコンテンツを表示している例。 画像を表示している例。 WINTは予め用意してあるJSONファイルを読み込み、指定した時間ごとにコンテンツを切り替えながら表示します。Webブラウザだけあれば動くのに加えて、JavaScriptだけで作られているのでサーバサイドの複雑な仕組みは一切不要で動かせるのが利点です。 WINTはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザ
レスポンシブなフラットUIなWebデザインをご希望なら·Almost Flat UI MOONGIFT
Almost Flat UIはFoundation Framework用のフラットUIテーマです。 最近のWebデザインの人気のカテゴリの一つがフラットUIです。日本ではまだまだ導入事例は多くないですが、海外のWebサイトでは取り入れているところが増えています。そこでFoundation Frameworkをベースにデザインを組んでいるサイトに使ってみて欲しいのがFlat UIです。 ナビゲーションとサイドバーメニュー。 トップバー。 ボタンの色は様々に用意されています。 大きさ、形も変更可能です。 フォームとタイポグラフィ。 リスト。ネストされたリストももちろんサポート。 ラベル。 プログレスバーにプライスリスト。 スライドショー。 ツールチップもあります。 Foundation FrameworkをベースにすることでレスポンシブWebデザインに対応したフラットUIなWebサイトを手早く
Google Chromeのインスペクタが起動したら通知·Chrome Inspector Detector MOONGIFT
Chrome Inspector DetectorはGoogle Chromeのデベロッパーツールが表示されているかどうかを感知できるJavaScriptライブラリです。 Google Chromeのインスペクタを使うとWeb開発がとても楽になりますが、公開されているWebサービスの状態においては見せたくない情報である可能性もあります。そこで使ってみたいのがChrome Inspector Detectorです。 Webブラウザを普通に開いた状態です。Closedになっています。 インスペクタを開きました。Openに変わっています。しかしなぜかDockedになっています。 本来、この状態がDockedのはず。 Dockedの状態から切り離すとUndockedになりました。 Chrome Inspector Detectorを使うとインスペクタを開いているかどうかが判定できます。その時のイベ
バカが見る、Webブラウザ♪·aprilFools.css MOONGIFT
aprilFools.cssはエイプリルフール用に設定したいカスタムスタイルシートです。 エイプリルフールにはぜひ友人や同僚を驚かせたいと思っている人も多いはず。そこで使ってみたいブラウザ用のカスタムスタイルシートがaprilFools.cssです。 例えば真反対に。 画像だけを反対にもできます。 aprilFools.cssでは主にFirefoxやChrome向けの設定を提供しています。アニメーションは-webkit-としてWebKit向けの設定になっていますが、筆者の環境ではアニメーションがうまく動きませんでした。 aprilFools.cssはスタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見ちゃった♬ aprilFools.cssの面白い使い方としては他人のWebブラウザ設定に潜り込ませる所にあります。そ
Web上でGitの使い方をレクチャー·Learn Git Branching MOONGIFT
Learn Git BranchingはWebベースでGitの使い方を学べるソフトウェアです。 企業においてもバージョン管理にGitを利用するケースが増えてきました。しかしその機能を使いこなせていないことも多いのが事実です。そこでGitリポジトリ、特にブランチに関して学べるLearn Git Branchingを使って学習してみましょう。 トップページです。 自動的にコマンドが入力されて、右側のツリーが更新されていきます。 解決するとコミットが飛んでいきます。 ここからが本番です。 基本的にチュートリアルの通りに進んでいくのみです。 まずコミットから。 入力中は答えが見えないように隠されます。にくい演出です。 Learn Git Branchingは実際のコマンドを入力しながら、それがツリーにどういう影響を与えるかをビジュアル的に確認できます。Learn Git Branchingを通して
これは面白い。Amazonのメニュー表示の仕組みをjQueryで実装·jQuery-menu-aim MOONGIFT
jQuery-menu-aimはAmazonの右上メニューの動作を真似たjQueryライブラリです。 このソフトウェアを見てはじめて気がついたのですが、Amazon.(co.jp|com)の左上にあるメニューはとても面白い動きをしています。一階層目のメニューはマウスオーバーで二階層目の内容がリアルタイムに反映されるのですが、二階層メニューにマウスポインタを動かす際に多少別なメニューに被ったとしても内容が変わりません。それをjQueryで実装したのがjQuery-menu-aimです。 クリックでメニューを表示。 マウスを下に移動すると右側に項目を表示します。 反応はとてもいいです。 通常であれば二階層目の表示反映タイミングを遅らせるようにするか、マウスの動きに過敏に反応して二階層目に移行したら別なメニューの内容を表示してしまった、なんてことになりかねません。縦と横の動きをうまくキャッチする
面白い！動画を編集した上でアニメーションGIFに変換·rokuga MOONGIFT
rokugaは動画を読み込んでアニメーションGIFに変換するソフトウェアです。 VineはアニメーションGIFのような動画を撮影、共有できるのが特徴ですが同じように動画からアニメーションGIFを作れるのがrokugaです。 動画をドロップします。 動画解析中。 解析されました。フレーム単位で下に画像が表示されています。 ランダム再生も可能。 rokugaの面白い点としては、ワンフレームづつを画像にした上で、特定のフレームを抜いたりして編集できる点にあります。アニメーションを逆回転したり、ランダムに表示させることもできます。編集が終わったらSaveボタンでアニメーションGIFとして書き出せますので、後は保存すればOKです。 rokugaはRuby/Sinatra製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る アニメーション
レスポンシブWebデザインの請求書テンプレート·sprInvoice MOONGIFT
sprInvoiceはHTML5で作られた請求書のテンプレートです。 Webサービスで課金を行っている場合、請求書をオンラインで出力して欲しいと言われるかもしれません。そんな時に使えるのがsprInvoiceです。 通常の請求書。 スマートフォンレベルの幅にした場合。 支払い済み請求書。 こちらももちろんレスポンシブ。 支払いが遅延している場合。 こんな感じに表示されます。 sprInvoiceはPCはもちろんのこと、スマートフォンにも対応しています。デザインはレスポンシブWebデザインになっており、請求完了または未払いのテンプレートも用意されています。意外と使えるソフトウェアではないでしょうか。 sprInvoiceはHTML5製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る MOONGIFTではプレミアムサービスを提供していますが、その
Webでもサーバでも使えるJavaScriptテンプレートエンジン·doT.js MOONGIFT
doT.jsはWebブラウザ、node.jsの両方で使えるJavaScriptテンプレートエンジンです。 Webアプリケーションを開発していると必ずJavaScriptでHTMLを出力する必要性が出てきます。そのような時に使いたいのがテンプレートエンジンです。今回はWebブラウザ、node.jsの両方で使えるdoT.jsを紹介します。 テンプレートとJSONデータを組み合わせてHTMLを出力します。 繰り返しも対応。 パーシャルも使えます。 条件分け。 配列。 エンコード表示も可能です。 特徴としては外部ライブラリの依存性がないこと、高速であること、パーシャルサポート、イテレータなどがあります。ストリーミングのようにデータが随時追加されていく場合も想定されています。ifではなく、?を使うのがユニークです。 doT.jsはnode.js/JavaScript製のオープンソース・ソフトウェア（
CSS3アニメーションをWebブラウザ上で作成&実行·Stylie MOONGIFT
StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。 CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。 デフォルトの表示です。左から右へボールが流れていきます。 単純に流れる以外の動きも指定できます。 こんな感じで曲線にすることも。始点と終点はドラッグで移動できます。 対応ブラウザを選択することでCSSの内容が変化します。 StylieはRekapiというアニメーションライブラリをベースにしています。そのための設定をグラフィカルに指定できるツールと言えそうです。ボールの画像も自由に指定できるので、色々試してみてください。 StylieはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されて
レスポンシブWebデザインでサイトを組む際のベースに·Wirefy MOONGIFT
WirefyはレスポンシブWebデザインを使う場合のデザインフレームワークです。 レスポンシブWebデザインで組み上げようと思うと、色々とあらかじめ考えておくべき点に出くわしてなかなか本当にやりたいデザイン作業に入れずにイライラしたりするかも知れません。そこで使ってみたいのがデザインフレームワークのWirefyです。 サンプルです。 iPhoneで見た場合。レスポンシブWebデザイン対応です。 メニューを表示した表示。 Wirefyではコンテンツファーストの原則に則って開発されています。そのため基本的なタグだけでデザインが組み上がるように考えられています。さらにWirefyをベースにすればレスポンシブWebデザインになっています。手早いワイヤーフレーム作成の際にはきっと役立つでしょう。 WirefyはHTML/スタイルシート製のオープンソース・ソフトウェア（Apache License 2
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
Webブラウザ上でCSS Sprite画像を作成·InstantSprite MOONGIFT
InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。 複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します。 ファイルをアップロードしました。実際にサーバにアップロードされる訳ではなく、クライアントサイドで処理されるようです。 くっついた画像です。 CSSのSprite設定も出力されます。 InstantSpriteは画像をまとめてアップロード（ドラッグアンドドロップ）するだけで自動でくっつけた上でCSSの設定が出力されます。定期的な更新には向かないかも知れませんが、これまでの画像を一気にSprite化したいといった時にはぴったりかも知れません。 InstantSpriteはJ
ウィンドウサイズをリアルタイムモニタリング·FitWeird MOONGIFT
FitWeirdはウィンドウサイズをピクセス、em単位で表示するブックマークレットです。 Webデザインを行う際に画面上に物差しを表示したりツールもありますが、今回はもっとシンプルなFitWeirdを紹介します。ウィンドウサイズが今いくつであるか、リアルタイムに表示してくれます。 ブックマークレットを実行しました。右下にウィンドウサイズが出ています。 ウィンドウサイズを変更するとリアルタイムに数字が変化します。 FitWeirdはブックマークレットなのでインストールも不要でとても手軽です。実行したら右下にウィンドウサイズが出る、それだけのシンプルさです。サイズはピクセル、emの二つで表示されます。 FitWeirdはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 一年くらい前はスマートフォンとデスクト
JavaScriptのコーディングスタイルをチェック·jscheckstyle MOONGIFT
jscheckstyleはJavaScriptのコーディングスタイルチェッカーです。 JavaScriptがサーバサイド、スマートフォンアプリなどの開発でも使われるようになり利用範囲が拡大しています。そんな中、JavaScriptのコードについて一定の品質を保つために使ってみたいのがjscheckstyleです。 実行しました。 結果のHTMLです。 JSONで取り出すこともできます。 XML形式です。 結果は通常出力の他、HTMLやXML、JSONによる出力も可能です。XMLの場合はJavaのコーディングスタイルチェック互換でJenkinsと組み合わせて使うこともできます。その他Emacs向けの出力もサポートされています。 jscheckstyleはnode.js/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIF
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
多彩なイフェクトをご覧あれ。華麗なスライド切り替え·RefineSlide MOONGIFT
RefineSlideは様々なイフェクトに対応したスライド切り替えソフトウェアです。 プレゼンテーションの基本はスライドですが、その切り替えに際してただ入れ替わるだけでは面白くありません。HTMLのスライドであればRefineSlideを使って華麗に、ダイナミックに切り替わるようにしてみましょう。 縦に切り替わるパターン。 右から左へ。 左右に切れていくパターン。 デモ動画です。 RefineSlideを使うとダイナミックなイフェクトが容易に実現します。WebサイトのトップページやHTMLによるプレゼンテーションなど色々な場面で使えるのではないでしょうか。 RefineSlideはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る 最近のWebサイトではトップページでサービスの紹介動画を載せるか、画像ベースのスライ
これがHTML？と言いたくなるようなPDF変換ソフトウェア·pdf2htmlEX MOONGIFT
pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。 PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを紹介します。 これがHTMLだと思えないくらいの再現度です。 計算式にも対応。 段組み、画像埋め込みも問題なし。 白黒に限らず扱えます。 中国語。マルチバイト対応です。 まるで素のPDFを表示しているかのような再現度の高さがpdf2htmlEXの売りです。PDFを一つのHTMLファイルとして出力し、色や文字の装飾も反映します。リンクもそのまま使えます。なお、Type3のフォントには対応しておらず、テキスト以外のオブジェクトは画像としてレンダリングされるようになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務で使えるオープンソース（46）·フォント MOONGIFT