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

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

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

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

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

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

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

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

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

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

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



■起こる問題の例

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


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


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

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



■解決方法

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

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



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

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

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

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

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

これで解決しました。

本当の順位を知るために自分の情報を含めず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され、ボタンは青くなる。)

Android端末のページ内リンクの不具合(バグ?)

name・idと#pagetopを使ったごくごく当たり前のページ内リンクが、Androidの特定の端末で以下のようなおかしな動作をすることがある。
(1)#pagetopのリンクを押すと一瞬ページ最上部が表示されるものの元の位置に戻ってしまう。
(2)一度#pagetopで戻ったあと、再びページ内をスクロールし、もう一度#pagetopを押しても動作しない。

OSのバージョンも関係なく、新しい機種だからといって発生しないわけでもない。(1)についてはJavaScriptのscrollTop等を使っても同じ現象が起きたため対処不可。修正方法を知っている方がいたら教えて下さい。

Android端末で画面をダブルタップしたとき幅を自動調整する機能の名称

「リフロー」と言うそうです。幅を指定したdivもリフローされたりするので、時にレイアウトを崩すことがありやや厄介な挙動。
「背景に画像を指定する + display:block;」とするとその要素はリフローされなくなるらしい。
(背景が指定無しだったり色指定のみだとblockでもリフローされる)

スマートフォンで繰り返しbasic認証を聞かれるとき

スマートフォンでのサイト検証の際、サーバの設定は1回の認証で通るようにしてあるのに何故か画像1枚1枚に対してID/PWを聞いてくる現象が起きました。

このままだと日が暮れてしまうので、ブラウザの設定からPWの全消去をしたところ無事に1回の認証で通るようになりました。

Google+とtwitter・Facebookの繋がり方の違い

Google+に招待してもらいました。まだサークルをいじるくらいしか出来ていないのですが、そこで感じたtwitterやFacebookとの違いをまとめます。



まず、それぞれのサービスで他人と繋がる仕組みは以下のようになっています。

▼twitterで【AがBをフォローする】
・B⇒Aに情報が流れる
(A⇒Bへの情報の流れはBがAをフォローするまで起きない)

▼Facebookで【AとBがフレンドになる】
・A⇔B相互に情報が流れる
(お互いが許可しない限り情報は流れない)

▼Google+のサークルで【AがBをサークルに入れる】
・B⇒Aに情報が流れる(twitterのフォローと同様)
・A⇒Bにも情報が流れる(サークル外からの発言として)



サークルに入れた/入れないの状態はtwitterのフォローした/してないの関係に似ています。自分側に相手を登録することで相手の情報が受信できるようになります。

1つ大きく違うのは、Google+では相手側に自分が登録されていなくても、自分が登録してさえいれば相手へ情報を発信することができることです。twitterやFacebookで情報が行き来する関係になるにはお互いの登録が必要でしたが、Google+では片方からの登録で情報を行き来させることができます。

※ただし、片方の登録で発信された情報は相手のメインストリームには流れず、[サークル外からの発言]という"保留"のような場所に溜まります。



最大のライバルであるFacebookは直接のフレンドという"内の世界"へのつながりを重視しています。その反面、技術的な情報のような不特定多数の"外の世界"へ向けた情報の発信には向いていません。また、必ずフレンドになる必要があるため、twitterで著名人をフォローするような「直接のつながりは無いけれど発信する情報を知りたい」という場合の手段もありません。

Google+はtwitterの仕組みをベースに"外の世界"への発信・受信を可能にし、同時にサークルで"内の世界"をつくることもできます。仕組みが違うので理解に戸惑いましたが、分かってくると今後どうなるか楽しみなサービスです。

twitterボタンのカウント(数字)の増え方

ツイートボタン作成ページ( http://twitter.com/about/resources/tweetbutton )のURLに以下を設定したボタンを6つ作成し、カウントの増え方について実験しました。


【用意したボタンのURL(data-url)】
a) http://ryotryo.blogspot.com/
b) http://ryotryo.blogspot.com/?id=hogehoge
c) URLではなく本文(data-text)に http://ryotryo.blogspot.com/ を記述
d) http://ryotryo.blogspot.com/index.html
e) http://ryotryo.blogspot.com
f) http://ryotryo.blogspot.com/index.html?id=hugahuga


【実験内容】
■1.aを押したとき⇒a,eが+1された
・URLのスラッシュ有り・無しは同一としてカウントされる
・dは別物扱い
・bも別物扱い

■2.bを押したとき⇒a,b,eが+1された
・a,eでbは増えないけど、bでa,eは増える

■3.cを押したとき⇒a,eが+1された
・date-urlに文字列がなくても、date-textに文字列が含まれていればカウントは増える
・date-urlをパラメータか消すと絶対にカウントは増えない

