独自のサービスを開発しながら、二十数年間のITエンジニアの経験を生かして主に WordPress|CentOS|Ubuntu|Python|React に関する構築・開発の経験と、最新技術の検証・実験をポストしています。
適切なサイズの画像を配信する方法〜PageSpeed Insights〜
PageSpeed Insight でサイトを分析すると、「改善できる項目」に「適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。」と表示された場合の対処方法をご紹介します。本記事の最後にご紹介する他の項目も改善する前提で、パソコンで最大 97 点、モバイルで最大 68 点までアップできます。
「オフスクリーン画像の遅延読み込み」項目を改善する方法〜PageSpeed Insights〜
サイトバーにアフィリエイトサイトの広告を適用中ですが、PageSpeed Insightsの分析結果で「改善できる項目」に入っていましたので、修正した内容を記録しておきます。個人的にはプラグインを使用しないなら Lazysizes を適用し、プラグインを使用するなら Autoptimize を使えば楽かと思います。
「WEB フォント読み込み中のテキストの表示」に対処する方法〜PageSpeed Insights〜
WEBフォントがロード中に表示できない場合、システムフォントを一時的に表示できるよう、font-display:を@font-faceスタイルにスワップすることで、ほとんどの最新ブラウザーでこの問題を回避できますが、全てのブラウザでサポートさせるためWeb Font Loaderを採用します。
JavaScript や CSS の最適化のための Autoptimize プラグインの設定方法
JavaScriptやCSSの最適化はもちろん、Googleフォントの制御、サードパーティのドメインに事前接続設定でサイトのパフォーマンスがさらに向上できます。PageSpeed Insightsのパソコンスコアが60台から最大97点までアップするその一つの方法を公開!GTmetrixでも最大A(93)までアップ!
第三者コードの影響を抑える方法〜PageSpeed Insights〜
AdSenseやGoogleアナリティクスなど、第三者との連携によってサイトのスピードは落ちて行くのですが、第三者コードの影響を抑える ことでサイトのパフォーマンスがさらに向上できます。PageSpeed Insightsのパソコンスコアが60台から最大97点までアップするその一つの方法を公開します。
Lazysizes で アフィリエイト広告画像ファイルの読み込みを遅延させる〜A8.net moshimoなど〜
PageSpeed Insights でサイトを分析する際、「改善できる項目」に「オフスクリーン画像の遅延読み込み」が表示された場合の対処方法を紹介します。Cocoon テーマの「高速化」機能を使用しながら、プラグインを設置せずアフィリエイト広告コードの読み込みを遅延させるときに有効です。
「ブログリーダー」を活用して、ジェイスさんをフォローしませんか?
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
自作アプリ (Kotango / Hajimari) の Privacy Manfest ファイルを作成してアプリの更新まで行いましたので、その手順を共有します。
ReactNative/Expo Bare 環境で、Google Play Console(GPC) にアプリのaabファイルをアップロードしてから下記のような警告が出た場合のシンプルな対処方法をご紹介します。
「暗号化+バックアップ版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。
「復号化+リストア版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。
expo-sqlite を使用すると、WebSQL のような API を通じてクエリできるデータベースにアプリがアクセスできるようになります。 データベースはアプリを再起動しても保持されます。
React Native 用の Speech-to-text ライブラリを用いて、既定の単語をユーザに発音してもらい、その結果をユーザにフィードバックするアプリの一つの機能として実装した実例をご紹介します。
ユーザーに広告を表示するためAdMob モジュールを使用します。すべての広告は Google AdMob ネットワーク経由で配信されるため、Google AdMob アカウントが必要になります。
Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。
Expo Webで開発したWebSiteをGitHub Pagesでホスティングする手順です。カスタム ドメインを使用するためXServerでDNS レコードにCNAME設定し、GitHub Pagesのカスタムドメインの検証まで行います。
MacBook で Safari を開き、[開発] > [デバイス] > [ホスト] に移動する際に、表示される デバイスでWebインスペクタを有効にする 方法です。
Light/Darkテーマを手動で切り替えるメニューの実装方法です。アプリ内のどこにでも実装できます。
自作で利用中のNexus用スニペット。これを参考に自身のスニペットに変更するのも良いかもしれません!また、VSCode用のエクステンションも紹介します。
GET_USERS にマウスオーバーすると、const GET_USERS: TypedDocumentNode<UserQueryQuery, Exact>のようにクエリのタイプが表示されることを確認できたら OK です。
自作アプリ (Kotango / Hajimari) の Privacy Manfest ファイルを作成してアプリの更新まで行いましたので、その手順を共有します。
ReactNative/Expo Bare 環境で、Google Play Console(GPC) にアプリのaabファイルをアップロードしてから下記のような警告が出た場合のシンプルな対処方法をご紹介します。
「暗号化+バックアップ版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。
「復号化+リストア版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。
expo-sqlite を使用すると、WebSQL のような API を通じてクエリできるデータベースにアプリがアクセスできるようになります。 データベースはアプリを再起動しても保持されます。
React Native 用の Speech-to-text ライブラリを用いて、既定の単語をユーザに発音してもらい、その結果をユーザにフィードバックするアプリの一つの機能として実装した実例をご紹介します。
ユーザーに広告を表示するためAdMob モジュールを使用します。すべての広告は Google AdMob ネットワーク経由で配信されるため、Google AdMob アカウントが必要になります。
Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。