Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
Twitterでリプライを送ると日記にしちゃうサービス、『リプ日記』を公開しました - あのねノート。
2015-01-14 Twitterでリプライを送ると日記にしちゃうサービス、『リプ日記』を公開しました ネタ 作った リプ日記 新しいサービスを作った。 リプ日記 Twitterでリプライを送ると日記にしちゃうサービス。 ログインとか何もいらないサービスにしました。 つまり「@ripunikki 今日はいい日だった」とツイートすれば日記が始まる。そんなサービス。 今のところ画像やYouTube入りのリプにも対応しています。 お客様の声 沢山の喜びの声を頂いております。 「リプしただけで本当に日記が作成された!!」 「これは便利」 「お題とかもつぶやいてくれるから日記も書きやすいね!!」 「そもそもTwitter自体がマイクロブログサービスなはずじゃなかったのか…」 雑記 「日記の魔力―この習慣が人生を劇的に変える」とかいう日記の重要性を主張する本もあったりしたりして、まあ日記書こうかなあ
Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示する方法
Twitter Cards のプロパティ Twitter Cards のプロパティについて少し解説したいと思います。もっともよく使われるであろう「Summary Card」も例に挙げて解説してみます。 プロパティ サイトを複数人で運営している場合は、twitter:creatorを使うといいでしょう。 Getting Started with Cards | Twitter Developers Summary Cardのプロパティ Summary Cardにはどういったプロパティがあるか確認してみましょう。 下記のリンク、Twitter DevelopersのTwitter CardsからSummary Cardを開いて、下へスクロールするとプロパティの表があります。Requiredが「Yes」の項目は必須のプロパティです。 Summary Card | Twitter Develope
Twitter Cardsへの登録方法
Simplicityでは、プラグインを使用せずとも、デフォルトで以下のようなTwitter Cards情報のタグが挿入されます。 ただ、プラグインで設定を行うのと同様に、TwitterにTwitter Cards登録はしなければいけません。 今回は、Twitter Cardsへの登録方法を説明します。 Twitter Cards登録 Simplicityでは、デフォルトでTwitter Cardsタグが挿入されますが、そのままでは、Twitterに登録されていないのでツイート行ってもカード情報は表示されません。 Twitterカード情報が表示されるようにするには、Twitterへの登録が必要です。 Twitterに登録するには、まず、Card Validatorに行き、自身のTwitterアカウントでログインします。 古い登録方法 ※新しい方法は下の方にあります。 すると、以下のようなカー
スマホアプリは、どの世代の機種までサポートするべきか - OPTPiX Labs Blog
ウェブテクノロジ代表の小高です。 CEDEC2014のセッションで発表したTipsのなかから、今回は一つのトピックをご紹介しようと思います(少し情報を追加しています)。 スマートデバイス(スマートフォンとタブレット)のアプリを開発する際、動作対象の機種・OSバージョンの決定に悩むことはありませんか？ なるべく新しい機種・OSのみ対応にすれば、 新しいOS・機種のみでサポートしている新機能が使える 新しい機種ほどCPU、GPU、メモリ容量がリッチになるので、パフォーマンスを要求する処理が可能 動作検証工数の低減が可能 などのメリットがあります。 とはいえ、まだ現役で数多く使われている機種・OSバージョンを対象外にしてしまうと、ユーザーを逃してしまうことにもなります。 Android、iOSとも、公式デベロッパーサイトでは以下の情報を公開していますが、もっと詳しい情報が欲しい場合はどうすれば良
「Web」とはなにか？じっくり考えてみた（2015年）
「Web」について今の自分が考えてることを記録として書いてます。去年に続き四回目です。タイトルに2015年が入ってるのは時間と共にWebのあり方や自分の考えも変わっていくからです。 毎年恒例の記事も四年目になりました。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 「Webデザイン」とはなにか？ザックリ考えてみた（2013年） 「Web」とはなにか？じっくり考えてみた（2014年） この記事は「Web」というテーマで今の自分が思ってることをつらつらと書いてます。取り上げるトピックもその時の自分の状況により変わるので一貫性はないです。ちなみに「Web」ではなく「インターネット」に該当する箇所もありますがここでは同じものとして捉えてください。 また去年一年は空き時間をサービスの開発に注いでたため、情報はそれなりに追ってたものの自分の中で吸収しきれてない状態です。したがってアウ
わかると楽しいTwitterアナリティクス、どのようなことがわかるのか？
2014年8月27日にTwitterは、Twitterアナリティクス（ダッシュボードサービス）を一般ユーザー向けにも公開しました。 実際に使ってみると、自分のツイッターアカウントに関するいろいろなことがわかりとても楽しいです。 ただ、なにぶん新しいサービスです。聞き慣れない言葉や、見方のわからないグラフなどもありました。ということで、わからないところを自分なりに調べてみました。 photo by Coletivo Mambembe Twitterアナリティクスとは Twitterアナリティクスを利用すると、以下のようなことを知ることができます。 自分の各ツイートがどれくらい表示されたか 各ツイートに、どのくらい反応があったか 各ツイートに、どのくらいクリック、リツイート、お気に入り、返信されたか フォロワーの伸び率 フォロワーが興味のある分野 フォロワーの住んでいる国・都市など フォロワー
Ads Help Center
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
指定したサイトのCSSを徹底的に解析してくれるサイト「CSS Stats」 | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
