レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」:phpspot開発日誌
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」:phpspot開発日誌
PHP Mobile Detect - lightweight PHP class for detecting mobile devices スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」。 判別ならば文字列マッチングでもよいという人もいると思いますが、グローバル変数や無駄なマッチングを省くためにこうしたクラスライブラリを活用するのもよいかもしれません。 次のようにコードがシンプルですっきりと読みやすくなります。iPhoneやiPod touch、Android等をマッチングさせるコードは美しくないですね。 どのぐらいメンテナンスされるのかという点がきになったりしますが、そこまでルールが極端に変わることもなさそうですね。 関連エントリ スマホを判別するのに便利なJSスニペット Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独
faviconを円グラフにしてアニメーションできる「Piecon」:phpspot開発日誌
(65%) Piecon / Pie charts in your favicon! faviconを円グラフにしてアニメーションできる「Piecon」。 処理の進捗に応じてtitleタグを書き換える方法もありますが、faviconで円グラフを描くというのは斬新な発想ですね。 画面遷移無しで処理に時間がかかるような時に表示させてあげると他のサイトを見ながら進捗も図形で一目で分かってかなり親切です。 16x16ピクセルをいかに使うかといったところですが、円グラフはちょうどマッチしていて、ナイスアイデアと言わざるをえませんね。 jQuery等に依存せずに単体で使うことが出来る所も特徴。 ブラウザによってはfaviconのアニメーションができませんが、タイトルタグの書き換えによって進捗も分かるようになっています 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js
FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」:phpspot開発日誌
FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」 2012年07月25日- Infinite-social-wall FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」 jQueryのisotopeプラグインを使い、次のようにソーシャルサイトをまとめて表示。無限スクロール機能もあります Google Plus、Github、Pinterest、Twitter、StackOverflow、Reddit、Instagram等のメジャーなSNSサイトに対応。 これらを一目でみられ、Pinterest風のUIになっているというのはプロフィールページを作る際に便利かも 名刺なんかにTwitterやFacebook等色々載せ過ぎる
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
CSS3でクールな角丸テーブルを作る例:phpspot開発日誌
Practical CSS3 tables with rounded corners - RedTeamDesign CSS3でクールな角丸テーブルを作る例。 ヘッダーにグラデーションをかけつつ角丸なテーブルを作る例です。カーソルを乗せるとハイライトする機能もtransitionによって組み込んであって良い感じです。 HTMLとしては普通のテーブルなのでCSSでここまでカスタマイズできるというのはいいですね 背景をzebraにするデザインも紹介されています。素材として覚えておくと素早く綺麗なテーブルを構築できそうですね 関連エントリ CSS3で実装された画像スライドショーサンプル CSS3のアニメーションサンプル４７ ピュアCSS3のコンテンツスライダー ピュアCSS3でタイピングアニメーションするデモ
カッコイイWEB管理画面を作成するPhotoshopチュートリアル:phpspot開発日誌
Design an Professional Admin/Control Panel Template in Photoshop - Bloom Design Blog | Bloom Design Blog カッコイイWEB管理画面を作成するPhotoshopチュートリアル。 次のようなカッコイイ管理画面をデザインしていく流れが見れます。 単にテンプレートを真似て作るのもいいですが、つくり方も大体わかるというのはいいですね あまりリソースをさけないところではあるかもしれませんが、管理画面も美しくしたい場合に参考にできそうです 関連エントリ 広告デザインのためのPhotoshopチュートリアル１５ 新しめのPhotoshopテキストエフェクトチュートリアル２５ パノラマ写真から小さな惑星を作るPhotoshopチュートリアル 写真のようなリアルなオブジェクトを作るPhotoshopチュート
PHP＋MySQLなオープンソースの超多機能ECサイト構築ソフトウェア「LiveCart」:phpspot開発日誌
LiveCart - Free and Open Source PHP Shopping Cart Software PHP＋MySQLなオープンソースの超多機能ECサイト構築ソフトウェア「LiveCart」 管理画面もあって、SEOや多言語対応、決済対応、カテゴリ階層、Valid HTML+CSSなど、アピールポイントがかなり書かれていますがとにかく多機能。 デモページを見てもとりあえずショッピングカートとして問題なさそうな感じです。管理画面のデモも使えます カートへの追加はAjaxで追加されたりと、うっとうしくない程度にAjaxやJSも使われています 商品一覧もamazonっぽくて分かりやすいです。 テンプレートのカスタマイズはWYSIWYGで編集できちゃうところもクール 他にもECサイト構築ソフトウェアはあれど負けず劣らずの多機能っぷり。選択肢の一つとして覚えておいてもよさそうですね
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
ブログのプチリニューアルに使った技術要素色々:phpspot開発日誌
ブログのプチリニューアルに使った技術要素色々。 先日、少し頑張ってブログのプチリニューアルを実施したのですが、その際に使った色々な要素をご紹介します。 タイトルも微妙にリデザインしてます まず、当ブログの問題点として、多数ある記事がきっちりカテゴリわけされていないという点がありました。 過去の記事を探そうにも見つけづらくて困るという連絡を頂いたこともあったり。 というわけで、沢山ある記事をある程度自動でオーガナイズしてしまおう、ということで作業してみました。 最初からタグ付けしとけばいいという話ですが、独自の入稿システムがタグを入力できるシステムになっていない事で、既にある５０００以上の記事をいちいち分類するのは面倒なので機械的にやりました。 手間の割には、ある程度いい感じに構築できたかなと思っています。 何か他の仕組みにも参考にして頂ける点もあるかもということでエントリにしてみます。 h
MySQLベースのデータ管理画面をWEB上で自動生成可能な「CRUD太郎」:phpspot開発日誌
CRUD太郎 - 管理画面自動生成 MySQLベースのデータ管理画面をWEB上で自動生成可能な「CRUD太郎」 まずWEB上で、Create分を入力してウィザードに従うとCakePHPベースのPHPコードがダウンロード可能です。 生成できる画面デザインもクールで、機能的にはデータの挿入、編集、削除などの機能があります。 実際に利用者に公開する部分に注力したい場合はこうしたツールで管理画面の作成作業を簡略化したいものですね。 現在CakePHPベースですが、今後別のフレームワークにも対応予定だそうです。 管理画面の色は７色から選べます データの追加画面もいい感じです ログイン・ログアウト機能、データの追加・編集・削除・表示機能がCREATE文を入れるだけで本当に一瞬で出来てしまいました。
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
PHPで動画のストリーミングサーバを作れるフレームワーク「xmoovStream」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン... 次の記事 ≫：JavaScriptでどうしても外部のドメインのコンテンツを読みたい際に使え... xmoovStream PHPで動画のストリーミングサーバを作れるフレームワーク「xmoovStream」。 ちょっと無茶な気もしますが、PHPでストリーミングの振る舞いを変えられ、カスタマイズも可能なところが魅力です。 動画プレイヤー、MP3プレイヤーが付いており、これを使うだけでも便利そうです。 使い方ですが、「xmoov.php?file=FLVファイル&position=開始したいポジション」のようにプレイヤーから呼ぶとランダムアクセスなどによるストリーミングが可能のようです。なんと帯域の制御なんかも可能みたいです。 動画だけでなく、MP3などの再生もでき、プレイヤーも標準で付属しています。 このプ
PHPでMySQL管理が便利になるphpMyAdminの代わりとなるWebアプリいろいろ:phpspot開発日誌
PHPでMySQL管理が便利になるphpMyAdminの代わりとなるWebアプリいろいろ SQL Buddy セットアップなし、Ajaxベース、インポートエクスポート機能など、オープンソース開発 PHP Mini Admin 単一ファイル、基本機能利用可能、インポートエクスポート機能、オープンソース開発 MySQLPHPGrid アプリではないけど、ＤＢの中身を簡単に書き換えられるＵＩを実装するためのライブラリ Open Source Flash - flashmyadmin Flashベースのphpmyadmin phpFlashMyAdmin こちらもFlashベース 関連エントリ phpMyAdminの簡易版「phpMinAdmin」 SQLクエリをビジュアルに組み立てることができる「phpMyAdmin Query Bulder」 Ajaxを使ってその場でMySQLの値を書き換えら
phpMyAdminの簡易版「phpMinAdmin」:phpspot開発日誌
phpMinAdmin phpMyAdminの簡易版「phpMinAdmin」 なんと、phpMinAdminは１ファイルで出来ていて、php+MySQL管理機能を提供してくれます。 最低限のDB操作機能は備えているみたい。 関連エントリ SQLクエリをビジュアルに組み立てることができる「phpMyAdmin Query Bulder」 サイズの小さいphpMyAdminの機能縮小版「PHP Mini SQL Admin」 Ajaxを使ってその場でMySQLの値を書き換えられるウィジェット作成ライブラリ「MySQLPHPGrid」 Microsoft SQL Serverをphpで管理するphpMSAdmin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」:phpspot開発日誌