CATEGORY Web開発

Headless CMSを作る

最初の業務で使ったVue.jsと業務で使うことの多い.NET系のフレームワークで何か作ってみたいと思い、Headless CMSでブログを作ってみた。CI/CDまで組んで継続的に開発をしていこうと思ったら土台を作るだけで1週間ほどかかったのでその時の手順を後世に残していこうと思う。 Headless CMSの選定 Vueの公式サイトではButter CMSを使ったブログの作成手順が紹介されているがこれは個人利用であってもお金がかかってしまうため、1ユーザーであればFreeのPrismicを使った。Prismicは言語ごとのチュートリアルがものすごく充実しているのでやりたいことは探せばほぼDocumentに乗っていると思う。これで無料はヤバイ。 ローカルで動かす。 .NET Coreプロジェクトの作成 以下のコマンドで.NET Coreプロジェクトの作成とSPA Extensionパッケージの追加をやります。

ここにVue cliプロジェクトを追加し、Coreに設定を追加していきます。 Vue.jsを埋め込むための設定 PrismicのGitHubにVueのテンプレートがあるのでクローンします。

npm installも忘れずに ここまででフォルダ構成はこんな感じ

次は.csprojを書き換えていきます。vue cli使ったことのある人なら見覚えのあるコマンドが並んでいるはず。

コード側 Vue.jsとCoreを繋ぐコードを書きます。

次にStartup.csの編集

これで.NET Coreの上でVue.jsを動かすことができます。

QuasarでMarkdownを表示する

Vue CLIにQuasarをプラグインを入れた状態からマークダウンを表示させるところまでのメモ。 前提

でQuasarが導入されていること。 QMarkdown導入 Quasarの拡張機能として@quasar/quasar-ui-qmarkdownをインストールしてこれをVue CLIからプラグインとしてMarkdownの表示を実現します。

QMarkdownの概要は公式から Quasar公式ドキュメント 今回はVue CLIを使うのでGitHubにあるドキュメントの方が参考になります。 QMarkdown – Vue CLI project quasar.jsに以下を追記

マークダウンを表示させたいコンポーネントに以下を追記 〜.vue

DjangoとMySQLを接続する

DjangoとMySQLを接続した時の備忘録です。 MySQLの設定を確認 Django側の設定で必要な項目は、 データベース名 ユーザー名(権限を持っている) ユーザーのパスワード ホスト名 ポート番号 です。これらを実際に調べていきます。 MySQLサーバーへ入る

¥sでデータベースの情報を取得します。

ユーザー名:Admin ホスト名:loaclhost になります。 ユーザーの作成方法、権限を付与する方法などは、公式ドキュメントを参照してみてください。 【MySQL】公式マニュアル 作成したデータベース名は"DiaryApp"にしました。

Django側の設定 次は、Django側の設定です。 setting.pyに設定を足すのと、models.pyを作成します。

マイグレーション models.pyに書いた「モデル」をデータベースに反映させます。

MySQLに入って、正しくテーブルが作られているか確認してみます。

Djangoで新規にモデルを作成したのにmigration時に「No changes detected」となった時の対処法

Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。 モデルを変えたのになぜ???と思ってググルと

とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実

Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考:Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。

で準備を整えたら、必要な設定をしていきます。

コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ

main.js main.jsにてVue Routerをプラグインとして登録します。

App.vue 最後にrouter-viewで読み込んで、Vue Routerが動くようになります。

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 $emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント(App.vue)

子コンポーネント(Checkbox.vue)

$emitを使ってみて 処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。 これは何度も使って慣れるしかないかも

子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。

Vue.jsにQuasar Frameworkを入れてみる

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、

と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。

実行する時のコマンドはvue cliと同じ。

Quasar拡張機能 Quasar – App Extension Quasarには色々な拡張機能が存在しています。QMarkdownを試してみたので、こちらの記事も是非👇 QuasarでMarkdownを表示する

Djangoの開発環境を作る

Djangoの開発環境を作成した時の備忘録。 2020年2月17日にコピペでCentOS7の初期設定、PythonインストールからMySQLサーバーにログインまでできることを確認。 作成する環境 OS : CentOS7 Database : MySQL フレームワーク:Django 言語:Python3.7 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。

次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。

出来上がった、Vagrantfileを開き、以下のような行を追加します。

これで、PCのVagrantfileと同じディレクトリ のworkspace`フォルダと仮想マシーンの`django_rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。

で仮想マシーンを起動させ

runnningになっていることを確認したら。

仮想環境に接続します。 これで仮想環境の構築までは完了! 基本設定

パスワードを聞かれた場合はvagrantと入力します。 Python環境を整える 今回は、仮想マシーン上でpyenvを使うことにします。

MySQLインストール参考 How to Install MySQL on CentOS 7 MySQL5.7の初期設定はこちら CentOS7にMySQLをインストールした時の備忘録…

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。

そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。

親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。 次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。 ソースコードを実行するとこんな感じ