Googleカレンダーに誕生日が表示されない時の対処法です。
知人に「Googleカレンダーで、連絡先に登録した誕生日を表示させたい」といった相談を受けました。
私は、簡単にできるといってその方法を教えようとしましたが、実際にやってみると意外と難しかったので、そのときのメモです。
ちなみに、私も知人も、Googleアカウント使用歴は10年以上で、連絡先は電話番号の保存程度にしか活用してませんでした。
恐らく、10年ほどこれらの設定まわりを放置してたことが、今回の問題の原因だと考えられるため、事象としてはレアケースかもしれません。
「Googleカレンダーに誕生日が表示されない」でWebを検索すると「マイカレンダーの誕生日にチェックを入れると表示される」といった記事を見かけますが、我々のマイカレンダーの選択肢には「誕生日」がありません。
原因は不明ですが、以下の方法で選択肢に「誕生日」を表示させることができます。
Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え時の作業メモです。
Googleより、2023/7/1にUAのサポートを終了するという発表がありました。
ユニバーサル アナリティクスのサポートは終了します – アナリティクス ヘルプ
サポート期限までに、次世代の解析ツールであるGA4に切り替えましょうという案内があるので、今回はその対応をします。
ちなみに、対象サイトはUAとGoogleタグマネージャー（GTM）を利用中であることを前提とします。また、UAとGA4は平行して利用可能ということなので、現時点で利用中のUAは残したまま、GA4を新規導入したいと思います。
まず、GA4のプロパティを新規作成するためにGoogle Analyticsに移動します。
Google Analytics
UA利用中のアカウントを開くと、ヘッダ部分に
「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでに Google アナリティクス 4 プロパティに切り替えて設定を進めておきましょう。」
といったアラートメッセージが表示されているので（※2022年8月時点）、その帯の「開始」ボタンをクリックします。
すると以下の画面が表示されるので、タイトル部分の「未接続」であることを確認して、「新しい Google アナリティクス 4 プロパティを作成する」の「はじめに」ボタンをクリックします。
モーダルが開き、注意事項が記載されてるので、その内容を確認して「プロパティを作成」をクリックします。
すると、先ほどの「未接続」が「接続済み」になりました。
WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグします。
日頃、VSCodeの「PHP Debug」を使ってデバッグを行っていたのですが、WSL2とDockerの環境下ではちょっとした設定が必要だったので、メモとして残しておきます。
ちなみに今回、以下の環境で実現しました。
WSL2でUbuntu上にソースを展開し、Dockerでマウントして開発しているプロジェクトを想定しています。
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)'
TanStack TableのReact Tableでリッチなテーブルを実装してみます。
TanStack | High Quality Open-Source Software for Web Developers
あるプロジェクトで脱jQueryの流れがあり、jQueryベースのプラグイン「DataTables」に代わるライブラリを探していて、React Tableにたどり着きました。
本記事の内容は、ほとんど公式サイトのガイド通り、かつ、雑な解説となっておりますが、、初導入時の記憶としてメモを残したいと思います。
ここではユーザ情報ををTableで表示する、シンプルな例を取り上げます。
また、コード量が多くなるので、要点を絞り紹介しています。
npmコマンドを使ってReact Tableをインストールします。
$ npm install @tanstack/react-table
Laravelにデフォルトで組み込まれている「PHPUnit」を使ってユニットテスト（単体テスト）を実施してみます。
今回は、Webアプリケーションに正しくアクセスできているか、HTTPテストを実施します。
公開済みのLaravelプロジェクトを対象とします。
テスト用スクリプトは、サンプル「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サイト内で認証済みユーザのみにAPIを提供する方法です。
以前に、Laravelサイト内外問わず、APIで認証機能を提供するしくみとしてPassportを紹介しました。
LaravelでPassportパッケージ（OAuth2）を使用したAPI認証を構築
今回は、PassportではなくSessionを用いて、Laravelサイト内に限定し、かつ、認証済みのユーザのみにAPIを提供する方法を紹介します。
SPAではないが、パフォーマンス的に部分的にAPIで情報を提供する際に有効です。
まず「config/auth.php」を開き、apiのドライバをwebと同じ「session」にします。
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'session',
'provider' => 'users',
],
],
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のユーザ名やパスワードなどをコードに書くことはセキュリティ的にリスクがあるので、環境変数を使用します。
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で外部に展開します。ここで、以下の課題があります。
最近、Vue.jsやReactなどを使用したSPA開発がトレンドで、API開発も需要も高まってきてます。
Laravelでは、APIに必要なルートやコントローラを簡単に生成できるしくみが用意されています。
今回はLaravelでAPIの開発を始める際の基礎をみてみます。
ちなみに、Laravel 6.xがインストール済みであることを前提とします。
また、任意の「Sample」データに対してAPIを開発するとします。
以下のコマンドで、APIに必要な関数を含んだコントローラ「app/Http/Controllers/API/SampleController.php」を作成することができます。
$ php artisan make:controller API/SampleController --api
作成されたコントローラの中身は以下のようになってます。
namespace App\Http\Controllers\API;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class SampleController extends Controller
{
public function index()
{
//
}
public function store(Request $request)
{
//
}
public function show($id)
{
//
}
public function update(Request $request, $id)
{
//
}
public function destroy($id)
{
//
}
}
Laravel×Reactの開発環境構築を構築します。
今回試した環境は以下の通りです。
Laravelはインストール済みの状態から解説します。
初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。
$ php artisan ui react
または
$ php artisan preset react
Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。
次に「package.json」を元にReactパッケージをインストールします。
$ npm install
基本的にReactのインストールは以上です。
但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。