Our Story's Diary

こころを動かされたものと、動いたこころのこと

このサイトで使用しているWeb技術の備忘録(WordPress, jQuery, CSS)

 常日頃からWebで適当に検索して当たった記事に助けられ続けているWebコーダーとして、たまには技術の共有でもしようと思ったのですが、単独記事としてまとめる説明力がないので適当に殴り書き。

 思いついた時や思い出した時に更新していきます。需要があれば詳しく書くこともあるかも。

 ※PHPに詳しくないためにjQueryで強引に何とかしている場合が多いので、パフォーマンスをミリ秒単位で上げたい方には向いていません。あくまでその場しのぎです。

 

LazyLoadで後から画像を読み込む際に、要素内スクロールでは読み込みを開始しない

 画像の読み込みを遅らせてサイトの読み込みを高速化するLazyLoad技術。プラグインまたはJavaScriptライブラリを使って導入しているサイトは(WordPress以外でも)多いはずです。

 ところが思わぬ落とし穴があって、overflow: scrollを設定したポップアップ要素でスクロールしても読み込みが始まらない。

nav {
	position: fixed;
	width: 100%;
	height: calc(100% - 30px);
	top: 30px;
	overflow-y: auto;
	z-index: 9999;
}

 例えばこのサイトで言えば上のコードのようになっているスマホ版のメニューの場合がそうで、PCではサイドバーにあるAmazon商品やYouTubeなどのサムネイルがいつまで経っても読み込まれずに困ってしまいました。

 理由はlazyloadプラグインが「bodyでスクロールイベントが発生した時に画像が見えていたら」というような判定を行っているからだと推測しますが、プラグインの方を弄るのは大変。

 ということで解決法は強引に。

$('#recommend, #now, nav').on('scroll', function(){ // overflow: scrollを設定している要素でスクロールイベントが発生した時に
	$('body,html').trigger("scroll"); //bodyでもスクロールイベントを強制発火
})

 これだけ。triggerはこういう力技でどうにかしたい時に何かと威力を発揮します。本当はもっとスマートなやり方もあるのでしょうが。

 

WordPressのoEmbedなどiframe内のリンクではPjaxが機能しない

 このサイトではページ遷移に「Barba.js」を利用し、サイト内リンクではシームレスに移動するようになっています。

Pjax(非同期画面遷移)でシームレスな画面遷移ができるBarba.js

 Barba.jsについては上の記事など様々な解説があるので割愛。

 ところで、WordPressでは、サイト内記事やYouTubeなど、特定のURLを書き込むと自動でブログカードに変換してくれる機能があります。

Surface Pro 4と一緒に使って良かったものをまとめて紹介

 これが非常に便利だと気づいて使ってみたのですが、どうやらiframe内で呼び出しているリンクではbarba.jsが反応せず、通常のリンクと同様に再読み込みが発生してしまうことがわかりました。

 PHPから触ればどうにかなるのかもしれませんが、よくわからなかったので、呼び出しているiframeの上からaリンクで挟み、before要素でカード全体を押し潰すという力技で解決。

$(window).on('load', function(){
	$('iframe.wp-embedded-content').each(function() {
		var URL = $(this).attr('src').split('/embed')[0] //iframe要素のsrcに付与されるURLから、embed以下を消すと素の記事URLが取得できる
		$(this).wrap('<a class="wp-embed-link" href="'+URL+'" />') //取得したURL付のリンクで挟み込む
	});
});

 

a.wp-embed-link {
	display: inline-block;
	position: relative;
	transition: opacity 0.3s ease; // マウスオーバー用の設定
}
a.wp-embed-link:hover {
	opacity: 0.7; // マウスオーバー時に薄くする
}
a.wp-embed-link::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

※jsの3行目は、lazyloadプラグインによってはdata-srcにしないと取得できないかもしれません。

 コメント数とブログ名は飾り。共有ボタンは紛らわしいので非表示にしました(これはCSSでdisplay: noneにするだけなので割愛)。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

person Profile

    Stories

  • ボンバーマン記事がSurface記事よりアクセス数で上回ってるー珍しい。どうやらTwitterで少しだけ拡散されたことは知りましたが。追記しとこうかな。

    (2018.08.15 20:02)
  • 1つのコメントや引用ツイートで全否定されてる気分になったり全肯定されてる気分になったりするのだから、コメントすることってやっぱり大事だな……。自分ではどうしてもそういうことが苦手だけど、有名人にリプライしたりするの、ちゃんとやらなきゃいけない気がしてきた。もちろん相手を人間だと思っていない失礼なリプライ送る人は全員ブロックされて然るべきだと思うけれど。

    (2018.08.15 14:57)

