iPad用のサイト作成に覚えておくこと色々:phpspot開発日誌
Technical Note TN2262: Preparing Your Web Content for iPad appleのサイトにiPad用のサイト作成準備のためのページが上がっていました。 USの発売日に３０万台発売ということで、日本でもそれなりに売れることが予想出来ますが、今後iPad用にページを最適化する場合に覚えておくとよさそうです。 メモついでにご紹介。 UserAgent UAはiPadが入ってWebKitベースなので、AppleWebKit となるみたいです。 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 プラグインは使わない Fla
JavaScriptやPhotoshopなしにCSS3のみでボックスにリフレクション効果をあてるサンプル:phpspot開発日誌
JavaScriptやPhotoshopなしにCSS3のみでボックスにリフレクション効果をあてるサンプル 2010年03月21日- - CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop - Webstandard-Blog - Webdesign und Webentwicklung JavaScriptやPhotoshopなしにCSSのみでボックスにリフレクション効果をあてるサンプルが公開されています。 リンク先のサイトは英語ではないので意味が殆ど分かりませんが、デモページのコードを見れば実装例が分かります。 ボックスの中身はテキスト情報なんですが、ここまでリフレクションしてしまうところは地味に凄いです。 勿論、同じ内容のボックスを２度定義するようなことはしていません。 関連エントリ CSS3を使った凄いアニメーション集
CSSのrotationを使ったアナログ＆デジタル時計実装例:phpspot開発日誌
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation 次のような、CSSのrotationを使ったアナログ＆デジタル時計実装例が公開されています。 Flashっぽいのですが、Flashは一切使っていません。 左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。 こういうことも出来るんだ、ということで一度見ておいてもよさそうです。 実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。 -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); このプロパティがなかったらかなり大変そうですが、こ
デザイン性の高いハイクオリティなフォント色々:phpspot開発日誌
20 High Quality Free Fonts for Designers | Freebies デザイン性の高いハイクオリティなフォントが色々集まったエントリのご紹介です。 汎用的なフォント、というよりは個性を出したい場合に使えそうなフォントが色々とあってここぞ、という時に使えるかもしれません。 手書き風だけど綺麗なフォント 漫画っぽいフォント。色合いもいいですね 鉛筆で塗りつぶしたようなアナログ感があるフォント 丸い形が印象的なフォント どれも個性があってつい使ってみたくなるデザインですね。 関連エントリ カーブが美しいフォント色々 すごく良い感じの英文フォントいろいろ これは素晴らしいアートが詰まった２４の絵文字フォント色々
CSS3を使った凄いアニメーション集４７:phpspot開発日誌
CSS3を使った凄いアニメーション集４７ CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。
PHPでメールアドレスを画像化せずに簡単にスパム対策する方法:phpspot開発日誌
hide_email PHPでメールアドレスを画像化せずに簡単にスパム対策する方法です。 方法というよりも関数が公開されていて、次のように非常に簡単に使うことができます。 <?php echo hide_email('test@test.com'); ?> hide_email 関数に 自分のメールアドレス を渡すだけです。 これだけで、次のようにメールアドレスがクリックできる形で表示されます。 [javascript protected email address] HTMLに出力されるコードは以下です。 <SPAN id=e282852682>[javascript protected email address]</SPAN> <SCRIPT type=text/javascript>/*<
色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシのまとめ:phpspot開発日誌
24 Stylish and Natural Photoshop Brush Collections Media Militia 色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシがまとまっていましたのでご紹介。 雲、木、植物、雷、滝などのブラシがまとまっています。リアルなのでバックグラウンドイメージなどに使うとよさそうです。 雲のPhotoshopブラシ。デフォルトの雲模様よりもリアルですね 木のブラシ。種類が色々 リアルな花のブラシセット 雷のブラシ 滝のブラシもあります こうしたリアルな素材は覚えておけばサイトの彩りに使うことができそうなのでストックしておくと良いかもしれませんね。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット 光が超カッコいいPhotoshopのブラシ色々まとめ 無茶苦茶クールな光のPhotoshopブラシ集
ストックしておくと楽できそうなPhotoshop用グラデーション392種類:phpspot開発日誌
392 cool photoshop gradients ストックしておくと楽できそうなPhotoshop用グラデーション392種類。すでに紹介したものも含まれていますが、多数のグラデーションが紹介されてます。 ちょっとグラデーションを使いたいときにクリック一発で適用できるグラデーションのコレクションです。 あまり入れすぎるとスクロールバーが小さくなりすぎて使いにくい懸念もあるので入れすぎるのも問題かもしれませんが好みの効果を入れておくとよさそうですね。
携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」:phpspot開発日誌
携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」 2010年01月21日- lori (Life-of-request info) :: Add-ons for Firefox 携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」。 携帯サイトだとページ容量が１００Kぐらいを上限として作った方が無難らしいですが、ページを表示した時点でステータスバーにページサイズを表示してくれるFirefoxのアドオンがありました。 次のようにステータスバーに表示にかかった秒数とページサイズ、リクエスト数を表示してくれます。 携帯サイト作成においては Firefox の FireMobileSimulator でほとんどのことは事足りると思いますが、こういうアドオンでページサイズを見ておくことは重要です。
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
CSS2を使って簡単に画像のプレロードをするテクニック:phpspot開発日誌
2010年あけましておめでとうございます。 今年は少し開始が遅くなってしまいましたが、本日よりブログを再開させて頂きます。 今年もよろしくお願いいたします。 それでは早速、CSS2を使って簡単に画像のプレロードをするテクニックをご紹介。 次のようにCSS2の「content」プロパティにリソースを指定してあげることで先読みが可能のようです。 content: url(img01.jpg) url(img02.jpg) url(img02.jpg) 複数指定してもOKということみたいです。 対応ブラウザは以下となっています。 IE8+ FF2+ Safari 3+ Chrome 1+ Opera 9.62+ IE6,7は対応していませんが、<img> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。 以下のエントリを参照して
テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」:phpspot開発日誌
テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」。jQueryプラグインです。 使い方もjQueryプラグインなので簡単で、slickWrapというプラグインメソッドを呼び出せば実装できるようです。 <script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ $('.wrapReady').slickWrap(); }); </script> </head> <body> <img src="./myImage.jpg" class="wrapReady" /> <p>Lots of text goes here..</p> </body> 対応ブラウザでないと動きませんが、表示が崩れたりエラーが発生したりするわけではないので使ってしまってもよいかも。 Google Chrom
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」:phpspot開発日誌
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla
いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル:phpspot開発日誌
いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル。 Photoshopのレイヤー効果などで描画した影は以下のように、これはこれでよいのですが、面が宙を浮いているようにみえます。 ということで、レイヤー効果をつけた後、レイヤーをラスタライズし、次のように円形選択ツールで４つの辺を削ってみると、すこし硬めの紙を平面に置いたようなよりリアルな感じを出すことができます。 これは微々たる違いではありますが、比較するとこっちのほうがリアルに感じますね。 実際に写真を当てはめてみた図が以下です。 以下のエントリを参照してください。 Better Drop Shadows in Photoshop | Design Reviver 関連エントリ プロレベルのPhotoshopチュートリアル集 ボタン作成のPhotoshopチュートリアル集 飛び出る立体グラフィックを
phpコードの動作テスト時に使えるちょっとした小技:phpspot開発日誌
phpコードの動作テスト時条件式作成ツールというのを作成・公開しました。 本番の環境で動作の確認をしたい場合に、自分だけ動作させるように以下のようなコードを書く場合があります。 if ($_SERVER['REMOTE_ADDR'] == 'IPアドレス') { // テストコード } この短いコードですが、(1) 条件式を書く (2) IPアドレス調べる (3) IPアドレス当てはめ、のように３ステップ踏む必要があり、書くとちょっと面倒ですね。これをスニペットとしてコピペで使えるようにしたものです。 開いただけでコードが表示されてコピペして使えるのでコードテスト時に利用すると意外に便利です。 ツールといえるほどのものではないのですが、自分用においておきましたので参考までに、良かったら使ってください。 以下のエントリを参照してください。 phpコードの動作テスト時条件式作成ツール
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」:phpspot開発日誌
CSSのrotationを使った時計「CSS Clock」:phpspot開発日誌
PHPでPageRankを計算するサンプルコード:phpspot開発日誌
超カッコいい光のブラシセットのまとめ:phpspot開発日誌
CSSで3D空間を表現するテクニック:phpspot開発日誌