ブラウザ上で動くイラストレーターのOSS「mondrian」:phpspot開発日誌artursapek/mondrian GitHub ブラウザ上で動くイラストレーターのOSS「mondrian」 ブラウザ上でベクターグラフィックを描けます。SVGのインポートとSVG・PNGへの書き出しに対応。 Chromeであればサクサク動いているようです。 デモページ 関連エントリ イラレの図形をObjectiveCやAS3、JSON形式に変換できるイラレ拡張「DrawScript」
grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」:phpspot開発日誌
Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
Photoshopレイヤーに他のPSDをリンクできて便利なプラグイン「CanLinkIt」:phpspot開発日誌
CanLinkIt Photoshopレイヤーに他のPSDをリンク・共有できて便利なプラグイン「CanLinkIt」。 こちらのプラグインを使うとよく使うアイテムを別PSD化して再利用可能にできるみたい。 例えば、ボタンのよく使う画像があるとします。 別PSDファイルのボタンを読み込んで使えます。デザインを変更すると・・。 すべてのボタンに適用されます。標準でこういう機能がなかったのか、という感じになりますが便利ですね。 よく使うものはライブラリ化しておくと、一括して編集を反映できるのでUIライブラリとかを作る場合に便利かもしれませんね。 関連エントリ PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」:phpspot開発日誌
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかなり大変なものがありますが、簡単に実装できるというのはよいですね お絵かきというのは昔から人気の面白いコンテンツであるわけですが、実装したいってなった時に手軽に参考にできそうです 関連エントリ リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ コンテンツの折りたたみを楽々実装できるjQueryプラ
ツイートしてくれたら無料であげますを簡単に実現できる「Pay with a Tweet」:phpspot開発日誌
Pay with a Tweet - A social payment system ツイートしてくれたら無料であげますを簡単に実現できる「Pay with a Tweet」 何かのダウンロード可能なデジタルコンテンツをツイートしてもらうことでダウンロードを可能にする仕組みです。 自前でこうした仕組みを作るにはTwitterの認証からファイルの管理といった面倒なシステムを作る必要がありますが、こちらを使えば簡単に構築できます。 サイトの「Create a Pay Button」を押した後、名前やダウンロードURL等を入れていくだけです。 送信すれば、リンクが発行されます。ボタン付きのリンク等も表示されます。 URLにアクセスするとツイート用画面が表示されます。 送信すればツイートされ、ファイルのダウンロードも可能となります。 フリー版をこれで提供し、ツイートを通してサイトをいろんな人にしっ
サーバ送信不要なHTML5による画像切り取りツール作成ツール:phpspot開発日誌
HTML5 image crop tool ? Script Tutorials サーバ送信不要なHTML5による画像切り取りツール作成ツール HTML5とcanvasを使って画像の中の指定部分を切り取って画像化するという処理がブラウザ上で完結するデモプログラムです。 切り取った画像は単にCSSで切っているわけではなくて、画像として右クリックなんかで「名前をつけて保存」することが可能です。 通常であれば切り取った範囲と元画像をサーバに送信した上で、サーバ側で画像を切り取ってユーザに送信的な処理をいれないといけませんが、ブラウザ上で終わるというのは、サーバに負担が一切無くなかなか便利です。 関連エントリ HTML5を使ったファイルアップロード用プログラム集 HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5で色々作るチュートリアル＆チートシート
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
2011年10月26日 管理人のブックマーク:phpspot開発日誌
2011年10月26日の気になったページ集です ファイルをカレンダー形式で表示・管理するフリーソフト「Nemo Documents」 - GIGAZINE http://gigazine.net/news/20111026_nemo_documents/ 確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション | コリス http://coliss.com/articles/build-websites/operation/css/creative-css3-animation-menus-by-codrops.html Webデザインや配色をサポートする新サービス | Croppy（クロッピィ） http://croppy.org/ 約2700円でInstgramの写真から自由にデザインしてオリジナルのiPhoneケースが作れる「Casetagram」（日本も送料無
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ
テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」:phpspot開発日誌
テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 2011年10月21日- ottonascarella/TextBlur - GitHub テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」。 次のように最初はぼやけてるけど徐々にくっきりした文字にするなんていうことができるjQueryプラグインです。 単にテキストをその場で表示しちゃうよりも、徐々に表示するというエフェクトがいいですね。 使い方も次のように超簡単にできます。 $('h1').animate({textBlur: 20}, 0); 但し、IEでも一応対応はしているようですが、うまくは動作しないみたい。 スマホのプロモーション用のサイトなんかで使ってみてもよさそうですね。 関連エントリ テキストにグラデーションをかけられるj
PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」:phpspot開発日誌
Welcome to Imagine’s documentation! ? Imagine, image manipulations reloaded PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」 クラスはネームスペースで分けられて作られており、PHP5.3以降で利用可能。 サムネイル作成や切り取り、図形描画などのよく使われる処理をオブジェクト指向できれいに、あとで見ても分かりやすい状態でコードが書けます。 コード例は次のような感じで、メソッドチェーンを利用して直感的なコードが実現できているのがわかります。 こうしたものでネームスペースを使ったものって無かったので、ネームスペースちゃんとやりたい方にはよさそうですね。 関連エントリ 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 TwitterやFacebo
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」:phpspot開発日誌
Badger - Super sexy iOS style badges for jQuery ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」 $(element).badger(22);みたいに実行すると次のようにブロック要素に通知件数が追加されるというもの。 ちょっとめんどくさそうな処理もたった１行で実行できるのは有難い限りです。 既存の数値にプラスしたり、コールバック関数の指定なんかもできちゃいます。 関連エントリ div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 良い感じの水平アコーディオン実装jQueryプラグイン「liteAccordion」
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
Photoshopのクリエイティブで効率化ができるレイヤースタイル２０:phpspot開発日誌
20 Creative Photoshop Layer Styles for Designers Photoshopのクリエイティブで効率化ができるレイヤースタイル２０。 ワンクリックで図形に質感を与えてくれるレイヤースタイルですが、その素材が沢山紹介されているエントリのご紹介。 チョコレート風や紙風、その他色々な感じに図形を瞬間的に変換してくれるレイヤースタイル集です。 こういうのがあるからPhotoshopは本当に便利ですね。 関連エントリ メタリック感がリアルかなりクールなブラックのボタン作成Photoshopチュートリアル クラウド時代にファンシーな雲を描画するPhotoshopチュートリアル
TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」:phpspot開発日誌
TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 2011年08月22日- HybridAuth, Open Source Social-Signle-Sign-On Solution for authentication through Facebook, Twitter, Google, Yahoo, MySpace, LinkedIn, AOL, Vimeo, FourSquare, OpenID and other Identity providers TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 Facebook, Twitter, Google, Yahoo, Windows Live, MySpace, LinkedIn, FourSquare, O
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