■4.dを押したとき⇒dだけが+1された
・hoge.htmlまで付けると、スラッシュ終わりのURLとは別物扱いになる

■5.eを押したとき⇒a,eが+1された
・a,eは同じものと考えてよさそう

■6.fを押したとき⇒fだけが+1された
・dは+1されない点が、aとbの関係とは違う

※その他
・ツイートしてからボタンの数字が増えるまでには10分ほどかかった
・非公開アカウントからツイートしてもカウントは増えなかった
・公開アカウントでツイートしてカウントを増やしたあと、そのアカウントを非公開にするとカウントは残ったままだった

SSL領域にソーシャルボタンは簡単には置けない

twitterのツイートボタンも、Facebookのいいねボタンも、サーバと接続するのでSSL領域に普通に置くと警告が出る。
twitterはaタグを使った形にしておけば大丈夫だけど、Facebookのいいねはおそらく無理(※)。シェアボタンなら多分いける。
アンケートフォームの入力前後の画面がhttpなのかhttpsなのかは事前に要注意。

・追記
いいねボタン内のリンクを http⇒https にすれば警告が無くなるという話も。ただ何故警告が出なくなるのかはっきりと分からないのであまりやりたくない。

FireMobileSimulatorのUAは間違えている可能性がある

とても便利なFireMobileSimulator。( http://firemobilesimulator.org/ )
でも、端末のUA情報は有志の方の手作業のため間違っている可能性もあります。

おかしいなと思ったらKEITAIALL ( http://keitaiall.jp/ )等でも確認してみましょう。

JavaScriptで何かの動作に連携・付随する動き

「Aが起きたらBをやる」というときは、Aの処理自体をtrue/falseで判定できたりする。
たとえばswfobjectで「flashが表示されたときにこの画像も表示する」としたいなら、so.write('flashdiv')という動作自体をtrue/falseで判定できる。(書き出されたならtrue)
迷ったときはalertで何が返ってくるか調べる。

Facebookのイイネボタンからカウント表示はとれない？

2011年5月現在、Facebook公式のイイネボタン作成ページ( http://developers.facebook.com/docs/reference/plugins/like/ )でボタンを作ると以下のようにlike数が右につく。

※google.comに対してのイイネボタン


オプションではこの数字を取ることはできないので、見せたくない場合は [ td.connect_widget_button_count_excluding ]を[ display:none; ]する。ただ、ブラウザ上で消えただけでソースにはしっかり残っているので根本的な解決ではないです。


※2011年6月追記

■消し方
・iframeの場合そこの指定が強いためか単純に消えないことがあるようです。消した人曰く「iframeの外側にあるliタグの幅指定してoverflow:hidden;してやった。」
・貼り付けコード内のstyleをwidth73pxにしても同じようなことができる。

※上記2つは単純にイイネの幅より大きい部分を消しているだけなので、文字サイズを変更(縮小)するとカウントも見えてくる。

・js使ってiframeの中身をいじれば綺麗にいけるのかも？
http://c-brains.jp/blog/wsg/10/09/25-020332.php


■やろうと思えば数字は分かる
上記の対応では「ソースに残っているじゃん、完全に消してくれ」と言われた場合に困ります。

しかしそもそも、「対象URLがいいねボタンを押された数」というのは、いいねボタン作成ページに対象のURLを入れれば誰でも分かること。なので、完全にカウント情報を秘密にすることは現状できない。

ソースまで見てカウントを探ろうとする人は上の方法を知っている可能性が高いので、結局のところソースから消すことができたとしてもあまり意味はない。ということでどうでしょうか。


※2011年8月追記

恐らく同じ問題について語っている海外のサイト。後で内容を試してみよう。
http://stackoverflow.com/questions/2950172/facebook-like-button-hide-count

IE8で別ぺージへのアンカーリンクが効かない

[a.html]から[b.html]の特定箇所へ飛ばしたいとき、[b.html#hoge]とアンカーをつけるが、IE8で飛んだあとの表示位置がずれるときがある。
ググッてみるものの詳しい原因・解決策は不明。

safari,chromeでのwhite-space:nowrapのバグ?

この方とおなじことが起きました。

-----
あいうえおかきくけこさしすせそ
-----
を

-----
あいうえおかきくけこ
さしすせそ
-----
としたいのに

-----
あいうえおかきくけ
こさしすせそ
-----
と1文字付いてきてしまいます。Webkitの問題？

script.aculo.us の effects.js が position:relativeに効かない

題名の通りで、Effect.Opacityを使ってふわっと出現させるエフェクトをつけようとしたら、relativeの要素には効かなかった。微妙な下揃えが必要なのでしかたなくtableを使うことに。解決策はあるんでしょうか。

ie6 min-height

.hoge {
min-height: 300px;
height: auto !important;
height: 300px;
}

イイネボタンを設置

上の別パターン

上の別パターン2

サムネあり

サムネ無し