Laravel Novaをインストールしてみる

一緒にお仕事させてもらってるLaravelの案件で、Laravel Novaを使う場面がでてきたので、いろいろ調べたことを何回かに分けて記事にしていきたいと思います。今回は導入編ってことで、Laravel Novaをインストールしていきます。

Laravel Novaとは

Laravelの開発者であるTaylor Otwellが発表した公式の管理画面作成用のパッケージとなっています。 フロントエンドではVue.jsやVue Router、Tailwind.cssが使用されたSPAで構築されており、優れたデザイン性を持った管理画面を構築することができます。 Eloquentモデルに触れることなく、既存のLaravelアプリケーションに簡単に導入することが可能で、その他にもいろいろな機能を持っており、簡単な操作でカスタマイズができるようになっています。

Laravel Nova - Beautifully-designed administration panel for Laravel

要件

  • Composer
  • Laravel Framework 5.6+
  • Laravel Mix
  • Node.js & NPM

なお、Laravel Novaは有償となっており、使用するにはサイト毎にライセンスの購入が必要となります。 ライセンスの購入はこちらから。

インストール

Laravel Novaをインストールするには2種類の方法があり、一つはNovaソースコードを含むzipファイルを直接ダウンロードしてインストールする方法、もう一つはNovaのプライペートリポジトリを使用してComposer経由でインストールする方法です。

今回は後者のNovaのプライペートリポジトリを使用したインストール方法について紹介したいと思います。

まずはcomposer.jsonにNovaリポジトリを追加します。

"repositories": [
    {
        "type": "composer",
        "url": "https://nova.laravel.com"
    }
],

composer.jsonlaravel/novaのパッケージを追加します。

"require": {
    "php": "^7.1.3",
    "fideloper/proxy": "^4.0",
    "laravel/framework": "5.6.*",
+   "laravel/nova": "~1.0"
},

そしてcomposer updateを実行します。

$ composer update

この時、以下のように資格情報が求められます。

f:id:rnakamine:20181006084533p:plain

これらの資格情報は、Novaソースコードをダウンロードする権限を持っているとしてComposerセッションを認証します。自動で資格情報を入力するようにするには、auth.jsonファイルを作成します。

getcomposer.org

auth.jsonを以下のようにユーザーとパスワードを入力し、composer.jsonと同じプロジェクトの直下に配置します。

{
    "http-basic": {
        "nova.laravel.com": {
            "username": "{ユーザー}",
            "password": "{パスワード}"
        }
    }
}

次にnova:installmigrateを実行し、novaのサービスプロバイダとアセットファイル等をアプリケーション内にインストールします。

$ php artisan nova:install
$ php artisan migrate

nova:publishコマンドを実行し、アセットファイル等をpublicディレクトリにコピーします。

$ php artisan nova:publish

f:id:rnakamine:20181009190025p:plain

ここまででインストール完了なので、実際に管理画面にアクセスしてみます。

管理画面にアクセス

デフォルトは/novaで管理画面にアクセスすることができます。

/novaは変更可能

f:id:rnakamine:20181010003116p:plain

標準では認証にUsersテーブルが利用されるので、登録済みのユーザーでログインします。 すでにUsersリソースはNova上で操作ができる状態になっています。

f:id:rnakamine:20181010003553p:plain

パッケージをインストールしていくつかのコマンドを入力すれば、あっという間にここまで作ることができてとても便利です。

次回はNova上で各リソースの扱い方について書いていきたいと思います。

すでにindex貼られているカラムに対してunique制限をかける方法 - ruby on rails

すでにindexが貼られているカラムに対して、以下のようにmigrationファイルを編集してunique制限をかけようとした時に

def change
    add_index :users, :email, unique: true
end

そのままdb:migrateすると

Index name 'index_users_on_email' on table 'users' already exists

と怒られてしまうので、その対策メモ

対応

そのままindexを追加すると既に存在するということでエラーがでてしまうので、 一旦、indexを削除してからunique制限をかけると、上手くいった

def change
    remove_index :users, :email
    add_index :users, :email, unique: true
end

参考文的

stackoverflow.com

