FC2ブログプラグインの動作確認をお願いします【あなたのプラグインが動かない理由】

FC2ブログプラグインの動作確認をお願いします【あなたのプラグインが動かない理由】

カスタマイズ
2017/07/19
2
vanillaice (Akira)
vanillaice (Akira)
EducationjQueryトラブル対処初心者向けFC2プラグイン

FC2ブログには プラグイン というのが用意されていますよね。
主にサイドメニュー部に簡単設置できて便利。
そして多種多様なものがあります。
中でも展開型プラグインは人気が高いような気がします。
アーカイブやコメントなどを 折りたたむ系 ですね。

公式プラグインというのはJS(Javascript じゃばすくりぷと)を極力使わない というのが制作理念のようです。
従って大変シンプルなものが多い。
一方、有志ユーザーさんが提供するところの共有プラグインは、動きなんかがちょっとリッチと言うんでしょうかね。
JSを利用したものも多くあります。

ここで本題ですが。
そのプラグインはテンプレート上で正しく動作していますか?
というのを一度確認してほしいんですね。
何故かというと、
jQueryを利用している場合、既に規格外になっていることがある
からです。

予告。
今回の記事もゴチャゴチャ長いよ (▪⌔▪)

jQueryにはバージョンがあります

JSというのは現在では各ブラウザに当たり前に組み込まれていますが、通常のJSは ネイティブJS あるいは Vanilla JS(ばにら じぇいえす) とも呼ばれます。
これは jQuery(じぇいくえりぃ) と区別するためにそう呼ばれるようになったんですね。

ネイティブJSというのは大変難解です。
とても素人が手出しできる代物ではない。
jQueryというのはその超難解なJSをわかりやすくしてくれるフレームワークです。
通訳みたいな感じと思えば良いかと思います。

* Framework(ふれーむわーく) = システムを簡略化する枠組みプログラム

で、jQueryというのはフレームワークですから、動かすためのファイルが必要です。
みなさんがお使いのテンプレートが最近のものであれば、htmlソースの中に大抵含まれてます。
既に含まれている
という点が大事。
絶対ではないですよ?
テンプレートによってはjQueryを利用せず、ネイティブで書いてある 親切 なものもあるかと思います。
「親切」に下線を引きましたが、何故かというと
jQueryにはバージョンがあるから です。
バージョンがある、ということはですね
アップデートやアップグレードなどがある わけです。

パソコンでもスマホでも「アップデートしたら動作おかしなった (;ωq`)」とか「アプリ動かないよぅ (;ωq`)」とかってのがあります。
大抵の方が経験しているはず(笑)
jQueryでもやはりそれは起こる んです。
「ネイティブJSが親切」の理由はバージョンに左右されることがないから です。

テンプレート内でのjQueryバージョン衝突

バージョンが存在する、という観点からすると、ネイティブJS利用は「親切」ですが、
可読性・メンテナンス性、という別の観点からすると、jQueryの方が逆に「親切」。
何故かというと、みなさんテンプレートのカスタマイズをされるわけなんですよ。
例えば「スライダーの速度を変える」とか。
ネイティブJSの場合はそれすらとっても難しいんです。
ですがそのコードがjQueryのコードであるならば、全く知識の無い方でも比較的容易に変更が可能。
そういった事情から、現存「最新」と言えるテンプレートにJSが含まれている場合、まずそのほとんどがjQueryを利用しています。
共有テンプレートに限らず、公式のものでもやはりjQueryが使われています。
というわけで、あなたが使っているテンプレートが…

  • HTML5である = リリース時期が比較的新しい
  • スライダーやページ内スクロールなど凝った演出が施されている = jQuery利用の可能性が高い

上記に該当するのであれば、テンプレートには既にjQueryが含まれています。
ソース内から探すのであれば jquery の文字列をCtrl+F(Windows)/ Command+F(Mac)キー検索。

html5テンプレートなら比較的新しいと書きましたが、現在新たにリリースするのにわざわざhtml4で構成することってまず無いと思うんですよ。
現況のweb標準はhtml5であって、html4は現在は既に水準外になっているわけなので。
html4テンプレ = リリース時期が古い(2010年ぐらいまで?)
という予測は立つかと思います。
まぁ絶対とは言いませんが。
いずれにしろ勧告が済んでいる以上html5であるに越したことはありません。