About

    Favorite Item List

  • Xbox One S 500GB (Minecraft 同梱版)

    Xbox One S 500GB Minecraft 同梱版 (ZQ9-00068)

    Microsoftのスタイリッシュな次世代機。小型軽量化して4K/HDR映像とUHD BD(4k Blu-ray)に対応。BDプレーヤーとして1台持っておいても損はない。より高性能なゲーム機が欲しいならXbox One Xも。
    レビュー記事

  • Kindle Paperwhite

    Kindle Paperwhite Wi-Fi、ブラック

    何冊も持ち運べて、いつでも読み返せる。片手で読書ができる。使うまではピンと来ないけれど、一度使い始めると手放せない。

  • 青春ブタ野郎はバニーガール先輩の夢を見ない

    青春ブタ野郎はバニーガール先輩の夢を見ない (電撃文庫)

    『さくら荘のペットな彼女』『Just Because!』の鴨志田一さんの傑作ラノベ。学校社会の独特な空気感と、そこに縛られた人々の心理を驚くほど見事に描いています。
    ヒロインたちも全員可愛く、毎巻あっという間に読み終えさせられます。アニメ化も決定し、作品も新展開に突入して今後がますます楽しみなシリーズ。

  • Nintendo Switch (Splatoon2セット)

    Nintendo Switch スプラトゥーン2セット 【Amazon.co.jp限定】オリジナルスマホ壁紙 配信 ・Nintendo Switch Online 「個人プラン3か月(90日間)」利用券付き

    カタチを変えて、どこへでも。軽快に立ち上がって、自宅でも旅行先でもファミレスでもSplatoonが遊べる嬉しさ。

  • Apple AirPods

    Apple AirPods 完全ワイヤレスイヤホン Bluetooth対応 マイク付き MMEF2J/A

    Appleの左右分離型ワイヤレスイヤホン。コードから自由になる解放感、バッテリーの持ちも良好、完全ワイヤレスイヤホンの決定版。Android・Windows・iOSを問わず、一度ペアリングすればどのデバイスともスムーズに切り替えできる、Appleらしからぬ懐の広さも魅力。レビュー記事

  • image (Maison book girl)

    image 【初回限定盤】

    ニューエイジ・ポップ・ユニットMaison book girlのメジャーフルアルバム。変拍子詰め合わせでありながら全く違和感を挟ませない心地良さ。アイドルソングの枠を超えて、現代音楽の最先端を突き進む1枚。

  • ドンキーコング トロピカルフリーズ

    ドンキーコング トロピカルフリーズ - Switch

    ディクシーコングと『スーパードンキーコング2』の作曲者・David Wiseが復活し、ビジュアル・サウンドの両面でレア社時代の空気感を更に強く受け継いだ、2Dアクションとゲーム音楽の最高峰。テンポの良い高難度2DアクションはNintendo Switchとの相性も抜群。

  • Splatoon 2 (スプラトゥーン2)

    Splatoon 2 (スプラトゥーン2)

    ゲームの新たな可能性を提示した、2010年代最高傑作の続編。面白いに決まっているし、Switchごと買わない理由もない。

  • 溺れるナイフ (Blu-ray & DVD)

    溺れるナイフ スタンダード・エディション [DVD]

    めまぐるしく変わるシーンとBGMの妙によって、一瞬たりとも目を離させない密度を持った映画。揺れ動く思春期の少女の感情を見事に描く、山戸結希監督の圧倒的な才能に驚かされます。

  • Surface Pro

    マイクロソフト Surface Pro [サーフェス プロ ノートパソコン] Office H&B搭載 12.3型 Core i5/256GB/8GB FJX-00014

    タブレットにもノートPCにもなる最強ガジェットの最新モデルにして完成形。「これさえあれば何もいらない」のコピー通り。値段も高いですが満足感も非常に高い。
    レビュー記事

  • BOOTLEG

    【早期購入特典あり】BOOTLEG(ブート盤 初回限定)(CD+12inchアナログ盤ジャケット、アートイラスト、ポスター、ダミーレコード)(フィルムシート付)

    米津玄師さん待望の4thアルバム。『LOSER』『ピースサイン』などのシングル曲から『砂の惑星』カバーまで。