いいねボタンやLTGMボタンのようなブログパーツ、ガジェット等
自分で作った、javascriptタグを他のサイトに埋め込んで使ってもらう時、色々心配ごとが多いですよね。。
そんな時に僕が気をつけていることをざっくりですが書かせていただきました。
※Adventカレンダー初投稿です。。お手柔らかに。汗 あと滑り込みすみません、、、！
ズバリ気をつけていること..
更新性
外部サイトにjsを埋め込んでもらったあとに、
「やべ...これって外部サイト側のタグ自体を修正しないと
」
ってことにならないように、サーバーサイド側で修正もできるようにしておく。
GAタグ等を参考にこれぐらいにしてサーバーサイドで更新できるようにしておく。
<!-- 埋め込みjsタグ -->
<script async src="https://example.jp/jstag?id=12345"></script>
<script type='text/javascript'>
hogetag('config', 'ABCDE')
</script>
※個人的にscript type="text/javascript"を記載すると安心できますがhtml5から記載しなくてもデフォルトでその設定なので今回は記述しません。
ここでまたjsの読み込みタイミングに気をつける。
asyncで非同期で読み込んでOKなものか、
deferでhtmlが完全に読み込み終わった後に実行するのか、
もしくはjsタグがある任意のタイミングか、、等。
こちら記事がとてもわかりやすくなってまとめて頂いているのでご参考に。
作ったjsタグが原因で外部サイト側に迷惑をかけてしまわないように..
jQuery等、他のライブラリに依存しないよう純粋なjavascriptで書く
よくjqueryが使われていることが多いですが、jqueryライブラリや他のjsライブラリがなくても
動くようにピュアなjsで書くことをおすすめします。
別ライブラリ等使うとそのライブラリが更新性も意識しないといけなくなるため。
スコープを使って埋め込み先のサイトの変数や関数等と衝突しないように気をつける
スコープをつけずにcheck()等の関数名を作ってしまうと、すでにその関数が外部サイトで使われていて、
jsエラーってなんてこともありえます。。汗
最初の例では、hogetag()という名前で作ってしまっていますが、
即時関数で絶対領域を作り、関数内でしか操作できないようにするということできます。
まさに、埋め込みjsタグの為にあるのでは！と思ってしまいます。
(function () {
//jsタグのメイン処理等
}());
js即時関数についてはこちらの記事がとても参考になります。
※もちろんjavascriptの予約語にも気をつけよう。→参考
セキュアになっているか
- もちろん通信はhttpsで（https://の外部サイトにhttp://のjsタグや画像があるとエラーになります。。）
- ブラウザの見える範囲で、改ざんできるような重要なクエリ等入れていないか等。（サーバーサイドのphp等で大事なところは見えないように等）
読み込みに時間がかからないように、またはかかっても良いように作る
- でかい画像を読み込んでないか
- cssファイルが重い処理はないか
- ajax通信などリクエスト数が多くないか等。
- キャッシュをうまく使っているか等（クエリに時間
?t=1608562686などいれて適宜キャッシュを更新する等）
jsタグで生成するnode（htmlタグ）等は適切か
W3C等参考に、とりあえずdivになっていないか等。
難読化＆軽量化する
jsタグがある程度完成したら、
難読化してリバースエンジニアリング対策や、
jsタグの読み込み速度UPのために、軽量化も検討してみてはいかがでしょうか？
また、かっこよくcopyrightをつけたりｗ
難読化/軽量化できるサイト
各ブラウザでチェック
有名な下記ブラウザチェックツールを使うと楽できると思います。
※無料版と有料版あり
- BrowserStack https://www.browserstack.com/
- Browserling https://www.browserling.com/
またスマホ向けの場合は、xcodeのiOSシミュレータや、Androidエミュレータでもテストできますが、
実機とjsの挙動が変わることがあるので実機でテストするのをおすすめします。
最後まで読んでいただきありがとうございました！
