今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL

2013/12/01 353 users りんど Sass CSSプリプロセッサ MOL コンパイル

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的... 続きを読む

ハロウィンなのでHTMLをぶるぶる震わせてみました - ✘╹◡╹✘

2013/10/29 80 users ハロウィン HTML jRumble CSS チャット

2013-10-29 ハロウィンなのでHTMLをぶるぶる震わせてみました 使い方 ぶるぶる震える ↑このリンクをブックマークに登録して使ってください 説明 適当なJavaScript製のHTML-Lintを実行して、検知されたHTML要素をCSSでぶるぶる震わせます。 チャットで雑談してたら急に震わせたくなって10分ぐらいで作ったのでだいぶ雑です。 実装 jQuery + jRumble + cu... 続きを読む

シンプルで美しいnode製のブログエンジン「Ghost」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/10/28 71 users Ghost node MIT License ソーシャル 最初

Ghostはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。今はソーシャルの時代であえてブログを書く人は少なくなっています。確かにソーシャルに投稿するのに比べると幾分面倒な感じがします。しかしシンプルなブログであればきっと使いたくなるはずです。それがGhostです。 最初にサインアップします。 管理画面です。投稿が一覧表示されています。 編集画面です。... 続きを読む

HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク「DiagnostiCSS」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/10/20 183 users MOONGIFT HTMLコーディング ソフトウェア ソース

DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました... 続きを読む

すごい！JavaScriptでMS Wordファイルを生成「DOCX.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/10/13 83 users zipファイル 生成 エンジニア 圧縮 ソフトウェア

DOCX.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。Microsoft Officeのファイル形式は〜x形式になって以降、XMLファイルのZipファイルの圧縮であることはよく知られています。しかしだからといってOfficeファイルをWebベースで生成できるようになっているとは思いませんでした。それを可能にするのがDOCX.jsです。 テストページ。R... 続きを読む

HTML5/JavaScriptによる電子書籍風フリップアニメーション「Turn.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/10/03 82 users turn.js ePubファイル BSD License

Turn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。電子書籍というとePubファイルが有名ですが、HTML5でも実現は可能です。特に紙をめくった時のようなフリップアニメーションが欲しい時にはTurn.jsを使ってみましょう。 デモです。幾つかのサンプル書籍が掲載されています。 開きました。 フリップしています。 別な書籍。マウスをもってい... 続きを読む

iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/09/30 50 users iPhone UIライブラリ iPhone風 ソフトウェア

ChocolateChipはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア（BSD License）です。モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版とも言えるChocolateChipを紹介します。 例えばこちらはiPhone風。iOS 7に似ています。 同じ内容でAndroid風。 こちらはWindows Phon... 続きを読む

JavaScript製の顔認識ライブラリがすごい | DECONCEPTER

2013/09/26 381 users DECONCEPTER 顔認識ライブラリ

JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識... 続きを読む

200行で実現するJavaScript VNCクライアント「JavaScript VNC」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/09/15 53 users エンジニア ソフトウェア オープンソース ITニュース サーバ

JavaScript VNCはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。最近は何でもJavaScriptでやってしまおうという試みが多数立ち上がっています。今回はなんとVNCクライアントをJavaScriptで作ってしまおうという野心的な試みをJavaScript VNCが行っています。 接続前の画面。RealVNCがサーバに使えます。 接続しま... 続きを読む

正規表現のチェックをグラフィカルに「Regexplained」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/09/14 50 users 記号 覚えたて ライセンス ソフトウェア エンジニア

RegexplainedはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。正規表現を覚えたての頃は思いもしない一致や、逆に不一致に惑わされるかも知れません。文字の範囲や?などの記号の使い方を覚えないと思わぬシステムエラーに繋がる可能性もあります。そこで練習に使ってみたいのがRegexplainedです。 テスト画面です。マッチした部分が濃... 続きを読む

テーブルの情報をJSON化「Table-to-JSON」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/18 53 users jQuery JSON Tabler ダイアログ エンジニア

Table-to-JSONはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。先日、JSONからテーブルを自動生成するTablerを紹介しましたが、今回はその逆です。テーブルタグからJSONを生成するTable-to-JSONを紹介します。 デモのテーブルです。Convertボタンを押します。 ダイアログが表示されます。確かにJSONデータで取り出せ... 続きを読む

