Gemini(ジェミニ)で遊んでみた [イベントカレンダー編]
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
1.プロジェクトの作成
まず、Ionic CLIを使って新しいプロジェクトを作成します。
ionic start myCalendar blank --type=angular
2.カレンダーライブラリのインストール
カレンダー機能を実現するために、適切なライブラリをインストールします。いくつか選択肢がありますが、ionic2-calendarは比較的よく使われているライブラリの一つです。
npm install ionic2-calendar
モジュールのインポートと設定
app.module.tsにカレンダーライブラリをインポートし、必要な設定を行います。
日本語表示にするための設定もここで行います。
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でカレンダーを表示します。
<calendar [options]="calendarOptions"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
class="calendar">
</calendar>
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
FullCalendarは非常に高機能でカスタマイズ性の高いJavaScriptライブラリです。Angularとの連携も可能です。
特徴:
豊富なビュー(月、週、日、リストなど)
ドラッグアンドドロップでのイベント編集
タイムゾーン対応
カスタマイズ可能なテーマ
導入:
1.必要なパッケージをインストールします。
npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
必要に応じて他のプラグイン(例:@fullcalendar/timegrid、@fullcalendar/list)もインストールします。
2.app.module.tsでFullCalendarModuleをインポートします。
import { FullCalendarModule } from '@fullcalendar/angular';
@NgModule({
imports: [
// ... 他のモジュール
FullCalendarModule
],
// ...
})
export class AppModule { }
3.コンポーネントでFullCalendarを表示します。
<full-calendar [options]="calendarOptions"></full-calendar>
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
Syncfusionは商用ライブラリですが、コミュニティライセンスを利用することで無償で使用できます。
特徴:
豊富な機能と優れたパフォーマンス
さまざまなビューとカスタマイズオプション
Angularとの統合が容易
優れたドキュメントとサポート
導入:
1.Syncfusionのnpmパッケージをインストールします。
npm install @syncfusion/ej2-angular-calendars
2.app.module.tsにCalendarModuleをインポートします。
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
@NgModule({
imports: [
// ... 他のモジュール
CalendarModule
],
// ...
})
export class AppModule { }
3.コンポーネントでカレンダーを表示します。
<ejs-calendar></ejs-calendar>
詳細な設定はSyncfusionのドキュメントを参照してください。
PrimeNG Calendar
PrimeNGは、Angular向けの豊富なUIコンポーネントを提供するライブラリです。
特徴:
豊富なテーマとカスタマイズオプション
使いやすいAPI
パフォーマンスに優れている
導入:
1.PrimeNGと必要な依存関係をインストールします。
npm install primeng primeicons
2.app.module.tsでCalendarModuleをインポートします。
import { CalendarModule } from 'primeng/calendar';
@NgModule({
imports: [
// ... 他のモジュール
CalendarModule
],
// ...
})
export class AppModule { }
3.コンポーネントでカレンダーを表示します。
<p-calendar></p-calendar>
これらのライブラリはそれぞれ特徴があり、プロジェクトの要件や好みに応じて選択できます。FullCalendarはカスタマイズ性が高く、Syncfusionは高機能で安定しており、PrimeNGは豊富なUIコンポーネント群の一部として利用できます。
どのライブラリを選択する場合でも、公式ドキュメントを参照し、最新の情報に基づいて実装することをお勧めします。また、それぞれのライブラリが提供するサンプルコードやデモを参考にすると、よりスムーズに導入できるでしょう。
もし、具体的な要件や実装で困っている点があれば、遠慮なくご質問ください。より具体的なアドバイスを提供できるかと思います。
結論
Gemini(ジェミニ)でカレンダー作成を行った結果、「FullCalendar」のみ、作成出来ました!!
他のものは、表示されたコードのみでは作成できず、自分でイベントハンドラを記載する必要がありました。
ここまで正確に表示できるようになったAIに驚くとともに、1年後、同じように聞いた時にどのようなコードを表示してくれるのか楽しみです。
Geminiが教えてくれた「FullCalendar」のコードで作成したカレンダー
Discussion