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>の下に、以下を追記します。
<script src="assets/plugin/jquery-3.2.1.min.js"></script>
3. 型定義ファイルを設置
Ionicでは、TypeScriptという型のあるJavaScriptを採用しています。そのため、jQueryの定義している関数（みなさんが何度も書く）$を使うためには、その型を定義してあげる必要があります。
型定義するファイルを設置するために、src/に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本体読み込みの下に、以下を追記します。
<script src="assets/plugin/jquery.drawsvg.js"></script>
プラグインを使う
使ってみましょう。特にIonicのスターターキットの指定はありませんが、仮にblankではじめているとすると、以下のように追記します。
<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プラグインの実行コードを書きます。
@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の入門書もでますのでぜひご利用ください。
それでは、また。