WiKiペディア風にツールチップを実装する

この記事を読むのに必要な時間は約 10 分です。

[wc_row] [wc_column size=”one-half” position=”first”] Android

Android

[/wc_column] [wc_column size=”one-half” position=”last”] iPhone

iPhone

[/wc_column] [/wc_row] [simple_tooltip content='WIKI ウィキペディアは、ウィキメディア財団が運営しているインターネット百科事典である。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。']WiKiペディア[/simple_tooltip]で便利だなって思う部分ってこの[simple_tooltip content='ツールチップとは、グラフィカルユーザインタフェースにおいて普及した表現手法・共通要素のひとつである。 これはカーソルと連動して使用される。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。']ツールチップ[/simple_tooltip]の部分なんですね。 この部分を[simple_tooltip content='WordPressWordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システム としてもしばしば利用されている。']WordPress[/simple_tooltip]でも真似してみたいと思っていたら 簡単に実装できる[simple_tooltip content=' 通常、コンピュータ上で動作するプログラムは、中心となるプログラムコードがサブルーチンを呼び出して処理を進める形で構成される。処理の基本の流れは同じでも、処理内容の詳細が異なるアプリケーションコードを作る場合には、いくつかのサブルーチンを入れ替える事により実現する。例えば、「ビットマップ画像ファイルを読み込んで画面に表示をする」というアプリケーションの場合、ファイル読み込みのサブルーチンを差し替える事により、「PNGを読み込んで画面に表示をする」プログラムや「JPEGを読み込んで画面に表示をする」プログラムなどのバリエーションを作る事ができる。 多くのソフトウェアでは、この差し替え可能な部分のサブルーチンの呼出し手順は公開されておらず、アプリケーション・コードを開発した者だけが差し替え作業ができるようになっている。しかし、上記の画像ファイルのフォーマットの例のように、必要とされる全てのサブルーチンを大元の開発者が用意できるとは限らない場合がしばしば発生する。このような場合、サブルーチンの呼び出し手順を規格化して公表し、さらにサブルーチンの差し替え方法を提供すれば、大元の開発者以外の者もアプリケーションの機能を変更できるようになる。 ']プラグイン[/simple_tooltip]があったのです。  

Simple Tooltips

Simple Tooltips 上記の[simple_tooltip content=' 通常、コンピュータ上で動作するプログラムは、中心となるプログラムコードがサブルーチンを呼び出して処理を進める形で構成される。処理の基本の流れは同じでも、処理内容の詳細が異なるアプリケーションコードを作る場合には、いくつかのサブルーチンを入れ替える事により実現する。例えば、「ビットマップ画像ファイルを読み込んで画面に表示をする」というアプリケーションの場合、ファイル読み込みのサブルーチンを差し替える事により、「PNGを読み込んで画面に表示をする」プログラムや「JPEGを読み込んで画面に表示をする」プログラムなどのバリエーションを作る事ができる。 多くのソフトウェアでは、この差し替え可能な部分のサブルーチンの呼出し手順は公開されておらず、アプリケーション・コードを開発した者だけが差し替え作業ができるようになっている。しかし、上記の画像ファイルのフォーマットの例のように、必要とされる全てのサブルーチンを大元の開発者が用意できるとは限らない場合がしばしば発生する。このような場合、サブルーチンの呼び出し手順を規格化して公表し、さらにサブルーチンの差し替え方法を提供すれば、大元の開発者以外の者もアプリケーションの機能を変更できるようになる。 ']プラグイン[/simple_tooltip]を新規追加→有効化して使用します。 [simple_tooltip content='コンピュータの分野におけるインストール?(install) とは、コンピュータにソフトウェアを追加し、使用可能にすることを指す。この意味では、セットアップ?(setup) とも呼ばれる。']インストール[/simple_tooltip]してみてわかったのですが、使い方がシンプルで迷う必要がなかったということ これは、1番ありがたいことだと思いますね。 設定画面 設定画面まずは、このままでもOKなのでは??? とにかく入れたらすぐ使いたいどうやって使うの? って感じになってませんか? Sample画面 赤枠の部分にマウスがのると上記のように表示されます。 [simple_tooltip content='WIKI ウィキペディアは、ウィキメディア財団が運営しているインターネット百科事典である。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。']WiKiペディア[/simple_tooltip]と同じように画像も表示できていますよね。 これが可能になると何かを解説したいサイトなどでちょっとわかりづらい言葉にカンペ代わりに使うこともできるし、英語で書かれているところにマウスのせると翻訳があるなんて利用者としてちょっと助かる機能だったりしないですか? そういう意味でどうしても導入したいと思っていた機能なのです。  

使い方

アイコン 記事投稿画面にアイコンが新しく追加されています。 上記画像を参考に探してみてください。 ないという方は、[simple_tooltip content='コンピュータの分野におけるインストール?(install) とは、コンピュータにソフトウェアを追加し、使用可能にすることを指す。この意味では、セットアップ?(setup) とも呼ばれる。']インストール[/simple_tooltip]されていないもしくは[simple_tooltip content=' 通常、コンピュータ上で動作するプログラムは、中心となるプログラムコードがサブルーチンを呼び出して処理を進める形で構成される。処理の基本の流れは同じでも、処理内容の詳細が異なるアプリケーションコードを作る場合には、いくつかのサブルーチンを入れ替える事により実現する。例えば、「ビットマップ画像ファイルを読み込んで画面に表示をする」というアプリケーションの場合、ファイル読み込みのサブルーチンを差し替える事により、「PNGを読み込んで画面に表示をする」プログラムや「JPEGを読み込んで画面に表示をする」プログラムなどのバリエーションを作る事ができる。 多くのソフトウェアでは、この差し替え可能な部分のサブルーチンの呼出し手順は公開されておらず、アプリケーション・コードを開発した者だけが差し替え作業ができるようになっている。しかし、上記の画像ファイルのフォーマットの例のように、必要とされる全てのサブルーチンを大元の開発者が用意できるとは限らない場合がしばしば発生する。このような場合、サブルーチンの呼び出し手順を規格化して公表し、さらにサブルーチンの差し替え方法を提供すれば、大元の開発者以外の者もアプリケーションの機能を変更できるようになる。 ']プラグイン[/simple_tooltip]が有効化になってない。 などの原因が考えられます。 アイコンをクリックして後は、記事作成と同じように画像や言葉を追加するだけ! めっちゃ簡単に親切そうなサイト作成が可能になります。 あなたも[simple_tooltip content='ツールチップとは、グラフィカルユーザインタフェースにおいて普及した表現手法・共通要素のひとつである。 これはカーソルと連動して使用される。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。']ツールチップ[/simple_tooltip]を使ってみてください。 自分でやって気づいたこと やりすぎたら面倒臭いかもーーーーって部分です。    

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!