📎

Gemini(ジェミニ)で遊んでみた [イベントカレンダー編]

2025/01/21に公開

Gemini(ジェミニ)とは

https://deepmind.google/technologies/gemini/

旧称Bard(バード)は、Googleが開発した生成型人工知能チャットボットです。
2023年3月21日にアメリカ合衆国とイギリスでリリース、2024年2月8日に名称をGeminiに変更するとともに、全世界で一般公開されました。

NIKKEI Digital Governance調査結果によると日本語対応の生成AIモデル真実性のスコアで1位です。(2024年10月時点)

コード生成AIなどについて、以前記事を書いたので参考に見てください。
人工知能(AI):生成AIの例、人間にしか出来ないことは?

今回のテーマは「イベントカレンダー」

Geminiに「ionic、angularを使用してイベントカレンダーを作成して」とお願いしました。
1回目は「ionic2-calendar」で作成するコードが表示されましたが、表示された内容だけでは完成することが出来なかったので、ionic2-calendar以外の方法を聞くと3つの方法を紹介してくれました。
Geminiが表示してくれた内容を載せておきます。

ionic2-calendar

https://www.npmjs.com/package/ionic2-calendar
基本的な手順
1.プロジェクトの作成
まず、Ionic CLIを使って新しいプロジェクトを作成します。

ionic start myCalendar blank --type=angular

2.カレンダーライブラリのインストール
カレンダー機能を実現するために、適切なライブラリをインストールします。いくつか選択肢がありますが、ionic2-calendarは比較的よく使われているライブラリの一つです。

npm install ionic2-calendar

モジュールのインポートと設定
app.module.tsにカレンダーライブラリをインポートし、必要な設定を行います。
日本語表示にするための設定もここで行います。

TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgCalendarModule } from 'ionic2-calendar';
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';
registerLocaleData(localeJa);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgCalendarModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

4.コンポーネントの作成とカレンダーの表示
カレンダーを表示するコンポーネントを作成し、HTMLでカレンダーを表示します。

HTML
<calendar [options]="calendarOptions"
          (onCurrentDateChanged)="onCurrentDateChanged($event)"
          (onRangeChanged)="onRangeChanged($event)"
          (onEventSelected)="onEventSelected($event)"
          (onTitleChanged)="onTitleChanged($event)"
          (onTimeSelected)="onTimeSelected($event)"
          class="calendar">
</calendar>

TypeScript側でカレンダーのオプションなどを設定します。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  calendarOptions = {
    locale: 'ja', // 日本語表示
    // その他のオプション
  };

  onCurrentDateChanged(event: any) {
    console.log('current date change', event);
  }

  // 他のイベントハンドラ...
}

5.イベントの追加と管理
イベントの追加、編集、削除などの機能を実装します。Firebaseなどのバックエンドサービスと連携することで、イベントデータを永続化することも可能です。

役立つ情報源
Qiitaの記事:
Ionic + Firebaseで記録するカレンダーアプリを作る その1 Hello World - Qiita: プロジェクトの作成からカレンダーの表示まで基本的な手順が解説されています。
Ionic + Firebaseで記録するカレンダーアプリを作る その4 dayページからイベントを追加 - Qiita: イベントの追加機能の実装について解説されています。

Ionic Frameworkのドキュメント:
AngularのページコンポーネントのLife Cycle - すべてのイベントのドキュメンテーション - Ionic Framework: ライフサイクルイベントについて理解することで、より効率的な開発が可能になります。
その他のライブラリ:
ionic2-calendar以外にも、FullCalendarなどをAngularと組み合わせて使用することもできます。

補足:
・上記は基本的な手順であり、要件に応じてカスタマイズが必要です。
・イベントデータの保存には、Firebaseなどのバックエンドサービスを利用することをお勧めします。
UI/UXを考慮し、使いやすいカレンダーを作成しましょう。
これらの情報が、IonicとAngularを使用したイベントカレンダー作成の助けになれば幸いです。もし具体的な実装で不明な点があれば、遠慮なくご質問ください。

FullCalendar

