jQuery
jQueryプラグイン
ionic
罪深い
IonicDay 3

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の入門書もでますのでぜひご利用ください。

それでは、また。