高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲームパッドの入力処理、アップデート/レンダリングループ、デバッグツールなど、ほとんどのゲームに必要なものをすべて備えているとの事。 Steamのようなプラットフォームで配布するために、electronを使ってWindowsの実行ファイルとしてビルドすることも可能だそうです。ライセンスはMIT。 LittleJS
TEDが公開するオープンソースのAtomic CSSライブラリ・「shed.css」 | かちびと.net
shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれのクラスは1つの目的のみを持ち、各クラスを組み合わせて使う形となります。ある程度の学習だけで単純なクラスによるWebサイトをデザイン、管理出来る仕組みのようです。例えば <button class=" d:i-b f-w:700 p-x:3 p-y:.7 b-r:.4 " > hoge </button>d:i-bはdisplay: inline-block、f-w:700はfont-weight: 700、b-r:.4ならborder-radius: var(--z-dot4)といった具合に、規則され学習すればCSSを確認せずにHTMLを書くと同時にデザインも出来るのでCSSを
PDFやODF等のドキュメントファイルをWebサイトで表示させる為のスクリプト・「ViewerJS」
ViewerJSはPDFやスプレッドシート等をWebサイトに埋め込めるJavaScript製のドキュメントリーダーです。PDF.jsやWebODFを利用しているみたいですね。ライセンスはAGPLの元、OSSとして公開されていますが、ソースを開示したくない場合は商用ライセンスの相談も受け付けているそうです。 ViewerJS
現在のURLに任意のパラメーターを付与する為のスクリプト・「url.js」
url.jsは現在閲覧中のページのURLに任意のパラメーターを付与する為のスクリプトです。例えばhttp://example.com/といったURLをその場でhttp://example.com/?foo=barのような任意のパラメーターを付与したり、削除する事も出来ます。汎用的なライブラリでは有りませんが痒いところに手が届くものとして覚えておいても損は無いかもしれません。ライセンスはMIT。 url.js
スマフォサイトにも対応可能の、インタラクティブなプロトタイプを作成する為のツールキット・「FRAMER.JS」
FRAMER.JSはスマフォサイトにも対応したプロトタイプ作成の為のフレームワークです。アニメーションを取り入れることでインタラクティブなプロトタイプを作成できる、という事を目的としているようです。使い慣れるまで少し掛かるかもしれませんが、慣れれば便利かも。 FRAMER.JS
レスポンシブWebデザインに対応するナビゲーションのパターンをいくつかまとめている・Responsive Navigation
レスポンシブなナビゲーションのパターンをまとめているResponsive Navigationのご紹介です。選択肢が複数あるとコンテンツにも合わせやすくなるので覚えておきたいところです。 レスポンシブWebデザイン対応のWebサイト向けのナビゲーションです。ブレークポイントに応じて、そのデバイスで使いやすいナビゲーションに変化してくれる、というものが中心のようですね。
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scrip
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 以下サンプルです。手抜きですみません。 jsfiddleでフレームを操作して動作確認出来ます。 Sample コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery-picture-min.js"></script>
WordPressの投稿画面でFlickr内のCCライセンスの画像を検索、クレジット付きで記事に投稿できるプラグイン・Pick a Picture
WordPressの投稿画面で、Flickrで CCライセンス画像を検索、クレジット 表記付きで投稿できるプラグイン、 Pick a Pictureのご紹介です。個人 的にはあまり利用しませんが、需要は ありそうな気がします。 以前、全く同じプラグインをご紹介しました。 画像を投稿する際にFlickrで検索、著作権表示付きで記事に挿入出来るプラグイン・Flickr Photo Post こちらよりも今日紹介するプラグインの方が使い勝手が良かったので改めて紹介します。 画像のアップロード項目にFlickr検索が加わります。CC-BYなのでクレジット表記が必要ですが、このプラグインはクレジットも付けてくれます。 ↑ 以前紹介したFlickr Photo Postでの不満点は1ページの検索件数が少なくて探しにくいことでした。Pick a Pictureでは12件、24件、54件、102件と選択で
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" />これで以下のようにダミー画像を表示させる事ができます。 勿論、細かいサ
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
各OSに対応のオープンソースのSQLエディター/データベースマネージャー・「Beekeeper Studio」
React.jsベースのプレゼンテーションライブラリ・「Spectacle」
ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」
シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column
jQueryスニペット | かちびと.net
