レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」:phpspot開発日誌
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」:phpspot開発日誌
PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 2012年05月24日- Opauth ? Multi-provider authentication framework for PHP PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」。 Zend、CakePHP、Symfony、CodeIgniter等のフレームワークに認証を入れる場合に是非参考にしたいライブラリ。 Facebook, Google, twitter, Linked.in の他、OAuth、OpenID などにも対応。Yahoo!JapanでOAuth等による認証ができますから、これで認証にまつわる処理はすべて実装できそう。 各サイトにおける認証の方法を都度実装するのは非効率ということで、こうしたライブラリで認証処理はサクっと終
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
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
画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」:phpspot開発日誌
Zebra_Image, a lightweight image manipulation library written in PHP 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 転送量や速度の観点からPHPの画像を縮小したり、またはサイズをそろえてきれいに並べるなど扱いやすくする際にもリサイズを行いますがそういった処理を簡単に行えるようになるクラスライブラリのご紹介です。 元の画像 背景を指定しておき、２００ｘ２００ピクセルなど指定したサイズにまるめるメソッド。 元画像は一切、切り取られることなく縮小され、指定の画像サイズにできます 指定幅サイズに単に縮小 ２００ｘ２００ピクセルなどを指定した場合、指定ピクセルいっぱいに広がるようにサイズ調整して切り抜く方法 GDで１から書くと結構めんどくさかったりするのでこうしたもので簡単にやっちゃいましょう 関連
可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」:phpspot開発日誌
Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj
ユーザへの通知UI全部のせなjQueryプラグイン「noty」:phpspot開発日誌
noty - a jquery notification plugin ユーザへの通知UI全部のせなjQueryプラグイン「noty」 ページトップやボトム、あるいはページのセンターやポップアップでメッセージを表示することが出来るプラグインです noty({text: 'noty - a jquery notification library!'}); のように呼び出せばアラートが出せるみたいです。 各種オプション指定によって表示位置を変えられたりするようです 最近のWEBを見ていると通知ってやっぱり重要だなと感じるわけですが、こうしたもので分かりやすく表示してあげるといいですね。 関連エントリ faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 分かりやすい通知ボックスを作れる「Humane JS」 簡単なコードでアイコ
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」:phpspot開発日誌
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情
レスポンシブデザインのためのCSSフレームワーク１５:phpspot開発日誌
15 Responsive CSS Frameworks Worth Considering レスポンシブデザインのためのCSSフレームワーク１５ スマホやデバイスが多様化するに伴って今後必須化すると思われるレスポンシブデザイン作成のためのCSSフレームワークがまとまっています 沢山あるので自分にあったものが選べるかもしれません。この分野でのデファクトが決まると１スキルとしてアピールできるような日が来るのかも LESS Framework 4 Foundation MQ Framework columnal など全１５種類が紹介されています 関連エントリ Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」 ログイン/ユーザ登録といったフォーム実装用のフレームワーク「jFormer」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
