「Ajax他」カテゴリーアーカイブ

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

スマホページで画像バナーをタップで、電話発信させる方法

 
リンクや画像をタップするだけで電話をかけることができる機能がある。
SafariやSkypeをインストールしている場合、普通の電話番号をリンクにする機能がある。
この機能には色々と問題点があるので、それをクリアしていこう。
 

従来の方法の問題点

<a href="tel:xxxxxx"></a>

 
01-0000-0000
と、リンクにしておくと、タップ(クリックすると)
tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
 
しかし、このリンクをPCでクリックしてしまうと、
 
tel-link-error


 
こんな感じのエラーが出てきて嫌な感じになる。
 
これを解決する方法はいくつがあるが、iPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使って、PCの時にリンクにならないようにする方法

 
まず、HTMLファイルの電話のリンクにしたい部分を

<span class="tel-link">01-0000-0000</span>

 
と記述する。
 
これは、span なので、当然リンクにならない。PCでクリックしても何も起こらない。
 
スマホの時にこれをリンクに書き換える必要があるので、
 
jsファイルに

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

と書いておく。
 
分からなければ、ここから右クリックして「リンク先を保存(言葉違う可能性あり)」tel-link.jsをダウンロードしよう。
 
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
.......中略......
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tel-link.js"></script>
</head>

 
という感じで、

<span class="tel-link">01-0000-0000</span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel-link.js
HTMLファイル

 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事:
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

この記事も読まれています

画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

スマホページで画像バナーをタップで、電話発信させる方法

 

下記の従来の方法は絶対NG

<a href="tel:xxxxxx"></a>

 
< と、リンクにしておくと、タップ(クリックすると) tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
でも紹介した通り、spanをリンクにしてスマホで電話発信する事ができる。
これでPCでクリックしてしまっても、
 

アドレスのプロトコルが不明です
telというプロトコルはどのアプリケーションにも関連づけられておらず、
Firefox でこのアドレスを開く方法が分かりません。
・このプロトコルを使用するアドレスを開くには、別のソフトウェアをインストールする必要があるかもしれません。

 
というような、エラーメッセージが出てくることはない。
 
ただし、iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法では、文字リンクにする必要があった。
 
これを画像リンクやバナー、ボタンで行う方法。もちろんiPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使い、PCでリンクにさせない

 
まず、HTMLの電話のリンクにしたい部分に

<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>

 
と書く。

alt から電話番号を取得するので、必ず記入する事!
 
jsファイルに

$(function(){
	var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
	 $('.tel-link img').each(function(){
		var alt = $(this).attr('alt');
			$(this).wrap($('<a>').attr('href', 'tel:' + alt.replace(/-/g, '')));
		});
	}
});

と書いておく。

分からなければ、ここから右クリックして保存などで、tel.jsをダウンロードしよう。

あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

拡張子やファイル名がちゃんとなっているか注意!

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
.......中略......
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tel.js"></script>
</head>

 
という感じで、

<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel.js
HTMLファイル

 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事:
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

レスポンシブのviewportをクリックで切り替える方法。viewportを動的に制御する

viewportをボタンのクリックで切り替える方法

レスポンシブデザインの簡単な説明は
レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するを参照の事。

レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。
 
今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
&nbsp
 
しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの?
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。

そこで、端末が何かにかかわらず、メディアの幅(ブラウザ・スマホ画面の幅)によって見え方を変えようというわけだ。

で、レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい!というニーズもある。

こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。

 

レスポンシブに置いて、PC/スマホの切り替えとはつまり?

CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。
 
用意するものは3つ。

jquery-1.5.min.js
switch.screen.js
jquery.cookie.js
 
こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。
 
 

準備とアップロード

 
まず、switch.screen.jsの3行目
 

$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);

$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});

 
“‘width=951, … の部分をメディアアンカーの幅に合わせる。
 
上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。
 
 
そしてサーバーの適当な位置へアップロード。
 
下記、コード例では、jsフォルダへアップロードした場合の記述。
 

HTMLのソース

<head>…</head>の間に、下記コードをコピペ。
 

<head>

<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>

</head>

 
 
切り替えスイッチ(リンク)を設置したい場所に、下記コードをコピペ。
 

<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>

 
以上。
 
 
使用例:

http://rakuichi-b.com/

パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。

CSSで、子も孫も横並びのドロップダウンメニュー

ドロップダウンメニューというか、プルダウンメニューというか…
下層の表示が縦並びになっているものしかない。
jQueryを使うものだとあるのだが、あえてCSSのみでやりたい時のために作ってみた。
———————————————————
ソース

