サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
note.non-standardworld.co.jp
OGP(Open Graph Protocol)は、FacebookをはじめGoogle+、mixiなどのソーシャルメディアに対して、外部サイトの情報を投稿するための規格です。 これがきちんと設定されていることで、ソーシャルメディア上でサイトのURLがシェアされた時に、そのサイトやページの情報が、サムネール画像付きで適切に表示されます。 ソーシャルメディアからのサイト流入が増えている昨今、OGPをきちんと設定しておくことは重要なポイントです。 自分のサイトのOGPがきちんと設定されているか、確認する方法をご紹介します。 Facebook デバッガーの使用 Facebookで”いいね!”を押された際に表示されるサムネール画像をはじめ、OGPが正しく設定されているかを確認できる、Facebook公式のツールです。 Facebook デバッガー の使い方 1. Facebook デバッガーにアク
Facebookで「いいね!」を押した際にウォールに表示される内容を確認する方法として、前回はFacebookデバッガーを紹介しました。 Facebookデバッガーではエラーの有無も含め、OGPの設定内容を確認できますが、実際に「いいね!」またはシェアした際の動作を、目視で確認したい場合もあると思います。 そんなとき、自分のアカウントを使用して「いいね!」のテストをしなくても、テスト用に架空のFacebookアカウント(テストユーザー)を作成する方法があるのでご紹介します。 Facebookのテストアカウント(テストユーザー)作成方法 1. Facebook DEVELOPERSのApps(アプリ)を開きます。 2. “+新しいアプリを作成” をクリックします。 3. “App Name”(アプリ名) と “App Namespace” (アプリページのURL)に任意の名前を入力します。
5-10-1-401 Shinjuku Shinjuku-ku, Tokyo 160-0022 Japan ページ内の要素を自由にスライドさせることのできるjQueryプラグイン「Sly」、 先日、弊社の案件で使用したところ非常に良く出来ていたのですが、日本語での実装方法があまりなかったので、備忘録を兼ねてメモします。 Slyでどんなことができるの? ページ内の要素を色々な形でスライド、スクロールさせることができます。 デモは以下です。 横スクロール、スライド ページ内縦スクロール ページ内要素を全画面に並べる 無限スクロール パララックス効果 昨今トレンドになっている表現がひと通り揃っている感じですね。 実装方法 ここでは横スクロールを実装する場合の例を解説します。 まず、導入には、jQuery本体とjQuery Easing Pluginが必要です。ない場合は事前にダウンロードしてお
Macでスクリーンショットを撮るとき、皆さんはどうしていますか? Cmd+Shift+3(または4)がMac標準の方法ですが、これだとキャプチャした画像がデスクトップに並んでいくのでなんだか煩わしかったり。 そんな時、おすすめの無料ソフトが「SimpleCap」です。 SimpleCap のおすすめポイント ビューア機能で、スクリーンショットのプレビュー・管理ができる スクリーンショット撮影後、ビューア機能が自動で立ち上がって画像をプレビューできます。このビューア機能では、過去のスクリーンショットを撮影日時順に閲覧もできます。いらない画像の削除や、画像を任意のアプリケーションで開く操作も可能です。 画像の保存場所をまとめられる Mac標準のスクリーンショットでは画像がデスクトップ上に保存されますが、SimpleCapではデスクトップ上のフォルダ “SimpleCap Images” 内にま
突然ですが、みなさまはWEBサイトのサーバーをどうしていますか? 通常、レンタルサーバーでWEBサイトをホスティングしていると思いますが、ファイル数やアクセス数が増えると遅くなって、よりコストのかかるプランに移行したり、、、といった経験がある方も多いのではないのでしょうか。 一方で、最近Google DriveやDropboxやGitHubなど、無料で静的なファイルを置いておけるサービスも増えてきます。 実はこういったサービスの強大なインフラの上にjsやCSSや画像をはじめとした静的ファイルを置いていわゆるCDN的な使い方ができるのではないか?という疑問がわいてきたので、簡単にチェックしてみました。 実験方法 Google DriveやDropboxやGitHubに画像ファイル(5.8MB)をホスティングして、そのダウンロード時間をGoogle Chrome計測しました。また、参考までに他
美大生でも使えるぐらいシンプルと言われるビジュアル系プログラミング言語「Processing」、それをJavaScriptでも使えるようにしたProcessing.jsを使って以下のようなジェネレーティブアートの習作を作ってみました。(ChromeをはじめとしたHTML5を見られるブラウザで見て下さい。) ソースコードは以下のような感じで、ざっくりアルゴリズムを言うと、まず最初に曲線を引いて次の線の位置とRGBの数値を微妙に変化させるということをさせています。 <script type='text/javascript' src='http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js'></script> <script type="text/processing" dat
このページを最初にブックマークしてみませんか?
『note.non-standardworld.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く