TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WordPressでイベントカレンダーを表示できるプラグイン5選
WordPress

WordPressでイベントカレンダーを表示できるプラグイン5選

WordPressでは店舗の営業日やイベントの日程などを案内するイベントカレンダーをプラグインを使用することで簡単に記事内に入れることができます。ここではイベントカレンダーを作成・公開するためのプラグインを紹介していきます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

WordPressでは店舗の営業日やイベントの日程などを案内するイベントカレンダーをプラグインを使用することで簡単に記事内に入れることができます。

ここではイベントカレンダーを作成・公開するためのプラグインを紹介していきます。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

The Events Calendar

ec_pl_1

プラグインの管理画面内で公式の解説動画を見ることができるようになっています。

英語のプラグインですが有志の日本語化ファイルがあり、FTPクライアントで指定の場所にアップロードすることで翻訳可能です。

カレンダーを公開する際にGoogleマップで任意の場所を表示する機能もあります。

The Events Calendarの使い方

Event Calendar WD

ec_pl_2

英語プラグインですが、一部日本語に翻訳されています。

WordPressのビジュアルエディタに作成したカレンダーを挿入するメニューアイコンが自動で追加されるので、ショートコードをコピー＆ペーストする必要はありません。

Googleマップ表示機能に対応しており、デザインをカスタマイズできる有料版もあります。

Event Calendar WD

[PR] WordPressで挫折しない学習方法を動画で公開中

WordPress Event Calendar

ec_pl_3

プラグインの管理画面は英語ですが、作成されたカレンダーは曜日などが日本語で表示されます。

Event Calendar WD同様、ビジュアルエディタ内にカレンダーを記事に追加するメニューが自動追加されるようになっています。

複数のテーマからカレンダーのデザインを選択できる有料版があります。

WordPress Event Calendar

 

CP Multi View Event Calendar

ec_pl_4

月表示のカレンダー以外にも1日の時間単位・1週間単位・1年単位などカレンダーの表示形式を切り替えることができます。

ビジュアルエディタからカレンダーを記事に挿入でき、そこで更に細かい設定をすることが可能です。

CP Multi View Event Calendar

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

Event Organiser

ec_pl_5r

記事内ではなくウィジェットでサイドバーなどにイベントカレンダーを表示できる日本語対応のプラグインです。

カレンダーを作成した後、WordPress管理画面の「外観」→「ウィジェット」から操作することでサイト内に追加することができます。

イベント編集画面の「Venue」メニューから会場をGoogleマップで表示させることも可能です。

Event Organiser

 

 

いかがだったでしょうか。

会社もしくは個人でコワーキングスペースを運営していたり、あるスペースをレンタルしている場合などは、

サイト上にカレンダーが表示されていた方が分かりやすいでしょう。

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

【自動でスクロールされる！】Infinite-Scrollの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、記事一覧を自動でスクロールするプラグイン、Infinite-Scrollの...
WordPress

WordPressのサイトを別のサーバーに移行する方法【初心者向け】

WordPressでは、別サーバ間でも記事内容やアップロードしたメディアファイルなどのデータを、まるごと移行させることが可能です。 ここでは、他のサーバに...
WordPress

Easy FancyBoxの使い方ーWordPressプラグイン【初心者向け】

自分のサイトを運営していてたまにもっと動きが欲しいなと思ったりすることはあるでしょう。 普通サイトで動きを出そうとすると、JavaScriptを書かなけれ...
WordPress

BuddyPressの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressに掲示板を追加できるプラグインの1つである、BuddyP...
WordPress

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。 ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画...
WordPress

WP SlimStatの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を紹介する記事です。 今回は、WordPressのアクセス解析に便利なプラグインの1つである、WP SlimStat...
WordPress

あわせてよく読まれている記事

JavaでCalendarクラスを使う方法【初心者向け】

