Hatena::ブログ(Diary)

群馬県デザイン日記 このページをアンテナに追加 RSSフィード Twitter

2013-01-24

iPhoneのアドレスバーを1pxずらさないで隠す方法

| 12:13 | iPhoneのアドレスバーを1pxずらさないで隠す方法を含むブックマーク

iPhoneやアンドロイドのブラウザでアドレスバーを隠す(非表示にする)方法として、よく下記のようなコードが紹介されています。

window.onload = function(){
     setTimeout("scrollTo(0,1)", 100);
}

PCやスマホ、タブレットで共通して上記コードを使用すると、特にPCサイトで表示された場合に、この「1px」のズレが気になる場合があります。

私だけかもしれませんが。

で、この「1px」のところを単純に「0.1px」でやったらどうだろう? と試してみたら、iPhoneではうまくいきました!

実際に0.1pxずれたのかどうかわかりませんが、iPhoneではうまくアドレスバーが隠れました。

使用したコードは下記のものです。

scrollToの2番めの数字を1pxから0.1pxに変更しただけです。

window.onload = function(){
     setTimeout("scrollTo(0,0.1)", 100);
}

ちなみにアンドロイド端末では未確認です。

2012-06-13

iPhoneでイメージマップをタップした時に画像が消えてしまう問題を解決!

| 17:34 | iPhoneでイメージマップをタップした時に画像が消えてしまう問題を解決!を含むブックマーク

今さらながら、初めてイメージマップ(クリッカブルマップ)を使用することになりました。

ひとつの画像内の複数エリアでリンク先が変わるというもので、それぞれのエリアをマウスオーバーすると、ロールオーバーするというものです。

これはJavaScriptを使い、onmouseover属性とonmouseout属性を使用して実現しています。

イメージマップの座標はDreamWeaver上で簡単に作成できました。

と、ここまでは割と簡単にできたのですが、ここで問題が発覚しました。

PCでは問題なかったのですが、iPhoneでイメージマップの画像をタップしたら、その画像が消えてしまうんです。

タップするとリンク先に移動するわけですが、その前に画像が消え、リンク先に移動し、前のページに戻っても消えたまま。

リロードしなければ表示されません。

そこでoumouseup属性で元の画像を指定したら消えなくなりました!

これをそれぞれのエリアに指定したら画像をタップしても消えなくなりました。

つまり、

  1. onmouseoverでロールオーバーする画像を指定(PC用)
  2. onmouseoutで元の画像を指定(PC用)
  3. onmouseupで元の画像を指定(iPhone用)

というふうに3つの指定します。

onmouseup属性っていうのは、「マウスボタンから指を離すことで起動するスクリプト」らしいです。

iPhoneではタップした指を離したときに起動するようですね。

(T_O)(T_O) 2013/05/01 18:30 途方にくれていたところ、この記事にたどり着きました。
onmouseupで助かりました。貴重な情報をありがとうございました。

aaa-faaa-f 2013/05/01 18:34 (T_O)様、お役に立ててうれしいです。

ホームページ初心者ホームページ初心者 2015/05/08 02:11 困っていたらこのブログに辿り着きました!
非常に助かりました、ありがとうございます!

2012-03-08

Siriから日本語でTwitterにツイートできたーwww

| 23:10 | Siriから日本語でTwitterにツイートできたーwwwを含むブックマーク

f:id:aaa-f:20120308220410p:image

ついにiPhone 4SのSiriが日本語対応


それでは早速SiriからTwitterにツイートしてみましょう!


とは言っても、SiriはTwitterアプリと連携していませんので、ちょっとした裏技が必要です。

でもiPhoneの脱獄(Jail Break)は不要です!


1.Twitter投稿専用メールアドレスをゲット!

まずはtwittercounter.comというサイトTwittermailへ行って、Twitter投稿用のメールアドレスをゲットしましょう。

Add yourself. It's free.」をクリック

ポップアップが出てきたらログイン。

f:id:aaa-f:20120308220411p:image


そしたら赤丸のTwittermailというタブをクリック。

f:id:aaa-f:20120308223954p:image



次に緑色ボタンSet up your TwitterMail account now.」をクリック。

f:id:aaa-f:20120308223955p:image


そうすると赤丸で囲った部分に、すでにTwitter投稿用のメールアドレスができております

f:id:aaa-f:20120308223956p:image


このアドレスが漏れてしまうと、あなたのTwitterアカウントに勝手にツイートされてしまうので要注意です。

また、このアドレスは変更可能です。



2.iPhoneのアドレス帳にTwitter投稿用のメールアドレスを登録!

さきほど作ったTwitter投稿用のメールアドレスをiPhone 4Sのアドレス帳に登録します。

名前はTwitter、それからメールアドレスの登録だけでOK!

f:id:aaa-f:20120308225826p:image


3.Siriを起動してツイートしよう!

ここまでできればあとはホームボタンを長押ししてSiriを起動してツイートしてみよう!

SiriでTwitterに投稿するするには、下記のように言えばOK。


ツイッターメッセージ「そろそろ寝るかー」

すると、この内容で送信するか聞いてくるので、「はい」と返答するか、下記画面の送信ボタンを押せば、Twitterに送信完了です!

f:id:aaa-f:20120308233410p:image

Siriに話す時は、間を置くと途切れてしまうので、スラーッと流暢に話すのがコツですね。


これでリアルつぶやきがTwitterに投稿できます。

auiPhone1auiPhone1 2012/06/25 10:08 SIRIでTwitterが使える機能ありがとうございます。早速実験しました。これからも色々な情報をよろしくお願いします。