jQuery 10: スマホで単語をタップしたときヘルプ情報を表示するには

ここでは、jQueryを使用してスマホのブラウザに表示されている英語の文章から特定の単語をタップしたときヘルプ情報を表示する方法を解説します。ブラウザにコンテンツが表示されたとき、「ヘルプ情報」を非表示にするには、スタイルシート(CSS)のdisplayプロパティに「none」を設定します。「ヘルプ情報」を表示するには、displayプロパティの「none」を削除します。実行時にCSSのdisplayプロパティの値をダイナミックに書き換えるには、jQueryのtoggle()メソッドを使用します。

ins { display: none; }  // ヘルプ情報を非表示にする
$('ins').toggle();      // ヘルプ情報を表示・非表示に切り替える
<ins>ヘルプ情報…</ins> // ヘルプ情報

特定の単語をスマホからタップしたときに、ヘルプ情報を表示するにはjQueryでクリック(タップ)時のイベントを登録します。この場合、スマホから「単語」をタップするとイベントが実行されます。クリック時のイベントでは、ヘルプ情報が記述されているHTML要素を検索して表示状態(CSSのdisplayプロパティのnoneを削除)に切り替えます。この処理をjQueryで行うには、次のようなコードを記述します。

ins { display: none; }
$('b.helpme').click(function () {
 $(this).next('ins').toggle();
}); 
<b class="helpme">Bill Gates</b><ins>ヘルプ情報…</ins>

スマホのブラウザから「Bill Gates」をタップすると、jQueryのクリック(タップ)時のイベントが実行されます。このインベントが実行されたときjQueryの「this」には、タップした単語の要素(HTMLの<b>…</b>要素)が格納されています。「<b>Bill Gates</b>」タグの、次のタグ(要素)「<ins>ヘルプ情報…</ins>」を検索するには、jQueryのnext()メソッドを使用します。jQueryの「$(this).next(‘ins’)」でHTMLの<ins>…</ins>タグ(要素)を検索したら、jQueryのtoggle()メソッドを実行して「ヘルプ情報」を表示・非表示に切り替えます。

サンプルの作成手順(jQuery-10.aspx)

  1. コンテンツを配置
    HTMLの<body>…</body>タグにコンテンツを入力したら<p>…</p>タグを追加してコンテンツをレイアウトします。特定の単語をタップできるようにするには、単語をHTMLの<b>…</b>タグで囲みます。<b>タグのclass属性には「helpme」を設定します。単語をタップしたときに表示する「ヘルプ情報」は、HTMLの<ins>…</ins>タグで囲みます。ここでは、「Bill Gates」をタップできるようにしています。<ins>…</ins>タグ内には、ビル・ゲイツのヘルプ情報を記述しています。

    <p>Everybody wants the good life, but not everybody gets the good life, right? Imagine for a second. If right now, today, how much more successful would you be if you just started a company 50:50 with <b class="helpme">Bill Gates</b><ins>(ビル・ゲイツ:アメリカ合衆国の実業家、慈善活動家、技術者、作家、教育者、プログラマ、マイクロソフト社の共同創業者、ビル&メリンダ・ゲイツ財団共同創業者兼共同会長)</ins> as your business partner and he was using every trick of the trade that he used to build Microsoft into one of the biggest companies in the world?</p>
  2. CSSを追加
    <head>…</head>タグ内に<style>…</style>タグを追加して、次のようなCSSを入力します。CSSのtext-decorationプロパティに「underline」を設定すると下線が表示されます。cursorプロパティに「help」を設定すると、マウスを移動したときにカーソルが「?」に変わります。このプロパティはスマホには適用されません。displayプロパティに「none」を設定して「ヘルプ情報」を非表示にします。colorプロパティに「Green」を設定して「ヘルプ情報」を緑色で表示します。font-sizeプロパティに「x-small」を設定して小さ目の文字サイズにします。

    <style type="text/css">
     b.helpme { text-decoration: underline; cursor: help; }
     ins { display: none; color: Green; font-size: x-small; }
    </style>
  3. jQueryのコードを追加
    <head>…</head>タグ内に<script>タグを追加して、jQueryのライブラリーの組み込みとコードを入力します。

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(function () {
      $('b.helpme').click(function () {
       $(this).next('ins').toggle();
      }); 
     });
    </script> 
  4. サンプルをスマホに表示
    スマホのブラウザを起動したら、サンプルのURL「http://aspnetaccess.com/jquery-10/」を入力してWebページを表示します。
  5. 太字の単語をタップ
    スマホのブラウザに表示されているコンテンツから「Bill Gates」「Warren Buffet」「Mother Theresa」をタップしてヘルプ情報が表示されるか確認します。

サンプルのソースコード(jQuery-10.aspx)

サンプルの画像(jQuery-10.aspx)

jQuery-10

サンプルのライブデモ(jQuery-10.aspx)

Transcript – The Law of 33% by Tai Lopez

Everybody wants the good life, but not everybody gets the good life, right? Imagine for a second. If right now, today, how much more successful would you be if you just started a company 50:50 with Bill Gates(ビル・ゲイツ:アメリカ合衆国の実業家、慈善活動家、技術者、作家、教育者、プログラマ、マイクロソフト社の共同創業者、ビル&メリンダ・ゲイツ財団共同創業者兼共同会長) as your business partner and he was using every trick of the trade that he used to build Microsoft into one of the biggest companies in the world?

Imagine how much money you’d have in your bank account today – how much more money, I should say – if Warren Buffet(ウォーレン・バフェット:アメリカ合衆国の投資家、経営者、資産家、慈善活動家) was teaching you how to invest in the stock market, showing you what he used to build Berkshire Hathaway into a $140 billion company. Imagine how much happier you’d be today if the Dali Lama was your personal guide, showing you how to find fulfillment in life, in the little things that most people overlook.

Imagine how healthy you’d be today if when you woke up, you went down to your gym, and Arnold Schwarzenegger was waiting there, who was your personal trainer, showing you how he built his body into the most fit body maybe ever, right?

Imagine the change you’d be making in the world, the injustice you’d be solving today, if Mother Theresa(マザー・テレサ:カトリック教会の修道女、「神の愛の宣教者会」の創立者) and you were running a charity together and she was showing you what she learned on the streets of Calcutta, helping the poor, the sick, and the dying.


シェアする

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

フォローする