初心者向けにJavaで書くCalendarの使い方について解説。Calendarの書き方から実際にサンプルプログラムを書きながら説明しています。 Javaエンジニアを目指している人は今のうちに覚えておきましょう。   なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。   Calendarクラスとは CalendarクラスはJavaで日付の処理を行うためのクラスです。JDK1.1より導入されました。 JDK1.0までは、Dateクラスが日付の処理を行うためのクラスでしたが、より便利なクラスとしてDateクラスに代わり作られました。 それまでのコードとの互換性のためにDateクラスは残してはいますが、JDK1.1以降はCalendarクラスが日付処理の中心となっています。 ちなみにですがJDK8からは、DateTime APIという新しい日付処理のクラス群も作られました。 JDK8以降はこちらを中心にプログラミングをしていくことにはなりますが、CalendarクラスはJDK1.1から7まで長きに渡り、日付処理を担ってきました。(JDK1.1は1997年リリース、JDK8は2014年リリースです) これからはDateTime APIが中心になると考えられていますが、まだまだCalendarクラスを使ったコードが大半です。しっかり使い方を覚えておきましょう。   Calendarの書き方 それではCalendarの使い方を見ていきます。 Calendarクラスを使うにはまず、Calendar#getInstance( )メソッドを使い、Calendarのインスタンスを生成します。生成時点の日付／時刻を保持したインスタンスとなります。 Calendar cal = Calendar.getInstance(); これでCalendarのインスタンスが生成されます。   日付時刻の取得 Calendarのgetメソッドを使って日付／時刻の値を取得します。 引数にCalendarクラスの定数を指定することで取得したい日付／時刻の種類を指定します。 たとえば、Calendarインスタンスが保持している年を取得したい場合は、以下のように書きます。 int year = cal.get(Calendar.YEAR);   日付を取得するには以下の定数を指定します。 Calendar.YEAR Calendarインスタンスが保持している日付のうち年を返す Calendar.MONTH Calendarインスタンスが保持している日付のうち月を返す。但し、返す範囲は0から11までとなり、実際の月より一つ少なくなるため、注意が必要 Calendar.DATE Calendarインスタンスが保持している日付のうち日を返す   時刻を取得するには以下の定数を指定します。 Calendar.AM_PM Calendarインスタンスが保持している時刻のうち、午前(Calendar.AM)／午後(Calendar.PM)を返す。 Calendar.HOUR Calendarインスタンスが保持している時刻のうち時間を返す(0 – 11) Calendar.HOUR_OF_DAY Calendarインスタンスが保持している時刻のうち時間を返す(0 – 23) Calendar.MINUTE Calendarインスタンスが保持している時刻のうち分を返す Calendar.SECOND Calendarインスタンスが保持している時刻のうち秒を返す Calendar.MILLISECOND Calendarインスタンスが保持している時刻のうちミリ秒を返す   その他 Calendar.DAY_OF_WEEK Calendarインスタンスが保持している曜日を以下の定数値として返す Calendar.SUNDAY Calendar.MONDAY Calendar.TUESDAY Calendar.WEDNESDAY Calendar.TURSDAY Calendar.FRIDAY Calendar.SATURDAY Calendar.DAY_OF_YEAR Calendarインスタンスが保持している日付がその年の何日目なのかを返す Calendar.DAY_OF_WEEK_IN_MONTH Calendarインスタンスが保持している曜日がその月の何回目なのかを返す   日付の操作 Calendarのaddメソッドを使って日付／時刻などのフィールド値を操作します。 引数にCalendarクラスの定数を指定することで操作したい日付／時刻の種類を指定します。 たとえば、Calendarインスタンスが保持している年を10年先にしたい場合は、以下のように書きます。 cal.add(Calendar.YEAR, 10); 過去の日付としたい場合は、addメソッドに渡す２つめの引数にマイナス値とします。   [PR] WordPressで挫折しない学習方法を動画で公開中実際に書いてみよう ここでは、Calendarクラスのインスタンス取得から日付の操作、表示のサンプルコードを実際に書いてみます。実行結果も合わせて参考にしてみてください。 package calendarSample; import java.util.Calendar; public class CalendarSample { public static void main(String[] args) { Calendar cal = Calendar.getInstance(); //当日日付時刻 displayCalendarData(cal); System.out.println(); //１０年後日付時刻 cal.add(Calendar.YEAR, 10); displayCalendarData(cal); cal.add(Calendar.YEAR, -10); System.out.println(); //１０ヶ月後日付時刻 cal.add(Calendar.MONTH, 10); displayCalendarData(cal); cal.add(Calendar.MONTH, -10); System.out.println(); //１０日後日付時刻 cal.add(Calendar.DATE, 10); displayCalendarData(cal); cal.add(Calendar.DATE, -10); System.out.println(); //１０時間後日付時刻 cal.add(Calendar.HOUR, 10); displayCalendarData(cal); cal.add(Calendar.HOUR, -10); System.out.println(); //１０分後日付時刻 cal.add(Calendar.MINUTE, 10); displayCalendarData(cal); cal.add(Calendar.MINUTE, -10); System.out.println(); //１０秒後日付時刻 cal.add(Calendar.SECOND, 10); displayCalendarData(cal); cal.add(Calendar.SECOND, -10); System.out.println(); } public static void displayCalendarData(Calendar cal) { System.out.print(cal.get(Calendar.YEAR) + "年"); System.out.print(cal.get(Calendar.MONTH) + 1 + "月"); System.out.print(cal.get(Calendar.DAY_OF_MONTH) + "日"); int week
Java