* 勧告 = web技術の標準規格制定

ここから大事。というか本題。
今までは余談(えぇ?!)
私いつもこんな感じなので付いてきてね (´・ω・`)

テンプレート構造がどうなっているかを調べる時、管理画面を開いてCtrl+F(Windows)/ Command+F(Mac)キー検索しますよね。
ですがこれでわかるのは テンプレートの内容のみで、プラグインのソース内容まではわかりません
FC2ブログの プラグインというのはテンプレートとは全く関係ありません
テンプレート内容にはプラグインを取り込む独自変数が記されているだけ。
プラグインのソース内容を知るには各プラグインを調べる必要があります

で、
プラグインにjQueryファイルが含まれていることがある んですね。これ。
ところが先に述べたようにjQueryというのは常に進化し続けていますので、アップデートやアップグレードというのが頻繁に行われています。
現在だとグレードは 3 です。
細かいバージョンを言うと現時点だと 3.2.1

プラグインってね、そう滅多に作者さんもアップデートしないでしょう? (´・ω・`)
もしかすると バージョンの 1 とか、そういう古いのがそのまま利用されていたりするわけなんですよ。
そしてそもそもjQueryファイルというのはパソコンやスマホのOSなんかと一緒で、原則として一つしか利用しない んです。
jQueryファイルというのは「枠組み」なわけで、jQueryを動かすエンジンみたいなもの。
車だってエンジン3つも4つも積むことは無いわけで。

テンプレート内のjQueryとプラグイン内のjQueryが衝突

することになります。

jQueryはアップグレードの度に多くの追加要素、多くの廃止要素があります
ですから、「過去に動いていたスライダーなどが動かなくなった。」なんてのはしょっちゅう起こります。
jQueryのバージョンというのはとても重要なんですね。

仮にテンプレ内のjQueryとプラグイン内のそれが同じバージョンだった場合はセーフ。
セーフだけれども 無駄

jQueryファイルが重複している場合

例えばバージョン2とバージョン3が混在していたとします。
2 → 3 への移行でも多くの追加・廃止が行われています。
混在している場合、双方が互いに内容を補完し合ってくれれば良いと思いますが、実際にはそういった都合の良いことは起こりません。
html構造でより後方に記述されている方が、前方の内容を上書きします
上書きです。マージ(混合)でなく上書き。
内容が刷新されてしまうわけです。
前章で「同バージョンならセーフだけど無駄」と書きましたが、前方ファイルが全く同じ内容の後方ファイルによって上書きされるわけですから、無駄にもほどがある。

バージョンが異なる場合。
テンプレート内のjQueryファイルは場合によっては head情報内 に書いてあるかもしれません。
head情報というのはhtmlの書き始めに位置しますので、この場合にはプラグインよりも「前方」に存在することになります。
つまり
有効になるのはプラグイン側のjQuery
ということになります。
するってーと?
「プラグインは動作するけどテンプレートのスライダーの動きがなんかヘン…。」
みたいなことになるかもですね。

また別のテンプレートではjQueryファイルが body終了タグ直前 に書いてあるかもしれません。
body終了タグ(</body>)というのはhtmlの最後方に位置しますので、この場合にはプラグインよりも「後方」となります。
つまり
有効になるのはテンプレート側のjQuery
ですから、「アーカイブプラグインが折りたたまれない!クリックしても反応しない!」
とかね。そういうことが起こり得ます。

テンプレート優先かプラグイン優先か

「テンプレートを変えたらプラグインが動かなくなりました…。」
という原因のほとんどがこれです。
jQueryの重複・バージョン違い。
もちろん
「テンプレートをDLしましたが、これって不具合じゃないですか?」
とかも同様。
jQuery重複によってプラグインがテンプレートに害をもたらしているパターン。
もちろん絶対ではないです。私の場合は自分のポカとか結構多いので ←