カラムの型をstringからintegerやbigintに変更しようとしてエラーが出た時の話

カラムの型をstring型からbigint型に変更しようと思って以下のようにmigrationファイルを編集して

class ChangeColumnParentStringToBigint < ActiveRecord::Migration[5.2]
  def change
    change_column :categories, :parent_id, :bigint, null: true
  end
end

rails db:migrateしたところ...

-- change_column(:categories, :parent_id, :integer, {:nill=>true})
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DatatypeMismatch: ERROR:  column "parent_id" cannot be cast automatically to type integer
HINT:  You might need to specify "USING parent_id::integer".
: ALTER TABLE "categories" ALTER COLUMN "parent_id" TYPE integer

とエラー出てしまいます。 日本語に直すとこんな感じです

自動的に整数型にキャストすることはできません "USING parent_id :: integer"を指定する必要があります。

その後、Rollbackしたりして色々やって結構ハマったのでメモ

対応

変更後の型を:bigintと書くのではなく'bigint USING CAST(parent_id AS bigint)'とすることで解決しました

class ChangeColumnParentStringToBigint < ActiveRecord::Migration[5.2]
  def change
    change_column :categories, :parent_id, 'bigint USING CAST(parent_id AS bigint)'
  end
end

integerでも同じように解決できます。

参考文的

stackoverflow.com

qiita.com

Golangの勉強を始めた

普段はRuby on Railsを勉強しているが、Go言語もやらないとなーと思いつつ、先日okinawa.goの勉強会があり、Tour of Goをやるということだったので、その前にまずはドットインストールで事前に学習。その時のメモ。

ちなみに今回の勉強会は出張で参加できなかったので、次はぜひ行きたい。

okinawa-go.doorkeeper.jp

Go言語とは

Go言語は2009年にGoogleが開発した比較的新しい言語で、シンプルな仕様言語、C言語を元に作られているためコンパイルや実行が高速で並行プログラミングに強い。

まずはお約束のHello wolrd

Go言語のプログラミングは何らかのパッケージに属している必要があり、そのうちの一つは かならず mainでなければならない

package main

mainパッケージの中でmain関数があればそれを実行するようになっている

func main() {
}

hello worldと表示させたいので、入出力をするためのパッケージをインポートさせる。 Go言語にはfmtという入出力するためのパッケージが標準で用意されている

import "fmt"

fmtパッケージでは改行付きで表示させるためのPrintlnというメソッドを使うことができるので、これを使ってhello worldを表示させる

func main() {
    fmt.Println("hello world")
}

Go言語は.goという拡張子が推奨されているのので、今回はhello.goというファイル名で、上記で書いたプログラムをまとめたのがこちら

package main
    
import "fmt"
    
func main() {
    fmt.Println("hello world")
}

Go言語の実行

Go言語はコンパイル型の言語なので、go buildコマンドでコンパイルさせる必要があり、 そこで出来た実行ファイルを実行していく

$ go build hello.go
$ ./hello 
hello world

go runコマンドを使うと、コンパイルして実行してくれるので、これでやるといいかも

$ go run hello.go           
hello world

プログラミング教室@CODEBASE 講座3〜4日目

はじめに

先日からCODEBASE主催のプログラミング教室を受講させてもらってます。
今回は講座の3〜4日目の内容について書いて行きます。

講座1〜2日目の内容はこちら

rnakamine.hatenablog.com

HTML, CSS(プログラミング講座3日目)

  • HTMLとは
  • CSSとは
  • HTMLとCSSの関係性
  • Google Chrome 開発ツールの使い方
  • HTML, CSSデザインのトレンド

90年代のWebサイトから現在までのフロント側の技術の流れを見て行きました。

liginc.co.jp

miz2403.com

appleとかgoogleの昔のwebサイトを見ているととても歴史が感じられます。 HTMLの組み方も今と全然違くて、そこをChromeの開発ツールで見ていくのが面白かったです。 divではなくて tableiframe タグを駆使して組んでるのが印象的でした。

こちらで、ウェブの技術やブラウザの技術の歴史の流れを見ることができて面白いですよ。

www.evolutionoftheweb.com

