Home > Tags > HTML

HTML

Facebook Platform – HelloWorld!を試してみる。

Facebook-developers

1. Facebook Developers Doucumentationを読む。

とりあえず、何が出来るのか、ということで
Facebook DevelopersのDocumentationを読むと、下記のような構成で

API References

■Core API
Graph API
Social plugins
■Facebook SDKs
JavaScript SDK
PHP SDK
Python SDK
iOS SDK for iPhone and iPad
Android SDK
■Advanced APIs
Graph Realtime API
Facebook Query Language (FQL)
Facebook Markup Language (FBML)
Old REST API
Old JavaScript Client Library
Internationalization
Integrating with Facebook Chat
Facebook Ads API

自サイトへの、導入資料である、Facebook for Websitesを読むと、Socail Plugins http://developers.facebook.com/pluginsがはじめに紹介されており、

Social plugins let you see what your friends have liked, commented on or shared on sites across the web. All social plugins are extensions of Facebook and are specifically designed so none of your data is shared with the sites on which they appear.

一番、基本なのは、このSocial Pluginsで、
Likeボタンを追加したり、Activity一覧を、自分のサイトに、
HTMLで組み込む事ができるAPIとのことです。

以前、Likeボタン設置したり、
大体、これで、どんなものなのか掴むことができたので、

今度は、Graph APIをJavaScript経由で利用出来るという、
Javascript SDKを試して行きたいと思います。

その前の基礎として、HTMLで、”Hello, World!” を試します。

2. Facebook API – Hello,World!を試してみる

JavaScript SDK
http://developers.facebook.com/docs/reference/javascript/
こちらを読みながら、進めてみました。

2-1, Facebook Developers – アプリケーションIDを取得

The JavaScript SDK enables you to access all of the features of the Graph API via JavaScript, and it provides a rich set of client-side functionality for authentication and sharing. The JavaScript SDK is also necessary to use the XFBML versions of the Social Plugins. Many functions in the JavaScript SDK require an application ID. You can get an app ID by registering your application.

大体の機能を使うには、IDの登録が必要だよ、とあるので、
まずは、Facebook DevelopersのアプリケーションIDを取得します。

日本語のアプリケーションID取得方法説明は、こちらの方々のサイトを参考に、「FACEBOOK開発者アプリケーションの追加とアプリケーションの登録」、facebookアプリの作り方・PHP編

2-2. Canvas URLで、”Hello, World!”を表示するHTMLを組み込む。

■Facebook Developers – MyApplication
http://www.facebook.com/developers/

自分は、MyApplicationに辿り着けなかったので、
直接、上記URLを、ブックマークしています。

Facebook - MyApplication
MyAppの、Facebook Integrationを設定します。

Facebook-Setting

  • CanvasPage URL: 組み込むHTMLのURLを指定します。
  • Canvas Type：”iframe”にすると、まるっと上記URLを組み込みます。
  • iFrameサイズ：”Auto-resize”を指定すると、自動でiframeのサイズ調整します。

上記MyAppで指定した、CanvasPage URLに、なんでもいいのですが、

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Splitchin  - Facebook SDK Hello, World!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Splitchinは、Macでの、Webデザイン、iPhone、Tシャツ、などのクリエイティブ活動です。">
<meta name="keywords" content="Splitchin,Webデザイン,Tシャツ,iPhone,Mac">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="wrap">
<!-- contents -->
<div id="contents">
	<p>Facebook SDK - Hello, World!!</p>
</div>
<!-- /contents -->
</body>
</html>

こんな、「Hello,World！」を表示するHTMLをサンプルとして、アップします。

その後、

http://apps.facebook.com/****ご自分のAppベースURL***/

にアクセスすると、

facebook-helloworld

こんな感じで、「Hello,World!」が表示されました！

2-3. Facebook – JavaScript SDKをダウンロードする – (実装は次回)

■facebook / connect-js
https://github.com/facebook/connect-js

から、SDKをダウンロードします。

次回は、こちらを使用して、認証系など、実装テストしていきます。

こちらの、JS Test Consoleを使うと、
http://developers.facebook.com/tools/console/

書いた、JavaScript SDKのコードをデバッグできるので便利です。

FlashのHTMLの埋込み。　SWFObject v2.0

FlashのSWFファイルを<object>タグ, <embed>タグを使用せずに、
JSライブラリで、手軽にHTMLに埋込める、SWFObjectを使ってみました。

ダウンロード＆資料

サンプルページ

1. swfobject.jsを読み込む

<script type="text/javascript" src="swfobject.js"></script>

2. swfobject.jsを読み込む

<script type="text/javascript">
var flashvars = {
// ここに、swfに渡す引数
}
var params = {
wmode: "transparent"　//params指定
};
var attributes = {};
// swf(FLASH素材)ファイル名、
// 置き換えるオブジェクト名(swfを組み込むdivタグのid名)、
// 横の長さ、
// 縦の長さ,
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
</script>

3. Flash組み込み部分　＆　Flash代替コンテンツ

<div id="mp3moji">
<!--  Flash代替コンテンツ -->
<a href="test.mp3">voice01</a>
<!-- / Flash代替コンテンツ -->
</div>

Mac OS X 10.0 TextEdit を HTML エディタとして設定する方法

よく、検証機のMacなどでエディタが入っていなくて、
テキストエディタでHTMLを開くと、レンダリングされてしまいます。

ちょっとしたHTMLを修正したいのになぁ、というとき、

標準の、TextEditをHTMLエディタにする方法が、
Appleのサポートにありました。

textedit

  • Mac OS X 10.0: TextEdit を HTML エディタとして設定する方法
    http://support.apple.com/kb/TA20406?viewlocale=ja_JP
  • 解決方法

    • 1. TextEdit をオープンします。
    2. TextEdit のアプリケーションメニューから「環境設定…」を選択します。
    3.“新規書類のフォーマット”の設定欄で“標準テキスト”ラジオボタンをクリックして選択します。
    4.“保存オプション”の設定欄で“標準テキストファイルに拡張子を追加する”のチェックボックスをクリックし、チェックを外します。
    5.“リッチテキスト処理”の設定欄で“HTML ファイル中のリッチテキストコマンドを無視”をクリックし、選択します。

これで、HTMLを編集できます！

Home > Tags > HTML

PR
つぶやき。
Tag Cloud
カテゴリー
RSS あらびき林檎
スポンサー
書籍

Return to page top