Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?
@twtjudy1128

【個人開発への道①】初心者が、Nuxt.jsでFullCalendarを使ってカレンダーページ作りにチャレンジ!結果は・・・!?

こんにちは!たわちゃんです:sunny:

私は3ヶ月前からプログラミングを学び始めた初心者ではございますが、
プライベートでサービス開発にチャレンジしようとしております・・・!

その開発までの道のりを、これからQiitaにちょこちょこ書いていこうかなと思うので、
さりげな~く応援よろしくお願いします!:relaxed:

構想中のサービス

クラウドファンディング小.png
現在、考えているのがこちらのサービス!

私の兄はマジシャンをしているのですが、常日頃から告知や宣伝活動に困っているのを見てきました。

そこで、兄のような芸人さん、さらには個人経営の店主さんを対象に
告知専用サービスを作ろうと考えました!

主な機能は3つ
(1)スケジュールの管理・共有URLの発行
(2)SNSで簡単にシェア!
(3)告知用の画像もラクラク作成できる!

※「できる・できない」は度外視して考えた機能です!もちろん全部実現させる予定ですが・・・!

そこで、個人開発への道、第一歩として!

(1)の機能で使えるカレンダーページを作ってみることにしました!

前提

カレンダーページを作る前に、Nuxt.jsでサイトを作りました。
Image from Gyazo

トップページに「カレンダーを見る」というボタンを作ったので、
それを押すとカレンダーページに飛ぶようにしたいと思います!

いざ!カレンダーページ作り!

Nuxt.jsでカレンダーコンポーネント『FullCalendar』のVue.js版を使う
高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う

これらの記事を参考に、シンプルだけど機能性が高そうなFullCalendarを使ってページ作成にチャレンジしました!

FullCalendarをインストール

まず、以下のコマンドでFullCalendarのモジュールをインストール!

$ npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

FullCalendar用のプラグインファイルを作成

pluginsというディレクトリに適当な名前(今回はfullcalendar.js)でファイル作成し、以下の内容を入力!

plugins/fullcalendar.js
import Vue from 'vue'
import Calendar from '~/components/Calendar'

Vue.component('full-calendar', Calendar)

nuxt.config.jsに設定を追記

nuxt.config.js
// 省略
  plugins: [
     // 以下を追記
    { src: '~/plugins/fullcalendar', ssr: false }
  ],
// 省略

Componentを作成

componentsディレクトリにCalendar.vueという名前でファイルを作成し、以下を入力します。

components/calendar.vue
<template>
  <FullCalendar default-view="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data () {
    return {
      // 使用したいプラグインを以下で指定。事前にimportでインポートする。
      calendarPlugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin
      ]
    }
  }
}
</script>
<style>
@import '~/node_modules/@fullcalendar/core/main.css';
@import '~/node_modules/@fullcalendar/daygrid/main.css';
@import '~/node_modules/@fullcalendar/timegrid/main.css';
</style>

カレンダーを表示させる

私は既に作っていたuserPageというページで表示させたかったので、以下のように追記しました!
fullcalendarを表示させるdivを追加し、呼び出せるようにしました!

userPage.vue
<!--CSS省略-->
<template>
  <div align="center" class="page">

    <h1>My Calendar</h1>
    <div class="columns is-mobile">
      <full-calendar />
    </div>
    <router-link to="/login">
        <button class="btn-calendar"><a class="btn-text">TOPに戻る</a></button>
    </router-link>

  </div>
</template>

<script>
//省略
export default {
  name: 'Schedule',
//省略
    },
</script>

いざ、や~んでぶ!

さぁ、準備は整いました。ページを見てみましょう!
や~ん でぶっ!!!

$ yarn dev

Image from Gyazo

なぜだ・・・。

そのあと、色々模索するも、うまくいかず・・・。
一旦元に戻そうとすると、そもそものページも出ず、以下のようなエラーが。

Image from Gyazo

調べると、キャッシュが残っているとかなんとか。

不幸中の幸いなのかわかりませんが、カレンダーを入れる前の画面に戻す方法だけは会得しました・・・。

(1)node_modules と package-lock-json を削除
(2)以下のコマンドを実行

yarn install 
yarn dev

(参考記事▶nuxtプロジェクトの実行中にエラーが発生しました

こちらでエラーは消えると思うので、私のようにつまずいた方の参考になりますよう・・・。

とりあえずのGoogleカレンダー

FullCalendarはもうちょい調査が必要なので・・・
とりあえず何かカレンダー表示させられないかと調べました。

Googleカレンダーの埋め込みなら私でもできそうだったのでチャレンジ!

Googleカレンダーの設定 ▶ マイカレンダーの設定 ▶ 表示させたいカレンダーを選択 ▶ カレンダーの統合

この手順で埋め込みコードを取得することができます!

今回はとりあえず、こちらをuserpageに追加!

  <div align="center" class="page">

    <h1>My Calendar</h1>
    <iframe src="https://calendar.google.com/calendar/embed?src=twtjudy%40gmail.com&ctz=Asia%2FTokyo" 
    style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
  <br>
    <router-link to="/login">
        <button class="btn-calendar"><a class="btn-text">TOPに戻る</a></button>
    </router-link>

  </div>

これは簡単に表示されました。とりあえず良かった・・・。

結果まとめ&今後の課題

・Nuxt.js難しい…。FullCalendarを表示できるように、引き続きチャレンジ!
・CSSもひどいので、ライブラリとか使ってシンプル&見やすさを意識する
・PCとスマホどっちで見ても綺麗にするにはどうすればいいのか調べる
・エラーから学ぶことも多いので、エラー出てもくじけない

今回はうまく行きませんでしたが、これからチャレンジすることのハードルを認識できたので良かったです。

ちょっと楽観的になってる部分があったので、ちゃんと気を引き締めて、課題を把握し、
ひとつひとつ潰していかないとサービス完成しないなと・・・

不安と焦りは強くなりましたが、ストレッチきいた目標がある方が成長できると思うので頑張ります。

おまけ

ボタンを押すとページ遷移するっていうのを覚えたら楽しくなったので、
遊びのボタンを2つ作りました。

Image from Gyazo

「撃たれる」を押すと、以前自分で作ったステイサムに撃たれるアプリに飛びます。
image.png
参照▶ジェイソン・ステイサムに「死にたくないなら手を挙げろ!」と言われるのが夢だったので、自分でそんなアプリを作りました。

次に「映画を見る」を押すと、以前自分で作ったステイサムのオススメ映画を教えてくれるアプリに飛びます。

参照▶あなたにピッタリなジェイソン・ステイサムの映画を教えてくれるアプリを作りました【Vue.js】

たのしい・・・。

自分は遊びもどこかに入れないと、モチベが保てないということも今回でわかったので
全部ひっくるめてどういうサービスを作っていくか方向性を決めていくのも大事だとわかりました。

個人開発への道は長い・・・。

(つづく)

20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
twtjudy1128
知識ほぼ0状態から、プログラミングを学ぼうと覚悟を決めたアラサーです。
protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
20
Help us understand the problem. What is going on with this article?