また、HTML5やCSS3のブラウザでのサポート情報が見れる Can I use は是非活用すべき! 私自身も前々職あたりで使用した経験があります。当時はIE6(だったかな?)ぐらいのとても古いブラウザにとても苦しめられてた記憶が。。。

  • MDN

コード書いているなかで、何かつまずいたりしたら、まずはドキュメントを見る癖をつけなきゃなと感じました。 そのなかでも、Mozilaが運営しているMDNのドキュメントはかなりおすすめ。 何か調べ物をする時だけではなく、ざっと目を通すだけでも勉強になります。

  • HTMLの最近の書き方の傾向
    • レイアウト
    • bootstrapとjQueryの功績

jQueryJavascriptのライブラリの一つで、昔のブラウザ毎の仕様がバラバラな時代、その差分を吸収してくれ、DOMの操作も手軽にでき、人気だったのですが、今はブラウザの技術も上がり、本質的な役割は終わったので、積極的にjQueryを使っていく必要がなくなったのかな。 生のJSでもいろんなことができるようですが、まだまだjQueryが使われているところが多いみたいなので、今から勉強するのも全然需要あるのではと思います。

BootstrapはCSSフレームワークTwitter社が提供しています。 Gridシステムを使い、簡単にイケてる感じのデザインのページを作ることができます。

qiita.com

クラスを追加するだけで簡単にボタンが出来たり、レスポンシブ対応させたり、タブを作れたりと かなり便利で慣れれば使いやすそうな印象。テンプレートも豊富で、デザインにあまりお金や時間をかけたくなければぜひ使った方がいいと思います。

Bootstrap(プログラミング講座4日目)

  • Bootstrapとは

先程も出てきましたが、引用させて頂くと、

Twitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。

現在はBootstrap4がリリースされています。

主な変更点は

  1. 使用しているCSSプリプロセッサーがSassに変更された
  2. 基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更された
  3. グリッドシステムがflexbox対応になり基準のサイズ名が変更になった
  4. Panelsが廃止され、Cardsが追加された
  5. 汎用クラスが追加された
  6. 各種記述法が変更された

となっています。

参照: Bootstrap4の変更点についてまとめてみた | will STYLE Inc.|神戸にあるウェブ制作会社

テンプレート自体も豊富で、無料で提供しているものから有料なものまであり、 デザイン力がなくてもいい感じのページが作れたりします。 海外製のテンプレートが豊富とのこと。

  • Bootstrapの書き方
  • 実際にBootstrapのテンプレートを使ってサイトを作ってみよう

この日は実際に公式サイトからテンプレートを探してきて、Bootstrapの読み込みから各自行い、 簡単なWebサイトを作成する時間が設けられました。

テンプレートの枠にはめて編集していくのが逆に難しくて、いい感じの仕上がりにはならなかったですが、公式ドキュメントを見ながらCarousel Slider(カルーセルスライダー)などを実装して動かすことができたので良かったです。

受講生でも何名かいい感じのWebページを仕上げていたので、素晴らしかったです!

この一週間でやってきたこと(自主学習)

prog-8.com

  • ドットインストール Bootstrap

Bootstrap 4入門 (全22回) - プログラミングならドットインストール

  • 楽しいRuby(15章まで)

たのしいRuby 第5版

たのしいRuby 第5版


最後に

プログラミングスクールも2周目に入り、そろそろ受講生の顔と名前も覚えてきて、 学生と授業を受けるのが専門学校以来なので、楽しいです! 自主学習時間もいい感じに確保できているので、あとはしっかりスキルをつけていきたいと思います。

プログラミング教室@CODEBASEを受講することになりました

はじめに

先日の4月9日からCODEBASE主催のプログラミング教室に約2ヵ月に渡って受講することになりました。

peraichi.com

私は2期生として、このプログラミング教室に通っています。
実は1期生での応募をしようとしていたのですが、すでに募集が終わっていたこともあり、2期生の募集がかかった瞬間に若干フライング気味で応募しました!笑
無事、書類選考や面接を通過し、今週から受講させて頂くことになりました。

1期生の講座の内容はこちらを参考にさせて頂きました。

shimabukuromeg.hatenadiary.jp

