画面の遷移をヴィジュアライズできて超分かりやすいアクセス解析「Mixpanel Flow」:phpspot開発日誌
Mixpanel Flow | Mobile and Web Analytics 画面の遷移をヴィジュアライズできて超分かりやすいアクセス解析「Mixpanel Flow」 トップページからどこに行ったのか、っていう画面遷移の情報を次のようなダイアグラムでヴィジュアライズしてくれます。 ヒートマップでどこがクリックされているかという情報って取れますが、これは便利。 トップページからログインのページにいって、何％が離脱したのか？といった情報がすぐに見た目で判断できます カーソルを合わせると１１％が離脱という詳細が分かります。赤くなっている部分が離脱ということで超分かりやすい 更にその先はどうなってるの？と思ったら円をクリックすればその下が詳細に表示されるというものです ユーザの動きをこのツールで理解すれば、サイトとしてどこを改善すればよいのか？が一目瞭然なので、サイトの機能追加や改善といった
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
サイトのクロールを最適化するための１５のTIPS:phpspot開発日誌
15 Ways to Improve Website Crawling | PVM Garage サイトのクロールを最適化するための１５のTIPSが公開されていました。 検索エンジンにうまくクロールしてもらえないと検索ページにも表示されず、トラフィックをみすみすのがしてしまうことにもなりそうですが、クロールを最適化するTIPSが公開されており、サイト作成時や公開時の参考にできます 以下にその目次と個人的に知っていることを追記しています。 オリジナル記事の翻訳ではないので、元記事を読みたい場合は元記事を参照してみてください。 パンくずリストを作る - サイト構造を検索エンジンに教えることができる 検索結果にもパンくずリストが出ることがありますね。ユーザビリティだけじゃなくSEO的にも意味があるとのこと。 個別のポストに３〜５の関連エントリを添える 同種のエントリを加えることでグルーピングがで
WebAPIを綺麗にスタイルしてデモ付きでドキュメント化できる「Swagger」:phpspot開発日誌
Swagger: A simple, open standard for describing REST APIs with JSON WebAPIを綺麗にスタイルしてデモ付きでドキュメント化できる「Swagger」 TwitterやFacebook等、大きいサイトはAPIを提供して利用者が自由にアプリケーションを作成して便利に使えますね。 成功の理由にはAPIも大きく寄与していそうです。 そこで新しくWEBサービスを作る際にはMySQLなどを直接叩くのではなく、APIをまず開発するという開発手法を取っているところもあるのではないでしょうか？ APIをまず作っておいて、それをベースにサイトを作っていくとAPI作成の手間が省ける上にスケーラビリティなんかも確保しやすかったりで本格的にやる場合はよい開発手法な気がします。 そんなAPIを作ったはいいけどうまくドキュメントがまとめられていなかった
HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」:phpspot開発日誌
speak.js: Text-to-Speech on the Web ? Mozilla Hacks ? the Web developer blog HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」。 テキストを音声に変えられるソフトがありますが、これをHTML5/JSで実現するためのライブラリです。 デモページ speak("hello world") のように使い方が超シンプルなのがいいですね ソースコードはgithubで公開されています ローマ字で書けば日本語も発音させられます 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル:phpspot開発日誌
Creating CSS3 Drop sliding list Menu #6 ? Script Tutorials CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル。 次のような、ジャンルごとにわかれた幅広で使いやすそうなドロップダウンリストをJSなしで実装してしまおうというチュートリアルです。 ソースを見ると<script>タグがなく、CSSのみでアニメーションしつつ内容を切り替えるということをやっているのがわかります。 CSSだけでもこういうのできるんだ、というのを知っておく意味で一度見ておいてもよいでしょう サンプルだけではなく実用性も兼ね備えています。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ピュアCSSでアニメーションするアコーディオン実装デモ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集:phpspot開発日誌
10 Best Free HTML And CSS Website Templats Of June 2011 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集がまとまっていました。 種類は色々でコーポレートサイトやキャンペーンサイト等色々使うことができそうです。 ちょこっと変えることで開発者さんでも比較的容易かつ高速にプロモサイトが作れますね 関連エントリ 34のフリーで綺麗なXHTML/CSSテンプレート ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ 綺麗にデザインされたフリーのHTML/CSSテンプレート１０ フリーの(X)HTML/CSSテンプレート５０ クールなデザイン満載のXHTML/CSSテンプレート４０種
TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０:phpspot開発日誌
40 Sets of Free Social Media Icons | Vandelay Design Blog TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０。 次のような、デザインに嫌なクセがなくて汎用に使えそうなアイコン〜個性的なものまで色々なアイコンセットが紹介されています。 サイトデザインに合ったアイコンが選べそうなので覚えておいてもよさそう。 Linked.inも日本で開始するそうですが、どうなっていくのか楽しみです 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット 246種類のクリアで美しいソーシャルアイコンセット
CSSのアドレスを入力すると使われている色の一覧をプレビューできる「CSS Prism」:phpspot開発日誌
CSS Prism by Ryan Berg CSSのアドレスを入力すると使われている色の一覧をプレビューできる「CSS Prism」 特定CSSの特徴を知りたい場合に色を調査すればどこに何があるか分かりやすそうです。 例えば、あるサイトで３つのCSSが使われているとして、このツールでそれぞれ調査すればどの部分でどのカラーを定義しているのか？というのが一目瞭然になります。 また、このサイトの色合いいなぁ、という場合にもWYSIWYGでサクッと調査できます 色をプレビューしている例。 関連エントリ CSSスプライト実装が誰でも簡単にできるツール「Spritebox」 CSSだけで実装するアイコン付きのセクシーなツールチップ作成チュートリアル
PHPを使って画像をアップしてjQueryで切り抜くチュートリアル:phpspot開発日誌
Image Upload and Cropping with PHP and Jquery PHPを使って画像をアップしてjQueryで切り抜くチュートリアルとデモが公開されています。 配布されているプログラムをダウンロードしてプロトタイプとして使って開発効率を高める事もできますし、単に学習用に使うこともできそうです。 実際のサービスで使うにはセキュリティの問題がないかどうかをちゃんとチェックして使いましょう デモページはこちら 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル PHPとGDを使ってCaptchaを自作するチュートリアル
スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」:phpspot開発日誌
Socketbug - Mobile Web Application Debugging スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」。 モバイルブラウザで動くことを想定してSafariなどで作っても若干挙動がおかしくなることがあったりします。 Socketbugを使えば、スマートフォンで動いているエラーをそのままキャッチしたり、JSコードを送信してスマフォ上での解釈で動かしたりできます。 出来ることは以下。 ・PC上のブラウザコンソールからJavaScriptを実行するなど各種リモート操作 ・スマフォブラウザに表示されているアプリのソースコードを得てPC上ブラウザに表示 ・スマフォブラウザのエラーをPCのブラウザコンソールに表示する ・スマフォブラウザの現在のHTMLソースをPC側のブラウザでみる（通常はiPhoneブラウザでソースを覗いたり
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
PHPで画像からHTMLのカラーパレットを作るサンプルプログラム:phpspot開発日誌
Generating a color palette from a image in php PHPで画像からHTMLのカラーパレットを作るサンプルプログラムがcode dieselにて公開されています。 画像を渡せば、GDを使って使われている色を分析し、頻度の多い順に配列で受け取ることができます。 なんらかのWEBサービスやツールに応用することができそうです。 クラスライブラリの形なので再利用も超簡単です。 元記事ではテーブルタグを使ったカラーパターンの出力用プログラムも公開されています。 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
バックグラウンド画像、壁紙などを作る際に参考にできるPhotoshopチュートリアル集:phpspot開発日誌
High Quality Instructive Photoshop Wallpaper Tutorials | CreativeFan バックグラウンド画像、壁紙などを作る際に参考にできるPhotoshopチュートリアル集 次のようなイメージを作成するチュートリアル集になっています。どれもなかなかクオリティが高いので参考にできそう。 グラデーションをどれもうまく使ってますね 関連エントリ プロレベルのPhotoshopチュートリアル集 パノラマ写真から小さな惑星を作るPhotoshopチュートリアル 動画で学べるPhotoshopチュートリアル２０ 広告デザインのためのPhotoshopチュートリアル１５
スライダーを上手く使ってデザインされたWEBサイト集３０:phpspot開発日誌
30 Websites Using JavaScript Sliders | Vandelay Design Blog スライダーを上手く使ってデザインされたWEBサイト集３０ ページ上段に大きく画像を使ってデザインされたWEBデザイン集です。 同じようなサイトを作る際の参考資料となりそうだったのでご紹介です。 それぞれデザイナーの方が趣向を凝らしたデザインはどれも勉強になると思います 関連エントリ 奥行きをうまく使ったサイトデザイン集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ 自然を取り入れた美しいWEBデザイン集
jQueryとHTML5でジオロケーションするデモ:phpspot開発日誌
Geo Location with HTML5 and Jquery jQueryとHTML5でジオロケーションするデモとサンプルがダウンロード可能になっています。 特にスマートフォン向けの機能として実装する際に参考にできそうです。 いざ実装するという段階になったときにサクっと実装できそうなので覚えておいて損はなさそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 jQueryとCSS3、HTML5でここまで出来るホバーインタフェース
電話を使ったWEBサービスを構築する際に使えそうなフレームワーク「Plivo」:phpspot開発日誌
Plivo 電話を使ったWEBサービスを構築する際に使えそうなフレームワーク「Plivo」。 マイクなどを使って録音し、WEBに簡単にアップロードしてシェアできたりする「こえ部」が面白かったりしますが、Plivoを使えば電話とアプリケーションを絡めたサービスを作る際に使えそうです。 システムとの対話にはREST APIを使い、RESTの仕様を覚えれば内部について深く知らなくてもある程度使えるようなものになっているみたい。 例えば、スカイプやGTalk等からのリクエストを自分のアプリケーションに流した後、何らかの処理を行い、mp3音声を返すみたいなことが出来るようです。 Amazon EC2に登録したりすると電話がかかってきたりしますが、おんなじような仕組みなんでしょうかね。 各種言語用のヘルパーライブラリもあるみたい。PHPでいうとこちら 実際に試してみたわけでもなく、なんとなく面白そう、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
