タグ

ブックマーク / phpspot.org (19)

  • JS&Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」:phpspot開発日誌

    GitHub - tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) JS&Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」 背景をファンシーかつポップに。Flash時代を思い出します 関連エントリ CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Gradientify」 WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」

    yasu-log
    yasu-log 2018/07/12
    【B!】JS&Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」:phpspot開発日誌
  • これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌

    45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き

    yasu-log
    yasu-log 2012/05/14
    HTML5で作られているからどれも重たい…
  • 最近のクリエイティブなFlashサイト50:phpspot開発日誌

    50 Most Creative Flash Websites 最近のクリエイティブなFlashサイト50 ここ最近はFlashサイトの巡回などはあまりすることがなかったのですが、やっぱりFlashもいいなぁというふうな気持ちにさせられてしまうサイトが色々。 やっぱり自由度はまだFlashの方が高いのかなぁという気にもなってしまうかもしれません。 今後どうなってしまうんでしょうね。 関連エントリ JavaScriptでFlashみたいなタイムラインアニメーションを作るToolkit「Mashi」 Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX

    yasu-log
    yasu-log 2011/09/20
    [B!]最近のクリエイティブなFlashサイト50:phpspot開発日誌
  • もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌

    もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記)じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日語環境を前提には、考えていないように思われます。 ・ActionScript の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした! 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い

    yasu-log
    yasu-log 2011/05/11
    [B!]フリーのFlashアニメーション作成ツール「Giotto」。不躾なインターフェースが気になるところ…。
  • 特定サイトから直リンクされた画像を一発で別の画像にする方法:phpspot開発日誌

    他人のブログをパクり無断で公開! 被害者の対抗策が凄い アメブロ広報「数件の通報が来ている」 - ガジェット通信 特定サイトから直リンクされた画像を一発で別の画像にする方法。 私のブログはともかく、不要な負荷が増えて嫌だなと思う場合に即効できる処置方法をご紹介。 mod_rewriteが入っているサーバ&.htaccessが利くサーバの場合は以下のように書いて直リンクされた画像のディレクトリに設置します。 RewriteEngine on RewriteCond %{HTTP_REFERER} ^http://ameblo.jp/sfida2010/.*$ RewriteRule ^(.*)$ http://example.com/deny/unko.png [R=301] /images/ 以下に直リンクを受けている画像群がある場合は、/images/.htaccess として保存して下

    yasu-log
    yasu-log 2011/01/13
    PHPSPOT さんの憤りを感じました
  • これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌

    21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの?っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実

    yasu-log
    yasu-log 2010/09/10
    この記事をブクマしてる人は jsdo.it を見ればいいのに…
  • データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」:phpspot開発日誌

    birdeye - Project Hosting on Google Code データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」というものがGoogle codeにて公開されています。 ライブラリはActionScriptベース。 デモページを見ればその多機能さについてうかがい知ることができます。 少々クセのあるデザインですが、サクっとデータのビジュアリゼーション機能を実装したい際に活用出来るかもしれませんね。 関連エントリ 色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集

    yasu-log
    yasu-log 2010/05/20
    Flexのグラフ系ライブラリ。SVG出力が可能な点がユニーク。
  • 近々リリースのPhotoshop CS5の新機能のムービー集:phpspot開発日誌

    Photoshop CS5: A Sneak Peek | Design Shack 近々リリース(4月12日リリースとのこと)されるPhotoshop CS5の新機能のムービー集がまとまっていました。 あのインパクトから何ヶ月か経ちましたが、遂にリリースされるということで個人的には楽しみにしています。 購入の検討のおさらいとしてよい判断材料となりそうです(あまりに凄いので購入意欲だけが上がるかもしれませんが、使うかどうかも冷静に見極めたいところ) ムービーを見ていくと、かなり興奮なのですが、ザッとみたい方用に、ムービーと併せて静止画でも少しまとめてみます。 あったものを消す機能 消しゴムで消すようにすると・・・ 木が消えちゃいます。 左上にある木に注目 木をツールで囲むと… 消えますw ちょっと欠けてしまった画像も… 補完されますw あるはずの道も・・・ 消せますww 動画でみたい方は以

    yasu-log
    yasu-log 2010/03/30
    PhotoshopCS5の新機能まとめ
  • JavaScriptでJPEGをエンコードするというクレイジーな発想が実現:phpspot開発日誌

    JavaScriptでJPEGをエンコードするというクレイジーな発想が実現されました。 使い方も非常に簡単で、次のようにオブジェクト指向になっています。 // インスタンス作成 var myEncoder = new JPEGEncoder([quality]); // エンコード実行 var JPEGImage = myEncoder.encode(CanvasPixelArray,[quality]) また、このベンチマーク結果がおもしろいです。Safari・Chrome速いです。 以下のページを参照してください。 A JPEG Encoder for JavaScript [bytestrm]

    yasu-log
    yasu-log 2009/11/27
    ActionScript 3.0のcorelibみたいな使い方でJPEGエンコードが可能
  • マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌

    Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals

  • WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌

    WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが1ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう?という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、

    yasu-log
    yasu-log 2009/03/23
    Webデザイナーに必要なスキルと、それがどうして必要かという考え手についてまとめていて参考になる。これから勉強を始める人にはすすめたい記事。
  • 画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌

    Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に

    yasu-log
    yasu-log 2009/03/19
    IEの場合、MS専用の縮小機能がCSSで指定できる(バイキュービック方式)。FirefoxやChomeの場合はディフォルトで縮小しても綺麗らしい。
  • クールすぎて本当に動的に作ったの?というグラフが描画できてしまう「visifire」:phpspot開発日誌

    クールすぎて当に動的に作ったの?というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて当に動的に作ったの?というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお

    yasu-log
    yasu-log 2009/03/18
    Silverlightなグラフモジュール
  • PHPコーディングに関する最適化TIPS 2009:phpspot開発日誌

    PHP micro-optimization tips | Alex @ Net PHPコーディングに関する最適化TIPS というのがまとまっていましたのでご紹介。 元記事では、micro-optimization ということで、これらを直すのももちろんだけど、ロジックを直す方がパフォーマンスは改善されるということを言ってるようです。 個人的な勉強がてら、メモとして残します。 ・__call のマジックメソッドを使うと遅い ・staticなメソッドはインスタンス化したオブジェクトのメソッドより速い ・関数呼び出しは、staticなメソッド呼び出しより高速 ・ローカル変数へのアクセスはグローバル変数へのアクセスより速い ・グローバル変数へのアクセスは、オブジェクトのプロパティより速い ・オブジェクトプロパティへのアクセスは、__get, __set を使うと遅い ・初期化された変数はそうでな

    yasu-log
    yasu-log 2009/03/14
  • iCal風の美しいカレンダーをページ上に配置可能なライブラリ:phpspot開発日誌

    Create astonishing iCal-like calendars with jQuery | Stefano Verna iCal風の美しいカレンダーをページ上に配置可能なライブラリ 次のようなカレンダーをウェブ上に設置して自身のスケジュール公開なんかが出来ます。 動作デモはこちらでイベントのある日にカーソルを合わせるとアニメーションポップアップで内容を知ることが出来ます。 単にスケジュールを羅列するよりこうした仕組みで表示するようにしておけば、スマートかつオシャレな印象を与えられそうです。 関連エントリ とても洗練されたUIの日付ピッカー&カレンダー集 超クールなカレンダー型日付入力補助用JSライブラリ

  • FlashのSharedObjectをJavaScriptから使用できる「jsSO」:phpspot開発日誌

    jsSO - Flash Shared Objects in Javascript - Pro-Web FlashのSharedObjectをJavaScriptから使用できる「jsSO」 Shared Object は Flash Communication Server を通じて接続されている複数のムービーやオブジェクト間で、リアルタイムにデータを共有できる非常に便利なオブジェクトのことです(参照) つまり、マルチプレイヤーでの通信が容易になるもので、これをJavaScriptから使えるようにしたものがjsSO。 チャットのデモを見れば、その便利さが分かるはず。 2つブラウザを開いて、発言してリアルタイム性を確認できます。 jsSOで比較的容易に実現できるみたいです。 jQueryベースで、Flashムービー自体は触る必要がないので、JSの知識があればフロントエンドはなんとかなりそう。

    yasu-log
    yasu-log 2009/03/03
    JSベースのチャットにFlashのSO(共有型)を
  • JavaScriptで名前空間が使えるようになる「namespace.js」:phpspot開発日誌

    namespacedotjs - Google Code JavaScriptで名前空間が使えるようになる「namespace.js」。 Namespace('hogehoge') で名前空間を定義する。次のように使えるみたい。 Namespace('foo.bar'); foo.bar.myFunction = function() {}; Namespace('com.example', { MyClass: function() { return {}; } }); var obj = new com.example.MyClass(); Namespace.use('com.example.MyClass'); var obj2 = new MyClass(); // include com/example/RemoteClass.js Namespace.include('com

    yasu-log
    yasu-log 2009/03/02
    JavaScript に名前空間を
  • 無茶苦茶クールな光のPhotoshopブラシ集:phpspot開発日誌

    18 Photoshop Brush Sets for Creating Incredible Lighting Effects | Web Design Ledger 無茶苦茶クールな光のPhotoshopブラシ集。 これはちょっとカッコよすぎじゃないか、という光のブラシ集が公開されています。 ファイナルファンタジーみたいな画像も簡単に作れるかも。 Sui Generis 3 Fractal Brush Abstract 12 CS4 V2 Brush Destiny Brushes 全部見る ブラシなので好きに使ってクールな画像を簡単に作れそうですね。 関連エントリ マストハブなPhotoshopブラシ集 PhotoShopのブラシやパターンがいっぱい「myphotoshopbrushes.com」 自然に関するPhotoshopブラシいろいろ

  • Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌

    Simple scalable CSS based breadcrumbs | Veerle's blog Apple風のクールなパンくずリストをクールに実装するサンプル。 マークアップが次のようにシンプルに書けるのがいいですね。 項目間の > のみを画像にして実装しているところがなかなかクールです。 関連エントリ これさえやればCSSをマスターできるかもしれないCSSチュートリアル&サンプル20 の目次部分のようなリストをCSSでデザインするテクニック CSSとdivを使った画像先読みテクニック

    yasu-log
    yasu-log 2009/02/16
  • 1