技術・Web 4年前

このサイトで使用している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を書き込むと自動でブログカードに変換してくれる機能があります。  これが非常に便利だと気づいて使ってみたのですが、どうやら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にするだけなので割愛)。   ...

comment  0
favorite  0
ひとりごと 4年前

エゴ

お久しぶりです。……3日空いただけで久々だと思うのが重症な感じです。  2/26~28。旅行してました。中学からの友人と。福島。  まあ正直何かの観光の目的があるというわけではなく会話とゲームがメインなので当然のように楽しかったです。  施設自体はまあそんなに……ハワイアンズだったんですけど、プール目当てじゃないなら普通の旅館の方が良いよねという当たり前の感想。  プールもイメージよりは狭かったし、あと寒かった! 屋外プールとか出る気になれなかったので、夏ならもっと楽しいかも。  あと、近くの水族館で、震災後に送られた寄せ書きみたいなのを展示するコーナーがあったんですが、なんかこう、その……  いや、言葉を選ばずにいうと気持ち悪かったですね。とてつもなく気持ち悪かった。  「日本は1つです、力を合わせて頑張りましょう」「一緒に頑張りましょう」みたいな、まあ2011年夏の温度感がそういうものだったのはわかるんですけど、今見ると吐き気しかしない。し、  改めて思い出したのは、やっぱりあの震災がいろいろと2010年代の日本の方向性を(とても悪い方に)決定づけてしまったんだなあという部分で、  日本スゴイ系のバラエティとかニュースサイトがもてはやされるようになったり、嫌韓が当たり前のように根付いてしまったり、安倍政権の明らかにおかしなやり方が受け入れられる空気ができてしまったり、  そういう今の日本の気持ち悪さ、右傾化、みたいなものは全部大震災から始まっていて、そのまま2020に繋がっていくんだろうなあと。  オリンピック後の報道も見てて寒気しかしませんが、ああいうものが最低でもあと2年はもてはやされるのだと思うとうんざりします。その後はどうなるんでしょう。国民の一体感を維持するために戦争でも仕掛けるのかな? さっさと五輪終わってそのまま燃え尽きてくれないかなあ。はあー。うんざり。 --------------------  最近、乃木坂46が凄い来てます。私の中で。なぜか欅から逆行。  もともと、ANN0がそれなりに面白い新内眞衣さんは気になっていて、一時期ラジオ聴いたりもしてたんですが、  この前の『セブンルール』で取り上げられていた齋藤飛鳥さんの、ネガティブを隠さない態度に好感を持ち、しかももえしの推しメンであることが『ドルつか』で発覚してさらに好きになり、  前回の記事で取り上げた伊藤万理華さんのMVも魅力的すぎて、  アルピーのもう1つのレギュラーラジオ『沈黙の金曜日』に出ている中田花奈さんもトークなかなか上手くて……、  ……いやこれだけ好きなメンバーいるなら全然「乃木坂工事中」毎週観たいわってなりました。みんな最高では。  改めてこの前の「はじまりか」MVは、個人PVの枠を超えて、乃木坂、というかアイドルという存在そのものの魅力を伝えているような気がします。  アイドルとファンの関係性について誰かが卑下する必要はないんだという圧倒的な肯定力。 --------------------  椎木里佳さんのnoteが面白かった。  炎上キャラな人がエゴサを止めたという話。

とにかく同世代の子たちに伝えたいのは、 自分のことを批判したり、決めつける人やコミュニティからは、いっそのこと離れること! 勇気がいるし、簡単じゃないけど、わたしみたいに知らず知らずのうちに自分で自分の首をしめてるかもしれないから、気づいたら早いうちに行動することをおすすめします! - 1日3回エゴサをしてた私が、ある日エゴサをやめてみたら幸せになった話|椎木里佳|note
 椎木里佳さんのやっていることとかは別に好きではないし、この記事自体もところどころ鼻につくから好きではないんですが、  こういう椎木里佳さんのような人間がまるで人殺しのように叩かれるインターネットが大嫌いなので私は応援しています。  そして似たような話は先週の『ヨブンのこと』でも。  エゴサーチであったりSNSのコメント機能だったりで、「他者が自分をどう思っているか」について情報を得ることが非常に簡単になりました。  そのことについて、「自分がどう思われているかを直視した方がいい」みたいなことを言う人がいますが、そんなことはなくて、嫌なものから目を背けることは決して弱さや卑怯さではないと思っていますし、そう思って行動していきたいです。 --------------------  3月になりました。  あと31日で人生のモラトリアム期間が終わってしまう~。  ……と、思うし、そんな話を同級生とするのですが、一方で、ええと、、、  たぶん20代のうちにもう1回くらいモラトリアムというか、職探しでフリーになる期間がやってくるんじゃないかというのは、何となく想像しています。  まあ、わからないですけどね。会社の方の都合もあるし、自分自身としても、4月から就職するその会社に、8年いるっていうのは、ちょっと想像がつかない。一生というのはもっとない。  もっと言えば、そんな人生を送りたくはないとも思うし。だから、ちょっと先のことを見据えて無理していかなきゃなあとも思っています。  それはそれとして本当に何もしなくていいのはこの3月だけ! 何とか走っていきます、それしかない、頑張ります、  なんかもう先月くらいにいろいろ書いてたことが、冷静に考えると実現不可能なんじゃないかというモードに入っていて非常に苦しいのですが、ここで一個何か成し遂げるか、逃げてスプラトゥーンに興じるかが自分の人生の分岐点だと思うので、何とかしたいです、、、本当に友達が欲しい、仲間が欲しい、でもいないから一人で頑張らせるしかない。私を。 ...

comment  0
favorite  0