facebookページにiframeを組み込もう（最新ver.）

FacebookAPIおよび管理画面は仕様がどしどし変わるため、

さまざまな設定や実装のために参考記事を探しても古い情報しか見つからないことが多いです。

今回、FacebookPageにiFrameを入れる方法を調べてみても

やはり最新情報を日本語で解説してくれるものが見つからない・・・。

下記、本日時点でのFacebook仕様に基づいたFacebookページへのiFreme組み込み方法です。

charapediaページを例に記載します。


■FacebookページにiFrameを組み込もうぞ！

1.Facebookページを作る
　作り方は多くのブログエントリーを参考にしてください。

2.iFrame表示用Facebookアプリを作る
　FacebookページにiFrameを組み込むには、そのためのFacebookアプリの作成が必要です
　（アプリの作成、といってもFacebook管理画面の操作だけで簡潔します。）

　2-1.アプリ製作のためにはFacebookデベロッパー登録が必要です。
　　　開発者ページにアクセスして登録してください。
　　　なお、登録後に最初のアプリを作成しようとすると開発者としての認証を促されます。
　　　求めにしたがって認証してください。

　2-2.開発者ページの「Create New App」ボタンをクリック

　2-3.アプリ名を入力（任意の文字列）

　2-4.セキュリティチェックのため、表示された文字列を手入力

　

2-5.Page Tabの情報を入力し、保存する。
　　　最低限下記の2つの情報を入力します。
　　　Page Tab Name:Facebookアプリの左サイドバーに表示されるタブの名前
　　　Page Tab URL:タブ内に表示されるiFrameが読み込む先のURL

　　　保存すると、今日現在ではサイト上部にWarningが出ます（将来の仕様変更を予告する警告）。
　　　ひとまず現時点では気にしないでおきます（近い時期に対応必要そうですが）




3.アプリをFacebookページと紐付けます

　3-1.今製作したアプリのプロフィールページに移動します。
　　　View App Profile Pageをクリック



　3-2.マイページへ追加をクリック



3-3.紐付けたいFacebookページを選択
　　　自分が管理者になっているFacebookページに一覧が表示されますので、
　　　その中から紐付けたいページを選択します。



　　一覧画面を閉じます。設定は完了です。


4.Facebookページを確認します。

　左サイドバーに先ほど「Page Tab Name」で設定した名前のタブができています。
　クリックすると、「Page Tab URL」で指定したページが組み込まれて表示されているはずです！



後は組み込まれたページを美しく更新していけば素敵なFacebookページが作れます。
charapediaページももうちょっと美しくする予定です（当然･･･）

画像サイズもろもろ ロゴ決まりました＾＾

charapediaのロゴが決まりました＾＾

※今までアメーバやtwitterで利用していたロゴは私が自分でつくった暫定版でした（汗）
charapediaのサイトコンセプトをベースに社内のデザイナーさんに制作していただきました。
社内ロゴアンケートでは得票数は次点だったのですが、
課題と指摘された視認性の向上のための修正を加え、
最終的に「コンセプトにもっとも寄り添うロゴ」ということで決定しました。
アンケートにご協力いただいた皆様ありがとうございました！

これからイロイロな画像を変更していくのですが、
最近はソーシャルメディアを中心に様々なメディアと連携するための画像もいろいろと必要です。
下記、簡単にぱっと思いつく範囲で必要画像を整理しました。


■サイトTOP用やヘッダー用以外で必要な画像って・・・

①favicon様画像
形式：
.icon （IE以外は画像ファイルのままで良いようですが）
サイズ：
32×32ピクセル、16×16ピクセルのpng画像を
http://favicon.htmlkit.com/favicon/　にて1つの.iconファイルにまとめる。
利用方法：
headタグ内で画像位置指定すればfavicon表示可能


②Facebookシェア用画像
形式：
.png、.jpg、.gifなど
サイズ：
仕様書には50×50ピクセル以上の正方形、と書かれていますが、50×50だと実際は画像がのびのびになります。
100×100程度がオススメです。

③Facebookページ用画像
プロフィール画像
180×180ピクセル