じゃあどうるか、なんだけれども。

  • テンプレートとプラグインが共存できるバージョンを探す
    → ひとつづつバージョンを当てはめ、逐一確認 = 手間がかかります。
  • マージする
    → 知識が無いとかなり難しいです。
  • テンプレートかプラグインか二者択一
    → 割り切りが必要ですがこれが一番楽。

もうこの三択ですね (´・ω・`)
私のおすすめとしては
jQueryを使用していないプラグインを選びなおす
これです。
作者さんがマメで、常に最新jQueryへの書き換えを行ってくれている場合を除いては、単体プラグインにjQueryが適用されていないことが望ましい。
どっちが主役か、ってことなんですよ。
プラグインというのは主役となり得るか、を考えた時、やっぱそれは違うんじゃないか。
かといってテンプレートが主役ってわけでもない。
主役はみなさんが書く「記事」です。もちろん。
ただ、テンプレートは 全体の器。プラグインは 一部要素の器 ですよね。

最後に

これは余談ですが、JSの質問をする際に
ジャバが〜, ジャバの〜
という表現をする方がいらっしゃいますが、一般的に「ジャバ, java」と言った場合それは Javascriptのことを指しません
ジャバというのは オラクルジャバ (Oracle社の Javaプラットフォーム) のことです。
Javascriptはスクリプト言語ですが、javaはプログラミング言語。
「脆弱性が〜, セキュリティが〜」と言われるのは後者のオラクルjavaのことです。
誤解を招く用語ですので、javascriptについては JS と表現されると円滑に進むかと思います。

Related post

Comments  2

hige
2017/08/18 (Fri) 16:52

プラグインとか

 使用者側で注意することはあるんでしょうが、今回Akira氏が指摘されていることは難しい部類じゃないんでしょうか。
 Akira氏のこの記事を見て少しでも啓蒙される方があるのを期待します。

 それ以外で、プラグインもそうなんですが、テンプレートに記述されているJSとかを保存されているファイルが削除されて、変なサイトへ飛ばされるという例がありました。
 変なサイトと言うより、そのファイルはありませんという表示なんですが、ネットの表示は日本語での表示が不親切なんですよね。
 ネットの常識単語が理解できない素人なんか知らねぇ。
 FC2にそんなテンプレやプラグインの削除を依頼しましたが放置されました。
 こんなのも、あるということで。
 

vanillaice (Akira)
Akira
2017/08/18 (Fri) 18:07

To higeさん

こんにちは (●'0'●)/
お盆はゆっくり過ごされましたか? :)

こういう仕様は知ってなきゃわからないですよね。
当たり前だけど(笑)
で、困った〜困った〜なんでや〜、で1週間過ぎちゃった、とか (´・ω・`)
html5時代に突入してプラグイン内容でチェックしたいのは
・ jQueryファイルが含まれていないかどうか(含まれているものは避ける)
・ リンクのaタグを開閉などのJS動作に用いていないかどうか(用いているものは避ける)
この2点ですね。個人的に。
特にaタグはJSでなにかしらの動作に割り当てられていることが多いので衝突しますし
(クリック拡大系スクリプトなど)
rel属性の定義が大きく変わっていますので、aタグの流用は絶対避けたいところ。

スクリプトファイルの「置き場」というのはとっても大事で。
現在だとSSL化のこともありますので、スクリプトが外部に置いてあるとしたら、そのサーバー自体はどうなっているのか。
そして無効化されたサービスがあればそれは即刻削除をしないといけませんね (´・ω・`)
私も経験しましたが、GoogleのRSSに関するAPIがサービス終了しました。
こういう外部のスクリプトに頼っているものを放置すると、higeさんがご指摘のように悪質と思われるサイトに飛ばされるようになったり。
あるいはサイト自体の表示がめちゃくちゃ遅くなってしまったり。
ですから外部スクリプトを入れている以上、放置は絶対によろしくありません。
誤解を恐れずに言えば、「稼働している製作者のものから選べ」とも言えます。
FC2運営はよほどのことがなければ自主的に削除や整理はしませんよね (´・ω・`)

つか、なげーよ((((笑)
いつも長くなっちゃうね。ごめんなさい ^^;

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)