JSONデータを使ってテーブルを表示「Tabler」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/12 53 users JSON Tabler カラム JSONデータ ソフトウェア

TablerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。 基本的な使い方。カラムを定義してJSONデータを当てはめるだけです。 全てを表示するので... 続きを読む

レスポンシブなデザインを構築する際のベースに「skelJS」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/11 73 users Bootstrap フレームワーク MIT License

skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。 デスクトップサイズ。Bootstrapのように見やすい画面になって... 続きを読む

OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント「oauth-js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/10 211 users OpenID OAuth OAuth認証 エンジニア 仕様

oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。... 続きを読む

Bootstrapベースの管理画面用テンプレート「Charisma」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/06 593 users Bootstrapベース ウィジェット エンジニア 内部

CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です... 続きを読む

Googleアナリティクスを使ったA/Bテストを簡単に実現させる|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/05 94 users Googleアナリティクス エンジニア ソフトウェア ボタン

easyABはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。ボタンの色が赤であるべきか、青であるべきか、キャッチコピーはどちらの方が良いか。そんなことは正直試してみないと分かりません。そこで必要なのがA/Bテストで、easyABを使えばGoogleアナリティクスを使って容易に測定できます。 使い方です。スロットと呼ばれるのがテスト設定になります。A... 続きを読む

JavaScriptとObjective-Cを連携させるハイブリッドアプリ解発に「HybridKit-JS」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/08/01 50 users Objective-C ネイティブ MIT License

HybridKit-JSはObjective-C/JavaScript製のオープンソース・ソフトウェア（MIT License）です。最近のスマートフォンアプリ開発では必要に応じてJavaScriptとネイティブを組み合わハイブリッドアプリが増えています。そこで紹介したいのがHybridKit-JSです。 デモアプリです。この画面はHTMLで出来ています。 HybridKit.runCommand... 続きを読む

JavaScriptによる自動振仮名入力「autokana」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/07/25 65 users jQuery フリガナ ライブラリ ユーザ ソフトウェア

autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“... 続きを読む

データの追記読み込みに対応するテーブル「StreamTable.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/06/23 62 users レンダリング 徐々 MIT License エンジニア ソース

StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々... 続きを読む

フォームの入力をもっと快適にする「jq-idealforms」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/06/12 64 users jQuery MIT License エンジニア 機会 入力

jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力... 続きを読む

enchant.jsでHTML5＋JavaScriptゲーム開発入門（4）：JavaScript製とは思えないゲームをenchant.jsで簡単に作るには (1/3) - ＠IT

2013/04/25 276 users enchant.js スプライト 駆け足 ゲーム サンプル

これが、JavaScriptのゲーム…… だと……？ 前回の「enchant.jsで重要なスプライトとシーンを使うには」では、ゲームの流れとなる部分を駆け足で解説いたしました。 今回は、よりゲームをリッチに見せる、複雑なアニメーションの作り方を理解していきましょう。この機能を使うと、こんなもの（サンプル）を簡単に作ることができます。ぜひ「JavaScriptとは思えない！」ようなゲームを目指しまし... 続きを読む

JavaScript製の高度なアニメーションライブラリ「tween.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/07/24 135 users MOONGIFT 作法 アニメーション ITエンジニア 採用

かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 0 続きを読む

クライアントサイドJavaScriptで使えるテンプレートエンジンのメモ - Life goes on

2011/12/18 70 users テンプレートエンジン pure 無名 メモ 業務

JavaScriptここ最近クライアントサイドで使えるJavaScript製のテンプレートエンジンを調べてました。業務で必要だったんで、調査してたんだけど、ここら辺有名所から、無名のまでかなりの数があるんですな…。という事で、忘れない内にメモ。 ただし、この中で実際に試してみたのは、ejsとPUREだけだったりする。感想はサイトの説明を見てのもので、そっから業務にあったのをピックアップしたらこの2... 続きを読む

スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ「Zepto.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/09/17 105 users MOONGIFT jQuery 回線 ソフトウェア ソース

Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 0 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90... 続きを読む

PNGを解析してJavaScriptでPNGを描く「png.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/08/22 113 users MOONGIFT WebP PNG JPEG フォーマット

png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 0 続きを読む