サイトに設置した「いいね！」を押したとき、 タイトルとテキストだけではちょっと物足りない感じがしませんか？ OGP（Open Graph protocol）の対応をおこなうだけで、 ウォールが少し華やかになります。 弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。 弊社サービスサイトのOGP対応後 OGPを使うとどうなるの？ OGP（Open Graph protocol）を使うと、 「いいね！」を押してウォールに投稿するときに、 タイトルや概要、表示する画像を指定することができます。 通常はFacebookが自動で表示してくれます。 OGPに対応する前のデフォルトはこのように表示されていました。 OGP対応方法 htmlタグの記述 まず、htmlタグにOGP用の記述を追記します。 「xmlns:og="http://ogp.me/ns#" xm

Improve your website's usability. With jOrbital menu. Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean. Overview Web design involves the structure of the website including the information architecture (navigation schemes and naming conventions), the layout or the pages (wireframes or page

Hi-Res Plaster And Concrete Texture Pack [ad#ad-2] ダウンロードできるテクスチャ素材は25種類の高解像度のものと5種類のタイル状のものがパックになっており、トータル220MB超えです。 大きい物は5400pxあるので、ウェブでも印刷でも利用できると思います。 高解像度の25種類は、下記のものが揃っています。 テクスチャ素材の利用は個人でも商用でも無料、とのことです。 詳しくは添付の「__READ ME__ release-license.txt」を参照ください。 [ad#ad-2]

jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング

ウェブデザインにおいて、幾何学的なアイテムは重要なエレメントの一つです。 円、正方形、長方形、三角などを美しく効果的に使用したウェブサイトを紹介します。

Timeglider jQuery Plugin/Widget 年表作り等に使えるタイムライン実装用jQueryプラグイン「timeglider.js」。 マウスでドラッグ＆ドロップしたり、拡大できたりする年表のUIを提供してくれます。 例えば、どういうJavaScriptライブラリが何年に登場したのか、みたいなものを表示するのに使えます。 誰がいつ入社したのか？といった時系列のデータの表示なんかにも使えそう。 年代なんかも表示できます。 更にアイテムをクリックした場合には注釈を表示することも出来ます。 あまり使う機会はないかもしれませんが、こうしたライブラリはそれほど多く無いので覚えておいても損はなさそうです。 関連エントリ PHP・CSS・jQueryを使った横向きのタイムライン実装例 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.

こんなアイテムも好きかも？を実装するためのレコメンドエンジンのオープンソースまとめ 2011年03月30日- こんなアイテムも好きかも？を実装するためのレコメンドエンジンのオープンソースまとめ。 amazonや色々なCGMサイトが導入していますが、何かのアイテムを見ているとき、関連したアイテムを出してあげるという仕組みをまとめてみました。 協調フィルタリングともいいますが、CGM的なサイトなんかを作る際には覚えておくと利用者満足度やPV増に繋がりますね。 それでは以下にまとめます。 cicindela Perl+MySQL5で動作。WEB API 形式で呼ぶことが出来るため、PHP等の他の言語から呼び出すことも容易です。 vogoo PHPのソースからrequireして使うタイプのPHPライブラリ。MySQL利用。PHPソースから直接利用したい場合に使えます OpenSlopeOne こち

20 Mind Blowing Photoshop Photo Manipulation Tutorials | Code Fear 色々と応用できるかもしれないPhotoshopによる写真加工チュートリアルが色々。 アイデアが良いものや、これ一体どこで使うんだろうという物まで、多彩なグラフィックス作成チュートリアルのまとめになっています 空飛ぶ地面を作るテクニックは色々と応用できそう 単なる木の写真をうまいこと手のひらにのせてインパクトのある画像を作る例 零下の地にカエルをリアルに合成するテクニック。舌をリアルに氷に伸ばしているところなんかを作ってて面白い。 実写と３Dイメージを合成してクールなグラフィックスを作成する例 関連エントリ モダンなコーポレートサイト作成用Photoshopチュートリアル 光のエフェクトを与えたクールなイメージ作成Photoshopチュートリアル２５ プロレベ

解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使

これまでも自曲の無料配信に取り組んできた平沢進氏 (/.J 記事) が、インターネット上で活躍するフリージャーナリストや市民メディアのために無料音楽素材の配布を行っています (平沢進氏のブログ記事より) 。 フリー・ジャーナリスト、市民メディアのみなさん。ここにある音楽が役に立つなら、どうぞお使いください。これからも増やしていきます。 そして、その他の皆さん。たぶんあなた方もここに訪れ、ダウンロードするのでしょう。ここはそのような用途のために作られてはいませんが、私はあえてあなた方を規制しないし「クリエイティブコモンズ」さえ適用しない。ただし、あなた方がここにある音楽を楽しむために必要な「解除キー」は、あなた方の「良識」とするので。 平沢 進