[その他] chromeでウェブサイトのモバイル向けソースコードを簡単に見る方法

カテゴリ:
その他
| トラックバック(0)
投稿者:yo yo

chromeキャプチャ画像

ウェブサイトのスマートフォン向けのソースコードを確認する。

  1. ソースコードを開く(Ctrl+U)
  2. デベロッパーツールを開く(Ctrl+Shift+I、もしくはF12)
  3. モバイルプレビュー画面にする(Ctrl+Shift+M)
  4. 再読み込み(Ctrl+R)

[SEO] Google PageSpeed Insightsのモバイルスコアだけ激的に悪い原因

カテゴリ:
SEO
| トラックバック(0)
投稿者:yo yo

Google PageSpeed Insightsのモバイルのスコアが物凄く悪く原因を探っていたらWebフォントの読み込みが原因だったという話。

GoogleのWebフォント Noto Sans Japanese(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css)だった。現代ウェブ版マッチポンプ。スマホのみウェブフォントを使わない設定にするべきか、それともスマホローカルから読み込むようにするべきか。

[Wordpress] REST APIを無効化

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

function.php

/* **************************************************************************
REST API 無効化 htaccessも参照の事
************************************************************************** */
function DRA_only_allow_logged_in_rest_access( $access ) {
    if( ! is_user_logged_in() ) {
        return new WP_Error( 'rest_cannot_access', __( 'Only authenticated users can access the REST API.', 'disable-json-api' ), array( 'status' => rest_authorization_required_code() ) );
    }
    return $access;
}
add_filter( 'rest_authentication_errors', 'DRA_only_allow_logged_in_rest_access' );

.htaccess

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
######
RewriteCond %{REQUEST_URI} !^/wp-json/
RewriteCond %{REQUEST_URI} !^/oembed/
######
RewriteRule . /index.php [L]


# END WordPress

[雑記] キャッシュレス化がもたらすモノ

カテゴリ:
雑記
| トラックバック(0)
投稿者:yo yo

キャッシュレスは便利だけどシステムの運用コストは誰が払うのかって話。

  • 現金を持ちあるかなくて良い(持ち物を減らせる)
  • レジでの支払いがスムーズになり混みにくくなる(時間短縮)
  • お店側がお金の管理をしなくてよくなる(犯罪リスク減少)
  • 店が支払うシステム利用料(ランニングコストがかかる)
  • キャッシュレス会社がクレジットカード会社に支払う手数料(ランニングコストにランニングコストがかかる)
  • 世の中が完全キャッシュレスに移行するまで、現金とキャッシュレスシステム、二つの手間を抱えなくてはならない店の手間。
  • 現金が数字データになった時の信用

[js] HTMLのimgタグを修正せずに別の画像がある場合は置き換える

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo
// JavaScript Document
jQuery(function(){
	jQuery("img").each(function(){
		var target = jQuery(this);
		var src = target.attr("src");
		var src_split = src.split(/(?=\.[^.]+$)/);
		var src_sp = src_split[0] + '-sp' + src_split[1];
		target.attr('data-src', src);
        // ここの部分は
		var img = new Image();
		img.src = src_sp;
		img.onload = function() {
			target.attr('data-sp-src', src_sp);
		}
        //
        /* こういう書き方もできる
            var x = new XMLHttpRequest();
            x.open("HEAD", src_sp, false);
            x.send(null);
            x.status; // 404 or 他を判定
        */
	});
	
	// カスタムイベントで画像切り替えのコードとか
	
});

「ウェブサイトのレスポンシブ化対応などで既存のHTMLを修正したくない。けど、スマホ向け画像があったらそっちを表示させたい。」とかいう場合に使う。Javascriptで画像の有無を調べてある場合はそちらを表示、ない場合は既存を表示させる。

ページの先頭に戻る