JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Amazon EC2を使う前に知っておきたいこと色々:phpspot開発日誌
Amazon EC2を使う前に知っておきたいこと色々。 仕事でEC2を使っているのですが、やって見る前に思い描いていたことと、実際にやってみると相違があったりしました。やる前に知っておくといいことをまとめてみました。 EC2を使う予定の方は参考まで。 それでは早速。 インスタンスの 32bit か 64 bit に注意する EC2では負荷が高くなったらハイスペックなインスタンスに変えればいいというのがありますが、32bitのOSイメージを64bitのインスタンスに入れることは出来ません。 最初はsmallインスタンス(最近ではmicro)から始まると思いますが、32bit でいうとハイスペックなもので High CPU のインスタンスまでになっています。それ以降は64bitなので、そこで環境を作り替えないといけなくなります。 とはいえ64bit環境はLargeからで安いとはいえないので、こ
HTML5で実装するプレイリスト付きオーディオプレイヤー「AAP」:phpspot開発日誌
Accessible Audio Player (AAP) One Hand Clapping HTML5で実装するプレイリスト付きオーディオプレイヤー「AAP」 HTML5とはいえIE8でも動作するようにつくられています。Flashではないため、iPhoneやiPadでも動作します。 デフォルトのデザインはカッコ悪いですが、CSSを使って調整できます。 再生中の秒数や、プレイリストをハイライトさせたり、Flashを使わなくてもこれだけのことが出来るようになってるわけですね。 関連エントリ 見ておくべきHTML5サイト集 HTML5のポテンシャルを感じられる４８のサンプルサイト HTML5とJSでWEB上に綺麗な楽譜が書けるライブラリ「VexFlow」 CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ
電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」:phpspot開発日誌
jquery vticker (vertical news ticker) JugBit 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」。 特定のdivに次のようにulでリストを定義しておいて、$(element).vTicker(); とすることで簡単にアニメーションするニュースティッカーが実装できます。 幅、高さは固定できるので、自由にレイアウトできるところもナイスです。 表示時間が終わって消えるリストがグレーにフェードアウトするところも芸が細かくてナイス。 デモを見る デモはCSSでスタイリングされておらず味気ないものですが、CSSで綺麗にデザインしてあげることでかなり映えそうです。 オプションで、次の挙動についてカスタマイズも可能です。 ・スピード変更 ・待ち時間変更 ・アイテム表示数変更 ・アニメーション指定 ・マウスで停止するか指定
何時何分を入力してもらう際に便利に使えるjQueryプラグイン「Timebox」:phpspot開発日誌
AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「Avia... 次の記事 ≫：2010年5月31日 管理人のブックマーク PowerHour Development Blog jQuery Timebox Plugin 何時何分を入力してもらう際に便利に使えるjQueryプラグイン「Timebox」。 <input type="text">な要素の中に何時何分というのを直接入れてもらう場合に使えます。 例えば、16 を入力すると、16:00 に変換され、152 と入力すると 1:52 として解釈され、テキストボックスの内容が自動で置換されます。 意味のないアルファベットなどを入れると 00:00 に変換されます。変換例は次の通り 初期化方法は、次のように $(element).timebox() で初期化するだけです。 <input id="myTimebox
ブロック要素をYahoo!Pipesばりに結んで視覚的に関連付けられる「jsPlumb」:phpspot開発日誌
ブロック要素をYahoo!Pipesばりに結んで視覚的に関連付けられる「jsPlumb」 2010年04月20日- jsPlumb demo ブロック要素をYahoo!Pipesばりに結んで視覚的に関連付けられる「jsPlumb」というものがあるみたいです。 次のように、要素間が紐のようなもので繋がっているような表現が出来、ドラッグ＆ドロップによる要素の移動が可能です。 AとBは関連があるから繋いでおくというようなシーンで使えそうですね。 要素はドラッグ＆ドロップで移動が可能。 １から実装しようと思うと大変ですが、ライブラリによって複雑な処理も簡単に出来ますね。 関連エントリ とても綺麗なグラフ等を描けるフレッシュなJavaScriptライブラリ色々 １つのリンクで複数サイトにリンクできる便利JavaScriptライブラリ「Pluralink」 同一ページ内でポップアップウィンドウを開くJ
CSSで描画された水滴グラフィックスが凄い:phpspot開発日誌
Raindrop Logo in CSS Much ado about pixels CSSで描画された水滴グラフィックスが凄いです。 「CSSを使ったOperaブラウザのロゴがすごい 」ではCSS3でOperaのロゴをCSSで描画され話題になりましたが、今度は何枚ものレイヤーを組み合わせて作られている水滴のグラフィックです。 CSSで描かれているので、ベクター画像のようにページをズームイン、アウトしようが、綺麗に表示されます。 次の画像はこの画像を構成している要素で、それぞれCSS3で図形描画が指定されています。 ベクターではなく、CSSを使ってグラフィックスを描画するというアプローチ。 オーサリングツールがあれば気軽に作れてしまうものかもしれませんね。近い将来はそういった分野の素材サイトなんかが出来てくるのかもしれません。
近々リリースのPhotoshop CS5の新機能のムービー集:phpspot開発日誌
Photoshop CS5: A Sneak Peek | Design Shack 近々リリース（４月１２日リリースとのこと）されるPhotoshop CS5の新機能のムービー集がまとまっていました。 あのインパクトから何ヶ月か経ちましたが、遂にリリースされるということで個人的には楽しみにしています。 購入の検討のおさらいとしてよい判断材料となりそうです（あまりに凄いので購入意欲だけが上がるかもしれませんが、使うかどうかも冷静に見極めたいところ） ムービーを見ていくと、かなり興奮なのですが、ザッとみたい方用に、ムービーと併せて静止画でも少しまとめてみます。 あったものを消す機能 消しゴムで消すようにすると・・・ 木が消えちゃいます。 左上にある木に注目 木をツールで囲むと… 消えますｗ ちょっと欠けてしまった画像も… 補完されますｗ あるはずの道も・・・ 消せますｗｗ 動画でみたい方は以
これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」:phpspot開発日誌
BugsVoice - turn bugs into opportunities これは新しい日付ピッカー実装用jQueryプラグインのjQuery.calendarPickerが公開されています。 通常、日付ピッカーというとカレンダーを想像しますが、今回紹介するものは次のようなUIで、１週間が基本となっています。 不要な日付を出来る限り非表示にすることで、分かりやすくなったりする場面もありそうです。 現在の日付は黄色の枠で表示されるようになってるみたいです。 オプションに値を与えることで、月、曜日の表示名カスタマイズをすることが出来るのでローカライズも容易ですね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ
角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」:phpspot開発日誌
Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」
2009年に発見した秀作アイコンのまとめ:phpspot開発日誌
今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ:phpspot開発日誌
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ。 次のような、時間に関する指定が一括で出来ちゃうウィジェットが公開されています。 インプットボックスにカーソルを合わせるとポップアップして表示させることも可能です。 時間指定が便利になっていいかもしれませんね。 以下のエントリを参照してください。 Any+Time JavaScript Library
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
ActionScript 3.0とPHPを使った独自デザイン＆再利用可能な進捗付きアップローダー:phpspot開発日誌
ActionScript 3.0とPHPを使った独自デザイン＆再利用可能な進捗付きアップローダー 2009年10月09日- ActionScript 3.0とPHPを使った独自デザイン＆再利用可能な進捗付きアップローダーの作成例がFlashtutsにて紹介されていました。 次のようなアップローダーのソースコードのダウンロードが出来る上、チュートリアル付きです。 独自にデザインできる、ということでアップロード部分のデザインにも手を入れたいという場合にはかなり使えそうですね。 ボタンのデザインはFlashのタイムライン上で独自にデザインすることが可能です。 ActionScriptのコードについてもそれぞれ解説があって参考になりますね。 PHPのコードがかなりシンプルなので、セキュアに作りたい場合はちゃんと書き換える必要はありそうです。 詳細は以下のエントリを参照してください。 Creatin
PHPからOAuth認証が出来るPEARライブラリ「HTTP_OAuth」:phpspot開発日誌
HTTP_OAuth PHPからOAuth認証が出来るPEARライブラリ「HTTP_OAuth」が9/2に公開されたようです。 OAuthといえば、Twitterを外部サイトから使う場合なんかで有名ですね。先日、Yahoo!JapanがOAuthのService Providerになりました。 まだ alpha の状態ですが、今後、アプリにOAuthの機能を組み込む場合はチェックしておいたほうがよいかも。 こうしたライブラリを使っていると中身が分からなくても使えるので、概念ぐらいは覚えておいたほうがよいかもしれませんね。 →APIアクセス権を委譲するプロトコル、OAuthを知る − ＠IT 関連エントリ PHPによる「PEAR::System_Daemon」を使ったデーモン構築 HTTPリクエストを簡単にする「PEAR::HTTP_Request2」が出ているみたい PHPの関数キャッシュ
PHPのPDOを超簡単に使えるラッパークラスライブラリ:phpspot開発日誌
Simple PHP PDO Wrapper : light, static, easy - Let’s explore the web technologies together PHPのPDOを超簡単に使えるラッパークラスライブラリ。 PDOでも簡単にデータベースに接続することが出来ますが、よりシンプルに簡単にアクセスできるライブラリが公開されました。 接続の初期化は以下のスタティックメソッドを利用しておきます。 Db::setConnectionInfo('schemaname','root', '123456'); あとは、executeでSQLを実行するだけ 例） Db::execute('INSERT INTO users(username, password) VALUES(:name, :pass)', $user); データの取得メソッドも充実 // id = 2 のユー
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用・非商用に関わらず使える７万以上のフォントまとめサイト「FontPark」:phpspot開発日誌
ハイクオリティな多種多様なアイコンセット集いろいろ:phpspot開発日誌