検証、SNSボタンとAdSenseがPageSpeed Insightsに与える影響
検証第1回では、外部スクリプト(SNSボタンとGoogle AdSense)がDOMContentsLoadedとLoad時間に与える影響を調べましたが、第2回の今回はPageSpeed Insightsの影響を調べます。 実験3. 外部スクリプトによる各指標の変化 とある記事において以下の2つの状…続きを読む
SNSシェアボタンとAdSenseがページ表示スピード(DOMContentLoadedとLoad)に与える影響を検証した
SNSシェアボタンとAdSenseが表示スピードにだいぶ悪い影響を与えている事は知っているのですが、急にそれがどれ程なのかが気になったので実験しました。まぁブログ運営上この2つを外すという選択はとれないのですが、純粋に知的好奇心によるものです。 第1回の今回は、DOMContentLoadedとLo…続きを読む
とあるUX屋の転職活動ふりかえり2019-2020
人生2回目となる転職をします。2020年4月から新しい会社です。ドキドキです。 しかし3月中旬現在、コロナウィルスの影響による自宅軟禁のせいで、PCの返却や書類提出などの物理プロセスが全く進捗していません。本当に俺は退職できるのでしょうか。 世間はワニの話題で持ちきりですねぇ。一方で自分が｢#10日…続きを読む
TeamsアプリのUI要素サイズを解析する – UIトレースその4
久しぶりにUIのトレースをしました。今回は仕事で使いまくっているMicrosoftのTeamsです。iOS版。 休日ぶっ潰してまでこれをやるモチベーションが何なのか未だに言語化できませんが、やってしまったので公開します。 さて今回はMS製品を選んでみました。 デザイナー界隈、というか自分の周りでは相…続きを読む
Twitter(ブラウザ版)のサイドカラムのような｢下にも上にもくっつく｣サイドバーの実装方法
PCブラウザ版Twitterのサイドカラムの挙動を実装します。 下方向にスクロールする時は、 上方向にスクロールする時は、 その間の場合は、 2020年3月時点のUIです。将来挙動は変わるかもしれません。 仕様はこうです。 下方スクロール時は、下端がFixedするまで下方スクロール 上方スクロール時…続きを読む
Kazuki Yamanaka(山中一毅) ウェブサイト 2020リニューアル
ニューヨークでジャズミュージシャンとして活動を続ける山中一毅のウェブサイトをリニューアル制作しました。彼自身の2枚目のアルバム “Dancer In Nirvana” の発売に合わせ、作品の世界観を表現するデザインを意図しました。 デザイナーじゃないのでグラフィック的に大した…続きを読む
WordPress投稿で｢YouTubeの動画URLそのまま貼り付けで自動生成されるプレイヤー｣のサイズを調整する方法
このような方向け WordPress投稿画面にYouTubeの動画URLそのまま貼り付けで生成されるiframeプレイヤーがとにかく扱いづらい かといって、YouTube動画の埋め込みコードを毎回コピペするのが面倒くさい この問題に対し、以下を自動化する事で記事制作コストの低減を目指します。 自動生…続きを読む
PHP7.3にしたらWordPressの表示がむちゃ速くなった話と、バージョンアップ手順について
別案件でWordPress入れた際にPHPのバージョン7.3に上げたら爆速になったので、自分のサイトでもやりたくなりました。 というか、 また、PHP5系は2018年末にサポートが終了して「セキュリティアップデート」すらなくなっています。 2019年4月からWordPressのphpバージョンは5.…続きを読む
PHP7.3に上げてデータベースのパスワードを変更しても解消しなかった｢接続確立エラー｣を何とか解決した闘いの記録
この記事の要諦 ロリポップでWordPressを運営 サーバ契約から10年間放置していたPHPのバージョンをアップしたら、｢データベース接続確立エラー｣。 データベースのパスワード更新するだけでは解決しなかった PHP5.3じゃなく5.2からアップデートしたせいっぽい こちとらデータベースまわりは素…続きを読む
Photoshop v.s. Sketch のjpg出力の画質とファイル容量比較
ブログを運営していると写真のトリミングを行う機会が一般人よりは多いわけですが、今までPhotoshopにお世話になってきました。が、Photoshopは重いので、代わりにSketchで出来たら便利だなぁと思い、jpg出力のサイズでも比較して今後の参考にしようと思います。 比較方法 先日のイスラエル旅…続きを読む
WordPress投稿画面の画像挿入で、imgタグに自動的にloading=”lazy”を加える方法
画像の遅延ロード、Chromeでは標準搭載になりましたし、SEOへの影響も無いという事から今後のスタンダードになるのは間違いない気がしますので、さっさと対応しておきます。 Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に | 海外SEO情報ブログ functi…続きを読む
JSやPHP無しでWordPressのループ内にAdsenseを割り込ませる方法
CSSだけでやります。display:flex を使えば簡単にできてしまいます。 PHP 至って普通のループのコードです。 <main> <?php while (have_posts()) : the_post(); ?> <artcile> // ループ内のコ…続きを読む