https://fullcalendar.io/
FullCalendarは非常に高機能でカスタマイズ性の高いJavaScriptライブラリです。Angularとの連携も可能です。

特徴:
豊富なビュー(月、週、日、リストなど)
ドラッグアンドドロップでのイベント編集
タイムゾーン対応
カスタマイズ可能なテーマ

導入:
1.必要なパッケージをインストールします。

npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

必要に応じて他のプラグイン(例:@fullcalendar/timegrid、@fullcalendar/list)もインストールします。

2.app.module.tsでFullCalendarModuleをインポートします。

TypeScript
import { FullCalendarModule } from '@fullcalendar/angular';

@NgModule({
  imports: [
    // ... 他のモジュール
    FullCalendarModule
  ],
  // ...
})
export class AppModule { }

3.コンポーネントでFullCalendarを表示します。

HTML
<full-calendar [options]="calendarOptions"></full-calendar>
TypeScript
import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction'; // for dateClick

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    weekends: true,
    events: [
      { title: 'event 1', date: '2024-03-01' },
      { title: 'event 2', date: '2024-03-05' }
    ],
    dateClick: this.handleDateClick.bind(this), // bind is important!
  };

  handleDateClick(arg) {
    alert('date click! ' + arg.dateStr)
  }
}

Syncfusion Angular Calendar

https://www.npmjs.com/package/@syncfusion/ej2-angular-calendars
Syncfusionは商用ライブラリですが、コミュニティライセンスを利用することで無償で使用できます。

特徴:
豊富な機能と優れたパフォーマンス
さまざまなビューとカスタマイズオプション
Angularとの統合が容易
優れたドキュメントとサポート

導入:
1.Syncfusionのnpmパッケージをインストールします。

npm install @syncfusion/ej2-angular-calendars

2.app.module.tsにCalendarModuleをインポートします。

TypeScript
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';

@NgModule({
  imports: [
    // ... 他のモジュール
    CalendarModule
  ],
  // ...
})
export class AppModule { }

3.コンポーネントでカレンダーを表示します。

HTML
<ejs-calendar></ejs-calendar>

詳細な設定はSyncfusionのドキュメントを参照してください。
https://www.syncfusion.com/angular-components/angular-calendar?utm_source=npm&utm_medium=listing&utm_campaign=angular-calendar-npm

PrimeNG Calendar

https://www.primefaces.org/primeng-v14-lts/
PrimeNGは、Angular向けの豊富なUIコンポーネントを提供するライブラリです。

特徴:
豊富なテーマとカスタマイズオプション
使いやすいAPI
パフォーマンスに優れている

導入:
1.PrimeNGと必要な依存関係をインストールします。

npm install primeng primeicons

2.app.module.tsでCalendarModuleをインポートします。

TypeScript
import { CalendarModule } from 'primeng/calendar';

@NgModule({
  imports: [
    // ... 他のモジュール
    CalendarModule
  ],
  // ...
})
export class AppModule { }

3.コンポーネントでカレンダーを表示します。

HTML
<p-calendar></p-calendar>

これらのライブラリはそれぞれ特徴があり、プロジェクトの要件や好みに応じて選択できます。FullCalendarはカスタマイズ性が高く、Syncfusionは高機能で安定しており、PrimeNGは豊富なUIコンポーネント群の一部として利用できます。

どのライブラリを選択する場合でも、公式ドキュメントを参照し、最新の情報に基づいて実装することをお勧めします。また、それぞれのライブラリが提供するサンプルコードやデモを参考にすると、よりスムーズに導入できるでしょう。

もし、具体的な要件や実装で困っている点があれば、遠慮なくご質問ください。より具体的なアドバイスを提供できるかと思います。

結論

Gemini(ジェミニ)でカレンダー作成を行った結果、「FullCalendar」のみ、作成出来ました!!
他のものは、表示されたコードのみでは作成できず、自分でイベントハンドラを記載する必要がありました。
ここまで正確に表示できるようになったAIに驚くとともに、1年後、同じように聞いた時にどのようなコードを表示してくれるのか楽しみです。

Geminiが教えてくれた「FullCalendar」のコードで作成したカレンダー


Discussion