WEB／システム／IT技術ブログ

WSL2でドメイン名が解決できないためアップグレードできない

ある日突然、WSL2でドメイン名が解決できないためにアップグレードできない事象に陥りました。

$ sudo apt-get update
Ign:1 http://archive.ubuntu.com/ubuntu jammy InRelease
Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease
Ign:3 https://ppa.launchpadcontent.net/ondrej/php/ubuntu jammy InRelease
Ign:4 http://archive.ubuntu.com/ubuntu jammy-updates InRelease
Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease
（中略）
Err:5 http://archive.ubuntu.com/ubuntu jammy-backports InRelease
  Temporary failure resolving 'archive.ubuntu.com'
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
34 packages can be upgraded. Run 'apt list --upgradable' to see them.
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-updates/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-backports/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/jammy-security/InRelease  Temporary failure resolving 'security.ubuntu.com'
W: Failed to fetch https://ppa.launchpadcontent.net/ondrej/php/ubuntu/dists/jammy/InRelease  Temporary failure resolving 'ppa.launchpadcontent.net'
W: Some index files failed to download. They have been ignored, or old ones used instead.
「WSL2でドメイン名が解決できないためアップグレードできない」のつづきを読む

ExpoでHello World

Expoを使ってスマホアプリの実装環境を構築してみたいと思います。

個人的にはコンテンツはWebアプリで十分、スマホアプリはコストメリットが少ないという考えです。

  • 市場の大きさはAndroid、iPhoneよりもWebが広い
  • 常にAndroid、iPhoneのバージョン依存に付き合わないといけない開発・運用コスト
  • 公開するための審査のコスト

ただ、知らずして思い込んでいる部分もあるという反省から、アプリ開発にも触れてみようと思います。

今回はアプリ開発の中でもコストを抑えられると「Expo」を使って、React Nativeアプリの開発環境を構築してみます。
Expo
Expo開発には以下のメリットが期待できます

  • iSOやAndroidなどクロスプラットフォーム開発が可能
  • カメラや位置情報機能などを比較的容易に実装できる
  • アプリ公開に必要な審査のサポートがある

ちなみに、以下の環境を前提にご紹介します。

  • Windows 11 Home
  • Node.js 16.18.1
  • npm 8.19.2

※この時点でのExpo CLIがNode.js 17以下にしか対応していないという事で、意図的にNode.jsのバージョンを落としています。

「ExpoでHello World」のつづきを読む

Googleカレンダーに誕生日が表示されない

Googleカレンダーに誕生日が表示されない時の対処法です。

知人に「Googleカレンダーで、連絡先に登録した誕生日を表示させたい」といった相談を受けました。
私は、簡単にできるといってその方法を教えようとしましたが、実際にやってみると意外と難しかったので、そのときのメモです。

ちなみに、私も知人も、Googleアカウント使用歴は10年以上で、連絡先は電話番号の保存程度にしか活用してませんでした。
恐らく、10年ほどこれらの設定まわりを放置してたことが、今回の問題の原因だと考えられるため、事象としてはレアケースかもしれません。

マイカレンダーに「誕生日」がない

「Googleカレンダーに誕生日が表示されない」でWebを検索すると「マイカレンダーの誕生日にチェックを入れると表示される」といった記事を見かけますが、我々のマイカレンダーの選択肢には「誕生日」がありません。

原因は不明ですが、以下の方法で選択肢に「誕生日」を表示させることができます。

「Googleカレンダーに誕生日が表示されない」のつづきを読む

Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え

Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え時の作業メモです。

Googleより、2023/7/1にUAのサポートを終了するという発表がありました。
ユニバーサル アナリティクスのサポートは終了します – アナリティクス ヘルプ

サポート期限までに、次世代の解析ツールであるGA4に切り替えましょうという案内があるので、今回はその対応をします。
ちなみに、対象サイトはUAとGoogleタグマネージャー（GTM）を利用中であることを前提とします。また、UAとGA4は平行して利用可能ということなので、現時点で利用中のUAは残したまま、GA4を新規導入したいと思います。

GA4のプロパティを新規作成

まず、GA4のプロパティを新規作成するためにGoogle Analyticsに移動します。
Google Analytics
UA利用中のアカウントを開くと、ヘッダ部分に
「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでに Google アナリティクス 4 プロパティに切り替えて設定を進めておきましょう。」
といったアラートメッセージが表示されているので（※2022年8月時点）、その帯の「開始」ボタンをクリックします。
すると以下の画面が表示されるので、タイトル部分の「未接続」であることを確認して、「新しい Google アナリティクス 4 プロパティを作成する」の「はじめに」ボタンをクリックします。

モーダルが開き、注意事項が記載されてるので、その内容を確認して「プロパティを作成」をクリックします。
すると、先ほどの「未接続」が「接続済み」になりました。

「Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え」のつづきを読む

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグします。

日頃、VSCodeの「PHP Debug」を使ってデバッグを行っていたのですが、WSL2とDockerの環境下ではちょっとした設定が必要だったので、メモとして残しておきます。

ちなみに今回、以下の環境で実現しました。

  • Docker Engine 20.10.17
  • PHP 7.3.33
  • Xdebug 3.1.5
  • Windows 11 Home
  • Ubuntu 22.04
  • Visual Studio Code 1.63.2

WSL2でUbuntu上にソースを展開し、Dockerでマウントして開発しているプロジェクトを想定しています。

Xdebugのインストール

DockerのPHPコンテナにXdebugがインストールされてない場合、以下のコマンドでインストールします。

# pecl install xdebug && docker-php-ext-enable xdebug

Dockerfileに以下を追記すれば、未インストール時にインストールできます。