CODEBASEとは

株式会社プロトソリューションが主体となって、これからITスキルを身に付けたい方や、すでにエンジニアやクリエイターとして活動されている方が集う場所を目指し、様々な勉強会やイベントを開催しながら、西海岸をITで盛り上げようといったことをしているようです。

www.protosolution.co.jp

プログラミング教室ではどんなことをするのか

Webの仕組みなど初歩的な知識の習得から入り、最終的には学習した内容で、独自でアプリケーション開発を行っていきます。

主にHTML・CSSJavascriptRubySinatraフレームワーク)を学習してアプリケーションを開発を行います。

使用する技術の内容は

を2ヵ月間集中して学んでいきます。

なぜ応募したか

元々、学生時代にC言語Javaを学習していた経緯もあり、プログラミングに触れる機会が多少はありました。

現在はネットワークエンジニアとして働いており、主に民間企業、地方自治体、病院のネットワークなどを構築・運用したりしています。

以前からWebプログラミングに興味があり、ProgateやドットインストールでPHPRubyなどを独学で勉強してはいたものの、特に何か作ろうというものが無く、その先に進めなかった感じです。

今回は一から自分でWebアプリケーションを開発し、いずれはWebエンジニアとしても働けたらなと思い、そのきっかけとなるものが欲しかったので、応募しました。

また現役でWebエンジニアとしてお仕事をしている方々が講師なので、そういう方達のお話を聞いてモチベーションUPに繋げたかったのも理由の1つです。

プログラミング教室が始まるまでにやったこと

今回のプログラミング教室は週に2日間ですが、月100時間以上の自主学習を想定したカリキュラムになっています。
まずは自分の自主学習時間の確保を行いました。
私は2歳になる息子がいるので、仕事から帰ってきてからの学習は厳しいと思い、 朝かなり早めに起きて学習時間を確保することにし、試験的に一週間程度試してみたのですが、正直とても良い感じです。
早朝だと誰にも邪魔されない(息子が起きてきたら終わり...)のと、朝はスッキリしていて非常に集中力が高まります。

以前から、業務に使っているネットワーク技術の勉強や、資格試験勉強なども早起きして行っていた経験もあり、今回も1週間程度試してみて、結構今では習慣化なりつつあるのではないかと思っています。

suzuki-kaikei.net

試験的に一週間程学習時間を確保したなかで行った学習は、
プロになるためのWeb技術入門を一通り読んで、Webに関する基礎知識の学習を進め、プログラミング教室の自主学習でProgateを2週ずつ進めるようにとのことだったので、 ProgateのHTML / CSS / Rubyのレッスンを2週ずつ行いました。

前職で、Webデザインをしていたこともあって、この辺りは問題ないかなと思っていましたが、全然そんなことなく、まだまだ分からないことが多くてかなり勉強になりました。 中でも、セッション管理についてや、アプリケーションサーバーの動きなど、その辺りがとてもためになっています。

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

prog-8.com

オリエンテーション(プログラミング講座1日目)

1日目の講座は主に - 講師・受講生の自己紹介 - エンジニアとしての働き方について - カリキュラムの紹介・講義の進め方 - Slackの説明・各自目標設定等 と言った内容でした。

鈴木さんのエンジニアとしての働き方についてでは、SIerとWeb系の働き方や開発手法の違いや、リモートワークやフリーランスとしての働き方についてなど、非常に興味深い話が聞けました。

SIerあるある的な部分も少し聞けて、共感する部分もあって面白かったです。

また、さぼさんの自分をいかに中毒に持っていけるかみたいな話はとても為になることばかりで、例えばやる気ってあまり重要ではなく、ハマる仕掛けさえ作ってしまえば、自動的に学習する習慣が身につくようです。

考えてみれば私自身、資格試験の勉強でも、がっつり勉強するというよりは、例えば空いた時間にパッて出来るように、問題などスマホから見返せるような仕組みをつくり、無意識に問題を解くことばっかやってたら、気づかないうちに相当な勉強量になってたりとか、今思うとハマる仕掛けが出来ていたのかなーとか思います。

saboyutaka.hatenablog.com

Webの基礎、Learn to Research(プログラミング講座2日目)