JavaでDate型の日時を加算・減算する方法を現役エンジニアが解説【初心者向け】

JavaでDate型の日時を加算、減算する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次 Date型とは Calendarクラスとは Date型の日時を加算する方法 Date型の日時を減算する方法 実際に書いてみよう まとめ Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Date型の日時を加算、減算する方法だよ。知らないとよくつまずく内容だから、詳しく説明していくね！ 大石ゆかり お願いします！ Date型とは Date型とは、Javaで日付の処理を行うクラスです。 Date型の持つ日時情報は「1970年1月1日0時からの経過時間」をミリ秒単位で示したものです。 また、printlnメソッドなどで表示すると、下記のように年月日と曜日まで加えてわかりやすく表示してくれます。 Tue Feb 18 17:38:14 JST 2020 しかし、Date型では時間、秒などの細かい日時を扱うことは推奨されていません。 日時情報の時間、秒などの細かい日時を扱う場合には、Calendarクラスを利用します。   [PR] WordPressで挫折しない学習方法を動画で公開中Calendarクラスとは Date型と同じように日時を扱うことのできるクラスで、時間や秒などの細かい日時が計算可能です。 Date型の計算を行いたい場合には、Calendar型に一度変換し、計算を行います。 Date型をCalendar型に変換する場合、setTimeメソッドを使って下記のように記述しましょう。 Calendar Calendar型オブジェクト名 = Calendar.getInstance(); Calendar型オブジェクト名.setTime(Date);   逆に、Calendar型からDate型を取得するには、getTimeメソッドを使い下記のように記述します。 Date Date型オブジェクト名 = Calendar型オブジェクト名.getTime();   Date型の日時を加算する方法 Date型の日時を加算する方法としては、Calendar型のaddメソッドを使います。 addメソッドは、下記のように記述しましょう。 Calendar型.add(年 or 月 or 日 or 時間 or 分などを指定, 加算する値);   第一引数の部分に関しては、以下のいずれかの定数を指定し、加算する対象を設定します。 年→Calendar.YEAR 月→Calendar.MONTH 日→Calendar.DAY_OF_MONTH など 時間→Calendar.HOUR_OF_DAY など 分→Calendar.MINUTE   例えば、2ヶ月先の日時を取得したい場合は、下記のようにCalendar型で2ヶ月分を加算してからDate型に変換してみましょう。 Calendar型.add(Calendar.MONTH, 2);   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
Java

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Doru Ciobanu氏によって投稿されました。   jQueryはまだ必要でしょうか？ リリースから約10年が経過した現在、jQueryは、最も普及しているJavaScriptライブラリです。10年前のブラウザのエコシステムにおいては、HTMLのDOM操作の複雑さを最小限に抑えるために開発されたブラウザ同士の戦争が繰り広げられていました。 こうした状況で登場したjQueryはクロスブラウザを実現できたため、数多くのエンジニアを混乱から救ったのです。   基本的にjQueryは、粗悪なネイティブAPIに代わる新しいAPIを開発し、ネイティブAPIでサポートされていない機能を実装し、バグのあるネイティブ機能の複製からバグのない機能を作成しました。 JavaScriptコミュニティの中には、ブラウザ間の不規則性に対処できるjQueryのメリットは非常に誇張されており、実際にはquerySelectors( )メソッドの実装があるためにjQueryは人気を得ているのだと主張する声もあります。   現在のブラウザのエコシステムは10年前ほど複雑ではありません。一部のブラウザにおいてはHTML5のいくつかのAPIに非対応であることもありますが、以前ほど問題となることはありません。Chromeで何も問題がなければ、FirefoxやEdgeにおいても上手くいくでしょう。 jQueryは生産性と効率性を向上することができる、きちんと整理されてドキュメント化された、数多くのプラグインを提供しています。   以下に、無料の素晴らしいjQueryプラグインのリストを挙げています。ぜひ使ってみてください。   1. Freewall FreewallはクロスブラウザなjQueryの豪華なプラグインであり、CSS3のアニメーション効果を伴うグリッドレイアウトを構築することができます。 フレキシブルレイアウト、画像を使ったレイアウト、ネスト構造のグリッドレイアウト、Pinterestのようなレイアウトなど、どのようなレイアウトを構築するとしてもFreewallは、デスクトップとモバイル両方において動的なグリッドレイアウトを構築できるオールインワンのプラグインです。 旧IE8を含むほとんどのブラウザをサポートしていて、汎用性の高いツールです。   2. multiscroll.js multiScroll.jsは、Webサイトに多方向スクロールを追加するのに役立つ優れたプラグインです。2つの垂直方向のレイアウトまたはパネルを備えた、マルチスクローリングなWebサイトの構築を容易にします。 UXを損うことなく、最初のページでユーザーの注目を集めることが図られています。すべてのモダンブラウザで完全に機能し、従来のブラウザでも上手く機能します。 言うまでもなくこのプラグインはモバイルフレンドリーです。   [PR] WordPressで挫折しない学習方法を動画で公開中3. rowGrid.js Googleの画像検索の表示のように、画像をすっきりとディスプレイすることができるプラグインです。親要素に合わせて、他の要素は行方向にまっすぐに並ぶように自動的に最適化されます。 このとき全体的なバランスが取れるように、要素間の余白は調整され、要素のサイズは縮小されます。ただし同じ高さの要素を使わなければ、プラグインは正しく機能しません。   4. Slidebars Slidebarsは、プッシュメニュー（クリックすると開くメニュー）やサイドバーなど、canvas要素以外の要素をWebサイトに追加するのに役立つjQueryプラグインです。 バージョン2は、マークアップを完全に書き直して改良され、canvas要素以外の要素を無制限に使用できるようになりました。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由
JavaScript

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。 他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。 そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？ 田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。 大石ゆかり なんだか難しそうですね・・・。 田島悠介 きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。 大石ゆかり よろしくお願いします！！！   目次 WordPressのインストール手順 初期設定とインストール WordPress管理画面の基本設定 記事の投稿方法 カテゴリーとタグの管理 ユーザー管理 パーマリンクの設定 テーマの使い方 プラグインの使い方 WordPressで知っておきたいその他の設定   WordPressのインストール手順 用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上 または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。   本体の入手とサーバーへのアップロード まずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード 以下のボタンをクリックしてWordPress本体をダウンロードします。 ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。 アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。   [PR] WordPressで挫折しない学習方法を動画で公開中初期設定とインストール データベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。 データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。 以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。 また、データベースの文字コードは「UTF-8」にしておきます。 「インストールを実行」をクリックします。 ここではWordPressサイトの基本的な設定を行います。 また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。 テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。 インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。 続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。   管理画面の基本設定 ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。   サイトの基本情報変更 左メニューの「外観」から「カスタマイズ」を選択します。 「サイト基本情報」を選択します。 サイトのタイトルとキャッチフレーズはここからいつでも変更できます。   ログイン・ログアウト方法 管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。 再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
WordPress

JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでGoogle Calendar APIを実装する方法についてTechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせて見てみましょう。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでGoogle Calendar APIを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Google Calendar APIとは Googleカレンダーとは、クラウドのカレンダー画面で予定を管理するサービスの名前です。 APIとは、Application Programming Interface)の略です。 APIはアプリなどのサービスの機能を画面を通さずに直接呼び出して使うもので、画面を通さずに直接呼び出すことで一部の機能だけを利用し、自分のサイトやサービスに追加することができます。 そして、今回は公開されているGoogleカレンダーの「日本の祝日」から、APIを使って祝日名と日付を取得していきましょう。 JavaScriptでGoogle Calendar APIを実装する方法 下記の3つの手順でJavaScriptを書く前の準備が必要です。 Googleアカウントを用意する APIの操作に必要なキーを用意する APIで操作するカレンダーのIDを用意する 準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。 それでは、それぞれの手順の具体的な方法を確認していきましょう。   Googleアカウントを用意する すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。 アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。   APIの操作に必要なキーを用意する APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。 次の3つのステップをおこなってください。 1.Google Calendar APIのページにアクセスします。2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。 3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。   APIで操作するカレンダーのIDを用意する Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。 カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「＋」を押してみましょう。 表示されたメニューから「関心のあるカレンダーを探す」を選択してください。 カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。 日本の祝日の「＋」横にあるメニューから「設定」を選択します。 設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。 これで準備完了です。 では、JavaScriptでAPIの呼び出しです。 Googleから提供されているライブラリを下記のように読み込みます。 <script src="https://apis.google.com/js/api.js"></script> 後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。   [PR] WordPressで挫折しない学習方法を動画で公開中実際に書いてみよう 今回はHTMLソースの中にscriptタグでJavaScriptを書いていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id='resultArea'></div> </body> <script src="https://apis.google.com/js/api.js"></script> <script> const API_KEY
JavaScript

