京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラグイン。 レイアウト上、分割したいんだけど、めんどくさいんだよなぁ、という方も、ライブラリを読み込んで、$(element).easyListSplitter({ colNumber: 3 }) みたいにやれば3列にしてくれます。 なんということでしょう。 地味〜かもしれませんが、これは便利だと、殆どのマークアップエンジニアの方は首を揃えて頷いてくれるでしょう。 関連エントリ ツイッターのつぶやき
エレメントの高さ(height)、幅(width)だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ:幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
モバイルアプリケーションのためのバックエンドサービスに特化したクラウド、BaaS(Backend as a Service)として知られる「Parse」が、Cloud Codeという機能でサーバサイドスクリプトのサポートを開始しました。JavaScriptでサーバ側の機能を作り込むことができます。 これまでParseに代表されるBaaSでは一般に、データストア機能、プッシュ通信機能、ユーザー管理機能、ソーシャルとの連係、ロケーションとの連係など、あらかじめAPI経由で呼び出すことができる機能は決まっていました。 ParseのCloud Codeは、任意のロジックをBaaSに組み込むことを実現します。 サーバ側で演算、入力値のチェックなど 例えば、いままでは演算処理などのロジックはモバイルデバイス側のアプリケーションで記述しなければならなかったため、レストランガイドのアプリケーションで星の数
4月はnode.jsを使い倒すという目標のもと、 node.jsをインストールしたら、さっそく個人的に大注目しているSocket.IOを 用いたリアルタイムWebの構築をしてみました。 今日はとっても定番と言われているチャットアプリです。 その環境構築から、実装内容までブログに書きたいと思います。 こんなサンプルアプリを作りました 機能としては、「http://localhost:8080/」にアクセスすると、Socket.IOのサーバーに接続されます。 メッセージ送信と名前送信をすることが出来ます。 メッセージ送信は、送った内容が自分も含め接続しているユーザー全員に送信されます。 名前送信は、自分以外の全ユーザーに送信されます。 以下が構成イメージです。 まずは導入から node.jsは導入済みの前提で、socket.ioのインストールを行います。 node.jsのインストールは(nod
Node.jsで簡単なHTTPサーバを作ってみた Posted by tatat on 2011/03/16 22:27 Categorized as JavaScript, Linux Tags Apache, CentOS, chkconfig, JavaScript, mod_proxy, Node.js, Shell Script Comments (0) とりあえずNode.jsのWebサーバでHello World.してみました。 80番ポートはApacheが使ってるので名前ベースのバーチャルホストでリバースプロキシして80番ポートでアクセスできるようにします。 環境 CentOS 5.5 (32bit) Apache HTTP Server 2.2.14 Apache mod_proxy Node.js 0.4.2 Node.jsでHTTPサーバを書く とりあえずサーバから見
先日、MeteorというJavaScriptベースのウェブプラットフォームが発表されました。(meteorは流星) そのコンセプトを見て、ビビッと来ましたので、ドキュメンテーションのコンセプト部分の訳をしてみました。 コンセプト 今まで私たちは単ページのJavaScriptアプリケーションのかなりの部分を手で書いてきました。アプリケーション全体を一つのデータフォーマット(JSON)を使って一つの言語(JavaScript)で書くことは本当に幸せです。そんなアプリを書く時欲しかったもの、それがMeteorです。 We've written our fair share of single-page JavaScript applications by hand. Writing an entire application in one language (JavaScript) with o
はじめに このエントリでは、Ubuntu11にnode.jsをインストールして、サンプルプログラムを動作させるまでの手順について書いています。Ubuntuにnode.jsをインストールするにあたり、以下のエントリを参考にさせていただきました。 0xabadbabe: node.jsまでの道のり2(node.jsでHelloWorldの巻) node.jsをインストールしてみる。 - thinking now... 検証環境 Ubuntu 11.10 + VirtualBox 4.1.10 node.js 0.6.12 node.jsをダウンロードする メニューバーのアプリケーションから「アクセサリ」−「端末」を起動します。 カレントディレクトリを変更し、ホームディレクトリに移動します。 cd ~node.jsをwgetコマンドでダウンロードします。 wget http://nodejs.o
Meteorとは? Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境(MacOS Xを含む)でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています(公式サイトには、「1日か2日でプロトタイプを、2~3週間で製品レベルのアプリを構築できるようにする」とあります)。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
flipCounter 1.2 a jQuery plugin by BloggingSquared.ca ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 中心に折り目がついててめくれる時計がありますが、アレをカウンターにしたものが登場。アニメーションさせることもでき、なかなかいい味が出せます 必要なライブラリを読込後、$("#counter").flipCounter(); と書くだけで実装できるのは素晴らしい。 各種豊富なオプションで動作をカスタマイズ可能ですし、使われている画像を変えればオリジナルのUIのカウンターが実装できます。 フォーマット指定なんかも可能 アクセスカウンターレンタルサービスなんていうのが昔はよく使っていましたが、こういうカウンターのレンタルがあったら使いたいかもしれませんね。 関連エントリ jQueryでフリップエフェクトを使った
BigVideo.jsはWebサイトの背景に動画を利用し、そのまま再生できるソフトウェアです。 Webサイトの背景は単色、もしくは適度なパターン画像を使うのが一般的です。しかしそんな考えに捉われないソフトウェアがBigVideo.jsです。何と動画をバックグラウンドに指定し、そのまま再生してしまう驚きのソフトウェアです。 デモです。背景は画像ではなく動画です。バックグラウンドで再生されています。 切り替えました。すごく幻想的で格好いいです。 BigVideo.jsの力だけではないですが、前面のコンテンツは背景が透けていてマッチしています。映画のトレーラーに合わせて説明を加えても良さそうですし、ドキュメンタリー系のWebサイトで使っても良いかもしれません。動画はJavaScriptで切り替え可能ですが、最後まで行くとそこで止まるようになっています(ループ指定もできるようです)。 BigVid
Extremes jQuery plug-in 日向徹ばりの斬新なインタフェースが実現できるjQueryプラグイン「Extremes」 日向徹とはリッチウーマン、プアウーマンというドラマに出てくる小栗旬さん演じるIT社長なのですが、その番組に出てきた個人管理プログラムのUIっぽいインタフェースを作る事ができるjQueryプラグインです。 恐らくこちらのライブラリ作者は日本のドラマ等は分からないとおもいますが偶然の一致であります。 他にも次のようなインタフェースをCSS3を使って実現出来ます。 リッチウーマン,プアウーマン、なかなかおもしろいですよ 関連エントリ 大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられるライブラリ「PanoJS3」 オーディオ機器のボリュームを上げる風インタフェースを作るCSS3&jQueryサンプル jQueryでページ送りのインタフェース
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コ
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。
It’s been a frantic but productive few weeks, and the jQuery core team is pleased to announce that jQuery 1.8.1 is released! This version fixes the issues reported by the community following the final release of 1.8.0. Here are the files, ready for you to use: http://code.jquery.com/jquery-1.8.1.min.js (production, compressed) http://code.jquery.com/jquery-1.8.1.js (development, uncompressed) The
wiki代わりの備忘録なので編集や加筆の制限なしエントリーです、あしからず。 また、以下はIEに特化することが目的ではなく、W3C勧告のHTML標準なページ作成を目指す中で、標準を理解しない(くせにトップシェアの)IEの仕様を何とか回避するが主題です。 cssテクまで考慮するともっとたくさんになると思いますが、それはデザイナーさんに任せます(笑) . ■ IE互換モード イントラネットでは互換モード優先がIEのデフォルト設定のため、企業イントラネットではIE7の配慮が必要です。ローカルPCでの開発では互換モードを再現できないので注意が必要です。 強制的に互換モードを排除するには、.htaccessに次を記述してHTTPヘッダを出力するか、 Header set X-UA-Compatible "IE=edge" メタタグでページごとに指定します。 <meta http-equiv="X-U
jQuery Toggles - Simon Tabor iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」 次のようなiPhoneっぽいデザインは勿論、独自デザインでも同じようなスイッチを実装できます。 実装コードは以下のように簡単に実装できます。 $('.toggle').toggles({click:$('.clickme')}); こういうデザインもアップル発という気がしますが、UI におけるアップルの影響はいつも高いなぁと思ってしまいますね 関連エントリ iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート 立体感がリアルなON・OFFスイッチ実装jQueryデモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く