④Twitter用アイコン
Twitterの推奨は128×128ピクセルです。サイズは700KB以下です。
サービス上では以下の4種類の変換が勝手に行われます。
1. normal.jpg / 48×48ピクセル
2. normal.jpg / 48×48ピクセル（cssで31×31px表示）
3. bigger.jpg / 73×73ピクセル （72ピクセルならキリがいいのに、なぜか73ピクセル）
4. mini.gif / 24×24ピクセル

ふぅ。

決定したロゴはこちら

Facebook投稿の制限文字数(max length)を調べてみた

Facebookに書き込みを行った際、文字長の問題にぶつかったこと、ありませんか？

エラーメッセージが出て書き込みできなかったり、逆に書き込めるのですが文章の途中で勝手にきられていたりすることがあります。

Facebookと連携したアプリケーション経由で書き込みを行った場合は、現状は後者、勝手に切られるというパターンが多くなっています。できれば連携しているアプリ側でユーザーに適切な制限やインストラクションを事前に与えたいものです。

そこで、Facebookの主要な書き込み機能の制限文字数を調べて見ました。
Developer向け資料にも情報は点在していますが、軽く調べたてもまとまった情報は見つかりませんでしたので、実際に投稿を行って調査しました。

Facebook書き込み文字制限（max length)

自分のステータス投稿　max500文字※ネット上には420文字節が溢れていますが実際は500文字でした。

ノートタイトル　　　　max125文字
ノート本文　　　　　　max不明（とりあえず1万文字はいけました）

イベントタイトル　　　max75文字
イベントウォール　　　max1,000文字

メッセージ　　　　　　max3,334文字

友達のウォール　　　　max333文字

ちなみに日本語でも英語でも一文字は一文字でした。

[緩ネタ]若葉さん成長記録2

charapedia同様、若葉さんは日々成長しています。



先っちょから小さな新芽が出ました。お盆頃には葉っぱらしくなってくるかな・・・。楽しみです。

若葉さんのフモトには本が並んでいます。
ネタが無いので紹介。



人の家に行くと本棚をチェックすると面白いですよね。
人物が見えてくる気がします。

「この国を出よ」の次に「ビジネス英語」の本が・・・素直な性格です。
王様ゲームはDeNAさんに頂きました（絶賛貸し出し中）
ドラッガー信望
伝説の名作「大神」が・・・
谷川俊太郎さんが好きです
アプリを自分で書いて一攫千金！
麻里子様推し

ではまた。

スマートフォンアプリをアジャイル風に開発する方法

昨日参加したLeanStartupJapanさんのイベントでも、アプリ開発を外部に委託する場合のアジャイル開発の難しさについて質問されている方がいました。

確かにスマートフォンアプリの開発依頼をしようとすると、どうしてもその部分だけは「切り出されたウォーターフォール」になりがちで、かつ、外部開発である分コミュニケーションも手間がかかりますので結果的にプロジェクト全体の速度が大幅に低下してしまいます。また、コストの面でも追加開発の都度それなりの金額が発生したりしてしまいます。


charapediaプロジェクトでは、動きに強いアプリを作るために、ネイティブ＋HTML5&Javascriptのハイブリッドでアプリを開発することにしました。

「iPhoneアプリ　HTML」をキーワードにググるといくつかの本やブログが見つかりますので興味がある方は参考にしてみてください。

リリース後に動的変化が予想される機能はHTML5&Javascriptで、
仕様が確定しており変化が予想されない機能、
および、ネイティブならではのぬるぬるした動きがマストである機能はネイティブで。


まだまだWebViewの機能には制限も多いので見た感じのぎこちなさなどは残りますが、アプリ自体のアップデートをせずに内容に更新をかけられる点は非常に大きなメリットです。更に、iPhone/Androidで共通のソースを利用できるのでコスト面は下げられ、開発期間は短縮できます。コストについては同じ機能をiPhone/Android版ぞれぞれネイティブで作るのに比べて約半分ということも。

特に目新しい手法ではなく、ほぼHTMLで作られたアプリも数多くマーケットに出ていますが、意外と知らない方も多いのか？と思い、ここに書いてみました。