Tweet
Tweet

Slide 1

Slide 1 text

s1280136 松本響輝

Slide 2

Slide 2 text

・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明

Slide 3

Slide 3 text

拓実 よろしくたのむよ

Slide 4

Slide 4 text

いいんじゃな いかな

Slide 5

Slide 5 text

おーすごい

Slide 6

Slide 6 text

よくできているな

Slide 7

Slide 7 text

HTMLファイル

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする

Slide 10

Slide 10 text

・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js（ヴュー・ジェイエス）またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい？

Slide 11

Slide 11 text

ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね

Slide 12

Slide 12 text

マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

ページの遷移 vue-routerを作る 内部でvue-routerが作られてる vuetify 使える 使える 初期設定 routerの設定とかが多い 自動的に設定されている サイトの生成 npm run buildでできる npm run generateでできる

Slide 15

Slide 15 text

・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！ ・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える aiueo.mdを呼び出せばいい あとはC++ファイルを呼び出せば・・・

Slide 16

Slide 16 text

URLに応じてマークダウンファイルを読 み込めない 読み込むのにwebpackのraw-loaderというのを使っていた

Slide 17

Slide 17 text

3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

/contentディレクトリに書き込むことで以下の形式のファイルを取得できる ・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを 呼び出せる→ あとはc++ファイルを呼び出せば…

Slide 20

Slide 20 text

豊富な拡張機能！ remark-○○をnpm install するとmarkdownで色んな拡張機能が使える！ 今回はremark-code-import-replaceというのを使いました。 素晴らしい！

Slide 21

Slide 21 text

HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)

Slide 22

Slide 22 text

HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!

Slide 23

Slide 23 text

1.GitHubでリポジトリを作っておく GitHubに登録して を押してリポジトリを作る

Slide 24

Slide 24 text

1.GitHubでリポジトリを作っておく cloneする 作業中… addして commitして pushする pullする

Slide 25

Slide 25 text

2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンド こんな簡単にできるのか

Slide 26

Slide 26 text

3.push-dirの設定をする ・ベースパスの設定をする 「/」→「/リポジトリ名/」 ・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。 「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」 にする必要がある。

Slide 27

Slide 27 text

4.コマンド一つで公開! $ push-dir --dir=dist --branch=gh-pages Github Pagesにページをのっける --dir=dist さっきnpm run generateで作ったdistディレクトリをGitHub Pagesにのっける --branch=gh-pages ブランチをgh-pagesという名前で作成する (ブランチは複数あるセーブデータの内の一つみたいなもの) ↓公式ドキュメント https://github.com/L33T-KR3W/push-dir

Slide 28

Slide 28 text

HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける

Slide 29

Slide 29 text

君もホームページを作ってみないか？