Javaのdateクラスとcalendarクラスの違いを現役エンジニアが解説【初心者向け】

Javaのdateクラスとcalendarクラスの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 dateクラスとcalendarクラスの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Dateクラス Calendarクラスとは DateクラスとCalendarクラスの使い方 DateクラスとCalendarクラスを変換する方法 まとめ   Dateクラスとは Dateクラスとは、日付の時間のデータを取得するクラスです。 Dateクラスは、特定の日付や時間を取得したいときに使用されます。 Dateクラスを生成するときは、下記のように記述しましょう。 Date オブジェクト名 = new Date();   この場合、Date型の保持する時間が現在時刻となります。 日付に関する細かい処理を行ないたい場合には、Calendarクラスが必要です。   [PR] WordPressで挫折しない学習方法を動画で公開中Calendarクラスとは Calendarクラスとは、Dateクラスと同じように日付、時刻を保持することのできるデータ型です。 Dateクラスとの大きな違いは、日付や時刻についての演算を行う機能があるという点です。 Calendarクラスを生成するときは、下記のように記述しましょう。 Calendar オブジェクト名 = Calendar.getInstance(); また、生成したCalendar型が保持する時刻データも現在時刻になります。     DateクラスとCalendarクラスの使い方 Date・calenderクラスの使い方を見ていきましょう。   Dateクラスの使い方 Dateクラスの基本的な使い方としては、日付の比較と日付の文字列への変換が挙げられます。 日付の比較を行う場合、4つのメソッドが用意されています。 afterメソッド beforeメソッド equalsメソッド compareToメソッド   それぞれのメソッドは、以下の用ように記述し、出力されます。 Dateクラス1.メソッド(Dateクラス2); afterメソッドの場合→Dateクラス1がDateクラス2よりも後の時刻ならtrue、そうでないならfalse beforeメソッド→Dateクラス1がDateクラス2よりも後の時刻ならtrue、そうでないならfalse equalsメソッド→Dateクラス1とDateクラス2と同じ時刻ならtrue、そうでないならfalse compareToメソッド→Dateクラス1がDateクラス2より先なら1、同じなら0、後なら-1 また、日付の文字列の変換に関しては、SimpleDateFormatクラスをこちらの記事を参考にしてください。   Calendarクラスの使い方 Calendarクラスの重要な使い方としては、日付や時刻の演算です。 日付や時刻の演算を行なうときは、addメソッドを用います。 Calendar型.add(Calendar.MONTH, 2); addメソッドに、年月日時分を指定して整数を渡すと、指定した時間の加算や減算を行なうことが可能です。 詳しい使い方はこちらの記事を参考にしてください。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由
Java

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WordPressでイベントカレンダーを表示できるプラグイン5選