2日目はいよいよ本格的な講座が始まり、Webに関する基礎知識についてでした。

  • Webの基礎

    • WebサイトとWebアプリケーションの違い
    • ブラウザ
    • Webアプリケーションの構造(アーキテクチャ)
    • クライアントってなに
    • サーバーってなに
    • HTTPとは
    • コラム: P2PブロックチェーンとdApps
    • コンピューター基礎
    • Webアプリケーションの構造
    • プログラミングについて
    • プログラミングはどんなところで使われているか
    • なぜプログラミングの最初にWebアプリケーションを学ぶのか
    • プログラミング言語の違い
  • Learn to Research

    • ググり方
    • 公式ページ
    • コミュニティページ
    • Web標準を決めてる団体
    • Webの仕組みを理解する

f:id:rnakamine:20180415072818p:plain

Webの基礎については、事前予習してたこともあり、すんなり頭に入れることごできました。ブロックチェーンのところは時間が無くてできなかったので、機会があればお話聞きたいと思ってます。 プログラミング言語について、様々な言語の特徴などを押さえることができました。

Learn to Researchに関しては、とても勉強になりました。検索対象の期間を絞ることは非常に重要で、古くなった情報はできるだけ疑いを持つことや、Google Trendで検索対象の人気の動向を調べることができたりと、初めて知ることばかりでした。

おすすめのドキュメントの紹介や、公式ドキュメントを活用することの重要性など、今後のために非常に重要なお話が聞けました。

最後に

みんなSlackを使って「今〇〇勉強してる!」「ここがわからない!」などの会話がいつも飛び交っており、それを見て、とても刺激になっています。

また、この講義の内容で受講料は書籍以外は株式会社プロトソリューションが負担してくれて本当に有難い限りです。。

目標に向かってしっかり計画的に学習していこうと思います。

Okinawa.rb Meetup! @ ギークハウス沖縄 Ruby入門環境構築編 & もくもく回に参加した

はじめに

先日行われた、Okinawa.rb Meetup! @ ギークハウス沖縄 Ruby入門環境構築編 & もくもく回に参加してきました。

okinawarb.doorkeeper.jp

今回は環境構築編ということで、今までProgateやドットインストールでしか学習経験がない僕にとって、ローカルでの環境構築をしたことがなかったので、かなり勉強になりました。

Okinawa.rb Meetupも、ギークハウス沖縄も初めてだったので、緊張しながらもいろいろ教えて頂きました。ありがとうございます!!

今回のレクチャーして頂いた内容を自分なりにまとめてみました。

1. brewインストール

今回は参加者全員インストール済みだったので、特に説明は無し。

ちなみに、brew(ブルー)とはMac OS上でソフトウェアの導入を単純化するパッケージ管理システム。

2. rbenv, ruby-buildのインストール

rbenvとは、簡単に言うと複数のRubyのバージョンを切り替えられるツール。

ruby-buildは、rbenv installというコマンドを提供しているrbenvのプラグインで、Rubyをインストールするためによく使われている。 ruby-buildをアップデートすれば、最新版のRubyを引っ張ってくることができる。

  • rbenv、ruby-buildインストール
$ brew install rbenv ruby-build
  • 環境に合わせてパスを通す
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
  • 設定内容を反映
$ source ~/.bash_profile
  • バージョン確認
$ rbenv -v
rbenv 1.1.1

$ ruby-build --version
ruby-build 20180224

3. rbenvの使い方

  • 利用可能なRubyのバージョンを確認
$ rbenv install --list
Available versions:
  1.8.5-p52
  1.8.5-p113
  1.8.5-p114
  1.8.5-p115
  1.8.5-p231
  1.8.6
  1.8.6-p36
  1.8.6-p110
  1.8.6-p111
  1.8.6-p114
  1.8.6-p230
  1.8.6-p286
  1.8.6-p287
  1.8.6-p368
  1.8.6-p369
  1.8.6-p383
  1.8.6-p388
  1.8.6-p398
  1.8.6-p399

