Help us understand the problem. What is going on with this article?

IonicでjQuery/jQueryプラグインを従来通り使う方法

More than 1 year has passed since last update.

Happy Halloween!
もう2017年も終わろうとしている頃ではありますが、「WebデザイナーがIonicを使えるというなら、いつも使っているjQueryの使い方も教えて欲しい」と言われたのでご紹介します。

jQueryだけ使いたい

jQueryのセレクター指定($)やアニメーションなどの基本的な機能を使いたい人向け。

1. jQueryのファイルをダウンロードしてくる

jQuery公式サイトからjQueryのminifyされたファイルをダウンロードしてきます。記事執筆段階ではDownload the compressed, production jQuery 3.2.1をクリックしたらOKです。自動的にファイルのダウンロードがはじまり、ローカルディレクトリにjquery-3.2.1.min.jsがダウンロードされます。
そのファイルは、Ionicプロジェクトのsrc/assets/pluginフォルダをつくり、その中に配置します。(src/assets/plugin/jquery-3.2.1.min.js

2. index.htmlで読み込む

src/index.htmlで、jQueryファイルを読み込みます。<script src="build/main.js"></script>の下に、以下を追記します。

index.html
<script src="assets/plugin/jquery-3.2.1.min.js"></script>

3. 型定義ファイルを設置

Ionicでは、TypeScriptという型のあるJavaScriptを採用しています。そのため、jQueryの定義している関数(みなさんが何度も書く)$を使うためには、その型を定義してあげる必要があります。
型定義するファイルを設置するために、src/declarations.d.tsを新規作成します。そして、以下を入力下さい。

declarations.d.ts
declare const $: Function;

$は関数で定義してますよ、という一行となります。これを定義づけることによって、jQueryをIonic上のコードで扱うことができるようになります。
これで、使う用意は完了です。

なお、作業はGitHubでも公開しています。
https://github.com/Ionic-jp/ionic-jquery/commit/5e227e4061ba53a7bed5672ff5c3c38b459ee5f0

jQueryプラグインを使いたい

jQueryプラグインのひとつとして、jQuery DrawSVGをサンプルに解説します。なお、「前述したjQueryだけ使いたい」を実装した次の話になります。

ダウンロードして、index.htmlで読み込む

jQuery DrawSVGにアクセスして、Download(zip)からファイルをダウンロードします。そのフォルダにあるsrc/jquery.drawsvg.jsがプラグイン本体になりますので、それをIonicプロジェクトに移動します。さきほどのjQuery本体をいれたフォルダと同じ場所に移動します。(src/assets/plugin/jquery.drawsvg.js

src/index.htmlで、jQueryファイルを読み込みます。jQuery本体読み込みの下に、以下を追記します。

index.html
<script src="assets/plugin/jquery.drawsvg.js"></script>

プラグインを使う

使ってみましょう。特にIonicのスターターキットの指定はありませんが、仮にblankではじめているとすると、以下のように追記します。

src/pages/home/home.html
<ion-content padding style="background-color: #673ab7;">
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

<!-- ここから追記 -->
  <div class="wrapper">
    <svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256">
      <g stroke="#FFF" stroke-width="2" fill="none">
        <path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
        <path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
        <path d="M103.302 33H157v45H19V33h52.72" />
        <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
        <path d="M18.696 103h137.896v.17" />
        <path d="M18.738 127h42.64v.308" />
        <path d="M18.738 155h137.854v.068" />
        <path d="M18.738 178h137.854v-.006" />
        <path d="M18.696 227h137.868v-.21" />
      </g>
    </svg>
  </div>
<!-- ここまで追記 -->
</ion-content>

追記したのは、jQuery DrawSVGのデモで使われているSVGパスです。Simple usageからみることができます。
また、このSVGパスは白で、このままだと背景と同化してみえないの<ion-content>に背景色を設定しています(<ion-content padding style="background-color: #673ab7;">

次に、jQueryプラグインの実行コードを書きます。

src/pages/home/home.ts
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  // ここから追記
  ionViewDidEnter(){
      $('p').text('Hello jQuery!');

      setTimeout(()=>{
          const $svg = $('page-home svg').drawsvg();
          $svg.drawsvg('animate');
      },100);
  }
  // ここまで追記
}

ionViewDidEnter()は、このページが表示される時に自動実行されるLifeCycleと呼ばれるメソッドです。これが実行されたら、jQueryのコードが実行されるようになっています。
$('p').text('Hello jQuery!');は、pタグの中をHello jQuery!に書き換えます。表示してみると、書き換わっているのが確認できます。

setTimeout(()=>{
    const $svg = $('page-home svg').drawsvg();
    $svg.drawsvg('animate');
},100);

は、先ほど用意したSVGに、jQuery DrawSVGをつかってアニメーションを加えています。setTimeoutで時間をずらしているのは確認しやすくするためなので、くくらなくても大丈夫です。

この変更もGitHubでまとめています。

まとめ

以上で、IonicでjQueryとjQueryプラグインを使って実装しました。Ionic本体に多くのUIコンポーネントとアニメーションがあり、jQueryをわざわざ使わないといけない場面は限りなく少ないですが、Ionicを使う入り口になればと思います。

また入り口として、2018年1月(予定)に、Ionicの入門書もでますのでぜひご利用ください。

それでは、また。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした