Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」:phpspot開発日誌
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ＆ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい！ この
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ:phpspot開発日誌
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ 「WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ」というエントリで先日PEARの便利ライブラリについてまとめたのですが、今回はPEAR以外でも有名なライブラリをご紹介。 PEAR以外で挙げていくときりがありませんが、とりあえず有名どころや、私の知っている物、過去に当ブログで紹介したものをまとめてみます。 他にも便利な物や定番の物がありましたら、@phpspot_kj までTwitterなんかで教えてください。 グラフ描画 JpGraph ありとあらゆるグラフを描画してくれる有名なグラフライブラリ。 pChart グラフにデザイン性を求める場合に使えるクールなグラフ描画ライブラリ PHP/SWF Charts PHPでグラフをFlashで描画出来るライブラリ。グラフに動きを出してインタラクティブ
WEBデザイナー向けのChromeアプリケーション１０:phpspot開発日誌
10 Best Chrome Web Apps For Web Designers WEBデザイナー向けのChromeアプリケーション１０。 先日オープンしたChrome Web Storeに登録されている便利なアプリケーションの特集のご紹介。 まだ公開して間もないというのに便利そうなツールが多数公開されています。 Ajax Animation HTML5ベースのアニメーションをFlashみたいにタイムラインをベースに編集できるツール レイヤーなんかも使えるみたいです。 Image MarkUp by Aviary 画像のリサイズ、回転、クロップ等の基本的な操作や文字を入れたりすることも出来ます。 ブロガーの方は便利に使えるかもしれません。 Picnik Photo Editor 写真編集ツールのPicnikをChromeから使えるアプリ Color Editor アプリ上で次のような画面
PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」:phpspot開発日誌
PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 2007年11月17日- 追記: MobilePictogramConverter は公開が停止されており、速度も低速なのでHTML_Emojiを使いましょう PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 今回は、「MobilePictogramConverter」という、PHPで作られた3キャリア対応の絵文字変換ライブラリをご紹介します。 PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 次のような特徴があるそうです。 DoCoMo, au, SoftBankの絵文字を相互変換可能 端末からサーバーへ送信された絵文字の変換が可能（掲示板など） SJIS/UTF-8に対応 PC
自分のTwitterを見やすくカスタマイズ＆バックアップできるPHPスクリプト「Tweet Nest」:phpspot開発日誌
自分のTwitterを見やすくカスタマイズ＆バックアップできるPHPスクリプト「Tweet Nest」 2010年09月24日- Tweet Nest 自分のTwitterを見やすくカスタマイズ＆バックアップできるPHPスクリプト「Tweet Nest」。 自分でサーバに設置して、自分のツイートをより便利に閲覧・分析することが出来ます。当然PHPなので自由にカスタマイズOKです。 自分の月の書き込み数や、時間別の投稿数なんかが一目瞭然の画面。 twitpicの画像等も展開されてそのまま画面内に表示されます。 オリジナルのデザインもかなり素晴らしいですね。 Twitterにホスティングされていることで、レイアウトの自由度が制限され、広告なども載せられないので、こうしたツールを使ってみるのも良いかもしれませんね。 関連エントリ TwitterのAPIを使ったり調べる際に便利な「Twitter
大迫力のページをフルに使ったイメージギャラリー実装デモ:phpspot開発日誌
Full Page Image Gallery with jQuery | Codrops 大迫力のページをフルに使ったイメージギャラリー実装デモ。 jQueryを使って画面を最大限に使ったギャラリーの実装コード例とコードのダウンロードが可能です。 フルサイズなので、写真の迫力が出せて、更に所々がJavaScriptによってアニメーション付きでクールに動作します。 コードはそれほど複雑なものではなく、カスタマイズ等も簡単そうです。 関連エントリ これはいい！iPadテーマのjQuery画像ギャラリー PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 超カッコいいApple風スライドショーギャラリー作成チュートリアル JavaScript製の画像スライダー・ギャラリーいろいろ
値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」:phpspot開発日誌
複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」 2010年08月12日- jQuery - So So Social - jQuery News Feed from your Social Networks 複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」。 ソーソーソーシャルという名前もなかなかいいですね。 TwitterやFlickr、Deliciousの情報を次のように一括して表示することが出来ます。 TumblrやWordPress、Last.fm、Facebookなども統合して表示することが可能。 自サイトに自分のアクティビティを一括して載せられるので便利ですね。 利用するには、so.so.social.init.js によってフィードのURL等を入力して
どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」:phpspot開発日誌
どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」 2010年07月22日- Commentics - A free PHP comments script どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」。 コメントがないページにも、CAPTCHAやアバターアイコン、星レーティングやRSSフィード出力、メール通知といった高機能なコメントフォームを埋め込むことが可能です。 更に、システム全体に書き込まれたコメントの削除や修正が可能。バックアップ機能等も備わっています。 コメント欄が実際に実装された例。かなりの高機能ですが、機能を絞ってシンプルにすることも出来るみたい。 コメントをページに埋め込む際には、管理画面からコメントを埋め込むページを作って、次のようなPHPコードをページ内に埋め
HTMLの色の操作が素晴らしく簡単になるjQueryプラグイン「xcolor」:phpspot開発日誌
jQuery color plugin xcolor - Website and Application Intelligence HTMLの色の操作が素晴らしく簡単になるjQueryプラグイン「xcolor」。 出来ることは豊富にあるのですが、以下に使えそうなものを列挙してみます。 ２つの色を混ぜ合わせて新しい色を作ることができる $.xcolor.combine('#800000', '#0000fa'); 特定の色を明るくすることができる $.xcolor.lighten('#ff0000'); 特定の色を暗くすることができる $.xcolor.darken('#ff0000'); 類似の色を生成することが出来る $.xcolor.analogous('#ff0000'); getRGBメソッドでRGBのオブジェクトに分解できる WEBセーフカラーに補正することが出来る 応用すること
フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」:phpspot開発日誌
Zeuscart ? Free GPL Ecommerce Shopping Cart Software | Ecommerce Solutions | Online PHP Shopping Carts | Storefront Software フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」。 AmazonっぽいECサイトの構築ができる上に管理画面もなかなか充実しているようです。 構築されたショッピングサイト。UIもなかなかカッコいい。 実際に見てみる場合はこちら 商品詳細ページ 管理画面では売れたもののグラフ描画機能なんかがついてるようです。 アイテム管理画面 １つの選択肢として覚えておいてよさそうですね。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 カートが目立たず、いい感じにスライドしてくれ
iPhoneアプリにソーシャルサイトでのシェア機能を３行で簡単実装できる「ShareKit」:phpspot開発日誌
ShareKit : Drop-in Share Features for all iOS Apps iPhoneアプリにソーシャルサイトでのシェア機能を３行で簡単実装できる「ShareKit」。 iPhoneアプリで得たサイトの情報をソーシャルサイトに簡単にシェアする機能をたったの３行で実装できるようです。 実装したアプリの例は次のようになります。シェアボタンを押すことでサイトが一覧されるのでシェアしたいサイトを選ぶという流れです。 対応しているソーシャルサイトは以下。 Delicious Email Facebook Google Reader Instapaper Pinboard Read It Later Tumblr Twitter 実際に組み込むとするとめんどくさそうですが、このフレームワークで簡単実装できるのはありがたいですね。 関連エントリ iPhoneアプリのツールバー
iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」:phpspot開発日誌
Catch My Fame New jQuery LightSwitch Plugin iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」。 次のようなUIで、チェックボックスやradioボタンと同じ働きをするUIを作ることが出来ます。 true, false で on/ off を切り替えるUIと、それらがDisabledになった例 radioボタンと同じ動きをする例。１個をyesにすると他がnoになります。 デモはこちら checkboxはありましたが、radioとして動くのは無かったかもしれませんね。 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneスタイルのチェックボックスをjQueryで簡単実装 何を入力したかが分かるiPhoneスタイルのパスワ
GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」:phpspot開発日誌
GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」 2010年04月28日- jQuery google api and other google hosted javascript libraries. - ScriptSrc.net GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」。 jQueryを使うサイトでは、通常、自分のサーバにjQueryをアップロードして、<script>タグ書いて、srcでその位置を指定して、なんていう面倒なステップを踏むわけですが、このサイトにアクセスしてボタンを１回おせば、利用用のタグがクリップボードにコピーされます。 コピー例：<script type="text/javascript" src="htt
JavaScript使ってないのに使ってる風のピュアCSSなテクニック集:phpspot開発日誌
30 Pure CSS Alternatives to Javascript - Speckyboy Design Magazine JavaScript使ってないのに使ってる風のピュアCSSなテクニック集。 最近ではCSS3等の登場によってCSSだけでもかなり高度なことが出来るようになっていますが、それらのコレクションがまとまっていました。 CSSだけでもこれだけのことが出来るという可能性を知るのに調度良いです。 マウスオーバーでハイライトする地図 タイムライン LightBoxもCSSで コンテンツスライダー スピーチバブル 無理してCSSのみにこだわる必要はありませんが、楽な選択肢を取れるなら覚えておいて損はありませんね。 関連エントリ ピュアCSSで実装された吹き出しのデザイン例色々 ピュアCSSで画像を壁に貼ったポラロイドギャラリー風にするサンプル クリーンなデザインでピュアＣＳ
PECLのoAuthエクステンションを使ってPHPでTwitterにログインするサンプル例:phpspot開発日誌
Complete oAuth script for Twitter and LinkedIn using PECL oAuth Extension The Storyteller PECLのoAuthエクステンションを使ってPHPでTwitterにログインするサンプル例が公開されています。 PECLにoAuthのエクステンションが公開されているようで、それを使ってTwitterやLinkedinにログインするサンプルプログラムです。 Yahoo!Japan も oAuth に対応していて、サービスに大手サイトのログインを使いたい場合に使えますね。 拡張を使って簡単にできるのはいいのですが、それでも結構サンプルを組むのは大変のようで、このサンプルプログラムを参考に作ればoAuth部分は比較的速攻で作ってしまえそう。 エクステンションなのでPEARなどに比べて速度も出るので、PEARを使ってい
ページの使い方をページ内に埋め込んでしまえる「Amberjack2」:phpspot開発日誌
Amberjack: Amazing On-Page Tutorials ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。 ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。 サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。 説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。 ←、→キーで次の説明に移ることも出来ます。 例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例 説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。 サイトのここは、こう
写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」:phpspot開発日誌
写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」 2010年03月31日- jQuery Reel Plugin 写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」が公開されています。 マウスで写真をドラッグします くるっと回転します。 マウスドラッグだけでなく、マウスホイールを回転させても同じ効果が得られます。 ３６０度のパノラマ写真を回転させるようなことも出来るみたいです。 商品の詳細についてより訪問者に分かりやすく伝えるとか、３６０度のパノラマ写真をみせる際のUIに使えそうですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
