フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
[blog] Twitter公式サービス『ツイートボタン』を設定する方法
8月13日、Twitterが公式のツイートボタンをリリースしました。 TweetMeme や Topsy といったサービスと同じく、ウェブサイトから簡単にTwitterへリンク共有するためのボタンです。URLをコピペして、URL短縮してといった作業がボタン一つで済みます。人気がある Topsy へのアクセスが非常に重くなるときがあったので期待のサービスです。 下は1分半の紹介ビデオ（英語） 実際にツイートボタンを設定する方法 ツイートボタンの作成は Twitter / ツイートボタン から行います。 1. ボタン選択、およびツイート内テキスト、URL、言語の設定 下画像のように、ツイートボタンの種類を選べます。またツイート内テキストタブではツイートの最初に追加する文、URLタブでは開いているURLでなく指定URL、言語設定では日本語だと「ツイートする」英語だと「Tweet」といったふうに選
![[blog] Twitter公式サービス『ツイートボタン』を設定する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/869e462a1bd115218e08c6ad60ad12c3dd12267d/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjctMLi-cYngKBiOUBuzX9yUc8ihnikIkx21l7Nd6xK0GrvD1ZHLRLAune063Gb_RiafsW5KR017sEwCofaTuqv-5mIp02TDSZ32MbjFLS1MCO-75NxGst9ns0i0TBEZm5WOl1ePUmU8tE2%2Fw1200-h630-p-k-no-nu%2FSShot%25EF%25BC%25882010-08-13%2B7.40.21%25EF%25BC%2589.png)
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
ダウンロードしてきたファイルを開くときに表示されるアラートを回避する Part 2 - soundscapeout (仮)
Leopard から、ダウンロードしてきたファイルを開く時に、 "アプリケーション名"は アプリケーション で、インターネットからダウンロードされました。開いてもよろしいですか？ というセキュリティアラートが表示される様になっているのですが、その回避方法を、 ダウンロードしてきたファイルを開くときに表示されるアラートを回避する で紹介しました。 今回紹介するのは、plist ハックです。 ターミナルから、 defaults write com.apple.LaunchServices LSQuarantine -bool false を実行することで、アラート表示せずに、ファイルを開くことが出来る様になります。 あくまでも、at your own risk で！ 追記 rentzsch.tumblr.com: Disable and Recover from Mac OS X's Quar
[CSS]CSS3の効果的な使い方と陥りやすいワナ
CSS3で何ができるのかという「CSS3で何ができるの？ という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？ ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
経験者は語る、Googleアカウントのハッキング被害から学んだ10のこと | ライフハッカー・ジャパン
デジタル系ブログメディア「Digital Inspiration」では、Google/Gmailアカウントをハッキングされてしまった筆者が、実体験を元に学んだセキュリティ術を紹介しています。 正確にはどうやってパスワードが破られたのか不明ながら、ハッキングに気づいた筆者はすぐにTwitter上で他のユーザのヘルプを求めたそうです。彼らの情報に従い、そのアカウントの所有者であることを認証してもらうためGoogle復旧要請フォームに必要項目を入力し、オンライン提出した後、Googleと何度かやりとりした末、3時間かけてようやくアカウントの復旧にこぎつけたのだとか。 この苦い経験から学んだポイントとして、以下の10点を挙げています。 その1: Google/Gmailアカウントにログインし、電話と連携させておく。こうすれば、第三者が自分のGoogleパスワードを回復させようとしている都度SMSテ
FeedBurnerをちゃんと理解して使いこなす為の基礎知識 - atl*weblog
今度はfeedを購読している人の人数やfeedリーダーの種類の統計を取ったり出来るFeedBurnerについて、あれこれ調べてちゃんと把握していこうかな。 FeedBurnerに出来る事 FeedBurner FeedBurnerに出来る事は多岐に渡るが、多すぎて何が出来るか分かりにくい。俺も最初はfeed用のアクセス解析のためのものだけだと思ってた。 そこでざっとFeedBurnerにより出来るようになる事をリストアップしてみる。 feedのアクセス解析、集計する フィードの更新情報を自動的にRSSリーダー等に届ける（pingショット） メールでフィード更新情報を通知（フィードマガジン） htmlをコピペするだけでサイトの一部にfeedを表示（バズブースト） ブログパーツみたいな、feedの最新5件を表示出来るツールの提供（フィードティッカー） eメール署名にフィードリンクを挿入出来る（
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
プログラミングができなくても作れるTwitter botの作り方
Twitterのおかげで、それまではごく一部の人しか知らなかったbotというものが、だいぶん身近で親しみやすいものになったと思うんだけど、 こうなったらもっと気軽に誰でもbotを作れるようになったら楽しいんじゃないか。プログラミングができない人でも一人一botくらい持つ勢いで。 ということでこの記事を書いてみました。
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
メール向けの罫線＆囲み枠素材30選! メルマガの装飾に今すぐ使える | メールマーケティング基礎講座
テキストメール制作時にポイントになるのが、罫線や囲み枠を用いた装飾部分である。読者の注目を引くのに有効なだけではなく、トピックの見出しに番号をふって目次を用意すれば、メールの可読性が向上する。これまでの記事の中で触れた改行やフォントの問題をクリアすれば、表現力豊かな装飾を施すことができるだろう。 そこで今回は、メルマガなどですぐに活用できる罫線や囲み枠を紹介していく。まずは、テキストメールの注意点をおさらいしておこう。 機種依存文字を除く 丸囲い文字やローマ数字、単位記号、半角カタカナなどは特定のパソコンだけでしか読むことができず、文字化けの原因になるため使用を避ける。フォントを意識したレイアウトを 等幅フォントがセオリー。メルマガ内に「等幅フォントでご覧下さい」と記載する方法もあるが、プロポーショナルフォントでもレイアウトが崩れないようにすることが望ましい。主要メールソフト/Webメール
フリーでAS3ベースのページフリップエンジン：MEGAZINE3
最近、AS3で組まれたあるサイトにページフリップ(本をめくる動き)を組み込む必要性が生じたのですが、世の中に溢れているサンプルはその殆どがAS2以前にタイムラインベースで作られたもの。これは自分でフリーのものをコンバートするしかないかな…、と諦めかけていたところで、見つけました。オープンソースでAS3クラスベースのページフリップエンジン。 MegaZine 3 [デモ] デモを見るとページフリップエンジンに必要な要素はすべてそろっていることが分かります。しかも、殆どのカスタマイズはXMLの設定ファイルを編集すればOKなのでコンパイルの必要すらありません。 もちろん、オープンソースでAPIも公開されているので独自のコントローラを作ることも、それほど難しくありませんでした（ソースはSVNから直接ダウンロードする仕組み）。アップデートも頻繁にされているようで、この手のページフリップエンジンの中で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
