TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WordPressでイベントカレンダーを表示できるプラグイン5選
icon
icon
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

 

Event Organiser

ec_pl_5r

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

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

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

Event Organiser

 

 

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

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

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

 

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

記事を検索

関連するキーワード

関連する記事

WordPressでカスタムタクソノミーを設定する方法【初心者向け】

WordPressには投稿タイプをカスタマイズできる「カスタム投稿タイプ」という機能があります。そのカスタムタイプにカテゴリーを追加できるのがカスタムタクソノミ...
WordPress

WordPressで関連記事を簡単に表示する方法【初心者向け】

WordPressで作成したサイトで、記事の下に関連記事が表示されているのを見たことはないでしょうか？ 関連記事があることで、ほかの記事へのトラフィックア...
WordPress

WordPressで記事を投稿する方法【超初心者向け】

WordPressをとりあえずインストールしたという初心者向けの記事です。 まずは基礎中の基礎である、記事を投稿する方法を覚えましょう。  ...
WordPress

ページ送りが簡単に！WP-PageNaviの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方について解説する記事です。 今回は、サイト上にページのナビゲーションを表示できるプラグイン、WP-PageNaviの...
WordPress

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

WordPressで作ったサイトの表示速度が遅いといった方におすすめのプラグインを紹介する記事です。 WordPressのページ表示速度を高速化できるプラ...
WordPress

WordPressのサイトが真っ白で表示されない場合の対処方法【初心者向け】

