SVGベースの星型レーティング実装jQueryプラグイン「starRating」:phpspot開発日誌starRating, star rating jquery plugin SVGベースの星型レーティング実装jQueryプラグイン「starRating」 SVGなのでRetinaなディスプレイ等でも劣化しない綺麗な星型レーティングを実装できます。 各種デザインから選べます 関連エントリ Bootstrap対応サイトならお手軽に導入できる星型・ハート型投票「bootstrap-star-rating」
スマホの傾きを検出してParallax効果を作れる「parallax.js」:phpspot開発日誌
parallax.js スマホの傾きを検出してParallax効果を作れる「parallax.js」 キャンペーンサイトなどでやると印象がグッとアップしそうなエフェクトが作れるっぽいですが、このデモは必見ですね。 画像は以下のようにulでリスト形式にしてレイヤーをずらす形で実現されるようです。 やってることの割りにはJSで比較的簡単に実装ができそうです 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
Amazon EC2を使う前に知っておきたいこと色々:phpspot開発日誌
Amazon EC2を使う前に知っておきたいこと色々。 仕事でEC2を使っているのですが、やって見る前に思い描いていたことと、実際にやってみると相違があったりしました。やる前に知っておくといいことをまとめてみました。 EC2を使う予定の方は参考まで。 それでは早速。 インスタンスの 32bit か 64 bit に注意する EC2では負荷が高くなったらハイスペックなインスタンスに変えればいいというのがありますが、32bitのOSイメージを64bitのインスタンスに入れることは出来ません。 最初はsmallインスタンス(最近ではmicro)から始まると思いますが、32bit でいうとハイスペックなもので High CPU のインスタンスまでになっています。それ以降は64bitなので、そこで環境を作り替えないといけなくなります。 とはいえ64bit環境はLargeからで安いとはいえないので、こ
mixiアプリの作り方(PC・携帯版)に関するサイト色々まとめ:phpspot開発日誌
携帯mixiアプリアクセス殺到(Yahoo!ニュース) によると、モバイル版もリリースされたmixiアプリがとても熱いようですね。 ということで色々、mixiアプリの収益化のチャンスや開発方法などの現状について調べてみました。 収益化のチャンス mixi アプリを作ることで、mixiのPVもあがるわけですが、開発者にも収益化やメリットがありますね。 以下に3つのメリットをまとめてみました。 (1) 自分のサイトへの誘導 mixi に集まる大量のトラフィックを自分のサイトにも誘導することで収益化のチャンスがあります。 実際に「外部サイトに誘導するための手順」としてその方法が提供されていますね。 (2) PVによって収益を得るアドプログラム 1PV 0.01円がもらえるみたいです。10万PVで1000円ですが、ユーザ数を考えると可能性を感じますね。 ヒットアプリになると100万ユーザとかになる
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
FirePHPがますます便利になっている件:phpspot開発日誌
FirePHP - Firebug Extension for AJAX Development FirePHPがますます便利になっている件、ということで、以前に紹介したFirePHPですが、色々と更新されているようなのでご紹介。 アイコンも変わってます まず、どういうことが出来るか、という点です。以前紹介した時とやり方が結構改善されているみたい。 <?php FB::log('Log message'); FB::info('Info message'); FB::warn('Warn message'); FB::error('Error message'); ?> と書くと、以下のように表示されます。 firebugのconsole.logみたいに使えます。 PHPのコード内で、１行でかけるのでなかなか便利そうです。 次のように、オブジェクト指向で書くこともできるみたい <?php
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
2009年3月 便利なjQueryプラグイン集:phpspot開発日誌
10 Best jQuery Plugins - March 2009 | AjaxLine 2009年3月 便利なjQueryプラグイン集。 怒涛の如く、どんどん出てくるjQueryプラグイン。追うのも大変ですが、色々簡単にできるようになるのは開発者としては嬉しいですね。 jQuery Sparklines ミニグラフを描画できるプラグイン Internal Links 内部リンクの場合にアイコンをつけるプラグイン Boxy FaceBookスタイルのオーバーレイダイアログボックス uploadify - a file upload plugin for jQuery 複数アップロードも可能なリアルタイムアップロードプラグイン jQuery Grid plugin 多機能グリッドの実現が出来るプラグイン リンク先のBoxyとうプラグインのサイト、現在は消えているようですが、マルウェア発見
WindowsVista風のガラス風ボタンを作成するPhotoShopチュートリアル:phpspot開発日誌
Icojoy this tutorial we will try to make round button in one of Windows Vista styles. WindowsVista風のガラス風ボタンを作成するPhotoShopチュートリアル。 次のようなボタンを作成するチュートリアルがムービー付きで公開されています。 以下がそのムービーです。 ガラスのような質感を作成する場合に参考になる良いチュートリアルですね。 このVista風のボタンもカッコいいのでサイトに盛り込んでカッコいいサイト作りに役立てられそうです。 関連エントリ 56のクールなPhotoShop用レイヤースタイル集 PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル
SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」:phpspot開発日誌
Sprinkle Javascript library by Jon Davis This is basically CSI (Client-Side Includes), when SSI (Server-Side Includes) is not available. You can also call it "sprinkle", as that's the name I gave the Javascript library. SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」。 SSIとは、指定の位置に決められたタグを埋め込んでおくことで、サーバ側で処理して特定の文字列を出力する仕組みです。 今回紹介するCSIは、JavaScript を使い、DIV要素内にsrcで指定したファイルをAjaxで読みこむという仕組みです。 次のようなコードで、
半透明でクールにフェードするツールチップ実装ライブラリ「CoolTips」:phpspot開発日誌
CoolTips ? Neat tooltips under the mouse CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique. 半透明でクールにフェードするツールチップ実装ライブラリ「CoolTips」。 次のような角丸のツールチップがフェードアウトでクールに現れます。 title 属性に設定した値を出してくれるようです。 使い方は最初にライブラリを読み込んでおき、後は、ツールチップの色の設定などを調節するだけのようです。 デザイン性の高いサイトなんかにデフォルトで使えそうなツールチップライブラリですね。 関連エントリ JavaScriptツールチップライブラリ24個
CSSでクールなテーブルを作成するサンプル:phpspot開発日誌
A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル１（解説記事） サンプル２（解説記事） テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」:phpspot開発日誌
Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなＵＩにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなＵＩを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ＆ドロップでページをめくれます。 本の中身は自由に書き換えることができるの
サイトに使えるCSSベースのクールなメニューナビゲーション8個:phpspot開発日誌
8 web menus you just can't miss There's no point to discuss the importance of a web menu, how it's done and how it looks. Many people may remember a website for it's great looking menu. サイトに使えるCSSベースのクールなメニューナビゲーション8個が紹介、ダウンロード公開されています。 サイトのナビゲーションデザインはシンプルだけど使い勝手のよいものにしたいですね。 そこで、サンプル集があればサイトにあったナビゲーションを考えることが出来そうです。 CSSベースの色んなタイプのナビゲーションがあるのでサイト作りに役立ちそうですね。 関連エントリ Webデザイナー/開発者が覚えておくとよい２５のテクニック
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
超クールなフリーフォント５種:phpspot開発日誌
5 More Freefonts: Chara, Preface, Colaborate | Smashing Magazine High quality freefonts are always nice to have, but usually they are extremely hard to find. 超クールなフリーフォント５種。 フォントは色々入れておくとデザインの際に役立ちますね。気にいったフォントは入れておきましょう。 (フォントの入れすぎはディスクやメモリ容量を食ったりするので注意が必要ですが) Chúcara Preface Light Zalamander Colaborate Lindau フォント関連エントリ 超クールフォント10選 Web 2.0なサイトのロゴに使われているフォントへのリンク集 WindowsVista標準の日本語フォント開発版を試してみまし
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
フリーのWeb2.0風の16x16アイコンを配布しているサイト集:phpspot開発日誌
DHTML Site - Free 16x16 Icons 22 Free Essential Icon Sets フリーのWeb2.0風の16x16アイコンを配布しているサイト集。 サイトの彩りやユーザビリティに欠かせないアイコンがフリーということでアイコンが書けない開発者にはうれしい限り。 Silk Icons Mini Icons Sweetie Tango Icon Gallery Web Control Icons IceCons Mini Pixel Icons Gallery 2 Web Icon Set →他にも見る これだけ沢山のフリーアイコンがあるとサイト作りがますます楽しくなりそうです。 フリーですが、ライセンスについては各サイト上の明記を確認の上で使いましょう。
JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」:phpspot開発日誌
PHPから使えるprototype.jsとscript.aculo.usのラッパークラス「Projax」 次の記事 ≫：WEBマスター/WEB開発者、御用達のサイトリンク集 Cookie Manager | Javascript Code | All Things Webby Initialisation of a CookieManager object: JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」。 JavaScriptでクッキーを扱うのって、いちいちクッキーをパースして面倒だ、と思っていた人は多いのではないでしょうか？ CookieManager.jsを使えば、phpでcookieを使うときみたいに簡単にcookieが使えます。 prototype.jsをベースとしていて、サンプルのコードは次のような感じになります。 サンプルはクッキーを使
画像の拡大プレビューを超クールに行える「Highslide JS」:phpspot開発日誌
Highslide JS - JavaScript thumbnail viewer Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: 画像の拡大プレビューを超クールに行える「Highslide JS」。 サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。 設置は次のように行います。 スクリプトインクルード <script type="text/javascript" src="highslide/highslide.js"></script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
