HPB17 スマートフォンから電話できるようにする

いきなり余談ですが、ホームページビルダー17のことをHPB17と書くことが多いようですね。(検索される件数を見るとホームページビルダー17よりもHPB17で検索して探している人の方が多いです)

昨晩、午後10時30分に以下のコメントを頂きました。

今、ホームページをHPB17で作成しています。スマートフォンから見たときに電話場番号を押すと電話がつながるようにしたい。

このコメントを本日、午前5時に発見し、1時間後の6時に、完成しました。説明をつけくわえること4時間やっと完成しました。喜んでもらえるといいなぁ。

完成結果

http://pcmanabu.com/hpb17/

パソコンから見ると、今までと変わらず
20130202

スマートフォンから見ると、ハイパーリンクに!もちろん電話もできました!
20120201a

今回の解決方法は、ホームページビルダーに限らず、HTMLで記載されたものであれば、解決できます。

前提知識

今回は、HTMLの知識があれば対応可能です。また、フルテンプレートCSSで作成した方も解決できます。

(参考情報)

何らかのホームページがあれば、その所から作業しても出来るように工夫しました。
ただ、説明は、WordPressサイト作成した状態から説明しています。

以下のいずれかを実施すると同じ状態から作業できます。

また、ホームページビルダー17 WordPressサイトの編集を読んでおくと作業がしやすいかもしれません。

では、ホームページビルダー17 レビューの続きから説明しましょう。

サイトを開き、TEL番号が記載された場所に移動します。

20130201bb

今回は、HTMLソースを見て、記載内容を確認します。
20130201cc

記載されている内容

20130201dd

<p><span>TEL.</span>03-1234-0000</p>
<p>〒163-0000 東京都○○区○○○1-2-3</p>

パソコンの場合は、このままで良いです。
それでは、スマートフォンの場合は、どうしたらいいでしょうか
実は、ハイパーリンクでtel:0312340000と書くだけです。面倒ですが赤線の部分を手入力してください。

20130201eee

書いて保存してみましょう。

<p><span>TEL.</span><a href="tel:0312340000">03-1234-0000</a></p>
<p>〒163-0000 東京都○○区○○○1-2-3</p>

たったこれだけで、スマートフォンから電話ができるようになります。

ただ、このままだとまずいのです。なぜなら、パソコンで操作したときに不穏な動きをするからです。

プレビューで確認しましょう。

プレビューをクリックし、リンクの場所をクリックします。

20130201f

このメッセージは、"TEL"に対応したソフトがないということです。それほど遠くない未来に、パソコンから電話をかけることが出来るようになると思いますが、今は、クリックされた人を混乱させるだけです。

20130201g

パソコンは、従来のまま。スマホは、tel:で!

今回は、JavaScriptで実現します。

私が作りましたので、そのままコピー&ペーストでいいでしょう。

20130201hh

①がパソコン用の記述。②がスマホ用の記述です。プログラムを使って切り替えています。

<script>
var ua = navigator.userAgent.toUpperCase(); //ユーザーが使用している環境を調べる
if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){ //もし、iPhoneかアンドロイドかモバイルなら
	document.write('<p class="tel"><span>TEL.</span><a href="tel:0312340000">03-1234-0000</a></p>'); //スマホ用表示
} else{ //さもなくば
	document.write('<p class="tel"><span>TEL.</span>03-1234-0000</p>'); //パソコン用表示
}
</script>

プレビューを押してエラーにならなければ大丈夫です。

20130201jj

もし、上手く表示できない場合は、HTMLソースに戻り訂正しましょう。

以上で、完成です。あとは、確認作業です。[上書き保存]をクリックし、[サイトの公開]をクリック

20130201k

あとは、IEとスマートフォンで確認して終了です。

パソコンから見ると、今までと変わらず
20130202

スマートフォンから見ると、ハイパーリンクに!もちろん電話もできます!
20120201a

余談

ページ編集で参照すると{s}のマークがあります。これは、プログラムを意味しています。ページ編集では、プログラムの動作結果までは、表示してくれません。また、誤って消すと、電話番号部分が表示しなくなりますので、消さないようにしてください。

20130201i

   このエントリーをはてなブックマークに追加       

  • tanpopo3781

    できましたあ。
    どうやってするのか気になっていた項目なのです。
    ありがとうございました。