<div id=”menu”><!– menu start –>
<ul id=”pulldown-menu”>
<li><a href=”index.html”><span>Home</span></a></li>
<li><a href=”#” class=”drop”><span>会社紹介</span></a>
<ul class=”about”>
<li><a href=”ceo.html”>CEO挨拶</a></li>
<li><a href=”partner.html”>パートナーシップ</a></li>
<li><a href=”map.html”>アクセス地図</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>事業紹介</span></a>
<ul class=”business”>
<li><a href=”area.html”>事業領域</a></li>
<li><a href=”smartgrid.html”>スマートグリッド</a></li>
<li><a href=”ess.html”>電力貯蔵装置</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>製品紹介</span></a>
<ul class=”product”>
<li><a href=”#” class=”drop”>新再生エネルギー</a>
<ul class=”nre”>
<li><a href=”sun.html”>太陽電池モジュール</a></li>
</ul></li>
<li><a href=”led.html”>LED</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>プロジェクト</span></a>
<ul class=”project”>
<li><a href=”#” class=”drop”>国内</a>
<ul class=”domestic”>
<li><a href=”island.html”>カパ島</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”>海外</a>
<ul class=”oversea”>
<li><a href=”aus.html”>オーストラリア</a></li>
<li><a href=”thai.html”>タイ</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”contact.html”><span>お問い合わせ</span></a></li>
</ul>

</div><!– menu end –>

———————————————————————-
CSS
* {
margin: 0;
padding: 0;
list-style: none;
}
ul#pulldown-menu a {
color: #FFFFFF;
text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
background: #3b91ff;
}

ul#pulldown-menu a.drop:link,
ul#pulldown-menu a.drop:visited {
background: #3366FF url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu a.drop:hover,
ul#pulldown-menu a.drop:active {
background: #3b91ff url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li a.drop {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li a {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li ul li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li ul li a {
width: 9em;
height: 2em;
text-align: center;
}

ul#pulldown-menu li ul,
ul#pulldown-menu li ul li ul {
display: none;
}
ul#pulldown-menu li:hover ul {
clear: both;
width: 54em;
display: block;
position: absolute;
top: 2em;
left: 0;
z-index: 100;
}
ul#pulldown-menu li:hover ul li {
float: left;
}
* html ul#pulldown-menu li:hover ul {
vertical-align: bottom;
}

ul#pulldown-menu li:hover ul li ul {
display: none;
}

ul#pulldown-menu li ul li:hover ul {
clear: both;
float:left;
display: block;
position: absolute;
top: 0;
z-index: 200;
}

ul.about {
width: 27em;
margin-left: -9em;
}
ul.business {
width: 27em;
margin-left: -9em;
}
ul.product {
width: 18em;
}
ul.nre {
width: 9em;
margin-top: 2em;
}
ul.project {
width: 18em;
}
ul.domestic {
width: 9em;
margin-top: 2em;
}
ul.oversea {
width: 18em;
margin-top: 2em;
}

————————————————

そもそも、下層が縦にしかならない原因は、親の ul li 部分の横幅の間にしか、子や孫の ul li がこれない事。
したがって、子や孫の横幅を指定してやればこの問題は解決する。
が、下層メニューの数はそれぞれ固有なので、仕方なく個別に指定するしかなかった。したがって、汎用性は全くない。

あくまで参考程度にしかならないが、、結構困っている人がいたみたいなので、一応のTipsとして。

Shadowbox3系でwmvなどの動画サイズをウィンドウサイズにフィットさせる方法

LightboxやShadowboxで動画フォーマットに対応させる

Lightboxなどはものによっては動画にも対応している。
shadowbox-js.com
例えば有名なところではこの Shadowbox 。

ただし、Shadowbox 3.x系には、致命的なバグがあって、 Windows Media Player で、wmv や mpeg 、avi を再生すると動画のサイズがフィットしない。

<a href=”mymovie.wmv” rel=”shadowbox;height=140;width=120″>

上記のように、導入方法に表記されている、サイズ指定をしても その中に小さいままの動画サイズで表示されるだけで、動画そのものはリサイズされない。

これを修正するには、

修正点はshadowbox.jsの中の2か所

shadowbox.js ファイルの

params={autostart:opt.autoplayMovies?1:0}

を、

params={autostart:opt.autoplayMovies?1:0,stretchToFit:1}

に変更。
場所は見つけにくいので、params={autostart:opt.autoplayMovies?1:0} で検索する。

また、

video/x-ms-wmv

を、

application/x-ms-wmp

に変更。
例によって非常に見つけにくいので、「video/x-ms-wmv」で検索する。

以上の2点を変更後、上書き保存。