技術・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
技術・Web 6年前

Windows 10 アプリの半角英数での記号入力がおかしくなる問題と対処法

日本時間8月3日についに正式公開されたWindows10 Anniversary Update。  うちのSurface Pro 4も配信開始直後にアップグレードアシスタントを使って意気揚々とアップデートしました。  基本的には良くなってて大満足なのですが、  アプデによって一部の設定がリセットされるという不具合?仕様?があるようです。  とはいっても既定のアプリとかContinuumの挙動とか、大したことないものが多いのですが、  一つだけ意味の分からない不具合が起きまして、  それがこの記事タイトルの、「Windows10 アプリ(UWPアプリ)で半角入力にした時だけ記号の入力がおかしくなる」というもの。    WordやChromeなどのデスクトップアプリでは、問題なく入力できるし、  全角入力時は何も起きないが、  Microsoft EdgeやTwitterを開いて半角入力に切り替えたところで、  [ キーを押したら ] が入力される。  ] キーを押したら \ キーが入力される。  全く意味がわからない。  その後もいろいろ触っているうちに、Shift+2を押したら “ ではなく @ が入力されることがわかり、  このあたりで、どうやらUSキーボード配列と認識されているのではないか、と推測しました。  ……しかし、「半角英数入力時のみ」「UWPアプリ時のみ」という狭い条件でのキーボード認識バグなんてのは、全く聞いたことがないし、検索しても全然出てきません。  デバイスドライバーの更新とか、何となく追加してあった英語言語パックの削除とか、いろいろ試してみて、  最終的に何とか対処法を突き止めました。私以外の環境でも同様の結果になるかは不明ですが、一応書いておきます。  参考までに私の環境は Surface Pro 4 + TypeCover(日本語)です。つまりアップグレードではなくWindows10プリインストール端末だし、Bluetoothキーボードでもありません。    

認識バグの対処法

 まず、「言語と地域の設定」を開きます。  Windowsユーザーにとってはまず「設定アプリ」を開いてから階層で探っていく方がお馴染みかもしれませんが、  ここは説明が楽なので  
thumb-5561181  検索(Cortana)欄に「言語」と入力。これで行きましょう。  検索を呼び出すショートカットは「Windows+S」。  ドキュメントのところはプライベートなファイル名が表示されるので隠してあります。   image_thumb-1-4331486  こういう画面が表示されたら、「日本語」をクリック(またはタッチ)。   2_thumb-7837522  オプションを選択。   3_thumb-1682766  明らかにおかしい。絶対これのせい。  というわけで「レイアウトを変更する」をクリック。  4_thumb-7350646  これで「日本語キーボード」を選択して一度サインアウト。  すると、ちゃんとUWPアプリで半角入力しても日本語キーボードに準拠した記号入力ができるようになりました。  以上です。やり方自体は単純でした。  --------------------  正直なところ何が悪かったのかはさっぱりわかりません。  言語ごとのオプションなんて今まで弄った記憶もないので、アップデート以前からこういう設定だったのかどうかも不明……。  Surfaceでのみ起きるのか、どのPCでも起きるのかも不明だし、Twitterで軽く検索かけても全然ヒットしないので、同じ症状の方が果たして存在するのかも不安ですが、誰かしらの参考になれば幸いです。   --------------------  余談ですけど、今回のこの説明記事、Anniversary Updateで追加されたWindows Ink「画面スケッチ」の機能を使ったのですが、これ便利すぎてヤバいですね。  タスクバー右側のアイコン欄、キーボードの左隣のアイコンから呼び出せます。  名前的にペンデバイスがないと使えないように見えますが、Snipping Toolの進化形ですよこれ。  もちろんペンデバイスがあると最強。  今までは「スクリーンショットの一部を切り抜いてペンで注釈をつける」というだけの動作も、OneNoteやペイントなどの別アプリを経由しないと行えなかったのですが、これで一発。  欲を言えばEdgeやOneNoteみたいにキーボードからの入力や図形も入れられると嬉しい……。けどそこまでするならOneNote開けってことなのかな。 ...

comment  2
favorite  3