ページ

2012/11/12

Facebookでシェアした写真の下に表示される文字の文字数について


Facebookで文章つきの写真をシェアするとタイムラインには写真と文字がセットで表示されるけど、文字が長すぎる場合省略されてしまうので、いったい何文字で書けば良いのかという話。(2012.11.12時点)


【PCで見た場合】
■基本は160文字または改行4回以内にする。

・161文字目から省略されました。
-----
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ7あいうえおかきくけ8あいうえおかきくけ9あいうえおかきくけ0あいうえおかきくけ1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ...
-----

・改行を5回使うと6行目以降が省略されました。
-----
1あいうえおかきくけ
2あいうえおかきくけ
3あいうえおかきくけ
4あいうえおかきくけ
5あいうえおかきくけ
...
-----


■でも最後がURLだと何故か250文字くらいいける。

・250文字+URLでは160文字で省略されずに全文表示されました。
-----
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ7あいうえおかきくけ8あいうえおかきくけ9あいうえおかきくけ0あいうえおかきくけ
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ7あいうえおかきくけ8あいうえおかきくけ9あいうえおかきくけ0あいうえおかきくけ
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ
http://google.com
-----

・300文字+URLでは160文字で省略されました。
-----
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ7あいうえおかきくけ8あいうえおかきくけ9あいうえおかきくけ0あいうえおかきくけ1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ...
-----

※250~300の間に限界がある模様。詳しくは調べていません。


【スマホで見た場合(iPhone5 iOS6 Fb公式アプリ)】
■120文字以内にする。

・121文字目から省略されました。
-----
1あいうえおかきくけ2あいうえおかきくけ3あいうえおかきくけ4あいうえおかきくけ5あいうえおかきくけ6あいうえおかきくけ7あいうえおかきくけ8あいうえおかきくけ9あいうえおかきくけ0あいうえおかきくけ1あいうえおかきくけ2あいうえおかきくけ...
-----


【まとめ】
・120文字目までに重要な内容を書く(スマホでもPCでも省略されない)
・URLが無いなら160文字目まで、URLがあるなら250文字目までに、次に重要な内容を書く(スマホで省略されるがPCで省略されない)
・後は省略されること前提で好きなだけ書く。

【補足】
・Facebookの仕様変更で変わる可能性があります。
・スマホの表示についてはAndroidで違うかもしれません。

2011/12/09

picasaの画像のサイズが突然変わってしまった

picasaにアップした画像をブログ内で使用していたのですが、今見たところ急にぼやけた画像になっていました。
確認すると、横幅960pxだった画像が512pxに縮小されているではないですか。

ということで原因を調べました。

picasaには、アップした画像のURLの途中に/s640/といった数値を入れると、その横幅にリサイズした画像を表示してくれるという機能があります。そして、今まではこの指定を入れないとアップロードした画像の元のサイズで表示されていたのに、今は指定を入れないと512pxに縮小されて表示されてしまっていました。(縮小された画像を原寸で表示しようとするとボケる)

ということで、元のサイズである960pxで表示させるために、URLの途中に/s960/を入れました。仕様が変わったんでしょうかね...?

2011/12/01

AdWords(AdSence)の広告にGoogle+の+1ボタンがついている

先日からバナー広告に+1ボタンがついているものがあり、このために左下にスペースを空けるといったようにデザインを考慮しないといけないのかと思ったら、AdWordsの設定で+1ボタンをつけるかつけないか決められました。

デフォルトではつくようになっているようなので、不必要なら設定を変更しましょう。
ただ、「つける」となっていても100%つくわけではないようなんですよね。同じ広告でもついているときとついていないときがある。

2011/11/29

Androidのダブルタップの自動調整を元に戻すとレイアウトが崩れる

Androidのブラウザで画面をダブルタップをするとその部分がズームされ、ズーム時の画面の横幅にピッタリ合うように、テキストの幅を自動で調整する機能があります。また、拡大された状態でダブルタップをすると、元の画面に戻り要素の幅も元に戻ります。

ところがこの機能はfloat、特にfloat:rightと組み合わせると下記のような不具合を起こします。



■起こる問題の例

(1)最初のテキストの幅
横幅(16文字分)を指定したこんなテキストがあるとします。
この要素はfloat:rightで配置されています。
----------------------------------------
テキストテキストテキストテキスト
----------------------------------------


(2)ダブルタップでズーム
画面がズームされその画面の横幅(8文字分)に調整されます。
float:rightのためと右端を基点に縮小されます。
つまり、以下のように左に隙間ができて縮まった状態になります。
----------------------------------------
        テキストテキスト
        テキストテキスト
----------------------------------------


(3)ダブルタップで元に戻す
元の幅(16文字分)に戻る際、縮小されたときと同じく右端を基点にしてくれると思いきや、縮小された時点での左端を基点に元の幅にもどります。
すると、以下のようになります。(1)と同じ画面に戻りたかったのに、テキストの開始位置は右にずれ、レイアウトに崩れが生じます。

----------------------------------------
        テキストテキストテキストテキスト
----------------------------------------



■解決方法

テキストを含む要素の親要素にもwidthを指定することで、
(3)のダブルタップで元に戻った際の基準を左端にすることができ、
上記の不具合は起こらなくなりました。

※例えば上がp要素に対してwidthを指定して上の現象が起きたら、そのpを包んでいるdivなりにもwidthを指定すれば良いです。



「Androidのブラウザでダブルタップで拡大した後元に戻すと表示が崩れる」という現象が起きたときは思い出してみて下さい。

※最後に、この現象はキャッシュの無い状態のみで起こります。
この不具合がおきておかしいと思ってリロードすると不具合は起こらなくなります。
キャッシュを消して再度読み込めば現象は再現されます。

2011/08/20

Xcodeインストール中にiTunesを終了しろというエラーが出る

iTunesは終了しているのになぜか件名の通り「iTunesを終了しろ」と言われます。原因は「実はiTunes helperが起動している」こと。

1)右上の虫眼鏡アイコンに「アクティビティモニタ」と入力して起動
2)プロセスの中にあるiTunes helperを終了させる

これで解決しました。

2011/08/08

本当の順位を知るために自分の情報を含めずGoogle検索したいとき

Googleアカウントにログインした状態で検索をすると、+1や過去の履歴等から見たことのあるサイトが上にきたりして、まっさらな状態での検索結果と異なります。(例えば自社サイトの検索結果が1位になったと喜んだら、実はそういう理由だったということも)

そんなときいちいちログアウトするのは面倒なので、Chromeのシークレットモードを使っています。以下の方法でシークレットモードで開くショートカットを作っておくとさらに便利です。

http://www.openspc2.org/reibun/GoogleChrome/2.0/setting/secret/0001/index.html

※safariのプライベートモードでは素の状態にならないという話を聞いたのでご注意を

Google+ボタン(プラスワンボタン)のカウントの増え方

twitterに続いてGoogle+1ボタンの増え方をテストしました。
【A】スラッシュ終わり
【B】.com終わり
【C】index.html終わり

【A】http://ryotryo.blogspot.com/



【B】http://ryotryo.blogspot.com



【C】http://ryotryo.blogspot.com/index.html





■結果
Aを押す:AとBが+1された。どちらのボタンも青くなった。
Bを押す:AとBが+1された。どちらのボタンも青くなった。
Cを押す:AとBとCが+1された。Cはボタンが青くなったが、AとBのボタンは白いままでもう一度押せる。(そこでAを押すとAとBのカウントがさらに+1され、ボタンは青くなる。)