RUN bash -c '[[ -n "$(pecl list | grep xdebug)" ]]\
  || (pecl install xdebug && docker-php-ext-enable xdebug)'
「WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする」のつづきを読む

TanStack TableのReact Tableでリッチなテーブルを実装してみる

TanStack TableのReact Tableでリッチなテーブルを実装してみます。
TanStack | High Quality Open-Source Software for Web Developers

あるプロジェクトで脱jQueryの流れがあり、jQueryベースのプラグイン「DataTables」に代わるライブラリを探していて、React Tableにたどり着きました。

本記事の内容は、ほとんど公式サイトのガイド通り、かつ、雑な解説となっておりますが、、初導入時の記憶としてメモを残したいと思います。

  • React 18.1
  • React Table 8.2.2

ここではユーザ情報ををTableで表示する、シンプルな例を取り上げます。
また、コード量が多くなるので、要点を絞り紹介しています。

React Tableのインストール

npmコマンドを使ってReact Tableをインストールします。

$ npm install @tanstack/react-table
「TanStack TableのReact Tableでリッチなテーブルを実装してみる」のつづきを読む

LaravelでPHPUnitを使ったHTTPテスト

Laravelにデフォルトで組み込まれている「PHPUnit」を使ってユニットテスト（単体テスト）を実施してみます。
今回は、Webアプリケーションに正しくアクセスできているか、HTTPテストを実施します。

公開済みのLaravelプロジェクトを対象とします。

  • Laravel 7.30.6
  • PHPUnit 8.5.31

テスト用スクリプトの用意

テスト用スクリプトは、サンプル「tests/Feature/ExampleTest.php」が用意されているので、これを複製し、例えば「HelloTest.php」として以下のファイルを作成します。

namespace Tests\Feature;

use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;

class HelloTest extends TestCase
{
	public function testBasicTest()
	{
		$response = $this->get('/');
		$response->assertStatus(200);

		$response = $this->get('/about');
		$response->assertStatus(200);

		$response = $this->get('/contact');
		$response->assertStatus(200);
...
	}
}

このように記述する事で、例えばページ「/about」にリクエストした際に、正常にアクセスできているか、つまりステータスコード200を返しているかどうかテストする事ができます。
コンテンツリストやサイトマップなど仕様書から、全ページ分のコードを記述します。

「LaravelでPHPUnitを使ったHTTPテスト」のつづきを読む

Laravelサイト内で認証済みユーザのみにAPIを提供する方法

Laravelサイト内で認証済みユーザのみにAPIを提供する方法です。

以前に、Laravelサイト内外問わず、APIで認証機能を提供するしくみとしてPassportを紹介しました。
LaravelでPassportパッケージ（OAuth2）を使用したAPI認証を構築

今回は、PassportではなくSessionを用いて、Laravelサイト内に限定し、かつ、認証済みのユーザのみにAPIを提供する方法を紹介します。
SPAではないが、パフォーマンス的に部分的にAPIで情報を提供する際に有効です。

  • PHP 7.3.33
  • Laravel 6.20.44

APIでセッション認証の有効化

まず「config/auth.php」を開き、apiのドライバをwebと同じ「session」にします。

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
    ],
「Laravelサイト内で認証済みユーザのみにAPIを提供する方法」のつづきを読む

GitHub Actionsを使ってレンタルサーバに自動デプロイ

GitHub Actionsを使ってレンタルサーバに自動でデプロイします。
これまで、GitHubで管理しているソースをコミット、プッシュした後、その差分を手動FTPでサーバにアップしてましたが、その部分を自動化したいと思います。

GitHub Actionsのドキュメント – GitHub Docs

ここでは、デプロイ対象のGitHubリポジトリとデプロイ先のレンタルサーバは、既存のものを利用します。

ワークフローファイル作成

GitHub Actionsの動作を設定するワークフローファイルを作成します。
今回は単純に、masterブランチにpushがあったら、ファイルをレンタルサーバにFTPアップロードします。

name: deploy
on:
  push:
    branches: [master]
jobs:
  web-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: get lastest code
        uses: actions/checkout@v3
      - name: sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}

「name」は任意です。「runs-on」にはデプロイ環境を指定します。
FTPにはGitHub – SamKirkland/FTP-Deploy-Actionを使用します。
FTPのユーザ名やパスワードなどをコードに書くことはセキュリティ的にリスクがあるので、環境変数を使用します。

「GitHub Actionsを使ってレンタルサーバに自動デプロイ」のつづきを読む

Laravelでコレクション多次元データから任意のキーのみ取り出す方法

Laravelで多次元データから任意のキーのみ取り出す方法です。

例えば、ユーザテーブルから複雑なクエリビルダで以下のデータを取得したとします。

$users = User::get_fukuzatsu();
Log::debug($users);

[
	{
		"id": 1,
		"name": "山田太郎",
		"kana": "ヤマダタロウ",
		"tel": "11122223333",
		"age": 30,
		"sex": 1,
		"mail": "taro@xxxxx"
		"postcode": "1112222",
		...
	},
	{
		"id": 2,
		"name": "山田花子",
		"kana": "ヤマダハナコ",
		"tel": "44455556666",
		"age": 25,
		"sex": 2,
		"mail": "hanako@xxxxx"
		"postcode": "4445555",
		...
	},
	...
]

このデータの電話番号など一部データを、APIで外部に展開します。ここで、以下の課題があります。

  • 全てのデータを出すにはデータ量が多い
  • プライバシーポリシー的に出せない情報がある
  • だからと言って、クエリビルダが複雑な事もあり、電話番号などキーを絞ったクエリ「get_fukuzatsu2」などを複製するのもスマートじゃない
「Laravelでコレクション多次元データから任意のキーのみ取り出す方法」のつづきを読む

Monthly Archives