│ネットワークの明日を創る。試してみたところ最初は自分のコードでは全く動かず、かなり苦戦しました。今回は動かないときの解決方法に焦点を当てて記事を書きたいと思います。Painterの使い方について順を追って説明します。SVGファイル作成まず素材となるSVGファイルを作成します。(私はIllustratorで作成しました。)ファイルは1000×1000pxで40kb以下という制限があります。ペンツール等でパスを描きます。テキストツールの場合はアウトライン化しましょう。塗り色は無しで、線の色は無し以外に設定してください。作り終えたら、別名保存でSVG形式で保存します。SVGオプションのSVGプロファイルは「SVG1.1」を選択しましょう。他はデフォルトのままで問題ないと思います。公式サイトのコンバーターで変換します。変換して生成されたコードはこの後すぐ使いますので、とっておいてください。jsの読み込み続いて公式GitHubから、コード一式をダウンロードしてきて解凍します。公式GitHub使うのは「jquery.lazylinepainter-1.7.0.js」と、vendorフォルダ内「jquery-2.1.1.min.js」です。※最新バージョンに合わせてファイル名など適宜変更してください。加えて先ほどコンバーターで生成したコードを早速使います。src="jquery.lazylinepainter-1.7.0.js"></script><script>※コンバーターで生成されたコードコピペ</script>の順に読み込ませます。次にbody内にSVGアニメーションを表示させる場所を用意してあげます。id="任意id名"></div></body>重要ポイント最後にコードを少し変更する必要があります。id=”任意id名“></div>この三か所のid名を揃えてください。--></html>これでSVGアニメーションが動くはずです。DEMOオプション線の色や太さ、描画速度などを変更出来ます。簡単なものだけ紹介します。//逆再生オプションDEMO他のオプションについては公式GitHub等を参考にしてください。上手く動かないとき下記項目を確認してください。id名は揃っていますか?jsファイルへのパス・階層は間違ってませんか?idでなくclassにしていませんか?(classでは動きません。)同ページ内に複数設置していませんか?複数設置するにはカスタマイズが必要です。それでも動かない場合は、一度私のコード・ファイル構造を全く同じにコピーして動くか確認してみてください。自分の生成したコードの時だけ動かない場合は、SVGファイルに問題があることが多いです。CCで検証)※コンバーター変換後のプレビューで正しく描画されない場合は、導入後もほぼ動きません。・線に色を設定していない。線に色を設定していないと描画されません。塗りに色が設定されていると少し描画時の線が変わることがありますが、基本塗りは無視されると考えてください。・アートボードサイズが大きすぎる。1000×1000pxまでとありますが、当方で900×900pxで動かないことがあったので、アートボードサイズは出来るだけ小さくしたほうが良いです。SVGなので、極端にサイズを小さくしなければ基本描画結果に違いは出ません。パスが小さすぎても動きませんでした。(10px×10px以下くらいで確認)・ファイルサイズが大きすぎる。ファイルサイズが大きいと変換時にエラーが出るので、まずコードすら生成できないと思います。40kb以上はダメだと書いてありますが、それ以下でもエラーになることがあります。(特にテキストで文字数が多い場合は、パスが複雑で膨大になるのでコンバーターが対応できないようです。)・アウトライン化していない。(テキストの場合)要素の線上で右クリック→「アウトラインを作成」して、線に色を設定してください。描画が一筆書きのようにならない。描いた順にパス・アウトラインを描画しますので、ブラシやテキストツール・多角形ツールなどで描いた線は二重になったり、一気に描画されたりします。一本線で一筆書きのようにしたい場合は、描画したい画像を一度形作ってから、ペンツールでトレースしてください。まとめいかがでしょうか?上手く動きましたか?私はSVGファイルの作成でかなりつまずいてしまいました。制限が多いので少し気を付けなければいけませんが、手軽にアニメーションが導入できてとても便利ですね。PainterはMITライセンスです。誰でも自由に無料で使えますが、jsとコンバーターで生成したコード内の著作権表示だけは消さないようにしましょう。