WordPressを編集していて、公開しているはずのサイトが真っ白になってページが表示されない・・ということはないでしょうか。 今回はそんなトラブルを解決...
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);   Date型の日時を減算する方法 Date型の日時を減算する方法は、加算の場合と同じくCalendar型のaddメソッドを使います。 加算の場合は、第二引数に正の整数を指定しましたが、減算の場合には、第二引数に負の整数を指定する点に注意が必要です。 単純に数字にマイナスをつければ問題ないので、減算は難しくないでしょう。 例えば、2ヶ月前の日時を取得したい場合、下記のようにCalendar型で2カ月分を減算し、さらにDate型に変換すれば取得できます。 Calendar型.add(Calendar.MONTH, -2);   実際に書いてみよう それでは、コードで日時の加算、減算をしてみましょう。 import java.util.Date; import java.util.Calendar; class DateSample{     public static void main(String args[]){       //日時を格納するためのDateクラスを宣言(現在時刻)        Date date = new Date();        Calendar calendar =
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要素以外の要素を無制限に使用できるようになりました。   5. pagePiling.js シングルページのWebサイトを構築するときに最適なプラグインの1つです。スクロールのイベント発生時に、インターフェースは複数のページで構成されているように動作し、ユーザーに印象的なエクスペリエンスを提供できるでしょう。 ナビゲーションの方向、スクロールの速度、アニメーションは自由にカスタマイズ可能です。カスタマイズに関してはこのプラグインの可能性は計り知れません。 また完全にレスポンシブデザイン対応であるため、すべての画面上で正しく動作します。IE8を含めてほとんどのブラウザに対応しています。   6. Animsition Animationはページ間の自然な遷移を実現することで、楽しいユーザーエクスペリエンスを提供することが主な目的です。軽量なプラグインであり、ページ遷移に伴うスムーズで美しいCSSアニメーションを作成できます。 標準的なフェード、フェードアップ、フェードダウン、回転、フリップx / y、ズームを含む60以上のさまざまな効果を表現できます。Animationは必須のプラグインです。   7. ZooMove マウスオーバーのイベント発生によって拡大される画像は、私は個人的には好きではありませんが、実装する必要がある場合にはZooMoveを使います。 この洗練されたプラグインはスムーズで使いやすいです（添付したGIF画像だけでは十分に良さをお伝えできません）。   8. Rippleria Rippleriaは、Googleのマテリアルデザインからインスピレーションを受けた、軽量のjQueryプラグインです。 クリック・タップのイベント発生によって波紋の効果が発動することで、ユーザーの視覚的なエクスペリエンスを高めます。 button要素、アイコン、div要素、image要素などのDOM要素に応用することができます。実装とカスタマイズは簡単です。   9. Flickity Flickityほど詳細なドキュメンテーションを備えたjQueryはありません。ドキュメンテーションは正確、詳細、論理的に構造化されているので、Flickityの開発者はドキュメンテーションの最高賞を受けるにふさわしいでしょう。 製品自体も美しく目の保養です。最も優れたカルーセルプラグインの1つです。タッチフレンドリー、レスポンシブデザイン、フリック操作対応のイメージギャラリーを実装できるプラグインです。 個人利用の範囲では無料ですが、商用利用には有料のライセンス契約が必要です。   10. Unslider Unsliderは、Webサイトにスライダを設定するときには最も速く最も簡単なプラグインです。 小型ですが柔軟です。オプション、設定、メソッド、コールバックイベントなどを通して自由に変更できます。   11. Lightcase.js Lightcaseはライトボックスのための素晴らしいプラグインです。まだjQuery 3では動作しませんが、開発者は新しいリリースを計画中です。レスポンシブなCSS3アニメーションのライトボックスを作成するための素晴らしいツールです。 scrollTop、scrollRight、scrollLeft、scrollVertical、scrollHorizontal、scrollBottom、fade、fadeinline、elasticなどのメソッドによって、CSS3のアニメーションを表現できます。 また、div、image、iframe、videoなどのDOM要素、text、Flashをサポートしています。   12. PhotoSwipe PhotoSwipeは、JavaScriptの画像ギャラリーを実装できる私のお気に入りのプラグインです。指で広げる（ズーム）、ピンチ（閉じる）、縦方向にスワイプ（閉じる）、横方向にスワイプ（切り替え）などのタッチジェスチャーをサポートしています。またシングルタップジェスチャーとダブルタップジェスチャーは、カスタマイズ可能です。他の多くの画像ギャラリーのプラグインと異なり、ナビゲーションフレンドリーな構築が可能です。またキーボードコントロールもサポートしています。HTML5による全画面表示モードによって、ユーザーにイマーシブな体験を提供できます。 ページ読み込みが完了するまで、ギャラリーに使われているJavaScriptの読み込みを遅らせるよう設定できるので、プラグインがページの読み込みを遅らせることもありません。 また、「ギャラリーを開くボタン」によって、プラグインのみ読み込みを開始することもできます。PhotoSwipeは、レスポンシブデザインの画像を詳細に保存することにも優れています。 画像は最大サイズで表示され、表示領域が画像よりも小さい場合には拡大できます。これらの機能を合計しても約14 KBの容量であり、開発ツールキットとして必須のプラグインです。   13. Strip Stripは、Webサイトにエレガントなライトボックスを追加することができる柔軟なプラグインです。 滑らかでスマートです。大きな画面においてはページを部分的に覆うだけなので、UIの要素、テキスト、その他のレイアウト部分を表示する余裕が確保されていて、インタラクションの邪魔になることもありません。 小さな画面においては一般的なライトボックスとして機能します。このプラグインは使いやすく、調整するために数多くの設定が用意されています。   14. Turntable.js あなたの製品を紹介することができるショーケースのプラグインは数多くあり、玉石混交です。動的でイマーシブな体験を通してユーザーに製品を紹介したい場合、特に実体のある3次元世界の製品を販売しようという場合には、Turntable.jsが良いでしょう。 最初に私がこのプラグインを試したときには、360°の全角度からこれほど滑らかなビューを作成できることに驚きました。従来のWebスライダーのスイートパッケージ製品、jQueryのスライダーや画像ビューアなどと比較すると、Turntableは革命的なプラグインです。 このプラグインの最大の売りは、ナビゲーションアイコンを使わずに済むことであり、タッチスクリーン上でマウスや指を使って画像を回転・フリップすることができます。インストールは簡単で、クリーンなコードです。   15. Vide.js あなたのWebサイトの背景に動画を追加するための最も簡単な方法は、Vide.jsです。 すべてのモダンブラウザでサポートされているため、プロジェクトで素晴らしい外観をデザインするのに役立つでしょう。 動画のプラグインに通常期待される設定は備わっているので、あなたが必要とする外観を得ることができるでしょう。   16. Trianglify 背景で動画を再生したくはないものの、普通の画像や背景だけでは退屈だと思う場合には、Trianglifyが良い選択です。独自のアルゴリズムにより三角形のパタンを生成します。分散、セルのサイズ、色は指定できます。 急ぎの場合にはTriangle Generatorを使うこともできます。パタンは、canvas要素、svg要素、png形式などにレンダリングできます。またレンダリングの実装をオリジナルに作成することもできます。   17. LazeeMenu Webページのメインメニューをシンプルにしたいのに、メニューツリーが巨大である場合には、追加のサイドバーメニューを使用すれば、使いやすさと完全性のバランスを図ることができます。 LazeeMenuは、順序付けされていないネスト構造のリンクを、複数の階層構造で構成されるナビゲーションメニューに変換します。少しの調整であなたのニーズに合わせたカスタマイズが可能です。   18. Web-ticker 開発したアプリの新しいバージョンを公開したときには、あなたは誇りと達成感を感じるでしょうか？こうしたニュースは世界と共有するべきです。Web-tickerの開発者は、使い始めるときに役立つ手順についてのガイドを提供しています。 Web-tickerには多くの設定が備わっているため、あなたの望む外観のデザインに合わせて微調整することができます。 事例として、ニュース、告知、販売などに利用されています。 また画像を配置することもできますが、ユーザーを動画で悪酔いさせたくなければ、この機能は使わないことを強くおすすめします。   19. Inputmask UXにおいては詳細が重要であるともいえます。無効な日付形式を入力したときに、フォームに再入力を求められる場面を経験したことはありますか？ こうしたことは非常に面倒なので、私はフォームを実装するときには必ずInputmaskを使っています。あらかじめ定義されたフォーマットを保証することでユーザーの入力をサポートできます。 日付、数字、電話番号などに使用できます。Inputmuskは軽量なプラグインですが役に立ちます。使いやすく、柔軟性があり、数多くのオプションがあります。また、動的データマスク、正規表現のマスク、オルタネーターマスクなどをサポートしています。   20. jquery.email-autocomplete.js また電子メールアドレスのドメイン部分を自動入力するための単純なプラグインが必要な場合は、jquery.email-autocomplete.jsが最適です。 あらかじめ定義済みの電子メールのドメインリストに基づいて、対応するドメインをプラグインが提案してくれます。ユーザーは、タブキーまたは右矢印キーを押すか、提案をクリックすれば、ドメインの残りの部分は自動的にプラグインが埋めます。 このプラグインはモバイル環境でも機能します。   21. tinyDatePicker 小さく、速く、拡張性と柔軟性の高い、日付時刻のプラグインとしてはtinyDatePickerがおすすめです。多くの機能が組み込まれていて容量は約5KBです。 カレンダー、アジェンダ、予約システムなどがこのプラグインが非常に役立つ場面です。Bootstrapなどの他のフレームワークと統合することもできます。   22. ReadRemaining.js 「光陰矢の如し」ということわざがあります。20のブラウザのタブが同時に開かれ、スマートフォンに多くの通知が表示され、情報が流れ続ける現代においては、ますます読むための時間が少なくなっています。 ReadRemaining.jsは時間を魔法のように止めることができるわけではありませんが、ユーザーにWeb上の記事を読み始めてからの経過時間を知らせることができます。このプラグインはさり気なく、コンテンツを読む邪魔となることはありません。   23. Tooltipster Tooltipsterのツールチップとは、ユーザーのアクションに反応して表示されるテキストラベルのことです。ツールチップは悪用されない限り、アプリのUXを良い方向に強化してくれます。 Tooltipsterは拡張可能なjQueryプラグインであり、ツールチップで豊富な機能を実現するのに役立ちます。誰にとってもシンプルで万能なプラグインです。   24. TableExport.js 簡単に実装できるjQueryプラグインです。 たった1行のコードだけで、HTMLのtable要素を素早く動的に、Excelのスプレッドシート、コンマで区切られた値、通常のテキスト、テキスト形式のファイル（.txt）などに変換します。とてもシンプルです。   25. Addel Addelは、form要素を念頭に設計された、HTML要素の動的な追加・削除をUIに実装するための軽量なjQueryプラグインです。 このプラグインは直感的で柔軟性があり、動的なフォームを作成するときには時間の節約になります。   26. Chart.js Chart.jsは統計データを表示するのに最適なプラグインです。 データの表示には、8つの図表のデフォルト設定を利用できます。拡張性を備えた図表を表現することができます。データを変更時には、遷移アニメーションを実装できます。 すべてのモダンブラウザにおいてレンダリングのパフォーマンスも優れています。積極的に開発が続けられているプラグラインであり、定期的に新機能が追加されています。もはや退屈な図表となることはありません。   27. jQuery Flip-Quote テキストに躍動感を持たせるには最高のプラグインです。 Flip-Quoteはドキュメント内のテキスト引用符から引用を作成し、スクロール時に画面に表示されると、引用を表示しながら反転します。ドキュメントの引用元もハイライト表示できます。もはや退屈な引用符となることはありません。   28. Sharetastic あなたのWebサイト、アプリ、製品へのトラフィックを増やしたい場合には、ソーシャルメディアにおける存在感を維持することが不可欠です。Sharetasticはシェアボタンを表示するときに役に立ちます。 完全にカスタマイズが可能で、3つのビルトインテーマが組み込まれていて、とても使いやすいプラグインです。   29. HideSeek HideSeekは、あなたが探して求めてきた検索用プラグインかもしれません。検索モジュールとしては最高のインタラクティビティが実現されています。 検索された用語をハイライト表示したり、検索結果間にナビゲーションを表示したり、要素を無視したり、アクセント記号付きの文字を無視したり、見出しのあるリストをサポートすることもできます。   30. Timedropper Timedropperは楽しい外観のプラグインです。カスタマイズに優れていて、4つのスタイルオプション：プライマリー色・テキスト色・背景色・ボーダー色と、6つの機能（自動スイッチ・時刻表示形式・フォーマット・アニメーション・マウスホイール・現在時刻の自動取得）があります。 Timedropperと似たもっと多機能のプラグインも他にいくつかありますが、Timedropperは滑らかで直感的で動作を正確に実現できます。 また、Timedropperの開発者による他のプラグインとしてはDatedropperがあり、8つのスタイルオプションと8つの機能オプションを備えているため、あなたが必要とする外観を正確に構築できます。   おわりに TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。 現役エンジニアがパーソナルメンターとして受講生に1人ずつ付き、マンツーマンのメンタリングで学習をサポートし、フロントエンドの技術をマスターすることが可能です。
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ではバージョン5.0からエディタが「ブロックエディター」に変更になっています。 この記事でもブロックエディターの説明を行っています。 また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。 入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。     予約投稿の方法 「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。 公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。 カレンダーが表示され、日時を自由に決めることができます。 トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。 今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。 設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。   カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。 新規カテゴリーの作成方法 ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。 名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。 スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。 未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。 また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。   新規タグの作成方法 ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。 タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。   ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。 管理画面のユーザーをクリックすると、新規登録・編集画面になります。 権限グループごとに何ができるのか 新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。 購読者 WordPressにログインすることが可能。プロフィールの変更が出来る 寄稿者 記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません 投稿者 記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない 編集者 他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない 管理者  全ての権限がある となっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。 投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。 編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。   新規ユーザーの登録方法 管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。   必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。 権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。   ユーザーの削除方法 管理者の権限を持つユーザーでログインすると、削除することが出来ます。   パーマリンクの設定 パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。 ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。 中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。 この部分をある程度自由に変更することが出来ます。   パーマリンクの変更 パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。 デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。 基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。 月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。 投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。   パーマリンクのカスタム構造 パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。 カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。 ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？ どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。   テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。 個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。   テーマの変更方法 左メニューの「外観」から「テーマ」を選択します。   インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。   テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。   テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。   テーマの例 「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。   おすすめのテーマ 各シチュエーションで使えるWordPressのテーマを紹介します。 国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。 以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。 ブログサイト アルバトロス かなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。 有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。 カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。 アルバトロス   賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。 サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。 賢威   Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。 ダウンロード / DEMO   Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。 個人のブログサイトとしても活用できるので、ぜひ活用してみてください。 ダウンロード / DEMO   ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。 様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。 ダウンロード / DEMO   YITH Proteo ファッションやアパレル系のECサイトにおすすめです。 カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。 スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。 ダウンロード / DEMO   Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。 ブランディングとしての見せ方としても使えるのでおすすめです！ ダウンロード / DEMO   コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。 また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。 ダウンロード / DEMO   Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。 トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。 ダウンロード / DEMO   他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。   プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。 アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。   プラグインの検索とインストール 左メニューの「プラグイン」から「新規追加」を選択します。   テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。 インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。   プラグインの有効化 左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。   インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。   プラグインの例 SNSボタンのプラグイン 「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。 利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。   記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方   WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos   SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方   Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google
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メソッドに、年月日時分を指定して整数を渡すと、指定した時間の加算や減算を行なうことが可能です。 詳しい使い方はこちらの記事を参考にしてください。   DateクラスとCalendarクラスを変換する方法 ここでは、DateクラスとCalendarクラスを変換する方法について解説します。   Dateクラス→Calendarクラス CalendarクラスのsetTimeメソッドに、Dateクラス変数を渡して、下記のように記述しましょう。 Calendarクラス変数.setTime(Dateクラス変数);   Calendarクラス→Dateクラス この場合は、CalendarクラスのgetTimeメソッドを使うことで、下記のように記述します。 Date型 = Calendarクラス.getTime(); DateクラスとCalendarクラスを相互に変換することができれば、それぞれのメリットを使い分けることが可能です。   まとめ この記事では、Javaにおける日付、時刻を扱うクラスであるDate型とCalendar型の違いや変換方法について解説しました。 それぞれの使い方を把握しておくことで、効率的なデータ処理ができるので、ぜひ覚えておきしょう。   執筆してくれたメンター メンターOS AIプログラミングを使って開発を行う。 プログラミング歴は約3年。 Pythonは割と好きな方。J avaもAndroid開発で触れていたりする。 大学では物理学を勉強中。 好きな物理理論は一般相対性理論らしい。 意外と動物が好きだったり、、、。   大石ゆかり Javaのdateクラスとcalendarクラスの違いがよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaやServletの技術を使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Java

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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