・・・

  rbx-3.87
  rbx-3.88
  rbx-3.89
  ree-1.8.7-2011.03
  ree-1.8.7-2011.12
  ree-1.8.7-2012.01
  ree-1.8.7-2012.02
  topaz-dev
  • 利用したいRubyのバージョンを指定してインストール
$ rbenv install 2.5.0
  • インストール済みRubyバージョン確認
$ rbenv versions
* system (set by /Users/rnakamine/.rbenv/version)
  2.5.0

「*」が付いているのが、現在設定されているRubyのバージョン(systemはMac OSにデフォルトで入っているバージョン)

~/.rbenv/versionの配下にインストールされたRubyが配置される。

  • グローバル(全体)のRubyのバージョンを変更(rbenv global <Ruby Version>を使う)
$ rbenv global 2.5.0
$ mkdir sample
$ cd sample

$ rbenv local 2.5.0

localでバージョンを指定することによって、sampleディレクト以下のRubyのバージョンを変更できる。 プロジェクトに毎にRubyのバージョンを変えたい場合はこれを使う。

4. bundlerとは、 bundlerの使い方

bundlerはgem同士の依存関係を保ちながら、gemの導入・管理を行ってくれる。

  • bundlerのインストール
$ gem install bundler

5. Sinatra, Railsのを作ってみる

Sinatra

適当なディレクトリを作成し、rbenvでRubyのバージョンを指定。今回は2.5.0を使用

$ mkdir sinatra-sample
$ cd sinatra-sample

$ rbenv local 2.5.0

Gemfileを作成

# Gemfile
source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'
  • sinatraで使用するgemを記述して一括インストール
$ bundle install --path=vendor/bundle

--path=vendor/bundleを付け加えることで、gemをディレクトリ内のvendor/bundleにインストールすることができ、アプリケーションごとにgemを管理できるようになる。

  • app.rbを作成
# app.rb
require 'sinatra'
require 'sinatra/reloader' if development?

get '/' do
  'Hello world!'
end
$ bundle exec ruby app.rb

bundle execを付けることによって、ディレクトリ内のgemを指定してコマンドを実行することができる。

ブラウザで下記にアクセスし、「Hello world!」と表示されればOK

http://localhost:4567

Rails

適当なディレクトリを作成し、rbenvでRubyのバージョンを指定。今回は2.5.0を使用

$ mkdir rails-sample
$ cd rails-sample

$ rbenv local 2.5.0
  • railsをインストール
$ gem install rails

バージョンを指定しない場合、最新版がインストールされる

  • Railsプロジェクト作成
$ rails new sample-app --skip-bundle

--skip-bundleを指定しないと、bundle installが行われ、ローカルのRuby自体にgemがインストールされてしまう。「-B」でもOK

  • sample-appディレクトリに移動、gitの管理対象からvendor/を外す
$ cd sample-app
$ echo 'vendor/' >> .gitignore
  • Gemfileに記述されている内容を一括インストール
bundle install --path=vendor/bundle
$ bundle exec rails server

ブラウザで下記にアクセスし、「Yay! You’re on Rails!」と表示されればOK

http://localhost:3000

6. RubyMine の使い方

特に説明はなかったが、とりあえず、コードジャンプ機能がすごいとのこと。 初心者のうちは絶対使ったほうが良いみたいなので、今後取り入れようか検討中。。。

今回参加してみて

gemって何?bundlerって何?の状態からだったので、頭の中を整理するのが結構大変でしたが、 実際にRubyで開発する上で必要なことなので、かなり勉強になりました。

一般的にはこの方法がよく使われます!みたいなこともいくつか教えて頂いたので、とてもためになりました。

個人的には、今回のレクチャーして頂いた内容以外にも、 実際にお金をもらえるようになるには1000時間必要だったりと、 そういった話なども聞けて技術以外にも収穫がありました。

1000時間とか本当にまだまだでこれからもかなり長いですが、頑張ります!笑

実際のエンジニアの方の話を聞いて、とても刺激的になった勉強会でした。 次回もぜひ参加させて頂きます!!

何気に初ブログ投稿で、一つの記事を仕上げるのにめちゃめちゃ時間がかってしまった。 これだととても効率が悪いので、普段からブログを書くくせをつけていこうと思った。