最近、色々な端末に対して「Flashじゃない、動きのついたの」という依頼をいただくことがふえました。

でも、表現力でもブラウザ対応にしてもFlashには劣ります。
Flash使える場合は、Flash使った方がよいと思いますよ。

ということで、いまさらながら…になりますが、canvasとSVGを使ってちょっとだけ動きを試してみたいと思います。
　
こんなのをつくります→「canvas」「SVG」
　
あ、仕事ではまだ使っていません。
　
■canvas？SVG？

HTML5のコンテンツ・モデルでは、「canvas」「SVG」ともに「embedded contents」に含まれます。
HTMLに他のリソースを組み込んだりして表現するコンテンツ、ということですね。
続きを読む

Facebook は仕様変更が頻繁に行われます。
現時点(2012年5月10日現在)でのWordpressページを用いたFacebook ページの更新方法をまとめてみました。

 

１． WordPressで固定ページ（例：facebook03.php）を作成
２． Facebook ページ（例：テスト01）を作成
３． WordPress の固定ページ（例：facebook03.php）をFacebook ページ（例：テスト01）で表示する

 

続きを読む

OGPのしくみ

• 「いいね」したときに自分と友人のニュースフィードにも上がる。
• OGPの設定内容はニュースフィードに表示する内容を指定することができる。

ＯＧＰとは

Facebook以外のページをFacebookページのように見せる仕組みである。
ＯＧＰの参照方法は、ＯＧＰを設定したＵＲＬの先にＯＧＰがあれば、そのＯＧＰのURLを参照し

どんどんたどって最終的なＯＧＰを取得している。

「いいね」ボタンの数とFQLのいいねの数

• 『「いいね」ボタンに設定したＵＲＬのページに設定されたＯＧＰのＵＲＬ』　をカウントしている。
• ＦＱＬから取得する「いいね」の数は、『条件設定したＵＲＬ』のカウントを取得している。

『ＦＱＬ取得の「いいね」』と『「いいね」ボタンの数』が異なる現象に遭遇しました。

A.html　内に表示している下記はどちらも同じURL A.html を条件に指定しています。
OGPの記述のURLは B.html を設定しています。

上がFQLで取得した数。
下がボタンの数。
「いいね」対象のページを　A.html　とした場合
A.html　のＯＧＰのURLを、B.html　という別のＵＲＬで設定すると

ＦＱＬ取得では、条件設定するＵＲＬが　A.html　の場合、A.html　のカウントになる。

「いいね」ボタンは　B.html　のＯＧＰを取得し、カウントが　B.html　のカウントになる。

このＯＧＰの取得の違いに気がつくまでハマってしまいました。

また、最近ではOGPの設定で

fb:app_id と　fb:addmin で警告が出るため

対象となるドメインのアプリＩＤが必要なようです。

ここから作成する。

https://developers.facebook.com/apps/?action=create

アプリの詳細で、ウェブサイトにドメインを設定する。

取得したアプリＩＤをfb:app_id に設定するとＯＫです。

ドメイン毎に一つ作っておくだけでよいと思います。

<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="いいね対象のURL" />
<meta property="og:image" content="いいねしたいときに表示したい画像" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="サイトの説明文" />
<meta property="fb:app_id" content="アプリID(15桁）" />

マウスオーバー時に画像が半透明になるように
CSSを記述したところ画像が透過（ドット欠け？）してしまう
という現象がおきたので覚書です。

続きを読む

スマートフォン用ページの制作工程として
・まず「PC上でコーディング」してから
・表示を「実機スマートフォン」で確認する
という流れがあります。

制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。

作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。

今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。

続きを読む